### Install Dependencies with pnpm

Source: https://github.com/observablehq/plot/blob/main/CONTRIBUTING.md

Run this command in your cloned repository to install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Start Vite for Live Preview

Source: https://github.com/observablehq/plot/blob/main/CONTRIBUTING.md

Command to start the Vite development server for live previewing of snapshot tests. This command opens a local server where changes are reflected instantly.

```bash
pnpm run dev
```

--------------------------------

### Dodge Transform Examples

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/dodge.md

Examples demonstrating the use of the dodge transform for positioning circles and text, including sorting and reversing sort order.

```APIDOC
:::plot defer https://observablehq.com/@observablehq/plot-the-facebook-ipo
```js
Plot.plot({
  insetRight: 10,
  height: 790,
  marks: [
    Plot.dot(
      ipos,
      Plot.dodgeY({
        x: "date",
        r: "rMVOP",
        title: (d) => `${d.NAME}\n${(d.rMVOP / 1e3).toFixed(1)}B`,
        fill: "currentColor"
      })
    ),
    Plot.text(
      ipos,
      Plot.dodgeY({
        filter: (d) => d.rMVOP > 5e3,
        x: "date",
        r: "rMVOP",
        text: (d) => (d.rMVOP / 1e3).toFixed(),
        fill: "var(--vp-c-bg)",
        pointerEvents: "none"
      })
    )
  ]
})
```
:::

:::plot defer https://observablehq.com/@observablehq/plot-text-dodge
```js
Plot.plot({
  insetRight: 10,
  height: 790,
  marks: [
    Plot.text(
      ipos,
      Plot.dodgeY({
        x: "date",
        r: "rMVOP",
        text: (d) => (d.rMVOP / 1e3).toFixed(1),
        title: "NAME",
        fontSize: (d) => Math.min(22, Math.cbrt(d.rMVOP / 1e3) * 6)
      })
    )
  ]
})
```
:::

:::plot https://observablehq.com/@observablehq/plot-dodge-sort
```js
Plot.plot({
  height: 180,
  marks: [
    Plot.dotX(cars, Plot.dodgeY({x: "weight (lb)", title: "name", fill: "currentColor", sort: "weight (lb)"}))
  ]
})
```
:::

:::plot https://observablehq.com/@observablehq/plot-dodge-sort
```js
Plot.plot({
  height: 180,
  marks: [
    Plot.dotX(cars, Plot.dodgeY({x: "weight (lb)", title: "name", fill: "currentColor", sort: "weight (lb)", reverse: true}))
  ]
})
```
:::
```

--------------------------------

### Hexgrid Mark Example

Source: https://github.com/observablehq/plot/blob/main/docs/marks/hexgrid.md

An example demonstrating the usage of the hexgrid mark in conjunction with the hexbin transform to visualize binned data.

```APIDOC
## Example Usage

### Description
This example shows how to use `Plot.hexgrid` with `Plot.dot` and `Plot.hexbin` to create a density plot of penguin culmen measurements.

### Method
N/A (This is a Plot.plot configuration)

### Endpoint
N/A

### Parameters
N/A (Parameters are within the Plot.plot configuration)

### Request Example
```javascript
Plot.plot({
  marks: [
    Plot.hexgrid(),
    Plot.dot(penguins, Plot.hexbin({r: "count"}, {x: "culmen_length_mm", y: "culmen_depth_mm", fill: "currentColor"}))
  ]
})
```

### Response
#### Success Response (Plot SVG)
- Renders an SVG visualization of the hexagonal grid with binned data points.

#### Response Example
(An SVG string representing the plot would be here, but is omitted for brevity)
```

--------------------------------

### Vue.js Setup with Observable Plot and D3 Imports

Source: https://github.com/observablehq/plot/blob/main/docs/marks/waffle.md

Import necessary libraries for Observable Plot, D3, and Vue.js reactivity. This setup is required for interactive visualizations.

```javascript
import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import {ref, shallowRef, onMounted} from "vue";
```

--------------------------------

### Install Plot using npm

Source: https://github.com/observablehq/plot/blob/main/docs/getting-started.md

Use this command to add the Plot library to your project with npm.

```bash
npm install @observablehq/plot
```

--------------------------------

### Vue.js Setup with Observable Plot Imports

Source: https://github.com/observablehq/plot/blob/main/docs/marks/text.md

This script setup block imports necessary libraries like Plot, D3, Vue's shallowRef and onMounted, and various datasets. It initializes a reactive travelers array and loads CSV data asynchronously when the component is mounted.

```javascript
<script setup>

import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import {shallowRef, onMounted} from "vue";
import alphabet from "../data/alphabet.ts";
import caltrain from "../data/caltrain.ts";
import driving from "../data/driving.ts";

const travelers = shallowRef([]);

onMounted(() => {
  d3.csv("../data/travelers.csv", d3.autoType).then((data) => (travelers.value = data));
});

</script>
```

--------------------------------

### Hexbin Constructor

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/hexbin.md

