Public
Edited
Nov 27, 2023
Fork of World Map
Insert cell
md`# World Map`
Insert cell
import { vl } from "@vega/vega-lite-api"
Insert cell
import { aq, op } from "@uwdata/arquero"
Insert cell
import {slider} from "@jashkenas/inputs"
Insert cell
import {legend} from "@d3/color-legend"
Insert cell
import {addExtendedProjections, extendedProjections} from "@vega/vega-utilities"
Insert cell
import {vl as api} from "@vega/vega-lite-api"
Insert cell
topojson = require("topojson-client@3")
Insert cell
d3 = require("d3@5")
Insert cell
color = d3.scaleSequential(d3.interpolateSpectral).domain([6, 0])
Insert cell
function format(d) {
return `${d["Country Name"]}: ${"Cost of Living Index"}`;
}
Insert cell
world = fetch("https://unpkg.com/world-atlas@1/world/110m.json").then(
response => response.json()
)
Insert cell
height = width / 2 + 60
Insert cell
projection = d3
.geoNaturalEarth1()
.rotate([-10, 0])
.fitExtent([[1, 1], [width - 1, height - 51]], { type: "Sphere" })
.precision(0.1)
Insert cell
viewof year = slider({
min: 0,
max: 125,
value: 125,
step: 1,
title: "Year"
})
Insert cell
legend({
color: d3.scaleSequential([6, 0], d3.interpolateSpectral),
title: `Cost of Living in ${year}`
})
Insert cell
choroplethData = {
const [worldTopo, clindex, countryCodes] = await Promise.all([
d3.json('https://unpkg.com/world-atlas@1/world/110m.json'),
FileAttachment("CLI_code@2.csv").csv(),
d3.csv(
"https://gist.githubusercontent.com/jashkenas/59c7c820265537b941251dabe33a8413/raw/7ccd0d24ef50b3152ce848e7c3f9ce21a0d75af6/country-codes.csv"
)
]);
const worldGeoJSON = topojson.feature(worldTopo, "countries");
return worldGeoJSON.features.map(countryFeature => {
const iso3166Code = countryFeature.id;
const alpha3 = countryCodes.find(
codes => codes['country-code'] == iso3166Code
)?.['alpha-3'];

const countryclindexData = clindex.find(
country => country['Country Code'] == alpha3
);
countryFeature.properties = countryclindexData;
return countryFeature;
});
}
Insert cell
map = vl
.markGeoshape({ stroke: 'white' })
.data(choroplethData)
.encode(
vl
.color({
condition: {
test: `!datum['properties.${"Cost of Living Index"}']`,
value: "lightgrey"
}
})
.fieldQ(`properties.${"Cost of Living Index"}`)
.scale({
scheme: 'spectral',
domain: [6, 0]
})
.legend(null),
vl.tooltip([
{
field: 'properties["country"]',
type: 'nominal',
title: 'Country'
},
{
field: `properties.${"Cost of Living Index"}`,
type: 'quantitative',
title: 'Cost of Living Index(2022)'
}
])
)
.project(
vl
.projection("naturalEarth1")
.translate([450, 300])
.rotate(0)
.scale(200)
)
.width(width - 50)
.height(500)
.config({
view: { stroke: null }
})
.render()
Insert cell

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.
Learn more