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
With specific x and y Which graph should I use to draw this
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