Passionate about viz & systems thinking. Stanford CS 2017
A gentle introduction to DeepScatter: visualizing millions of points in the browser
<div id="plot" style="min-width:${width}px;min-height:${width * .75}px"></div>
viewof yearIntervalFromRangeSliderInput = rangeSlider({
title: "Range of years to show data for",
description: "Filter to a range",
min: 1990,
max: 2020,
step: 1
})
Deepscatter = (await import("deepscatter@2.6.1")).default
plot = {
d3.select("#plot").selectAll("div").remove(); // Cells get re-run a lot in Observable, so we clear anything that already exists before starting a new chart
// Observable provides handly width (and length) global variables, which we make use of
const computedHeight = Math.floor(width * 0.75);
const plot = new Deepscatter("#plot", width, computedHeight);
return plot; // we need this for updates, as you'll soon see...
}
first_plot = {
console.log("Submitting a chart update via plotAPI...");
plot
.plotAPI({
// Data fetched from Ben's website. You could also specify a local file, too.
source_url: "https://benschmidt.org/arxiv",
background_color: "#ffffff",
max_points: 10000,
point_size: 16,
alpha: 5,
// Here's where you set (typically via data) chart appearance. This example is just the tip of the iceberg.
encoding: {
x: {
field: "x"
},
y: {
field: "y"
},
color: {
constant: "#00ff00"
}
}
})
.then(() => {
console.log("... chart update done!");
});
console.log("I am synchronous code, so I fire before the update finishes!");
return plot;
}
4. Let's add some interactivity: filtering the data by year, using the range slider you saw below the chart
import { rangeSlider } from "@mootari/range-slider"
yearIntervalFromRangeSliderInput
{
const lowerBound = yearIntervalFromRangeSliderInput[0];
const upperBound = yearIntervalFromRangeSliderInput[1];
const sizeOfRange = upperBound - lowerBound;
const midpointBetweenTheYears = (upperBound + lowerBound) / 2;
plot.plotAPI({
encoding: {
filter: {
field: "year",
op: "within",
a: sizeOfRange / 2, // how far to extend on either end of the midpoint
b: midpointBetweenTheYears
}
}
});
}
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.
