Nikhil_ice7

100%

✓ Published0🌍 Public

Last edited Mar 30, 2023

Created on Mar 30, 2023

This scatter plot visualizes the Iris dataset, mapping petal length and petal width as the primary axes while encoding sepal length and sepal width into the ellipse-shaped markers’ horizontal and vertical radii. Each species (setosa, versicolor, virginica) is distinguished by color, with pink, black, and yellow fills respectively. Built with D3 v6 and React, it loads CSV data asynchronously, uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to construct the axes, and renders SVG circles with dynamic `rx` and `ry` attributes. The visualization fills the browser window, with axis labels rotated and styled via CSS.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower specimen while coloring points by species (setosa, versicolor, or virginica). Built with D3 v6 and React, it uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for ticks. The SVG circles use attributes `rx` and `ry` to encode sepal dimensions, though these are not visually discernible because the radius remains fixed. The plot fills the viewport with axis labels in red.

Nnikhilagopi

91% match

Loading thumbnail…

ScatterPlot_ICE6

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring each point by species (setosa, versicolor, or virginica). The axes are labeled with sepal length and petal length, though the data encoding uses petal dimensions for positioning and sepal dimensions as circle radii. Built with React and d3.v6, the example loads CSV data via `d3.csv`, applies `scaleLinear` and `extent` for scales, and renders SVG circles with attributes driven by the parsed numeric fields. Axis generation uses `axisLeft` and `axisBottom`.

Bbindusreeja

90% match

Loading thumbnail…

ic6 scattered plot

This visualization displays the Iris dataset as a scatter plot, encoding petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa in light green, versicolor in purple, and virginica in red). The code loads CSV data via `d3.csv`, parses numeric columns, and uses `d3.scaleLinear` with `d3.extent` to set the scales and `d3.axisLeft`/`d3.axisBottom` for the axes. It renders circles with SVG, though it also attempts to set `rx` and `ry` attributes (using sepal measurements) for each mark, a quirk that has no visual effect on circles. The chart is built in React with D3 v6, filling the browser window and labeling axes as "Petal length" and "Sepal length."

Ddivyagunuguntla

89% match

Loading thumbnail…

Untitled

This scatter plot visualizes the Iris dataset, encoding petal length and petal width as x and y coordinates, while coloring each point by species. The code also reads sepal length and width values into the `rx` and `ry` attributes of each circle, though these do not affect the visual rendering since `r` is set to a fixed radius. Built with React and D3 v6, it uses `d3.csv` for data loading, `d3.scaleLinear` for scales, and `d3.axisLeft`/`d3.axisBottom` for axes with custom labels.

SSrilekha24

89% match

Loading thumbnail…

iris data set

This scatter plot visualizes the iris data set, mapping petal length and petal width for each sample while coloring points by species (setosa, versicolor, virginica) using blue, red, and purple. The visualization also encodes sepal dimensions as the `rx` and `ry` attributes of the circles, though these do not affect the visible radius. Built with D3 v6 in React, the code loads CSV data via `d3.csv`, scales axes with `scaleLinear` and `extent`, and renders circles and axes using SVG selections and `axisLeft`/`axisBottom`.

RRakshithaRao27

89% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis for each flower specimen. Rendered as SVG circles with fixed radius, the chart uses D3’s `scaleLinear` functions for both axes, with axis ticks generated by custom React components. The code leverages React hooks (`useState`, `useEffect`, `useCallback`) to asynchronously load the CSV data via D3’s `csv` method, parsing numeric fields before display. Axis labels and tick formatting are applied through D3’s `format` utility, with tooltips provided by SVG `<title>` elements.

NNikithakatta30

89% match

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica) via a custom color function. The circles also encode sepal length and width as non-visual properties (rx and ry), though only a fixed radius is rendered. Built with D3 v6, the code loads CSV data using `d3.csv`, applies `scaleLinear` and `extent` for scaling, and renders axes via `axisLeft` and `axisBottom`. The SVG canvas fills the window, with a bottom margin accommodating custom axis labels for sepal length.

RRadhakrishna246

89% match

Loading thumbnail…

Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring each point by species (setosa, versicolor, or virginica). It uses D3 v6 within a React-free HTML page, leveraging `d3.csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. Circles are rendered via SVG with a fixed radius, and the code also destructures sepal dimensions but only uses them as unused attributes on each circle, not for positioning. The visualization fills the browser window with a large bottom margin.

RRohith arabati

89% match