### Installing Reaviz via npm

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/getting-started/setup.mdx

This command installs the `reaviz` charting library from npm and saves it as a dependency in your project. It's the first step to integrate `reaviz` for creating charts.

```sh
npm install reaviz --save
```

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

### Creating a Basic Heatmap with REAVIZ (React)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/heatmap.mdx

This snippet demonstrates how to create a basic heatmap using the `Heatmap` component from `reaviz`. It initializes a dataset representing correlations between 'Lateral Movement'/'Discovery' and 'XML'/'JSON'/'HTTPS', then renders the `Heatmap` component with specified height, width, and the prepared data. This example showcases the minimal setup required to get a heatmap running.

```TypeScript
import { Heatmap } from 'reaviz';

export default function App() {
  const data = [
    {
      key: 'Lateral Movement',
      data: [
        {
          key: 'XML',
          data: 0
        },
        {
          key: 'JSON',
          data: 120
        },
        {
          key: 'HTTPS',
          data: 150
        }
      ]
    },
    {
      key: 'Discovery',
      data: [
        {
          key: 'XML',
          data: 100
        },
        {
          key: 'JSON',
          data: 34
        },
        {
          key: 'HTTPS',
          data: 0
        }
      ]
    }
  ];

  return (
    <Heatmap
      height={350}
      width={350}
      data={data}
    />
  );
}
```

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

### Installing Reaviz Project Dependencies (Shell)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/getting-started/developing.mdx

Navigates to the project directory and installs all necessary Node.js dependencies. This command ensures that all packages listed in the project's package.json file are available for development and building.

```shell
npm install
```

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

### Initializing a Basic Reaviz Bubble Chart (React)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/bubble-chart.mdx

This example demonstrates the minimal setup required to render a Reaviz Bubble Chart. It imports the `BubbleChart` component and provides it with `height`, `width`, and a simple `data` array, where each object contains a `key` and a numerical `data` value. This quickly visualizes three dimensions of data.

```React
import { BubbleChart } from 'reaviz';

export default function App() {
  return (
    <BubbleChart
      height={300}
      width={300}
      data={[
        { key: 'AWS', data: 13 },
        { key: 'SendGrid', data: 7 },
        { key: 'Okta', data: 15 }
      ]}
    />
  );
}
```

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

### Starting Reaviz Development Server (Shell)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/getting-started/developing.mdx

Initiates the local development server for the Reaviz project, which typically opens Storybook in the browser. This allows developers to tweak charts and see real-time updates during development.

```shell
npm start
```

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

### Creating a Basic Bar Chart with REAVIZ in React

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/bar-chart.mdx

This snippet demonstrates how to quickly set up a basic vertical bar chart using the `BarChart` component from `reaviz`. It imports the component, defines a simple dataset with `key` and `data` properties, and renders the chart with specified `height` and `width`. This example illustrates the minimal setup required to visualize categorical data.

```tsx
import { BarChart } from 'reaviz';

export default function App() {
  return (
    <BarChart
      height={300}
      width={300}
      data={[
        { key: 'DLP', data: 13 },
        { key: 'SIEM', data: 2 },
        { key: 'Endpoint', data: 7 }
      ]}
    />
  );
}
```

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

### Importing Documentation Components (TypeScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/brush.mdx

This snippet imports necessary components for building the documentation page itself, including `PropsTable` for displaying component properties, `Meta` for Storybook integration, `ToggleCanvas` for interactive story previews, and `Stories` containing actual component examples.

```TypeScript
import { PropsTable } from '@/components/ui/props-table';
import { Meta } from '@storybook/blocks';
import { ToggleCanvas } from '@/components/ui/toggle-canvas';
import * as Stories from '../../../stories/components/Brush.story.tsx';
```

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

### Quick Start: Initializing a REAVIZ Choropleth Map with Markers (React/TypeScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/map.mdx

This snippet demonstrates how to quickly set up a Choropleth Map in REAVIZ. It requires `topojson-client` and `world-atlas` for geographic data. The example initializes a `Map` component with world data and adds `MapMarker` components using longitude and latitude coordinates, optionally including tooltips for interactivity.

```TypeScript
import { Map, MapMarker } from 'reaviz';
import { feature } from 'topojson-client';
import geojson from 'world-atlas/countries-110m.json';

const worldData = feature(geojson, geojson.objects.countries);

export default function App() {
  return (
    <Map
      data={worldData}
      height={350}
      width={400}
      markers={[
        <MapMarker coordinates={[-122.490402, 37.786453]} />,
        <MapMarker coordinates={[-58.3816, -34.6037]} />,
        <MapMarker coordinates={[-97.7437, 30.2711]} tooltip="Austin, TX" />
      ]}
    />
  );
}
```

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

### Importing Documentation Components - TypeScript

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/grid-lines.mdx

This snippet imports necessary components for building a documentation page, including `PropsTable` for displaying component properties, `Stories` for Storybook examples, `Meta` for Storybook metadata, and `ToggleCanvas` for interactive canvas toggling.

```TypeScript
import { PropsTable } from '@/components/ui/props-table';
import * as Stories from '../../../stories/components/AreaChartGridLines.story.tsx';
import { Meta } from '@storybook/blocks';
import { ToggleCanvas } from '@/components/ui/toggle-canvas';
```

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

