Public
Edited
Feb 25, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
return plot.plotAPI(
{
point_size,
'encoding': {
'filter2': {
field: 'year',
op: 'within',
a: (year[1] - year[0]) / 2,
b: (year[1] + year[0]) / 2
}
}
})
}
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
mutable doi = "1512.00913"
Insert cell
Insert cell
Deepscatter = (await import("https://benschmidt.org/deepscatter@2.6.0.js"))
.default
Insert cell
## Settings
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<style>
dt {
float: left;
clear: left;
width: 90px;
font-weight: bold;
color: rgb(128, 19, 0);
}

dt::after {
content: ":";
}

dd {
margin: 0 0 0 10px;
padding: 0 0 0.5em 0;
width: 280px;
}
</style>
Insert cell
year_listener = {

}
Insert cell
zoom_listener = {
plot.plotAPI({zoom: { bbox }}).then(plot.plotAPI({zoom: undefined}))
}
Insert cell
plot.click_function
Insert cell
plot = {
window.last_clicked = {}
d3.select("#plot").selectAll("div").remove()
const plot = new Deepscatter("#plot", width, Math.floor(width * .75))
await plot.plotAPI({
"source_url" : 'https://benschmidt.org/arxiv',
"background_color": [45, 0, 75],
"max_points": 10000,
"alpha": 5
})
return plot
}
Insert cell
function children(tile) {
const [z, x, y] = tile.split("/").map((d) => parseInt(d));
const children = [];
for (let i = 0; i < 4; i++) {
children.push(`${z + 1}/${x * 2 + (i % 2)}/${y * 2 + Math.floor(i / 2)}`);
}
return children;
}
Insert cell
children("2/4/4")
Insert cell
import {rangeSlider} from '@mootari/range-slider'

Insert cell
function macro_tile(k, size = 3, parents = 1) {
let [z, x, y] = k.split("/").map((d) => parseInt(d));
let moves = 0;
while (!(moves > parents && z % size == 0)) {
x = Math.floor(x / 2);
y = Math.floor(y / 2);
z = z - 1;
moves++;
}
return `${z}/${x}/${y}`;
}
Insert cell
plot._root.map((d) => d.key + "->" + macro_tile(d.key))
Insert cell
Insert cell
d3 = require("d3-selection", 'd3-fetch')
Insert cell

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.
Learn more