block by palewire d2906de347a160f38bc0b7ca57721328

World Choropleth

Full Screen

Source: California Civic Data Coalition

This map shows the number of students in each country enrolled in the online class “Python for Data Journalists” taught by Ben Welsh and the California Civic Data Coalition in 2017. More than 2,700 total students from more than 120 countries participated in the month-long course.

The code uses d3 version 4 and a threshold scale. It is based on previous choropleth maps published by Mike Bostock.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .countries {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
  }
  .legendThreshold {
      font-size: 12px;
      font-family: sans-serif;
  }
  .caption {
      fill: #000;
      text-anchor: start;
      font-weight: bold;
  }
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>
<script>
// The svg
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
var path = d3.geoPath();
var projection = d3.geoNaturalEarth()
    .scale(width / 2 / Math.PI)
    .translate([width / 2, height / 2])
var path = d3.geoPath()
    .projection(projection);

// Data and color scale
var data = d3.map();
var colorScheme = d3.schemeReds[6];
colorScheme.unshift("#eee")
var colorScale = d3.scaleThreshold()
    .domain([1, 6, 11, 26, 101, 1001])
    .range(colorScheme);

// Legend
var g = svg.append("g")
    .attr("class", "legendThreshold")
    .attr("transform", "translate(20,20)");
g.append("text")
    .attr("class", "caption")
    .attr("x", 0)
    .attr("y", -6)
    .text("Students");
var labels = ['0', '1-5', '6-10', '11-25', '26-100', '101-1000', '> 1000'];
var legend = d3.legendColor()
    .labels(function (d) { return labels[d.i]; })
    .shapePadding(4)
    .scale(colorScale);
svg.select(".legendThreshold")
    .call(legend);

// Load external data and boot
d3.queue()
    .defer(d3.json, "//enjalot.github.io/wwsd/data/world/world-110m.geojson")
    .defer(d3.csv, "mooc-countries.csv", function(d) { data.set(d.code, +d.total); })
    .await(ready);

function ready(error, topo) {
    if (error) throw error;

    // Draw the map
    svg.append("g")
        .attr("class", "countries")
        .selectAll("path")
        .data(topo.features)
        .enter().append("path")
            .attr("fill", function (d){
                // Pull data for this country
                d.total = data.get(d.id) || 0;
                // Set the color
                return colorScale(d.total);
            })
            .attr("d", path);
}
</script>

mooc-countries.csv

