AkshithaRapala - Fork of Reusable D3 Scatter Plot

100%

AkshithaRapala - Fork of Reusable D3 Scatter Plot

✓ Published13🌍 Public

Last edited Mar 28, 2024

Created on Mar 27, 2024

This scatter plot visualizes the Palmer Penguins dataset, displaying body mass and culmen length measurements with animated cycling through different x-axis attributes every two seconds. It uses D3.js v6 with SVG rendering and transitions to redraw the plot dynamically. The chart encodes penguin species through distinct SVG shapes: squares for Adelie, triangles for Chinstrap, and circles for Gentoo, with axes rendered via d3.axisLeft and d3.axisBottom. The reusable chart pattern in scatterPlot.js enables smooth updates as the x-axis cycles through numerical columns. Data loads from a CSV file hosted on GitHub Gist.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Akshitha Rapala - ICE -7 Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through four numerical attributes of the Palmer Penguins dataset, alternating which variable maps to the x-axis every two seconds while the y-axis remains fixed on culmen length. Built with D3 v6, it uses reusable chart components, linear scales, and SVG circles to render the data. The plot refreshes its axes and points via a `setInterval` callback, updating the x-value accessor to demonstrate dynamic data binding. The dataset is loaded from a GitHub Gist as a CSV, with margins and radius configured through a chainable scatter plot factory function.

Aakshitha.rapala@gmail.com

93% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping body mass against culmen length with an animated loop that cycles through four numerical attributes every two seconds. Built with D3 v6, it uses reusable chart patterns via a custom `scatterPlot` function, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. The SVG rendering updates in place using `selectAll` and `join`, while `setInterval` triggers re-renders to switch the x-axis variable, showcasing the flexibility of modular chart components.

RRahulChaitu999

88% match

Loading thumbnail…

Fork of AkshithaRapala - Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot that visualizes a fictional movie dataset, mapping budget and revenue for a selection of films. The implementation is built using D3.js v7, where circles are rendered through SVG elements and positioned using linear scales. The code also includes a fork that displays the Palmer Penguins dataset, cycling through different measurement columns on the x-axis every two seconds using `setInterval`. The reusable chart pattern, inspired by Bostock’s approach, is demonstrated through a function that accepts data, attribute names, and a container ID to generate the visualization.

Rrohithannadurai@my.unt.edu

84% match

Loading thumbnail…

Reusable scatter plot_Archana Goli

This interactive scatter plot displays the Penguins dataset, with each species (Adelie, Chinstrap, Gentoo) represented by a distinct shape—square, triangle, or circle—positioned by body mass and culmen length. The visualization cycles through four numerical attributes every two seconds, updating the x-axis accessor to explore different correlations. Built with D3.js (v6.7.0), the reusable chart component uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with SVG paths and a two-second `setInterval` for animation, loading data from a GitHub Gist CSV.

Aarchanagoli@my.unt.edu

84% match

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). The code uses d3.csv to load the data, d3.scaleLinear for both axes, and renders circles with SVG. It also includes axis labels and a title, with the y-axis rotated via SVG text transformation. The visualization is built with D3 v5 in a React framework, using d3.axisLeft and d3.axisBottom for the axes.

IIndhuKrishnaraj

84% match

Loading thumbnail…

Assignment_2 Reusable Scatter Plot

This interactive scatter plot visualizes Palmer penguin measurements, using flipper length, body mass, bill length, and bill depth as axes. The chart cycles through these four variables at timed intervals, updating the x-axis while preserving the y-axis. Colored circles represent penguin species, with a legend mapping each category to a distinct color. Built with D3.js (v6), the example demonstrates reusable chart components through local ES6 module imports, scaling axes with `scaleLinear` and rendering SVG elements with data joins. Data loads from a remote CSV file via D3's `csv` function.

Cchsaisriharsha@gmail.com

84% match

Loading thumbnail…

Reusable Scatter Plot

This animated scatter plot explores relationships between penguin measurements, cycling through four numerical variables on the x-axis while body mass remains on the y-axis. Built with D3 v6, it loads CSV data from a GitHub gist and uses a reusable scatterPlot module with scaleLinear scales and axisLeft/axisBottom. The visualization includes color-coded species markers (Adelie, Gentoo, Chinstrap) with a custom legend, using setInterval to rotate the x-axis variable every few seconds. SVG circles render the data points with species-specific colors and elliptical shapes.

Ssuryavamsi00024

83% match

Loading thumbnail…

Assignment 2 Reusable Scatter Plot

This example visualizes the Palmer Penguins dataset with a reusable scatter plot built using D3 v6. The plot cycles through four different x-axis variables—body mass, bill depth, flipper length, and bill length—at two-second intervals while keeping bill length on the y-axis. Circles are colored by penguin species (Adelie, Gentoo, Chinstrap) with a legend and animated transitions. The code demonstrates D3’s scaleLinear, axisBottom, and axisLeft APIs, along with ES6 module imports and setInterval-driven updates.

Ppasyasahas

83% match