D3 Examples - d3 first bar plot

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
  </style>
</head>
​
<body>
  <div id='fuck'></div>
  <script>
    var margin = {top: 14, right: 10, bottom: 20, left: 10};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
   
    var svg = d3.select("body").append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
    var g = svg.append("g");
    data = [20, 70, 200, 500];
        divs = d3.select('body #fuck')
    .selectAll('div.item')
    .data(data);
    
    divs.enter()
        .append('div').classed('item', true);
​
    divs.style({
      width: '38px',
      height: function(d, i) { return d + 'px'},
      margin: '58px',
      float: 'left',
     'background-color' : '#2725b0'
    });
          
           
    /* g.append('circle')
    .attr({
      cx:440,
      cy:210,
      r: 82,
      fill: '#3525b0'
    })
    */
   
 /*
    var data;
    d3.json("pics.json", function(err, blocks) {
            data = blocks;
    });
    
    console.log("here comes the data");
    console.log(data);  
 
    var circles = svg.selectAll("circle")
    .data(data)
    .attr({x: 100, y: 10, width: width - 200, height: height - 20})
    .style({ fill: "#a72d1a"})
    
    console.log(circles);
    
    circles.enter()
      .append("circle")
    .attr({
      cx: 100,
      cy: 118,
      r: 16
    });
 */ 
 
    
     
  </script>
</body>
    