Does anyone know of good examples producing a polar plot using the D3 Javascript libraries?
I've seen some rose plots like this and this, but I'm really looking for something more similar to the Matlab polar plot:
Any examples would be greatly appreciated. Thanks!
Sure, here you go:
The function is plotted using d3.svg.line.radial. The background radial grid is implemented as line, circle and text elements. One minor annoyance is that the code needs both radians (for d3.svg.line.radial) and degrees (for SVG’s transform attribute). I used rotated text labels because that was easy to do with SVG, but you could use non-rotated labels if you don’t mind a little trigonometry to position the text labels.
Note carefully the definition of the line’s angle: D3’s radial lines and areas proceed clockwise starting at 12 o’clock, while this plot proceeds counterclockwise starting at 3 o’clock!
Plotly lets you make interactive polar charts with MATLAB, Python, and R. The results are interactive, and rendered with D3.js. You can see a few MATLAB examples (code + interactive graphs) here.
Disclaimer: I'm on the Plotly team.
Related
I am trying implement the rotate on drag functionality in d3 for a 3d chart, for reference I am using following example from d3 but not getting the maths behind it.
Can anyone please explain me the math for rotation in this example
http://bl.ocks.org/supereggbert/aff58196188816576af0
as #coderPi mentioned you have to rotate and project every single point. Think about it like so: Your 3d point (x,y,z) can not be displayed on your screen because it only has x and y. To get the point onto your screen you have to project it. A very common projection is the orthographic projection. For the rotation you should use a rotation matrix (and there are various ones). If you don't want to do this all by your self, I created a decent d3.js plugin.
d3 is pretty cool and I just got started with it as a novice. There are several examples for histograms and I settled on this one. And I did a brief search for cumulative line chart, cumulative distribution, and cumulative frequency, all with respect to d3 but didn't find anything like what I was looking for, but the closest I came to was this, and in light of a better solution, I will try to pursue that and see if I can customize it for my needs. Ideally though, I'm looking for something akin to what Excel offers in terms of histogram with a cumulative frequency/distribution line overlaid on top (with its axis/label being the y-axis on the right). Is there such an equivalent capability with d3 (ideally available as an example/demo to work off of)? That way I have 1 chart rather than 2.
If no readily available examples/demo, any tips for extending my chosen histogram implementation with the cumulative frequency line on same chart with an axis label to the right? As I'm a novice, it will be hard/tricky for me to figure out on my own.
Would this example be close to what you are looking for? D3 has a histogram layout that does a lot of the computational legwork for you and can be plotted like any other bar graph. Just sum up the count data to create the CDF.
I am building an arc graph where the start and end points of the arcs are times in one day. I have a d3 scale that converts date objects into radians, but I need a scale with four ticks applied around the outside of the graph. I did it with jQuery, and you can see how it's supposed to look below
The problem I'm having is that the jQuery (and myself) is doing a poor job keeping those ticks at equal distances from the graph. Different screen sizes are making this a pain.
Does anyone have any idea how do create d3 time axis that is a circle? I've googled with no results.
Here is a link to the live site
I am trying to build a datanets where each axes (3) are the lines of a triangle.
But I can't find any clue / tutorial / part of the API that could help.
I tried to learn more on parallel-coordinates (http://eagereyes.org/techniques/parallel-coordinates) but it's not what I needed. I am now considering ternary plots like this:
And I can't find a way in D3.js to rotate an axis in order to make my desirated triangle.
(I am a very new at both dataviz development and D3.js : please excuse any heresy.)
How would you implement this with d3.js:
I started with sunburst diagram, but how to handle pics around circle? How to rotate them? etc. (assume each cheese has its png pic)
To add images, you can use the SVG image tag. The elements added in this way can be translated and rotated in the usual manner. The code you're going to need is essentially the same as for a pie chart with rotated labels, for which you should be able to find plenty of examples.
Here's a quick and dirty modified pie chart example that demonstrates the technique.