Skip to content

Instantly share code, notes, and snippets.

@palewire
Forked from mbostock/.block
Last active August 17, 2023 03:59
Show Gist options
  • Save palewire/d2906de347a160f38bc0b7ca57721328 to your computer and use it in GitHub Desktop.
Save palewire/d2906de347a160f38bc0b7ca57721328 to your computer and use it in GitHub Desktop.
World Choropleth
license: MIT
height: 600
border: no
<!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, "http://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>
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment