Fork of Reusable D3 Scatter Plot

Fork of Reusable D3 Scatter Plot

The visualization displays the Iris Dataset as a scatter plot, animating between four measurement variables every two seconds. It uses D3 v6’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` loader. The reusable chart pattern, inspired by Bostock’s “Towards Reusable Charts,” configures width, height, margins, and radius via getter-setter methods. SVG circles and axes update in-place through `selection.join`, while `setInterval` cycles the x-axis variable among petal width, sepal width, petal length, and sepal length.

PPlatoch

Fork of Reusable D3 Scatter Plot

This visualization displays the Iris Dataset as an animated scatter plot, cycling through four different variable pairings every two seconds. The plot demonstrates a reusable D3 chart pattern, where the `scatterPlot` function encapsulates scales, axes, and circle rendering. Using d3.scaleLinear for positioning, d3.axisLeft and d3.axisBottom for ticks, and d3.join for efficient circle updates, the SVG animation smoothly transitions between petal width, sepal width, petal length, and sepal length on the x-axis. Data loads asynchronously via d3.csv from a GitHub Gist.

SSheshidharreddy

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through the Iris Dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length every two seconds. The visualization uses d3.scaleLinear with extent to map data to positions, d3.axisLeft and d3.axisBottom for axes, and d3.selectAll with a join to update circle elements. The reusable chart pattern from Bostock’s “Towards Reusable Charts” exposes width, height, data, margin, and radius setters. Iris measurements are loaded via d3.csv and parsed as numbers.

Ggeethanjalikotaru

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, cycling through different x-axis variables (petal width, sepal width, petal length, sepal length) every few seconds while keeping sepal length on the y-axis. Data points are colored by species using a simple switch statement, with a color legend and axis labels updating dynamically. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom`, and is built as a reusable chart module. It renders as an SVG with a setInterval-driven animation that updates the chart’s x-value accessor.

Ddivyageethanjali

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, cycling through four attribute pairings every two seconds. Built with D3 v6, it uses reusable chart patterns via a custom `scatterPlot` function, employing `scaleLinear`, `axisLeft`, and `axisBottom` for rendering. SVG circles display sepal and petal measurements, with axes updating dynamically as the x-value changes from petal width to sepal width, petal length, and sepal length.

KKeerthipriyaBankuru

Fork of Reusable D3 Scatter Plot

This visualization displays the Iris dataset as an animated scatter plot, cycling through different feature pairs every two seconds. It uses D3.js v6 with reusable chart components, employing `scaleLinear` for axes, `scaleOrdinal` with `symbols` for point shapes, and `axisLeft`/`axisBottom` for tick marks. The plot transitions between four measurement columns—PetalWidth, SepalWidth, PetalLength, and SepalLength—using `setInterval` to redraw the SVG with new x-value assignments.

Bbhanuteja1807@gmail.com

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris flower dataset across four measurable attributes: petal width, sepal width, petal length, and sepal length. Using D3’s scaleLinear, axisBottom, and axisLeft functions, it renders data points as circles in an SVG canvas, with axes updated every two seconds as the x-axis variable cycles through the dataset columns. The chart is built as a reusable function via a scatterPlot closure, adapting to the browser window’s dimensions and drawing on the CSV data loaded with d3.csv.

RRadhakrishna246

Fork of Reusable D3 Scatter Plot

This is an animated scatter plot that visualizes the Iris Dataset, cycling through different pairs of measurements (petal width, sepal width, petal length, sepal length) every two seconds. It uses D3 v6 for rendering SVG circles and axes, with the `scatterPlot` function as a reusable chart component. The plot updates its x-axis encoding based on a rotating column list, leveraging D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs. Data is loaded from a CSV file, and the visualization fills the entire browser window.

Ppavan vasamsetti