Lemniscate Chart D3.js

[Piyush.D3.India]

Hi Friends,

Is it possible to Construct a Lemniscate Chart in D3.js ?  We have a requirement to make a chart similiar to the attached file in D3.js.

Please see the attached.

I will be really grateful to those who  repond over this.

Regards

Piyush Dubey

[Frank Guerino]

Hello Piyush,

While I have not done so yet, myself, I don't believe there is any reason why it cannot be done.  At the heart of the problem is the conversion of Polar Coordinates to Cartesian Coordinates.  However, before doing so, you will have to reconstruct the D3 default grid to conform to a traditional Cartesian Coordinate Grid.

As I'm sure you're aware, D3 uses a grid-based coordinate system that is a flipped and offset form of a traditional Cartesian Coordinate System.  D3 origin (0,0) starts in the upper left corner of the SVG grid.  X progresses positively to the right and Y progresses positively in the downward direction.

You will have to transform the default D3 grid to support a more traditional Cartesian Grid, where the origin (0,0) is in the center of the SVG grid and where X positive progresses to right of origin; X negative progresses to the left of origin; Y positive progresses up; and Y negative progresses down.  In summary, X gets shifted to the right by about 50% of your SVG width and Y gets flipped.

Once you have your new Cartesian Grid, you'll have to transform your polar coordinates, calculated using your Lemniscate functions to fit your new Cartesian Coordinate Grid.

I think Paul Cowan does a great job of explaining Axes control and setup, just for such purposes in his article "Negative Axes and Axes Positioning With d3.js"

Also, I suggest looking at the link: https://www.mathsisfun.com/polar-cartesian-coordinates.html , which should help understand how to transform between the two coordinate systems (Polar to Cartesian and Cartesian to Polar).

I hope this helps,

Frank

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.