### Importing REAVIZ Value Marker Dependencies

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/value-marker.mdx

This snippet imports necessary components and Storybook stories for demonstrating and documenting the REAVIZ Value Marker. It includes `PropsTable` for API documentation, `Stories` for examples, `Meta` for Storybook metadata, and `ToggleCanvas` for interactive story rendering.

```TypeScript
import { PropsTable } from '@/components/ui/props-table';
import * as Stories from '../../../stories/components/AreaChartMarkers.story.tsx';
import { Meta } from '@storybook/blocks';
import { ToggleCanvas } from '@/components/ui/toggle-canvas';
```

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

### Displaying Stacked Area Chart Examples with Tabs

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/blocks/charts/area-chart.mdx

This JSX snippet illustrates how to present stacked area chart examples in different sizes (XSmall, Small, Medium, Large) using a tabbed layout. Each tab's `BlockCanvas` component is configured to load the corresponding light and dark mode stories for stacked area charts, showcasing cumulative data.

```JSX
<Tabs className="mt-4" size="small">
  <TabList>
    <Tab>XSmall</Tab>
    <Tab>Small</Tab>
    <Tab>Medium</Tab>
    <Tab>Large</Tab>
  </TabList>
  <TabPanel>
    <BlockCanvas
      lightStory={XsLightStories.Stacked}
      darkStory={XsDarkStories.Stacked}
      lightMeta={XsLightStories}
      darkMeta={XsDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={SmLightStories.Stacked}
      darkStory={SmDarkStories.Stacked}
      lightMeta={SmLightStories}
      darkMeta={SmDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={MdLightStories.Stacked}
      darkStory={MdDarkStories.Stacked}
      lightMeta={MdLightStories}
      darkMeta={MdDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={LgLightStories.Stacked}
      darkStory={MdDarkStories.Stacked}
      lightMeta={LgLightStories}
      darkMeta={LgDarkStories}
    />
  </TabPanel>
</Tabs>
```

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

### Creating a Basic Scatter Plot with Reaviz in React

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/scatter-plot.mdx

This snippet demonstrates how to quickly create a basic Scatter Plot using the `ScatterPlot` component from the `reaviz` library within a React application. It initializes a scatter plot with fixed dimensions and sample time-series data, where `key` represents dates and `data` represents numerical values. This example shows the minimal setup required to render a scatter plot.

```JavaScript
import { ScatterPlot } from 'reaviz';

export default function App() {
  return (
    <ScatterPlot
      height={300}
      width={300}
      data={[
        { key: new Date('11/29/2019'), data: 7 },
        { key: new Date('11/30/2019'), data: 5 },
        { key: new Date('12/1/2019'), data: 10 },
        { key: new Date('12/2/2019'), data: 9 },
        { key: new Date('12/3/2019'), data: 12 }
      ]}
    />
  );
}
```

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

### Creating a Basic Pie Chart in REAVIZ (React/TypeScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/pie-chart.mdx

This snippet demonstrates how to create a basic Pie Chart using the `PieChart` component from the `reaviz` library. It sets the chart's dimensions and provides sample data, where each object represents a slice with a `key` and a numerical `data` value. This example shows a simple part-to-whole visualization.

```TypeScript
import { PieChart } from 'reaviz';

export default function App() {
  return (
    <PieChart
      height={300}
      width={300}
      data={[
        { key: 'Bacon', data: 13 },
        { key: 'Eggs', data: 8 },
        { key: 'Cheese', data: 17 },
      ]}
    />
  );
}
```

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

### Displaying Simple Radial Axis Storybook Example

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/axis.mdx

This snippet demonstrates a basic `RadialAxis` example using Storybook's `Meta` and `ToggleCanvas` components. It references the `Simple` story from `RadialAxisStories` to display a straightforward radial axis.

```JSX
<Meta of={RadialAxisStories} />
<ToggleCanvas of={RadialAxisStories.Simple} storybook="utils-axis-radial--simple" />
```

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

### Displaying Linear Value Marker Example in Storybook

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/value-marker.mdx

This JSX snippet integrates the `LinearValueMarkers` story into a Storybook canvas, allowing interactive viewing and testing of the Linear Value Marker component. It uses `Meta` to link to the overall stories and `ToggleCanvas` to render the specific example.

```JSX
<Meta of={Stories} />
<ToggleCanvas of={Stories.LinearValueMarkers} storybook="charts-area-chart-markers--linear-value-markers" />
```

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

### Integrating Storybook Examples - JSX

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/grid-lines.mdx

This snippet demonstrates how to integrate Storybook stories into a documentation page using the `Meta` component to link to all stories and `ToggleCanvas` to display a specific story (`YAxis`) with an associated Storybook URL.

```JSX
<Meta of={Stories} />
<ToggleCanvas of={Stories.YAxis} storybook="charts-area-chart-gridlines--y-axis" />
```

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

### Quick Start - Animating Count with Reaviz - React

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/count.mdx

This snippet demonstrates how to quickly get started with the Reaviz `Count` component. It imports the `Count` component and renders it within a React functional component, animating a count from 0 to 50. This is useful for displaying dynamic numerical values with a visual animation.

