Fork of Hello HTML

100%

Fork of Hello HTML

✓ Published0🌍 Public

HHao2020560

Last edited Aug 1, 2022

Created on Aug 1, 2022

This example presents a scatter plot of the classic Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It demonstrates a decoupled React and D3 integration pattern, where a custom `useData` hook loads and parses the CSV, while a `viz` function handles scales and rendering using `d3.scaleLinear` and `d3.axisBottom`. The visualization is rendered as SVG circles with coordinated axes, showcasing scalable project structure for future complexity.

AI-generated description

This viz is a starter that demonstrates patterns used in real world projects in which complexity is anticipated to scale.

Decoupled React & D3 integration
Opening moves for scalable complexity
Industry standard ES modules and JSX
Copy-paste into existing projects

Any questions? Ask on Twitter!

Also viewable in:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example shows an interactive scatterplot of the Iris dataset, plotting sepal width against sepal length. The visualization uses React to render SVG elements and d3.scaleLinear for both axes. Data is loaded asynchronously via d3.csv from a GitHub gist, with custom React components like AxisBottom, AxisLeftScatterChart, and CircleMarks composing the chart. The axes display tick marks and labels, while circles represent individual data points, all styled with CSS classes for a clean, readable layout.

IIgor T.

94% match

Loading thumbnail…

Fork of React & D3 Starter

This example shows a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each circle representing a flower sample. The visualization is built with React and D3 v7, using a custom `viz` function that creates linear scales via `d3.scaleLinear` and renders SVG circles with the data join pattern. Axes are added through `d3.axisLeft` and `d3.axisBottom` in a separate module. The code demonstrates a decoupled architecture where React manages the component lifecycle and D3 handles the drawing logic, with data loaded asynchronously via `d3.csv`.

CCheng Tang

91% match

Loading thumbnail…

Fork of React & D3 Starter

This example presents a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It demonstrates a decoupled React and D3 integration pattern for scalable projects, rendering circles as SVG elements within a React component. The code uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while React manages component state and lifecycle. Data is loaded asynchronously from a CSV file using D3’s `csv` function, with the visualization wrapped in a reusable `viz` function.

Ccm

91% match

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a scatterplot of the Iris dataset, plotting sepal length against petal length as semi-transparent circles rendered in SVG. It uses React to manage the component lifecycle, with a `useData` hook loading CSV data via `d3.csv` and a `VizWrapper` component using `useEffect` and `select` to invoke the D3 `viz` function. D3 scales (`scaleLinear`, `extent`) and axes (`axisLeft`, `axisBottom`) are employed, showcasing a decoupled React and D3 integration pattern for scalable projects.

SSofia Nagavkina

91% match

Loading thumbnail…

Fork of Fork of React & D3 Starter-2

This example displays a scatterplot of the classic Iris flower dataset, using sepal length for the x-axis and petal length for the y-axis, with each point drawn as a semi-transparent circle. The visualization is implemented using React for the component structure and D3 v7 for the rendering logic, specifically leveraging D3's `scaleLinear`, `extent`, and axis functions to map data values to pixel coordinates. The SVG output is generated within a React wrapper that uses a `useRef` hook to pass the target element to the D3 visualization function. The data is loaded asynchronously via D3's `csv` parser, and the chart scales to the full size of the browser window.

RROU

91% match

Loading thumbnail…

Fork of React & D3 Starter

This visualization is a scatter plot of the Iris dataset, showing the relationship between sepal length and petal length. It is built using a React front-end with a D3.js backend, where React manages the SVG canvas and D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions handle the scaling and axes. The code demonstrates a decoupled architecture, using a `useData` hook to load CSV data and a `viz` function to render circles and axes, highlighting a pattern for scaling complexity in real-world projects.

DDeegutla123

91% match

Loading thumbnail…

Fork of React & D3 Starter

This example demonstrates a decoupled React and D3 integration using a scatterplot of the Iris dataset. It shows the relationship between sepal length and petal length, with each flower represented as a semi-transparent circle. The visualization is rendered as SVG through React components, while D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` handle the scaling and axes. Data is loaded asynchronously via the `csv` function from d3-fetch, with React's `useState` and `useEffect` managing the data fetching lifecycle.

VVikasSharma

91% match

Loading thumbnail…

Fork of Fork of React & D3 Starter

A scatter plot of the classic Iris flower dataset, mapping sepal length against petal length and rendering each sample as a semi-transparent circle. The visualization is built with React, which manages the interface and data loading, while D3 v7 handles the rendering logic, including linear scales, axes, and SVG circle elements. It serves as a template demonstrating a decoupled React-D3 integration pattern, loading data via D3's CSV parser and using D3's scaleLinear for coordinate mapping.

IIndhuKrishnaraj

91% match