D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
​
    var margin ={top:20, right: 30, bottom:30, left:30};
 
    var width = 600;
    var height = 600;
    
    var svg = d3.select("body").append("svg")
        .attr({
        width: width,
        height: height
      })
            
    .style("background-color", "rgb(65, 244, 166)")
    
    
   var g = svg.append("g")
    .attr("transform", "translate(" + margin .left + "," + margin.top + ",");
​
  
  var data = [{ y:20, x:'a'},
              { y:10, x:'b'},
              { y:20, x:'c'},
              { y:50, x:'d'},
              { y:10, x:'e'},
              { y:20, x:'f'}
        ]; 
 
    var maxY = d3.max(data, function(d,i) {return d.y})
    var yScale = d3.scale.linear()
    .domain([0, maxY])
    .range([0, height])
​
    var xScale = d3.scale.ordinal()
    .domain(data.map( function (d) {return d.x;} ))
    .rangeRoundBands([0, width], 0.1, 0.2)
  
  
    var bars = g.selectAll("rect").data(data)
  
    bars.enter().append("rect")
​
  bars.attr({
    x: function(d,i) {return xScale(d.x)},
    y: function(d,i) { return height - yScale(d.y)},
    width: xScale.rangeBand(),
    height: function(d, i) {return yScale(d.y)}
    
  })
​
​
  </script>
</body>
​
    