Curving a line chart inside a curved arc - javascript

I am new to D3 and learning it. I am trying to build a curved line chart. That is i want to bend the line chart inside a half circle. It will be helpful if any one can tell me how to approach this in D3.
Something as shown in the link below:
http://www.cs.toronto.edu/~jianzhao/snapshots/kronominer.jpg


This is very similar to drawing a line chart in Cartesian coordinates, but using D3's radial line function rather than the regular line function. Your line's x coordinate becomes the angle, and the y coordinate the radial distance.
var line = d3.svg.line.radial()
.radius(function(d){return r(d.y);})
.angle(function(d){return theta(d.x);});
This Fiddle shows a simple example with sample data.


Its called a Sunbusrt Chart, here is a few links to get you started.
Sunburst Partition By Mike Bostock here
Sequences sunburst By kerryrodden here
Hope it helps

Related

d3:Adding Axis like a Box

I have d3 graph with xaxis and Y axis.I want to add axis to the top and right to make it look like a box.
Something like This.

You could go through this article for adding multiple axes. You should create new axis generators and give the orient as 'right' and top and call them finally.
http://www.d3noob.org/2013/01/using-multiple-axes-for-d3js-graph.html
EDIT:
I have made a simple line chart with your requirements. Have a look at https://jsfiddle.net/j0kaLf59/
Also as mentioned in the comments, you could just add two line elements. Have a look at this fiddle https://jsfiddle.net/a6o2hkfq/
Reference:
Create a D3 axis without tick labels
http://www.tutorialsteacher.com/d3js/create-svg-elements-in-d3js

Cannot plot polyline on D3 spinning globe

I am trying to draw a polyline path on a Mike Bostock spinning globe and animate a circle along it. So far I have learned how to do that along a polygon such as in the following example which has a circle travelling along Russia borders: http://jsfiddle.net/xqmevpjg/11/
Using the same code as in the fiddle above, I tried to add a polyline (e.g. a maritime route in Asia). My coordinates I plug in as follows:
{"type":"Feature","properties":{"name":"AsiaRoute"},"geometry":{"type":"polyline","coordinates":[[
[93.36182, 19.83325],
[92.92236, 18.58833],
[89.01123, 16.02932],
[88.26416, 12.96642],
[88.13232, 10.94591],
[90.02197, 9.47548],
[94.021, 9.43213],
[94.72412, 12.2803],
[97.36084, 12.62359],
[97.49268, 11.42013],
[96.70166, 9.17192],
[96.43799, 6.99663],
[98.41553, 5.86126],
[99.38232, 4.54836],
[100.12939, 3.23307]
]]},"id":"RML"},
This however does not work. The animation does not appear and the path is not even drawn on the globe. The only thing I can do is as follows :
(a) change the polyline to a Polygon, but then it connects the beginning to the end of the path and messes up the animation, or
(b) change geometry type to polygon once again, but this time "mirroring" the coordinates back to front so that I end up with a polygon which looks like a line. This doubles the amount of coordinates unnecessarily and then I am forced to divide my path length by 2 so that the animation stops 'half way'.
Is there a reason why I cannot simply plot the polyline as desired?? Help please :)

Be it a GeoJSON or a TopoJSON, these are the accepted values for the geometry:
Point
MultiPoint
LineString
MultiLineString
Polygon
MultiPolygon
GeometryCollection
So, in your case, change polyline to LineString or MultiLineString.
Here is the specification for GeoJSON: http://geojson.org/geojson-spec.html#appendix-a-geometry-examples
And for TopoJSON: https://github.com/mbostock/topojson-specification/blob/master/README.md#22-geometry-objects

d3 legend (text + line representation)

I am a newbie to d3js and I am currently plotting some multiple line chart graphs. One thing I want to do is to add a legend for each line. I figured out that I can add some text and I can also give the text some color, which is same as the line's color. However, I would like to add some line representation in front of the text. For example,
Legend in Multi line chart - d3
as we can see here, the legend starts with a colored rectangle + text, and I want it a line (dashed line for example) rather than rectangle in front of the text.
Is there anyone can help me with this? Thanks a lot!

Draw plot bands between 2 points in x axis - Highcharts

I have been working with highcharts for a while now. I understand that we can draw plot bands like this
I need to get this customized like the one in the chart below, any pointers on how we could do it?

You need to use renderer (path with z option, which end shape)
http://api.highcharts.com/highcharts#Renderer

drawing svg:circle on d3.svg.area().interpolate("basis")

Here is my Code on JsFiddle I am using d3.svg.area() to draw an area and drawing the points as svg:circle on it. whch works okay If I change .interpolate('basis') to .interpolate('cardinal') or linear But how to put the points properly with basis interpolation ? e.g. I want to put the near match points

You can use the interpolation method "monotone" that will respect your y maximum and therefore your circles will not be displaced.
-Canimus

Categories

Resources