Skip to main content
SimilarExport ZIP
100%

Fork of ICE - 7 Reusable Scatter Plot

✓ Published1🌍 Public
Pprajoth0405
Last edited Mar 27, 2022
Created on Mar 27, 2022

This scatter plot visualizes the Iris flower dataset, mapping petal width against sepal length and coloring each point by species—blue for setosa, red for versicolor, and yellow for virginica. The code uses d3’s `csv` loader, `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, with SVG circles for data marks. A reusable `scatterPlot` function encapsulates the chart, allowing dynamic updates to the x-axis value, cycling through dataset columns. The black background and white axis text use the Share Tech font, creating a stark, readable display.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

This scatter plot visualizes the Iris flower dataset, positioning each specimen by its petal width against sepal length with a fixed channel mapping color to species (red for setosa, orange for versicolor, white for virginica). Built with D3 v6, it leverages the `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to construct axes and render SVG circles. The visualization demonstrates a reusable scatter plot module that updates its x-axis mapping cyclically through the dataset’s numeric columns, though the current example only displays one configuration.

RRadhakrishna246
93% match
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

A reusable scatter plot built with D3 v6 displays Iris flower measurements, mapping petal width against sepal length and coloring each point by species (white, red, or green). The `scatterPlot` function encapsulates scales, axes, and circle rendering using `scaleLinear`, `axisBottom`, and `axisLeft`. Data loads from a CSV via `d3.csv` and parses numeric fields. The view fills the browser window with an orange background, and the script cycles through four measurement columns as the x-value, though only the initial petal-width view renders visibly.

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

Fork of ICE 7-1 Reusable Scatter Plot

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length with points colored and shaped by species—setosa, versicolor, and virginica. Built with D3 v6, it uses scaleLinear, scaleOrdinal, axisLeft, axisBottom, and symbol generators to render SVG marks. The axes dynamically cycle through different measurement columns every ten seconds via setInterval, updating the chart through a reusable closure-based chart function that returns getter and setter accessors.

NNikitha123171
92% match
Loading thumbnail…

Fork of 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.

PPrathyusha0304
92% match
Loading thumbnail…

Fork of Fork of ICE - 7 Reusable Scatter Plot

This example visualizes the classic Iris dataset as a scatter plot, with three species of flowers colored red, orange, or white, mapping petal width against sepal length. Built with d3.v6, it uses d3.scaleLinear, d3.extent, and d3.axisLeft/axisBottom to generate axes and SVG circles for data points. The reusable scatterPlot function dynamically updates the x-axis value to cycle through additional iris columns, demonstrating modular chart construction. Data is loaded via d3.csv from a GitHub gist.

RRadhakrishna246
92% match
Loading thumbnail…

Fork of ICE-7 Reusable Scatter Plot

This scatter plot displays the Iris dataset, mapping petal width along the x-axis and sepal length along the y-axis. Each flower species is represented by a distinct SVG symbol, rendered using D3’s `scaleOrdinal`, `symbol`, and `symbolGenerator`. The chart reads CSV data asynchronously via `d3.csv` and builds axes with `axisLeft` and `axisBottom`. It follows a reusable chart pattern, exposing configuration methods like `.width()`, `.height()`, and `.margin()` for customization. The visualization uses D3 v6 and is styled with the Share Tech font in SVG.

NNikitha123171
92% match
Loading thumbnail…

Fork of ICE - 7 Reusable Scatter Plot

This example shows an animated scatter plot of the Iris dataset, cycling through four measured features (petal width, sepal width, petal length, and sepal length) every two seconds. The visualization colors each data point by species—blue for setosa, red for versicolor, and yellow for virginica—using D3.js v6. It demonstrates a reusable scatter plot component built with `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, updating the x-axis domain and circle positions via `setInterval`. The SVG rendering includes styled axes and white-stroked circles on a black background.

SSaiSreya1
92% match