```React
import { Count } from 'reaviz';

export default function App() {
  return (
    <Count
      from={0}
      to={50}
    />
  );
}
```

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

### Initializing a Radar Chart in REAVIZ with React

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/radar.mdx

This snippet demonstrates how to quickly set up and render a `RadarChart` component from the `reaviz` library. It defines a sample dataset with multiple categories and sub-data points, then renders the chart with specified dimensions and the prepared data. This example is suitable for visualizing multivariate data like security metrics or performance indicators.

```TypeScript
import { RadarChart } from 'reaviz';

export default function App() {
  const data = [
    {
      key: 'Lateral Movement',
      data: [
        {
          key: 'XML',
          data: 0
        },
        {
          key: 'JSON',
          data: 120
        },
        {
          key: 'HTTPS',
          data: 150
        }
      ]
    },
    {
      key: 'Discovery',
      data: [
        {
          key: 'XML',
          data: 100
        },
        {
          key: 'JSON',
          data: 34
        },
        {
          key: 'HTTPS',
          data: 0
        }
      ]
    }
  ];

  return (
    <RadarChart
      height={400}
      width={400}
      data={data}
    />
  );
}
```

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

### Integrating Storybook Metadata (TypeScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/brush.mdx

This snippet uses the `Meta` component from `@storybook/blocks` to integrate Storybook metadata, allowing the documentation page to display information and controls related to the `Stories` module, which contains examples of the `Brush` component.

```TypeScript
<Meta of={Stories} />
```

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

### Displaying Basic Linear Axis Storybook Example

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/axis.mdx

This snippet uses Storybook's `Meta` and `ToggleCanvas` components to render a basic example of the `LinearAxis` component within the documentation. It references the `CenterAxes` story from `LinearAxisStories` to display a linear axis with centered axes.

```JSX
<Meta of={LinearAxisStories} />
<ToggleCanvas of={LinearAxisStories.CenterAxes} storybook="utils-axis-linear--center-axes" />
```

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

### Displaying Categorical Scatter Plot Examples

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/blocks/charts/scatter-plot.mdx

This section details how to render 'Categorical' scatter plots using the `BlockCanvas` component within a tabbed interface. It provides examples for various sizes (XSmall, Small, Medium, Large) and light/dark themes, demonstrating the chart's behavior and styling when data points are grouped by categories.

```JSX
<Tabs className="mt-4" size="small">
  <TabList>
    <Tab>XSmall</Tab>
    <Tab>Small</Tab>
    <Tab>Medium</Tab>
    <Tab>Large</Tab>
  </TabList>
  <TabPanel>
    <BlockCanvas
      lightStory={XsLightStories.Categorical}
      darkStory={XsDarkStories.Categorical}
      lightMeta={XsLightStories}
      darkMeta={XsDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={SmLightStories.Categorical}
      darkStory={SmDarkStories.Categorical}
      lightMeta={SmLightStories}
      darkMeta={SmDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={MdLightStories.Categorical}
      darkStory={MdDarkStories.Categorical}
      lightMeta={MdLightStories}
      darkMeta={MdDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={LgLightStories.Categorical}
      darkStory={MdDarkStories.Categorical}
      lightMeta={LgLightStories}
      darkMeta={LgDarkStories}
    />
  </TabPanel>
</Tabs>
```

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

### Displaying Radial Value Marker Example in Storybook

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/value-marker.mdx

This JSX snippet renders the `RadialValueMarkers` story within a Storybook canvas, providing an interactive demonstration of the Radial Value Marker component. It utilizes `ToggleCanvas` to display the example.

```JSX
<ToggleCanvas of={Stories.RadialValueMarkers} storybook="charts-area-chart-markers--radial-value-markers" />
```

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

### Importing REAVIZ Legend Storybook Components and Utilities - TypeScript

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/legends.mdx

This TypeScript snippet illustrates the necessary imports for setting up Storybook documentation and examples for REAVIZ legend components. It includes imports for `PropsTable` to display component properties, `Meta` and `ToggleCanvas` from Storybook for rendering stories, and specific story files for `DiscreteLegendHorizontal` and `SequentialLegendHorizontal` to showcase legend types.

```TypeScript
import { PropsTable } from '@/components/ui/props-table';
import * as DiscreteLegendHorizontalStories from '../../../stories/components/DiscreteLegendHorizontal.story.tsx';
import * as SequentialLegendHorizontalStories from '../../../stories/components/SequentialLegendHorizontal.story.tsx';
import { Meta } from '@storybook/blocks';
import { ToggleCanvas } from '@/components/ui/toggle-canvas';
```

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

### Importing Reablocks and Storybook Components

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/blocks/charts/heatmap.mdx

This snippet imports necessary UI components from 'reablocks' and Storybook for rendering interactive examples. It also imports `BlockCanvas` for displaying light and dark mode stories and various heatmap story files for different sizes and themes.

