D3 Examples - Japan Temperature GRIB

xxxxxxxxxx
 
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet", href="css/libs.css" type="text/css" inline>
  <link rel="stylesheet", href="css/viz.css" type="text/css" inline>
</head>
<body>
  <div class="row">
    <div id="svg" class="col-xs-12"></div>
  </div>
​
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <script src="https://d3js.org/queue.v1.min.js"></script>
  <script>
  function ready(error, temps, jpn){
    console.log(jpn);
​
    var margin = {top: 20, right: 10, bottom: 20, left: 10};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var projection = d3.geo.mercator()
        .center([139, 35])
        .scale(1000)
        .translate([width / 2, height / 2]);
​
    // add Japan map
    var path = d3.geo.path()
      .projection(projection);
    var features = topojson.feature(jpn, jpn.objects.japan).features;
​
    svg.selectAll("path")
      .data(features)
      .enter()
      .append("path")
      .attr("stroke", "black")
      .attr("stroke-width", "1")
      .style('fill', 'none')
      .attr("d", path);
​
​
    // now temperature data
    var temperatures = temps[0].data;
    var headers = temps[0].header;
    var la1 = headers.la1;
    var lo1 = headers.lo1;
    var dx = headers.dx;
    var dy = headers.dy;
    var nx = headers.nx;
    
    var mydata =  temperatures.map(function(d, i){
      var pos = projection([
        lo1 + dx * (i % nx),
        la1 + dy * parseInt(i / nx)
      ]);
      
      return {t: d, x: pos[0], y: pos[1]};
    })
    var color = d3.scale.linear()
      .domain(d3.extent(temperatures))
        .range(["blue", "red"]);
    var tempCircles = svg.append('g').attr('class', 'temperatures');
    tempCircles.selectAll('circle')
      .data(mydata)
      .enter()
        .append('circle')
        .attr('r', 2)
        .attr('cx', function(d) {return d.x; })
        .attr('cy', function(d) {return d.y; })
        .style('fill', function(d) {return color(d.t)});
  };
  queue().defer(d3.json, "data.json")
    .defer(d3.json, "https://gist.githubusercontent.com/osoken/b8e5859295757bb2ec5b/raw/a7cfceaa4c50d710363f6c0943e96a9e2926e95e/japan.topojson")
    .await(ready);
​
  </script>
</body>
</html>
​
    