React Graph Gallery

https://www.react-graph-gallery.com/
Admin
The React Graph Gallery provides hundreds of data visualization examples and ready-to-use templates,...
Tokens:46,571
Snippets:303
Trust Score:7.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install d3-geo for React

Source: https://www.react-graph-gallery.com/map

Command to install the d3-geo module, a crucial library for handling map projections and transforming GeoJSON coordinates for display in a React project.

```bash
npm install d3-geo
```

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

### Install GeoJSON Types for TypeScript

Source: https://www.react-graph-gallery.com/map

Command to install the necessary TypeScript types for GeoJSON data, ensuring type safety when working with GeoJSON datasets in a TypeScript React environment.

```bash
npm install --save @types/geojson
```

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

### Example Data for Stacked Area Chart

Source: https://www.react-graph-gallery.com/stacked-area-plot

A minimal example of the input data for a stacked area chart. The data is in a 'wide' format, where each object represents an X-axis step and contains values for multiple groups.

```javascript
const data = [
  {
    x: 1,
    groupA: 38,
    groupB: 19,
  },
  {
    x: 2,
    groupA: 16,
    groupB: 14,
  },
  ...
];
```

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

### Hexagon Generator Setup with d3-hexbin

Source: https://www.react-graph-gallery.com/2d-density-plot

Illustrates how to initialize and configure the d3-hexbin generator. It requires specifying the hexagon radius and the extent of the chart area to define the binning grid.

```javascript
import { hexbin } from "d3-hexbin";

const BIN_SIZE = 20; // hexagon size in px
const boundsWidth = 600;
const boundsHeight = 400;

const hexbinGenerator = hexbin()
  .radius(BIN_SIZE) // hexagon size in px
  .extent([
    [0, 0],
    [boundsWidth, boundsHeight],
]);

```

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

### Hierarchical Data Structure Example

Source: https://www.react-graph-gallery.com/circular-packing

A minimal example of a hierarchical data structure suitable for circle packing. Each node has a 'name', 'value', and an optional 'children' array.

```javascript
const data = {
  type: 'node',
  name: "boss",
  value: 2300,
  children: [
    {type: 'leaf', name:"Mark", value: 90},
    {type: 'leaf', name:"Robert", value: 12},
    {type: 'leaf', name:"Emily", value: 34},
    ...
}
```

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

### React and D3.js Hexbin Map (GeoJSON)

Source: https://www.react-graph-gallery.com/hexbin-map

This is an example of a basic hexbin map created using React and D3.js, leveraging a GeoJSON file for defining hexagonal regions. It demonstrates the foundational steps for rendering geographical data. The `centroid()` function is useful for accurate label positioning.

```javascript
// Code for the first hexbin map made with d3.js and React
// Refer to the map section for more code explanation.
```

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

### React and D3.js Hexbin Map (2D Coordinates)

Source: https://www.react-graph-gallery.com/hexbin-map

This example shows how to build a hexbin map using React and D3.js from a dataset of 2D coordinates. It aggregates data points into hexagonal bins based on their spatial location, effectively creating a 2D density chart that can resemble a map if the coordinates are GPS data.

```javascript
// Code for a hexbin map built with react and d3.js from a set of 2d coordinates.
// This is another type of hexbin map where the input dataset is totally different.
```

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

### Interactive Perlin Noise Visualization with Slider

Source: https://www.react-graph-gallery.com/generative/intro-to-perlin-noise

This example shows how to add interactivity to a Perlin noise visualization using a slider in React. It maps slider values to the x-offset of the noise function, allowing users to dynamically change the noise pattern and observe its evolution.

```javascript
// Assuming 'noise' is a 2D noise generator from simplex-noise
// const noise = createNoise2D();

function generateNoiseWithOffset(offsetX, width) {
  const noiseValues = [];
  for (let i = 0; i < width; i++) {
    const currentX = i * 0.01;
    const noiseValue = noise(currentX + offsetX, 0);
    noiseValues.push(noiseValue);
  }
  return noiseValues;
}

// In your React component:
// const [offsetX, setOffsetX] = useState(0);
// const noiseData = generateNoiseWithOffset(offsetX, 500);

// Render a slider and update offsetX on change.
// Then render a chart using noiseData.
```

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

### React Scatterplot Data Structure Example

Source: https://www.react-graph-gallery.com/example/scatterplot-tooltip-with-voronoi-for-closest-point-detection

Defines the expected data format for the scatterplot, which is an array of objects. Each object must contain 'x' and 'y' properties for 2D coordinates, and can include additional properties.

```javascript
const data = [
  { x: 10, y: 10 },
  { x: 4, y: 4 },
  ...
];
```

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

### Radar Chart Data Structure Example (JavaScript)

Source: https://www.react-graph-gallery.com/radar-chart

Illustrates the recommended data format for a radar chart, which is an array of objects. Each object represents a data item with numeric properties for variables and a 'name' property for identification.

```javascript
const data = [
  {var1: 5.1, var2: 3.5, ..., name: 'Mark'},
  {var1: 4.9, var2: 3.0, ..., name: 'Rosa'},
  ...
]
```

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

