vis1 = Plot.plot({
title: "Послуги на первинці і вторинці за формою вланості",
style: { fontSize: 14, background: "#f5f5f5" },
width: width > 650 ? 650 : 350,
marginTop: 50,
x: { type: "linear", tickFormat: (d) => d + "", label: "", labelArrow: null },
y: {
type: "linear",
tickFormat: (d) => d + "",
label: "Кількість\nзакладів",
nice: true,
labelArrow: null,
grid: true
},
fx: { padding: 0.25 },
marks: [
Plot.ruleY([0]),
Plot.axisFx({ label: "", fontWeight: 300, fontSize: 18 }),
Plot.lineY(
data,
Plot.groupX(
{ y: "count" },
{
x: "year",
marker: true,
strokeWidth: 2,
fx: "care_type",
z: "property_type",
stroke: (d) =>
d.property_type == "Комунальна" ? "#d8b365" : "#5ab4ac"
}
)
),
Plot.text([`Комунальні`], {
fx: ["Первинна"],
x: (d) => 2022,
y: (d) => 1400,
fill: "#d8b365"
}),
Plot.text([`ФОП`], {
fx: ["Первинна"],
x: (d) => 2022,
y: (d) => 750,
fill: "#5ab4ac"
}),
Plot.text([`Приватні`], {
fx: ["Первинна"],
x: (d) => 2022,
y: (d) => 400,
fill: "#5ab4ac"
})
],
caption: html`<small style="color:grey; text-align: left;line-height: 1;">На графіках не представлена екстренна медична допомога.<br>Дані: Інформація про суб'єктів господарювання, які уклали договір із НСЗУ за програмою медичних гарантій, доступ на порталі data.gov.ua за <a target="_blank" href='https://data.gov.ua/dataset/a1d554df-be4b-4d3f-8063-dd0db4d83ff5'>посиланням</a></small>. `
})
ua = FileAttachment("ukraine.json").json()
nation = topojson.feature(ua, ua.objects.regions)
data = (await FileAttachment("med@3.csv").csv())
.filter((d) => d.property_type != "Державна")
.filter((d) => d.lng != 2.171485)
.filter((d) => d.lng != "")
one_data = data.filter((d) => d.lng == 39.570178)
vis2 = width > 650
? Plot.plot({
subtitle:
"Частина закладів переїхала на нові місяця, частина - втратила контракти з НСЗУ",
width: width > 650 ? 950 : 350,
height: 400,
projection: d3.geoMercator().scale(1300).center([43, 47.5]),
marks: [
Plot.geo(nation, { strokeWidth: 2, stroke: "#333" }),
Plot.geo(nation, {
fill: "#f5f5f5"
}),
Plot.axisFx({
label: "",
fontWeight: 700,
fontSize: 18,
frameAnchor: "bottom"
}),
Plot.dot(
data
.filter((d) => d.property_type == "Комунальна")
.filter((d) => ["2021", "2024"].includes(d.year)),
{
x: "lng",
y: "lat",
r: 2,
fill: "#d8b365",
fillOpacity: 0.7,
fx: "year"
}
),
Plot.dot(one_data, {
x: "lng",
y: "lat",
r: 5,
strokeWidth: 0.5,
// fill: "#d8b365",
fillOpacity: 0.7,
fx: "year"
}),
Plot.text(
[
`Центр ПМСД Біловодської селищної Ради з Луганської області, хоч і залишає юридичну адресу на тимчасово окупованій частині Луганської області, ще з 2022 року переїхав в Рівне, де продовжує надавати допомогу населенню`
],
{
fx: ["2024"],
frameAnchor: "right",
// textAnchor: "left",
x: 38.470178,
y: 53.503544,
fontSize: 14,
fontWeight: 300,
lineWidth: 32
}
),
Plot.arrow([0], {
fx: ["2024"],
x1: 38.570178,
y1: 53.203544,
x2: 39.570178,
y2: 49.203544,
bend: 30,
inset: 7,
strokeWidth: 1,
strokeOpacity: 0.7
})
]
})
: Plot.plot({
title:
"Частина закладів переїхала на нові місяця, частина - втратила контракти з НСЗУ",
width: width > 650 ? 950 : 350,
height: 600,
projection: d3.geoMercator().scale(1000).center([49, 44]),
marks: [
Plot.geo(nation, { strokeWidth: 2, stroke: "#333" }),
Plot.geo(nation, {
fill: "#f5f5f5"
}),
Plot.axisFy({
label: "",
fontWeight: 700,
fontSize: 18,
frameAnchor: "left",
dy: 30
}),
Plot.dot(
data
.filter((d) => d.property_type == "Комунальна")
.filter((d) => ["2021", "2024"].includes(d.year)),
{
x: "lng",
y: "lat",
r: 2,
fill: "#d8b365",
fillOpacity: 0.7,
fy: "year"
}
),
Plot.text(
[
`Центр ПМСД Біловодської селищної Ради з Луганської області, хоч і залишає юридичну адресу на тимчасово окупованій частині Луганської області, ще з 2022 року переїхав в Рівне, де продовжує надавати допомогу населенню`
],
{
fy: ["2024"],
frameAnchor: "right",
// textAnchor: "left",
x: 41.470178,
y: 53.503544,
fontSize: 14,
fontWeight: 300,
lineWidth: 30
}
),
Plot.arrow([0], {
fy: ["2024"],
x1: 38.570178,
y1: 52.503544,
x2: 39.570178,
y2: 49.203544,
bend: 30,
inset: 4,
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.
