Public
Edited
Sep 26, 2023
viewof interpolatorSelected = Inputs.select(interpolateOptions, {value: "interpolateOrRd", label: "Interpolator for colors"})
viewof projectionSelected = Inputs.select(projectionOptions, {value: projectionOptions[7], label: "Projection types"})
chart
data = FileAttachment("petrol-price-2022-06-20.csv").csv({typed: true})
prices = d3.map(data, function(d) { return {"country": d.Country, "price": d['Price Per Liter (USD)']} })
import { countryNames, interpolateOptions, projectionOptions } from "@chiahsun-ws/world-choropleth"
d3.map(d3.filter(prices, d => !countryNames.includes(d['country'])), d => d['country'])
d3.filter(countryNames, d => d.includes("Miquelon"))
// Since some namings are different from some namings in geo, create the mapping to match them
renameMapping = new Map([
["United States", "United States of America"],
["Czech Republic (Czechia)", "Czechia"],
["Dominican Republic", "Dominican Rep."],
["C�te d'Ivoire", "Côte d'Ivoire"],
["Bosnia and Herzegovina", "Bosnia and Herz."],
["State of Palestine", "Palestine"],
["DR Congo", "Dem. Rep. Congo"],
["North Macedonia", "Macedonia"],
["Brunei ", "Brunei"],
["South Sudan", "S. Sudan"],
["Cayman Islands", "Cayman Is."],
["Central African Republic", "Central African Rep."],
["British Virgin Islands", "British Virgin Is."],
["Saint Pierre & Miquelon", "St. Pierre and Miquelon"]
])
d3.map(d3.filter(prices, d => !countryNames.includes(renameMapping.get(d['country']) || d['country'])), d => d['country'])
d3.extent(prices, d => d['price'])
d3.extent(prices.filter(d => d['price'] != 14.5), d => d['price'])
nameColumnInData = "country"
valueColumn = "price"
legendTitle = "Price Per Liter (USD)"
interpolator = function(t) {
// Since there is an extreme value in north korea, we need an custom function to distinguish small values
// return d3[interpolatorSelected]((Math.cbrt(t)));
// return d3[interpolatorSelected]((Math.pow(t, 0.4)));
return d3[interpolatorSelected]((t < 14) ? t * 3 : t);
}
import { chart }
with {
prices as data,
nameColumnInData as nameColumnInData,
valueColumn as valueColumn,
renameMapping as renameMapping,
legendTitle as worldLegendTitle,
interpolator as interpolator,
projectionSelected as projectionType,
legendTitle as legendTitle
}
from "@chiahsun-ws/world-choropleth"
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.
