ua = FileAttachment("ukraine2@1.json").json()
regions = topojson.feature(ua, ua.objects.regions)
auto = [
{
region_: "Івано-Франківська",
diffc_: 2.0,
diffv_: 51.0,
diff_c_: 0.42105263157894735,
diff_v_: 150.0
},
{
region_: "Волинська",
diffc_: -40.0,
diffv_: 1.0,
diff_c_: -12.779552715654951,
diff_v_: 2.3255813953488373
},
{
region_: "Вінницька",
diffc_: -62.0,
diffv_: 42.0,
diff_c_: -6.927374301675977,
diff_v_: 62.68656716417911
},
{
region_: "Дніпропетровська",
diffc_: -1177.0,
diffv_: 26.0,
diff_c_: -36.40581503247758,
diff_v_: 6.341463414634147
},
{
region_: "Донецька",
diffc_: null,
diffv_: null,
diff_c_: null,
diff_v_: null
},
{
region_: "Житомирська",
diffc_: -109.0,
diffv_: 13.0,
diff_c_: -18.196994991652755,
diff_v_: 48.148148148148145
},
{
region_: "Закарпатська",
diffc_: -57.0,
diffv_: 52.0,
diff_c_: -11.089494163424124,
diff_v_: 104.0
},
{
region_: "Запорізька",
diffc_: -830.0,
diffv_: -39.0,
diff_c_: -65.5608214849921,
diff_v_: -41.48936170212766
},
{
region_: "Київська",
diffc_: -4559.0,
diffv_: 182.0,
diff_c_: -25.576437587657786,
diff_v_: 7.824591573516767
},
{
region_: "Кіровоградська",
diffc_: -163.0,
diffv_: -2.0,
diff_c_: -23.865300146412885,
diff_v_: -8.695652173913043
},
{
region_: "Львівська",
diffc_: -42.0,
diffv_: 142.0,
diff_c_: -2.543912780133253,
diff_v_: 63.39285714285714
},
{
region_: "Миколаївська",
diffc_: -336.0,
diffv_: -19.0,
diff_c_: -41.126070991432066,
diff_v_: -46.34146341463415
},
{
region_: "Одеська",
diffc_: -502.0,
diffv_: 60.0,
diff_c_: -26.173096976016687,
diff_v_: 15.463917525773196
},
{
region_: "Полтавська",
diffc_: -489.0,
diffv_: 1.0,
diff_c_: -35.28138528138528,
diff_v_: 1.2345679012345678
},
{
region_: "Рівненська",
diffc_: -46.0,
diffv_: 20.0,
diff_c_: -11.358024691358025,
diff_v_: 86.95652173913044
},
{
region_: "Сумська",
diffc_: -266.0,
diffv_: -2.0,
diff_c_: -41.368584758942454,
diff_v_: -8.695652173913043
},
{
region_: "Тернопільська",
diffc_: -88.0,
diffv_: -9.0,
diff_c_: -20.18348623853211,
diff_v_: -17.647058823529413
},
{
region_: "Харківська",
diffc_: -2084.0,
diffv_: -290.0,
diff_c_: -65.34963938538726,
diff_v_: -61.965811965811966
},
{
region_: "Херсонська",
diffc_: -502.0,
diffv_: -28.0,
diff_c_: -93.65671641791045,
diff_v_: -96.55172413793103
},
{
region_: "Хмельницька",
diffc_: -157.0,
diffv_: 7.0,
diff_c_: -18.73508353221957,
diff_v_: 10.606060606060606
},
{
region_: "Черкаська",
diffc_: -103.0,
diffv_: 45.0,
diff_c_: -12.73176761433869,
diff_v_: 112.5
},
{
region_: "Чернівецька",
diffc_: -14.0,
diffv_: 17.0,
diff_c_: -4.98220640569395,
diff_v_: 80.95238095238095
},
{
region_: "Чернігівська",
diffc_: -104.0,
diffv_: -14.0,
diff_c_: -20.92555331991952,
diff_v_: -58.333333333333336
}
]
// counties = {
// var auto_c = new Map(auto.map((d) => [d.region_, d.diff_c_]));
// var auto_v = new Map(auto.map((d) => [d.region_, d.diff_v_]));
// for (const d of regions.features) {
// d.properties.c = auto_c.get(
// d.properties.localized_name.ua.replace(/\s.+/, "")
// );
// d.properties.v = auto_v.get(
// d.properties.localized_name.ua.replace(/\s.+/, "")
// );
// }
// return regions;
// }
auto_c = new Map(auto.map((d) => [d.region_, d.diff_c_]))
auto_v = new Map(auto.map((d) => [d.region_, d.diff_v_]))
vis1 = Plot.plot({
width: 450,
height: 300,
projection: d3.geoMercator().scale(1300).center([42.5, 45.5]),
x: { axis: null },
y: { axis: null },
color: {
type: "diverging",
scheme: "RdBu",
label: "Зміна у % реєстрації авто мас-сегменту, порівняно з 2021 роком",
legend: true
},
marks: [
// Plot.frame({
// fill: "steelblue",
// fillOpacity: 0.04
// }),
// малюємо просто контури областей, використавши властивість stroke
Plot.geo(regions, {
// strokeWidth: 0.5,
stroke: "#333"
}),
// можна в попередньому блоці або окремо нижче зафарбувати області, використавши властивість fill
Plot.geo(
regions,
// Plot.centroid(
{
fill: (d) =>
auto_c.get(d.properties.localized_name.ua.replace(/\s.+/, ""))
// fill: (d) => d.properties.c
// title: (d) => d.properties.c
// tip: true
// channels: {
// область: (d) => d.properties.localized_name.ua.replace(/\s.+/, "")
// // врожай: (d) => d.properties.corn + " тис тон"
// }
}
// )
),
// Plot.text(
// [`В мас-маркеті падіння в усіх областях.`],
// {
// frameAnchor: "left",
// // textAnchor: "left",
// dx: 5,
// dy: 70,
// fontSize: 14,
// fontWeight: 300,
// lineWidth: 11
// }
// ),
Plot.text(
regions.features,
Plot.centroid({
stroke: "white",
text: (d) => d.properties.localized_name.ua.replace(/\s.+/, ""),
dy: -10,
pointerEvents: "none"
})
),
Plot.text(
regions.features,
Plot.centroid({
// x: (d) => d.properties.label_point[0],
// y: (d) => d.properties.label_point[1],
text: (d) => d.properties.localized_name.ua.replace(/\s.+/, ""),
dy: -10,
pointerEvents: "none"
})
),
() =>
svg`<g transform="translate(0,3)"><rect width=16 height=15 fill="#ddd"></rect><text x=21 dy=1.1em fill=currentColor text-anchor=start>Дані відсутні.</text></g>`
]
})
vis2 = Plot.plot({
width: 450,
height: 300,
projection: d3.geoMercator().scale(1300).center([42.5, 45.5]),
// x: { axis: null },
// y: { axis: null },
x: { domain: [0, 100] },
y: { domain: [0, 100] },
color: {
type: "diverging",
scheme: "RdBu",
label: "Зміна у % реєстрації елітних авто, порівняно з 2021 роком",
legend: true
},
marks: [
// Plot.frame({
// fill: "steelblue",
// fillOpacity: 0.04
// }),
// малюємо просто контури областей, використавши властивість stroke
Plot.geo(regions, {
// strokeWidth: 0.5,
stroke: "#333"
}),
Plot.geo(
regions,
// Plot.centroid(
{
fill: (d) =>
auto_v.get(d.properties.localized_name.ua.replace(/\s.+/, ""))
// fill: (d) => d.properties.c
// title: (d) => d.properties.c
// tip: true
// channels: {
// область: (d) => d.properties.localized_name.ua.replace(/\s.+/, "")
// // врожай: (d) => d.properties.corn + " тис тон"
// }
}
// )
),
Plot.text(
regions.features,
Plot.centroid({
stroke: "white",
text: (d) => d.properties.localized_name.ua.replace(/\s.+/, ""),
dy: -10,
pointerEvents: "none"
})
),
Plot.text(
regions.features,
Plot.centroid({
// x: (d) => d.properties.label_point[0],
// y: (d) => d.properties.label_point[1],
text: (d) => d.properties.localized_name.ua.replace(/\s.+/, ""),
dy: -10,
pointerEvents: "none"
})
),
Plot.text(
[`На Заході України реєстрації елітних авто зросли подекуди в два рази.`],
{
frameAnchor: "left",
// textAnchor: "left",
dx: 5,
dy: 80,
fontSize: 14,
fontWeight: 300,
lineWidth: 11
}
),
Plot.arrow([0], {
x1: 26.1,
y1: 47.365355,
x2: 26.6089531,
y2: 48.365355,
dy: 10,
// stroke: "black",
// opacity: width > 650 ? 1 : 0.1,
bend: -30,
inset: 1,
strokeWidth: 1,
strokeOpacity: 0.7
})
]
})
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.
