Public
Edited
Feb 8, 2023
Plot.plot({
x: {
label: "Percentage of schools (%)",
transform: d => d * 100
},
marks: [
Plot.ruleX([0, 1]),
Plot.barX(data, Plot.stackX({ order:"percentage", x: "percentage", fill: "color", insetLeft: 1})),
Plot.textX(data, Plot.stackX({order:"percentage", x: "percentage", text: "text", insetLeft: 1}))
]
})
data=[
{
"project_status_jan23_simple": "Adequate Sanitation",
"n": 360,
"percentage": 0.1,
"text": "10% (360)",
"color":"green"
},
{
"project_status_jan23_simple": "Planning and Design",
"n": 1458,
"percentage": 0.39,
"text": "39% (1458)",
"color":"red"
},
{
"project_status_jan23_simple": "NA",
"n": 26,
"percentage":0.01,
"text": "1% (26)",
"color":"#ccc"
},
{
"project_status_jan23_simple": "Completed",
"n": 1489,
"percentage": 0.4,
"text": "40% (1489)",
"color":"green"
},
{
"project_status_jan23_simple": "Construction",
"n": 331,
"percentage":0.09,
"text": "9% (331)",
"color":"yellow"
},
{
"project_status_jan23_simple": "Other",
"n": 3,
"percentage": 0,
"text": "0% (3)",
"color":"#ccc"
},
{
"project_status_jan23_simple": "Closed or To Be Closed",
"n": 94,
"percentage": 0.02,
"text": "2% (94)",
"color":"#ccc"
}
]
data2=[
{
"S27grade_1": "Red",
"n": 1536,
"percentage": 41
},
{
"S27grade_1": "Orange",
"n": 1093,
"percentage": 29
},
{
"S27grade_1": "Blue",
"n": 1132,
"percentage": 30
}
]
Plot.plot({
color: {
type: "ordinal",
range: ["rgb(0, 122, 255)","rgb(255, 58, 58)","rgb(250, 101, 26)"],
domain:["Blue","Red","Orange"] },
marks: [Plot.barY(data2, {x: "S27grade_1", y: "percentage",fill:"S27grade_1"}),
Plot.text(data2, {x: "S27grade_1", y: "percentage", text: d=>d.percentage+"%", dy:-10}),
Plot.ruleY([0])
]
})
data_mobile=[
{
"type": "primary",
"state": "received",
"number": 95,
"color":"green"
},
{
"type": "primary",
"state": "not-received",
"number": 181,
"color":"red"
},
{
"type": "high",
"state": "not-received",
"number": 61,
"color":"red"
},
{
"type": "high",
"state": "received",
"color":"green",
"number": 26
},
]
87-26
Plot.plot({
x: {
label: "Number of schools",
// transform: d => d * 100
},
y:{
label:null
},
marks: [
Plot.ruleX([0, 1]),
Plot.barX(data_mobile, Plot.stackX({order:"state", x: "number", fill: "color", insetLeft: 1, y:"type"})),
Plot.textX(data_mobile, Plot.stackX({order:"state", x: "number", text: "number", insetLeft: 1, y:"type"}))
]
})
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.
