Image Sharpeningd3.blurd3.rankd3.flatGroup, d3.flatRollupd3.moded3.groupSortSet Operationsd3.groups as a hierarchyd3.fsum, d3.AdderTime thresholds for d3.bind3.cumsumTidy Stacked Area ChartMerging Duplicate Valuesd3.bind3.ticksd3.mean, d3.median, and friendsd3.quickselectd3.bisectd3.sumd3.group, d3.rollup, d3.indexd3.countd3.min, d3.max, d3.extentd3.least, d3.greatestd3.pairsd3.crossd3.ascending, d3.descendingd3.merged3.ranged3.permuted3.shuffled3-array 2.0
d3.zip, d3.transpose
names = ["joe", "sally", "norbert", "ann", "rafael"]
ages = [32, 13, 14, 22, 76]
d3.zip(names, ages)
preferences = ["ice cream", "juice", "cake"]
d3.zip(names, preferences, ages) // 🌶 we've just lost Ann and Rafael!
d3.transpose([names, ages])
url = "https://api.census.gov/data/2015/acs/acs5?get=B01001_003E,B01001_004E,B01001_005E,B01001_006E,B01001_007E,B01001_008E,B01001_009E,B01001_010E,B01001_011E,B01001_012E,B01001_013E,B01001_014E,B01001_015E,B01001_016E,B01001_017E,B01001_018E,B01001_019E,B01001_020E,B01001_021E,B01001_022E,B01001_023E,B01001_024E,B01001_025E,B01001_027E,B01001_028E,B01001_029E,B01001_030E,B01001_031E,B01001_032E,B01001_033E,B01001_034E,B01001_035E,B01001_036E,B01001_037E,B01001_038E,B01001_039E,B01001_040E,B01001_041E,B01001_042E,B01001_043E,B01001_044E,B01001_045E,B01001_046E,B01001_047E,B01001_048E,B01001_049E&for=us:*"
data = load_data(url) // see the Annex
d3.transpose(data)
map = new Map(d3.transpose(data))
map.get("B01001_022E")
map_numeric = {
const [keys, values] = await load_data(url); // await d3.json(url);
return new Map(d3.zip(keys, Float64Array.from(values)));
}
map_numeric.get("B01001_022E")
d3.transpose(d3.zip(names, ages))
d3.transpose(Array.from(map))
w = width
h = 100
r = (_, i) => 100 + 130 * ((Math.random() * (i % w)) / w)
g = (_, i) => 255 * (1 - (Math.random() * (i % w)) / w)
b = (_, i) => 255 - (Math.random() * 255 * i) / w / h
a = (_, i) => (Math.random() > 0.1 ? 255 : 128)
R = Uint8Array.from({length: w * h}, r)
G = Uint8Array.from({length: w * h}, g)
B = Uint8Array.from({length: w * h}, b)
A = Uint8Array.from({length: w * h}, a)
d3.zip(R, G, B, A) // zip creates an array of arrays…
newData = d3.zip(R, G, B, A).flat() // … that can be flattened to match the canvas ImageData structure
d3 = require("d3-array@3", "d3-fetch@3")
function visual_zip(lists) {
const transposed = d3.transpose(lists); // or d3.zip(...lists)
return svg`<svg width=100% height=${(1.5 + lists.length) *
30} style="text-anchor:middle;dominant-baseline: middle; font: 14px sans-serif">
<defs>
<marker id="arrow"
refX="7" refY="5"
markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10"
orient="auto">
<path d="M0,1L8,5L0,9Z" fill=red />
</marker>
</defs>
<path d="M70,${7 + lists.length * 15} C2,30 2,80 60,${35 +
lists.length * 30}" marker-end="url(#arrow)" stroke=red fill=none />
${lists
.map((things, j) =>
things.map(
(name, i) =>
svg`<g transform="translate(${(i + 1) * 120},${20 +
30 * j})"><text>${name}</text></g>`
)
)
.flat()}
${d3.range(d3.max(lists, d => d.length)).map(
(pair, i) =>
svg`<ellipse transform="translate(${(i + 1) * 120},${7 +
lists.length * 15})" rx=50 ry=${6 + lists.length * 15} stroke='${
i < transposed.length ? "red" : "#aaa"
}' fill=none stroke-dasharray="${i < transposed.length ? "" : "2 5"}" />
`
)}
${transposed.map(
(pair, i) =>
svg`<g transform="translate(${(i + 1) * 120},${35 +
lists.length * 30})"><text>${JSON.stringify(pair).replace(
/"/g,
""
)}</text></g>`
)}
`;
}
// Replaces d3.json(url): the API we call is fragile — for the sake of this tutorial we copied the data inline
function load_data(url) {
return [["B01001_003E","B01001_004E","B01001_005E","B01001_006E","B01001_007E","B01001_008E","B01001_009E","B01001_010E","B01001_011E","B01001_012E","B01001_013E","B01001_014E","B01001_015E","B01001_016E","B01001_017E","B01001_018E","B01001_019E","B01001_020E","B01001_021E","B01001_022E","B01001_023E","B01001_024E","B01001_025E","B01001_027E","B01001_028E","B01001_029E","B01001_030E","B01001_031E","B01001_032E","B01001_033E","B01001_034E","B01001_035E","B01001_036E","B01001_037E","B01001_038E","B01001_039E","B01001_040E","B01001_041E","B01001_042E","B01001_043E","B01001_044E","B01001_045E","B01001_046E","B01001_047E","B01001_048E","B01001_049E","us"],["10175713","10470147","10561873","6447043","4495581","2453321","2400843","6722248","10989596","10625791","9899569","10330986","10571984","11051409","10173646","3730038","5094814","3060112","3816159","4867513","3416432","2378691","2000771","9736305","10031835","10117913","6142996","4268861","2322446","2283357","6422017","10708414","10557848","9956213","10465142","10798384","11474081","10828301","4018137","5572692","3385427","4285748","5720208","4313697","3432738","3937981","1"]];
}
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.
