Skip to content

Commit

Permalink
view, viewof, getting started in Framework
Browse files Browse the repository at this point in the history
  • Loading branch information
Fil committed Sep 30, 2024
1 parent 12ecfa7 commit 78eb4f1
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 3 deletions.
4 changes: 2 additions & 2 deletions docs/features/interactions.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,6 @@ With the exception of render transforms (see the [pointer transform](https://git

That said, you can simply throw away an old plot and replace it with a new one! This allows plotting of dynamic data: data which can change in real-time as it streams in, or because it is derived in response to external inputs such as range sliders and search boxes.

On Observable, you can use [viewof](https://observablehq.com/@observablehq/views) in conjunction with [Observable Inputs](https://observablehq.com/@observablehq/inputs) (or other plots!) for interactivity. If your cell references another cell, it will automatically re-run whenever the upstream cell’s value changes. For example, try dragging the slider in this [hexbin example](https://observablehq.com/@observablehq/plot-hexbin-binwidth). In React, use [useEffect](https://react.dev/reference/react/useEffect) and [useRef](https://react.dev/reference/react/useRef) to re-render the plot when data changes. In Vue, use [ref](https://vuejs.org/api/reactivity-core.html#ref). For more, see our [getting started guide](../getting-started.md).
You can use [Observable Inputs](https://observablehq.com/@observablehq/inputs) for interactivity. For example, try dragging the slider in this [hexbin example](https://observablehq.com/@observablehq/plot-hexbin-binwidth). Inputs dispatch an [*input* event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) when the user interacts with them. You can listen to these events and re-render the plot when data changes. Observable Framework offers a convenient [view](https://observablehq.com/framework/reactivity#inputs) helper to do so. In Observable notebooks, you can use the [viewof](https://observablehq.com/@observablehq/views) keyword. In React, use [useEffect](https://react.dev/reference/react/useEffect) and [useRef](https://react.dev/reference/react/useRef). In Vue, use [ref](https://vuejs.org/api/reactivity-core.html#ref). For more, see our [getting started guide](../getting-started.md).

You can also manipulate the SVG that Plot creates, if you are comfortable using lower-level APIs; see examples by [Mike Freeman](https://observablehq.com/@mkfreeman/plot-animation) and [Philippe Rivière](https://observablehq.com/@fil/plot-animate-a-bar-chart).
You can also manipulate the SVG that Plot creates, if you are comfortable using lower-level APIs.
10 changes: 10 additions & 0 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,16 @@ If you’d prefer to run Plot locally (or entirely offline), you can download th

Then, create an `index.html` file as shown above in the **UMD + local** tab. If you prefer smaller minified files, you can download <a href="./d3.min.js" download>d3.min.js</a> and <a href="./plot.min.js" download>plot.min.js</a>, and then update the `src` attributes above accordingly.

## Using in Observable

On Observable, Plot is available by default as `Plot`. In your Observable notebook or in your Observable Framework page, just type:

```js
Plot.rectY(alphabet, {x: "letter", y: "frequency"}).plot()
```

For details, see [Observable Plot in Framework](https://observablehq.com/framework/lib/plot).

## Installing from npm

If you’re developing a web application using Node, you can install Plot via yarn, npm, pnpm, or your preferred package manager.
Expand Down
2 changes: 1 addition & 1 deletion docs/interactions/pointer.md
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ As the above chart shows, a plot can have multiple pointer transforms. Each poin

The pointer transform supports “click-to-stick”: clicking on the chart locks the currently-focused point until you click again. By locking the pointer, you can select text from the tip for copy and paste. If a plot has multiple pointer transforms, clicking will lock all pointer transforms.

The pointer transform emits an [*input* event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) whenever the focused points changes, and sets the value of the plot element to the focused data. This allows you to use a plot as an [Observable view](https://observablehq.com/@observablehq/views) (viewof), or to register an *input* event listener to react to pointing.
The pointer transform emits an [*input* event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) whenever the focused points changes, and sets the value of the plot element to the focused data. This allows you to use a plot as a view by registering an *input* event listener to react to pointing. Observable Framework offers a convenient [view](https://observablehq.com/framework/reactivity#inputs) helper to do so; in Observable notebooks, use the [viewof](https://observablehq.com/@observablehq/views) keyword.

```js
const plot = Plot.plot(options);
Expand Down

0 comments on commit 78eb4f1

Please sign in to comment.