ICE - 7 — VizHub

100%

ICE - 7

✓ Published0🌍 Public

Last edited Jul 3, 2022

Created on Jul 3, 2022

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.

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 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.

HHarishma Nallala

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

81% match

Loading thumbnail…

Project 10/31

This interactive scatter plot visualizes earnings and labor force data for college majors, sourced from FiveThirtyEight. The visualization uses D3.js to render SVG circles, with a dropdown menu to select the y-axis variable. A color legend allows filtering by major category, and hovering over points reveals a tooltip. The plot uses animated transitions when data changes, and circles are jittered to reduce overplotting.

KKeerthiKandadai

79% match

Loading thumbnail…

ICE-7:Resuable Scatter Plot of Number Student Going to Aboard

This animated scatter plot visualizes the number of students going abroad for different degree levels (Bachelor’s, Master’s, PhD, and Jobs) over time. The visualization cycles through each student type every two seconds, updating the chart with a new symbol shape (circle or square) and a title indicating the current category. The code uses D3.js utilities like `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data from a remote CSV file and render the SVG chart. The plot displays year on the x-axis and student counts on the y-axis, with the y-axis label "No of Students Going Abroad."

Vvinodreddysagam929@gmail.com

79% match

Loading thumbnail…

ice7

This stacked area chart displays the distribution of educational degrees conferred in seven fields over time, with the x-axis representing years and the y-axis showing counts up to 200,000. It uses d3.stack() to layer the data, d3.area() and d3.scaleTime() to render the paths, and d3.scaleOrdinal() for the color palette. The visualization loads CSV data from a GitHub gist, draws SVG elements, and includes custom axis labels, with a legend implied by the colored layers.

SSnarasimhap

78% match

Loading thumbnail…

ICE_7 Line_Chart

This chart displays the number of students per major over time, using a line chart to show trends from 2009 to 2019. The visualization is rendered as an SVG using D3 v5, with a time-scaled X-axis and a linear Y-axis. Grid lines and styled ticks enhance readability, while the line path is drawn using D3’s `line` generator. Data is loaded from a CSV file hosted on GitHub, and axes are created with `axisBottom` and `axisLeft` functions.

SShivaKarpe

78% match

Loading thumbnail…

Fork of ICE-5 Assignment

This interactive scatter plot visualizes student outcomes across four categories—Bachelor’s, Master’s, PhD, and Jobs—by cycling through each dataset every two seconds. Built with D3.js, it uses CSV data parsed into numeric fields and renders SVG scatter plots with symbols mapped to each category via `symbolCircle` and `symbolSquare`. The visualization updates dynamically using `scatterPlot()` calls, switching the y-axis values and symbol types while displaying the current category title above the plot.

Ssagamreddy929@gmail.com

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

78% match