diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..1f0277c --- /dev/null +++ b/examples/README.md @@ -0,0 +1,15 @@ +# Counterpoint Examples + +Try running these examples locally by cloning the Counterpoint repository. To install the dependencies for the Svelte-based examples, first install the local Counterpoint version: + +```bash +cd counterpoint && npm install && cd .. +``` + +Then install the dependencies for the specific example and start the dev server: + +```bash +cd examples/ +npm install +npm run dev +``` diff --git a/examples/citations/README.md b/examples/citations/README.md deleted file mode 100644 index 5e72b6d..0000000 --- a/examples/citations/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# Zoomable Scatterplot Example - -This example demonstrates adding zoom and pan functionalities to a scatterplot using the `Scales` class. In this instance we use a `d3-zoom` object to convert DOM element interactions to transforms, but commented code in `App.svelte` shows how to use vanilla JS event handlers to achieve similar results. - -## Setup - -```bash -cd tests/zoomable_scatter -npm install -npm run dev -``` diff --git a/examples/dynamic_grid/README.md b/examples/dynamic_grid/README.md index 7d61c9b..cae091c 100644 --- a/examples/dynamic_grid/README.md +++ b/examples/dynamic_grid/README.md @@ -4,8 +4,16 @@ This example demonstrates how to use the `StageManager` class to orchestrate mar ## Setup +To run this example locally, first install the local Counterpoint version: + +```bash +cd counterpoint && npm install && cd .. +``` + +Then install example dependencies and start the dev server: + ```bash -cd tests/dynamic_grid +cd examples/dynamic_grid npm install npm run dev ``` diff --git a/examples/interactive_boxes/README.md b/examples/interactive_boxes/README.md index 768b294..eb41ee7 100644 --- a/examples/interactive_boxes/README.md +++ b/examples/interactive_boxes/README.md @@ -1,4 +1,4 @@ -# Scatterplot Example +# Interactive Boxes Example This example shows how to use a `PositionMap` to quickly find marks under the user's pointer. In the demo, you can click and drag nodes to move them around, @@ -6,6 +6,14 @@ and the node appearance animates to show hover and drag states. ## Setup +To run this example locally, first install the local Counterpoint version: + +```bash +cd counterpoint && npm install && cd .. +``` + +Then install example dependencies and start the dev server: + ```bash cd examples/interactive_boxes npm install diff --git a/examples/network/README.md b/examples/network/README.md index c1228e2..4cf8046 100644 --- a/examples/network/README.md +++ b/examples/network/README.md @@ -4,7 +4,13 @@ This example demonstrates a simple example of creating a network visualization u ## Setup -To run this example locally: +To run this example locally, first install the local Counterpoint version: + +```bash +cd counterpoint && npm install && cd .. +``` + +Then install example dependencies and start the dev server: ```bash cd examples/network diff --git a/examples/network_website_header/README.md b/examples/network_website_header/README.md deleted file mode 100644 index bc98a1e..0000000 --- a/examples/network_website_header/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# Scatterplot Example - -This example demonstrates using basic animations for marks with `x`, `y`, and `color` properties. - -## Setup - -```bash -cd tests/scatterplot -npm install -npm run dev -``` diff --git a/examples/regl_dots/README.md b/examples/regl_dots/README.md index 7af800c..ecbfd93 100644 --- a/examples/regl_dots/README.md +++ b/examples/regl_dots/README.md @@ -4,8 +4,16 @@ This example demonstrates how to use REGL to create an accelerated scatter plot ## Setup +To run this example locally, first install the local Counterpoint version: + +```bash +cd counterpoint && npm install && cd .. +``` + +Then install example dependencies and start the dev server: + ```bash -cd tests/regl_dots +cd examples/regl_dots npm install npm run dev ``` diff --git a/examples/scatterplot/README.md b/examples/scatterplot/README.md index bc98a1e..19a7ff9 100644 --- a/examples/scatterplot/README.md +++ b/examples/scatterplot/README.md @@ -4,8 +4,16 @@ This example demonstrates using basic animations for marks with `x`, `y`, and `c ## Setup +To run this example locally, first install the local Counterpoint version: + +```bash +cd counterpoint && npm install && cd .. +``` + +Then install example dependencies and start the dev server: + ```bash -cd tests/scatterplot +cd examples/scatterplot npm install npm run dev ``` diff --git a/examples/zoomable_scatter/README.md b/examples/zoomable_scatter/README.md index 5e72b6d..966dffb 100644 --- a/examples/zoomable_scatter/README.md +++ b/examples/zoomable_scatter/README.md @@ -4,8 +4,16 @@ This example demonstrates adding zoom and pan functionalities to a scatterplot u ## Setup +To run this example locally, first install the local Counterpoint version: + +```bash +cd counterpoint && npm install && cd .. +``` + +Then install example dependencies and start the dev server: + ```bash -cd tests/zoomable_scatter +cd examples/zoomable_scatter npm install npm run dev ```