xxxxxxxxxx <head> <meta charset="UTF-8"> <script src="//d3js.org/d3.v4.min.js"></script> <script src="//d3js.org/topojson.v1.min.js"></script> <script src="d3.slider.js"></script> <link rel="stylesheet" type="text/css" href="d3.slider.css"> <title>Japanese Regional Population Change After WW2 (5 Years Interval)</title> <style> #tooltip { position: absolute; top: 0; left: 0; background-color: lightsteelblue; text-align: center; padding: 5px; } .wrapper{ max-width: 80%; margin: 0 auto; } body { font-family: Helvetica, Arial, sans-serif; background-color: #eee; } #maintext { width: 1000px; margin: 25px auto 25px auto; padding: 50px 50px 50px 50px; background-color: white; box-shadow: 0 0 20px #ccc; } h1 { margin-bottom: 25px; font-size: 24px; font-weight: bold; } h4 { margin-top: 30px; margin-left: 20px; font-size: 14px; } p { margin-bottom: 25px; font-size: 14px; line-height: 18px; } </style> </head> <body> <div id="maintext"> <h1>Japanese Regional Population Change After WW2 (5 Years Interval)</h1> <h4>Unit: Thousands people</h4> <p>The graph shows the trend of Japanese population growth since WW2. As the reader moves the slider towards present days. It shows the population growth is moving into negative territory in most areas, except Tokyo and Osaka region. Also it shows a huge growth in some regions right after the war, and the urbanization of Tokyo since the end of war. For more information, please refer to README.md file.</p> <div class="wrapper"> <div class="container"></div> <div class="slider"></div> </div> <script type="text/javascript"> var japan; var keys; // variable for different key(prefecture) var currentKey; // variable for current selection key (year) var sliderKeys = []; // year variable for sliders var w = 960; var h = 760; // Setup canvas/container var container = d3.select('.container'); var svg = container.append('svg') .attr('width', w) .attr('height', h) .append("g"); var g = svg.append("g"); // Assign color to domain range var color = d3.scaleLinear() .domain([-150, 300, 750, 1200, 1800]) .range(['#feebe2', '#fbb4b9', '#f768a1', '#c51b8a', '#7a0177']); // Tooltip style var tooltip = d3.select("body") .append("div") .attr("id", "tooltip") .style("opacity", 0); // Update map color var updateMap = function() { g.selectAll('path') .transition() .duration(1000) .style('fill', function(d) { return color(d.properties[currentKey]); }); } // Legend text svg.selectAll('text.legend') .data(color.domain()) .enter() .append('text') .attr('x', 60) .attr('y', function(d, i) { return 100 + 20 * i + 10; }) .attr('font-size', 9) .attr('text-anchor', 'end') .text(function(d) { return d; }); // Legend color svg.selectAll('rect.legend') .data(color.domain()) .enter() .append('rect') .attr('class', 'legend') .attr('x', 65) .attr('y', function(d, i) { return 100 + 20 * i - 4; }) .attr('width', 20) .attr('height', 20) .attr('fill', function(d) { return color(d); }); // Read map file d3.json('japan.topojson', function(error, collection) { var japan = topojson.feature(collection, collection.objects.japan).features; // Setup map var japan_map = d3.geoMercator() .scale(1400) .center([137, 34.5]) .translate([w / 2, h / 2]); var path = d3.geoPath().projection(japan_map); g.selectAll('path') .data(japan) .enter() .append('path') .attr('d', path) .attr('prefecture', function(d) { return d.properties.name; }) .style('fill', function(d, i) { return 'white'; }) .attr("stroke", "#404040") .attr("stroke-width", 0.5) .style('cursor', 'pointer') .on('mouseover', function(d){ // Mouse over action, show tooltip tooltip.style("opacity", 1) .html(d.properties['name']+'<br/>'+d.properties[currentKey]) .style("left", (d3.event.pageX + 10) + "px") .style("top", (d3.event.pageY - 40) + "px"); var self = d3.select(this); self.style('fill', 'red'); // Change color of current prefecture }) // Display tooltip when mouse is on .on('mousemove', function(d){ tooltip .style("left", (d3.event.pageX + 10) + "px") .style("top", (d3.event.pageY - 40) + "px"); }) // Make tooltip disappear when mouse out of region .on('mouseout', function(d, i){ tooltip.style("opacity", 0); //Show the year's color which is selected var self = d3.select(this); self.transition() .duration(300) .style('fill', function(d, i) { return color(d.properties[currentKey]); }); }); // Read csv data d3.csv('jp_pop.csv', function(error, rows) { keys = Object.keys(rows[0]).filter(function(key){ return key !== 'prefecture'; }); // Prepare sliderKeys for slider sliderKeys = svg.selectAll('.keys') .data(keys) .enter()[0] .map(function(x) { return x['__data__'] ; }); // Tick info for slider var total = sliderKeys.length, min = sliderKeys[0], difference = sliderKeys[1] - sliderKeys[0], max = sliderKeys[total-1]; // Create a slider d3.select('.slider').call( d3.slider() .axis(true) .min(min) .max(max) .step(difference) .on("slide", function(evt, value) { currentKey = value; d3.selectAll('.keys') .classed("selected", function(){return (d3.select(this).attr('value') === currentKey)}); updateMap(); }) ); // Read population data for (var i = 0; i < rows.length; i++) { var municipality = japan.filter(function(obj) { return (obj.properties['name'] === rows[i]['prefecture']); })[0]; if (municipality) { keys.forEach(function(key){ municipality.properties[key] = rows[i][key]; }); } } // Set data to the first year when first load map currentKey = keys[0]; updateMap(); }); }); </script> </body></html> https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v1.min.js