Fork of React + D3 Viz Starter

100%

Fork of React + D3 Viz Starter

✓ Published0🌍 Public

Last edited Jul 18, 2021

Created on Jun 16, 2021

This interactive scatterplot visualizes the Iris dataset, allowing users to select which attributes to compare on the x- and y-axes via dropdown menus. The SVG rendering uses React state to manage the selected axes and a D3 ordinal color scale to distinguish the three species. Hovering over the color legend highlights points belonging to that species by reducing the opacity of others. The chart follows the margin convention and displays axis tick lines using D3 scales.

AI-generated description

Boilerplate code for a React + D3 visualization with:

CDN links for React, ReactDOM, and D3
Basic React boilerplate
Variables for dimensions and margins
A VizContainer component that:
- Abstracts SVG/group container elements
- Follows the margin convention
- Show the margins, which can be easily removed by deleting the showMargins={true} prop

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Starter

This example visualizes the classic Iris dataset as a scatter plot, where users select which of the four flower measurements to display on the X and Y axes through dropdown menus, and points are colored by species. The visualization uses React for state management and component structure, while D3 v7 handles data loading, scales, axes, and SVG circle rendering. A custom `viz` function builds the chart, and D3's `scaleLinear` and `extent` are used for positioning, with `axisBottom` and `axisLeft` generating the axes.

YYang Shun Yu

92% match

Loading thumbnail…

Fork of dv.35 - interactive color legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements with points colored by species. Users can select which attributes appear on the x and y axes via React Dropdown menus or swap them with the AxisSwap button. Hovering over the color legend highlights circles of that species by reducing the opacity of others. The visualization uses React with D3 v6 scales (scaleLinear, scaleOrdinal), SVG rendering, and custom axis and legend components.

Eeourm20

91% match

Loading thumbnail…

Fork of Scatter plot with color legend

This visualization displays the Iris dataset using an interactive scatter plot with linked dropdown menus for selecting the X and Y axes. Each point represents a flower specimen, colored by species with a corresponding color legend on the right side. The code uses React with hooks for state management and d3-scale's scaleLinear, scaleOrdinal, and extent functions, while rendering axes and marks as SVG elements through custom React components.

SShuyu Zheng

90% match

Loading thumbnail…

Fork of polished scatterplot with color

This interactive scatterplot visualizes the Iris flower dataset, allowing users to select which numeric attributes appear on the X and Y axes via ReactDropdown menus. The plot encodes flower species through a d3.scaleOrdinal color scale applied to circle marks. The visualization is built with React and D3 v7, using d3.scaleLinear for axes, d3.extent for domains, and d3.csv to load the remote dataset. SVG rendering displays axes and marks, with a tooltip via the title element.

BBlake McCarty

90% match

Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset with color-coded markers for species. Built with React and D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with SVG circles for rendering. An animated `setInterval` cycles the x-axis through different flower measurements. CSS styling uses the Share Tech font, and the legend labels each species with distinctive colors.

Hhm0421

90% match

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width. A React component renders SVG circles colored by species using d3.scaleOrdinal, while d3.scaleLinear handles x and y positioning. Hovering over the color legend highlights points of that species and fades all others to 20% opacity. Axes are built with custom React tick components, and data loads asynchronously via d3.csv.

YYedrup

90% match

Loading thumbnail…

Fork of Interactive Color Legend

YYedrup

90% match

Loading thumbnail…

Fork of Scatter plot with color legend

This fork of a scatter plot visualizes the classic Iris dataset, allowing interactive exploration of relationships between sepal and petal measurements. The React-based graphic uses D3 scale functions (`scaleLinear`, `scaleOrdinal`) to map data attributes to x/y positions and categorical species to a color legend. Two dropdown menus let users select which numerical attributes to compare, while the SVG rendering updates immediately. The color legend encodes the three Iris species using distinct hues. The code demonstrates a modular approach with separate components for axes, marks, and the legend, using D3 utilities for data loading, scaling, and tick formatting.

LLewis Ward

90% match