Provides the signature and a basic usage example for the hexbin constructor, showing how to apply it within a Plot.dot mark.

```APIDOC
## GET /api/products/{id}

### Description
Retrieves the details of a specific product.

### Method
GET

### Endpoint
/api/products/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the product to retrieve.

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the product.
- **name** (string) - The name of the product.
- **description** (string) - A detailed description of the product.
- **price** (number) - The price of the product.
- **category** (string) - The category the product belongs to.
- **stock** (integer) - The current stock level of the product.

#### Response Example
```json
{
  "id": "prod_abc123",
  "name": "Laptop",
  "description": "A high-performance laptop with a 15-inch display.",
  "price": 1200.50,
  "category": "Electronics",
  "stock": 50
}
```
```

--------------------------------

### Install Plot using yarn

Source: https://github.com/observablehq/plot/blob/main/docs/getting-started.md

Use this command to add the Plot library to your project with yarn.

```bash
yarn add @observablehq/plot
```

--------------------------------

### Vue Component Setup with Imports

Source: https://github.com/observablehq/plot/blob/main/docs/marks/density.md

Sets up a Vue component by importing Plot, D3, TopoJSON, and other necessary modules. Also imports local data files.

```javascript
import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import * as topojson from "topojson-client";
import {computed, ref, shallowRef, onMounted} from "vue";
import faithful from "../data/faithful.ts";
import penguins from "../data/penguins.ts";
```

--------------------------------

### ShiftX transform example

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/shift.md

Demonstrates the basic usage of the shiftX transform to derive an x1 channel by shifting the x channel by a specified interval.

```js
Plot.shiftX("7 days", {x: "Date", y: "Close"})
```

--------------------------------

### Vue.js Setup with Observable Plot and D3 Imports

Source: https://github.com/observablehq/plot/blob/main/docs/marks/tip.md

Imports required libraries for data visualization and manipulation in a Vue.js application. Ensure these libraries are installed in your project.

```javascript
import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import * as topojson from "topojson-client";
import {computed, shallowRef, onMounted} from "vue";
```

--------------------------------

### Hexbin Transform Example

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/hexbin.md

Basic usage of the hexbin transform, specifying fill based on count and mapping x and y channels. This is a core example for understanding hexbin functionality.

```javascript
Plot.dot(olympians, Plot.hexbin({fill: "count"}, {x: "weight", y: "height"}))
```

--------------------------------

### Install Plot using pnpm

Source: https://github.com/observablehq/plot/blob/main/docs/getting-started.md

Use this command to add the Plot library to your project with pnpm.

```bash
pnpm add @observablehq/plot
```

--------------------------------

### Plot.rect Example

Source: https://github.com/observablehq/plot/blob/main/docs/marks/rect.md

A basic example of using Plot.rect to create a histogram-like visualization.

```APIDOC
## Plot.rect(*data*, *options*)

### Description
Returns a new rect with the given *data* and *options*.

### Method
Plot.rect

### Endpoint
N/A (This is a library function, not an API endpoint)

### Parameters
#### Request Body
- **data** (*Array*): The data to be visualized.
- **options** (*Object*): Configuration options for the rect mark.
  - **x1** (*Number* | *Date* | *String*): The starting horizontal position.
  - **y1** (*Number* | *Date* | *String*): The starting vertical position.
  - **x2** (*Number* | *Date* | *String*): The ending horizontal position.
  - **y2** (*Number* | *Date* | *String*): The ending vertical position.
  - **interval** (*Number* | *Function*): Specifies an interval for deriving x1, x2, y1, y2 from x, y.
  - **r** (*Number*): Corner radius for all corners.
  - **rx1**, **ry1**, **rx2**, **ry2**: Specific corner radii for different sides.
  - **rx1y1**, **rx2y1**, **rx2y2**, **rx1y2**: Specific corner radii for individual corners.
  - **clip** (*String*): Clipping behavior, e.g., "frame".

### Request Example
```js
Plot.rect(olympians, Plot.bin({fill: "count"}, {x: "weight", y: "height"}))
```

### Response
#### Success Response (200)
- **Rect Mark**: Returns a Plot.rect mark object.

#### Response Example
```json
{
  "type": "rect",
  "data": "olympians",
  "options": {
    "x": {"interval": null, "domain": null, "range": [0, 1]},
    "y": {"interval": null, "domain": null, "range": [0, 1]},
    "fill": {"type": "color", "scale": "count"}
  }
}
```
```

--------------------------------

### Basic DodgeX Transform Example

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/dodge.md

Illustrates the fundamental application of the dodgeX transform, used for piling marks horizontally along the y-axis.

```javascript
Plot.dodgeX({y: "value"})
```

--------------------------------

### Configure Plot Marks and Axes

Source: https://github.com/observablehq/plot/blob/main/docs/marks/axis.md

Basic setup for a plot with a rule, axis, grid, and line mark.

