alphabet = FileAttachment("alphabet.csv").csv({typed: true})
Plot.barY(alphabet.filter(d => /[aeiou]/i.test(d.letter)), {x: "letter", y: "frequency"}).plot()
metros = FileAttachment("metros.csv").csv({typed: true})
Plot.plot({
grid: true,
inset: 10,
x: {
type: "log",
label: "Population →",
tickFormat: "~s"
},
y: {
label: "↑ Inequality"
},
marks: [
Plot.dot(metros, {
x: "POP_2015",
y: "R90_10_2015",
r: 2.5}),
Plot.text(metros, {
x: "POP_2015",
y: "R90_10_2015",
filter: dofilter ? "highlight" : null,
text: "nyt_display",
dy: -6
})
]
})
bls = FileAttachment("bls-metro-unemployment.csv").csv({typed: true})
Plot.plot({
y: {
grid: true,
label: "↑ Unemployment (%)"
},
color: {
domain: [false, true],
range: ["#ccc", "red"]
},
marks: [
Plot.ruleY([0]),
Plot.line(bls, {
x: "date",
y: "unemployment",
z: "division",
sort: dosort && (d => /, MI /.test(d.division)),
stroke: d => /, MI /.test(d.division)
})
]
})
Plot.plot({
y: {
grid: true,
label: "↑ Unemployment (%)"
},
color: {
domain: [false, true],
range: ["#ccc", "red"]
},
marks: [
Plot.ruleY([0]),
Plot.line(bls, {
x: "date",
y: "unemployment",
z: "division",
transform: customTransform
})
]
})
function customTransform(data, facets) {
return {
data,
facets: facets.map(facet => {
return facet.filter(i => {
return /, MI /.test(data[i].division);
});
})
};
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