name,total,percent,code
Albania,2,0.000730727073438,ALB
Algeria,2,0.000730727073438,DZA
Antigua And Barbuda,3,0.00109609061016,ATG
Argentina,52,0.0189989039094,ARG
Armenia,1,0.000365363536719,ARM
Australia,34,0.0124223602484,AUS
Austria,6,0.00219218122031,AUT
Azerbaijan,3,0.00109609061016,AZE
Bangladesh,3,0.00109609061016,BGD
Belarus,2,0.000730727073438,BLR
Belgium,13,0.00474972597735,BEL
Belize,1,0.000365363536719,BLZ
Bermuda,1,0.000365363536719,BMU
"Bolivia, Plurinational State Of",3,0.00109609061016,BOL
Bosnia And Herzegovina,1,0.000365363536719,BIH
Botswana,1,0.000365363536719,BWA
Brazil,319,0.116550968213,BRA
Bulgaria,2,0.000730727073438,BGR
Burundi,1,0.000365363536719,BDI
Cambodia,1,0.000365363536719,KHM
Cameroon,3,0.00109609061016,CMR
Canada,62,0.0226525392766,CAN
Chile,23,0.00840336134454,CHL
China,26,0.00949945195469,CHN
Colombia,32,0.011691633175,COL
Costa Rica,9,0.00328827183047,CRI
Croatia,1,0.000365363536719,HRV
Cuba,3,0.00109609061016,CUB
Czechia,6,0.00219218122031,CZE
Denmark,5,0.0018268176836,DNK
Dominican Republic,5,0.0018268176836,DOM
Ecuador,21,0.0076726342711,ECU
Egypt,13,0.00474972597735,EGY
El Salvador,5,0.0018268176836,SLV
Ethiopia,1,0.000365363536719,ETH
Fiji,2,0.000730727073438,FJI
Finland,9,0.00328827183047,FIN
France,23,0.00840336134454,FRA
Georgia,3,0.00109609061016,GEO
Germany,63,0.0230179028133,DEU
Ghana,9,0.00328827183047,GHA
Greece,14,0.00511508951407,GRC
Guatemala,13,0.00474972597735,GTM
Guyana,1,0.000365363536719,GUY
Haiti,1,0.000365363536719,HTI
Honduras,6,0.00219218122031,HND
Hong Kong,20,0.00730727073438,HKG
Hungary,9,0.00328827183047,HUN
India,70,0.0255754475703,IND
Indonesia,7,0.00255754475703,IDN
Iraq,2,0.000730727073438,IRQ
Ireland,7,0.00255754475703,IRL
Israel,3,0.00109609061016,ISR
Italy,26,0.00949945195469,ITA
Jamaica,1,0.000365363536719,JAM
Japan,8,0.00292290829375,JPN
Jordan,4,0.00146145414688,JOR
Kazakhstan,1,0.000365363536719,KAZ
Kenya,10,0.00365363536719,KEN
"Korea, Republic Of",11,0.00401899890391,KOR
Kyrgyzstan,1,0.000365363536719,KGZ
Latvia,2,0.000730727073438,LVA
Lebanon,3,0.00109609061016,LBN
Liberia,2,0.000730727073438,LBR
Libya,1,0.000365363536719,LBY
Malawi,5,0.0018268176836,MWI
Malaysia,12,0.00438436244063,MYS
Mexico,81,0.0295944464742,MEX
Mongolia,1,0.000365363536719,MNG
Morocco,3,0.00109609061016,MAR
Mozambique,4,0.00146145414688,MOZ
Myanmar,2,0.000730727073438,MMR
Nepal,3,0.00109609061016,NPL
Netherlands,26,0.00949945195469,NLD
New Zealand,10,0.00365363536719,NZL
Nicaragua,4,0.00146145414688,NIC
Nigeria,39,0.014249177932,NGA
Norway,10,0.00365363536719,NOR
Pakistan,11,0.00401899890391,PAK
"Palestine, State Of",3,0.00109609061016,PSE
Panama,2,0.000730727073438,PAN
Paraguay,3,0.00109609061016,PRY
Peru,18,0.00657654366094,PER
Philippines,14,0.00511508951407,PHL
Poland,3,0.00109609061016,POL
Portugal,22,0.00803799780782,PRT
Puerto Rico,2,0.000730727073438,PRI
Romania,10,0.00365363536719,ROU
Russian Federation,14,0.00511508951407,RUS
Rwanda,2,0.000730727073438,RWA
Réunion,1,0.000365363536719,REU
Saudi Arabia,1,0.000365363536719,SAU
Senegal,1,0.000365363536719,SEN
Serbia,3,0.00109609061016,SRB
Sierra Leone,2,0.000730727073438,SLE
Singapore,11,0.00401899890391,SGP
Slovakia,3,0.00109609061016,SVK
Somalia,1,0.000365363536719,SOM
South Africa,18,0.00657654366094,ZAF
South Sudan,1,0.000365363536719,SSD
Spain,104,0.0379978078188,ESP
Sri Lanka,2,0.000730727073438,LKA
Sudan,1,0.000365363536719,SDN
Sweden,20,0.00730727073438,SWE
Switzerland,9,0.00328827183047,CHE
Taiwan,18,0.00657654366094,TWN
"Tanzania, United Republic Of",1,0.000365363536719,TZA
Thailand,2,0.000730727073438,THA
Timor-Leste,1,0.000365363536719,TLS
Togo,1,0.000365363536719,TGO
Trinidad And Tobago,5,0.0018268176836,TTO
Tunisia,3,0.00109609061016,TUN
Turkey,7,0.00255754475703,TUR
Uganda,1,0.000365363536719,UGA
Ukraine,30,0.0109609061016,UKR
United Arab Emirates,1,0.000365363536719,ARE
United Kingdom,87,0.0317866276946,GBR
United States,1064,0.388746803069,USA
Uruguay,4,0.00146145414688,URY
"Venezuela, Bolivarian Republic Of",28,0.0102301790281,VEN
Viet Nam,1,0.000365363536719,VNM
Zimbabwe,3,0.00109609061016,ZWE