Visfest - Intro to D3.js

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <svg id="my-svg"></svg>
  <div id="test"></div>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("#my-svg")
      .attr("width", 960)
      .attr("height", 500)
    
    var awesomeData = [5,42,66,81,90
    ]
    
    
    svg.selectAll("circle")
    	.data(awesomeData)
   	.enter()
    	.append("circle")
    	.attr("r",function(d,i){
      	return d
    })
      .attr("cx",200, function(d,i){
    		return 50 + i * 100
    })
    	.attr("cy",200)
      .attr("fill","#4747ff")
      .attr("stroke","#c04fc4")
    	.attr("stroke-width",12)
    
//     var div = d3.select("#test")
//     .selectAll("div.bar")
//     .data("awesomeData")
//     .enter()
//     .append("div").classed("bar",true)
//     .style("position","absolute")
//     .style("width","50px")
//     .style("top", function(d,i){
//       return 50 +i * 50
//     })
//     .style("left","240px")
//     .style("width","50px")
//     .style("height",function(d,i){
//       return d
//     })
//     .style("background-color", "blue")

</script>
</body>

https://d3js.org/d3.v4.min.js