Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
Mmadalahyndavi123@gmail.com
Last edited Oct 19, 2025
Created on Oct 19, 2025
Forked from HTML Starter

The visualization displays the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis and sepal width on the y-axis for 150 samples. Each point is color-coded by species (setosa, versicolor, virginica), with tooltips revealing the exact measurements on hover. Built with D3 v7, the SVG chart uses `d3.csv` to load data, `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and `d3.axisBottom`/`d3.axisLeft` for ticks. A legend and animated tooltip transitions provide clear interaction.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis while coloring each point by species (setosa, versicolor, virginica). The code loads the CSV data via D3's `d3.csv`, uses `scaleLinear` for both axes, and renders SVG circles with species-specific fills. Axis labels and ticks are generated using `axisLeft` and `axisBottom`, with the chart sized to the full window. This is a React-based D3 v6 example, rendered entirely in SVG.

Ssahithya.voleti@gmail.com
92% match
Loading thumbnail…

Fork of HTML Starter

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis, petal length to the y-axis, and species to point shapes. It uses the D3.js v7 library with the `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` APIs to position and render the marks. The visualization also incorporates `axisLeft` and `axisBottom` for chart axes, and a custom shape legend generated with `symbolGenerator`. Data is loaded asynchronously from a CSV file using `csvParse` and rendered into a responsive full-viewport SVG.

Ssahithya.voleti@gmail.com
92% match
Loading thumbnail…

Fork of HTML Starter

This visualization displays a scatter plot of the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. It uses D3.js v7’s declarative API, including `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom`, within a minimal HTML page. The SVG canvas fills the browser window, with circles sized at radius 5. Data is fetched as CSV from a remote Gist and parsed into numeric fields before being scaled and rendered. The example demonstrates a concise, modern D3 workflow for building interactive plots.

Mmauleendertse@gmail.com
91% match
Loading thumbnail…

Fork of D3 Starter

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with points colored by species. Using d3.csv to load the data, it employs d3.scaleLinear for both axes and d3.scaleOrdinal with d3.schemeTableau10 for color encoding. The SVG output includes axes via d3.axisBottom and d3.axisLeft, interactive hover tooltips through appended circles and title elements, plus a legend and axis labels. The chart is rendered entirely with d3.v7 and SVG elements.

AAnurup Reddy
91% match
Loading thumbnail…

Fork of HTML Starter

This example visualizes the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. It uses D3 v7’s `csv` loader to fetch and parse the data, then renders circles with `scaleLinear`, `extent`, and axis helpers `axisLeft` and `axisBottom`. The plot is drawn as SVG, sized to the browser window, with fixed margins and no interactivity.

GGT-GillesTeuwen
90% match
Loading thumbnail…

Fork of HTML Starter

This scatterplot visualizes the Iris dataset, plotting sepal length against petal length for each flower. The code uses D3 v7 to load the CSV data, creates linear scales for both axes, and renders individual tomato-colored circles. SVG is used for the chart, with D3’s axis generators adding labeled bottom and left axes, plus a chart title.

Yyazneshpara2@gmail.com
89% match
Loading thumbnail…

Fork of Fork of HTML Starter (reusable charts

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The chart uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data points to SVG circles, with axis labels generated accordingly. Two dropdown menus built with a custom `menu()` function let viewers switch which numeric columns are plotted on the x- and y-axes. Data is loaded asynchronously via D3’s `csv` method, and the visualization fills the browser window.

Mmauleendertse@gmail.com
88% match
Loading thumbnail…

Fork of 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.

DDonald Bagwell
88% match