### Data Structure Example for Correlogram

Source: https://www.react-graph-gallery.com/correlogram

Defines the expected data structure for the correlogram, which is an array of objects, where each object represents a data point with numeric properties and an optional categorical property for grouping.

```javascript
const data = [
  {var1: 5.1, var2: 3.5, ..., group: 'setosa'},
  {var1: 4.9, var2: 3.0, ..., group: 'setosa'},
  ...
]
```

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

### React Data Transition Animation with react-spring

Source: https://www.react-graph-gallery.com/donut

This example shows how to implement smooth data transitions in a chart using the react-spring library. Instead of instant updates, the chart animates changes to its data, providing a polished user experience. The code utilizes `animated.path` from react-spring to handle the animation logic, making data updates visually seamless. Note the handling of enter/exit patterns for elements.

```jsx
import React, { useState } from 'react';
import { useTransition, animated } from 'react-spring';
import * as d3 from 'd3';

const AnimatedPieChart = ({ data, width, height }) => {
  const [pieData, setPieData] = useState(data);

  React.useEffect(() => {
    setPieData(data);
  }, [data]);

  const radius = Math.min(width, height) / 2;
  const arcGenerator = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 40);

  const pie = d3.pie().value(d => d.value);
  const arcs = pie(pieData);

  const transitions = useTransition(arcs, {
    key: d => d.data.label,
    from: { startAngle: 0, endAngle: 0 },
    update: d => ({ startAngle: d.startAngle, endAngle: d.endAngle }),
    leave: { startAngle: 0, endAngle: 0 },
    config: { duration: 500 },
    // Add enter/exit handling here if needed
  });

  return (
    <svg width={width} height={height}>
      {transitions((style, d) => (
        <animated.g
          transform={style.transform}
          style={{
            fill: d3.schemeCategory10[d.index],
            opacity: style.opacity,
          }}>
          <animated.path
            d={d3.arc().outerRadius(radius - 10).innerRadius(radius - 40)(
              {
                startAngle: style.startAngle,
                endAngle: style.endAngle,
              }
            )}
          />
        </animated.g>
      ))}
    </svg>
  );
};

export default AnimatedPieChart;

```

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

### Minimal Data Structure for Barplot

Source: https://www.react-graph-gallery.com/barplot

Provides an example of the expected data format for building a barplot. It's an array of objects, where each object represents a group with a 'name' and a 'value'.

```javascript
const data = [
  {name:"Mark", value: 90},
  {name:"Robert", value: 12},
  {name:"Emily", value: 34},
  {name:"Marion", value: 53},
  {name:"Nicolas", value: 98},
]
```

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

### Heatmap Data Structure Example (JavaScript)

Source: https://www.react-graph-gallery.com/heatmap

Defines the minimal structure for heatmap data, requiring 'x', 'y', and 'value' properties for each cell. 'x' and 'y' are strings for ordinal scales, and 'value' is a number used for coloring.

```javascript
const data = [
  { x: 'A', y: 'A', value: 12 },
  { x: 'B', y: 'A', value: 2 },
  { x: 'C', y: 'A', value: 9 }
];
```

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

### d3.js scaleLinear() with domain and range

Source: https://www.react-graph-gallery.com/course/axis/bottom-axis

Demonstrates the basic usage of `d3.scaleLinear()` to create a linear scale. It sets the domain and range and shows how to get values from the scale. This is a fundamental d3.js concept for mapping data values to pixel positions.

```javascript
const xScale = d3.scaleLinear()
  .domain([0, 100])
  .range([0, 500]);

console.log(xScale(0))    // 0
console.log(xScale(100))  // 500
```

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

### D3.js Band Scale Example

Source: https://www.react-graph-gallery.com/barplot

Illustrates how to create and use a D3.js band scale, which is used to position categorical data points along an axis. It defines discrete bands for each category and manages the spacing between them.

```javascript
const yScale = d3
    .scaleBand()
    .range([0, boundsHeight])
    .domain(allGroups)
    .padding(0.01);

// yScale("A") -> 0
// yScale.bandwidth() -> 11
```

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

### D3.js Geo Projection Setup

Source: https://www.react-graph-gallery.com/choropleth-map

Demonstrates how to set up a geographic projection using D3.js, specifically the Mercator projection. Key options like 'scale' (zoom level) and 'center' (map focus) are configurable to define the map's appearance and viewpoint. This is fundamental for rendering geographic data accurately.

```javascript
const projection = d3
  .geoMercator()
  .scale(width / 2 / Math.PI)
  .center([2.34, 48.86])
  ...other options if needed
```

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

### D3.js Band Scale Example

Source: https://www.react-graph-gallery.com/boxplot

Illustrates the use of D3.js's scaleBand for mapping categorical data to pixel positions, commonly used for the X-axis. It includes an example using React's useMemo hook.

```javascript
const xScale = useMemo(() => {
  return d3
    .scaleBand()
    .range([0, boundsWidth])
    .domain(allXGroups)
    .padding(0.01);
}, [data, width]);

// xScale("A") -> 0
// xScale.bandwidth() -> 11
```

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

