Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Jul 1, 2022

Created on Jun 30, 2022

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot, built with D3.js, visualizes breast cancer tumor data from a CSV file, cycling through different feature pairs on the x-axis. It shows the relationship between various cell measurements, with data points colored by cancer stage (orange for stage one, blue for stage two, black for stage three). The visualization uses an SVG with a custom `scatterPlot` function and a `setInterval` animation to swap the x-axis variable, while a legend and axis labels clarify the mapping.

Aamiralitah

90% match

Loading thumbnail…

Fork of Fork of Fork of 3D Scatter Plot with Breast Cancer

This visualization displays two scatter plots of breast cancer dataset features, including radius, texture, perimeter, and area measurements. The visualization combines a 2D scatter plot and a 3D scatter plot, both rendered using the Plotly.js library with data loaded via D3.js’s CSV parsing. The plots use marker styling with custom colors, symbol shapes, and opacity settings to distinguish between the two display modes. The 3D scatter plot explores relationships between radius, texture, and area features, while the 2D plot compares radius and texture with perimeter measurements.

Aamiralitah

86% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through cancer incidence data from the U.S., visualizing death rates for liver, breast, prostate, and thyroid cancers over time. Using D3 v3, it maps years to the x-axis and population to the y-axis, with each cancer type distinguished by a unique symbol (star, square, circle). The chart updates every two seconds, transitioning smoothly between datasets while rotating through the cancer types, with a title indicating the current type. Built as a reusable module, it demonstrates animated transitions, SVG rendering, and dynamic symbol mapping in a clean, informative design.

AArun

85% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

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.

Ssrivalliwuyyuru

85% 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

85% match

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot visualizes cancer mortality trends in the USA, cycling through liver, breast, and prostate cancer datasets. Built with D3 v6 as a reusable chart, it animates between cancer types every 3 seconds, updating the y-axis and point symbols (star, square, circle) accordingly. The chart leverages SVG rendering and custom symbol mappings to distinguish cancer types, with axes and margins configured for readability.

Bbhavana.bayyapu@gmail.com

84% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot animates through different x-axis variables from the Iris Dataset, cycling between petal width, sepal width, petal length, and sepal length every two seconds via `setInterval`. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `selectAll('circle').data(marks).join('circle')` updates the SVG circles. The reusable chart pattern from Bostock’s "Towards Reusable Charts" is implemented through getter-setter functions in `scatterPlot.js`.

Aamiralitah

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

83% match