Skip to content

Commit 78eb4f1

Browse files
committed
view, viewof, getting started in Framework
1 parent 12ecfa7 commit 78eb4f1

File tree

3 files changed

+13
-3
lines changed

3 files changed

+13
-3
lines changed

docs/features/interactions.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,6 @@ With the exception of render transforms (see the [pointer transform](https://git
7070

7171
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.
7272

73-
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).
73+
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).
7474

75-
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).
75+
You can also manipulate the SVG that Plot creates, if you are comfortable using lower-level APIs.

docs/getting-started.md

+10
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,16 @@ If you’d prefer to run Plot locally (or entirely offline), you can download th
8787

8888
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.
8989

90+
## Using in Observable
91+
92+
On Observable, Plot is available by default as `Plot`. In your Observable notebook or in your Observable Framework page, just type:
93+
94+
```js
95+
Plot.rectY(alphabet, {x: "letter", y: "frequency"}).plot()
96+
```
97+
98+
For details, see [Observable Plot in Framework](https://observablehq.com/framework/lib/plot).
99+
90100
## Installing from npm
91101

92102
If you’re developing a web application using Node, you can install Plot via yarn, npm, pnpm, or your preferred package manager.

docs/interactions/pointer.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ As the above chart shows, a plot can have multiple pointer transforms. Each poin
153153

154154
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.
155155

156-
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.
156+
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.
157157

158158
```js
159159
const plot = Plot.plot(options);

0 commit comments

Comments
 (0)