```JavaScript
import { Tabs, Tab, TabList, TabPanel } from 'reablocks';
import { Canvas, Meta } from '@storybook/blocks';
import { BlockCanvas } from '@/components/ui/block-canvas';

import * as XsLightStories from '../../../stories/blocks/HeatmapBlocksLightXSmall.story';
import * as XsDarkStories from '../../../stories/blocks/HeatmapBlocksDarkXSmall.story';

import * as SmLightStories from '../../../stories/blocks/HeatmapBlocksLightSmall.story';
import * as SmDarkStories from '../../../stories/blocks/HeatmapBlocksDarkSmall.story';

import * as MdLightStories from '../../../stories/blocks/HeatmapBlocksLightMedium.story';
import * as MdDarkStories from '../../../stories/blocks/HeatmapBlocksDarkMedium.story';

import * as LgLightStories from '../../../stories/blocks/HeatmapBlocksLightLarge.story';
import * as LgDarkStories from '../../../stories/blocks/HeatmapBlocksDarkLarge.story';
```

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

### Configuring Reaviz Chart Styles with CSS Variables

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/getting-started/setup.mdx

This HTML snippet demonstrates how to define global CSS variables within a `<style>` block to customize the default appearance of `reaviz` charts. These variables control aspects like tooltip colors, chart backgrounds, and handle styles, allowing for fine-grained visual adjustments.

```html
<style>
  body {
  --tooltip-background: rgba(0,5,11,0.9);
  --tooltip-color: #fff;
  --tooltip-border-radius: 5px;
  --tooltip-spacing: 5px;

  --chart-background: rgb(51, 51, 51);
  --chart-color: #fff;

  --chart-handle-fill: #2c343a;
  --chart-handle-stroke: #67c2e4;
  --chart-handle-drag-fill: transparent;
  --chart-handle-dots: #67c2e4;
  --chart-handle-line: #67c2e4;
  }
</style>
```

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

### Configuring Storybook Meta for Stories (TypeScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/zoom-pan.mdx

This JSX snippet uses the `Meta` component to link the current documentation page to the imported Storybook stories. The `of` prop specifies the `Stories` object, ensuring that the metadata for the component is correctly associated with its examples.

```TypeScript
<Meta of={Stories} />
```

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

### Creating a Basic Line Chart with Reaviz in React

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/line-chart.mdx

This snippet demonstrates how to quickly create a basic Line Chart using the `LineChart` component from the `reaviz` library. It shows how to import the component and pass an array of data objects, each with a `key` (Date) and `data` (numeric value), to render a simple line chart with specified height and width. This example is suitable for visualizing time-series data.

```TypeScript
import { LineChart } from 'reaviz';

export default function App() {
  return (
    <LineChart
      height={300}
      width={300}
      data={[
        { key: new Date('11/29/2019'), data: 13 },
        { key: new Date('11/30/2019'), data: 23 },
        { key: new Date('12/1/2019'), data: 7 }
      ]}
    />
  );
}
```

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

### Importing Storybook and UI Components for Documentation - TypeScript

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/gradient.mdx

Imports various components and utilities essential for constructing a Storybook documentation page. This includes `PropsTable` for displaying component properties, `Meta` for defining page metadata, and `ToggleCanvas` for rendering interactive story examples, along with story files for Linear and Radial Gradients.

```TypeScript
import { PropsTable } from '@/components/ui/props-table';
import * as LinearGradientStories from '../../../stories/components/LinearGradient.story.tsx';
import * as RadialGradientStories from '../../../stories/components/RadialGradient.story.tsx';
import { Meta } from '@storybook/blocks';
import { ToggleCanvas } from '@/components/ui/toggle-canvas';
```

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

### Displaying Simple Scatter Plot Examples

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/blocks/charts/scatter-plot.mdx

This code block demonstrates how to use the `Tabs` and `BlockCanvas` components to display various sizes (XSmall, Small, Medium, Large) of the 'Simple' scatter plot. Each `TabPanel` renders a `BlockCanvas` instance, passing the appropriate light and dark themed story and meta imports to showcase the chart's appearance across different configurations.

```JSX
<Tabs className="mt-4" size="small">
  <TabList>
    <Tab>XSmall</Tab>
    <Tab>Small</Tab>
    <Tab>Medium</Tab>
    <Tab>Large</Tab>
  </TabList>
  <TabPanel>
    <BlockCanvas
      lightStory={XsLightStories.Simple}
      darkStory={XsDarkStories.Simple}
      lightMeta={XsLightStories}
      darkMeta={XsDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={SmLightStories.Simple}
      darkStory={SmDarkStories.Simple}
      lightMeta={SmLightStories}
      darkMeta={SmDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={MdLightStories.Simple}
      darkStory={MdDarkStories.Simple}
      lightMeta={MdLightStories}
      darkMeta={MdDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={LgLightStories.Simple}
      darkStory={LgDarkStories.Simple}
      lightMeta={LgLightStories}
      darkMeta={LgDarkStories}
    />
  </TabPanel>
</Tabs>
```

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

### Displaying Linear Axis with Custom Label Rotation Storybook Example

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/axis.mdx

This snippet showcases an advanced `LinearAxis` example with custom label positioning and rotation. It utilizes `Meta` and `ToggleCanvas` to render the `CustomLabelRotation` story from `LinearAxisStories`, demonstrating flexible label configuration.

```JSX
<Meta of={LinearAxisStories} />
<ToggleCanvas of={LinearAxisStories.CustomLabelRotation} storybook="utils-axis-linear--custom-label-rotation" />
```

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

