Public
Edited
Aug 31, 2023
chart = Choropleth(timezone_changes, {
id: (d) => d?.id,
value: (d) => (d?.change_without_dst ? d?.change_without_dst - 1 : 0),
scale: d3.scaleDiverging,
domain: [0, 2, 20],
range: ["#F3F8FE", "#DBEBF6", "#6daed5"],
featureId: (f) => f.properties.tzid,
title: (f, d) => {
if (!d?.change_count) return;
const country = tz.getCountryForTimezone(f.properties.tzid);
return `${f.properties.tzid}${
country?.name ? " - " + country?.name : ""
}, \nIANA records ${
d?.change_count - 1
} changes in this timezone. \n\nIgnoring DST:${
d?.change_without_dst ? d?.change_without_dst - 1 : 0
}`;
},
// outline,
projection,
features,
borders: world,
onClick: (d) => {
const id = d.properties.tzid;
const tz = timezone_changes.find((x) => x.id == id);
console.log(tz);
mutable selected_tz = tz.id;
// tz?.link && window.open(tz?.link, "_blank");
},
fill: "gray",
stroke: "peru",
tzStroke: "white",
tzStrokeWidth: 0.4,
strokeWidth: 0.4,
width,
height
})
path = d3.geoPath(projection)
// projection = d3.geoIdentity().reflectY(true).fitWidth(width, features);
projection = d3.geoMiller().fitWidth(width, features)
features = {
topojson.feature(tdata, tdata.objects.timezones);
return FileAttachment("combined-with-oceans-simple-geo.json").json();
}
tdata = FileAttachment("combined-shapefile-with-oceans-topo-simple.json").json()
world = {
const countries = await FileAttachment("countries-110m@1.json").json();
return topojson.feature(countries, countries.objects.countries);
}
topojson = require("topojson-client@3")
d3 = require("d3@7", "d3-geo-projection@4")
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.
