100%

Fork of Fork of Fork of Final Project Criminality Line Graph

✓ Published0🌍 Public

Last edited Jul 22, 2025

Created on Jul 22, 2025

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

AI-generated description

Immigration Enforcement Data Analysis Dashboard

This interactive data visualization dashboard analyzes U.S. immigration enforcement arrests by criminal history status from fiscal years 2010-2025. The dashboard presents trends in arrests of both convicted criminals and non-criminals, providing insights into immigration enforcement patterns over time.

Data Overview

The visualization is based on immigration enforcement arrest data that categorizes individuals into two groups:

Convicted Criminal: Individuals with prior criminal convictions
Non-Criminal: Individuals without prior criminal convictions

The dataset spans fiscal years 2010-2025, with data for 2025 being partial (incomplete fiscal year).

Key Features

Interactive Visualization

Dual-line chart showing arrest trends for both criminal and non-criminal categories
Animated line drawing with staggered transitions for enhanced visual appeal
Interactive data points with detailed tooltips showing exact values
Gradient area fills beneath lines for better visual distinction
Responsive design that adapts to different screen sizes

Dynamic Controls

Toggle Y-Axis Scale: Switch between linear and logarithmic scales to better analyze data with varying magnitudes
Replay Animation: Re-trigger the chart animation to highlight data trends
Hover Interactions: Detailed tooltips displaying fiscal year, status, and arrest numbers

Statistical Insights

The dashboard automatically calculates and displays:

Total arrests by category over the entire time period
Percentage breakdown of criminal vs. non-criminal arrests
Peak years for each category
Recent trends (2022-2024 average)

Key Findings

Overall Trends

Total Volume: From 2010-2025, there were approximately 2.4 million arrests, with roughly 30% involving convicted criminals and 70% involving non-criminals.
Peak Years:
- Criminal arrests peaked in 2013 with 236,570 arrests
- Non-criminal arrests peaked in 2019 with 354,960 arrests
COVID-19 Impact: Both categories show dramatic decreases in 2020-2021, likely due to pandemic-related policy changes and operational constraints.

Notable Patterns

2010-2013: Steady increase in both categories, with criminal arrests growing more consistently
2013-2017: Criminal arrests declined while non-criminal arrests fluctuated
2016-2019: Non-criminal arrests showed significant growth, reaching historic highs
2020-2021: Sharp decline in all enforcement activities
2022-2024: Gradual recovery with non-criminal arrests returning to higher levels

Recent Trends (2022-2024)

Criminal arrests have remained relatively low, averaging around 59,000 annually
Non-criminal arrests have rebounded significantly, averaging around 228,000 annually
The ratio has shifted further toward non-criminal enforcement

Technical Implementation

Technologies Used

D3.js v7.8.5: For data visualization and interactive elements
Vanilla JavaScript: For application logic and event handling
CSS3: For modern styling with CSS custom properties and responsive design
SVG: For scalable vector graphics that work across devices

Architecture

The application follows a modular architecture:

CriminalityChart class: Handles all chart rendering and interactions
Dashboard class: Manages application state and data loading
Responsive design using SVG viewBox for automatic scaling
Clean separation of concerns between visualization logic and UI controls

Data Processing

Automatic data cleaning and type conversion
Flexible scale handling (linear/logarithmic)
Statistical calculations for insights generation
Error handling for missing or invalid data

Files Structure

index.html: Main HTML structure and layout
styles.css: Complete styling with CSS custom properties and responsive design
chart.js: Chart rendering class with D3.js visualization logic
main.js: Dashboard controller and application initialization
CriminalityLineChart.csv: Source data file

Usage

Open index.html in a modern web browser
The chart will automatically load and animate
Use the control buttons to:
- Toggle between linear and logarithmic scales
- Replay the animation
Hover over data points for detailed information
View calculated statistics in the insights section below the chart

Browser Compatibility

This dashboard works with modern browsers that support:

ES6+ JavaScript features
CSS Grid and Flexbox
SVG animations
D3.js v7 requirements

Tested on Chrome 90+, Firefox 90+, Safari 14+, and Edge 90+.

Data Source Note

The data represents immigration enforcement arrests and reflects policy changes, operational priorities, and external factors (such as the COVID-19 pandemic) over the analyzed time period. The 2025 data is partial and represents only a portion of the fiscal year.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Final Project Criminality Line Graph

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.

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

86% 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

83% match

Loading thumbnail…

Final Project ICE Arrests Line Graph

This animated line chart shows the number of U.S. Immigration and Customs Enforcement (ICE) arrests by fiscal year from 2010 to 2025. The graph displays a steel-blue line that draws itself across the chart, followed by data points appearing sequentially. The visualization uses D3.js to load CSV data from `LineGraphDataSet.csv` and renders it as an SVG. The drawing effect is achieved using the `stroke-dasharray` and `stroke-dashoffset` properties, while the points animate in with a delayed transition.

Rronnieferrufino4908@gmail.com

81% match

Loading thumbnail…

Final Project PCP Graph

A parallel coordinates plot visualizes U.S. border and interior arrest data from 2014 to 2025, with each colored line representing a fiscal year across axes for total quantity, border arrests, interior arrests, convicted criminals, and non-criminals. Built with D3.js v7, the SVG renders axes and polylines colored via a categorical scale, supporting interactive hover and legend-click highlighting through d3.select and event listeners. The dataset, loaded via d3.csv, filters out earlier incomplete years, and the tooltips highlight individual year trajectories without altering the underlying scale.

Rronnieferrufino4908@gmail.com

79% 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

79% 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

78% match

Loading thumbnail…

Final Project PCP Graph

This parallel coordinates plot visualizes ICE arrest data from fiscal years 2014 onward, with each line representing a year across five dimensions: total quantity, border arrests, interior arrests, convicted criminals, and non-criminals. The D3.js v7 code uses `d3.scaleLinear` for each axis and `d3.scalePoint` for horizontal positioning, with a color ordinal scale distinguishing years. SVG rendering displays the axes and semi-transparent polylines, while an interactive legend allows highlighting specific years through hover behavior. The data is loaded from an external CSV file using `d3.csv`.

Rronnieferrufino4908@gmail.com

78% match