| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| svg{ | |
| /*border: 1px solid silver;*/ | |
| } | |
| </style> | |
| <body> | |
| <div class="map-container"></div> | |
| <div class="legend-component"> | |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" height="50" width="600"> | |
| <g class="panel" transform="translate(50, 0)"> | |
| <defs><linearGradient id="legend-gradient"></linearGradient></defs> | |
| <rect height="30" width="500" class="color-band" fill="url(#legend-gradient)" /> | |
| <g class="axis"></g> | |
| <text class="unit"></text> | |
| </g> | |
| </svg> | |
| </div> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://d3js.org/queue.v1.min.js"></script> | |
| <script src="https://d3js.org/topojson.v1.min.js"></script> | |
| <script src="//d3js.org/d3.geo.projection.v0.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 30}, | |
| width = 1300 - margin.left - margin.right, | |
| height = 1000 - margin.top - margin.bottom; | |
| var colors = ['#eaf8ff', '#beedfe', '#4bd0ff', '#05a5de', '#2882be']; // colors to tweak | |
| var estoniaColor = '#004568'; | |
| var colorScale = d3.scale.linear() | |
| .range(colors); | |
| var path = d3.geo.path(); | |
| var svg = d3.select(".map-container") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append('g') | |
| .attr('class', 'map'); | |
| var projection = d3.geo.winkel3() | |
| .scale(200) | |
| .translate( [width / 2, height / 1.6]); | |
| var path = d3.geo.path().projection(projection); | |
| queue() | |
| .defer(d3.json, "world_countries.json") | |
| .defer(d3.csv, "world_population.csv") | |
| .await(ready); | |
| function ready(error, world, _population) { | |
| var populationByCode = {}; | |
| var population = _population.sort(function(a, b){ return b.population - a.population; }); | |
| console.log(population.map(function(d, i){ return d.name + ',' + d.population; }).slice(1, 11).join('\n')); | |
| population.forEach(function(d) { | |
| d.population = +d.population; | |
| populationByCode[d.code] = d.population; | |
| }); | |
| var populationValues = population.map(function(d, i){ return d.population; }); | |
| populationValues.sort(function(a, b){ return a - b; }); | |
| var populationMin = populationValues[0]; | |
| var populationMaxMinusBiggest = populationValues[populationValues.length - 2]; | |
| var populationMiddle = populationMin + (populationMaxMinusBiggest - populationMin) / 2; | |
| console.log(populationMin, populationMiddle, populationMaxMinusBiggest); | |
| // get as many data stops as you have color stops | |
| colorScale.domain([populationMin, populationMin + 100, populationMin + 4000, populationMiddle, populationMaxMinusBiggest]); | |
| var allColors = []; | |
| svg.append("g") | |
| .attr("class", "continents") | |
| .selectAll("path") | |
| .data([topojson.feature(world, world.objects.land).geometry]) | |
| .enter().append("path") | |
| .attr('d', path) | |
| // .style({stroke: 'none', fill: '#dff7ff'}); // continents color | |
| .style({stroke: 'none', 'stroke-width': 1, fill: 'none'}); // continents color | |
| svg.append("g") | |
| .attr("class", "countries") | |
| .selectAll("path") | |
| .data(topojson.feature(world, world.objects.countries).features) | |
| .enter().append("path") | |
| .filter(function(d){ return populationByCode[d.id]; }) | |
| .attr('d', path) | |
| .style("fill", function(d) { | |
| var color = d.id === 233 ? estoniaColor : colorScale(populationByCode[d.id]); | |
| allColors.push(color); | |
| return color; | |
| }) | |
| .style({stroke: 'none', 'stroke-width': 1.5}) | |
| .append('title') | |
| .text(function(d){ return populationByCode[d.id]; }); | |
| var stops = d3.select('#legend-gradient') | |
| .selectAll('stop') | |
| .data(colors) | |
| .enter().append('stop') | |
| .attr({ | |
| offset: function(d, i){ return i*(100/(colors.length-1)) + '%'; }, | |
| 'stop-color': function(d){ return d; } | |
| }); | |
| var labelValues = colorScale.domain(); | |
| var labels = d3.select('.axis') | |
| .selectAll('line.tick-line') | |
| .data(labelValues) | |
| .enter().append('line').classed('tick-line', true) | |
| .attr({ | |
| x1: function(d, i){ return i*(500/(labelValues.length-1)); }, | |
| y1: 30, | |
| x2: function(d, i){ return i*(500/(labelValues.length-1)); }, | |
| y2: 35, | |
| stroke: 'black' | |
| }); | |
| var labels = d3.select('.axis') | |
| .selectAll('text.tick-label') | |
| .data(labelValues) | |
| .enter().append('text').classed('tick-label', true) | |
| .attr({ | |
| x: function(d, i){ return i*(500/(labelValues.length-1)); }, | |
| y: 50 | |
| }) | |
| .text(function(d){ return d; }) | |
| .attr({ | |
| dx: function(d, i){ return -(this.getBBox().width / 2); } | |
| }); | |
| var uniqueColors = allColors.reduce(function(prev, cur) { | |
| return (prev.indexOf(cur) < 0) ? prev.concat([cur]) : prev; | |
| }, []); | |
| console.log(uniqueColors); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
| name | code | population | |
|---|---|---|---|
| Afganistan | 4 | 5 | |
| Albaania | 8 | 2 | |
| Ameerika Ühendriigid | 840 | 3913 | |
| Andorra | 20 | 1 | |
| Angola | 24 | 1 | |
| Araabia Ühendemiraadid | 784 | 49 | |
| Argentina | 32 | 147 | |
| Armeenia | 51 | 23 | |
| Aserbaidžaan | 31 | 8 | |
| Austraalia | 36 | 2661 | |
| Austria | 40 | 283 | |
| Bahrein | 48 | 4 | |
| Belgia | 56 | 522 | |
| Belize | 84 | 2 | |
| Bermuda (Gbr) | 60 | 4 | |
| Boliivia | 68 | 3 | |
| Bosnia ja Hertsegoviina | 70 | 1 | |
| Brasiilia | 76 | 582 | |
| Brunei Darussalam | 96 | 1 | |
| Bulgaaria | 100 | 39 | |
| Colombia (Kolumbia) | 170 | 8 | |
| Costa Rica | 188 | 3 | |
| Dominikaani Vabariik | 214 | 3 | |
| Ecuador | 218 | 7 | |
| Eesti | 233 | 1120642 | |
| Egiptus | 818 | 20 | |
| Fidži | 242 | 2 | |
| Filipiinid | 608 | 9 | |
| Ghana | 288 | 1 | |
| Gibraltar (Gbr) | 292 | 1 | |
| Gruusia | 268 | 56 | |
| Guatemala | 320 | 5 | |
| Hiina | 156 | 32 | |
| Hispaania | 724 | 719 | |
| Holland | 528 | 650 | |
| Honduras | 340 | 42 | |
| Hongkong (Chn) | 344 | 13 | |
| Horvaatia | 191 | 13 | |
| Iirimaa | 372 | 2277 | |
| Iisrael | 376 | 579 | |
| India | 356 | 22 | |
| Indoneesia | 360 | 11 | |
| Iraak | 368 | 9 | |
| Iraan | 364 | 1 | |
| Island | 352 | 48 | |
| Itaalia | 380 | 541 | |
| Jaapan | 392 | 57 | |
| Jersey (Gbr) | 832 | 3 | |
| Jordaania | 400 | 1 | |
| Kaimanisaared (Gbr) | 136 | 1 | |
| Kambodža | 116 | 1 | |
| Kamerun | 120 | 3 | |
| Kanada | 124 | 3075 | |
| Kasahstan | 398 | 18 | |
| Katar | 634 | 5 | |
| Kenya | 404 | 4 | |
| Kongo DV | 178 | 1 | |
| Korea Vabariik | 410 | 3 | |
| Kosovo | 1 | ||
| Kreeka | 300 | 61 | |
| Kuveit | 414 | 1 | |
| Kõrgõzstan | 417 | 5 | |
| Küpros | 196 | 105 | |
| Leedu | 440 | 218 | |
| Liechtenstein | 438 | 1 | |
| Liibanon | 422 | 6 | |
| Liibüa | 434 | 1 | |
| Luksemburg | 442 | 239 | |
| Läti | 428 | 715 | |
| Lõuna-Aafrika Vabariik | 710 | 64 | |
| Malaisia | 458 | 10 | |
| Mali | 466 | 3 | |
| Malta | 470 | 25 | |
| Mehhiko | 484 | 18 | |
| Moldova | 498 | 39 | |
| Monaco | 492 | 25 | |
| Montenegro | 499 | 2 | |
| Määramata | 1 | ||
| Namiibia | 516 | 3 | |
| Nigeeria | 566 | 9 | |
| Norra | 578 | 1148 | |
| Omaan | 512 | 6 | |
| Pakistan | 586 | 1 | |
| Palestiina | 275 | 9 | |
| Panama | 591 | 4 | |
| Peruu | 604 | 10 | |
| Poola | 616 | 53 | |
| Portugal | 620 | 90 | |
| Prantsusmaa | 250 | 687 | |
| Rootsi | 752 | 4503 | |
| Rumeenia | 642 | 5 | |
| Réunion (Fra) | 638 | 1 | |
| Saksamaa | 276 | 4506 | |
| Saudi Araabia | 682 | 10 | |
| Senegal | 686 | 2 | |
| Serbia | 688 | 4 | |
| Singapur | 702 | 24 | |
| Slovakkia | 703 | 18 | |
| Sloveenia | 705 | 15 | |
| Somaalia | 706 | 1 | |
| Soome | 246 | 50865 | |
| Suurbritannia | 826 | 8105 | |
| Svalbard ja Jan Mayen (Nor) | 744 | 1 | |
| Süüria | 760 | 1 | |
| Taani | 208 | 583 | |
| Tai | 764 | 25 | |
| Taiwan (Chn) | 158 | 10 | |
| Tansaania | 834 | 1 | |
| Tonga | 776 | 1 | |
| Türgi | 792 | 60 | |
| Tšehhi | 203 | 99 | |
| Tšiili | 152 | 6 | |
| Ukraina | 804 | 483 | |
| Ungari | 348 | 57 | |
| Uruguay | 858 | 1 | |
| Usa Neitsisaared (Usa) | 92 | 1 | |
| Usbekistan | 860 | 4 | |
| Uus-Meremaa | 554 | 140 | |
| Valgevene | 112 | 178 | |
| Vanuatu | 548 | 2 | |
| Venemaa | 643 | 17044 | |
| Venezuela | 862 | 250 | |
| Vietnam | 704 | 9 | |
| Wallis ja Futuna (Fra) | 876 | 1 | |
| Ühendriikide Hajasaared (Usa) | 581 | 4 | |
| Šveits | 756 | 450 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment