Published
Edited
Jan 6, 2022
1 fork
11 stars
chart = Generators.queue(
worker(
function P({ data }) {
return Plot.dot(data, {
x: "body_mass_g",
y: "species",
fill: "sex"
}).plot({ marginLeft: 100 }).outerHTML;
},
{ data: penguins },
preamble
)
)
.next()
.value.then((d) => svg`${d}`)
Generators.queue(
worker(
async function P({ url }) {
const data = await d3.csv(url, d3.autoType);
return {
svg: Plot.dot(data, {
x: "body_mass_g",
y: "species",
fill: "sex"
}).plot({ marginLeft: 100 }).outerHTML
};
},
{ url },
preamble
)
)
.next()
.value.then((d) => svg`${d.svg}`)
viewof data = Generators.queue(
worker(
async function P({ url }) {
const data = await d3.csv(url, d3.autoType);
return {
svg: Plot.dot(data, {
x: "body_mass_g",
y: "species",
fill: "sex"
}).plot({ marginLeft: 100 }).outerHTML,
data
};
},
{ url },
preamble
)
)
.next()
.value.then((d) => Object.assign(svg`${d.svg}`, { value: d.data }))
Inputs.table(data)
import { worker } from "@fil/worker"
preamble = `
importScripts("https://cdn.jsdelivr.net/npm/d3@7");
importScripts("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.3.2");
importScripts("https://bundle.run/domino@2.1.6");
globalThis.document = domino.createDocument();
`
url = FileAttachment("penguins.csv").url()
penguins = FileAttachment("penguins.csv").csv({ typed: true })
Plot = "🤯" // a symbol to keep the Observable parser happy; we can leave it out and let it point to stdlib's version instead, but this clarifies that "Plot" in the worker is not this symbol
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.
