Fork of Stylized Scatter Plot with Color Legend

100%

Fork of Stylized Scatter Plot with Color Legend

✓ Published0🌍 Public

Last edited Mar 7, 2022

Created on Mar 7, 2022

Forked from Fork of Stylized Scatter Plot with Color Legend

This example shows a scatter plot of Iris flower measurements with a color-coded legend for species. The axes represent sepal length and petal length, while each circle is colored by species using a static `d3.scaleOrdinal` with `d3.schemeCategory10`. The code uses `d3.csv` to load external data, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.legendColor` from the d3-legend library to render the color legend. All elements are drawn as SVG circles and text within a single SVG container, with custom CSS styling for guide lines and labels.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot with Color Legend

This D3 v5 visualization displays the Iris dataset, mapping sepal length and petal length along the x and y axes, with species encoded as color. The scatter plot uses circles to represent individual samples. The code loads data from a CSV file, employs `d3.scaleLinear` and `d3.scaleOrdinal` with `d3.schemeCategory10`, and renders axes via `d3.axisBottom` and `d3.axisLeft`. A color legend is added using the `d3.legendColor` API from the d3-legend library.

DDivyaVellanki

94% match

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, using D3 v5 to map sepal length and petal length on the x- and y-axes, with each circle representing an iris flower and colored by species via a categorical color scale and an accompanying legend. The code loads data from a remote CSV using `d3.csv`, builds linear scales with `d3.scaleLinear`, and renders axes and SVG circles. It also leverages the `d3-legend` library’s `legendColor` to draw the color key, with axis labels and grid lines styled through CSS.

DDivyaVellanki

94% match

Loading thumbnail…

Fork of Stylized Scatter Plot with Color Legend

This fork of the stylized scatter plot visualizes the Iris dataset, plotting sepal length against petal length for individual flowers. The code uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for species colors, and the `d3.legend` library to display a color legend. It also utilizes `d3.axisBottom` and `d3.axisLeft` with tick lines spanning the chart, plus axis and legend labels styled via CSS.

DDivyaVellanki

94% match

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

A scatter plot displays the Iris Dataset, mapping petal width to sepal length for individual flowers, with color indicating species. Rendered as SVG via D3 v5, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.legendColor` for the categorical color legend. Axes are styled with grid lines and labels using `d3.axisBottom` and `d3.axisLeft`, while the `d3.schemeCategory10` palette colors the circles.

Nnagamaheswar

93% match

Loading thumbnail…

Fork of Stylized Scatter Plot with Color Legend

This fork of the original stylized scatter plot visualizes the Iris dataset, encoding each flower as a circle positioned by sepal length and petal length, with color distinguishing species. The plot emphasizes clustering patterns among the three species. The visualization uses d3.v5 with SVG rendering, employing linear scales for axes, an ordinal color scale with the category-10 scheme, and the d3-legend library for a color legend. The code loads CSV data via `d3.csv` and customizes axes through `d3.axisBottom` and `d3.axisLeft`.

MMillie White

93% match

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing sepal length against petal length for individual iris flowers, with color encoding species. The visualization uses D3 v5's `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color, and `d3.legendColor` for the color legend. Points are rendered as SVG circles positioned using D3's `axisBottom` and `axisLeft` scales, with the data loaded from a CSV file.

RRohith arabati

92% match

Loading thumbnail…

Fork of Stylized Scatter Plot with Color Legend

This fork of a stylized scatter plot visualizes the Iris Dataset, encoding sepal length on the x-axis, petal length on the y-axis, and species via color. Each circle represents an iris flower, with the color legend identifying the three species. Built with D3 v5, the code uses `d3.scaleLinear`, `d3.scaleOrdinal` with `d3.schemeCategory10`, and the `d3.legend` plugin for the legend. Data is loaded via `d3.csv` from a remote file, and the SVG rendering includes styled axes and a large right-side legend.

Ssaivinay143

92% match

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length with points colored by species. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x and y axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding, and the `d3-legend` library to generate a circle-shaped color legend. The chart features hidden domain lines, styled tick marks, and large axis labels.

DDivyaVellanki

92% match