Assistant Professor of Data Science and Analytics, Georgetown University
Inputs.range([0,10], {value: 0, step: 1, label: "Kyiv"})
Plot.plot({
// width: 975,
// height: 610,
// projection: "identity",
color: {
// type: "quantize",
// n: 9,
// domain: [1, 10],
scheme: "blues",
label: "Demand",
legend: true
},
marks: [
Plot.geo(states, Plot.centroid({
fill: d => regionDataMap.get(d.properties.NAME_1),
tip: true,
channels: {
name: d => d.properties.NAME_1,
iso: d => d.properties.ISO_1
}
})),
Plot.text(states, Plot.centroid({
text: (d) => d.properties.name, fill: "currentColor", stroke: "white"
})),
]
})
//unemployment = new Map((await FileAttachment("Book1.csv").csv()).map(d => [d.id, +d.rate]))
//demand = new Map((await FileAttachment("Book1.csv").csv()).map(d => [d.id, +d.pop]))
demand = new Map([
["Cherkasy", 10],
])
//ua_topo = FileAttachment("ukraine2.json").json()
ua_topo = FileAttachment("Ukraine-regions@1.json").json()
// Keep just the inclStates
ua_topo.objects.UKR_adm1.geometries = ua_topo.objects.UKR_adm1.geometries.filter(d => inclCodes.indexOf(d.properties.ISO_1) > -1)
//ua_geojson = FileAttachment("UKR1_simplified.geojson").json()
states = topojson.feature(ua_topo, ua_topo.objects.UKR_adm1)
//tjSimplify.filter(states, d => inclCodes.indexOf(d.properties.ISO_1) > -1)
statemap = new Map(states.features.filter(d => inclCodes.indexOf(d.properties.ISO_1) > -1).map(d => [d.properties.NAME_1, d]))
regionData = d3.csv("https://docs.google.com/spreadsheets/d/e/2PACX-1vR792Vvir2BIafIxLp_9FlkcElgrmTRgTvA6O9qWbpcrrOZ1MGSh3EIAiuRphCJQhCBA50uSadv01Md/pub?gid=0&single=true&output=csv")
inclRegionData = regionData.filter(d => inclCodes.indexOf(d.iso) > -1)
regionDataMap = new Map(inclRegionData.map(d => [d.name_en,parseInt(d.initial_demand)]))
allCodes = regionData.map(d => d.iso)
reducedCodes = [
"UA-30", // Kyiv city
"UA-32" // Kyiv oblast
]
inclCodes = allCodes.filter(d => reducedCodes.indexOf(d) > -1)
// Uncomment for Leaflet version
// {
// const container = yield htl.html`<div style="height: 500px;">`;
// const map = L.map(container);
// const layer = L.geoJSON(states).addTo(map);
// map.fitBounds(layer.getBounds(), {maxZoom: 9});
// L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
// attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
// }).addTo(map);
// }
// Uncomment for ObservablePlot version
// Plot.plot({
// // width: 975,
// // height: 610,
// // projection: "identity",
// color: {
// // type: "quantize",
// // n: 9,
// // domain: [1, 10],
// scheme: "blues",
// label: "Demand",
// legend: true
// },
// marks: [
// Plot.geo(states, Plot.centroid({
// fill: d => regionDataMap.get(d.properties.NAME_1),
// tip: true,
// channels: {
// name: d => d.properties.NAME_1,
// iso: d => d.properties.ISO_1
// }
// })),
// Plot.text(states, Plot.centroid({
// text: (d) => d.properties.name, fill: "currentColor", stroke: "white"
// })),
// ]
// })
// import { simplify } from "npm:topojson-simplify";
tjSimplify = require("topojson-simplify")
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.