### Linear Scale Calculation Example

Source: https://www.react-graph-gallery.com/course/scales/introduction

Demonstrates the mathematical formula used to calculate the horizontal position (cx) of an element based on its value, the maximum value in the dataset, and the total width of the SVG area. This formula is fundamental for linear scaling in data visualization.

```javascript
// Linear scale equation
cx = (value / maxValue) * width

// cx = (82 / 100) * 500
// cx = 410px
```

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

### Transition Pie Chart to Barplot with Flubber and React Spring

Source: https://www.react-graph-gallery.com/pie-plot

This code example shows how to animate transitions between different chart shapes, specifically transforming a Pie chart into a Barplot and vice-versa. It leverages the flubber library for shape morphing and react-spring for animation management, enabling a fluid visual change between distinct chart types.

```jsx
import React from 'react';
import { useSpring, animated } from '@react-spring/web';
import { interpolate } from 'flubber';

const ChartTransition = ({ fromChart, toChart }) => {
  const springProps = useSpring({
    from: { path: fromChart.path },
    to: { path: toChart.path },
    config: { duration: 500 },
    // ... other spring configurations
  });

  const animatedPath = springProps.path.to((pathValue) => {
    // Use flubber.interpolate to smoothly transition shapes
    return interpolate(fromChart.path, toChart.path, { maxSegmentLength: 10 });
  });

  return (
    <animated.path d={animatedPath} />
  );
};

export default ChartTransition;
```

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

### Stacked Area Chart Data Structure Example

Source: https://www.react-graph-gallery.com/stacked-area-plot

An example illustrating the structure of the 'series' object generated for stacked area charts. It's an array where each item represents a group, containing its key, index, and arrays of Y-axis positions for each timestamp.

```javascript
[
  // First group of the dataset: at the very bottom of the stack
  [
    [0, 38, data: {…}], // First timestamp of the dataset: shape goes from 0 to 38 on the Y axis
    [0, 16, data: {…}], // Second timestamp: shape goes from 0 to 16
    ...                 // 1 entry per timestamp
    key: 'groupA',      // group name
    index: 0            // index
  ],

   // Second group of the dataset on top of the first one
  [[38, 57, data: {…}], ..., key: 'groupB', index: 1],

  //Third group
  [[57, 72, data: {…}], ..., key: 'groupC', index: 2],
  ...
]
```

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

### Example Usage of VerticalBox Component

Source: https://www.react-graph-gallery.com/boxplot

Demonstrates how to use the `VerticalBox` component within an SVG element, passing necessary props for width, statistical values, stroke color, and fill color.

```jsx
<svg width={200} height={300}>
  <VerticalBox
    width={100}
    min={280}
    q1={200}
    median={100}
    q3={80}
    max={10}
    stroke="black"
    fill={"#ead4f5"}
  />
</svg>
```

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

### Link Data Format for Connections

Source: https://www.react-graph-gallery.com/connection-map

This snippet illustrates the expected format for link data when creating connection maps. It's an array of objects, where each object defines the start and end points of a connection using latitude and longitude coordinates.

```javascript
[
  {
    "long1": -58,
    "long2": 2,
    "lat1": -34,
    "lat2": 49,
  },
  {
    "long1": -58,
    "long2": 145,
    "lat1": -34,
    "lat2": -38,
  },
  ...
}
```

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

### React Pie to Barplot Transition Animation with flubber and react-spring

Source: https://www.react-graph-gallery.com/donut

This example demonstrates animating transitions between different shape types, specifically from a pie chart arc to a bar plot rectangle and vice versa. It utilizes the 'flubber' library for shape interpolation and 'react-spring' for animation control. The code facilitates a smooth visual transformation between two distinct chart representations of the same data.

```jsx
import React, { useState, useEffect } from 'react';
import { useSpring, animated } from 'react-spring';
import { interpolate as flubberInterpolate } from 'flubber';
import * as d3 from 'd3';

const PieToBarChart = ({ data, width, height, type }) => {
  const [shape, setShape] = useState(null);
  const radius = Math.min(width, height) / 2;

  useEffect(() => {
    const pieGenerator = d3.pie().value(d => d.value);
    const arcGenerator = d3.arc()
      .outerRadius(radius - 10)
      .innerRadius(radius - 40);

    const pieArcs = pieGenerator(data).map(d => arcGenerator(d));

    const barRects = data.map((d, i) => {
      const barHeight = (d.value / d3.max(data, d => d.value)) * height;
      const x = (i * (width / data.length));
      return `M ${x} ${height - barHeight} L ${x} ${height} L ${x + (width / data.length)} ${height} L ${x + (width / data.length)} ${height - barHeight} Z`;
    });

    if (type === 'pie') {
      setShape({ from: barRects, to: pieArcs });
    } else {
      setShape({ from: pieArcs, to: barRects });
    }
  }, [data, width, height, type]);

  const props = useSpring({
    from: shape ? { t: 0 } : { t: 1 },
    to: shape ? { t: 1 } : { t: 0 },
    config: { duration: 1000 },
  });

  const interpolatedPath = props.t.to((t) => {
    if (!shape) return '';
    return flubberInterpolate(shape.from[0], shape.to[0], { maxSegmentLength: 10 });
  });

  return (
    <svg width={width} height={height}>
      <animated.path d={interpolatedPath} fill="steelblue" />
    </svg>
  );
};

export default PieToBarChart;

```

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

