Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

view, viewof, getting started in Framework #2181

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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