md`# Assignment 2 Actual`
topojson = require("topojson-client@3")
states = FileAttachment("US_state_1850@1.json").json()
states_features = topojson.feature(states, states.objects.US_state_1850)
csv_data = d3.csvParse(
await FileAttachment("nhgis0003_ds9_1850_state(in)@1.csv").text(),
({ STATENAM, ADK001, ADK006 }) => [STATENAM, [+ADK001, +ADK006 / +ADK001]]
)
data = Object.assign(new Map(csv_data), {
title: ["Horses", "Sheep per Horse"]
})
sheepPerHorse = Array.from(data.values(), d => d[1])
linear = d3.scaleLinear()
.domain([0, d3.max(data)])
.range(["white", "red"])
d3 = require("d3-array@2", "d3-format@1", "d3-scale@3", "d3-selection@1")
numericSort = ƒ(x)
function numericSort(x) {
return (
x
// ensure the array is not changed in-place
.slice()
// comparator function that treats input as numeric
.sort((a, b) => a - b)
);
}
chart = ƒ(data, scale)
function chart(data, scale) {
const w = 30,
cols = Math.floor(Math.min(600, width) / w),
lines = Math.ceil(100 / cols);
const chart = d3
.create("svg")
.attr("width", cols * w)
.attr("height", lines * w);
chart
.append("g")
.attr("transform", "translate(2,2)")
.attr("style", "stroke:black; fill:white;")
.selectAll("rect")
.data(data)
.join("rect")
.attr("width", w - 3)
.attr("height", w - 3)
.attr("x", (_, i) => w * (i % cols))
.attr("y", (_, i) => w * ((i / cols) | 0))
.style("fill", d => (scale ? scale(d) : "#ddd"));
return chart.node();
}
showScaleGrouping = ƒ(data, scales)
function showScaleGrouping(data, scales) {
const margins = { left: 130 };
const x = d3
.scaleLinear()
.domain(d3.extent(data))
.range([margins.left, width - 5]);
const r = 3;
const rectHeight = 10;
const chart = svg`
<svg width=${width} height="${20 * (1.5 + Object.entries(scales).length)}"
style="font-family: sans-serif; alignment-baseline: middle; font-size:12px">
<g transform="translate(2,2)">
<text x="5" y=${5 + r}>Data</text>
${data.map(
d => `<circle r=${r} cx=${x(d)} cy=5 fill=black opacity="0.3" />`
)}
</g>
<g transform="translate(2,30)">
${Object.entries(scales).map(([name, s], i) => {
const scaleCuts = s.thresholds
? s.thresholds()
: s.quantiles
? s.quantiles()
: s.domain();
const limits = [0, ...scaleCuts, d3.max(data)];
const boxLimits = limits
.slice(0, limits.length - 1)
.map((d, j) => [limits[j], limits[j + 1]]);
return (
`<text x="5" y=${(2 * i + 1) * rectHeight}>${name}</text>` +
boxLimits.map(
(l, k) => `
<rect x=${x(l[0])} y=${i * 2 * rectHeight} height=10
width=${x(l[1]) - x(l[0])}
style="stroke:black;fill:${s.range()[k]};"
/>`
)
);
})}
</g>
</svg>`;
return chart;
}
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.
