<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="d3/d3.min.js"></script>
</head>
<body>
    <p>Hello!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="d3/d3.min.js"></script>
</head>
<body>
</body>
<script>
    var jsonCircles = [
        { "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green" },
        { "x_axis": 100, "y_axis": 100, "radius": 40, "color" : "purple"},
        { "x_axis": 200, "y_axis": 200, "radius": 50, "color" : "red"}];

    var svgContainer = d3.select("body").append("svg")
                                        .attr("width", 600)
                                        .attr("height", 600)
                                        .style("border", "1px solid black");

    var circles = svgContainer.selectAll("circle")
                              .data(jsonCircles)
                              .enter()
                              .append("circle");

    var circleAttributes = circles
                           .attr("cx", function (d) { return d.x_axis; })
                           .attr("cy", function (d) { return d.y_axis; })
                           .attr("r", function (d) { return d.radius; })
                           .style("fill", function(d) { return d.color; });
</script>
</html>
Add JSON based data to create SVG circles
Add JSON based data to create SVG circles
