Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

100%

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

✓ Published0🌍 Public

Last edited Mar 27, 2022

Created on Mar 27, 2022

Forked from ICE - 7 Reusable Scatter Plot Maanas Katta

This scatter plot visualizes the Iris dataset, displaying the relationship between petal width and sepal length. Each circle represents a flower, colored by species: grey for setosa, green for versicolor, and pink for virginica. The visualization uses D3.js's `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render axes and the `join` operation for SVG circles. Data is loaded via `d3.csv` from a GitHub gist, with the plot rendered as an SVG, and the code demonstrates a reusable `scatterPlot` function with configurable dimensions, margins, and radius.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This interactive scatter plot visualizes the Iris flower dataset, mapping petal width and sepal length on the x- and y-axes. Each circle represents a data point, colored by species (blue for setosa, red for versicolor, yellow for virginica) with white strokes. The visualization uses d3.scaleLinear, axisLeft, axisBottom, and a reusable scatterPlot function built with D3 v6. SVG rendering displays the axes and circles, with the plot dynamically updating when the x-value column cycles through dataset attributes. Data loads from a remote CSV file via d3.csv.

BBajiSharifPatan@my.unt.edu

97% match

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

A reusable D3 scatter plot displays the Iris dataset, mapping petal width against sepal length. Each circle’s color encodes the species (setosa in blue, versicolor in red, virginica in yellow), with white strokes and labeled axes. Built using `d3.csv`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, the plot updates via a configurable `scatterPlot` module, iterating through data columns. The visualization renders in SVG on a black background with white text, emphasizing interactive reuse of axes and data bindings.

VVenkata Rajashekar Reddy Chinthala

95% match

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length and coloring each point by species (blue, red, or yellow). The visualization is implemented as a reusable D3 module, `scatterPlot`, which uses `scaleLinear` to compute axes and `axisBottom`/`axisLeft` to render them. Data is loaded via `csv` and drawn as SVG circles with white strokes. The chart adapts to the full window size and includes axes labeled with the data values.

Mmandalasaikrishna007

95% match

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This interactive scatter plot visualizes the Iris dataset, plotting petal width against sepal length for individual flowers. The reusable `scatterPlot` module uses D3 scales, axes, and SVG circles to render the data, with colors distinguishing the three iris species. The chart runs inside a full-screen green page, and the axes and circles are drawn with white strokes for contrast on dark backgrounds.

RRadhakrishna246

95% match

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This scatter plot visualizes the Iris dataset, displaying sepal length against petal width with points colored by species (setosa, versicolor, and virginica). The visualization uses D3.js version 6.7.0 with reusable module patterns, employing `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes. Data is loaded asynchronously via `csv` and parsed into numeric values, with SVG circles rendered for each data point. The black background and white axes create high contrast, while the `Share Tech` font adds a technical aesthetic to the axis labels.

SSnapika

95% match

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This interactive scatter plot visualizes the Iris flower dataset, mapping petal width and sepal length with color-coded species (blue, red, yellow). Built using D3 v6, it employs reusable chart components through `scatterPlot()` with `scaleLinear`, `axisLeft`, and `axisBottom` for axes. The SVG renders animated circles with white strokes, while data is loaded via `d3.csv` from a remote URL. Dynamic resizing adapts to the viewport, and commented code shows potential for cycling through different column pairings over time.

RRadhakrishna246

94% match

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This example displays a scatter plot of Iris flower data, with each point colored by species: blue for setosa, red for versicolor, and yellow for virginica. It uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map petal measurements to coordinates and render axes, while circles are drawn via selection joins with `.attr` for positioning and styling. The plot is built as a reusable function with configurable width, height, margin, and radius, and appears on a black background with white axis labels.

Sshreyasribearelly@gmail.com

94% match

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This animated scatter plot from D3.js (v6.7.0) visualizes the classic Iris flower dataset, cycling through four numeric attributes (petal width, sepal width, petal length, and sepal length) every two seconds. Each point represents a flower specimen, colored by species: blue for setosa, red for versicolor, and yellow for virginica. The reusable `scatterPlot` module builds the plot using `scaleLinear`, `axisLeft`, and `axisBottom`, rendering SVG circles with white strokes. The animation employs `setInterval` to reassign the x-axis mapping and redraw the marks, driven by data fetched via `csv` from a GitHub Gist URL.

MMgk1255

94% match