### Creating a Basic Radial Scatter Plot with REAVIZ

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/radial-scatter-plot.mdx

This example demonstrates how to create a basic Radial Scatter Plot using REAVIZ components. It imports necessary components, defines sample data with `id`, `key` (Date), and `data` fields, and renders the `RadialScatterPlot` with custom `height`, `width`, `innerRadius`, and configured `RadialScatterSeries` and `RadialAxis` components.

```TypeScript
import {
  RadialScatterPlot,
  RadialScatterSeries,
  RadialScatterPoint,
  RadialAxisTickSeries,
  RadialAxis,
  RadialAxisTick,
  RadialAxisTickLine,
  RadialAxisArcSeries
} from 'reaviz';

export default function App() {
  const data = [
    {
      id: "3",
      key: new Date("2020-02-07T08:00:00.000Z"),
      data: 39,
    },
    {
      id: "2",
      key: new Date("2020-03-01T08:00:00.000Z"),
      data: 98,
    },
    {
      id: "1",
      key: new Date("2020-03-12T08:00:00.000Z"),
      data: 17,
    }
  ];

  return (
    <RadialScatterPlot
      height={300}
      width={300}
      data={data}
      innerRadius={40}
      series={
        <RadialScatterSeries
          point={
            <RadialScatterPoint
              size={5}
              color="rgba(45, 96, 232, .8)"
            />
          }
        />
      }
      axis={
        <RadialAxis
          ticks={
            <RadialAxisTickSeries
              count={5}
              tick={
                <RadialAxisTick
                  line={<RadialAxisTickLine
                  position="inside" />}
                />
              }
            />
          }
          arcs={<RadialAxisArcSeries count={5} />}
        />
      }
    />
  );
}
```

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

### Creating a Basic Sunburst Chart with React

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/sunburst-chart.mdx

This snippet demonstrates how to import and use the `SunburstChart` component from `reaviz` to display hierarchical data. It defines a sample `heatmapSimpleData` array with two levels of hierarchy and renders the chart with specified height and width, showcasing a quick start implementation.

```TypeScript
import { SunburstChart } from 'reaviz';

export default function App() {
  const heatmapSimpleData = [
  {
    key: "Discovery",
    data: [
      {
        key: "XML",
        data: 100,
      },
      {
        key: "JSON",
        data: 34,
      },
      {
        key: "HTTPS",
        data: 16,
      },
      {
        key: "SSH",
        data: 111,
      },
    ],
  },
  {
    key: "Threat Intelligence",
    data: [
      {
        key: "XML",
        data: 14,
      },
      {
        key: "JSON",
        data: 120,
      },
      {
        key: "HTTPS",
        data: 200,
      },
      {
        key: "SSH",
        data: 160,
      },
    ],
  }
];

  return (
    <SunburstChart
      height={400}
      width={400}
      data={heatmapSimpleData}
    />
  );
}
```

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

### Using ChartTooltip with HeatmapCell in REAVIZ (JSX)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/tooltips.mdx

This example shows how to apply a ChartTooltip to a HeatmapCell component in REAVIZ. The tooltip's content is customized to format and display both the date and value of the heatmap cell data upon hovering.

```jsx
<HeatmapCell
  tooltip={
    <ChartTooltip
      content={d =>
        `${formatValue(d.data.metadata.date)} ∙ ${formatValue(
          d.data.value
        )}`
      }
    />
  }
/>
```

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

### Displaying Interactive Storybook Canvas (TypeScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/brush.mdx

This snippet utilizes the `ToggleCanvas` component to render an interactive Storybook canvas for a specific story (`Stories.Line`), enabling users to view and interact with the `Line` chart example that likely uses the `Brush` component, with a direct link to the Storybook instance.

```TypeScript
<ToggleCanvas of={Stories.Line} storybook="utils-brush--line" />
```

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

### Displaying Bubble Scatter Plot Examples

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/blocks/charts/scatter-plot.mdx

This snippet illustrates the usage of `BlockCanvas` within a `Tabs` component to present 'Bubble' scatter plots in different sizes (XSmall, Small, Medium, Large) and themes. This pattern allows for easy comparison of the chart's appearance and responsiveness across various configurations, utilizing specific Storybook stories for each variation.

```JSX
<Tabs className="mt-4" size="small">
  <TabList>
    <Tab>XSmall</Tab>
    <Tab>Small</Tab>
    <Tab>Medium</Tab>
    <Tab>Large</Tab>
  </TabList>
  <TabPanel>
    <BlockCanvas
      lightStory={XsLightStories.Bubble}
      darkStory={XsDarkStories.Bubble}
      lightMeta={XsLightStories}
      darkMeta={XsDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={SmLightStories.Bubble}
      darkStory={SmDarkStories.Bubble}
      lightMeta={SmLightStories}
      darkMeta={SmDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={MdLightStories.Bubble}
      darkStory={MdDarkStories.Bubble}
      lightMeta={MdLightStories}
      darkMeta={MdDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={LgLightStories.Bubble}
      darkStory={MdDarkStories.Bubble}
      lightMeta={LgLightStories}
      darkMeta={LgDarkStories}
    />
  </TabPanel>
</Tabs>
```

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

