oefening2

<!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; }
    circle{fill:steelblue}
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
   
    var dataArray= [20,40,50,60];
    var width=500;
    var height=500;
    
    var widthScale=d3.scale.linear()
    	.domain([0,60])
    	.range([0,width]);
    
    var svg = d3.select("body")
    	.append("svg")
      .attr("width", width)
      .attr("height", height);
   var bars = svg.selectAll("rect")
    	.data(dataArray)
    	.enter()
    		.append("rect")
    		.attr("width",function(d){return widthScale(d)})
     		.attr("heigth",50)
				.attr("y",function(d, i){return i*100});
    
     var bars = svg.selectAll("rect")
    	.data(dataArray)
    	.enter()
    		.append("rect")
    		.attr("width",function(d){return widthScale(d)})
     		.attr("heigth",50)
				.attr("y",function(d, i){return i*100});
    
//     var ball = svg.selectAll("circle")
//     	.data(dataArray)
//     	.enter()
//     		.append("circle")
//     		.attr("r",20)
//     		.attr("cx",function(d){return *10})
// 				.attr("cy",function(d, i){return i*100});
    
//     var set=d3.set([1,2,3]);
  
//     var circle = svg.append("circle")
//       .attr("cx", 50)
// //   	  .attr("r", 20)
// 	  var circle = svg.append("circle")
//       .attr("cx", 100) 
//     var circle = svg.append("circle")
//       .attr("cx", 150)
      
//     var circle = d3.selectAll("circle")
//     .attr("r",20)
//     .attr("cy", 200)

</script>
</body>

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