Last active
June 11, 2019 17:21
-
-
Save TiagoDevezas/11d1f0e1d0fa7c15a4dc to your computer and use it in GitHub Desktop.
PT Choropleth
This file contains 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> | |
| <meta charset="utf-8"> | |
| <style> | |
| div.tooltip { | |
| position: absolute; | |
| text-align: center; | |
| width: 150px; | |
| height: 25px; | |
| padding: 2px; | |
| font-size: 12px; | |
| color: white; | |
| background: black; | |
| border: 1px; | |
| border-radius: 8px; | |
| pointer-events: none; | |
| } | |
| #legend { | |
| padding: 1.5em 0 0 1.5em; | |
| text-align: center; | |
| } | |
| .list-inline { | |
| list-style: outside none none; | |
| padding-left: 0; | |
| margin: 0 auto; | |
| width: 50%; | |
| } | |
| li.key { | |
| border-top-width: 15px; | |
| border-top-style: solid; | |
| font-size: .75em; | |
| width: 15%; | |
| padding-left: 0; | |
| padding-right: 0; | |
| display: inline-block; | |
| } | |
| .container { | |
| width: 100%; | |
| text-align: center; | |
| } | |
| #map { | |
| width: 700px; | |
| height: 500px; | |
| display: inline-block; | |
| margin-top: 2em; | |
| } | |
| </style> | |
| <body> | |
| <div class="container"> | |
| <div id="legend">Artigos que mencionam o distrito</div> | |
| <div id="map"></div> | |
| </div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="http://cdn.rawgit.com/d3/d3-plugins/master/jsonp/jsonp.js"></script> | |
| <script> | |
| var width = parseInt(d3.select("#map").style("width")), | |
| height = parseInt(d3.select("#map").style("height")); | |
| var svg = d3.select("#map").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| apiURL = 'http://irlab.fe.up.pt/p/mediaviz/panorama/api/places'; | |
| params = '?type=national'; | |
| callback = '&callback=d3.jsonp.callback'; | |
| // d3.jsonp plugin needed to get data from the API | |
| d3.jsonp(apiURL + params + callback, function(data) { | |
| var maxCount = d3.max(data, function(d) { return d.count }) | |
| var color_domain = [0, maxCount/2]; | |
| var color = d3.scale.quantile() | |
| .domain(color_domain) | |
| .range(['rgb(255,255,204)','rgb(217,240,163)','rgb(173,221,142)','rgb(120,198,121)','rgb(49,163,84)','rgb(0,104,55)']); | |
| var tooltip = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| var countByFIPS = {}; | |
| data.forEach(function(d) { | |
| countByFIPS[d.fips] = +d.count; | |
| }); | |
| var legend = d3.select('#legend') | |
| .append('ul') | |
| .attr('class', 'list-inline'); | |
| var keys = legend.selectAll('li.key') | |
| .data(color.range()); | |
| keys.enter().append('li') | |
| .attr('class', 'key') | |
| .style('border-top-color', String) | |
| .text(function(d) { | |
| var r = color.invertExtent(d); | |
| return '>= ' + Math.round(r[0]); | |
| }); | |
| function showTooltip(obj) { | |
| var data = void 0; | |
| d3.select(obj).transition().duration(300) | |
| .style("stroke", "black") | |
| .style('fill', function(d) { data = d; return d3.rgb(color(countByFIPS[d.id])).darker(.5)}); | |
| tooltip.transition().duration(300) | |
| .style("opacity", 1) | |
| tooltip.text(data.properties.name + ": " + countByFIPS[data.id]) | |
| .style("left", (d3.event.pageX) + "px") | |
| .style("top", (d3.event.pageY -30) + "px"); | |
| } | |
| function hideTooltip(obj) { | |
| d3.select(obj) | |
| .transition().duration(300) | |
| .style('stroke', 'gray') | |
| .style("fill", function(d) { | |
| return color(countByFIPS[d.id]); | |
| }) | |
| // .style("opacity", 0.8); | |
| tooltip.transition().duration(300) | |
| .style("opacity", 0); | |
| } | |
| // Continental Portugal map | |
| d3.json('continente.json', function(err, pt) { | |
| var distritos = topojson.feature(pt, pt.objects.continente); | |
| var projection = d3.geo.mercator() | |
| // .center(center) | |
| .scale(1); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| // projection.center([(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]); | |
| // projection.translate([width/2, height/2]); | |
| // projection.scale(s); | |
| var cWidth = width / 2, | |
| cHeight = height; | |
| var b = path.bounds(distritos); | |
| var s = 0.95 / Math.max( | |
| (b[1][0] - b[0][0]) / cWidth, | |
| (b[1][1] - b[0][1]) / cHeight | |
| ); | |
| b = d3.geo.bounds(distritos); | |
| var center = [(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]; | |
| projection.scale(s); | |
| projection.center(center); | |
| projection.translate([cWidth / 2, cHeight / 2]); | |
| var bb = d3.select('svg') | |
| .append('g') | |
| .attr('class', 'continente') | |
| .attr('width', cWidth) | |
| .attr('height', cHeight) | |
| .attr('transform', 'translate(' + cWidth + ',' + 0 + ')'); | |
| var distritos = bb.selectAll('g') | |
| .data(distritos.features) | |
| .enter() | |
| .append('g') | |
| .attr('class', function (d) { return d.properties.name}) | |
| .append('path') | |
| .attr('d', path) | |
| .style("fill", function(d) { | |
| return color(countByFIPS[d.id]); | |
| }) | |
| .style("stroke", "gray") | |
| .on("mouseover", function() { showTooltip(this) }) | |
| .on("mouseout", function() { hideTooltip(this) }) | |
| }); | |
| // Madeira map | |
| d3.json('madeira.json', function(err, madeira) { | |
| var madeira = topojson.feature(madeira, madeira.objects.madeira); | |
| var mWidth = width / 2, | |
| mHeight = (height / 2) - 10; | |
| var projection = d3.geo.mercator() | |
| .center([-17.00479,32.74598]) | |
| .scale(7000) | |
| .translate([mWidth / 2, mHeight / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| // var b = path.bounds(madeira); | |
| // var s = 0.95 / Math.max( | |
| // (b[1][0] - b[0][0]) / 200, | |
| // (b[1][1] - b[0][1]) / 100 | |
| // ); | |
| // b = d3.geo.bounds(madeira); | |
| // var center = [(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]; | |
| // projection.scale(s); | |
| // projection.center(center); | |
| // projection.translate([200 / 2, 100 / 2]); | |
| var madeira_box = svg.append('g') | |
| .attr('width', mWidth) | |
| .attr('height', mHeight) | |
| .attr('class', 'madeira-bb') | |
| .attr('transform', 'translate(' + 0 + ',' + (mHeight + 10) + ')'); | |
| var madeira_bg = madeira_box.append('rect') | |
| .attr('class', 'madeira-bg') | |
| .style('fill', 'lightblue') | |
| .style('stroke', 'gray') | |
| .attr('width', mWidth) | |
| .attr('height', mHeight); | |
| var madeiraPath = madeira_box.selectAll('g') | |
| .data(madeira.features) | |
| .enter() | |
| .append('g') | |
| .attr('class', function (d) { return d.properties.name}) | |
| .append('path') | |
| .attr('d', path) | |
| .style('stroke', 'gray') | |
| .style("fill", function(d) { | |
| return color(countByFIPS[d.id]); | |
| }) | |
| .on("mouseover", function() { showTooltip(this) }) | |
| .on("mouseout", function() { hideTooltip(this) }) | |
| }); | |
| // Azores map | |
| d3.json('acores.json', function(err, acores) { | |
| var acores = topojson.feature(acores, acores.objects.acores); | |
| var aWidth = width / 2, | |
| aHeight = (height / 2) - 10; | |
| var projection = d3.geo.mercator() | |
| .center([-25.455322, 37.768254]) | |
| .scale(3000) | |
| .translate([aWidth / 2, aHeight / 2]); | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| // var b = path.bounds(madeira); | |
| // var s = 0.95 / Math.max( | |
| // (b[1][0] - b[0][0]) / 200, | |
| // (b[1][1] - b[0][1]) / 100 | |
| // ); | |
| // b = d3.geo.bounds(madeira); | |
| // var center = [(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]; | |
| // projection.scale(s); | |
| // projection.center(center); | |
| // projection.translate([200 / 2, 100 / 2]); | |
| var acores_box = svg.append('g') | |
| .attr('width', aWidth) | |
| .attr('height', aHeight) | |
| .attr('class', 'acores-bb') | |
| .attr('transform', 'translate(' + 0 + ',' + 0 + ')'); | |
| var acores_bg = acores_box.append('rect') | |
| .attr('class', 'acores-bg') | |
| .style('fill', 'lightblue') | |
| .style('stroke', 'gray') | |
| .attr('width', aWidth) | |
| .attr('height', aHeight); | |
| var acoresPath = acores_box.selectAll('g') | |
| .data(acores.features) | |
| .enter() | |
| .append('g') | |
| .attr('class', function (d) { return d.properties.name}) | |
| .append('path') | |
| .attr('d', path) | |
| .style('stroke', 'gray') | |
| .style("fill", function(d) { | |
| return color(countByFIPS[d.id]); | |
| }) | |
| .on("mouseover", function() { showTooltip(this) }) | |
| .on("mouseout", function() { hideTooltip(this) }) | |
| }); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
👍