[Unlisted] Highlight Legend 2: 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

forked from thulse's block: Cherry Blossom Flowering History (Kyoto, Japan)

forked from thulse's block: Interactive Cherry Blossom Flowering History (Kyoto, Japan)

<!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>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
    <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>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <title>Basic Scatter Plot</title>
    
    <style>
    
      .axis text {
        font-family: 'Open Sans', sans-serif;
        font-size: 13pt;
      }
      .axis .label {
        font-size: 20pt;
      }

.axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

.color-legend text {
        font-family: 'Open Sans', sans-serif;
        font-size: 19pt;
      }
      
      .d3-tip {
        font-family: 'Open Sans', sans-serif;
        font-size: 19pt;
        line-height: 1;
        padding: 7px;
        background: black;
        color: lightgray;
        border-radius: 20px;
      }
      
    </style>
  </head>
  <body>
    
    <script>
      var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 123, top: 40, right: 30, bottom: 47 };
      
      var xValue = "year";
      var yValue = "flowering_day";
      var colorValue = "estimated_temp";
      var layerValue = colorValue;
      
//      var colorScale = d3.scaleQuantize()
//        .domain([3.0, 9.0])
//      	.range([ "#7546cc","#467acc", "#46ccb1", "#ccca46", "#cc8746","#c43538"]);
      
      var hoveredColorValue;
      var hoveredStrokeColor = "black";

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 + ")");
      
      // This is the layer where the bars are drawn.
      var baseLayer = g.append("g");
      
      // This layer contains a semi-transparent overlay
      // that fades out the base bars.
      var overlayCircles = g.append("g")
        .append("circle")
        .attr("width", innerWidth)
        .attr("height", innerHeight)
        .attr("fill", "none")
        .style("pointer-events", "none");
      
      // This contains the subset of bars rendered on top
      // when you hover over the entries in the color legend.
      var foregroundLayer = g.append("g");
      
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")");
      var yAxisG = g.append("g")
        .attr("class", "y axis");
      var colorLegendG = g.append("g")
        .attr("class", "color-legend")
        .attr("transform", "translate(596, 0)");

var xScale = d3.scale.linear().range([0, innerWidth]);
      var yScale = d3.scale.ordinal().rangeBands([innerHeight, 0]);
      var colorScale = d3.scale.category10();
      
      var tipNumberFormat = d3.format(",");
      var tip = d3.tip()
        .attr("class", "d3-tip")
        .offset([-10, 0])
        .html(function(d) {
          return [
            d[colorValue],
            " in ",
            d[yValue],
            ": ",
            tipNumberFormat(d[xValue])
          ].join("");
        });
      g.call(tip);
      
      // Use a modified SI formatter that uses "B" for Billion.
      //var siFormat = d3.format("s");
      //var customTickFormat = function (d){
      //  return siFormat(d).replace("G", "B");
     //};

var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .ticks(5)
       // .tickFormat(customTickFormat)
        .outerTickSize(0);
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .outerTickSize(0);

var colorLegend = d3.legend.color()
        .scale(colorScale)
        .shape('circle')
        .labelOffset(5);

function render(data){

var nested = d3.nest()
          .key(function (d){ return d[layerValue]; })
          .entries(data);

var stack = d3.layout.stack()
          .y(function (d){ return d[xValue]; })
          .values(function (d){ return d.values; });

var layers = stack(nested.reverse()).reverse();

xScale.domain([
          0,
          d3.max(layers, function (layer){
            return d3.max(layer.values, function (d){
              return d.y0 + d.y;
            });
          })
        ]);

yScale.domain(layers[0].values.map(function (d){
          return d[yValue];
        }));

colorScale.domain(layers.map(function (layer){
          return layer.key;
        }));

xAxisG.call(xAxis); 
        yAxisG.call(yAxis);

renderCircles(baseLayer, layers);
        
        if(hoveredColorValue){
          setOverlayTransparency(0.7);
          renderCircles(foregroundLayer, layers.filter(function (layer){
            return layer.key === hoveredColorValue;
          }));
        } else {
          setOverlayTransparency(0.0);
          renderCircles(foregroundLayer, []);
        }
        
        colorLegendG.call(colorLegend);
        
        // Move the text down a bit.
        colorLegendG.selectAll("text").attr("y", 4);
        
        listenForHover(colorLegendG.selectAll("circles"), data);
        listenForHover(colorLegendG.selectAll("text"), data);
      }
      
      function renderCircles(g, layers){
        var layerGs = g.selectAll(".layer").data(layers);
        layerGs.enter().append("g").attr("class", "layer");
        layerGs.exit().remove();

layerGs.style("fill", function (d){
          return colorScale(d.key);
        });

function type(d){
        d.year = + d.year;
        return d;
      }

d3.csv("SakuraData5.csv", type, render);

</script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

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

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js

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

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