Building an Interactive Map of Police Shootings in Germany

javascriptleafletdata-visualizationsvgcilip

#Introduction

In recent years, the issue of police violence in Germany has gained significant public attention. While official statistics are incomplete and often difficult to access, the organization CILIP has been documenting incidents of police firearm usage since 1976. This project aims to make this data accessible to the public through an interactive web-based map.

In this blog post, I'll walk you through the technical implementation of this visualization tool, from data processing to the interactive frontend.

#Project Overview

The Police Shootings Germany project is an interactive web application that visualizes over 529 documented incidents of police firearm deployments in Germany from 1976 to 2025. The application provides:

  • Interactive map visualization using Leaflet.js
  • Filterable data by year and category
  • Real-time statistics with SVG charts
  • Chronological timeline of incidents
  • Search functionality

Police Shootings Overview

#Architecture

The application follows a client-side architecture with no backend required. All data processing happens in the browser.

Loading diagram...

#Technology Stack

| Technology | Purpose | |------------|---------| | HTML5 | Semantic markup | | Tailwind CSS | Utility-first styling | | Vanilla JavaScript | Client-side logic | | Leaflet.js | Interactive maps | | OpenStreetMap | Base map tiles | | SVG | Chart rendering |

#Data Pipeline

The application implements a robust fallback mechanism to ensure the map always works, even when external data sources are unavailable.

Loading diagram...

#Data Structure

The primary data source is a CSV file with 21 columns including Fall, Name, Gender, Age, Date, Location, State, and more.

Example incident:

#Frontend Implementation

#Layout Structure

The page uses a responsive grid layout with a sidebar for filters and a main area for the map, statistics, and timeline.

Loading diagram...

#SVG Chart Implementation

All charts are rendered using SVG for crisp, scalable graphics.

Loading diagram...

Example SVG generation code:

#Key Features

#1. Interactive Map

  • Clustering for dense areas
  • Color-coded markers by category
  • Popup details with incident information
  • Zoom and pan controls

Map View

Map Popup

#2. Dynamic Filtering

#3. SVG Statistics Dashboard

Four pie charts provide real-time statistics:

  • Categories: Fatal, Injured, Warning shots
  • Weapon Types: Firearms, knives, etc.
  • Locations: Indoor, outdoor, unknown
  • Armed Status: Armed vs. unarmed victims

SVG Charts

#4. Chronological Timeline

A scrollable list of incidents sorted by date, with clickable items that focus the corresponding map marker.

#Data Quality and Limitations

#Known Issues

  1. Incomplete Data: The dataset likely underrepresents actual incidents
  2. Source Bias: Data comes primarily from media reports
  3. Geocoding: Some locations may have incorrect coordinates
  4. Categorization: Classification may vary

#Data Sources

| Source | Description | |--------|-------------| | CILIP | Primary database at cilip.de | | OpenStreetMap | Map tiles | | Leaflet.js | Map library |

#Future Improvements

#Planned Enhancements

  1. Dark Mode: Toggle for low-light viewing
  2. Mobile Optimization: PWA or native app
  3. Heat Map: Density visualization
  4. Data Export: PDF report generation
  5. Timeline Animation: Animate through history

#Conclusion

This project demonstrates how open data and modern web technologies can be combined to create accessible visualizations of complex social issues. The entire application runs in the browser with no server-side dependencies, making it easy to deploy and maintain.

The code is open source and available on GitHub. Contributions are welcome.

Copyright 2026 - Police Shootings Germany

Created:
4/14/2026
Last Updated:
4/14/2026