Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Final Project Criminality Line Graph

✓ Published1🌍 Public
NNita
Last edited Jul 22, 2025
Created on Jul 22, 2025

This interactive D3.js dashboard visualizes immigration enforcement arrests from 2010 to 2025, comparing convicted criminals and non-criminals as animated line charts with gradient area fills. The chart uses `d3.scaleLinear` and `d3.scaleLog` for the Y-axis, with hover tooltips and playback controls. Data is loaded from a CSV file, and statistical insights are generated using `d3.sum`, `d3.mean`, and `d3.extent`. The interface includes a toggle for linear/log scales and animation replay, all rendered as responsive SVG.

AI-generated description

Criminality Data Visualization Dashboard

An interactive D3.js dashboard for visualizing immigration enforcement arrest data by criminal history status from 2010-2025.

Features

  • Interactive Line Chart: Smooth animated line chart with hover tooltips
  • Responsive Design: Fully responsive layout that works on all devices
  • Area Gradients: Beautiful gradient fills under the lines for better visual appeal
  • Scale Toggle: Switch between linear and logarithmic Y-axis scales
  • Animation Controls: Replay chart animations
  • Statistical Insights: Automatically generated key statistics and trends
  • Modern UI: Clean, professional design with smooth transitions

Technical Improvements

Code Organization

  • Separated concerns into multiple files (HTML, CSS, JS)
  • Created reusable CriminalityChart class
  • Implemented a Dashboard class for application logic

Enhanced Functionality

  • Responsive SVG: Uses viewBox for perfect scaling
  • Better Data Handling: Robust data processing with error handling
  • Smooth Animations: Line drawing animations and point reveals
  • Interactive Elements: Enhanced tooltips and hover effects
  • Statistical Analysis: Automated insight generation

Visual Enhancements

  • Gradient Fills: Beautiful area charts under the lines
  • Grid System: Subtle grid lines for better readability
  • Professional Color Scheme: CSS custom properties for consistent theming
  • Typography: Modern font stack and improved text hierarchy
  • Micro-interactions: Smooth hover effects and transitions

Performance & Accessibility

  • Idempotent Updates: Proper D3.js data joins for efficient updates
  • Semantic HTML: Proper HTML5 structure
  • Keyboard Navigation: Button controls work with keyboard
  • Screen Reader Friendly: Proper ARIA labels and semantic markup

Usage

  1. Open index.html in a web browser
  2. The chart will automatically load and animate
  3. Use the control buttons to:
    • Toggle between linear and log scales
    • Replay the chart animation
  4. Hover over data points to see detailed information
  5. View automatically generated insights below the chart

Data Format

The CSV should contain columns:

  • Fiscal Year: Year of the data
  • Criminality: Either "Convicted Criminal" or "Non-Criminal"
  • Quantity: Number of arrests

Browser Support

Modern browsers supporting ES6+ and SVG:

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Final Project Criminality Line Graph

This interactive dashboard visualizes U.S. immigration enforcement arrests from fiscal years 2010–2025, comparing trends between convicted criminals and non-criminals using an animated dual-line chart. It employs D3.js v7 for SVG rendering, including d3.line, d3.area, and d3.scaleLinear for axes, with gradient area fills beneath each line. Users can toggle between linear and logarithmic scales via a button, replay animations, and hover over data points to see tooltips with exact values. The dashboard also calculates summary statistics from the CSV data, including totals, percentages, peak years, and recent averages.

NNita
96% match
Loading thumbnail…

Fork of Final Project Criminality Line Graph

This line chart compares the quantities of arrests categorized as Convicted Criminal versus Non-Criminal across fiscal years 2010 to 2025. Two overlaid lines, red for convicted criminals and blue for non-criminals, show fluctuating trends, including a notable spike for non-criminals in 2019 and a sharp decline for both categories in 2025. The visualization uses D3 v7 to load CSV data and generate SVG paths via d3.line for each series, with linear scales for axes and interactive hover effects on points.

Eetmg02@hotmail.com
87% match
Loading thumbnail…

Final Project Criminality Line Graph

This line chart displays arrests based on criminality by fiscal year, comparing convicted criminals and non-criminals from 2010 to 2025. The red line represents convicted criminals, while the blue line tracks non-criminals, revealing divergent trends over time. The visualization uses D3.js APIs including `d3.csv`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom` to load data from the CriminalityLineChart.csv file, scale axes, and generate the SVG paths. Hoverable points and a legend enhance interactivity, while the animated SVG rendering context supports dynamic exploration.

Rronnieferrufino4908@gmail.com
84% 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
80% 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
80% 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
79% 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
79% 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
79% match