Skip to main content
SimilarExport ZIP
100%

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

✓ Published0🌍 Public
Ddheeraj1509
Last edited Mar 7, 2023
Created on Mar 7, 2023

This example displays a scatter plot of penguin data that cycles through different x-axis attributes every two seconds, showing how the distribution shifts when petal width, sepal width, petal length, or sepal length is plotted against sepal length. Data points are colored by species (setosa, versicolor, virginica) using blue, red, and yellow fills, with white axis labels and strokes. The visualization builds a reusable chart using D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `setInterval` for animation. It loads CSV data from a GitHub gist and renders SVG circles on a black background.

AI-generated description
MIT Licensed

Similar vizzes

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
90% match
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This interactive scatter plot visualizes animal measurements, mapping features like petal width and sepal length to Cartesian coordinates while color-coding data points by species (red, blue, or green). Built with D3.js v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, and SVG circles for marks. The reusable `scatterPlot` function supports dynamic column switching via a cycling array, updating the x-axis mapping on each call. Data loads from a remote CSV URL and renders inside a black-themed viewport with custom typography, highlighting a modular approach to chart construction.

VVenkata Rajashekar Reddy Chinthala
90% 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 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
89% 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
89% 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
88% match
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot Maanas Katta

This animated scatter plot cycles through different iris flower measurements, plotting petal width, sepal width, petal length, and sepal length every two seconds. The visualization uses the D3.js library's `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll` APIs to render SVG circles and axes. Data comes from the classic Iris dataset loaded via D3's `csv` function. Circle colors encode species—blue for setosa, red for versicolor, yellow for virginica—while a black background and white axis labels maintain high contrast throughout the animation.

Eeravellisaimeghana
88% 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
88% match
Loading thumbnail…

Fork of Fork of ICE - 6 Scatter Plot

This scatter plot visualizes the penguin dataset, mapping petal length and width as x and y coordinates while sepal length and width are redundantly encoded as circle radii. The D3 v6 code loads CSV data, applies linear scales, and renders colored circles for each species using `scaleLinear`, `extent`, and `axisLeft`/`axisBottom`. The SVG output uses the `join` operator to create marks, with axis labels styled in red and purple.

RRahulChaitu999
88% match