```js
  marks: [
    Plot.ruleY([0]),
    Plot.axisX({ticks: "3 months"}),
    Plot.gridX(),
    Plot.line(aapl, {x: "Date", y: "Close"})
  ]
})
```

--------------------------------

### Initialize Observable Plot in Vue

Source: https://github.com/observablehq/plot/blob/main/docs/features/facets.md

Setup script for importing Plot and D3, managing reactive data with shallowRef, and fetching CSV data on mount.

```javascript
<script setup>

import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import {shallowRef, onMounted} from "vue";
import anscombe from "../data/anscombe.ts";
import barley from "../data/barley.ts";
import industries from "../data/bls-industry-unemployment.ts";
import penguins from "../data/penguins.ts";

const olympians = shallowRef([
  {weight: 31, height: 1.21, sex: "female"},
  {weight: 170, height: 2.21, sex: "male"}
]);

const scheme = Plot.scale({color: {type: "categorical"}}).range;

onMounted(() => {
  d3.csv("../data/athletes.csv", d3.autoType).then((data) => (olympians.value = data));
});

</script>
```

--------------------------------

### Define Data for Shorthand Visualization

Source: https://github.com/observablehq/plot/blob/main/docs/features/shorthand.md

Example datasets including a one-dimensional array of numbers, a two-dimensional array of time-series tuples, a matrix of categorical pairs, and a genetic sequence string.

```javascript
const numbers = [
  170.16, 172.53, 172.54, 173.44, 174.35, 174.55, 173.16, 174.59, 176.18, 177.90,
  176.15, 179.37, 178.61, 177.30, 177.30, 177.25, 174.51, 172.00, 170.16, 165.53,
  166.87, 167.17, 166.00, 159.10, 154.83, 163.09, 160.29, 157.07, 158.50, 161.95,
  163.04, 169.79, 172.36, 172.05, 172.83, 171.80, 173.67, 176.35, 179.10, 179.26
];

const timeSeries = [
  [new Date("2018-01-02"), 170.160004],
  [new Date("2018-01-03"), 172.529999],
  [new Date("2018-01-04"), 172.539993],
  [new Date("2018-01-05"), 173.440002],
  [new Date("2018-01-08"), 174.350006],
  [new Date("2018-01-09"), 174.550003],
  [new Date("2018-01-10"), 173.160004],
  [new Date("2018-01-11"), 174.589996],
  [new Date("2018-01-12"), 176.179993],
  [new Date("2018-01-16"), 177.899994],
  [new Date("2018-01-17"), 176.149994],
  [new Date("2018-01-18"), 179.369995],
  [new Date("2018-01-19"), 178.610001],
  [new Date("2018-01-22"), 177.300003],
  [new Date("2018-01-23"), 177.300003],
  [new Date("2018-01-24"), 177.250000],
  [new Date("2018-01-25"), 174.509995],
  [new Date("2018-01-26"), 172.000000],
  [new Date("2018-01-29"), 170.160004],
  [new Date("2018-01-30"), 165.529999],
  [new Date("2018-01-31"), 166.869995],
  [new Date("2018-02-01"), 167.169998],
  [new Date("2018-02-02"), 166.000000],
  [new Date("2018-02-05"), 159.100006],
  [new Date("2018-02-06"), 154.830002],
  [new Date("2018-02-07"), 163.089996],
  [new Date("2018-02-08"), 160.289993],
  [new Date("2018-02-09"), 157.070007],
  [new Date("2018-02-12"), 158.500000],
  [new Date("2018-02-13"), 161.949997],
  [new Date("2018-02-14"), 163.039993],
  [new Date("2018-02-15"), 169.789993],
  [new Date("2018-02-16"), 172.360001],
  [new Date("2018-02-20"), 172.050003],
  [new Date("2018-02-21"), 172.830002],
  [new Date("2018-02-22"), 171.800003],
  [new Date("2018-02-23"), 173.669998],
  [new Date("2018-02-26"), 176.350006],
  [new Date("2018-02-27"), 179.100006],
  [new Date("2018-02-28"), 179.259995]
];

const matrix = [
  ["Jacob", "Olivia"],
  ["Mia", "Noah"],
  ["Noah", "Ava"],
  ["Ava", "Mason"],
  ["Olivia", "Noah"],
  ["Jacob", "Emma"],
  ["Ava", "Noah"],
  ["Noah", "Jacob"],
  ["Olivia", "Ava"],
  ["Mason", "Emma"],
  ["Jacob", "Mia"],
  ["Mia", "Jacob"],
  ["Emma", "Jacob"]
];

const gene = "AAAAGAGTGAAGATGCTGGAGACGAGTGAAGCATTCACTTTAGGGAAAGCGAGGCAAGAGCGTTTCAGAAGACGAAACCTGGTAGGTGCACTCACCACAG";
```

--------------------------------

### Vue Component Setup with Plot Imports

Source: https://github.com/observablehq/plot/blob/main/docs/features/projections.md

Sets up a Vue component, importing necessary libraries like Plot, D3, and TopoJSON. It initializes reactive state for plot elements and data.

