Looking to harness the power of SVG for a basic graph creation, but uncertain about the process of assigning JSON data dynamically using a 'for loop' to draw rectangles within SVG. Seeking guidance on setting up 1 loop to assign each value for drawing rectangles that will be appended to the SVG element.
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
window.onload = function(){
var data = [
{
"srno" : 1 ,
"status" : "production" ,
"duration" : 30,
"color" : "#00ff00",
},
{
"srno" : 2 ,
"status" : "idle" ,
"duration" : 5 ,
"color" : "#ff0000"}];
//Make an SVG Container
var svgContainer = d3.select("body").append("svg")
.attr("width", 720)
.attr("height", 50);
//Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", machines [1].duration)
.attr("height", 50)
.attr("fill","green");//Here I want the color from JSON object
//And I want duration to be the width property,
//Status be the tooltip , which is not working
</script>