### Displaying Simple Area Chart Examples with Tabs

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/blocks/charts/area-chart.mdx

This JSX snippet demonstrates how to display simple area chart variations across different sizes (XSmall, Small, Medium, Large) using Reablocks' Tabs component. Each tab panel renders a `BlockCanvas` component, which in turn loads light and dark mode stories for the respective chart size.

```JSX
<Tabs className="mt-4" size="small">
  <TabList>
    <Tab>XSmall</Tab>
    <Tab>Small</Tab>
    <Tab>Medium</Tab>
    <Tab>Large</Tab>
  </TabList>
  <TabPanel>
    <BlockCanvas
      lightStory={XsLightStories.Simple}
      darkStory={XsDarkStories.Simple}
      lightMeta={XsLightStories}
      darkMeta={XsDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={SmLightStories.Simple}
      darkStory={SmDarkStories.Simple}
      lightMeta={SmLightStories}
      darkMeta={SmDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={MdLightStories.Simple}
      darkStory={MdDarkStories.Simple}
      lightMeta={MdLightStories}
      darkMeta={MdDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={LgLightStories.Simple}
      darkStory={LgDarkStories.Simple}
      lightMeta={LgLightStories}
      darkMeta={LgDarkStories}
    />
  </TabPanel>
</Tabs>
```

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

### Creating a Basic Linear Gauge in REAVIZ (React)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/linear-gauge.mdx

This snippet demonstrates how to quickly set up a basic Linear Gauge component from the `reaviz` library. It imports `LinearGauge` and renders it with specified `width`, `height`, and a single `data` object containing a `key` and a numerical `data` value. This example shows a single-series gauge displaying a 'Risk Score' of 74.

```JSX
import { LinearGauge } from 'reaviz';

export default function App() {
  return (
    <LinearGauge
      width={300}
      height={100}
      data={{ key: 'Risk Score', data: 74 }}
    />
  );
}
```

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

### Initializing a Basic REAVIZ TreeMap (React)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/tree-map.mdx

This snippet demonstrates how to create a fundamental TreeMap chart using the `TreeMap` component from the `reaviz` library. It sets up a chart with predefined dimensions (400x400) and populates it with a simple array of data objects, each containing a `key` and a `data` value. This example illustrates the basic structure for visualizing proportional hierarchical data.

```TypeScript
import { TreeMap } from 'reaviz';

export default function App() {
  return (
    <TreeMap
      height={400}
      width={400}
      data={[
        { key: 'AWS', data: 100 },
        { key: 'SendGrid', data: 45 },
        { key: 'Okta', data: 75 },
        { key: 'Twillo', data: 25 }
      ]}
    />
  );
}
```

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

### Displaying Multi Series Area Chart Examples with Tabs

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/blocks/charts/area-chart.mdx

This JSX snippet showcases multi-series area charts with smooth interpolation across various sizes (XSmall, Small, Medium, Large) using a tabbed interface. Each `BlockCanvas` instance loads specific light and dark mode stories for multi-series charts, demonstrating different data series.

```JSX
<Tabs className="mt-4" size="small">
  <TabList>
    <Tab>XSmall</Tab>
    <Tab>Small</Tab>
    <Tab>Medium</Tab>
    <Tab>Large</Tab>
  </TabList>
  <TabPanel>
    <BlockCanvas
      lightStory={XsLightStories.MultiSeriesInterpolationSmooth}
      darkStory={XsDarkStories.MultiSeriesInterpolationSmooth}
      lightMeta={XsLightStories}
      darkMeta={XsDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={SmLightStories.MultiSeriesInterpolationSmooth}
      darkStory={SmDarkStories.MultiSeriesInterpolationSmooth}
      lightMeta={SmLightStories}
      darkMeta={SmDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={MdLightStories.MultiSeriesInterpolationSmooth}
      darkStory={MdDarkStories.MultiSeriesInterpolationSmooth}
      lightMeta={MdLightStories}
      darkMeta={MdDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={LgLightStories.MultiSeriesInterpolationSmooth}
      darkStory={MdDarkStories.MultiSeriesInterpolationSmooth}
      lightMeta={LgLightStories}
      darkMeta={LgDarkStories}
    />
  </TabPanel>
</Tabs>
```

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

### Displaying Symbols Scatter Plot Examples

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/blocks/charts/scatter-plot.mdx

This code block details the implementation of `BlockCanvas` within `Tabs` to showcase 'Symbols' scatter plots across different sizes (XSmall, Small, Medium, Large) and themes. This modular approach helps in organizing and presenting diverse chart variations where data points are represented by distinct symbols.

```JSX
<Tabs className="mt-4" size="small">
  <TabList>
    <Tab>XSmall</Tab>
    <Tab>Small</Tab>
    <Tab>Medium</Tab>
    <Tab>Large</Tab>
  </TabList>
  <TabPanel>
    <BlockCanvas
      lightStory={XsLightStories.Symbols}
      darkStory={XsDarkStories.Symbols}
      lightMeta={XsLightStories}
      darkMeta={XsDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={SmLightStories.Symbols}
      darkStory={SmDarkStories.Symbols}
      lightMeta={SmLightStories}
      darkMeta={SmDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={MdLightStories.Symbols}
      darkStory={MdDarkStories.Symbols}
      lightMeta={MdLightStories}
      darkMeta={MdDarkStories}
    />
  </TabPanel>
  <TabPanel>
    <BlockCanvas
      lightStory={LgLightStories.Symbols}
      darkStory={MdDarkStories.Symbols}
      lightMeta={LgLightStories}
      darkMeta={LgDarkStories}
    />
  </TabPanel>
</Tabs>
```

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