```javascript
import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import * as topojson from "topojson-client";
import {computed, ref, shallowRef, onMounted} from "vue";
```

--------------------------------

### Basic DodgeY Transform Example

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/dodge.md

Demonstrates the basic usage of the dodgeY transform, which piles marks vertically along the x-axis.

```javascript
Plot.dodgeY({x: "date"})
```

--------------------------------

### One-Dimensional Binning with Dot Marks

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/bin.md

Use binX to generate an x-channel for one-dimensional binning. This example visualizes the count of athletes by weight using dot marks.

```js
Plot.plot({
  r: {range: [0, 14]},
  marks: [
    Plot.dot(olympians, Plot.binX({r: "count"}, {x: "weight"}))
  ]
})
```

--------------------------------

### Configure band scale with integer domain

Source: https://github.com/observablehq/plot/blob/main/docs/features/scales.md

Example of a band scale using a range of integers, which triggers specific default tick formatting for years.

```js
Plot.plot({x: {type: "band", domain: d3.range(1992, 2003), grid: true}})
```

--------------------------------

### ShiftY transform example

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/shift.md

Demonstrates the basic usage of the shiftY transform to derive a y1 channel by shifting the y channel by a specified interval.

```js
Plot.shiftY("7 days", {y: "Date", x: "Close"})
```

--------------------------------

### Select First Point Example

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/select.md

Illustrates how to use Plot.select with a named selector 'first' to target the initial data point in a series.

```javascript
Plot.select("first", {x: "Date", y: "Close"}) // selectFirst
```

--------------------------------

### Draw rules for min and max temperature

Source: https://github.com/observablehq/plot/blob/main/docs/marks/rule.md

Rules can visualize data ranges. This example uses ruleX to draw vertical rules representing the minimum and maximum temperatures for each day.

```javascript
Plot.plot({
  y: {grid: true, label: "Temperature (°C)"},
  color: {scheme: "BuRd"},
  marks: [
    Plot.ruleY([0]),
    Plot.ruleX(seattle, {x: "date", y1: "temp_min", y2: "temp_max", stroke: "temp_min"})
  ]
})
```

--------------------------------

### Importing Libraries and Data

Source: https://github.com/observablehq/plot/blob/main/docs/marks/bar.md

Imports necessary libraries like Plot and d3, along with Vue reactivity functions and various datasets. This setup is common for initializing a Plot visualization.

```javascript
import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import {ref} from "vue";
import alphabet from "../data/alphabet.ts";
import civilizations from "../data/civilizations.ts";
import hadcrut from "../data/hadcrut.ts";
import penguins from "../data/penguins.ts";
import statepop from "../data/us-state-population-2010-2019.ts";
```

--------------------------------

### Vue.js Setup with Observable Plot and D3

Source: https://github.com/observablehq/plot/blob/main/docs/marks/raster.md

Sets up a Vue.js component with imports for Observable Plot, D3.js, and local data. It initializes reactive references for data loading and defines a grid structure.

```javascript
import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import {shallowRef, onMounted} from "vue";
import penguins from "../data/penguins.ts";
import volcano from "../data/volcano.ts";

const ca55 = shallowRef([]);
const vapor = shallowRef([]);
const grid = {"width": 10, "height": 10, "values": d3.cross(d3.range(10), d3.range(10), (x, y) => x * y)};

onMounted(() => {
  d3.csv("../data/ca55-south.csv", d3.autoType).then((data) => (ca55.value = data));
  d3.text("../data/MYDAL2_M_SKY_WV_2022-11-01_rgb_360x180.csv").then((text) => (vapor.value = d3.csvParseRows(text).flat().map((x) => (x === "99999.0" ? NaN : +x))));
});

```

--------------------------------

### Configure geo mark with temporal faceting

Source: https://github.com/observablehq/plot/blob/main/docs/marks/geo.md

Example of using the interval scale option to bin temporal data into facets by decade within a geo mark configuration.

```js
  padding: 0,
  projection: "albers",
  fy: {interval: "10 years"},
  marks: [
    Plot.geo(statemesh, {strokeOpacity: 0.2}),
    Plot.geo(nation),
    Plot.geo(walmarts, {fy: "date", r: 1.5, fill: "blue", tip: true, title: "date"}),
    Plot.axisFy({frameAnchor: "top", dy: 30, tickFormat: (d) => `${d.getUTCFullYear()}’s`})
  ]
})
```

--------------------------------

### Creating a normalize map method

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/normalize.md

Returns a normalize map method for the given basis, suitable for use with the map transform. This example uses 'first' as the basis for normalization.

```javascript
Plot.map({y: Plot.normalize("first")}, {x: "Date", y: "Close", stroke: "Symbol"})
```

--------------------------------

### BoxY Mark Example

Source: https://github.com/observablehq/plot/blob/main/docs/marks/box.md

Example usage of the boxY mark with an array of numbers, where the y-option defaults to the identity function.

```javascript
Plot.boxY(simpsons.map((d) => d.imdb_rating))
```

