Public
Edited
Sep 11, 2024
data = (await FileAttachment("sal@4.csv").csv())
.map((d) => {
return {
name: d.name,
name_: d.name_,
vac: +d.vac,
sal_change: +d.sal_change,
sal_change_per: +d.sal_change_per,
sal_01: +d.sal_01,
sal_07: +d.sal_07
};
})
.filter((d) => d.name != "")
Plot.plot({
// height: 600,
width: 650,
marginLeft: 170,
grid: true,
// y: {
// grid: true,
// label: null,
// domain: d3.sort(income, (d) => d.m).map((d) => d.type)
// },
// color: {
// type: "categorical",
// // domain: [0, 1000000],
// // unknown: "#aaa",
// transform: Math.sign,
// tickFormat: (c) => (c < 0 ? "female" : "male"),
// legend: true
// },
// facet:{
// data:income,
// x:'age'
// },
x: {
// label: "Median annual income (men, thousands) →",
// tickFormat: d => d / 1000,
domain: [0, 100]
},
// y: {
// label: "↑ Median annual income (women, thousands)",
// tickFormat: d => d / 1000,
// domain: incdomain
// },
marks: [
// Plot.ruleX([0]),
Plot.link(
data.filter((d) => d.sal_01 > 0),
{
x1: "sal_01",
x2: "sal_07",
y: "name_",
// sort: { y: "m" },
// stroke: (d) => d.m - d.f,
markerStart: "dot",
markerEnd: "arrow",
strokeWidth: 2,
sort: { y: "-x2" }
// title: (d) => `${d.type}, ${d.age}`
}
)
]
})
vis1 = Plot.plot({
style: { fontSize: 13 },
height: 200,
width: width > 650 ? 650 : 350,
marginLeft: 27,
marginRight: 75,
marginBottom: 60,
y: { axis: null },
x: {
label: null,
tickFormat: (d) => d + " тис грн",
domain: [0, 100],
grid: true,
tickSize: 0
},
marks: [
Plot.ruleX([d3.mean(data, (d) => d.sal_07)], {
strokeDasharray: "2 2",
dy: 10
}),
// Plot.tickX(
// data,
// Plot.binY(
// { x: "mean" },
// {
// x: "sal_07",
// stroke: "#333",
// // strokeWidth: 1.5,
// dy: 10
// }
// )
// ),
Plot.text(["середнє"], {
frameAnchor: "top",
dx: 20,
dy: 0,
fontWeight: 300,
fontSize: 11
}),
Plot.dot(
data,
Plot.dodgeY("middle", {
x: "sal_07",
r: 4,
fill: "pink",
stroke: "#333",
strokeWidth: 0.5,
tip: true,
title: (d) => d.name
// dy: -40
})
),
Plot.text(
data.filter((d) => d.sal_07 > 102 || d.sal_07 < 30),
Plot.dodgeY("middle", {
x: "sal_07",
text: (d) => d.name,
lineWidth: 10,
dy: -25,
// fill: "pink",
// stroke: "#333",
// strokeWidth: 0.5,
tip: true,
title: (d) => d.name,
fontWeight: 300
})
),
Plot.text(["ЗАРПЛАТА, ЛИПЕНЬ 2024 РОКУ"], {
frameAnchor: "bottom-right",
// x: 35,
// y: -30,
dx: 40,
dy: 40,
fontWeight: 700
// fontSize: 11
})
]
})
vis2 = Plot.plot({
style: { fontSize: 13, background: "#e0ecf4" },
width: width > 650 ? 690 : 350,
height: 426,
margin: 50,
marginTop: 50,
marginBottom: 100,
marginRight: 100,
y: { label: null },
x: { label: null },
marks: [
Plot.axisX({
tickFormat: (d) => d + "%"
// label: "Розмір оголошеної знижки",
// fontWeight: 700
// labelOffset: 50
}),
// Plot.axisY({
// tickFormat: (d) => d + "%",
// label: " ← Нижча · Вища за середню →",
// labelAnchor: "center",
// fontWeight: 700,
// ticks: 8
// }),
Plot.ruleY([0], { strokeDasharray: "2 2" }),
Plot.ruleX([0], { strokeDasharray: "2 2" }),
Plot.dot(data, {
x: "vac",
y: "sal_change",
tip: true,
// stroke: (d) => (d.category == category ? "#000" : "#fff"),
title: (d) => `${d.name}`,
// fill: (d) => (d.category == category ? "orange" : "#b58ab1"),
fill: "pink",
stroke: "#333",
strokeWidth: 0.5,
r: 4
}),
Plot.dot(
data.filter(
(d) => d.vac > 7 || d.vac < -18 || d.sal_change > 43 || d.sal_change < 0
),
{
x: "vac",
lineWidth: 12,
y: "sal_change",
strokeWidth: 0.5,
stroke: "#000"
}
),
Plot.text(
data.filter(
(d) => d.vac > 7 || d.vac < -18 || d.sal_change > 43 || d.sal_change < 0
),
{
x: "vac",
lineWidth: 12,
y: "sal_change",
dy: -14,
text: (d) => d.name_,
fontWeight: 300,
fill: "#333",
stroke: "#fff"
}
),
// Plot.arrow([0], {
// x1: 22,
// x2: 20,
// y1: -7,
// y2: -3,
// bend: true,
// strokeWidth: 1
// }),
Plot.text(["ЗМІНА ЗАРПЛАТИ\nВ 2024 РОЦІ,\nТИС ГРН"], {
frameAnchor: "top-left",
// x: 0,
// y: 40,
dx: -40,
dy: -40,
font: 16,
fontWeight: 700
// fontSize: 11
}),
Plot.text(["ЗМІНА ШТАТУ\nЗ ПОЧАТКУ 2024 РОКУ"], {
frameAnchor: "bottom-right",
// x: 35,
// y: -30,
dx: 40,
dy: 50,
font: 16,
fontWeight: 700
// fontSize: 11
})
]
})
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.
