D3 Examples - Module 5 Arts Council funding scatterplot

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;
      }
​
      circle {
        fill: #b36c80;
      }
​
​
      .tooltip {
        font-family: "BentonSans";
        background: #eee;
        box-shadow: 0 0 5px #999999;
        color: #333;
        font-size: 14px;
        line-height: 15px;
        left: 130px;
        width: 200px;
        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;
      }
​
​
      .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;
      }
​
     
      .y.axis path{
        stroke-width:1px;
        stroke: #000;
        fill: none;
      }
​
      .legend {
        padding: 5px;
        //color: #6A6D68;
        font-family: "BentonSans";
        font-size: 11px;
​
        }
​
​
​
    </style>
  </head>
  <body>
  <div class="title">Arts Council grant funding in England</div>
  <div class="subhead">Award date v grant value, 2012-13 (£) </div>
​
  <script type="text/javascript"> 
  var w = 800;
  var h = 400;
  var padding = [ 15, 10, 20, 50];
  var formatNumber = d3.format(",");
  var color = d3.scale.ordinal()
      .domain(["Visual arts","Theatre","Dance","Literature","Combined arts","Music","Not art form specific"])
      .range(["#c36256","#eda45e ","#94826b","#546A7E","#a6a471","#75a5c2","#736e7e"]);
​
  d3.csv("artsCouncil.csv", function(data) {
    var dataset = d3.nest()
      .entries(data);
​
    console.log(dataset);
​
    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);
​
    var mindate = d3.min(dataset,function(d) {return new Date(d.awardDate)});
    var maxdate = d3.max(dataset,function(d) {return new Date(d.awardDate)});
    var ymin=d3.min(dataset, function(d) {return +d.value;});
    var ymax=d3.max(dataset, function(d) {return +d.value;});
​
​
    //console.log(mindate,maxdate,ymin,ymax);
​
    var xScale = d3.time.scale()
      .domain([mindate, maxdate])
      .range([padding[3], w-padding[1]]);
    
    var yScale = d3.scale.linear()
      .domain([ymax,ymin])
      .range([ padding[0], h - padding[2] ]);
​
    var xAxis = d3.svg.axis()
      .scale(xScale)
      .tickSize(-(h-padding[0] - padding[2]))
      .orient("bottom");
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(" + 0 + "," + (h - padding[2]) + ")")
      .call(xAxis);
​
    var yAxis = d3.svg.axis()
              .scale(yScale)
              .tickSize(-(w-padding[1] - padding[3]))
              .orient("left");
    svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + (padding[3]) + ",0)")
          .call(yAxis);
​
    var circles = svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .style("fill", function(d) { return (color(d.mainArtform))})
      .on('mousemove', function(d){return toolTip(d)})
      .on('mouseout', function(d){return toolTipOff(d)});
​
    circles
      .attr("cx",0)
      .attr("cy", function(d, i) {return yScale(+d.value);})
      .attr("r", .1)
​
    circles.transition()
      .delay(function(d, i) {
        return i * 1;
      })
      .duration(2000)
      .attr("r", 3)
      .attr("cx", function(d) {return xScale (new Date(d.awardDate));});
​
      var legendSpacing = 3;
      var legendRectSize = 10;
      var legend = svg.selectAll('.legend')
        .data(color.domain())
        .enter()
        .append('g')
        .attr('class', 'legend')
        .attr('transform', function(d, i) {
          var height = legendRectSize + legendSpacing;
          var offset =  height * color.domain().length / 2;
          var horz = 7  * legendRectSize;
          var vert = i * height - offset+70;
          return 'translate(' + horz + ',' + vert + ')';
        });
​
      legend.append('rect')
      .attr('width', legendRectSize)
      .attr('height', legendRectSize)
      .style("fill", function(d) { return (color(d))})
​
      legend.append('text')
      .attr('x', legendRectSize + legendSpacing)
      .attr('y', legendRectSize - legendSpacing)
      .text(function(d) { return d; });
​
    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>"+d.ProjectName+"</b></br>"+"Total funding £"+formatNumber(d.value)+
        "</br>"+"Award date "+d.awardDate)
      .style("left", xPos + "px")
      .style("top", yPos + "px");
    };
​
    function toolTipOff(d) {
      tip.style('opacity',0);
    };
​
​
​
​
  });
​
  </script>
​
  </body>
</html>
    