### Create a Responsive Dimensions Hook in React

Source: https://www.react-graph-gallery.com/map

A custom React hook `useDimensions` that tracks the width and height of a referenced HTML element. It uses `useState`, `useEffect`, and `useLayoutEffect` to get initial dimensions and update them on window resize events, making it suitable for responsive visualizations.

```typescript
export const useDimensions = (targetRef: React.RefObject<HTMLDivElement>) => {

  const getDimensions = () => {
    return {
      width: targetRef.current ? targetRef.current.offsetWidth : 0,
      height: targetRef.current ? targetRef.current.offsetHeight : 0
    };
  };

  const [dimensions, setDimensions] = useState(getDimensions);

  const handleResize = () => {
    setDimensions(getDimensions());
  };

  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  useLayoutEffect(() => {
    handleResize();
  }, []);

  return dimensions;
}

```

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

### React Donut Chart with Hover Effect using D3.js

Source: https://www.react-graph-gallery.com/donut

This example demonstrates a donut chart with an interactive hover effect. When a user hovers over a slice, it is smoothly highlighted. The implementation relies on D3.js for data manipulation and rendering, and React for component structure. The code snippet shows how to apply these effects within a React application.

```jsx
import React from 'react';
import * as d3 from 'd3';

const DonutChartWithHover = ({ data, width, height }) => {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const svg = d3.select(ref.current)
      .attr('width', width)
      .attr('height', height);

    const radius = Math.min(width, height) / 2;
    const arcGenerator = d3.arc()
      .outerRadius(radius - 10)
      .innerRadius(radius - 40);

    const pie = d3.pie().value(d => d.value);

    const arcs = svg.selectAll('.arc')
      .data(pie(data))
      .enter()
      .append('g')
      .attr('class', 'arc');

    arcs.append('path')
      .attr('d', arcGenerator)
      .attr('fill', (d, i) => d3.schemeCategory10[i]);

    arcs.on('mouseover', function() {
        d3.select(this).select('path').transition()
          .duration(200)
          .attr('d', d3.arc().outerRadius(radius).innerRadius(radius - 40));
      })
      .on('mouseout', function() {
        d3.select(this).select('path').transition()
          .duration(200)
          .attr('d', arcGenerator);
      });

  }, [data, width, height]);

  return <svg ref={ref}></svg>;
};

export default DonutChartWithHover;

```

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

### React Hook to Get Container Dimensions (TypeScript)

Source: https://www.react-graph-gallery.com/course/responsiveness/use-dimension-hook

This hook retrieves the dimensions (width and height) of a referenced HTMLDivElement. It initializes dimensions and updates them on window resize events using `useEffect` and `useLayoutEffect`. Dependencies include `React`'s `useEffect`, `useLayoutEffect`, and `useState`. It returns an object containing the `width` and `height` of the element.

```typescript
import { useEffect, useLayoutEffect, useState } from "react";

// Hook to retrieve the dimensions of a div.
// react-graph-gallery.com
export const useDimensions = (targetRef: React.RefObject<HTMLDivElement>) => {

  const getDimensions = () => {
    return {
      width: targetRef.current ? targetRef.current.offsetWidth : 0,
      height: targetRef.current ? targetRef.current.offsetHeight : 0
    };
  };

  const [dimensions, setDimensions] = useState(getDimensions);

  const handleResize = () => {
    setDimensions(getDimensions());
  };

  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  useLayoutEffect(() => {
    handleResize();
  }, []);

  return dimensions;
}
```

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

### Find Path Between Leaf Nodes in Dendrogram (JavaScript/React)

Source: https://www.react-graph-gallery.com/hierarchical-edge-bundling

This snippet demonstrates finding the path between two leaf nodes in a dendrogram and generating SVG paths for visualization. It preprocesses nodes into a map, filters for relevant leaves, and uses a `path()` method to determine traversal nodes and their coordinates. The coordinates are then used with a `linksGenerator` to create SVG path elements. This is part of a hierarchical edge bundling example.

```javascript
let nameToNodeMap = {};
dendrogram.descendants().map((node) => {
  nameToNodeMap[node.data.name] = node;
});

const allEdges = dendrogram
  .descendants()
  .filter((node) => node.data.type === "leaf" && node.data.links.length > 0)
  .map((sourceNode, i) => {
    return sourceNode.data.links.map((targetNodeName: string) => {
      const traversedNodes = sourceNode.path(nameToNodeMap[targetNodeName]);

      const traversedCoords = traversedNodes.map((node) => {
        return { x: node.x, y: node.y };
      });

      return (
        <path
          key={i}
          fill="none"
          stroke="grey"
          d={linksGenerator(traversedCoords)}
        />
      );
    });
  });
```

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

