# @reviz/compiler

> An engine for reverse engineering data visualizations from the DOM.

Latest version **0.5.0** (published 2023-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @reviz/compiler
pnpm add @reviz/compiler
yarn add @reviz/compiler
bun add @reviz/compiler
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2023-08-01 |
| First published | 2023-08-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 746.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 79 |
| Author | Parker Ziegler |
| Maintainers | parkerziegler |
| Keywords | compiler, data visualization, reverse engineering, observable, observable plot, typescript |

## Links

- npm: https://www.npmjs.com/package/@reviz/compiler
- Repository: https://github.com/parkerziegler/reviz
- Homepage: https://github.com/parkerziegler/reviz/blob/main/packages/compiler/README.md
- Issues: https://github.com/parkerziegler/reviz/issues
- npm.io page: https://npm.io/package/@reviz/compiler

## Dependencies (3)

- [lodash.groupby](https://npm.io/package/lodash.groupby.md) ^4.6.0
- [lodash.orderby](https://npm.io/package/lodash.orderby.md) ^4.6.0
- [lodash.camelcase](https://npm.io/package/lodash.camelcase.md) ^4.3.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.5.0 (latest) — 2023-08-01

## README

<div align="center">
  <img
    src="https://raw.githubusercontent.com/parkerziegler/reviz/main/assets/reviz-logo.svg"
    alt="reviz"
    width="300"
  />
  <br />
  <br />     
  <strong>
    A lightweight engine for reverse engineering data visualizations from the DOM
  </strong>
  <br />
  <br />
</div>

`reviz` is a lightweight engine for reverse engineering data visualizations from the DOM. Its core goal is to assist in rapid visualization sketching and prototyping by automatically generating partial programs written using [Observable Plot](https://observablehq.com/@observablehq/plot) from input `svg` subtrees.

At the heart of `reviz` is its compiler.

## Installation

```sh
npm install @reviz/compiler
```

## API

The compiler is exposed via a tiny API—a single function!

```js
import { analyzeVisualization } from '@reviz/compiler';

const viz = document.querySelector('#my-viz');

const { spec, program } = analyzeVisualization(viz);
```

### `analyzeVisualization`

```ts
export declare const analyzeVisualization: (root: SVGSVGElement) => {
  spec: VizSpec;
  program: string;
};
```

`analyzeVisualization` is a function that takes in an `svg` `Element` as input and returns an `Object` containing two properties, `spec` and `program`.

`spec` refers to the intermediate representation used by `reviz` to generate partial Observable Plot programs. It encodes semantic information about the input `svg` subtree, including its inferred visualization type, geometric attributes of its marks (either `circle` or `rect` elements), and presentational attributes of its marks. `reviz`'s architecture mimics that of a traditional compiler, with `spec` acting as the intermediate representation (IR). It can be useful to examine `spec` to see whether or not `reviz` has inferred the correct visualization type for your input `svg` subtree.

`program` refers to the _partial_ Observable Plot program that `reviz` generates. These programs are intentionally _incomplete_ and contain "holes" represented by the string `'??'`. The presence of a hole indicates that the value for a particular attribute (e.g. the `r` attribute of a bubble chart or the `fill` attribute of a stacked bar chart) should be mapped to a column in a user's input dataset rather than kept static across all data elements. After filling in holes with column names from your input dataset, you'll have a complete visualization program ready to run in the browser!

---
_Source: https://npm.io/package/@reviz/compiler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._