--------------------------------

### Initialize Data Loading and Processing

Source: https://github.com/observablehq/plot/blob/main/docs/marks/vector.md

Sets up reactive state for wind and US geographic data, fetching external CSV and JSON files on component mount.

```javascript
<script setup>

import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import * as topojson from "topojson-client";
import {computed, shallowRef, onMounted} from "vue";
import {poisson} from "../components/poisson.js";
import {octave, perlin2} from "../components/perlin.js";

const noise = octave(perlin2, 2);
const wind = shallowRef([{longitude: -9.875, latitude: 45.125}, {longitude: 9.875, latitude: 59.875}, {u: 0, v: 0}, {u: 0, v: 12.184501776503668}]);
const us = shallowRef(null);
const nation = computed(() => us.value ? topojson.mesh(us.value, us.value.objects.nation) : {type: null});
const statemesh = computed(() => us.value ? topojson.mesh(us.value, us.value.objects.states, (a, b) => a !== b) : {type: null});
const counties = computed(() => us.value ? topojson.feature(us.value, us.value.objects.counties).features : []);

onMounted(() => {
  d3.csv("../data/wind.csv", d3.autoType).then((data) => (wind.value = data));
  Promise.all([
    d3.json("../data/us-counties-10m.json"),
    d3.csv("../data/us-county-population.csv"),
    d3.csv("../data/us-presidential-election-2020.csv")
  ]).then(([_us, _population, _election]) => {
    const population = new Map(_population.map((d) => [d.state + d.county, +d.population]));
    const election = new Map(_election.map((d) => [d.fips, d]));
    for (const g of _us.objects.counties.geometries) {
      g.properties.population = population.get(g.id);
      const e = election.get(g.id);
      if (e) {
        g.properties.margin2020 = +e.margin2020;
        g.properties.votes = +e.votes;
      }
    }
    us.value = _us;
  });
});

</script>
```

--------------------------------

### BoxX Mark Example

Source: https://github.com/observablehq/plot/blob/main/docs/marks/box.md

Example usage of the boxX mark with an array of numbers, where the x-option defaults to the identity function.

```javascript
Plot.boxX(simpsons.map((d) => d.imdb_rating))
```

--------------------------------

### Create a Tip Mark with Data and Options

Source: https://github.com/observablehq/plot/blob/main/docs/marks/tip.md

This is the basic constructor for the tip mark. Pass your data and desired options to create a tip instance.

```javascript
Plot.tip(aapl, {x: "Date", y: "Close"})
```

--------------------------------

### Install macOS Dependencies for node-canvas

Source: https://github.com/observablehq/plot/blob/main/CONTRIBUTING.md

If you encounter issues compiling node-canvas from source on macOS, use Homebrew to install the necessary dependencies.

```bash
brew install pkg-config cairo pango libpng jpeg giflib librsvg
```

--------------------------------

### Vue Setup with Plot Imports

Source: https://github.com/observablehq/plot/blob/main/docs/marks/dot.md

Sets up a Vue component with necessary imports from Observable Plot, D3, TopoJSON, and local data files. Includes reactive and computed properties for managing data and state.

```javascript
import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import * as topojson from "topojson-client";
import {computed, ref, shallowRef, onMounted} from "vue";
import alphabet from "../data/alphabet.ts";
import cars from "../data/cars.ts";
import penguins from "../data/penguins.ts";

const sorted = ref(true);
const aapl = shallowRef([]);
const congress = shallowRef([]);
const diamonds = shallowRef([]);
const gistemp = shallowRef([{Date: new Date("1880-01-01"), Anomaly: -0.78}, {Date: new Date("2016-12-01"), Anomaly: 1.35}]);
const stateage = shallowRef([]);
const us = shallowRef(null);
const statemesh = computed(() => us.value ? topojson.mesh(us.value, us.value.objects.states) : {type: null});
const counties = computed(() => us.value ? topojson.feature(us.value, us.value.objects.counties).features : []);

const xy = Plot.normalizeX({basis: "sum", z: "state", x: "population", y: "state"});

onMounted(() => {
  d3.csv("../data/aapl.csv", d3.autoType).then((data) => (aapl.value = data));
  d3.csv("../data/us-congress-2023.csv", d3.autoType).then((data) => (congress.value = data));
  d3.csv("../data/diamonds.csv", d3.autoType).then((data) => (diamonds.value = data));
  d3.csv("../data/gistemp.csv", d3.autoType).then((data) => (gistemp.value = data));
  Promise.all([
    d3.json("../data/us-counties-10m.json"),
    d3.csv("../data/us-county-population.csv")
  ]).then(([_us, _population]) => {
    const map = new Map(_population.map((d) => [d.state + d.county, +d.population]));
    _us.objects.counties.geometries.forEach((g) => (g.properties.population = map.get(g.id)));
    us.value = _us;
  });
  d3.csv("../data/us-population-state-age.csv", d3.autoType).then((data) => {
    const ages = data.columns.slice(1); // convert wide data to tidy data
    stateage.value = Object.assign(ages.flatMap((age) => data.map((d) => ({state: d.name, age, population: d[age]}))), {ages});
  });
});
```

