日本周辺で噴火した火山 by shimizu

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<style>
html, body {
  margin: 0px;
  padding: 0px;
}


.graticule {
  fill: none;
  stroke: #ccc;
}

.boundary {
  fill: #ccc;
  fill-opacity: 1;
  stroke: #000;
}

svg {
  width: 978px;
  height: 980px;
  border: 1px solid black;
}

#yearLabel {
  left:45px;
  top:24.5px;
  position: absolute;
  color:#ccc;
  font-family: 'Fjalla One';
  font-size: 120px;
  
}

</style>
<body>
<div id="yearLabel"></div>
<svg></svg>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>    
<script src="//d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>


var startYear = 1955;

var projection = d3.geoSatellite()
    .rotate([210, -20, 20])
    .center([-20, 30])
    .scale(1100)
    .precision(2)

var graticule = d3.geoGraticule()
    .step([3, 3]);

var path = d3.geoPath()
    .projection(projection);

    
var yearLabel = d3.select("#yearLabel").text(startYear)
    
    
var svg = d3.select("svg")

    
var graticuleLayer = svg.append("g");
var boundaryLayer = svg.append("g");
var vizLayer = svg.append("g");
    
    
graticuleLayer.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

d3.json("./world.json", function(error, geo) {
  if (error) throw error;

  var geojson = topojson.feature(geo, geo.objects.land);
  console.log(geojson)
  
  boundaryLayer.append("path")
      .datum(topojson.feature(geo, geo.objects.land))
      .attr("class", "boundary")
      .attr("d", path);
});


d3.tsv("./data.tsv", function(data){
  var nested = d3.nest()
    .key(function(d){ return d.StartDateYear})
    .map(data)
      
  var Explosivitys = [4, 8, 16, 32]
  
  window.counter = (function(){
    var c = startYear;
    return function(){
      c++;
      if(c > 2017) c = startYear;
      return c
    }
  }());
  
  
  setInterval(function(){
    var c = counter();
    console.log(c)
    drawVolcano(c);  
  }, 2500)
  
  
  
  
  function drawVolcano(year){
     yearLabel.text(year)   

    
    var select = vizLayer.selectAll("text")
      .data(nested.get(year))
      
    var enter = select.enter().append("text")
    
    var exit = select.exit().remove();
      
    select.merge(enter).attr("stroke", "red")
      .attr("text-anchor", "middle")
      .text("▲")
      .attr("transform", function(d){
        var latlng = [+d.LongitudeDecimal, +d.LatitudeDecimal]
        return "translate(" + projection(latlng)+ ")";
      })
      .attr("fill", "red")
      .attr("fill-opacity", 0)      
      .attr("font-size", 0)
      .transition()
      .duration(500)
      .attr("fill-opacity", 0.5)
      .attr("font-size", function(d){
        return Explosivitys[d.ExplosivityIndexMax];
      })
    
  }
  
  
})


d3.select(self.frameElement).style("height", "980px");

</script>