simple D3 chart loading the external json file

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>D3 demostration</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
    
    <script>
      d3.json("data.json", function (data) {

                var width = 500; var height = 500;
                var canvas = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g").attr("transform", "translate(40, 0)");              

                console.log(data);
                canvas.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                .attr("width", function (d) { return d.age * 10; })
                .attr("height", 50)
                .attr("y", function (d, i) { return i * 60; })
                .attr("fill","red");
           });
        
    </script>
</body>
</html>

// Code goes here

/* Styles go here */

[
{"name":"shyam","age":20},
{"name":"ram","age":30},
{"name":"jai","age":50}
]