From e6113633020250d9060df8ccb3607ea8f46e22ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Mon, 30 Sep 2024 11:42:21 +0200 Subject: [PATCH] view, viewof, getting started in Framework --- docs/features/interactions.md | 4 ++-- docs/getting-started.md | 10 ++++++++++ docs/interactions/pointer.md | 2 +- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/docs/features/interactions.md b/docs/features/interactions.md index 4cd5a27b3a..29c25b3409 100644 --- a/docs/features/interactions.md +++ b/docs/features/interactions.md @@ -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. diff --git a/docs/getting-started.md b/docs/getting-started.md index e5ba061b7e..513525c3d2 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -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 d3.min.js and plot.min.js, 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. diff --git a/docs/interactions/pointer.md b/docs/interactions/pointer.md index e00df011b8..841117693e 100644 --- a/docs/interactions/pointer.md +++ b/docs/interactions/pointer.md @@ -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);