Plot.plot({
marks: [
Plot.barY(api.filter(d => d.count_type == "Total"), {x: "year", y: "count"})
],
x: {
tickRotate: -90,
label: "Year",
line: true,
tickPadding: 5,
labelAnchor: "left",
labelOffset: 0,
nice: true,
tickFormat: d3.format("d"),
},
marginBottom: 50,
marginLeft: 50,
width: 1000,
height: 500
})
barchart = Plot.plot({
marks: [
Plot.barY(api, {x: "year", y: "count", fill: "count_type"})
],
x: {
tickRotate: -90,
label: "Year",
line: true,
tickPadding: 5,
labelAnchor: "left",
labelOffset: 0,
nice: true,
tickFormat: d3.format("d"),
},
marginBottom: 50,
marginLeft: 50,
width: 1000,
height: 500
})
d3.least(d3.rollup(api.filter(d => d.year == 1669), v => d3.sum(v, d => d.count), d => d.count_type), ([, sum]) => -sum)
d3.rollup(api.filter(d => d.count).filter(d => d.year == 1669), v => d3.sum(v, d => d.count))
d3.rollup(api, v => d3.sum(v, d => d.count), d => d.count_type)
Plot.plot({
grid: true,
marks: [
Plot.barY(causes, {x: "death", y: "count"})
],
x: {
tickRotate: -90,
label: "Cause of death"
},
height: 500,
width: 1000,
marginBottom: 150
})
Plot.plot({
grid: true,
facet: {
data: causes,
y: "year"
},
marks: [
Plot.frame(),
Plot.barY(causes, {x: "death", y: "count", fill: "year"})
],
x: {
tickRotate: -90,
label: "Cause of death"
},
y: {
label: "Year"
},
fy: {
tickFormat: d3.format("d"),
},
height: 500,
width: 1000,
marginBottom: 150
})
Plot.plot({
marks: [Plot.cell(causes, { x: "year", y: "death", fill: "count" })],
color: { scheme: "reds", legend: true, reverse: false },
marginLeft: 150,
x: {
tickFormat: d3.format("d")
},
width: 626,
marginBottom: 50
})
Plot.plot({
grid: true,
marks: [
Plot.barY(causes.filter(d => d.death === codselect), {x: "year", y: "count", fill: "goldenrod"})
],
x: {
tickRotate: -90,
label: "Cause of death",
tickFormat: d3.format("d")
},
height: 500,
width: 1000,
marginBottom: 150
})
parishes = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container);
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let getColor = (d) => {
return d == 1 ? "#fff5f0"
: d == 2 ? "#fee0d2"
: d == 3 ? "#fcbba1"
: d == 4 ? "#fc9272"
: d == 5 ? "fb6a4a"
: d == 6 ? "#ef3b2c"
: d == 7 ? "#cb181d"
: d == 16 ? "#99000d"
: "#fff";
}
let districts = L.geoJson(parishes1669, {
onEachFeature: onEachFeature,
style: d => {
return {
weight: 1,
color: "#ffffff",
fillOpacity: 0.1,
fillColor: getColor(d.properties.parishPlague),
}
}
}).addTo(map);
map.fitBounds(districts.getBounds());
// control that shows state info on hover
const info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create("div", "info");
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML =
"<h4>Parish Information</h4>" +
(props
?
"Parish: " +
props.PAR +
"<br/>Printed year: " +
props.printedYear +
"<br/>Plague count: " +
props.parishPlague
: "Hover over a parish");
};
info.addTo(map);
function highlightFeature(e) {
let layer = e.target;
layer.setStyle({
stroke: true,
weight: 2,
color: "#666",
dashArray: "",
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
function resetHighlight(e) {
districts.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
}
parishes1669 = FileAttachment("parishes-1669.geojson").json()
api = d3.json("https://data.chnm.org/bom/bills?start-year=" + `${start_year}` + "&end-year=" + `${end_year}`)
causes = d3.json("https://data.chnm.org/bom/causes?start-year=1635&end-year=1754&limit=9000")
christenings = d3.json("https://data.chnm.org/bom/christenings?start-year=1635&end-year=1754&limit=200")
cod = d3.json("https://data.chnm.org/bom/list-deaths")
codobj = cod.map(cause => cause.name)
causewords = causes.map(words => words.death)
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.
