Module 5 Arts Council funding scatterplot

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

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);

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