Last active
September 13, 2017 17:58
-
-
Save artidataio/9b4b484e4f168f3f59e9cb5131b4b509 to your computer and use it in GitHub Desktop.
Dynamic Choropleth with Play Button
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Ageing Population Singapore</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-geo.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-scale.v1.min.js"></script> | |
| <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="tooltip" class="hidden"> | |
| <p><span id="value"></p> | |
| </div> | |
| <script> | |
| // Margin Convention | |
| var margin = {top: 20, right: 20, bottom: 20, left: 20}, | |
| padding = {top: 0, right: 0, bottom: 50, left: 50}, //left padding for button, bottom padding for legend | |
| vizWidth = 960, | |
| vizHeight = 500, | |
| plotWidth = vizWidth - margin.left - margin.right, | |
| plotHeight = vizHeight - margin.top - margin.bottom, | |
| panelWidth = plotWidth - padding.left - padding.right, | |
| panelHeight = plotHeight - padding.top - padding.bottom; | |
| var viz = d3.select("body").append("svg") | |
| .attr("class", "viz") | |
| .attr("width", vizWidth) | |
| .attr("height", vizHeight); | |
| var plot = viz.append("g") | |
| .attr("class","plot") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var panel = plot.append("g") | |
| .attr("class","panel") | |
| .attr("transform", "translate(" + padding.left + "," + padding.top + ")"); | |
| //button drawing | |
| //the class of the button is the what happened to the animation after you | |
| //press the button | |
| var buttonHeight = 20, buttonWidth = padding.left; | |
| var button = viz.append("g") | |
| .attr("id","button") | |
| .classed("play",true) | |
| .attr("transform", "translate(" + margin.left + "," + | |
| margin.top + ")"); | |
| button.append("rect") | |
| .attr("height",buttonHeight) | |
| .attr("width",buttonWidth) | |
| .attr("fill","white") | |
| .on("mouseover",function(){d3.select(this).attr("fill","grey")}) | |
| .on("mouseout",function(){d3.select(this).attr("fill","white")}) | |
| .style("stroke","black"); | |
| button.append("text") | |
| .attr("x",buttonWidth/2) | |
| .attr("y",buttonHeight/2) | |
| .attr("text-anchor","middle") | |
| .attr("alignment-baseline","central") | |
| .text("PLAY") //since the starting class is play | |
| //show the year the choropleth correspond to | |
| var currYear = viz.append("text") | |
| .attr("transform","translate("+margin.left+"," | |
| +(margin.top+buttonHeight) + ")") | |
| .attr("x",buttonWidth/2) | |
| .attr("y",buttonHeight/2) | |
| .attr("text-anchor","middle") | |
| .attr("alignment-baseline","central") | |
| //Tooltip drawing | |
| function drawTooltip(d,currYear) { | |
| var xPosition = d3.event.pageX; | |
| var yPosition = d3.event.pageY; | |
| d3.select("#tooltip") | |
| .classed("hidden",false) | |
| .style("left", xPosition + "px") | |
| .style("top", yPosition + "px") | |
| .html(d.properties.PA + "<br>"+ d.properties[currYear]); | |
| } | |
| // Legend Drawing | |
| var legendWidth = panelWidth/2, legendHeight = 10; | |
| var legend = viz.append("g") | |
| .classed("legend",true) | |
| .attr("transform", "translate(" + (margin.left +panelWidth/4) | |
| + "," + (margin.top+panelHeight + margin.top) + ")") | |
| legend.append("rect") | |
| .attr("width", legendWidth) | |
| .attr("height", legendHeight) | |
| .attr("fill","white") | |
| .style("stroke","black") | |
| legend.append("image") | |
| .attr("transform", "translate(" + 0.5 +","+0.5+")") | |
| .attr("id","legendRect") | |
| .attr("xlink:href", "YlOrRd.png") | |
| .attr("preserveAspectRatio","none") | |
| .attr("width", legendWidth-1) | |
| .attr("height", legendHeight-1) | |
| //Data binding | |
| d3.json("singapore and elderlies 20170905.json", function(sg) { | |
| var years = Object.keys(sg.features[0].properties), | |
| years = years.filter(foo => foo!=="PA"), | |
| index = 0; | |
| currYear.text(years[index]); | |
| var allPop = sg.features.map( | |
| function(obj,ind){ | |
| var pop = Object.assign({},obj.properties)//make a deep copy | |
| delete pop.PA | |
| return Object.values(pop) | |
| }) | |
| var allPop = [].concat.apply([], allPop), | |
| maxPop = d3.max(allPop), | |
| minPop = d3.min(allPop); | |
| var mapToOne = d3.scaleLinear() | |
| .range([0,1]) | |
| .domain([minPop,maxPop]) | |
| var getColor = d3.scaleSequential(d3.interpolateYlOrRd) | |
| .domain([minPop,maxPop]); | |
| var projection = d3.geoMercator().fitSize([panelWidth,panelHeight],sg), | |
| geoPath = d3.geoPath(projection); | |
| var areas = panel.selectAll("path") | |
| .data(sg.features) | |
| .enter() | |
| .append("path") | |
| .attr("d",geoPath) | |
| .classed("area",true) | |
| .style("fill",function(d){ | |
| return getColor(d.properties[years[index]]);}) | |
| .on('mouseover', function(d) { | |
| d3.select(this).classed("highlight",true); | |
| drawTooltip(d,years[index]);}) // call tooltip function | |
| .on('mouseout',function(){ | |
| d3.select("#tooltip").classed("hidden", true); | |
| d3.select(this).classed("highlight",false); | |
| }); | |
| var ticks = d3.axisBottom(d3.scaleLinear() | |
| .domain([minPop,maxPop]) | |
| .range([0,legendWidth])); | |
| legend.append("g") | |
| .attr("transform","translate(" + 0 + "," + legendHeight + ")") | |
| .call(ticks); | |
| function updateColor(index){ | |
| areas.transition() | |
| .style("fill",function(d){ | |
| return getColor(d.properties[years[index]]);}); | |
| } | |
| function updateButton(newClass){ | |
| button.classed(newClass,true) | |
| d3.select("#button text") | |
| .transition() | |
| .text(newClass.toUpperCase()) | |
| } | |
| function updateCurrYear(index){ | |
| currYear.transition() | |
| .text(years[index]) | |
| } | |
| console.log(years.length); | |
| button.on("click",function(){ | |
| if(button.classed("reset")){ | |
| button.classed("reset",false); | |
| index = 0; | |
| console.log(index);// | |
| updateColor(index); | |
| updateButton("play"); | |
| updateCurrYear(index); | |
| }else if(button.classed("play")){ | |
| button.classed("play",false); | |
| timer = d3.interval(function(elapsed){ | |
| console.log(elapsed); | |
| index +=1; | |
| if(index < years.length){ | |
| console.log(index); | |
| updateColor(index); | |
| updateButton("pause"); | |
| updateCurrYear(index); | |
| } else{ | |
| index -= 1; //hard coding for tooltips to make sense | |
| console.log(index); | |
| timer.stop(); | |
| updateButton("reset"); | |
| }},500); | |
| }else if(button.classed("pause")){ | |
| button.classed("pause",false); | |
| timer.stop(); | |
| updateButton("play"); | |
| } | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .viz{ | |
| background-color: #deebf7; | |
| } | |
| #tooltip { | |
| font-size: 12px; | |
| position: absolute; | |
| width: auto; | |
| height: auto; | |
| padding: 2.5px; | |
| border:1px solid black; | |
| background: rgb(250, 250, 250); | |
| background: rgba(250, 250, 250, 0.9); | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| pointer-events: none; | |
| text-align: center; | |
| } | |
| #tooltip.hidden { | |
| display: none; | |
| } | |
| path.area{ | |
| stroke-width:0.5; | |
| stroke: black; | |
| } | |
| path.area.highlight{ | |
| stroke-width:2; | |
| stroke: black; | |
| } | |
| #legendRect{ | |
| stroke-width:5; | |
| stroke: black; | |
| } | |
| #button text{ | |
| font-size: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment