This chart is created as a response to the call to redesign the OLPC map by Curran Kelleher.
Original map at OLPC website.
Last active
April 23, 2017 17:00
-
-
Save bkamapantula/a57e5ba84e33872d11376fbbf4f03e51 to your computer and use it in GitHub Desktop.
OLPC map redesign
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <link rel="stylesheet" type="text/css" href="http://rawgithub.com/Caged/d3-tip/master/examples/example-styles.css"> | |
| <style> | |
| path { | |
| stroke: white; | |
| stroke-width: 0.25px; | |
| fill: grey; | |
| } | |
| .no-data { | |
| fill: #ccc; | |
| } | |
| .fadeaway { | |
| opacity: 0.05; | |
| } | |
| .brighten { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <h3 class="text-center">Country-wise distribution of <abbr title="One Laptop Per Child">OLPC</abbr> laptops</h3> | |
| <div class="col-lg-6 col-md-6 col-sm-6"> | |
| <div class="btn-group text-left"> | |
| <button data-button="color" class="btn btn-sm btn-default btn-data active">By color</button> | |
| <button data-button="count" class="btn btn-sm btn-default btn-data">By count</button> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-lg-12 col-md-12 col-sm-12 text-left" id="map"></div> | |
| <div class="col-lg-12 col-md-12 col-sm-12 text-right"> | |
| <h4>By Color</h4> | |
| <p> | |
| The <section style="background: red; display: inline-block; color: white;">darker the red</section>, lower the count of laptops in a country and the <section style="background: green; display: inline-block; color: white;">darker the green</section>, higher the count of laptops in a country.</p> | |
| <h4>By Count</h4> | |
| <p> | |
| The greater the radius of a circle, higher the number of laptops in a country and vice-versa. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <p class="muted"> | |
| This chart is created as a response to the call to <a href="http://tinyletter.com/curran/letters/introducing-d3-makeover">redesign the OLPC map by Curran Kelleher</a>. <a href="https://github.com/curran/data/blob/gh-pages/olpc/laptopsPerCountryWithLatLon.csv">Source data</a>. | |
| </p> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> | |
| <script src="http://d3js.org/topojson.v0.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).on("click", ".btn-data", function() { | |
| $(".btn-data").removeClass('active') | |
| $(this).addClass('active') | |
| if($(this).data("button") == "count") { | |
| $("path").removeClass('brighten').addClass('fadeaway') | |
| $("circle").removeClass('fadeaway').addClass('brighten') | |
| } else { // color | |
| $("circle").removeClass('brighten').addClass('fadeaway') | |
| $("path").removeClass('fadeaway').addClass('brighten') | |
| } | |
| }) | |
| .on("click", ".btn-continent", function() { | |
| $(".btn-continent").removeClass('active') | |
| $(this).addClass('active') | |
| $("circle").addClass('fadeaway') | |
| $("circle[data-continent=" + $(this).data("continent") + "]").removeClass('fadeaway').addClass('brighten') | |
| $("path").addClass('fadeaway') | |
| $("path[data-continent=" + $(this).data("continent") + "]").removeClass('fadeaway').addClass('brighten') | |
| }) | |
| </script> | |
| <script> | |
| var width = 960, | |
| height = 500 | |
| var projection = d3.geo.mercator() | |
| .center([0, 5]) | |
| .scale(200) | |
| // .rotate([-180,0]) | |
| var svg = d3.select("#map").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| var path = d3.geo.path() | |
| .projection(projection) | |
| var g = svg.append("g") | |
| // load and display the World | |
| d3.json("world.json", function(error, topology) { | |
| // RdYlGn[11] - https://bl.ocks.org/mbostock/5577023 | |
| var colors = d3.scale.quantize() | |
| .range(["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"]) | |
| function parsing(d) { | |
| return { | |
| country: d.country, | |
| count: +d.count, | |
| latitude: d.latitude, | |
| longitude: d.longitude | |
| } | |
| } | |
| // load and display the cities | |
| d3.csv("laptopsPerCountryWithLatLon.csv", parsing, function(error, data) { | |
| var tip = d3.tip().attr('class', 'd3-tip').html(function(d) { | |
| if(Object.keys(d).indexOf("properties") > -1) { | |
| var thisValue = _.filter(data, function(dataItem) { return dataItem.country === d.properties.name }) | |
| var retVal = thisValue.length > 0 ? "<p>Country: " + thisValue[0].country + "</p><p>Count: " + thisValue[0].count + "</p>" : "" | |
| return retVal | |
| } else { | |
| return "<p>Country: " + d.country + "</p><p>Count: " + d.count + "</p>" | |
| } | |
| }) | |
| svg.call(tip) | |
| var minMax = [d3.min(data, function(d) { return d.count; }), d3.max(data, function(d) { return d.count; })] | |
| colors.domain(minMax) | |
| g.selectAll("path") | |
| .data(topology.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .attr("class", "paths") | |
| .attr("data-country", function(d) { return d.properties.name; }) | |
| .style("fill", function(d) { | |
| var thisValue = _.filter(data, function(dataItem) { return dataItem.country.toLowerCase() == d.properties.name.toLowerCase(); }) | |
| return thisValue.length > 0 ? colors(thisValue[0].count) : "#ccc"; | |
| }) | |
| .on("mouseover", tip.show) | |
| .on("mouseout", tip.hide) | |
| var radius = d3.scale.linear() | |
| .domain(minMax) | |
| .range([10, 30]) | |
| g.selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("class", "circles fadeaway") | |
| .attr("data-continent", function(d) { return d.continent; }) | |
| .attr("cx", function(d) { | |
| return projection([d.longitude, d.latitude])[0]; | |
| }) | |
| .attr("cy", function(d) { | |
| return projection([d.longitude, d.latitude])[1]; | |
| }) | |
| .attr("r", function(d) { return radius(d.count); }) | |
| .style("fill", "red") | |
| .on("mouseover", tip.show) | |
| .on("mouseout", tip.hide); | |
| }); | |
| }); | |
| // zoom and pan | |
| var zoom = d3.behavior.zoom() | |
| .on("zoom",function() { | |
| g.attr("transform","translate("+ | |
| d3.event.translate.join(",")+")scale("+d3.event.scale+")"); | |
| g.selectAll("circle") | |
| .attr("d", path.projection(projection)); | |
| g.selectAll("path") | |
| .attr("d", path.projection(projection)); | |
| }); | |
| svg.call(zoom) | |
| </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
| continent | country | count | latitude | longitude | |
|---|---|---|---|---|---|
| Asia | Afghanistan | 6165 | 33.93911 | 67.709953 | |
| Asia | Mongolia | 14500 | 46.862496 | 103.846656 | |
| Asia | Nepal | 7680 | 28.394857 | 84.124008 | |
| Asia | Iran | 343 | 32.427908 | 53.688046 | |
| Asia | China | 1000 | 35.86166 | 104.195397 | |
| Asia | Sri Lanka | 1800 | 7.873054 | 80.771797 | |
| Asia | Pakistan | 1200 | 30.375321 | 69.345116 | |
| Asia | Thailand | 1000 | 15.870032 | 100.992541 | |
| Asia | India | 1000 | 20.593684 | 78.96288 | |
| Asia | Malaysia | 100 | 4.210484 | 101.975766 | |
| Asia | Philippines | 2360 | 12.879721 | 121.774017 | |
| Asia | Iraq | 9150 | 33.223191 | 43.679291 | |
| Asia | Indonesia | 100 | -0.789275 | 113.921327 | |
| Asia | Gaza | 6000 | 31.354676 | 34.308825 | |
| Asia | West Bank | 3600 | 31.952162 | 35.233154 | |
| Asia | Cambodia | 1000 | 12.565679 | 104.990963 | |
| Asia | Lebanon | 450 | 33.854721 | 35.862285 | |
| South America | Peru | 980000 | -9.189967 | -75.015152 | |
| South America | Mexico | 58740 | 23.634501 | -102.552784 | |
| South America | Uruguay | 795500 | -32.522779 | -55.765835 | |
| South America | Brazil | 2600 | -14.235004 | -51.92528 | |
| South America | Argentina | 65500 | -38.416097 | -63.616672 | |
| South America | Paraguay | 13549 | -23.442503 | -58.443832 | |
| South America | Colombia | 25316 | 4.570868 | -74.297333 | |
| Africa | Ethiopia | 6840 | 9.145 | 40.489673 | |
| Africa | Nigeria | 6100 | 9.081999 | 8.675277 | |
| Africa | Rwanda | 280313 | -1.940278 | 29.873888 | |
| Africa | Mozambique | 6000 | -18.665695 | 35.529562 | |
| Africa | Swaziland | 500 | -26.522503 | 31.465866 | |
| Africa | Ghana | 300 | 7.946527 | -1.023194 | |
| Africa | Mali | 6135 | 17.570692 | -3.996166 | |
| Africa | Costa Rica | 5000 | 9.748917 | -83.753428 | |
| Africa | Gabon | 8100 | -0.803689 | 11.609444 | |
| Africa | Togo | 310 | 8.619543 | 0.824782 | |
| Africa | Kenya | 500 | -0.023559 | 37.906193 | |
| Africa | Uganda | 1200 | 1.373333 | 32.290275 | |
| North America | Haiti | 15000 | 18.971187 | -72.285215 | |
| North America | Nicaragua | 42000 | 12.865416 | -85.207229 | |
| North America | Guatemala | 217 | 15.783471 | -90.230759 | |
| North America | Federated States of Micronesia | 800 | 7.425554 | 150.550812 | |
| North America | Honduras | 57200 | 15.199999 | -86.241905 | |
| North America | El Salvador | 200 | 13.794185 | -88.89653 | |
| North America | Dominican Republic | 750 | 18.735693 | -70.162651 | |
| Others | Solomon Islands | 300 | -9.64571 | 160.156194 | |
| Others | Papua New Guinea | 2350 | -6.314993 | 143.95555 | |
| Others | Fiji | 1130 | -16.578193 | 179.414413 | |
| Europe | Greece | 880 | 39.074208 | 21.824312 | |
| Europe | Italy | 1500 | 41.87194 | 12.56738 | |
| Australia | Australia | 61668 | -25.274398 | 133.775136 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment