Beer Explorer React

100%

Beer Explorer React

✓ Published0🌍 Public

Last edited Oct 22, 2024

Created on Oct 22, 2024

This example visualizes the classic Iris dataset as a scatter plot, with sepal length on the x-axis and petal length on the y-axis, using SVG circles to represent each flower sample. The visualization is built using React for component management and D3 for rendering, specifically employing `d3.scaleLinear` for coordinate scaling and `d3.axisLeft`/`d3.axisBottom` for the axes. Data is loaded asynchronously from a CSV file via a custom `useData` hook and D3's `csv` parser. The code demonstrates a decoupled architecture where D3 handles the SVG manipulation within a React wrapper, suitable for scaling to more complex projects.

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…

Iris Data Set

This example visualizes the Iris flower dataset as a scatter plot, showing the relationship between petal length and sepal width for individual samples. Using React with d3.scaleLinear for both axes and d3.extent for domains, the plot renders SVG circles with native tooltips via <title> elements. The code loads CSV data through d3.csv, formats tick labels with d3.format, and includes custom axis components. A loading state displays "Loading..." text while the data fetch is in progress.

TTaweewat Somboonpanyakul

88% match

Loading thumbnail…

React & D3 Scatter Plot

This React & D3 scatter plot visualizes the classic Iris dataset, plotting sepal length against petal length. Each circle represents a flower sample, with the visualization built using an SVG rendering approach. The code demonstrates a decoupled architecture where React manages the component lifecycle and D3 handles the rendering logic. It uses `d3.scaleLinear` for coordinate mapping, `d3.extent` for domain calculation, and `d3.axisLeft`/`d3.axisBottom` for chart axes, all within a modular structure that scales well for complex projects.

Bbrunotrindademachado

87% match

Loading thumbnail…

Iris data

This scatterplot displays the Iris flower dataset, plotting petal length against sepal width for individual flowers. The visualization uses React with D3 v7’s `scaleLinear` and `extent` functions to map the data to SVG coordinates, rendering each sample as a circle. Axes are generated via custom components, with tick marks and labels styled through CSS. The data is loaded asynchronously from a remote CSV using D3’s `csv` function, and the chart includes tooltip formatting for x-axis values.

JJosh Zalcman

87% match

Loading thumbnail…

react scatterplot iris data

This interactive scatterplot visualizes the Iris dataset, plotting sepal width against petal length for individual flowers. Each point is rendered as a circle using React components that leverage d3.scaleLinear for x and y positioning, with d3.extent determining the domain. The visualization includes axes generated by custom AxisBottom and AxisLeft components, plus formatting via d3.format. Data loads asynchronously from a CSV using d3.csv within a React hook, and tooltips display formatted values through SVG title elements.

MMalcolm Mead

86% match

Loading thumbnail…

React & D3 Starter

A scatter plot of the Iris dataset shows sepal length against petal length, with each of the 150 flowers represented as a semi-transparent circle. The visualization demonstrates a decoupled React and D3 integration pattern, where React manages the SVG container and D3 handles the rendering logic. The code uses d3.csv for data loading, d3.scaleLinear for scaling, and d3.axisLeft and d3.axisBottom for the axes.

AAnish Lamsal

86% match

Loading thumbnail…

D3 + React

This example shows a scatterplot of the classic Iris dataset, plotting sepal length against petal length. It uses React for component structure and state management, while D3 modules handle the data-driven visualization: `d3.csv` loads the data, `d3.scaleLinear` and `d3.extent` set the scales, and `d3.axisLeft`/`d3.axisBottom` draw the axes. The SVG circles are rendered via D3 selections within a React effect, bridging the two libraries.

SSubhendu Karmakar

86% match

Loading thumbnail…

Scatterplot with Iris Data

This scatterplot visualizes the classic Iris dataset, plotting sepal length against sepal width for individual flower samples. Built with React and D3 v7, the visualization renders as an SVG, using `d3.csv` to load data from a GitHub-hosted CSV file. The code employs D3's `scaleLinear` for axis scaling, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Each data point appears as a filled circle with a tooltip showing its sepal length value, while the axes are labeled "Sepal Length" and "Sepal Width." The visualization demonstrates a clean, functional scatterplot with interactive hover details.

AArefa Patwary

86% match

Loading thumbnail…

Basic Scatter Plot with React & D3

This example shows the classic Iris flower dataset in a basic scatter plot. It plots sepal length on the x-axis against sepal width on the y-axis, with each of the 150 data points rendered as a small black circle. The code uses React for component state and effects, while D3 v7’s `select`, `scaleLinear`, and `extent` functions handle the SVG element selection and linear scale mapping. The data is loaded from a CSV file using D3’s `csv` method and passed to a reusable `viz` function for rendering, following a clean separation between React and D3 logic.

BBismark Kofi Owusu Sarfo

86% match