Created
July 31, 2016 15:43
-
-
Save karzak/7f0e42cbe41b0d006c8dba639485989b to your computer and use it in GitHub Desktop.
Choropleth of Reported Cases of Zika Virus
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
| country | report_date | unit | value | |
|---|---|---|---|---|
| Panama | 2016-07-06 | cases | 292.0 | |
| Argentina | 2016-06-26 | cases | 1674.0 | |
| Honduras | 2016-06-14 | cases | 21492.0 | |
| Colombia | 2016-07-16 | cases | 99474.0 | |
| Virgin Islands | 2016-07-26 | cases | 436.0 | |
| Brazil | 2016-06-11 | cases | 165932.0 | |
| Dominican Rep. | 2016-06-25 | cases | 219.0 | |
| Guatemala | 2016-07-16 | cases | 4397.0 | |
| Puerto Rico | 2016-07-21 | cases | 5582.0 | |
| United States | 2016-07-06 | cases | 1133.0 | |
| Mexico | 2016-07-16 | cases | 1100.0 | |
| Haiti | 2016-02-03 | cases | 329.0 | |
| Ecuador | 2016-07-27 | cases | 1507.0 | |
| Nicaragua | 2016-07-11 | cases | 334.0 | |
| El Salvador | 2016-06-04 | cases | 6640.0 | |
| Jamaica | 2016-04-22 | cases | 8.0 | |
| Costa Rica | 2016-06-15 | cases | 123.0 | |
| Cuba | 2016-05-19 | cases | 13.0 | |
| Peru | 2016-07-15 | cases | 78.0 | |
| Canada | 2016-07-14 | cases | 143.0 | |
| Venezuela | 2016-07-14 | cases | 25000.0 | |
| Bolivia | 2016-06-23 | cases | 125.0 | |
| Paraguay | 2016-06-21 | cases | 275.0 | |
| Guyana | 2016-03-31 | cases | 6.0 |
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> | |
| .land { | |
| fill: #ddd; | |
| } | |
| .country-boundary { | |
| fill: none; | |
| stroke: #777; | |
| stroke-dasharray: 1,1; | |
| stroke-linejoin: round; | |
| } | |
| .country-label { | |
| fill: #000000; | |
| fill-opacity: .5; | |
| font-weight: 300; | |
| text-anchor: middle; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| div.tooltip { | |
| color: #222; | |
| background-color: #fff; | |
| padding: .5em; | |
| text-shadow: #f5f5f5 0 1px 0; | |
| border-radius: 2px; | |
| opacity: 0.9; | |
| position: absolute; | |
| } | |
| .color-0 {fill:rgb(255,255,178);} | |
| .color-1 {fill:rgb(254,204,92);} | |
| .color-2 {fill:rgb(253,141,60);} | |
| .color-3 {fill:rgb(240,59,32);} | |
| .color-4 {fill:rgb(189,0,38);} | |
| .color-NA{fill:#ddd;} | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 1820, | |
| height = 1400; | |
| var casesByCountry = d3.map(); | |
| var repDateByCountry = d3.map(); | |
| var quantize = d3.scale.quantize() | |
| .domain([0, 100000]) | |
| .range(d3.range(5).map(function(i) { return "color-" + i; })); | |
| var thresholds = d3.scale.threshold() | |
| .domain([1000, 10000, 25000, 100000]) | |
| .range(['#ffffb2','#fed98e','#fe9929','#d95f0e','#bd0026']) | |
| var projection = d3.geo.mercator() | |
| .scale(500) | |
| .center([-20,18]) | |
| .translate([600 + width / 2, -100 + height / 2]) | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .attr("border", 1); | |
| var borderPath = svg.append("rect") | |
| .attr("x", 0) | |
| .attr("y", 0) | |
| .attr("height", height) | |
| .attr("width", width) | |
| .style("stroke", '#ddd') | |
| .style("fill", "#EBF4FA") | |
| .style("stroke-width", 1); | |
| var tooltip = d3.select('body').append('div') | |
| .attr('class', 'hidden tooltip'); | |
| d3.csv('cases.csv', function(error, data) { | |
| if (error) throw error; | |
| data.forEach(function(d) { | |
| repDateByCountry[d.country] = d.report_date; | |
| casesByCountry[d.country] = +d.value;}) | |
| }); | |
| // console.log(repDateByCountry) | |
| d3.json("/karzak/raw/c9b93cbeae39ec888357749c2a9f5ea2/am.json", function(error, am) { | |
| if (error) throw error; | |
| function contains(a, obj) { | |
| for (var i = 0; i < a.length; i++) { | |
| if (a[i] === obj) { | |
| return true; | |
| } | |
| } | |
| return false; | |
| }; | |
| function tipText(country_name) { | |
| if (casesByCountry[country_name] !== undefined) { | |
| return country_name + "<br> Cases: " + casesByCountry[country_name] + "<br> Last Report: " + repDateByCountry[country_name]; | |
| }else{return country_name + "<br> Cases: No Data"} | |
| }; | |
| svg.append("g") | |
| .attr("class", "zika_countries") | |
| .selectAll("path") | |
| .data(topojson.feature(am, am.objects.americas).features) | |
| .enter().append("path") | |
| // .attr("class", function(d) { | |
| // if(casesByCountry[d.properties.name] !== undefined){ | |
| // return quantize(casesByCountry[d.properties.name]); | |
| // }else {return 'color-NA';} | |
| // }) | |
| .style("fill", function(d) { | |
| if(casesByCountry[d.properties.name] !== undefined){ | |
| return thresholds(casesByCountry[d.properties.name]); | |
| }else {return '#ddd';} | |
| }) | |
| .attr("d", path) | |
| .on('mousemove', function(d) { | |
| var mouse = d3.mouse(svg.node()).map(function(d) { | |
| return parseInt(d); | |
| }); | |
| tooltip.classed('hidden', false) | |
| .attr('style', 'left:' + (mouse[0] + 15) + | |
| 'px; top:' + (mouse[1] - 35) + 'px; font-size: 9px') | |
| .html(tipText(d.properties.name)) | |
| }) | |
| .on('mouseout', function() { | |
| tooltip.classed('hidden', true); | |
| }); | |
| svg.append("path") | |
| .datum(topojson.mesh(am, am.objects.americas, function(a,b) { | |
| return a !== b;})) | |
| .attr("d", path) | |
| .attr("class", 'country-boundary'); | |
| function getLabelText(country_name) { | |
| var names = ['Mexico', 'United States', 'Canada', 'Brazil', 'Argentina', | |
| 'Colombia', 'Bolivia', 'Ecuador', 'Peru', 'Cuba', | |
| 'Venezuela', 'Paraguay', 'Guyana', 'Honduras', | |
| 'Nicaragua', 'Panama', 'Uruguay'] | |
| if (contains(names, country_name)) { | |
| return country_name; | |
| }else{return '';} | |
| }; | |
| function getLabelSize(country_name) { | |
| var big = ['Mexico', 'United States', 'Brazil', 'Canada'] | |
| var small = ['Argentina', 'Colombia', 'Bolivia', 'Peru', 'Cuba', | |
| 'Venezuela',] | |
| if (contains(big, country_name)) { | |
| return "14px"; | |
| }else if(contains(small, country_name)){ | |
| return "12px"; | |
| }else{return "9px";} | |
| }; | |
| function offsetLabelHorz(country_name) { | |
| if (country_name === 'Peru') { | |
| return '-.5em'; | |
| }else if (country_name === 'Canada') { | |
| return '-2.25em'; | |
| } else{return '.25em'} | |
| } | |
| function offsetLabelVert(country_name) { | |
| if (country_name === 'Canada') { | |
| return '19.5em'; | |
| }else if (country_name === 'Guyana') { | |
| return '-1.25em'; | |
| }else if (country_name === 'Honduras') { | |
| return '.25em'; | |
| }else if (country_name === 'Nicaragua') { | |
| return '1em'; | |
| } else{return '.5em'} | |
| } | |
| svg.selectAll("country-label") | |
| .data(topojson.feature(am, am.objects.americas).features) | |
| .enter().append("text") | |
| .attr("class", function(d) { return "country-label " + d.id;}) | |
| .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")";}) | |
| .attr("dy", function(d) {return offsetLabelVert(d.properties.name);}) | |
| .attr("dx", function(d) {return offsetLabelHorz(d.properties.name);}) | |
| .attr("font-size", function(d) {return getLabelSize(d.properties.name);}) | |
| .text(function(d) { return getLabelText(d.properties.name);}); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment