D3 Examples - [Unlisted] Cherry Blossom Flowering Dates Scatterplot

[Unlisted] Cherry Blossom Flowering Dates Scatterplot

This data set consists of flowering dates of the Prunus Jamasakura trees in Kyoto, Japan. Yasuyuki Aono (associate professor at Osaka Prefecture University) has compiled this data set from the 9th century to current day by tracing data sources from newspapers to historical poems. Color designates temperature at the flowering date.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <style>
    
      .axis text {
        font-family: 'Poiret One', cursive;
        font-size: 10pt;
      }
      .axis .label {
        font-size: 16pt;
      }
      .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
    </style>
  </head>
  <body>
    <script>
    
      var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 60, top: 5, right: 10, bottom: 60 };
      var rMin = 5; // "r" stands for radius
      var rMax = 5;
      var xColumn = "year";
      var yColumn = "flowering_day";
      var rColumn = "";
      var colorColumn = "estimated_temp";
      var xAxisLabelText = "Year";
      var xAxisLabelOffset = 40;
      var yAxisLabelText = "Flowering Day";
      var yAxisLabelOffset = 40;
      var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;
      var svg = d3.select("body").append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")")
      var xAxisLabel = xAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("x", innerWidth / 2)
        .attr("y", xAxisLabelOffset)
        .attr("class", "label")
        .text(xAxisLabelText);
      var yAxisG = g.append("g")
        .attr("class", "y axis");
      var yAxisLabel = yAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
        .attr("class", "label")
        .text(yAxisLabelText);
      var xScale = d3.scale.linear().range([0, innerWidth]);
      var yScale = d3.scale.linear().range([innerHeight, 0]);
      var rScale = d3.scale.linear().range([rMin, rMax]);
      var color = d3.scale.threshold()
    .domain([4.0, 5.0, 6.0, 7.0, 8.0])
    .range(["#4654cc", "#467acc", "#46ccb1", "#5dcc46", "#ccca46", "#cc8746"]);
      
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .ticks(10)
        .tickFormat(d3.format("s"))
        .outerTickSize(0);
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .ticks(5)
        .tickFormat(d3.format("s"))
        .outerTickSize(0);
      function render(data){
        xScale.domain(d3.extent(data, function (d){ return d.year; }));
        yScale.domain(d3.extent(data, function (d){ return d.flowering_day; }));
        rScale.domain(d3.extent(data, function (d){ return d.estimated_temp; }));
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        var circles = g.selectAll("circle").data(data);
        circles.enter().append("circle");
        circles
          .attr("cx",      function (d){ return       xScale(d.year);     })
          .attr("cy",      function (d){ return       yScale(d.flowering_day);     })
          .attr("r",       function (d){ return       rScale(d.estimated_temp);     })
          .attr("fill",    function (d){ return   color(d.estimated_temp); });
        circles.exit().remove();
      }
      function type(d){
        d.year = +d.year;
        d.flowering_day  = +d.flowering_day;
        d.estimated_temp = +d.estimated_temp;
        d.source_type  = +d.source_type;
        return d;
      }
      
      d3.csv("SakuraData5.csv", type, render);
      
      
    </script>
  </body>
</html>
    