Clever Geek Handbook

D3 how to draw a chart with x data between two y data

I want to draw a diagram that can set x between two ys, for example I want to draw a diagram with x=100 and y1=200 , y2=500

only vertical line with good detail that can do it for me something like this image
enter image description here

With specific x and y Which graph should I use to draw this

+3


source to share


1 answer


You can see here how to make a diagram using d3.js

Histogram using d3

Now what you are trying to achieve is called a floating chart. Although there is no ready-made floating histogram in d3. But we can achieve this by making certain changes to the diagram itself. When we add Rectangle to the bar classes in the above example, just change the height attribute to

 .attr("height", function(d) { return height - y(d.higher-d.lower)


So it gives a rectangle from a point below to a higher one. Json is in this format

var jsonData=[
 {"letter": "A", "higher": .08,"lower": .05},
 {"letter": "B", "higher": .05,"lower": .03},
 {"letter": "C", "higher": .04,"lower": .02}   
]

SEE HERE

And for learning d3.js follow this link

+3


source






More articles:


All Articles