Reusable Fork of Scatter Plot - ICE7

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

Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot displays iris flower measurements, using petal width and sepal length as primary axes while encoding species through colored markers (pink, yellow, and grey). The visualization cycles through different data dimensions every two seconds using `setInterval`, updating the x-axis mapping between petal width, sepal width, petal length, and sepal length. Built with D3 v6, the example uses `csv` for data loading, `scaleLinear` and `extent` for scaling, plus `axisLeft` and `axisBottom` for axes. SVG circles represent data points with animated transitions, while axis labels are appended directly to the SVG.

Ggayathri

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

Fork of Reusable D3 Scatter Plot - ICE7

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis, with each of the three species distinguished by a unique SVG symbol. The code uses D3 v6 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom`. Data is loaded asynchronously from a CSV via `d3.csv`, and the reusable `scatterPlot` module handles margin configuration and dynamic sizing to fill the browser window.

BBrian Gilmore

Pprince.sahith100@gmail.com

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows an interactive-free scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis, with points colored by species using a d3.scaleOrdinal. It loads CSV data via d3.csv, then builds a reusable visualization through a custom scatterPlot function that appends an SVG, applies linear scales (d3.scaleLinear), and draws axes with d3.axisBottom and d3.axisLeft. The plot includes labeled axes and three color categories for the flower species.

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through different x-axis variables—petal width, sepal width, petal length, and sepal length—for the classic Iris dataset, with y-axis fixed to sepal length. Each flower species is color-coded (steelblue, fuchsia, green) and rendered as circles with distinct radii and fill properties. Using D3 v6 (d3.csv, d3.scaleLinear, d3.axisLeft, d3.axisBottom), the visualization updates every interval via setInterval, rebuilding the axes and labels for each dimension. The code also includes a custom legend and axis titles, with SVG rendering for all marks and text.

SSonuSriN

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes the Iris flower dataset, cycling through four different x-axis measurements—petal width, sepal width, petal length, and sepal length—while keeping sepal length fixed on the y-axis. Each data point is colored by species (setosa, versicolor, virginica), with a static legend. The example uses D3 v6 APIs such as `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` to update the chart, rendering SVG circles and text with a custom `scatterPlot` reusable function.

AArefa Patwary

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