ice-7 Q1 "Resuable Scatter Plot"

100%

ice-7 Q1 "Resuable Scatter Plot"

✓ Published0🌍 Public

Last edited Jul 4, 2022

Created on Jul 2, 2022

This example presents a reusable scatter plot that visualizes cricket statistics over time, cycling the x-axis through different numeric columns every two seconds. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, and `symbol` to render players as distinct shapes, with the SVG updating via `svg.call(plot)` to retrigger the chart. Data loads from a CSV file containing yearly runs, outs, and fours, and the chart supports configurable margins, radius, and accessor functions for flexibility. The implementation follows Mike Bostock’s “Towards Reusable Charts” pattern with a closure-based API.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7 Scatter plot

This example visualizes Test Cricket player statistics with a scatter plot that maps runs against batting averages, animating through different data fields every three seconds to explore relationships between metrics like strike rate and innings played. The visualization uses D3.js version 6.7.0, employing the `scaleLinear` and `scaleOrdinal` functions for positioning and color encoding, while SVG symbols represent player types. Data from a CSV file hosted on GitHub Gist is loaded asynchronously, with circles colored by country and shaped by player role. The reusable chart module implements a configurable API, cycling through four quantitative fields on the x-axis.

Mmedurisk7@gmail.com

87% match

Loading thumbnail…

Charan ICE-7 Q1 Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot displays cricket player statistics, plotting balls faced, match count, age, and score as points on a dual-axis chart. The visualization cycles through these four data columns every two seconds, updating the x-axis scale and circle positions smoothly. Built with D3.js v6, it uses an asynchronous CSV loader, the reusable chart pattern with a `scatterPlot` factory function, and linear scales with SVG circle and axis rendering. The Iris-inspired design rotates through dimensions from the cricket dataset, creating a dynamic exploration of player performance metrics.

Ccharanchand9

85% match

Loading thumbnail…

Fork of ICE-7 Scatter plot

A reusable scatter plot animated with D3 v6 cycles through Runs, Average, Strike Rate, and Innings on the x-axis every three seconds. It visualizes Test Cricket player records from a CSV file, using d3.scaleLinear for axes, d3.scaleOrdinal with symbol types to distinguish player roles, and color to encode country. The SVG renders dynamically via d3.csv loading and a custom scatterPlot module.

Nnagasai.mandalapu@gmail.com

85% match

Loading thumbnail…

ICE-7 varunscatter

This animated scatter plot uses D3.js to visualize Test Cricket player records, cycling through different x-axis fields (Runs, Average, Strike Rate, Innings) every three seconds. It displays player symbols colored by country, with shapes distinguishing player types (batsman, bowler, allrounder) via D3’s symbol scales. The reusable chart module (`scatterPlot.js`) dynamically updates axes and data bindings, loading the dataset from a CSV file using `d3.csv`. SVG rendering and transitions are handled through D3’s selection and join patterns, with margins and scales configured programmatically.

VVarun Gadde

85% match

Loading thumbnail…

Fork of ICE-7 Scatter plot

This interactive scatter plot visualizes Test Cricket records, showing the relationship between two selected metrics for each player. It cycles through different x-axis fields—Runs, Average, Strike Rate, and Innings—every three seconds, allowing for dynamic comparison of player performance. The visualization uses D3.js, specifically the `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` APIs, to render the plot with symbols and colors representing player type and country. Data is loaded from a remote CSV file hosted on GitHub Gist, and the plot is drawn as an SVG element that updates in place.

Rrohithannadurai@my.unt.edu

83% match

Loading thumbnail…

ICE-7.1 - Reusable Scatter Plot

This example presents a reusable scatter plot of the Iris Dataset, cycling through four different x-axis columns every two seconds while keeping sepal_length on the y-axis. Implemented with D3 v6, it uses a custom `scatterPlot` function with getter-setter methods, `scaleLinear` for axes, `scaleOrdinal` for species-based symbols and colors, and SVG paths with animation. The code loads CSV data via `d3.csv`, renders with `d3.axisLeft` and `d3.axisBottom`, and relies on `setInterval` to animate the visual transitions.

SShashi42

82% match

Loading thumbnail…

Reusable D3 Scatter Plot- ICE7

A scatter plot cycles through four flag and stand measurements from a CSV dataset, updating the x-axis and axis label every few seconds. The visualization uses D3 v6 to render circles colored by a "color" attribute, with red, green, and blue indicated in a legend. It employs reusable scatter plot and scale functions, rendering through SVG with animation for the rotating axes and labels.

Hharika-1929

81% match

Loading thumbnail…

ICE - 7 Reusable D3 Scatter Plot

This example shows a reusable scatter plot that displays sales figures over time, with each circle representing a data point. It uses D3.js version 7 to render the visualization as SVG elements, with a band scale on the x-axis for categorical years and a linear scale on the y-axis for continuous sales values. The code leverages `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while interactive tooltips appear on mouseover using D3 event handlers. Data is loaded from a CSV file using `d3.csv`, and the plot includes animated transitions for tooltip visibility.

Yyvarshachowdary@gmail.com

81% match