Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Fork of Final Project Criminality Line Graph

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

594a9d812eed43b28372d92aad9be1d4

Open

Fork of Fork of Final Project Criminality Line Graph

0 stars1🌍 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+