New dataset, module 4 and some nested data

<!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>

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 toolTipOff(d) {
      tip.style('opacity',0);
    };

});

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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