--------------------------------

### Node.js Server-Side Rendering (PNG)

Source: https://github.com/observablehq/plot/blob/main/docs/getting-started.md

Example of rasterizing an SVG plot to PNG in Node.js using the 'sharp' library. This follows the server-side SVG generation example.

```js
process.stdout.write(await sharp(Buffer.from(plot.outerHTML, "utf-8")).png().toBuffer());
```

--------------------------------

### Initialize Data and State for Observable Plot

Source: https://github.com/observablehq/plot/blob/main/docs/marks/rect.md

Sets up reactive references for datasets and fetches external files on component mount using d3-fetch.

```javascript
<script setup>

import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import * as topojson from "topojson-client";
import {computed, ref, shallowRef, onMounted} from "vue";

const r = ref(4);
const diamonds = shallowRef([]);
const seattle = shallowRef([]);
const olympians = shallowRef([{weight: 31, height: 1.21, sex: "female"}, {weight: 170, height: 2.21, sex: "male"}]);
const povcalnet = shallowRef([]);
const us = shallowRef(null);
const counties = computed(() => us.value ? topojson.feature(us.value, us.value.objects.counties).features : []);
const countyboxes = computed(() => counties.value.map((d) => d3.geoBounds(d).flat()));
const bins = d3.bin()(d3.range(1000).map(d3.randomNormal.source(d3.randomLcg(42))()));

onMounted(() => {
  d3.csv("../data/athletes.csv", d3.autoType).then((data) => (olympians.value = data));
  d3.csv("../data/diamonds.csv", d3.autoType).then((data) => (diamonds.value = data));
  d3.csv("../data/seattle-weather.csv", d3.autoType).then((data) => (seattle.value = data));
  d3.csv("../data/povcalnet.csv", d3.autoType).then((data) => (povcalnet.value = data));
  d3.json("../data/us-counties-10m.json").then((data) => (us.value = data));
});

</script>
```

--------------------------------

### Vue Setup with Plot Imports

Source: https://github.com/observablehq/plot/blob/main/docs/features/scales.md

Sets up a Vue component with necessary imports from Observable Plot, D3, Vue, and local data files. It initializes reactive references for plot configurations and data loading.

```javascript
<script setup>

import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import {ref, shallowRef, onMounted} from "vue";
import gistemp from "../data/gistemp.ts";

const intervaled = ref(true);
const padding = ref(0.1);
const align = ref(0.5);
const radius = ref(8);
const schemeq = ref("turbo");
const schemed = ref("rdbu");
const schemeo = ref("Observable10");
const interpolateq = ref("rgb");
const anomaly = gistemp.map((d) => d.Anomaly);
const aapl = shallowRef([]);
const goog = shallowRef([]);
const sftemp = shallowRef([]);

onMounted(() => {
  d3.csv("../data/aapl.csv", d3.autoType).then((data) => (aapl.value = data));
  d3.csv("../data/goog.csv", d3.autoType).then((data) => (goog.value = data));
  d3.csv("../data/sf-temperatures.csv", d3.autoType).then((data) => (sftemp.value = data));
});

</script>
```

--------------------------------

### Labeling Start and End of Line Series

Source: https://github.com/observablehq/plot/blob/main/docs/marks/text.md

Label the start and end points of multiple line series to distinguish them, especially in time-series data. Uses `Plot.selectFirst` to target specific points. Requires the `travelers` dataset.

```js
Plot.plot({
  y: {
    grid: true,
    label: "Travelers per day (millions)",
    transform: (d) => d / 1e6 // convert to millions
  },
  marks: [
    Plot.ruleY([0]),
    Plot.line(travelers, {x: "date", y: "previous", strokeOpacity: 0.5}),
    Plot.line(travelers, {x: "date", y: "current"}),
    Plot.text(travelers, Plot.selectFirst({x: "date", y: "previous", text: ["2019"], fillOpacity: 0.5, lineAnchor: "bottom", dy: -6})),
    Plot.text(travelers, Plot.selectFirst({x: "date", y: "current", text: ["2020"], lineAnchor: "top", dy: 6}))
  ]
})
```

--------------------------------

### Create a basic grid

Source: https://github.com/observablehq/plot/blob/main/docs/marks/grid.md

Generate a default grid for a linear scale.

```js
Plot.gridX().plot({x: {type: "linear"}})
```

--------------------------------

### Display data structure

Source: https://github.com/observablehq/plot/blob/main/docs/marks/tree.md

Shows the format of the hierarchical data used in the tree examples.

```js-vue
gods = {{JSON.stringify(gods, null, 2)}}
```

--------------------------------

### Defining a tidy data array

Source: https://github.com/observablehq/plot/blob/main/docs/features/marks.md

Example of an array of objects where each object represents a row of observations.

