D3 Examples - New dataset, module 4 and some nested data

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Arts Council funding</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style type="text/css">
      
      body {
        background-color: #fff1e0;
      }
​
      svg {
        background-color: #fff1e0;
      }
​
      .tooltip {
        font-family: "BentonSans";
        background: #eee;
        box-shadow: 0 0 5px #999999;
        color: #333;
        font-size: 14px;
        line-height: 15px;
        left: 130px;
        width: 120px;
        border-style: solid;
        border-color: #76787A;
        border-width: 0px;
        border-radius: 7px;
        position: absolute;
        z-index: 1000;
      }
​
      .title {
        color: #6A6D68;
        font-family: "BentonSans";
        font-size: 21px;
      }
​
      .subhead {
        padding-top: 6px;
        color: #6A6D68;
        font-family: "BentonSans";
        font-size: 14px;
        line-height: 1.15;
      }
​
      rect {
        fill: #e8a7a6;
      }
​
      rect:hover {
        fill: #b36c80;
      }
​
      .axis path,
      .axis line {
        fill: none;
        stroke: #cec6b9;
        stroke-dasharray:2,2;
        shape-rendering: crispEdges;
      }
      
     .axis text {
        color: #6A6D68;
        font-family: "BentonSans";
        font-size: 11px;
      }
​
      .x.axis path,
      .y.axis line {
        opacity: 0;
      }
      .y.axis path{
        stroke-width:1px;
        stroke: #000;
        fill: none;
      }
​
​
​
    </style>
  </head>
  <body>
  <div class="title">Arts Council grant funding in England</div>
  <div class="subhead">By region, 2012-13 (£)) </div>
​
  <script type="text/javascript"> 
  var w = 800;
  var h = 400;
  var padding = [ 15, 20, 20, 150 ];
  var formatNumber = d3.format(",");
​
  d3.csv("artsCouncil.csv", function(data) {
    var dataset = d3.nest()
      .key(function(d) { return d.region;})
      .rollup(function(d) { values:return d3.sum(d, function(g) {return g.value;});})
      .entries(data);
​
    dataset.sort(function(a, b) {
          return d3.ascending(+a.values, +b.values);
        });
​
    console.log(dataset);
​
    var horizScale = d3.scale.linear()
      .domain([ 0, d3.max(dataset, function(d) {return +d.values;}) ])
      .range([ 0, w - padding[1] - padding[3] ]);
    
    var vertScale = d3.scale.ordinal()
      .domain(dataset.map(function(d) { return d.key; } ))
      .rangeRoundBands([0+padding[0],h - padding[2]], 0.075);
​
    var xAxis = d3.svg.axis()
              .scale(horizScale)
              .tickSize(-(h-padding[0] - padding[2]))
              .orient("bottom");
    var yAxis = d3.svg.axis()
              .scale(vertScale)
              .tickSize(0)
              .orient("left");
​
    var tip=d3.select("body").append('div')
      .attr('class', 'tooltip')
      .style('position','absolute')
      .style('padding','5px 10px')
      .style('background','white')
      .style('opacity',0);
​
    var svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h);
​
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
      .call(xAxis);
    svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + (padding[3] ) + ",0)")
          .call(yAxis);
​
    var rects = svg.selectAll("rect")
      .data(dataset)
      .enter()
      .append("rect")
      .on('mousemove', function(d){return toolTip(d)})
      .on('mouseout', function(d){return toolTipOff(d)});
​
    rects
      .attr("x", padding[3])
      .attr("y", function(d, i) {return vertScale(d.key);})
      .attr("width", function(d) {return horizScale(d.values);})
      .attr("height", vertScale.rangeBand())
​
​
    function toolTip(d) {
      var xPos = d3.event.pageX + 5;
      var yPos = d3.event.pageY + 5;
      if (xPos>w/2) {
        xPos=xPos-tip.style("width").replace("px", "")-10;
      };
      if (yPos>h){
        yPos=yPos-tip.style("height").replace("px", "")-25;
      }
      tip.style('opacity',.9)
      .html("<b>Total </b> £"+formatNumber(+d.values))
      .style("left", xPos + "px")
      .style("top", yPos + "px");
    };
​
    function toolTipOff(d) {
      tip.style('opacity',0);
    };
​
​
​
​
  });
​
  </script>
​
  </body>
</html>
    