### d3-sankey Layout Configuration (JavaScript)

Source: https://www.react-graph-gallery.com/sankey-diagram

Demonstrates how to configure the d3-sankey generator. Key options include 'nodeWidth', 'nodePadding', 'extent' (for chart area), 'nodeId' (to access node identifiers), and 'nodeAlign' (layout algorithm).

```javascript
const sankeyGenerator = sankey()
    .nodeWidth(26)
    .nodePadding(29)
    .extent([
      [MARGIN_X, MARGIN_Y],
      [width - MARGIN_X, height - MARGIN_Y],
    ])
    .nodeId((node) => node.id)
    .nodeAlign(sankeyCenter);
```

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

### Applying d3-sankey to Data (JavaScript)

Source: https://www.react-graph-gallery.com/sankey-diagram

Shows how to use the configured sankeyGenerator to process the input data. This step calculates the layout for nodes and links, providing coordinates and dimensions necessary for rendering.

```javascript
const { nodes, links } = sankeyGenerator(data);
```

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

### Instantiate D3-Cloud Layout

Source: https://www.react-graph-gallery.com/wordcloud

Initializes the d3-cloud layout, configuring word data, canvas size, font size scaling, and padding. The 'end' event handler updates the word positions.

```javascript
const layout = d3Cloud()
  .words(data)
  .size([width, height])
  .fontSize((d) => fontSizeScale(d.value))
  .padding(10)
  .on("end", (words) => {
    setWordsPosition(words);
  });
```

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

### D3.js Data Stacking with Silhouette Offset for Streamgraphs

Source: https://www.react-graph-gallery.com/streamchart

Demonstrates how to use D3.js's stack function to prepare data for a streamgraph. It specifies the keys for grouping, maintains the original order, and crucially applies the `d3.stackOffsetSilhouette` offset. This offset centers the stacked areas around the zero baseline, creating the characteristic flow appearance of a streamgraph.

```javascript
const stackSeries = d3
  .stack()
  .keys(groups)
  .order(d3.stackOrderNone)
  .offset(d3.stackOffsetSilhouette);
const series = stackSeries(data);
```

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

### D3.js Force Simulation for Node Positioning (JavaScript)

Source: https://www.react-graph-gallery.com/network-chart

Demonstrates how to use D3.js's `forceSimulation` to compute node positions for a network diagram. It includes essential forces like link connection, collision avoidance, many-body interaction, and centering. The simulation mutates the node and link data, adding 'x' and 'y' coordinates.

```javascript
d3.forceSimulation(nodes) // apply the simulation to our array of nodes

  // Force #1: links between nodes
  .force( 'link', d3.forceLink(links).id((d) => d.id))

  // Force #2: avoid node overlaps
  .force('collide', d3.forceCollide().radius(RADIUS))

  // Force #3: attraction or repulsion between nodes
  .force('charge', d3.forceManyBody())

  // Force #4: nodes are attracted by the center of the chart area
  .force('center', d3.forceCenter(width / 2, height / 2));
```

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

### D3.js Linear Scale Example

Source: https://www.react-graph-gallery.com/boxplot

Demonstrates how to use D3.js's scaleLinear to map numeric data values to pixel positions. This scale is suitable for quantitative axes like the Y-axis in a chart.

```javascript
const scale = d3.scaleLinear()
  .domain([0, 10]) // data goes from 0 to 10
  .range([0, 200]); // axis goes from 0 to 200 pixels

scale(0); // 0 -> item with a value of 0 will be at the extreme left of the axis
scale(5); // 100 -> middle of the axis
scale(10); // 200 -> extreme right
```

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

### Create Responsive React Chart Component with Wrapper

Source: https://www.react-graph-gallery.com/course/responsiveness/code-organization

This snippet demonstrates how to create a responsive wrapper component for a React chart. It uses `useRef` and a custom `useDimensions` hook (assumed) to manage chart dimensions and forwards all props to the underlying chart component.

```typescript
type ResponsiveDensityChartProps = {
  data: number[];
};

// Responsive component = wrapper that manages the dimensions and does nothing else
export const ResponsiveDensityChart = (props: ResponsiveDensityChartProps) => {
  const chartRef = useRef(null);

  const chartSize = useDimensions(chartRef);

  return (
    <div ref={chartRef} style={{ width: '100%', height: '100%' }}>
      <DensityChart
        height={chartSize.height}
        width={chartSize.width}
        {...props} // pass all the props
      />
    </div>
  );
};

// Type is the same, with width and height added!
type DensityChartProps = ResponsiveDensityChartProps & {
  width: number;
  height: number;
};

// Non responsive component
const DensityChart = ({ width, height, data }: DensityChartProps) => {
  //... dataviz code goes here
}
```

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

### D3.js Linear Scale Example

Source: https://www.react-graph-gallery.com/barplot

Demonstrates the creation and usage of a D3.js linear scale, which maps data values to a pixel range. This is typically used for determining the length of bars based on their numeric values.

