Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
Ssrivalliwuyyuru
Last edited Jul 2, 2022
Created on Jul 1, 2022

This example presents an animated scatter plot of an insurance dataset, alternating between BMI and charges on both axes every two seconds. Built with D3.js v6, the reusable chart function scales the data using `scaleLinear` and draws circles with a radius of five pixels. The visualization updates the x and y value mappings in real time, with axes from `axisLeft` and `axisBottom`, while the SVG renders in the browser using the Share Tech font.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 v6 scatter plot visualizes insurance data, mapping BMI and charges via the extensible `scatterPlot()` chart factory. The SVG rendering initially plots petal width against sepal length, then cycles through four data columns every two seconds, animating the axis scales and circles with `setInterval`. The chart employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while the getter-setter pattern supports dynamic updates. Data loads as CSV from a remote gist, with custom labels added for the x- and y-axes.

Ssrivalliwuyyuru
90% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Pima Indians diabetes dataset, cycling through different variable pairings every two seconds to reveal correlations. The visualization renders circles for each data point using D3.js version 7, with scales computed from the current x and y value accessors. It employs the reusable `scatterPlot` module pattern, updating axes and circle positions via D3’s data join. The animation cycles through eight columns, including Glucose, BMI, and Age, while the SVG canvas fills the browser window. Axes are drawn using `axisLeft` and `axisBottom`, with styling applied through CSS classes.

AArun
86% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot cycles through three blood-related measurements from a medical dataset, displaying a different x-axis variable every two seconds. The visualization uses D3 v6 with a reusable chart module that maps data points to circles, scaling positions with linear axes. It animates by calling a custom `scatterPlot` function with different accessor functions, updating the chart in place. The plot reads CSV data from a remote gist, and the axes are rendered with `axisLeft` and `axisBottom`. The circular markers transition smoothly between states, demonstrating a flexible, data-driven approach to multi-variable exploration.

Hharichandanamone21@gmail.com
86% match
Loading thumbnail…

Reusable scatter plot

This reusable D3 scatter plot visualizes the insurance dataset, mapping age on the x-axis and cycling through BMI, charges, and children values on the y-axis every two seconds. It uses SVG rendering with animated transitions to swap the y-axis label and rescale the data points. The plot differentiates data points by smoker status using distinct symbols and colors from D3's `schemeCategory10` scale, and is built with reusable accessors for width, height, data, and margins.

Kkotlavamsireddy@gmail.com
85% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Breast Cancer dataset, with points transitioning every two seconds between four numeric attributes: area, texture, perimeter, and radius standard error. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while SVG circles are joined to data and updated via a `setInterval` callback that swaps the x-value accessor. The reusable chart pattern, defined in `scatterPlot.js`, accepts configurable width, height, margins, and radius, with animations handled through D3’s data join.

Aamiralitah
85% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable D3 scatter plot that visualizes tech product data, mapping price, rating, sales volume, and customer reviews. The plot automatically cycles through these attributes every two seconds, updating the x-axis and data points. It uses D3’s `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `scaleOrdinal` APIs for axes and color. Implemented as a configurable chart function, it demonstrates a reusable pattern with `.join()` for creating and updating SVG circles and legend items, with data loaded from a CSV file.

AAmrit Adhikari
84% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, plotting student marks, study time, and course count as x and y coordinates. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and SVG `circle` elements to render points. Every five seconds, the x-axis value switches between the three numeric columns, updating the chart via a `setInterval` loop. The reusable chart pattern from Bostock’s article is implemented, with dynamic scaling of axes based on the current data extent.

KKeerthipriyaBankuru
84% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot displays the Iris Dataset, mapping measurements like leg length and shoulder length to axes while coloring each point by gender. It cycles through different column combinations every two seconds, updating the x-axis to reveal relationships between variables. Built with D3 v6, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to render SVG circles, with `setInterval` driving the animation. The code imports from the scatterPlot module, demonstrating a reusable chart pattern where dimensions like width, height, and data values are settable via closures.

CCherukuriMilind
84% match