30:T149a,svg` `31:T3786,nytViz = html` `32:[{"id":"223d964557556842a13086bf8b30207571cbe511cc20753eb6b6d67616a15996707e69499036d0fe9a0b135c1188bd2f1549e360c83a7e73f72e9dac6a982073","href":"https://static.observableusercontent.com/files/223d964557556842a13086bf8b30207571cbe511cc20753eb6b6d67616a15996707e69499036d0fe9a0b135c1188bd2f1549e360c83a7e73f72e9dac6a982073","name":"penguins.csv","type":"text/csv","lastModified":1638738230061.477,"size":13505}] 2e:{"title":"Hello reviz!","cells":[{"id":0,"value":"# Hello `reviz`!","pinned":false,"hidden":false,"mode":"md"},{"id":588,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"[`reviz`](https://github.com/parkerziegler/reviz) is a new, open-source library for automatically reverse engineering data visualizations from the DOM. You can think of it almost like a compiler that transforms `svg` subtrees into partial programs written using [Observable Plot](https://observablehq.com/@observablehq/plot). `reviz` applies a set of deductive heuristics over attributes of an `svg` subtree to infer a matching visualization type. From there it generates a partial Plot program that, applied to a new dataset, renders a visualization that matches the _appearance_ of the original but targeted at new data. This is a process we and others in the community call _visualization retargeting_.","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"To see how `reviz` works, let's apply it to a working example with the Penguins dataset used by @Fil in his [Plot Exploration](https://observablehq.com/@observablehq/plot-exploration-penguins) notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"data = FileAttachment(\"penguins.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"## Choosing an input visualization","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"First, we need to find an input visualization we want to use as the basis for the one `reviz` will generate. Let's use [this one](https://www.nytimes.com/interactive/2021/04/17/us/vaccine-hesitancy-politics.html) from the New York Times. We've replicated just the DOM tree here by copying it directly using Firefox's DOM inspector — expand the cell below to take a look. In addition, we've manually copied over the minimal CSS used by the visualization.","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"nytVizStyle = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"## The `reviz` process","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"To get started, we'll need to get a reference to the `svg` `Node` containing our input visualization. In Observable we have direct access to the `Node` via the variable we bound to the cell (`nytViz` in this case), but you could also use [`document.querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById), or [React refs](https://reactjs.org/docs/refs-and-the-dom.html) — whatever API is appropriate for accessing the DOM in your specific case!","pinned":false,"hidden":false,"mode":"md"},{"id":534,"value":"With a reference to the root `svg` `Node` in hand, we now call the `analyzeVisualization` function from `reviz`. This single function is the entirety of the `reviz` API!","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"output = reviz.analyzeVisualization(nytViz)","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"You can see that the call to `analyzeVisualization` returns an `Object` containing two properties — `spec` and `program`.","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"`spec` is itself an `Object` that captures information of interest about the input `svg` subtree. This includes both geometric attributes, such as the radii of `circle` elements, and presentational attributes, such as the set of unique `fill`s and `stroke`s encountered in the subtree. `spec` also includes a top-level `type` property, which refers to the visualization type `reviz` has determined the input `svg` subtree to correspond to. As an early disclaimer, `reviz` only supports [a finite set of visualization types](https://github.com/parkerziegler/reviz#supported-visualization-types).","pinned":false,"hidden":false,"mode":"md"},{"id":415,"value":"`program` is a string representing the (partial) Observable Plot program `reviz` generates from the spec. A partial program is one in which small pieces are left empty; these pieces are called \"holes\" and are denoted in the generated program by the string `'??'`. By filling in holes with the names of columns from your input dataset, you get a fully working data visualization _with_ the accompanying source code!","pinned":false,"hidden":false,"mode":"md"},{"id":424,"value":"## Targeting a `reviz`-generated program at new data","pinned":false,"hidden":false,"mode":"md"},{"id":441,"value":"To target the `reviz`-generated program at new data, all we need to do is fill in the holes! `reviz` has given us the entirety of this program already — we just need to apply the following diff:\n\n```diff\nconst plot = Plot.plot({\n color: {\n type: 'categorical',\n range: ['#C67371', '#ccc', '#709DDE', '#A7B9D3', '#C23734'],\n },\n marks: [\n Plot.dot(data, {\n- fill: '??',\n+ fill: 'island',\n- stroke: '??',\n+ stroke: 'island',\n fillOpacity: 0.8,\n strokeOpacity: 1,\n strokeWidth: 1,\n- x: '??',\n+ x: 'flipper_length_mm',\n- y: '??',\n+ y: 'body_mass_g',\n r: 7,\n }),\n ],\n});\n```","pinned":false,"hidden":false,"mode":"md"},{"id":447,"value":"This program generates the following visualization:","pinned":false,"hidden":false,"mode":"md"},{"id":451,"value":"diff = {\n return Plot.plot({\n color: {\n type: \"categorical\",\n range: [\"#C67371\", \"#ccc\", \"#709DDE\", \"#A7B9D3\", \"#C23734\"]\n },\n marks: [\n Plot.dot(data, {\n fill: \"island\",\n stroke: \"island\",\n fillOpacity: 0.8,\n strokeOpacity: 1,\n strokeWidth: 1,\n x: \"flipper_length_mm\",\n y: \"body_mass_g\",\n r: 7\n })\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"We could just as easily use a different set of column names to fill in the holes. Let's instead compare our penguins' bill lengths and bill depths to see if there is a correlation between these variables across islands.","pinned":false,"hidden":false,"mode":"md"},{"id":548,"value":"diff2 = {\n return Plot.plot({\n color: {\n type: \"categorical\",\n range: [\"#C67371\", \"#ccc\", \"#709DDE\", \"#A7B9D3\", \"#C23734\"]\n },\n marks: [\n Plot.dot(data, {\n fill: \"island\",\n stroke: \"island\",\n fillOpacity: 0.8,\n strokeOpacity: 1,\n strokeWidth: 1,\n x: \"culmen_length_mm\",\n y: \"culmen_depth_mm\",\n r: 7\n })\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"Et voilà! We've used `reviz` to automatically visualize our data (multiple times!) using the appearance and chart type of a visualization we found in the wild, all with a single call to `analyzeVisualization`! ","pinned":false,"hidden":false,"mode":"md"},{"id":469,"value":"## Going further","pinned":false,"hidden":false,"mode":"md"},{"id":473,"value":"To make `reviz` even easier to use in Observable, we include an example function here, `revizify`, that will automatically fill in holes and render the output visualization for you! It also renders a pretty-printed view of both `spec` and `program` so you can more closely examine the inferences `reviz` is making to reverse engineer a data visualization. Many more examples are available on [our example site](https://reviz.vercel.app/). ","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"revizify = async (chart, data, replacements) => {\n const { spec, program } = reviz.analyzeVisualization(chart);\n\n const filledProgram = replaceHoles(program, replacements);\n const formattedProgram = await prettier.format(filledProgram, {\n parser: \"babel\",\n plugins: [prettierPluginBabel, prettierPluginEstree]\n });\n const plot = Function(`return ${formattedProgram}`)()(Plot, data);\n\n return html`\n

\n \n ${plot}\n

${prism.highlight(\n        JSON.stringify(spec, null, 2),\n        prism.languages.js,\n        \"javascript\"\n      )}

${prism.highlight(\n        formattedProgram,\n        prism.languages.js,\n        \"javascript\"\n      )}

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"replaceHoles = (program, replacements) => {\n const withValues = replacements.reduce((p, { key, value }) => {\n return p.replace(`${key}: '??'`, `${key}: '${value}'`);\n }, program);\n\n return `function plot(Plot, data) {\n return ${withValues};\n }`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":555,"value":"Below, we generate our earlier example using a single call to `revizify`! You can also see the pretty-printed `spec` and generated `program`.","pinned":false,"hidden":false,"mode":"md"},{"id":372,"value":"scatterplot = revizify(nytViz, data, [\n { key: \"x\", value: \"body_mass_g\" },\n { key: \"y\", value: \"flipper_length_mm\" },\n { key: \"fill\", value: \"island\" },\n { key: \"stroke\", value: \"island\" }\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"We can even use `revizify` to see our data using a different input visualization type, like a strip plot. Let's use Mike Bostock's D3 [Dot Strip Plot](https://observablehq.com/@d3/dot-strip-plot) as an example. We'll lift the style of this visualization to look at the distribution of flipper lengths of our penguins across different islands.","pinned":false,"hidden":false,"mode":"md"},{"id":498,"value":"import { chart } from \"@d3/dot-strip-plot\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"d3StripPlot = chart","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"stripPlot = revizify(d3StripPlot, data, [\n { key: \"x\", value: \"flipper_length_mm\" },\n { key: \"y\", value: \"island\" }\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"With just four lines of code we have a fully functional data visualization _and_ its source code, all thanks to `reviz`'s automated reverse engineering! With [the beauty of Observable imports](https://observablehq.com/@observablehq/introduction-to-imports), this will work with _any_ supported visualization you can find on Observable. Happy charting!","pinned":false,"hidden":false,"mode":"md"},{"id":602,"value":"## Learn more about `reviz`!","pinned":false,"hidden":false,"mode":"md"},{"id":606,"value":"To learn more about `reviz`, check out [the repo on GitHub](https://github.com/parkerziegler/reviz). You can also [read the short paper](https://github.com/parkerziegler/reviz/blob/main/paper/reviz.pdf) to get much more detail into how `reviz` works under the hood. While you're there, consider contributing by adding tests, sharing examples, or just giving it a star 🌟. You can also download `reviz` for use in your own projects [from NPM](https://www.npmjs.com/package/@reviz/compiler).\n\n```sh\nyarn add @reviz/compiler\n```","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"reviz = import(\"https://cdn.skypack.dev/@reviz/compiler@0.5.0?min\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"prettier = require(\"prettier/standalone\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":630,"value":"prettierPluginBabel = import(\n \"https://unpkg.com/prettier@3.0.0/plugins/babel.mjs\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":634,"value":"prettierPluginEstree = import(\n \"https://unpkg.com/prettier@3.0.0/plugins/estree.mjs\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"prism = import(\"https://cdn.skypack.dev/prismjs@1.26.0?min\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}