Skip to main content
SimilarExport ZIP
100%

Fork of Blank Slate with Hot Reloading

✓ Published0🌍 Public
Hhuizhi.bt12@nycu.edu.tw
Last edited Sep 11, 2024
Created on Sep 11, 2024

This example visualizes the classic Iris dataset as a scatter plot, showing petal length against sepal length. Points are colored by iris species according to a categorical scale, with a bespoke color legend positioned in the lower-right corner. The implementation uses D3.js APIs including `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, and `selection.join` to build the chart and its axes declaratively. The code reads CSV data directly and constructs the visualization with the `scatterPlot` module.

AI-generated description

A scatter plot of the Iris Dataset with a color legend.

See also:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

A parallel coordinate plot of the Iris dataset renders 150 flowers across four dimensions (sepal length, sepal width, petal length, petal width) using D3 v7's `d3.scaleLinear` and `d3.scalePoint`. Each line encodes one specimen, colored by species into red, green, and blue via `d3.scaleOrdinal`. Hovering highlights one species by dimming others, while dragging axis labels reorders the dimensions through `d3.drag` with live path updates. The SVG is built from a hash-corrected d3.csv file, though the code contains a typo in the HTML script tag.

Eeyxxr1260@gmail.com
89% match
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This scatter plot of the Iris dataset uses D3 v7 to visualize four measurements, with dropdown menus to select which features appear on the x- and y-axes. It leverages D3’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, drawing circles colored by species via `scaleOrdinal` and `schemeCategory10`, plus a legend. The HTML layout holds the SVG and menus, while the JavaScript updates the chart on selection changes.

JJimmy
89% match
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates a minimal data-loading workflow using the Iris dataset, fetching the CSV file with d3's `csv` method and logging the parsed result to the browser console. The page itself renders as a blank slate with hot reloading, serving as a starting point for further visualization development. The code relies on the `d3.csv` API to asynchronously parse the comma-separated measurements of sepal and petal dimensions for three iris species, though no visual output is generated yet.

CCimmm
86% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example shows a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. Each point is colored by species using a categorical scale, with a color legend identifying setosa, versicolor, and virginica. The visualization uses D3.js APIs including `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `axisLeft`/`axisBottom` for rendering axes. Data is loaded from a CSV file and parsed with `csvParse`.

RRyan Offstein
85% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the classic Iris Dataset as a scatter plot, showing sepal length on the x-axis and petal length on the y-axis. Each of the 150 data points is colored by species using a categorical color scale, with a legend indicating the meaning of each color. The visualization is built with D3 v7, using `d3.scaleLinear` for positioning, `d3.scaleOrdinal` with `schemeCategory10` for colors, and `d3.selection.join` for dynamic element updates. The axes and color legend are implemented as reusable functions that render SVG circles and text elements.

Gg_ivaska@coloradocollege.edu
84% match
Loading thumbnail…

Fork of Scatter Plot with Color

This example visualizes the Iris Dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis, with points colored by species and a color legend for identification. The visualization uses D3 v7 with `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and modular functions for axes and legends. It employs `selection.join` for dynamic element updates and loads data asynchronously via `fetch`, parsing the CSV with `csvParse`. The chart renders in a full-screen SVG with labeled axes and a categorical legend positioned in the plot area.

Ssnehareddygurram
84% match
Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing sepal length against petal length. Each point is colored by species using a categorical color scale from `d3.scaleOrdinal` with `d3.schemeCategory10`. The visualization includes labeled axes and a color legend for species identification. The implementation uses `d3.scaleLinear` for positioning, `d3.extent` for domain calculation, and the `d3.selection` API for declarative rendering. Data is loaded from a CSV file and parsed with `d3.csvParse`.

Bbillmccabeusa@hotmail.com
84% match
Loading thumbnail…

Fork of Scatter Plot with Color

This fork of a scatter plot visualizes the Iris Dataset, showing sepal length against petal length. Each point is colored by species—setosa, versicolor, or virginica—with a custom color legend on the right. Using D3 7.8.5, the code employs `scaleLinear` for axes, `scaleOrdinal` with a custom color array for categorization, and `selection.join` to manage SVG elements. The axes and color legend are separate modules utilizing `axisLeft`, `axisBottom`, and `colorLegend` functions.

HHaili0109
84% match