Last active
September 7, 2017 05:10
-
-
Save artidataio/b8aefa0192697fd12dd21e188c29d31d to your computer and use it in GitHub Desktop.
Choropleth
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: 100, bottom: 20, left: 20}, | |
| padding = {top: 0, right: 0, bottom: 0, left: 0}, | |
| 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 + ")"); | |
| //Tooltip drawing | |
| function drawTooltip(d) { | |
| 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[2016]); | |
| } | |
| // Legend Drawing | |
| var legend = viz.append("g") | |
| .classed("legend",true) | |
| .attr("transform", "translate(" + (2* margin.left + plotWidth) | |
| + "," + margin.top + ")") | |
| var legendWidth = 15, legendHeight = plotHeight; | |
| 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 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[2016]);}) | |
| .on('mouseover', function(d) { | |
| d3.select(this).classed("highlight",true); | |
| drawTooltip(d);}) // call tooltip function | |
| .on('mouseout',function(){ | |
| d3.select("#tooltip").classed("hidden", true); | |
| d3.select(this).classed("highlight",false); | |
| }); | |
| //Drawing Legend Ticks | |
| var ticks = d3.axisRight(d3.scaleLinear() | |
| .domain([minPop,maxPop]) | |
| .range([0,plotHeight])); | |
| legend.append("g") | |
| .attr("transform","translate(" + legendWidth + "," + 0 + ")") | |
| .call(ticks); | |
| }); | |
| </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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment