100%

React + D3 experiment

✓ Published1🌍 Public

Last edited Sep 10, 2020

Created on Sep 6, 2020

A scatterplot maps eye-color and gender data from a JSON file, plotting red and green color components on the x- and y-axes. The visualization animates circles into place using D3 transitions with a bounce easing function, while circle size encodes the blue component. Built as a React experiment, the example wraps only the root SVG element in React, leaving all sub-elements to D3 v5. The code uses `d3.json`, `d3.select`, `d3.scaleLinear`, and `transition.attr` methods to render and animate the SVG.

AI-generated description

React + D3

Purpose

I'm trying to find a clean and easy to understand way for d3 and react to work together.

I've followed Curran's videos on the subject but the integration seems rather messy. In this viz I'll try to only wrap the root html element (svg) in React and leave al sub-elements to d3. I wonder if that approach will still allow me to have React manage the data.

Solutions

Wrap pre-created svg

One solution would be to generate the linechart and store the encapsulating svg in a var. The react component would wrap the svg in a wrapper element. The downside of this is that it's not really a reusable component anymore as it points to a svg statically. This means that the whole react lifecycle for components is bypassed and can't be used properly.

Full integration

This means wrapping each viz element in a react Component as Curran has done. The downside is it creates a lot of overhead, the syntax is hard to read and easy to mess up.

Separate concerns properly

Haven't figured out how to do this but ideally you could separate the d3 logic for creating a viz from the react component. Each new component would create a new viz dynamically and with its own props. It looks like ELijah Meeks might have a solution for this that's still pretty elegant.

MIT Licensed

Similar vizzes

Loading thumbnail…

React + D3 Hooks template

A scatter plot visualizes student eye colors, encoding each color's red, green, and blue components along the x and y axes while using circle area for blue intensity. The React component uses the `useEffect` and `useRef` hooks to integrate D3 v5, loading eye-color and gender data from a GitHub gist. D3 scales map RGB values to pixel coordinates, and animated transitions with `d3.easeBounce` adjust circle positions and radii over 1.5 seconds.

LLaurens

88% match

Loading thumbnail…

React + D3 Class template

A React class component wraps a D3.js scatterplot that visualizes student eye colors from a JSON dataset. The plot initially renders circles at raw red and green color values, then transitions them to scaled positions using `d3.scaleLinear` and animates their radius based on blue intensity. The code filters and parses hex color data into RGB components with `d3.json`, and uses SVG circles with `transition.attr` for the animated scaling.

LLaurens

86% match

Loading thumbnail…

Make a scatterplot with d3

This scatterplot visualizes the relationship between the red and green color components of eye colors from a JSON dataset, with each circle's size representing the blue component. Initially, circles are positioned at raw values before animating to their scaled positions on a linear 0–255 axis. The example uses D3 v5 to fetch data via `d3.json`, mutates it with custom parsing functions, then renders SVG circles with `d3.select`, `scaleLinear`, and a `transition` with easing to animate the points.

LLaurens

83% match

Loading thumbnail…

React + D3 Hooks template

This visualization displays a scatterplot of student eye colors, with each circle’s position and size derived from the red, green, and blue components of the eye color. The example shows how to combine React hooks with D3 v5 by using a custom `CirclePlot` component that wraps D3 logic in a `useEffect` hook. It uses `d3.json` to load data from a GitHub gist, filters for valid hex colors, and applies `d3.scaleLinear` with `d3.easeBounce` transitions to animate the circles as they scale.

GGiovanniD_

82% match

Loading thumbnail…

D3 scatter plot with react

This React-based scatter plot demonstrates animated data updates with D3.js. The visualization renders seven circles with distinct colors and sizes, positioned by x/y coordinates, with axes labeled X and Y. Data updates trigger a button click, which initiates D3 transitions using `transition().duration(1000).ease(easeLinear)` for enter animations and faster transitions for updates, while exit animations shrink circles to zero radius. The SVG rendering uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll('circle').join()` for binding data to DOM elements.

JJulien Tremblay

82% match

Loading thumbnail…

Fork of React + D3 Hooks template

This example shows a scatterplot of students' eye colors, encoded as colored circles positioned by their red and green color components, with circle radius representing the blue component. The visualization loads JSON data from a GitHub gist and renders with React and D3 v5, using React hooks such as `useRef` and `useEffect` to integrate D3's data-join and transitions. Circles initially appear at raw coordinates, then animate to scaled positions via `d3.scaleLinear`, `transition.attr`, and `d3.easeBounce`. The D3 selection is made on a React-managed `<g>` element, demonstrating hybrid React-D3 component composition.

SSatpreet Makhija

81% match

Loading thumbnail…

Fork of React + D3 Hooks template

A scatterplot encodes student eye color as a 3D RGB color space, with circle position mapping red and green values and radius mapping blue intensity. The React component fetches JSON data from a GitHub gist, validates hex color codes, and renders SVG circles that animate through transitions with bounce easing. The visualization uses React hooks with a D3 v5 selection and scale API, demonstrating integration of the two libraries through a wrapping SVG container component.

Aaniosindustries

81% match

Loading thumbnail…

Bind data to html with d3

This example demonstrates how to bind external JSON data to SVG elements using D3. The code loads eye color and gender data from a GitHub gist, filters and transforms the entries into valid hexadecimal colors, then sorts them by blue channel value. It binds the data to circles, positioning them horizontally based on their index and coloring each fill with the corresponding eye color. The example uses `d3.json` for data loading, `d3.select` for DOM selection, and the data join pattern with `enter()` and `append()` to create circles without using any scales.

LLaurens

79% match