Yi Yang

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

This visualization shows the distribution of NYC crimes from 2012 to 2021, broken down by race categories such as Black, White, Asian, and Hispanic. Users select a race via radio buttons, which triggers a re-rendering of the chart. The view uses an SVG area chart with multiple colored line series representing different crime types across the ten-year period. The code relies on d3.v6 for DOM selection, scales, and path generation, with static data arrays embedded directly in the JavaScript and a rect background for the chart area.

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.

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.

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.

Fork of Fork of Fork of Final Project

This visualization presents a pattern discovery of crime data across New York City, displaying the frequencies of 31 offense categories from 2012 to 2021. A radio button triggers a static bar chart showing SO2 data over time. The chart uses D3 v6 within a React framework, rendering as an SVG with animation. The data is structured as a 2D array of crime counts, mapped to colored bars using a linear scale.

Fork of Fork of Fork of Fork of Final Project

This example visualizes crime pattern changes in New York City from 2012 to 2021 across 31 offense categories. The visualization is a static SVG bar chart where clicking a radio button triggers a JavaScript function to display the data with animation. The chart uses D3.js v6 to create a linear scale for the x-axis, mapping the year-based dataset to a 600-pixel-wide view. The SVG rendering, with a light blue background, shows crime counts as bars, with each state type assigned a distinct color from a predefined palette.

Fork of Fork of Final Project

This visualization presents a pattern discovery tool for crime statistics in New York City, displaying annual counts of various offenses from 2012 to 2021. Users click the “View SO2” button to trigger an animated bar chart that reveals the data for each crime category. The code uses the D3.js version 6 library to create a scalable vector graphic (SVG) with a linear x-scale, and it employs JavaScript to handle user interaction and render data from arrays. The visualization uses a color-coded scheme to differentiate between the various offense types.

Fork of Final Project

This visualization displays yearly crime pattern data across New York City from 2012 to 2021, with offense categories listed on the left and a color-coded heatmap style layout. Users trigger an animation by selecting the SO2 radio button, which removes existing SVG groups and redraws the chart. The implementation uses d3.v6 and SVG rendering within a React framework, scaling the plotted values via `d3.scaleLinear`. A static dataset embedded in the script powers the visualization, which animates changes across the years.

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

This visualization displays the changing frequencies of various crime categories in New York City from 2012 to 2021. A radio button triggers an animated bar chart that reveals the pattern of SO2-related offenses, with each of the 31 offense types represented by colored bars across the ten-year timeline. The implementation uses D3.js version 6 to render the SVG animation, leveraging the `d3.select` and `d3.format` APIs to manage the graphical output. The data is hardcoded as a two-dimensional array within the script, and the visualization updates by removing and redrawing all group elements when activated.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Final Project

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.