```javascript
const scale = d3.scaleLinear()
  .domain([0, 10]) // data goes from 0 to 10
  .range([0, 200]); // axis goes from 0 to 200

scale(0); // 0 -> item with a value of 0 will have a bar of length 0
scale(5); // 100 -> bar of length 100
scale(10); // 200 -> bar of length 200
```

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

### Generate 2D Perlin Noise with simplex-noise

Source: https://www.react-graph-gallery.com/generative/intro-to-perlin-noise

Demonstrates how to create a 2D Perlin noise generator using the simplex-noise library. The function returns noise values based on provided offsets. Using nearby offsets results in similar noise values, enabling smooth transitions. Zero can be passed as the second argument to simulate 1D noise.

```javascript
import { createNoise2D } from 'simplex-noise';

const noise = createNoise2D();

console.log(noise(4, 0));       // Example output: 0.5
console.log(noise(4.00001, 0)); // Example output: 0.5001
console.log(noise(10, 0));      // Example output: -0.4
```

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

### Rendering Correlogram Grid Layout in React

Source: https://www.react-graph-gallery.com/correlogram

Demonstrates how to render the generated correlogram chart components within a responsive grid layout using React and inline styles. It calculates container and bounds dimensions and sets up CSS grid properties.

```javascript
return (
  <div
    style={{
      width,
      height,
    }}
  >
    <div
      style={{
        width: boundsWidth,
        height: boundsHeight,
        display: "grid",
        gridTemplateColumns: "1fr ".repeat(allVariables.length),
        transform: ...,
      }}
    >
      {allGraphs}
    </div>
  </div>
);
```

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

### Importing Delaunay from D3.js (JavaScript)

Source: https://www.react-graph-gallery.com/voronoi

Demonstrates how to import the Delaunay module from the d3-delaunay library. This module is crucial for performing Delaunay triangulation, a prerequisite for constructing Voronoi diagrams.

```javascript
import { Delaunay } from "d3";
```

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

### Boxplot Component Skeleton (React and D3.js)

Source: https://www.react-graph-gallery.com/boxplot

The basic structure of a Boxplot React component, including its props (width, height, data) and the SVG element setup. It outlines where data processing, statistics calculation, and rendering will occur.

```typescript
import * as d3 from "d3"; // we will need d3.js

type BoxplotProps = {
  width: number;
  height: number;
  data: { name: string, value: number }[];
};

export const Boxplot = ({ width, height, data }: BoxplotProps) => {

  // read the data
  // compute summary statistics for each group
  // compute scales
  // build the boxes

  return (
    <div>
      <svg width={width} height={height}>
        // render all the boxes
        // draw the axes
      </svg>
    </div>
  );
};

```

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

### React Hook for Responsive Dimensions

Source: https://www.react-graph-gallery.com/arc-diagram

This React hook, `useDimensions`, provides responsive width and height values for a given DOM element. It listens to window resize events and uses `useLayoutEffect` to ensure initial dimensions are captured correctly.

```typescript
import React, { useState, useEffect, useLayoutEffect } from 'react';

export const useDimensions = (targetRef: React.RefObject<HTMLDivElement>) => {

  const getDimensions = () => {
    return {
      width: targetRef.current ? targetRef.current.offsetWidth : 0,
      height: targetRef.current ? targetRef.current.offsetHeight : 0
    };
  };

  const [dimensions, setDimensions] = useState(getDimensions);

  const handleResize = () => {
    setDimensions(getDimensions());
  };

  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  useLayoutEffect(() => {
    handleResize();
  }, []);

  return dimensions;
}

```

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

### D3.js Pie Generator for Arc Coordinates

Source: https://www.react-graph-gallery.com/pie-plot

Demonstrates how to use `d3.pie()` to transform raw data into arc coordinates suitable for a pie chart. It returns a generator function that calculates start and end angles for each data point.

```javascript
// Compute a pie generator = a function that transforms a dataset in a list of arcs
const pieGenerator = d3.pie().value((d) => d.value);

// Use this pie generator on our initial dataset
const pie = pieGenerator(data);

/* Result looks like this:
[
  {
      "data": {"name": "Mark", "value": 90},
      "index": 1,
      "value": 90,
      "startAngle": 2.145477909768639,
      "endAngle": 4.115814765678614,
      "padAngle": 0
  }, .... same for other groups
]
*/
```

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

### React and D3.js Hexbin Choropleth Map (GeoJSON)

Source: https://www.react-graph-gallery.com/hexbin-map

This code snippet illustrates how to create a hexbin choropleth map using React and D3.js. It involves using a secondary dataset to assign numeric values to each hexagon and then applying a color scale to visualize these values, similar to a traditional choropleth map.

```javascript
// Code for a choropleth hexbin map built with react and d3.js from a geoJson file.
// The process is very close to what's done for a usual choropleth map.
```

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

### Radial Dendrogram Setup in React

Source: https://www.react-graph-gallery.com/dendrogram

Configures the D3 cluster layout for a radial dendrogram using polar coordinates. It sets the size of the layout to 360 degrees and a specified radius, and then applies this layout to the hierarchy data. This prepares the data for radial positioning.

