Skip to main content
SimilarExport ZIP
100%

Final Project

✓ Published1🌍 Public
YYi Yang
Last edited Dec 12, 2021
Created on Dec 12, 2021
Forked from HTML Starter

This interactive visualization displays patterns in pollutant concentrations—SO₂, particles, and NO₃—across U.S. states from 2008 to 2018. Users select a pollutant via radio buttons to trigger an animated view of the data. The visualization uses D3.js (v4) with SVG rendering to draw the charts, applying `d3.format` for decimal precision and dynamically updating the visualization by removing and redrawing groups. The animation is driven by JavaScript event handlers, with data stored in arrays and visualized through connected line or scatter plots.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Final Project

This example visualizes air quality patterns, comparing SO2, particle, and NO3 concentrations across 31 U.S. states from 2008 to 2018 through animated line charts. Users select a pollutant via radio buttons, triggering an animation that reveals trends over time. The visualization uses D3.js v4 with SVG rendering, featuring a custom color palette for state-specific lines. The code integrates React for structure and employs D3’s data join and transition methods to update the chart dynamically, with data embedded directly in the script.

YYi Yang
94% match
Loading thumbnail…

Fork of Final Project

This interactive visualization reveals patterns in air quality data across U.S. states from 2008 to 2018, allowing users to toggle between views of SO2, particulate matter, and NO3 concentrations. The code uses D3.js v6 to render an SVG with animated transitions, mapping state abbreviations along the y-axis and years on the x-axis. Radio buttons trigger distinct animation functions for each pollutant, each displaying differently colored data points with numeric labels formatted using `d3.format`. The visualization employs a React framework and computes aggregated pollutant averages from the embedded dataset.

YYi Yang
91% match
Loading thumbnail…

Fork of Final Project

This visualization displays trends in SO2 concentrations across multiple U.S. states and years from 2008 to 2018. A button click triggers an animated bar chart, with each row representing a different state and each bar showing the yearly average SO2 level. The rendering uses d3.v4 to create SVG elements, with color-coded bars and formatted decimal values. The animation removes existing groups and redraws the chart when activated.

YYi Yang
86% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Final Project

This visualization presents a pattern discovery of SO2 emissions across 31 U.S. states from 2012 to 2021. A radio button triggers an animated horizontal bar chart that displays each state’s annual emissions data. The code uses D3.js v6 to bind data to SVG rectangles, with linear and band scales for positioning. Animated updates remove and redraw the chart, while a color array assigns unique hues to states. The dataset is embedded directly in the script, and the interaction is managed through a simple onclick event handler.

YYi Yang
85% match
Loading thumbnail…

Fork of Fork of Fork of Final Project

This example visualizes patterns in SO2 emissions across U.S. states and years, using a clickable radio button to trigger an animated view of the data. The visualization employs an SVG-based bar chart built with D3 v6, where each bar represents a state’s emission value for a given year, with colors distinguishing different states. The code leverages D3’s selection and data-join methods to dynamically update the chart, while the embedded dataset contains raw emission numbers formatted with `d3.format`. The animation replays the data sequentially, highlighting changes over time.

YYi Yang
85% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Final Project

This visualization displays SO2 emissions across 31 U.S. states from 2012 to 2021, using a horizontal bar chart that animates through each year when a button is clicked. The chart encodes emission values with bar lengths, mapping data through d3.scaleLinear for the x-axis and d3.scaleBand for the categorical state labels. Rendered as an SVG with D3 v6, the visualization uses a radio button to trigger the animation, presenting yearly snapshots of pollution data in a compact, color-coded format.

YYi Yang
84% match
Loading thumbnail…

Fork of Fork of Final Project

This example visualizes a multi-state pattern discovery of SO2 emission trends from 2008 to 2018. Clicking a button triggers an animated rendering of the data, which appears as a large SVG area. The visualization uses D3.js v6 to bind data to SVG elements, applying custom colors per state and animating changes through JavaScript function calls. Data is pre-loaded as arrays of monthly average SO2 values for each state, rendered in a static layout with a refresh control.

YYi Yang
83% match
Loading thumbnail…

Fork of Fork of Final Project

This visualization presents a pattern discovery tool for environmental data across US states from 2008 to 2018. Users select between different demographic groups (black, Asian, white) to view animated data representations. The project uses D3.js v6 with React to render SVG elements, featuring radio buttons that trigger different visual states. The code implements custom animations and data manipulation using D3’s formatting utilities, though the specific data source appears to be embedded numerical arrays rather than external files. The visualization employs a multi-year timeline with state abbreviations on the y-axis and floating-point formatted values.

YYi Yang
81% match