I've been developing with WordPress since 2006, and love to code and write about it. My main development work focuses on custom themes and plugins.
Grouped and Stacked Bar Chart
crimea = FileAttachment("crimea.csv").csv({typed: true})
Plot.plot({
color: {
legend: true
},
x: {
type: "band",
tickFormat: d => d.toLocaleString("en", {month: "narrow"}),
label: null,
},
marks: [
Plot.barY(crimea, {x: "date", y: "deaths", fill: "cause"}),
Plot.ruleY([0])
]
})
Plot.plot({
color: {
legend: true
},
x: {
type: "band",
tickFormat: d => d.toLocaleString("en", {month: "narrow"}),
label: null,
domain: d3.groupSort(crimea, v => d3.sum(v, d => -d.deaths), d => d.date),
},
marks: [
Plot.barY(crimea, {x: "date", y: "deaths", fill: "cause"}),
Plot.ruleY([0])
]
})
Plot.plot({
color: {
legend: true
},
x: {
type: "band",
tickFormat: d => d.toLocaleString("en", {month: "narrow"}),
label: null,
domain: [...new d3.InternSet(crimea.map(d => d.date))],
},
marks: [
Plot.barY(crimea, {x: "date", y: "deaths", fill: "cause"}),
Plot.ruleY([0])
]
})
Plot.plot({
//inset: 0,
//align: 0,
x: {
axis: null,
label: null,
padding: .12,
inset: 15
},
y: {
grid: true,
tickFormat: "s"
},
color: {
legend: true,
domain: crimea.cause,
//scheme: "spectral"
},
fx: {
domain: d3.groupSort(crimea, v => d3.sum(v, d => -d.deaths), d => d.date).slice(0, 16),
label: null,
tickSize: 6,
tickFormat: d => d.toLocaleString("en", {month: "narrow"}),
padding: 0,
//inset: 122,
align: 0,
//paddingInner: .1,
paddingOuter: .4,
tickPadding: 6,
},
facet: {
data: crimea,
x: "date",
label: null,
},
marks: [
Plot.barY(crimea, {x: "cause", y: "deaths", fill: "cause", title: d => d.cause + ": " + d.deaths}),
Plot.ruleY([0])
]
})
Plot.plot({
x: {
axis: null,
label: null,
},
y: {
grid: true,
tickFormat: "s"
},
color: {
legend: true,
domain: crimea.cause,
//scheme: "spectral"
},
fx: {
domain: [...new d3.InternSet(crimea.map(d => d.date))],
label: null,
tickSize: 6,
tickFormat: d => d.toLocaleString("en", {month: "narrow"}),
},
facet: {
data: crimea,
x: "date",
label: null
},
marks: [
Plot.barY(crimea, {x: "cause", y: "deaths", fill: "cause", title: d => d.cause + ": " + d.deaths}),
Plot.ruleY([0])
]
})
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.
