Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of Final Project

✓ Published1🌍 Public
YYi Yang
Last edited Dec 12, 2021
Created on Dec 12, 2021

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
96% 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
96% 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
92% 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
91% 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
88% 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
86% match
Loading thumbnail…

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

This visualization presents an interactive bar chart that displays patterns in crime data across New York State, categorized by offense type and year from 2012 to 2021. A single radio button allows the viewer to trigger a view of the SO2 data. The chart uses an SVG container with a light blue background, rendering static bars whose values are updated when the button is clicked. The implementation relies on D3.js v6 for DOM selection, scaling, and event handling, with the dataset hardcoded as a JavaScript array within the script.

YYi Yang
85% match
Loading thumbnail…

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

This example visualizes yearly counts of New York State penal law violations from 2012 to 2021 as a matrix of numeric values. A button click triggers an animated bar chart display for the SO2 dataset, using D3.js version 6 to bind the data and render SVG rectangles. The visualization applies color-coded bars for each of 31 offense types across 10 years, with transitions that update the chart when the radio button is selected.

YYi Yang
85% match