Ph.D. Student at UC Berkeley EECS. Prev. @FormidableLabs.
reviz.analyzeVisualization(nytViz)
Plot.plot({
color: {
scale: "categorical",
range: ["#C67371", "#ccc", "#709DDE", "#A7B9D3", "#C23734"]
},
marks: [
Plot.dot(data, {
fill: "island",
stroke: "island",
fillOpacity: 0.8,
strokeOpacity: 1,
strokeWidth: 1,
x: "flipper_length_mm",
y: "body_mass_g",
r: 7
})
]
})
Plot.plot({
color: {
scale: "categorical",
range: ["#C67371", "#ccc", "#709DDE", "#A7B9D3", "#C23734"]
},
marks: [
Plot.dot(data, {
fill: "island",
stroke: "island",
fillOpacity: 0.8,
strokeOpacity: 1,
strokeWidth: 1,
x: "culmen_length_mm",
y: "culmen_depth_mm",
r: 7
})
]
})
revizify = async (chart, data, replacements) => {
const { spec, program } = reviz.analyzeVisualization(chart);
const filledProgram = replaceHoles(program, replacements);
const formattedProgram = await prettier.format(filledProgram, {
parser: "babel",
plugins: [prettierPluginBabel, prettierPluginEstree]
});
const plot = Function(`return ${formattedProgram}`)()(Plot, data);
return html`
<div>
<link href="https://unpkg.com/prism-theme-night-owl@1.4.0/build/light-no-italics.css" rel="stylesheet">
${plot}
<pre class="language-json">${prism.highlight(
JSON.stringify(spec, null, 2),
prism.languages.js,
"javascript"
)}</pre>
<pre class="language-js" style="color: darkgoldenrod;">${prism.highlight(
formattedProgram,
prism.languages.js,
"javascript"
)}</pre>
</div>
`;
}
replaceHoles = (program, replacements) => {
const withValues = replacements.reduce((p, { key, value }) => {
return p.replace(`${key}: '??'`, `${key}: '${value}'`);
}, program);
return `function plot(Plot, data) {
return ${withValues};
}`;
}
scatterplot = revizify(nytViz, data, [
{ key: "x", value: "body_mass_g" },
{ key: "y", value: "flipper_length_mm" },
{ key: "fill", value: "island" },
{ key: "stroke", value: "island" }
])
d3StripPlot = chart
stripPlot = revizify(d3StripPlot, data, [
{ key: "x", value: "flipper_length_mm" },
{ key: "y", value: "island" }
])
reviz = import("https://cdn.skypack.dev/@reviz/compiler@0.5.0?min")
prettier = require("prettier/standalone")
prettierPluginBabel = import(
"https://unpkg.com/prettier@3.0.0/plugins/babel.mjs"
)
prettierPluginEstree = import(
"https://unpkg.com/prettier@3.0.0/plugins/estree.mjs"
)
prism = import("https://cdn.skypack.dev/prismjs@1.26.0?min")
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.
