ICE - 7 — VizHub

100%

ICE - 7

✓ Published0🌍 Public

Last edited Jul 3, 2022

Created on Jul 3, 2022

This interactive scatter plot animates through different attributes of a college dataset, cycling the x-axis among Unemployment_rate, Employed_full_time_year_round, Unemployed, and Employed every 1.9 seconds while the y-axis remains fixed on Employed. Each point represents a major category, colored distinctly by its category, with a reusable scatterPlot module built on D3's scaleLinear, axisLeft, and axisBottom. The SVG visualization, rendered on a wheat background, uses the Share Tech font and updates labels dynamically to reflect the current x-axis metric.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE - 7

This animated scatter plot visualizes relationships between different attributes of college majors, including unemployment rates and salary data for men and women. Built with D3.js, the visualization cycles through four data dimensions every 1.9 seconds, updating the x-axis scale and labels dynamically while the y-axis remains fixed on women’s representation. Circles are color-coded by major category, with data sourced from a CSV file. The reusable chart structure follows the "Towards Reusable Charts" pattern, using D3 scales, axes, and SVG circle elements to render the changing data.

Cchakritha06

87% match

Loading thumbnail…

ICE-7 - Scatter Plot

This animated scatter plot maps student performance metrics, such as scores in tenth, twelfth, and college, along with time spent, against each other. The plot cycles through different x-axis variables, updating the visualization in a loop, and colors data points by hobby categories: Cinema, Sports, and Others. Built with D3 v6, it uses `d3.csv` to load the data and a custom `scatterPlot` module that constructs axes and circles, rendering the SVG animation with a legend and labels.

AAshrith Kudidhi

83% match

Loading thumbnail…

ICE 7

This interactive scatter plot maps student marks across Math and Science, with age encoded by symbol type. It cycles through different data columns as the x-axis every fifteen seconds, updating the visualization dynamically. Built with D3, it uses `scaleLinear`, `axisLeft`, `axisBottom`, `symbols`, and `scaleOrdinal` to render the SVG animation. The plot pulls data from a CSV file and adjusts its axes and points in real time, all within a responsive full-screen viewport.

SSnarasimhap

82% match

Loading thumbnail…

ICE-7 SCATTER PLOT

This interactive scatter plot, built with D3.js, presents the Iris dataset, encoding two selected variables along the x- and y-axes. The plot dynamically cycles through the `Revenue`, `Expenses`, and `EmployeeCount` fields every two seconds, updating the x-axis scale and circle positions. It uses D3's `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs, with data fetched from a CSV URL. Rendered as an animated SVG, the circles have a fixed radius, and axes are generated for each new data view.

Ppeddubalaji@gmail.com

80% match

Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes museum visitor data across four exhibits, cycling which museum is plotted on the x-axis every three seconds. Each dot represents a year (2014–2016) colored pink, green, or black, with its position determined by attendance at different Los Angeles museums. The visualization uses a reusable D3 scatterPlot module built with scaleLinear scales, axisBottom, and axisLeft to render axes and circles. Data is loaded via d3.csv from a GitHub-hosted CSV file, with setInterval triggering redraws that swap the x-axis column among AmericaTropical, Firehouse, ChineseAmerican, and AvilaAdobe.

SSravyaAnnadi

79% match

Loading thumbnail…

ICE-7 Scatter Plot

This interactive scatter plot, built with D3, displays the Iris dataset and animates a cycle through different feature combinations on the x-axis while the y-axis remains fixed. The visualization uses a reusable chart API, defining a `scatterPlot` function with methods for width, height, data, and margin, and leverages D3's `scaleLinear`, `axisLeft`, and `axisBottom` for rendering. The animation is driven by `setInterval`, updating the x-value every two seconds, and the plot is rendered as an SVG with a custom font loaded from Google Fonts.

Ppethavenu

79% match

Loading thumbnail…

ICE 7

This animated scatter plot cycles through four different pairings of the Iris dataset’s numeric columns, using a reusable charting API built with D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The SVG visualization updates every two seconds, re-mapping the x-axis to a new attribute while keeping the y-axis fixed. The code defines a configurable `scatterPlot` function with setters for data, dimensions, and value accessors, then applies it repeatedly to a full-window canvas with a custom font.

Bbhargavarathod

79% match

Loading thumbnail…

ICE7

An animated scatter plot cycles through four Iris dataset variable pairs every two seconds, revealing different correlations between measurements. Each circle represents a flower sample, with axes rescaling to the current variable selection. The reusable chart module updates its x-value accessor while preserving the same SVG rendering. D3's `scaleLinear`, `axisLeft`, `axisBottom`, and data joins create the idempotent visualization, with `setInterval` driving the sequential column switching.

Ppeesarie

78% match