Public
Edited
Jan 7
vis1 = {
let data = [
{ rub: "Безпека і оборона", diff: 19.0 },
{ rub: "Державне будівництво", diff: 38.0 },
{ rub: "Економічні та галузеві", diff: 24.0 },
{ rub: "Міжнародні угоди", diff: 14.0 },
{ rub: "Правова політика", diff: 16.5 },
{ rub: "Соціальні і гуманітарні", diff: 27.0 }
];
return Plot.plot({
style: { fontSize: 14 },
width: width > 650 ? 650 : 350,
height: 250,
marginLeft: width > 650 ? 200 : 160,
marginBottom: 40,
y: { label: width > 650 ? "Тип законопроекту" : null },
x: {
label: "Днів до підпису Президента (медіанне значення)",
labelArrow: null,
ticks: width > 650 ? 8 : 4
},
marks: [
// Plot.dot(data_full, { x: "days", y: "rub" }),
Plot.barX(data, {
x: "diff",
y: "rub",
sort: { y: "x", reverse: true },
fill: "#41b6c4",
// opacity: 0.3,
stroke: "#081d58",
inset: 2
})
// Plot.ruleX([0])
]
});
}
vis11 = {
let data = [
{ rub: "Безпека і оборона", diff: 19.0 },
{ rub: "Державне будівництво", diff: 38.0 },
{ rub: "Економічні та галузеві", diff: 24.0 },
{ rub: "Міжнародні угоди", diff: 14.0 },
{ rub: "Правова політика", diff: 16.5 },
{ rub: "Соціальні і гуманітарні", diff: 27.0 }
];
return Plot.plot({
style: { fontSize: 14 },
width: width > 650 ? 650 : 350,
height: 250,
marginLeft: width > 650 ? 200 : 160,
marginBottom: 40,
y: { label: width > 650 ? "Тип законопроекту" : null },
x: {
label: "Днів до підпису Президента (медіанне значення)",
labelArrow: null,
ticks: width > 650 ? 8 : 4
},
marks: [
Plot.tickX(data, {
x: "diff",
y: "rub",
sort: { y: "x", reverse: true },
fill: "#41b6c4",
// opacity: 0.3,
stroke: "#081d58",
inset: 2
})
// Plot.ruleX([0])
]
});
}
statuses = [
"Повернуто з підписом від Президента України",
"Закон направлено на підпис Президенту України",
"Повернуто з підписом Голови Верховної Ради України",
"Передано на підпис Голові Верховної Ради України",
"Закон прийнято",
"Надано висновок Комітету про розгляд",
"Включено до порядку денного",
"Надано для ознайомлення",
"Направлено на розгляд Комітету",
"Передано на розгляд керівництву",
"Одержано Верховною Радою України"
]
data_full = (await FileAttachment("rada_data_full@6.csv").csv()).map((d) => {
return {
...d,
// date_detale: new Date(d.date_detale),
days: +d.diff
// year: d3.timeFormat("%Y")(new Date(d.start_date))
};
})
// .filter((d) => statuses.includes(d.status))
Plot.plot({
marks: [Plot.dot(data_full, { x: "days", y: "rub" })]
})
data2 = (await FileAttachment("rada_data_median.csv").csv())
.map((d) => {
return {
...d,
// date: new Date(d.date),
days: Math.round(+d.delay),
["Рубрика"]: d.rub
// year: d3.timeFormat("%Y")(new Date(d.date))
};
})
.filter((d) => d.year != "2019")
vis2 = width > 650
? Plot.plot({
style: { fontSize: 14 },
width: 1150,
height: 340,
marginTop: 50,
marginLeft: 200,
marginBottom: 40,
y: {
domain: [
"Повернуто з підписом від Президента України",
"Закон направлено на підпис Президенту України",
"Передано на підпис Голові Верховної Ради України",
"Закон прийнято",
"Надано висновок Комітету про розгляд",
"Надано для ознайомлення",
"Одержано Верховною Радою України"
],
label: ""
},
fy: { grid: true },
fx: {
domain: [
"Економічні та галузеві",
"Міжнародні угоди",
"Правова політика",
"Безпека і оборона",
"Соціальні і гуманітарні",
"Державне будівництво"
]
},
x: { label: "Днів на кожен етап", labelArrow: null, ticks: 4 },
grid: true,
marks: [
Plot.frame({ fill: "#eee", stroke: "none" }),
Plot.axisFx({
lineWidth: 8,
label: null,
fontSize: 14,
fontWeight: 400
}),
Plot.axisY({ lineWidth: 16, fontWeight: 300 }),
// Plot.lineY(data, {
// x: "days",
// y: "status",
// curve: "step",
// z: "bill",
// stroke: "#333",
// opacity: 0.8,
// fx: "rub"
// }),
Plot.lineY(data2, {
x: "days",
y: "status",
curve: "step-before",
// tip: true,
z: "bill",
opacity: 1,
fx: (d) => d["Рубрика"],
stroke: "#225ea8",
strokeWidth: 2
}),
Plot.dot(data2, {
x: "days",
y: "status",
curve: "step-before",
// tip: true,
z: "bill",
r: 2,
fx: "Рубрика",
stroke: "#225ea8",
strokeWidth: 2,
tip: true
})
]
})
: Plot.plot({
style: { fontSize: 14 },
width: 350,
height: 1450,
marginTop: 50,
marginLeft: width > 650 ? 200 : 180,
marginBottom: 40,
y: {
domain: [
"Повернуто з підписом від Президента України",
"Закон направлено на підпис Президенту України",
"Передано на підпис Голові Верховної Ради України",
"Закон прийнято",
"Надано висновок Комітету про розгляд",
"Надано для ознайомлення",
"Одержано Верховною Радою України"
],
label: ""
},
// fy: { grid: true },
fx: {
domain: [
"Економічні та галузеві",
"Міжнародні угоди",
"Правова політика",
"Безпека і оборона",
"Соціальні і гуманітарні",
"Державне будівництво"
]
},
x: {
label: "Днів на кожен етап",
labelArrow: null,
ticks: 4,
axis: "top"
},
grid: true,
marks: [
Plot.frame({ fill: "#eee", stroke: "none" }),
Plot.axisFy({
lineWidth: 8,
label: null,
fontSize: 14,
fontWeight: 400,
rotate: 90,
textAnchor: "middle"
}),
Plot.axisY({ lineWidth: 14, fontSize: 13, fontWeight: 300 }),
Plot.lineY(data2, {
x: "days",
y: "status",
curve: "step-before",
// tip: true,
z: "bill",
opacity: 1,
fy: (d) => d["Рубрика"],
stroke: "#225ea8",
strokeWidth: 2
}),
Plot.dot(data2, {
x: "days",
y: "status",
curve: "step-before",
// tip: true,
z: "bill",
r: 2,
fy: "Рубрика",
stroke: "#225ea8",
strokeWidth: 2,
tip: true
})
]
})
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.
