Scatter Plots: Part 3 - Colors and Legend

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

Scatter Plot Iris with Color Legend

An interactive scatter plot of the Iris dataset with dropdown menus to select the x and y axes shows the relationship between sepal and petal measurements. The visualization uses React for the UI, d3.v7's scaleLinear, scaleOrdinal, and extent for scales, and renders as SVG with color-coded circles representing species. A color legend identifies the three Iris species, while axis labels and dropdown selectors update dynamically as users change the plotted attributes.

EEFezerKW

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris dataset, letting users compare sepal and petal measurements across flower species. Users switch the x and y axes via React Dropdown menus, while three colors distinguish species through a custom color legend. The visualization is built with React and D3 v5, using scaleLinear for axes and scaleOrdinal for color mapping, with SVG circles rendered by a Marks component and data loaded asynchronously via d3.csv.

Aadewole-top

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

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other. Users select X and Y axes from dropdown menus, with points colored by species and a color legend identifying the three categories. The visualization uses D3 v5 scales and axes (scaleLinear, AxisBottom, AxisLeft) within a React framework, rendering SVG circles via the Marks component. Data is loaded asynchronously from a CSV file using d3.csv, with ordinal color encoding via d3.scaleOrdinal and react-dropdown handling user selections.

Ccynichole

ScatterPlot with Colour Legend

This interactive scatterplot visualizes the Iris flower dataset, comparing sepal and petal measurements across three species. Users can dynamically select which attributes to plot on the X and Y axes via dropdown menus, with points colored by species using a d3.scaleOrdinal legend. Built with React and D3 v6, the SVG visualization renders axes and circular marks through reusable components, while d3.csv loads the data and d3.extent computes scale domains for responsive axis ranges.

PPadoSensei

Scatterplot with Color Legend

This interactive scatterplot displays the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that control the x and y axes. Each point represents an iris flower, colored by species with a corresponding legend. The visualization uses React components and D3 v7 scales (d3.scaleLinear, d3.scaleOrdinal) to render SVG marks and axes from CSV data.

JJun Suzuki

Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris flower dataset, enabling users to explore relationships between sepal and petal measurements across three species. The visualization uses d3.scaleLinear for x and y positioning, d3.scaleOrdinal for color encoding by species, and renders marks as SVG circles. React state management updates dropdown selections for axes, while d3.csv loads the external dataset. A color legend using d3.scaleOrdinal domain values identifies species, with axes built through custom React components.

Ee-ines