chart = {
// Specify the chart’s dimensions.
const width = 928;
const marginTop = 46;
const height = width / 2 + marginTop;
// Fit the projection.
const projection = d3.geoEqualEarth().fitExtent([[2, marginTop + 2], [width - 2, height]], {type: "Sphere"});
const path = d3.geoPath(projection);
// Index the values and create the color scale.
const valuemap = new Map(tfrData.map(d => [d.country, d.tfr]));
const color = d3.scaleSequential(d3.extent(valuemap.values()), d3.interpolateYlGnBu);
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
// Append the legend.
svg.append("g")
.attr("transform", "translate(20,0)")
.append(() => Legend(color, {title: "Total Fertility Rate (TFR)", width: 260}));
// Add a white sphere with a black border.
svg.append("path")
.datum({type: "Sphere"})
.attr("fill", "white")
.attr("stroke", "currentColor")
.attr("d", path);
// Add a path for each country and color it according to this data.
svg.append("g")
.selectAll("path")
.data(countries.features)
.join("path")
.attr("fill", d => color(valuemap.get(d.properties.name)))
.attr("d", path)
.append("title")
.text(d => `${d.properties.name}\n${valuemap.get(d.properties.name)}`);
// Add a white mesh.
svg.append("path")
.datum(countrymesh)
.attr("fill", "none")
.attr("stroke", "white")
.attr("d", path);
return svg.node();
}
tfrData = [
{country: "Afghanistan", tfr: 4.27},
{country: "Albania", tfr: 1.45},
{country: "Algeria", tfr: 2.65},
{country: "Andorra", tfr: 1.15},
{country: "Angola", tfr: 5.45},
{country: "Antigua and Barb.", tfr: 1.94},
{country: "Argentina", tfr: 2.17},
{country: "Armenia", tfr: 1.6},
{country: "Australia", tfr: 1.76},
{country: "Austria", tfr: 1.47},
{country: "Azerbaijan", tfr: 1.98},
{country: "Bahamas", tfr: 1.8},
{country: "Bahrain", tfr: 1.91},
{country: "Bangladesh", tfr: 2.08},
{country: "Barbados", tfr: 1.68},
{country: "Belarus", tfr: 1.44},
{country: "Belgium", tfr: 1.77},
{country: "Belize", tfr: 2.08},
{country: "Benin", tfr: 4.69},
{country: "Bhutan", tfr: 1.77},
{country: "Bolivia", tfr: 2.26},
{country: "Bosnia and Herz.", tfr: 1.26},
{country: "Botswana", tfr: 2.88},
{country: "Brazil", tfr: 1.75},
{country: "Brunei", tfr: 1.74},
{country: "Bulgaria", tfr: 1.49},
{country: "Burkina Faso", tfr: 5.07},
{country: "Burundi", tfr: 4.95},
{country: "Cabo Verde", tfr: 2.11},
{country: "Cambodia", tfr: 2.2},
{country: "Cameroon", tfr: 4.58},
{country: "Canada", tfr: 1.57},
{country: "Central African Rep.", tfr: 4.81},
{country: "Chad", tfr: 5.8},
{country: "Chile", tfr: 1.75},
{country: "China", tfr: 1.62},
{country: "Colombia", tfr: 1.94},
{country: "Comoros", tfr: 4.27},
{country: "Dem. Rep. Congo", tfr: 5.45},
{country: "Congo", tfr: 4.41},
{country: "Costa Rica", tfr: 1.8},
{country: "Cote d'Ivoire", tfr: 4.5},
{country: "Croatia", tfr: 1.49},
{country: "Cuba", tfr: 1.61},
{country: "Cyprus", tfr: 1.33},
{country: "Czechia", tfr: 1.74},
{country: "Denmark", tfr: 1.77},
{country: "Djibouti", tfr: 2.13},
{country: "Dominica", tfr: 2.01},
{country: "Dominican Rep.", tfr: 2.13},
{country: "Ecuador", tfr: 2.24},
{country: "Egypt", tfr: 2.85},
{country: "El Salvador", tfr: 2.04},
{country: "Eq. Guinea", tfr: 4.4},
{country: "Eritrea", tfr: 4.25},
{country: "Estonia", tfr: 1.57},
{country: "eSwatini", tfr: 2.79},
{country: "Ethiopia", tfr: 4.11},
{country: "Falkland Islands", tfr: 2.1},
{country: "Fiji", tfr: 2.23},
{country: "Finland", tfr: 1.74},
{country: "France", tfr: 1.9},
{country: "Gabon", tfr: 3.54},
{country: "Gambia", tfr: 4.52},
{country: "Georgia", tfr: 1.96},
{country: "Germany", tfr: 1.57},
{country: "Ghana", tfr: 3.95},
{country: "Greece", tfr: 1.33},
{country: "Greenland", tfr: 2.1},
{country: "Grenada", tfr: 1.92},
{country: "Guatemala", tfr: 2.78},
{country: "Guinea", tfr: 4.66},
{country: "Guinea-Bissau", tfr: 4.49},
{country: "Guyana", tfr: 2.06},
{country: "Haiti", tfr: 2.99},
{country: "Honduras", tfr: 2.32},
{country: "Hungary", tfr: 1.56},
{country: "Iceland", tfr: 1.95},
{country: "India", tfr: 2.07},
{country: "Indonesia", tfr: 1.99},
{country: "Iran", tfr: 1.92},
{country: "Iraq", tfr: 3.48},
{country: "Ireland", tfr: 1.84},
{country: "Israel", tfr: 2.93},
{country: "Italy", tfr: 1.31},
{country: "Jamaica", tfr: 2.05},
{country: "Japan", tfr: 1.34},
{country: "Jordan", tfr: 2.6},
{country: "Kazakhstan", tfr: 2.35},
{country: "Kenya", tfr: 3.39},
{country: "Kiribati", tfr: 2.18},
{country: "Kosovo", tfr: 2.1},
{country: "Kuwait", tfr: 2.22},
{country: "Kyrgyzstan", tfr: 2.93},
{country: "Laos", tfr: 2.48},
{country: "Latvia", tfr: 1.54},
{country: "Lebanon", tfr: 1.68},
{country: "Lesotho", tfr: 2.84},
{country: "Liberia", tfr: 4.56},
{country: "Libya", tfr: 2.41},
{country: "Liechtenstein", tfr: 1.45},
{country: "Lithuania", tfr: 1.59},
{country: "Luxembourg", tfr: 1.4},
{country: "Macedonia", tfr: 1.5},
{country: "Madagascar", tfr: 4.07},
{country: "Malawi", tfr: 4.25},
{country: "Malaysia", tfr: 1.74},
{country: "Maldives", tfr: 1.73},
{country: "Mali", tfr: 5.82},
{country: "Malta", tfr: 1.47},
{country: "Marshall Is.", tfr: 3.4},
{country: "Mauritania", tfr: 4.63},
{country: "Mauritius", tfr: 1.4},
{country: "Mexico", tfr: 1.79},
{country: "Micronesia", tfr: 2.22},
{country: "Moldova", tfr: 1.59},
{country: "Monaco", tfr: 1.5},
{country: "Mongolia", tfr: 1.89},
{country: "Montenegro", tfr: 1.81},
{country: "Morocco", tfr: 2.27},
{country: "Mozambique", tfr: 5.01},
{country: "Myanmar", tfr: 2},
{country: "Namibia", tfr: 3.16},
{country: "Nauru", tfr: 3.22},
{country: "Nepal", tfr: 1.88},
{country: "Netherlands", tfr: 1.61},
{country: "New Zealand", tfr: 1.86},
{country: "Nicaragua", tfr: 1.85},
{country: "Niger", tfr: 6.9},
{country: "Nigeria", tfr: 5.22},
{country: "North Korea", tfr: 1.82},
{country: "North Macedonia", tfr: 1.5},
{country: "Norway", tfr: 1.7},
{country: "Oman", tfr: 2.71},
{country: "Pakistan", tfr: 3.55},
{country: "Palau", tfr: 1.7},
{country: "Panama", tfr: 2.3},
{country: "Papua New Guinea", tfr: 3.64},
{country: "Paraguay", tfr: 1.88},
{country: "Peru", tfr: 2.18},
{country: "Philippines", tfr: 2.55},
{country: "Poland", tfr: 1.42},
{country: "Portugal", tfr: 1.41},
{country: "Puerto Rico", tfr: 1.0},
{country: "Qatar", tfr: 1.9},
{country: "Romania", tfr: 1.54},
{country: "Russia", tfr: 1.54},
{country: "Rwanda", tfr: 4.06},
{country: "St. Kitts and Nevis", tfr: 1.76},
{country: "Saint Lucia", tfr: 1.48},
{country: "St. Vin. and Gren.", tfr: 1.74},
{country: "Samoa", tfr: 3.71},
{country: "San Marino", tfr: 1.31},
{country: "São Tomé and Principe", tfr: 3.9},
{country: "Saudi Arabia", tfr: 1.89},
{country: "Senegal", tfr: 4.23},
{country: "Serbia", tfr: 1.48},
{country: "Seychelles", tfr: 1.81},
{country: "Sierra Leone", tfr: 4.19},
{country: "Singapore", tfr: 1.16},
{country: "Slovakia", tfr: 1.56},
{country: "Slovenia", tfr: 1.58},
{country: "Solomon Is.", tfr: 4.16},
{country: "Somalia", tfr: 5.81},
{country: "Somaliland", tfr: 4.6},
{country: "South Africa", tfr: 2.35},
{country: "South Korea", tfr: 1.1},
{country: "S. Sudan", tfr: 4.92},
{country: "Spain", tfr: 1.31},
{country: "Sri Lanka", tfr: 2.14},
{country: "Sudan", tfr: 4.33},
{country: "Suriname", tfr: 1.91},
{country: "Sweden", tfr: 1.69},
{country: "Switzerland", tfr: 1.55},
{country: "Syria", tfr: 2.8},
{country: "Taiwan", tfr: 1.14},
{country: "Tajikistan", tfr: 3.34},
{country: "Tanzania", tfr: 4.95},
{country: "Thailand", tfr: 1.5},
{country: "Timor-Leste", tfr: 3.94},
{country: "Togo", tfr: 4.28},
{country: "Tonga", tfr: 3.68},
{country: "Trinidad and Tobago", tfr: 1.68},
{country: "Tunisia", tfr: 1.96},
{country: "Turkey", tfr: 1.91},
{country: "Turkmenistan", tfr: 2.03},
{country: "Tuvalu", tfr: 3.3},
{country: "Uganda", tfr: 4.67},
{country: "Ukraine", tfr: 1.36},
{country: "United Arab Emirates", tfr: 1.7},
{country: "United Kingdom", tfr: 1.65},
{country: "United States of America", tfr: 1.84},
{country: "Uruguay", tfr: 1.75},
{country: "Uzbekistan", tfr: 2.5},
{country: "Vanuatu", tfr: 3.56},
{country: "Venezuela", tfr: 2.2},
{country: "Vietnam", tfr: 2.04},
{country: "W. Sahara", tfr: 3.7},
{country: "Yemen", tfr: 4.02},
{country: "Zambia", tfr: 4.6},
{country: "Zimbabwe", tfr: 3.56}
]
world = FileAttachment("countries-50m.json").json()
countries = topojson.feature(world, world.objects.countries)
countrymesh = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
import {Legend} from "@d3/color-legend"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