```js
linedata = [
  {hour: 0, value: 8, sensor: "A"},
  {hour: 0, value: 6, sensor: "B"},
  {hour: 1, value: 7, sensor: "A"},
  {hour: 1, value: 5, sensor: "B"},
  {hour: 2, value: 3, sensor: "A"},
  {hour: 2, value: 0, sensor: "B"},
  {hour: 3, value: 9, sensor: "A"},
  {hour: 3, value: 2, sensor: "B"}
]
```

--------------------------------

### Applying Different Reducers with Window Transform

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/window.md

Shows how to use the 'reduce' option to compute different summary statistics within the moving window, such as minimum, maximum, and median, in addition to the default mean.

```javascript
Plot.plot({
  y: {
    grid: true,
    label: "Temperature (°F)"
  },
marks: [
    Plot.lineY(sftemp, {x: "date", y: "low", strokeOpacity: 0.3}),
    Plot.lineY(sftemp, Plot.windowY({k: 28, reduce: "min"}, {x: "date", y: "low", stroke: "blue"})),
    Plot.lineY(sftemp, Plot.windowY({k: 28, reduce: "max"}, {x: "date", y: "low", stroke: "red"})),
    Plot.lineY(sftemp, Plot.windowY({k: 28, reduce: "median"}, {x: "date", y: "low"}))
  ]
})
```

--------------------------------

### Bollinger Mark Overview

Source: https://github.com/observablehq/plot/blob/main/docs/marks/bollinger.md

Demonstrates the basic usage of the bollingerY mark with interactive controls for window size (n) and radius (k).

```APIDOC
## Bollinger Mark

### Description
The **bollinger mark** is a composite mark consisting of a line representing a moving average and an area representing volatility as a band. The band thickness is proportional to the deviation of nearby values. It is often used to analyze the price of financial instruments.

### Method
`Plot.bollingerY(data, options)`

### Endpoint
N/A (Client-side JavaScript library)

### Parameters
#### Options
- **n** (integer) - The window size for the moving average. Defaults to 20.
- **k** (number) - The band radius, representing a multiple of standard deviations. Defaults to 2.
- **color** (string) - The fill color of the area and the stroke color of the line. Defaults to `currentColor`.
- **opacity** (number) - The fill opacity of the area. Defaults to 0.2.
- **fill** (string) - The fill color of the area. Defaults to `color`.
- **fillOpacity** (number) - The fill opacity of the area. Defaults to `opacity`.
- **stroke** (string) - The stroke color of the line. Defaults to `color`.
- **strokeOpacity** (number) - The stroke opacity of the line. Defaults to 1.
- **strokeWidth** (number) - The stroke width of the line in pixels. Defaults to 1.5.

Additional options are passed to the underlying line mark, area mark, and window transform.

### Request Example
```js
// Using interactive Vue components for n and k
Plot.bollingerY(aapl, {x: "Date", y: "Close", n, k}).plot()
```

### Response
#### Success Response (200)
Returns a Plot mark object representing the Bollinger bands.

#### Response Example
```json
// No direct JSON response, returns a Plot mark object for rendering.
```
```

--------------------------------

### Hierarchical Data Example

Source: https://github.com/observablehq/plot/blob/main/docs/marks/link.md

An array of strings representing a hierarchy, used in conjunction with tree and link marks.

```js
gods = [
  "Chaos/Gaia/Mountains",
  "Chaos/Gaia/Pontus",
  "Chaos/Gaia/Uranus",
  "Chaos/Eros",
  "Chaos/Erebus",
  "Chaos/Tartarus"
]
```

--------------------------------

### Define a grid object

Source: https://github.com/observablehq/plot/blob/main/docs/marks/contour.md

Example of a row-major order grid structure used for contour and text marks.

```js
grid = ({
  "width": 10,
  "height": 10,
  "values": [
     0,  0,  0,  0,  0,  0,  0,  0,  0,  0,
     0,  1,  2,  3,  4,  5,  6,  7,  8,  9,
     0,  2,  4,  6,  8, 10, 12, 14, 16, 18,
     0,  3,  6,  9, 12, 15, 18, 21, 24, 27,
     0,  4,  8, 12, 16, 20, 24, 28, 32, 36,
     0,  5, 10, 15, 20, 25, 30, 35, 40, 45,
     0,  6, 12, 18, 24, 30, 36, 42, 48, 54,
     0,  7, 14, 21, 28, 35, 42, 49, 56, 63,
     0,  8, 16, 24, 32, 40, 48, 56, 64, 72,
     0,  9, 18, 27, 36, 45, 54, 63, 72, 81
  ]
})
```

--------------------------------

### Configure hexgrid options

Source: https://github.com/observablehq/plot/blob/main/docs/marks/hexgrid.md

Initializes a hexgrid mark with custom stroke styling.

```js
Plot.hexgrid({stroke: "red"})
```

--------------------------------

### Initialize Observable Plot and Vue Data

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/hexbin.md

Imports necessary libraries and sets up reactive state for data visualization.

