Skip to main content
SimilarExport ZIP
100%

Adding Color Legend, ScatterPlot (codeAlong)

✓ Published1🌍 Public
Ttomahawk-jupiter
Last edited Jun 8, 2021
Created on Jun 8, 2021

This visualization is an interactive scatter plot of the Iris dataset, mapping sepal and petal measurements to the x and y axes while encoding the iris species with a color legend. The graph uses an ordinal color scale to map the species categories to distinct colors, displayed in a dedicated legend. Built with React and D3 v6, it renders as an SVG and includes dropdown menus for selecting which attributes to display on each axis. The code utilizes D3’s `scaleLinear`, `scaleOrdinal`, `extent`, and `csv` functions to process data and scale values.

AI-generated description

Map data to color using an ordinal scale.

Curran Kelleher tutorial Vid 8:06 aprox

MIT Licensed

Similar vizzes

Loading thumbnail…

Adding Color ScatterPlot (codeAlong)

This interactive scatterplot visualizes the Iris flower dataset, mapping sepal and petal measurements along the axes while coloring each point by species using a d3.scaleOrdinal. Users can switch between the four measurement attributes for either axis via React dropdown menus. The visualization uses d3.csv to load data, d3.scaleLinear for positioning, and renders SVG circles with native title tooltips, following Curran Kelleher’s code-along tutorial.

Ttomahawk-jupiter
93% match
Loading thumbnail…

Interactive Color Legend, ScatterPlot (codeAlong)

This interactive scatterplot displays the Iris flower dataset, plotting sepal and petal measurements selected via dropdown menus. The visualization uses d3.scaleOrdinal to map species to colors and includes a color legend that filters points with mouse hover, dimming non-matching species. Built with React and d3.v6, it renders SVG marks and axes, with the legend responding to hover events to highlight specific species groups.

Ttomahawk-jupiter
93% match
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing how flower measurements correlate across species. The visualization allows interactive exploration by letting users select which sepal or petal attributes appear on the x and y axes via dropdown menus. Using React and D3 v7, the chart renders SVG circles colored by species through a `scaleOrdinal` color scale, with axes generated by custom `AxisBottom` and `AxisLeft` components and a supplementary `ColorLegend`. Data loads asynchronously via D3’s `csv` parser from a remote GitHub gist.

TThomas Cormican
90% match
Loading thumbnail…

Scatter Plot with Color Legend

This visualization displays the classic Iris dataset as an SVG scatter plot, mapping petal length against sepal width and coloring each point by species. A color legend appears on the right, identifying the three iris species with distinct hues. Built with React and D3 v5, the code uses `scaleLinear` for both axes, `scaleOrdinal` for color mapping, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ColorLegend`) to render ticks, circles, and legend items. Data loads asynchronously via D3's `csv` parser, which also converts numeric fields.

AAdriana Rodriguez Sanabria
89% match
Loading thumbnail…

Interactive Scatter Plot With Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width and coloring points by species. A color legend allows users to hover over species labels to highlight only the corresponding data points while dimming others. The visualization is built with React and D3 v5, using d3.scaleLinear for positioning, d3.scaleOrdinal for categorical colors, and custom SVG components for axes and marks. Data loads asynchronously via d3.csv from a GitHub gist.

KKolezhannochka
89% match
Loading thumbnail…

Making A Color Legend

This interactive scatter plot visualizes the classic Iris dataset, mapping petal length against sepal width. Each point is colored by species using a `d3.scaleOrdinal` color scale, with a custom color legend built from React components that displays the species names alongside colored circles. The visualization uses `d3.scaleLinear` for both axes, includes formatted tick labels, and incorporates tooltips via SVG `<title>` elements. Rendering is done through React and D3 v5, with data loaded asynchronously from a CSV file.

MMichael Bergerson
89% match
Loading thumbnail…

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, allowing users to compare sepal and petal measurements across three flower species through dropdown menus for the x and y axes. Each point is colored by species using a d3.scaleOrdinal color scale with an accompanying legend. Built with React and D3 v6, the visualization renders as an SVG and uses d3.scaleLinear for axes, d3.extent for domain calculation, and d3.csv for data loading.

LLaura Johnson
89% match
Loading thumbnail…

Scatter plot with Colors Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements along the x- and y-axes while using color to distinguish species. Users can select which attributes to plot from dropdown menus. The visualization uses React with D3’s `scaleLinear` for axes, `scaleOrdinal` for color encoding, and renders SVG circles with tooltips. A color legend maps species to distinct colors, with axis labels and tick marks generated by custom React components.

Kkragovic
89% match