Cherry Blossom Flowering History (Kyoto, Japan)

This data set consists of flowering dates of the Prunus Jamasakura (Cherry Blossom) 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. This scatter plot identifies the year (x axis), flowering day of the year (y axis), and estimated temperature on the flowering day (color).

forked from curran's block: Stylized Scatter Plot with Color Legend

Built with blockbuilder.org

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <title>Basic Scatter Plot</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text, .legendCells text {
        fill: ;
        font-size: 10pt;
        font-family: 'Poiret One';
      }
      .axis-label, .legend-label {
        fill: #fea3a3;
        font-size: 18pt;
        font-family: 'Poiret One';
      }
      
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      const xValue = d => d.year;
      const xLabel = 'Year';
      const yValue = d => d.flowering_day;
      const yLabel = 'Flowering Day of the Year';
      const colorValue = d => d.estimated_temp;
      const colorLabel = 'Temperature (C)';
      const margin = { left: 120, right: 300, top: 20, bottom: 120 };

const svg = d3.select('svg');
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;

yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2)
          .attr('y', -60)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);

colorLegendG.append('text')
          .attr('class', 'legend-label')
          .attr('x', -30)
          .attr('y', -40)
          .text(colorLabel);

const xScale = d3.scaleLinear();
      const yScale = d3.scaleLinear();
      var colorScale = d3.scaleQuantize()
        .domain([3.0, 9.0])
      .range([ "#7546cc","#467acc", "#46ccb1", "#ccca46", "#cc8746","#c43538"]);

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickPadding(15)
        .tickSize(-innerHeight)
      	.tickFormat(d3.format("0"));
      
				
      const yAxis = d3.axisLeft()
        .scale(yScale)
        .tickPadding(15)
        .tickSize(-innerWidth);
      //.tickFormat(d3.timeformat("%B"))
      
      //var parseDate = d3.timeParse("%Y-%m")

const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('circle');

const row = d => {
        d.year = +d.year;
        d.flowering_day = +d.flowering_day;
        d.estimated_temp = +d.estimated_temp;
        return d;
      };

d3.csv('SakuraData5.csv', row, data => {
        xScale
          .domain(d3.extent(data, xValue))
          .range([0, innerWidth])
          .nice();

yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice();

g.selectAll('circle').data(data)
          .enter().append('circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill', d => colorScale(colorValue(d)))
            .attr('fill-opacity', 0.8)
            .attr('r', 5);
        	
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        colorLegendG.call(colorLegend)
          .selectAll('.cell text')
            .attr('dy', '0.1em');
      });
    </script>
  </body>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js