Skip to main content
SimilarExport ZIP
100%

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

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
87% 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
86% 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
86% 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
86% 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
82% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Final Project

This example visualizes patterns in New York City crime data across 31 offense types from 2012 to 2021. The interface presents a radio button that, when clicked, triggers an animation displaying SO2-related data as an interactive bar chart rendered with SVG. The code uses D3 v6, with methods such as `d3.scaleLinear` and `d3.select`, alongside React for the application framework. The visualization dynamically updates the chart by removing existing groups and redrawing based on user interaction, demonstrating an animated exploration of temporal crime trends.

YYi Yang
82% 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
82% match
Loading thumbnail…

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

A pattern discovery visualization displays NYPD crime data across 31 offense categories and 10 years (2012–2021) through a multi-series line chart. Clicking the "View SO2" radio button triggers an animated rendering of the dataset. The code uses D3.js v6 to build an SVG visualization, with `d3.format` for number formatting and custom color arrays for series differentiation. The visualization animates through the data via a `black()` function that removes and redraws groups, presenting crime trends as interactive time-series line graphs.

YYi Yang
81% match