```javascript
const dendrogramGenerator = d3
  .cluster()
  .size([360, radius]);
const dendrogram = dendrogramGenerator(hierarchy);

```

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

### React Sankey Component Skeleton (TypeScript)

Source: https://www.react-graph-gallery.com/sankey-diagram

Provides the basic structure for a React Sankey component. It accepts 'width', 'height', and 'data' as props and sets up an SVG element for rendering. D3.js will be used for layout calculations, while React handles the DOM rendering.

```typescript
import * as d3 from "d3"; // we will need d3.js

type SankeyProps = {
  width: number;
  height: number;
  data: number[];
};

export const Sankey = ({ width, height, data }: SankeyProps) => {

  // read the data
  // create a color scale for the nodes
  // compute node position thanks to the d3.sankey() function
  // build the rectangles and arcs

  return (
    <div>
      <svg width={width} height={height}>
        // render all the <rect> and <path>
      </svg>
    </div>
  );
};
```

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

### Generate SVG Path for Horizontal Arc

Source: https://www.react-graph-gallery.com/arc-diagram

This JavaScript function generates the 'd' attribute for an SVG path element to draw a horizontal elliptical arc between two points. It calculates radii and flags based on the start and end coordinates.

```javascript
const horizontalArcGenerator = (
  xStart,
  yStart,
  xEnd,
  yEnd
) => {
  return [
    // the arc starts at the coordinate xStart, xEnd
    "M",
    xStart,
    yStart,

    // A means we're gonna build an Elliptical Arc Curve
    "A",
    (xStart - xEnd) / 2,    // rx: first radii of the ellipse (inflexion point)
    (xStart - xEnd) / 2,    // ry: second radii of the ellipse  (inflexion point)
    0,                      // angle: rotation (in degrees) of the ellipse relative to the x-axis
    1,                      // large-arc-flag: large arc (1) or small arc (0)
    xStart < xEnd ? 1 : 0,  // sweep-flag: the clockwise turning arc (1) or counterclockwise turning arc (0)

    // Position of the end of the arc
    xEnd,
    ",",
    yEnd,
  ].join(" ");
};

```

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

### Get Element Dimensions Hook (React)

Source: https://www.react-graph-gallery.com/radar-chart

A custom React hook that provides the width and height of a target DOM element. It listens to window resize events and updates the dimensions accordingly, making it useful for creating responsive components.

```javascript
import React, { useState, useEffect, useLayoutEffect } from 'react';

export const useDimensions = (targetRef) => {

  const getDimensions = () => {
    return {
      width: targetRef.current ? targetRef.current.offsetWidth : 0,
      height: targetRef.current ? targetRef.current.offsetHeight : 0
    };
  };

  const [dimensions, setDimensions] = useState(getDimensions);

  const handleResize = () => {
    setDimensions(getDimensions());
  };

  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  useLayoutEffect(() => {
    handleResize();
  }, []);

  return dimensions;
}
```

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

### Get Current Date as Number and Date Object

Source: https://www.react-graph-gallery.com/timeseries

Retrieves the current timestamp as a number using Date.now() and then converts it into a JavaScript Date object. Useful for tracking real-time data or setting initial chart states.

```javascript
const now = Date.now()

// console.log(now)
// 1685004151406

const nowInDateFormat = new Date(now)

// console.log(nowInDateFormat)
// Thu May 25 2023 10:42:31 GMT+0200 (Central European Summer Time)
```

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

### Basic Pie Chart Rendering with React and D3.js

Source: https://www.react-graph-gallery.com/pie-plot

Renders a basic pie chart by mapping over D3-generated arcs and creating SVG path elements. It requires translation to center the SVG element. Dependencies include React for rendering and D3.js for layout computation.

```jsx
<g transform={..}>
    {arcs.map((arc, i) => {
      return <path key={i} d={arc} />;
    })}
</g>
```

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

### Build Time Scale with d3-scale

Source: https://www.react-graph-gallery.com/timeseries

Creates a time scale using d3.scaleTime() for rendering time-based axes. It maps a domain of Date objects to a pixel range. This requires the 'd3' library.

```javascript
// Start and end of the axis must be in the Date format
const start = new Date("2020-12-01");
const end = new Date("2023-06-01");

// Use scaleTime() to create a time scale
const xScale = d3.scaleTime()
  .domain([start, end])
  .range([0, width]);

// xScale is a function that takes a Date and returns a pixel position.
```

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

### React Histogram Component Skeleton

Source: https://www.react-graph-gallery.com/histogram

Provides the foundational structure for a React `Histogram` component. It outlines the necessary props (width, height, data) and the basic SVG rendering setup, emphasizing the integration of D3.js for data preparation rather than direct DOM manipulation.

```typescript
import * as d3 from "d3"; // we will need d3.js

type HistogramProps = {
  width: number;
  height: number;
  data: number[];
};

export const Histogram = ({ width, height, data }: HistogramProps) => {

  // read the data
  // build buckets from the dataset
  // build the scales
  // build the rectangles

  return (
    <div>
      <svg width={width} height={height}>
        // render all the <rect>
      </svg>
    </div>
  );
};
```

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

