Fork of Scatter Plot with Color Legend

Fork of Scatter Plot with Color Legend

This visualization displays the classic Iris dataset as a scatter plot, mapping petal length against sepal width, with points colored by species and accompanied by a color legend. Built with React and D3 v5, it uses d3.scaleLinear for the x and y axes and d3.scaleOrdinal for the categorical color encoding. The SVG rendering separates axis, legend, and mark components, with circle elements representing each flower. Data is loaded asynchronously via d3.csv from a GitHub gist, and tick formatting uses d3.format for compact notation.

Ffaqihisaninja

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width with each of the three species colored distinctly. The visualization uses React components to render SVG marks, with d3.scaleLinear for the x and y axes and d3.scaleOrdinal for the categorical color mapping. A color legend identifies species, and axes are generated from d3’s tick formatting. The data is loaded asynchronously using d3.csv, while the tooltip displays the petal length value on hover.

NNicolás Troncoso

Fork of Scatter Plot with Color Legend

This scatter plot of the Iris Dataset maps petal length on the x-axis and sepal width on the y-axis, with each point colored by species via d3.scaleOrdinal. A color legend lists the three species using the same color scale, and axes are rendered as SVG ticks with formatted labels. The visualization is built with React components and d3’s scaleLinear for positioning, with the data loaded asynchronously via d3.csv.

AAnnie Ulichney

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width for 150 flowers. A color legend encodes species, and hovering over a legend item highlights that species by reducing the opacity of all other points. The code uses React with SVG rendering, d3.scaleLinear for axes, d3.scaleOrdinal for colors, and custom React components for marks and legends.

SSam

Fork of Scatter Plot with Color Legend

This visualization uses a scatter plot to explore the classic Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis, with points colored by species via an ordinal color scale and SVG circles. The chart includes custom React components for axes and a discrete color legend, built with d3.scaleLinear, d3.scaleOrdinal, and d3.extent for domain computation. The data is loaded asynchronously using d3.csv, and the SVG rendering is handled through React’s JSX syntax.

YYedrup

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width and coloring each point by species. The visualization includes axes, tick marks, a species color legend with circular swatches, and hover tooltips displaying formatted x-values. Built with React and D3 v5, it uses `scaleLinear` for positional encoding, `scaleOrdinal` for categorical colors, and `csv` for data loading. The SVG rendering includes custom axis components and circular marks, with the legend positioned to the right of the plot area.

DDanier

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal length and sepal width along the x and y axes while coloring each point by species. The visualization includes an interactive color legend on the right side, allowing viewers to distinguish between the three iris species. Built with React and D3 v5, the chart uses d3.scaleLinear for the axes and d3.scaleOrdinal for color encoding. Native SVG elements render the circles and legend, with d3.csv loading the dataset and reusable components managing axis and mark rendering.

SSandyWu7179290504

Fork of Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, mapping petal length and sepal width for individual flowers. Each circle is colored by species using a categorical scale, with a legend displaying the three species names. The React application uses d3’s `scaleLinear` for axes, `scaleOrdinal` for colors, and `csv` to load data. Axes, marks, and the legend are rendered as SVG components, and hovering shows a tooltip with the x-axis value.

Eevers-codeshop-ai