Intro to D3 Talk

README.md

Built with blockbuilder.org

forked from anonymous's block: Intro to D3 Talk

index.html

<!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 { height: 100%; }
  </style>
</head>

<body>
  <svg width="800"></svg>
  
  <script>
    var sampleData = [1, 2, 3, 4, 5, 10, 6, 2, 9, 13, 54, 30];

    drawBars(sampleData);

    function drawBars(data){

    var y = data;
    var x = data.map(function(dataPoint, index){
      return index;
    });

    var xPosition = d3.scale.ordinal()
      .domain(x)
      .rangeRoundBands([0, 800], 0.2);

    var dataColor = d3.scale.category10(x)
      .domain(x);

    var eachDataPoint = d3.select("svg")
      .selectAll("rect")
      .data(data);

    eachDataPoint.enter()
      .append("rect");

    eachDataPoint
      .attr("x", function(dataItem, index){
        return xPosition(index);
      })
      .attr("y", function(){
        return 0;
      })
      .attr("width", xPosition.rangeBand)
      .attr("height", function(dataItem, index){
        return dataItem * 10;
      })
      .attr("fill", function(dataItem, index){
        return dataColor(index);
      })
      .on('mouseenter', function(dataItem, index){
        d3.select(this).attr("fill", "blue");
      })
      .on('mouseout', function(dataItem, index){
        var originalColor = dataColor(index);
        d3.select(this).attr("fill", originalColor);
      });

    eachDataPoint.exit()
      .remove();
  }
  </script>
</body>