### Configure D3.js Map Projections

Source: https://www.react-graph-gallery.com/map

Demonstrates how to set up D3.js map projections, such as `geoMercator`. Key options include `.scale()` for zoom level and `.center()` for map centering. This is crucial for transforming spherical geographic data into a planar representation suitable for display.

```javascript
const projection = d3
  .geoMercator()
  .scale(width / 2 / Math.PI)
  .center([2.34, 48.86])
  ...other options if needed

```

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

### D3.js Pie Generator for Donut Chart Angles

Source: https://www.react-graph-gallery.com/donut

Uses D3.js's pie generator to compute the start and end angles for each data group, essential for drawing arcs in a donut chart. The value accessor is set to use the 'value' property of the data objects.

```javascript
const pieGenerator = d3.pie().value((d) => d.value);
const pie = pieGenerator(data);
```

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

### Scaling bubble size proportionally to data value in JavaScript

Source: https://www.react-graph-gallery.com/example/circle-packing-with-d3-force

This code snippet illustrates how to correctly scale the size of bubbles in a visualization so that their area is proportional to their corresponding data value. It utilizes `scaleSqrt()` from d3.js, mapping a domain of minimum and maximum data values to a specified range of minimum and maximum bubble sizes, preventing misinterpretations common with radius scaling.

```javascript
const sizeScale = scaleSqrt()
  .domain([min, max])
  .range([BUBBLE_MIN_SIZE, BUBBLE_MAX_SIZE]);

```

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

### d3.js scaleLinear() ticks() method examples

Source: https://www.react-graph-gallery.com/course/axis/bottom-axis

Illustrates the behavior of the `ticks()` method on a d3.js linear scale. The `ticks()` method generates an array of tick values that are nicely rounded and approximately evenly spaced. The exact number of ticks may vary to ensure readability.

```javascript
xScale.ticks(2)  // [0, 50, 100]
xScale.ticks(5)  // [0, 20, 40, 60, 80]
xScale.ticks(9)  // [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
xScale.ticks(10) // [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
```

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

### Computing Kernel Density with D3.js

Source: https://www.react-graph-gallery.com/density-plot

Demonstrates how to compute kernel density using the previously defined functions. It involves preparing buckets (thresholds) and the dataset, then applying the kernel density estimator. The output is an array of [bucket, density] pairs.

```javascript
const data = [11, 22, 21, 33, 43, 49, 2, 4, 5, 1, 6];
const buckets = [0, 10, 20, 30, 40, 50];

const computeKde = kernelDensityEstimator(kernelEpanechnikov(7), buckets);
const density = computeKde(data);
```

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

### D3.js Arc Generator for SVG Path

Source: https://www.react-graph-gallery.com/pie-plot

Shows how to use `d3.arc()` to convert arc coordinates into SVG path data. This function takes parameters like inner radius, outer radius, start angle, and end angle to generate the 'd' attribute for SVG path elements.

```javascript
// Compute an arc generator = a function that transforms arc coordinates in a svg path
const arcPathGenerator = d3.arc();

// For each arc, use the path generator
const arcs = pie.map((p) =>
      arcPathGenerator({
        innerRadius: 0,
        outerRadius: radius,
        startAngle: p.startAngle,
        endAngle: p.endAngle,
      })
    );

/* Result looks like:
[
  "M151,97 A180,180,0,0,1,-148,101 L0,0Z",
  .... other groups
]
*/
```

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

### Use use-dimensions Hook

Source: https://www.react-graph-gallery.com/course/responsiveness/using-the-hook

This snippet illustrates how to call the `use-dimensions` hook, passing the previously created `chartRef` as an argument. The hook will return an object, `chartSize`, containing the `height` and `width` of the referenced element, enabling responsive design.

```javascript
const chartSize = useDimensions(chartRef);
```

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

### Data Transformation for Hexbin Generator

Source: https://www.react-graph-gallery.com/2d-density-plot

Shows the process of mapping and scaling the input data points to fit the coordinate system required by the d3-hexbin generator. This prepares the data for hexagon computation.

```javascript
const xScale = d3.scaleLinear().domain([0, 10]).range([0, boundsWidth]);
const yScale = d3.scaleLinear().domain([0, 10]).range([0, boundsHeight]);

const data = [
  { x: 2, y: 4 },
  { x: 8, y: 5 }
];

const hexbinData = hexbinGenerator(
  data.map((item) => [xScale(item.x), yScale(item.y)])
);

```

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

### D3.js Bin Generator Configuration

Source: https://www.react-graph-gallery.com/histogram

Demonstrates how to configure D3.js's `bin()` function to create a histogram bucket generator. It specifies the value accessor, domain, and thresholds for dividing the data into bins.

```javascript
const bucketGenerator = d3
  .bin()
  .value((d) => d)
  .domain([0, 10])
  .thresholds([0, 2, 4, 6, 8, 10]);
```
Tokens:
Raw