nezuQ/countries.geo.json

## countries.geo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              countries.geo.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<title>D3習作 - 同性婚法制化の流れ</title>
<style>
.svg-map {
	border : solid 1px gray;
}

.country {
    stroke: gray;
    stroke-width: 0.25px;
}

.year-this {
  fill: black;
  font-size: 20px;
  font-weight: 200;
  text-anchor: middle;
}

.country-name {
  fill: black;
  font-size: 15px;
  font-weight: 100;
  text-anchor: middle;
}
</style>
</head>
<body>
  <div id="divYear"></div>
  <div id="divMap"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
const MAX_YEAR = 2014;
var year = 2000;

var width =  965;
    height = 550;

var yearPadding = 50;
var yearSpace = 100;

var animationSpan = 2000;
var animationWait = 500;

var projection = d3.geo.mercator()
    .center([0, 50])
    .scale(125)
    .rotate([-180,0]);

var yearSvg = d3.select("#divYear").append("svg")
    .attr("width", 175)
    .attr("height", 30);

var mapSvg = d3.select("#divMap").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class","svg-map");

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

yearSvg.selectAll("text").data([year,year+1])
  .enter()
    .append("text")
    .attr("class", "year-this")
	.attr("fill-opacity",1)
    .attr("transform", function(d,i) { return "translate(" + (yearPadding + (i*yearSpace)) + ",20)"; })
    .text(function(d,i) { return d + "年" + " →"; });

d3.json("countries.geo.json", function(error, topology) {

	mapSvg.selectAll("path").data(topology.features)
      .enter()
        .append("path")
        .attr("d", path)
        .attr("class", function(d) {
          return "country " + "year" + d.properties.year;
	    })
	    .attr("fill","white");
	mapSvg.selectAll(".country_name").data(topology.features)
	  .enter()
	    .append("text")
	    .attr("class", function(d) { return "country-name year" + d.properties.year;})
		.attr("fill-opacity",0)
	    .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
	    .text(function(d) { return d.properties.name; });

	var timerId = setInterval(update, animationSpan + animationWait);

	function update(){
		year = year + 1;
		var selection = yearSvg.selectAll("text").data([year,year+1],String);
		selection
		  .enter()
   	        .append("text")
            .attr("class", "year-this")
			.attr("fill-opacity",0)
		    .attr("transform", function(d,i) { return "translate(" + (yearPadding +((i+1)*yearSpace)) + ",20)"; })
		    .text(function(d,i) { return d + "年" + " →"; });
		selection
   		    .transition()
		    .duration(animationSpan)
			.attr("fill-opacity",1)
		    .attr("transform", function(d,i) { return "translate(" + (yearPadding +(i*yearSpace)) + ",20)"; })
		selection
		  .exit()
   		    .transition()
		    .duration(animationSpan)
        	.attr("fill-opacity",0)
		    .attr("transform", function(d,i) { return "translate(" + (yearPadding +((i-1)*100)) + ",20)"; })
            .remove()
		mapSvg.selectAll(".country.year" + year)
  		   .transition()
		   .duration(animationSpan)
  		   .attr("fill","blue");
		mapSvg.selectAll(".country-name.year" + year)
  		   .transition()
		   .duration(animationSpan)
		   .attr("fill-opacity",1);
		if(MAX_YEAR - 1 < year){
			clearInterval(timerId);
		}
	}
});
</script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	<title>D3習作 - 同性婚法制化の流れ</title>
	<style>
	.svg-map {
	border : solid 1px gray;
	}

	.country {
	stroke: gray;
	stroke-width: 0.25px;
	}

	.year-this {
	fill: black;
	font-size: 20px;
	font-weight: 200;
	text-anchor: middle;
	}

	.country-name {
	fill: black;
	font-size: 15px;
	font-weight: 100;
	text-anchor: middle;
	}
	</style>
	</head>
	<body>
	<div id="divYear"></div>
	<div id="divMap"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<script>
	const MAX_YEAR = 2014;
	var year = 2000;

	var width = 965;
	height = 550;

	var yearPadding = 50;
	var yearSpace = 100;

	var animationSpan = 2000;
	var animationWait = 500;

	var projection = d3.geo.mercator()
	.center([0, 50])
	.scale(125)
	.rotate([-180,0]);

	var yearSvg = d3.select("#divYear").append("svg")
	.attr("width", 175)
	.attr("height", 30);

	var mapSvg = d3.select("#divMap").append("svg")
	.attr("width", width)
	.attr("height", height)
	.attr("class","svg-map");

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

	yearSvg.selectAll("text").data([year,year+1])
	.enter()
	.append("text")
	.attr("class", "year-this")
	.attr("fill-opacity",1)
	.attr("transform", function(d,i) { return "translate(" + (yearPadding + (i*yearSpace)) + ",20)"; })
	.text(function(d,i) { return d + "年" + " →"; });

	d3.json("countries.geo.json", function(error, topology) {

	mapSvg.selectAll("path").data(topology.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("class", function(d) {
	return "country " + "year" + d.properties.year;
	})
	.attr("fill","white");
	mapSvg.selectAll(".country_name").data(topology.features)
	.enter()
	.append("text")
	.attr("class", function(d) { return "country-name year" + d.properties.year;})
	.attr("fill-opacity",0)
	.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
	.text(function(d) { return d.properties.name; });

	var timerId = setInterval(update, animationSpan + animationWait);

	function update(){
	year = year + 1;
	var selection = yearSvg.selectAll("text").data([year,year+1],String);
	selection
	.enter()
	.append("text")
	.attr("class", "year-this")
	.attr("fill-opacity",0)
	.attr("transform", function(d,i) { return "translate(" + (yearPadding +((i+1)*yearSpace)) + ",20)"; })
	.text(function(d,i) { return d + "年" + " →"; });
	selection
	.transition()
	.duration(animationSpan)
	.attr("fill-opacity",1)
	.attr("transform", function(d,i) { return "translate(" + (yearPadding +(i*yearSpace)) + ",20)"; })
	selection
	.exit()
	.transition()
	.duration(animationSpan)
	.attr("fill-opacity",0)
	.attr("transform", function(d,i) { return "translate(" + (yearPadding +((i-1)*100)) + ",20)"; })
	.remove()
	mapSvg.selectAll(".country.year" + year)
	.transition()
	.duration(animationSpan)
	.attr("fill","blue");
	mapSvg.selectAll(".country-name.year" + year)
	.transition()
	.duration(animationSpan)
	.attr("fill-opacity",1);
	if(MAX_YEAR - 1 < year){
	clearInterval(timerId);
	}
	}
	});
	</script>
	</body>
	</html>