Digital Humanist. Manhattan-based.
Public
Edited
Apr 5, 2023
3 stars
<div id="plot" style="width:900px;height:600px"><div id="label" style="position:absolute;top:10px;left:10px;background-color:gray;z-index:100;"</div></div>
{
scatterplot.plotAPI({
encoding: {
foreground: {
field: "candidate",
lambda: `d => ${JSON.stringify(showing)}.indexOf(d) > -1`
}
}
});
}
scatterplot = {
const plot = new deepscatter.default("#plot", 900, 600);
await plot.plotAPI({
arrow_table: votes,
point_size: 2.5,
max_points: 5e5,
zoom_balance: 0.35,
alpha: 40,
background_color: "#FFFAF2",
encoding: {
jitter_size: {},
color: {
field: "candidate",
range: "dark2"
},
x: {
field: "x",
transform: "literal"
},
y: {
field: "y",
transform: "literal"
}
}
});
invalidation.then(() => plot.destroy());
return plot;
}
import { selected_points } from "@fgregg/2023-mayoral-election-dot-density-maps@533"
deepscatter = import("https://benschmidt.org/deepscatter@2.8.0")
import { DuckDBClient, arrow } from "@bmschmidt/trees"
candidates = (await db.query(`SELECT distinct("field") from votes LIMIT 10`))
.toArray()
.map((d) => d.field)
votes = {
enums_made;
const tb = await db.query(`
SELECT x::FLOAT x, (y * -1.5)::FLOAT y, field::candidate candidate, row_number() OVER () AS ix FROM votes`);
return tb;
}
enums_made = {
await db.query(
"CREATE TABLE votes AS SELECT *,row_number() OVER () AS ix FROM 'https://benschmidt.org/selected_points.csv'"
);
return db.query(
`CREATE TYPE candidate AS ENUM (SELECT "field" FROM votes WHERE "field" IS NOT NULL)`
);
}
db = DuckDBClient.of({})
new URL("https://benschmidt.org/selected_points.csv")
selected_points.csv
Type SQL, then Shift-Enter. Ctrl-space for more options.
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.