```javascript
<script setup>

import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
import * as topojson from "topojson-client";
import {computed, ref, watchEffect, shallowRef, onMounted} from "vue";
import cars from "../data/cars.ts";

const binWidth = ref(20);
const olympians = shallowRef([{weight: 31, height: 1.21, sex: "female"}, {weight: 170, height: 2.21, sex: "male"}]);
const walmarts = shallowRef([]);
const us = shallowRef(null);
const nation = computed(() => us.value ? topojson.feature(us.value, us.value.objects.nation) : {type: null});
const statemesh = computed(() => us.value ? topojson.mesh(us.value, us.value.objects.states, (a, b) => a !== b) : {type: null});

const scheme = Plot.scale({color: {type: "categorical"}}).range;

onMounted(() => {
  d3.csv("../data/athletes.csv", d3.autoType).then((data) => (olympians.value = data));
  d3.tsv("../data/walmarts.tsv", d3.autoType).then((data) => (walmarts.value = data));
  d3.json("../data/us-counties-10m.json").then((data) => (us.value = data));
});

</script>
```

--------------------------------

### Display dense scatter and rule plots

Source: https://github.com/observablehq/plot/blob/main/docs/transforms/dodge.md

Examples of standard dot and rule marks without the dodge transform.

```js
Plot.dotX(cars, {x: "weight (lb)"}).plot()
```

```js
Plot.ruleX(cars, {x: "weight (lb)"}).plot()
```

--------------------------------

### Basic Density Plot

Source: https://github.com/observablehq/plot/blob/main/docs/marks/density.md

A simple example of creating a density plot using the Plot.density mark with x and y channels.

```APIDOC
## Basic Density Plot

### Description
This example demonstrates a basic density plot using the Plot.density mark, mapping 'flipper_length_mm' to the x-axis and 'culmen_length_mm' to the y-axis.

### Method
Plot.density

### Endpoint
N/A (Client-side JavaScript)

### Request Example
```js
Plot.plot({
  marks: [
    Plot.density(penguins, {fx: "island", x: "flipper_length_mm", y: "culmen_length_mm", stroke: "density", clip: true}),
    Plot.frame()
  ]
})
```
```

--------------------------------

### boxY Function Signature

Source: https://github.com/observablehq/plot/blob/main/docs/marks/box.md

Signature and basic usage example for the boxY function, which creates vertical box plots.

```APIDOC
## `boxY(data, options)`

### Description
Returns a vertical box mark. If the `y` option is not specified, it defaults to the identity function (useful when `data` is an array of numbers). If the `x` option is not specified, it defaults to `null`. If `x` is specified, it should represent an ordinal (discrete) value.

### Parameters
- **data** (any) - The input data for the box plot. Can be an array of numbers or an array of objects.
- **options** (object) - Configuration options for the box mark, including `x` and `y` mappings, and appearance options.

### Example
```javascript
Plot.boxY(simpsons.map((d) => d.imdb_rating))
```
```

--------------------------------

### boxX Function Signature

Source: https://github.com/observablehq/plot/blob/main/docs/marks/box.md

Signature and basic usage example for the boxX function, which creates horizontal box plots.

```APIDOC
## `boxX(data, options)`

### Description
Returns a horizontal box mark. If the `x` option is not specified, it defaults to the identity function (useful when `data` is an array of numbers). If the `y` option is not specified, it defaults to `null`. If `y` is specified, it should represent an ordinal (discrete) value.

### Parameters
- **data** (any) - The input data for the box plot. Can be an array of numbers or an array of objects.
- **options** (object) - Configuration options for the box mark, including `x` and `y` mappings, and appearance options.

### Example
```javascript
Plot.boxX(simpsons.map((d) => d.imdb_rating))
```
```

--------------------------------

### Auto Mark with Faceting (fx, fy)

Source: https://github.com/observablehq/plot/blob/main/docs/marks/auto.md

Demonstrates the use of 'fx' and 'fy' channels for faceting the auto mark, allowing for the creation of grid-based visualizations. This example uses penguin data faceted by island and species.

```APIDOC
## DELETE /api/users/{userId}

### Description
Deletes a specific user account.

### Method
DELETE

### Endpoint
/api/users/{userId}

### Parameters
#### Path Parameters
- **userId** (string) - Required - The unique identifier of the user to delete.

### Response
#### Success Response (200)
- **message** (string) - A confirmation message indicating the deletion was successful.

#### Response Example
```json
{
  "message": "User account deleted successfully."
}
```
```

--------------------------------

### Timeseries Data for Bar/Rect Charts

Source: https://github.com/observablehq/plot/blob/main/docs/features/marks.md

The underlying data for the missing bar example, showing years and population counts.

```javascript
timeseries = [
  {year: 2014, population: 7295.290765},
  {year: 2015, population: 7379.797139},
  {year: 2016, population: 7464.022049},
  {year: 2017, population: 7547.858925},
  {year: 2019, population: 7713.468100},
  {year: 2020, population: 7794.798739}
]
```