Digital Humanist. Manhattan-based.
listener = {
// This being observable, the code below will run every time 'searchterm' changes.
// It creates a new async transformation on deepscatter that returns `1` for each entry where the regex matches, and `0` for each where it doesn't.
if (searchterm == "") {
return;
}
// Don't overwrite a transformation.
const column_name = "search for " + searchterm;
if (scatterplot.dataset.transformations[column_name] === undefined) {
scatterplot.dataset.register_transformation(column_name, function (point) {
const term = new RegExp(searchterm);
return point["lyric_line"].match(term) ? 1 : 0;
});
}
return scatterplot.dataset.transformations[searchterm];
}
scatterplot.select
transformation_plot = {
listener;
if (searchterm != "") {
//
scatterplot.plotAPI({
background_options: {
size: [0.4, 2] // Background half normal size, foreground double normal size.
},
encoding: {
foreground: {
field: "search for " + searchterm,
op: "gt",
a: 0
}
}
});
} else {
scatterplot.plotAPI({
background_options: {
size: [0.4, 1] // Bring the foreground size back down to normal.
},
encoding: {
foreground: null
}
});
}
}
scatterplot = {
const plot = new deepscatter.default("#plot", 900, 600);
await plot.plotAPI({
source_url: "https://davidnmora.github.io/lyric-viz/deepscatter-tiles",
point_size: 1,
max_points: 1e6,
zoom_balance: 0.35,
alpha: 40,
background_color: "#FFFAF2",
encoding: {
x: {
field: "x",
transform: "literal"
},
y: {
field: "y",
transform: "literal"
},
color: {
field: "generic_genre",
range: "category10"
}
}
});
invalidation.then(() => plot.destroy());
return plot;
}
html`
<style type="text/css">
.tooltip {
background-color: black;
width: 400px;
font-family: sans-serif;
}
.rect {
fill: white;
}
</style>
`
deepscatter = import("https://cdn.skypack.dev/deepscatter@2.15.0-RC-4")
arrow = scatterplot.arrow
db = {
const db = await DuckDBClient.of({});
return db;
}
import {
DuckDBClient,
} from "@bmschmidt/duckdb-client-1-24-0-arrow-11-0-0"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.