Historian of early America, Indigenous history, and material culture
Public
Edited
Feb 26, 2023
Importers
scatterxAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(scatterx))
scattery = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d["av_nodes"]))
.nice()
.range([height - margin.bottom, margin.top])
scatteryAxis = (g) =>
g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(scattery))
scatteryTitle = (g) =>
g
.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("y", 10)
.text("↑ Nodes")
scatterxTitle = (g) =>
g
.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("y", height)
.attr("x", width - margin.right - 20)
.text("→ Edges")
// getScatterTooltipContent = function (d) {
// return `<b>${(d) => d.congregation}</b>
// <br/>
// <b style="fill:${denomcolor}">${(d) => d.denomination}</b>
// <br/>
// ${formatDate(d.start)} - ${formatDate(d.end)}
// `;
// }
// createScatterTooltip = function (el) {
// el.style("position", "absolute")
// .style("pointer-events", "none")
// .style("top", 0)
// .style("opacity", 0)
// .style("background", "white")
// .style("border-radius", "5px")
// .style("box-shadow", "0 0 10px rgba(0,0,0,.25)")
// .style("padding", "10px")
// .style("line-height", "1.3")
// .style("font", "11px sans-serif");
// }
denomcolor = {
const scale = d3.scaleOrdinal(
d3.quantize(d3.interpolateRainbow, alldenom.length + 1)
);
return (d) => scale(d.denomination + 1);
}
alldenom = {
return [...new Set(data.map((d) => titleCase(d.denomination)))];
}
data = json.sort((a, b) => d3.ascending(a.denomination, b.denomination))
json = d3.json(
"https://raw.githubusercontent.com/mkane2/baptisms/main/remote_files.json"
)
formatDate = (d) => (d < 0 ? `${-d}BC` : `${d}`)
function titleCase(s) {
return s.replace(/\w\S*/g, function (t) {
return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase();
});
}
height = 330
margin = ({ top: 20, right: 30, bottom: 60, left: 40 })
tooltip = d3
.select("body")
.append("div")
.style("position", "absolute")
.style("visibility", "hidden")
.style("background-color", "white")
.style("border-radius", "5px")
.style("box-shadow", "0 0 10px rgba(0,0,0,.25)")
.style("padding", "10px")
.style("line-height", "1.3")
.style("font", "0.75rem sans-serif")
.attr("class", "tooltip")
tooltip_in = function (event, d) {
return tooltip
.html(
"<h4>" +
d.name +
"</h4><h5>" +
d.start +
"-" +
d.end +
"</h5><h5>" +
d.duration +
" years</h5><h5>" +
d.nodes +
" nodes, " +
d.av_nodes +
" per year</h5>"
)
.style("visibility", "visible")
.style("top", event.pageY + "px")
.style("left", event.pageX + "px");
}
tooltip_out = function () {
return tooltip.transition().duration(50).style("visibility", "hidden");
}
html`
<style type="text/css">
.tooltip {
fill: white;
font-family: sans-serif;
padding: .25rem;
border-radius: 8px;
border: 1px solid grey;
}
</style>
`
import { Legend, Swatches } from "@d3/color-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.