### Initializing a Basic REAVIZ Meter Chart in React

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/meter.mdx

This snippet demonstrates the fundamental steps to create a Meter chart using the `reaviz` library. It shows how to import the `Meter` component and render it within a React application, setting a default `value` and applying inline `style` for sizing.

```TypeScript
import { Meter } from 'reaviz';

export default function App() {
  return (
    <Meter value={50} style={{ width: 300 }} />
  );
}
```

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

### Importing Nextra UI Components and Image Assets (JavaScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/blocks/index.mdx

Imports `Cards` and `Card` components from the `nextra/components` library, essential for structuring content into a card-based layout. Additionally, it imports a local image asset (`preview.png`) for use within the page's visual elements.

```JavaScript
import { Cards, Card } from 'nextra/components'

import img from '../../icons/preview.png';
```

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

### Creating a Basic Area Chart with REAVIZ (JavaScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/area-chart.mdx

This snippet demonstrates how to quickly create a basic Area Chart using the `AreaChart` component from the `reaviz` library. It shows how to import the component and pass an array of data objects, each containing a `key` (Date) and a `data` value, to render a simple area chart with specified height and width.

```JavaScript
import { AreaChart } from 'reaviz';

export default function App() {
  return (
    <AreaChart
      height={300}
      width={300}
      data={[
        { key: new Date('11/29/2019'), data: 10 },
        { key: new Date('11/30/2019'), data: 7 },
        { key: new Date('12/1/2019'), data: 14 }
      ]}
    />
  );
}
```

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

### Creating a Basic Word Cloud with Reaviz in React

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/charts/word-cloud.mdx

This snippet demonstrates how to quickly create a basic word cloud using the `WordCloud` component from the `reaviz` library. It initializes a word cloud with predefined dimensions and a dataset of key-value pairs, where `key` represents the word and `data` represents its importance, influencing size or color.

```TypeScript
import { WordCloud } from 'reaviz';

export default function App() {
  return (
    <WordCloud
      height={300}
      width={300}
      data={[
        { key: 'HTML', data: 70 },
        { key: 'CSS', data: 65 },
        { key: 'Docker', data: 40 },
        { key: 'Kubernetes', data: 35 },
        { key: 'AWS', data: 30 },
        { key: 'Git', data: 25 }
      ]}
    />
  );
}
```

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

### Building Reaviz for Distribution (Shell)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/getting-started/developing.mdx

Executes the build script to package the Reaviz project for distribution using Rollup. This command generates a 'dist' folder containing type definitions, bundled JavaScript, and CSS files, ready for deployment.

```shell
npm build
```

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

### Importing PropsTable Component - TypeScript

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/mark-line.mdx

This snippet imports the `PropsTable` component from a local path, making it available for use within the current file. `PropsTable` is likely used to render API documentation for other components.

```TypeScript
import { PropsTable } from '@/components/ui/props-table';
```

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

### Displaying Reaviz Chart Blocks using Nextra Cards (JSX)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/blocks/index.mdx

Utilizes the `Cards` component from `nextra/components` to create a grid of interactive cards. Each `Card` component represents a specific Reaviz chart block, providing a `title` for display and an `href` attribute to link to the detailed documentation page for that chart type.

```JSX
<Cards>
  <Card title="Area Chart" href="/blocks/charts/area-chart" />
  <Card title="Bar Chart" href="/blocks/charts/bar-chart" />
  <Card title="Funnel Chart" href="/blocks/charts/funnel-chart" />
  <Card title="Heatmap" href="/blocks/charts/heatmap" />
  <Card title="Scatter Plot" href="/blocks/charts/scatter-plot" />
</Cards>
```

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

### Rendering Line Chart Story with ToggleCanvas (TypeScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/zoom-pan.mdx

This JSX snippet renders a specific story, `Stories.Line`, using the `ToggleCanvas` component. The `storybook` prop provides a direct link to the story in the Storybook UI, allowing users to interact with the example in a dedicated canvas environment.

```TypeScript
<ToggleCanvas of={Stories.Line} storybook="utils-zoom-pan--line" />
```

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

### Implementing Stacked Area Chart in Reaviz v15.x.x (TSX)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/getting-started/migration-guide.mdx

This snippet demonstrates the implementation of a stacked area chart using the `AreaChart` component with a `StackedAreaSeries` in Reaviz versions prior to v16.0.0. It configures X and Y axes and customizes the line and area styles with a specific color scheme.

```tsx
<AreaChart
  data={multiDateData}
  xAxis={<LinearXAxis type="time" />}
  yAxis={<LinearYAxis />}
  series={
    <StackedAreaSeries
      line={<Line strokeWidth={3} glow={{ blur: 10 }} />}
      area={<Area glow={{ blur: 20 }} />}
      colorScheme={["#FAE5F6", "#EE4094", "#BB015A"]}
    />
  }
/>
```

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

