search

d3 / d3-shape

Graphical primitives for visualization, such as lines and areas.
https://d3js.org/d3-shape
ISC License
2.48k stars 310 forks source link

RTL layout of charts for bidi languages such as Arabic / Hebrew #92

Closed tomerm closed 7 years ago

tomerm commented 7 years ago

Backgound

Many technologies support RTL (Right-To-Left) layout (aka mirrored layout) of charts. Oracle http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=dataVisualizations&demo=equationDemo

oracle_rtl

RAVE (IBM) https://www.ironsidegroup.com/2013/07/09/introduction-to-using-rave-visualizations-in-cognos-10-2-1-active-report/ https://www.ibm.com/blogs/ba-support-link/rave-customize-and-apply-visualizations/ https://www.youtube.com/watch?v=6DPA_8i60_I https://www.youtube.com/watch?v=75QrPFT6pT8

rave_rtl

Dojo https://dojotoolkit.org/reference-guide/1.10/dojox/charting.html#

dojo_rtl

How developer control layout of chart

Usually it is as simple as set some property on the object. Here are some samples for technologies mentioned above: Rave

rave.select("svg").mirror(false);  // LTR layout
rave.select("svg").mirror(true);   // RTL layout

Dojo

chart1 = new dojox.charting.Chart(...); 
chart1.setDir("ltr"); // LTR layout
chart1.setDir("rtl"); // RTL layout

What is missing in D3 ?

It is currently impossible to specify layout of chart. It is true that with a significant development efforts the desired effect can be achieved. However, this is not a practical approach for application developers.

What is suggested ?

My team is specializing in development of support for bidirectional languages such as Arabic / Hebrew for more than 20 year. We can contribute necessary code changes to D3. Before suggesting any code modifications we will publish a design document outlining the approach. Please let us know if you are willing to proceed with suggested collaboration. Many thanks in advance.

curran commented 7 years ago

Greetings,

Reversing the X axis in any D3 visualization can be achieved by swapping the minimum and maximum of the X scale range - changing [0, width] to [width, 0] would have the effect of mirroring the visualization horizontally.

As there are no chart components in D3, I'm not sure where this feature could fit within D3. Configurable charts only exist outside of D3, in higher level libraries like D3Plus, Dimple, Vega and others. Perhaps it would make more sense to add this feature in one of those libraries, rather than the core of D3.

mbostock commented 7 years ago

Agreed with @curran; I don’t believe this makes sense at D3’s low level of abstraction. You can use SVG’s support for bidirectional text via D3.

theiliad commented 3 years ago

I'm wondering if this actually makes sense...

I learned mathematics in Farsi, all the way up until grade 8 or 9, and I think mathematics don't flip in Farsi!

Sure I've seen charting controls flip, or even other text around the chart, but no the scales...

@tomerm I'd love to know about your experience. You don't have to answer this, but are you an Arabic or Hebrew speaking user? Would you mind chiming in on whether in Arabic or Hebrew charts actually are flipped out to show scales from right to left instead of left to right?