Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
DDonald Bagwell
Last edited Mar 10, 2024
Created on Feb 18, 2024
Forked from HTML Starter

This interactive scatter plot visualizes the classic Iris dataset, showing the relationship between sepal length and petal width for 150 flowers. Built with React and D3 v7, the visualization cycles through different column combinations every two seconds, updating the x-axis scale and re-rendering the SVG circles using a custom `scatterPlot` function. The code leverages D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and draw axes, while the animation is driven by `setInterval` and repeated calls to the chart’s render function. Circle positions are recalculated dynamically as the selected variable changes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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 Fork of React & D3 Starter

This scatterplot visualizes the Iris dataset, plotting sepal length against petal length with semi-transparent circles. It demonstrates a scalable React and D3 integration, using React hooks (useState, useEffect, useRef) to manage data loading and the component lifecycle. D3 v7 handles SVG rendering and scales, including axis generation via d3.axisLeft and d3.axisBottom. The visualization fills the browser window, encoding each flower measurement as a point.

RRevanthGrreddy
90% match
Loading thumbnail…

Fork of Fork of reusable D3 Scatter Plot (animated 2)

This animated scatter plot displays the Iris flower dataset, cycling through four measured attributes (petal width, sepal width, petal length, and sepal length) on the x-axis every six seconds. Built with React and D3 v7, it uses a reusable `scatterPlot` module with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Circles transition smoothly via `transition().duration(1000)` with staggered delays, while axes animate concurrently. Data loads from a CSV via `d3.csv` and renders as SVG with D3’s data join and enter/update/exit pattern.

PPeiyang Li
90% match
Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot animates through different pairs of Iris flower measurements, cycling petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. Built with React and D3.js (version 6.7), it uses `scaleLinear`, `axisLeft`, `axisBottom`, and `scatterPlot` to render SVG circles colored by species (setosa, versicolor, virginica), with a legend and axis labels. The animation updates every interval via `setInterval`, redrawing the plot with new column selections. Data originates from a CSV of Iris measurements fetched from a GitHub gist.

Mmanishcheruku
90% match
Loading thumbnail…

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements across four rotating combinations of axes. The chart cycles through different variable pairings every few seconds, with each of the three iris species color-coded by its species name. Built using D3 v6 and React, the visualization employs `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for tick rendering, and SVG circles for scatter marks. A custom legend and descriptive axis labels are included, while the animation uses `setInterval` to update the chart's x-value mapping.

SSUSHMA CHIRRA
90% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing petal width against sepal length with points colored by species. It uses d3.csv to load data from a GitHub Gist, d3.scaleOrdinal for color mapping, and d3.scaleLinear for axes. A setInterval cycles through different variable pairings every two seconds, animating the chart via reusable scatterPlot component that updates SVG circles.

MMar-99
90% 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
90% 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
90% match