Digital historian at the Roy Rosenzweig Center for History and New Media, George Mason University
import { Table } from "@observablehq/table"
d3 = require("d3@6")
url = "https://data.chnm.org/relcensus/city-membership?year=1926&denominationFamily=Lutheran"
data = d3.json(url)
Table(data)
Table(data, {
sort: "year", // try changing this to `state` or `city` or `denominations`
// reverse: true,
format: {
// https://github.com/d3/d3-format
year: d3.format("d") // format as "1960" rather than "1,960"
}
})
Inputs.table(search, {
sort: "year",
// reverse: true,
format: {
year: d3.format("d") // format as "1960" rather than "1,960"
}
})
Plot.plot({
marks: [
Plot.barY(data, {x: "state", y: "denominations"})
]
})
Plot.plot({
marks: [
// Try changing `denominations` to other values, like `members` or `churches`
Plot.barX(data, {x: "denominations", y: "state"})
]
})
data_lutheran = d3.json("https://data.chnm.org/relcensus/city-membership?year=1926&denominationFamily=Lutheran")
data_pentecostal = d3.json("https://data.chnm.org/relcensus/city-membership?year=1926&denominationFamily=Pentecostal")
combined = data_lutheran.concat(data_pentecostal)
Table(combined)
Plot.plot({
grid: true,
facet: {
data: combined,
y: "group"
},
marks: [
Plot.barY(combined, {x: "state", y: "churches", fill: "group"}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.dot(combined, {x: "members",
y: "population_1926",
fill: "group"})
]
})
Plot.plot({
marks: [
Plot.dot(combined, {x: denominationData => (denominationData.members / denominationData.population_1926),
y: "population_1926",
fill: "group"})
]
})
Plot.plot({
grid: true,
marks: [
Plot.ruleX([0]), // draw a solid line along the y axis
Plot.dot(combined, {x: d => (d.members / d.population_1926),
y: "population_1926",
r: "churches", // radius = the number of churches
stroke: "group"}) // stroke colors the border of a shape
]
})
Plot.plot({
grid: true,
// https://observablehq.com/@observablehq/plot-cheatsheets-layouts?collection=@observablehq/plot-cheatsheets
// marginLeft: 165,
x: {
label: "Percentage of total population →",
tickFormat: ".0%",
// transform: d => d * 100
},
y: {
label: "↑ City population in 1926",
type: "log",
},
marks: [
Plot.ruleX([0]),
Plot.dot(combined, {x: d => (d.members / d.population_1926),
y: "population_1926",
r: "churches",
stroke: "group"})
]
})
Plot.plot({
grid: true,
x: {
label: "Percentage of a denomination in an urban population →",
// tickFormat: ".0%",
// transform: d => d * 100
},
y: {
label: "↑ City population in 1926",
// type: "log",
},
marks: [
Plot.ruleX([0]),
Plot.dot(combined, {x: d => (d.members / d.population_1926),
y: "population_1926",
r: "churches",
stroke: "group"})
],
color: {
legend: true // add a legend
}
})
import {addTooltips} from "@mkfreeman/plot-tooltip"
addTooltips(
Plot.plot({
grid: true,
x: {
label: "Percentage of a denomination in an urban population →",
tickFormat: ".0%",
// transform: d => d * 100
},
y: {
label: "↑ City population in 1926",
type: "log",
},
marks: [
Plot.ruleX([0]),
Plot.dot(combined, {x: d => (d.members / d.population_1926),
y: "population_1926",
r: "churches",
stroke: "group",
// For our tooltip to work, we have to add a title attribute to our
// Plot.dot mark. Note: \n makes a new line
title: (d) => `${d.group} denominations in ${d.city}, ${d.state} in 1926 \n members: ${d.members} \n churches: ${d.churches} \n denominations: ${d.denominations}`
})
],
color: {
legend: true, // add a legend
}
})
)
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.
