Skip to main content
SimilarExport ZIP
100%

Fork of Final Project

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

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.

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 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
94% match
Loading thumbnail…

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.

YYi Yang
94% match
Loading thumbnail…

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.

YYi Yang
94% match
Loading thumbnail…

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.

YYi Yang
93% match
Loading thumbnail…

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.

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

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.

YYi Yang
88% match