Public
Edited
Jul 10, 2024
Insert cell
Insert cell
ua = FileAttachment("ukraine2.json").json()
Insert cell
regions = topojson.feature(ua, ua.objects.regions)
Insert cell
rivers = topojson.feature(ua, ua.objects.rivers)
Insert cell
lakes = topojson.feature(ua, ua.objects.lakes)
Insert cell
vis1 = Plot.plot({
// style: { fontSize: width > 650 ? 10 : 12 },
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: 2,
stroke: "#333"
}),

// можна в попередньому блоці або окремо нижче зафарбувати області, використавши властивість fill
Plot.geo(regions, {
fill: (d) => d.properties.c
}),

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>`
]
})
Insert cell
// vis2 = 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: 2,
// stroke: "#333"
// }),

// // можна в попередньому блоці або окремо нижче зафарбувати області, використавши властивість fill
// Plot.geo(regions, {
// fill: (d) => d.properties.v
// }),

// 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
// })
// // () =>
// // 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>`
// ]
// })
Insert cell
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
}
]
Insert cell
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