### Example Data for Multi-Series BarChart (JavaScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/getting-started/data.mdx

This JavaScript array illustrates how to structure data using `ChartNestedDataShape` for a multi-series BarChart in REAVIZ. Each top-level object has a `key` (e.g., 'Lateral Movement') and a nested `data` array, where each item represents a sub-series with its own `key` (e.g., 'XML') and `data` value. This enables displaying grouped bars for each primary category.

```JavaScript
const data = [
  {
    key: 'Lateral Movement',
    data: [
      {
        key: 'XML',
        data: 100
      },
      {
        key: 'JSON',
        data: 120
      }
    ]
  },
  {
    key: 'Discovery',
    data: [
      {
        key: 'XML',
        data: 100
      },
      {
        key: 'JSON',
        data: 120
      }
    ]
  }
]
```

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

### Importing ZoomPan Storybook Stories (TypeScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/zoom-pan.mdx

This import statement imports all stories defined in the `ZoomPan.story.tsx` file. These stories represent different use cases and configurations of the Zoom Pan component, making them available for rendering and demonstration within the documentation or Storybook environment.

```TypeScript
import * as Stories from '../../../stories/components/ZoomPan.story.tsx';
```

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

### Displaying LinearValueMarker API Properties

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/utils/value-marker.mdx

This JSX snippet uses the `PropsTable` component to automatically generate and display the API documentation for the `LinearValueMarker` component. It helps developers understand available props and their types.

```JSX
<PropsTable name="LinearValueMarker" />
```

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

### Calculating Radial Chart Radii in Reaviz (TypeScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/getting-started/custom-charts.mdx

The getRadius function determines the inner and outer radii for radial chart components based on start and end indices and a total radius. It leverages d3's scaleLinear to map these indices to specific radial positions, ensuring consistent spacing and alignment of radial elements.

```TypeScript
export const getRadius = (startIdx, endIdx, rad) => {
  // Leveraging the d3 `scaleLinear` to determine the radius.
  const scale = scaleLinear().domain([0, ARC_COUNT]).range([INNER_RADIUS, rad]);
  const arcs = scale.ticks(ARC_COUNT);

  return {
    innerRadius: scale(arcs[startIdx]),
    outerRadius: scale(arcs[endIdx])
  };
};
```

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

### Implementing Stacked Area Chart in Reaviz v16.0.0 (TSX)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/getting-started/migration-guide.mdx

This snippet shows the updated implementation for a stacked area chart in Reaviz v16.0.0, requiring the direct use of `StackedAreaChart` instead of `AreaChart` when using `StackedAreaSeries`. It maintains similar axis and series configurations, reflecting the necessary component type change for compatibility.

```tsx
<StackedAreaChart
  data={multiDateData}
  xAxis={<LinearXAxis type="time" />}
  yAxis={<LinearYAxis />}
  series={
    <StackedAreaSeries
      line={<Line strokeWidth={3} glow={{ blur: 10 }} />}
      area={<Area glow={{ blur: 20 }} />}
      colorScheme={["#FAE5F6", "#EE4094", "#BB015A"]}
    />
  }
/>
```

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

### Importing Reablocks and Storybook Components

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/blocks/charts/funnel-chart.mdx

This snippet imports necessary UI components from 'reablocks' (Tabs, Tab, TabList, TabPanel) and Storybook utilities (Canvas, Meta) for building interactive documentation pages. It also imports a custom 'BlockCanvas' component and various Storybook stories for different Funnel Chart configurations and sizes.

```JavaScript
import { Tabs, Tab, TabList, TabPanel } from 'reablocks'
import { Canvas, Meta } from '@storybook/blocks';
import { BlockCanvas } from '@/components/ui/block-canvas'

import * as XsLightStories from '../../../stories/blocks/FunnelChartBlocksLightXSmall.story';
import * as XsDarkStories from '../../../stories/blocks/FunnelChartBlocksDarkXSmall.story';

import * as SmLightStories from '../../../stories/blocks/FunnelChartBlocksLightSmall.story';
import * as SmDarkStories from '../../../stories/blocks/FunnelChartBlocksDarkSmall.story';

import * as MdLightStories from '../../../stories/blocks/FunnelChartBlocksLightMedium.story';
import * as MdDarkStories from '../../../stories/blocks/FunnelChartBlocksDarkMedium.story';

import * as LgLightStories from '../../../stories/blocks/FunnelChartBlocksLightLarge.story';
import * as LgDarkStories from '../../../stories/blocks/FunnelChartBlocksDarkLarge.story';
```

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

### Example Data for Single-Series BarChart (JavaScript)

Source: https://github.com/reaviz/reaviz-website/blob/master/src/pages/docs/getting-started/data.mdx

This JavaScript array demonstrates how to structure data using `ChartShallowDataShape` for a single-series BarChart in REAVIZ. Each object in the array represents a single bar, with `key` defining the category (e.g., 'DLP') and `data` providing its corresponding value (e.g., 13). This simple structure is ideal for charts displaying one value per category.

```JavaScript
const data = [
  { key: 'DLP', data: 13 },
  { key: 'SIEM', data: 2 },
  { key: 'Endpoint', data: 7 }
]
```