[Solved]-D3 how to draw chart with a x data between two y data-d3.js

Here you can see how to make Bar Chart using d3.js

Bar chart using d3

Now the thing thing that you are trying to achieve is called floating Bar Chart.Although there is not any ready-made Floating bar chart available in d3. But we can achieve it by doing certain change in Bar chart itself. When we are appending Rectangle in bar classes in the above example just change the height attribute to

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

In this way it gives rectangle from the point lower to higher. 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 DEMO HERE

And for learning d3.js follow this link