Skip to main content
SimilarExport ZIP
100%

Fork of Derive India map - Open street

✓ Published6🌍 Public
NNita
Last edited Jul 28, 2025
Created on Jul 28, 2025

This interactive choropleth map displays crime rates across Indian states and union territories, with a color scale from yellow to red and a legend showing rates per 100,000 population. Hovering over a state reveals its specific crime rate in an information panel. The visualization combines D3.js (v6) for data parsing and geoPath rendering with Leaflet.js for map interaction and OpenStreetMap tile layers. State boundaries come from external GeoJSON data, while crime statistics are loaded from a local CSV file.

AI-generated description

India Crime Rate Map Visualization

This project creates an interactive map visualization showing crime rates across Indian states and union territories.

Features

  • Interactive choropleth map of India
  • Color-coded states based on crime rates
  • Hover effects with detailed information
  • Legend showing crime rate ranges
  • Responsive design with information panel

Data

The visualization uses data from data.csv which contains:

  • State/Union Territory names
  • Crime rates per 100,000 population

How to Use

  1. Open index.html in a web browser
  2. Hover over states to see detailed crime rate information
  3. The legend on the right shows the color scale and selected state details
  4. Zoom and pan the map to explore different regions

Technical Details

  • Built with D3.js for data visualization
  • Uses Leaflet.js for map interaction
  • Responsive design with CSS Grid/Flexbox
  • Color scale uses D3's sequential color scheme
  • State boundaries from GeoJSON data

Files

  • index.html - Main visualization file
  • data.csv - Crime rate data by state
  • README.md - This documentation
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Derive India map - Open street

An interactive choropleth map visualizes crime rates per 100,000 population across Indian states and Union Territories, with hover tooltips, click-to-select, search filtering, and union territory toggling. Built with D3.js v7 for data processing and SVG rendering, it uses Leaflet for the base map, d3.geoPath for shape projection, and a d3.scaleSequential color scale. Crime data comes from a local CSV file, while state boundaries load from a GeoJSON URL.

NNita
97% match
Loading thumbnail…

Fork of Fork of Derive India map - Open street

This interactive map shows crime rates for Indian states and union territories, with a yellow-to-red gradient indicating rate severity per 100,000 people. Hovering over a region reveals the state name, crime rate, and capital city in an information panel and tooltip. The visualization combines Leaflet.js for map rendering with OpenStreetMap tiles, while D3.js (v6) uses a `geoTransform` projection to overlay state boundaries from a GeoJSON file onto the map. Crime data is loaded from a CSV file and mapped to a sequential color scale using `d3.scaleSequential`.

Sskmriyaz0786@gmail.com
96% match
Loading thumbnail…

Fork of Fork of Derive India map - Open street

This interactive map of India overlays D3-rendered state boundaries onto a Leaflet map, displaying crime statistics from a local CSV when hovering over regions. Built with D3 v6 and Leaflet 1.7.1, it uses d3.geoPath with a custom projection that syncs geographic coordinates to Leaflet’s tile layer. The application includes state metadata, a fallback street network for Mumbai, and supports switching between OpenStreetMap, terrain, and satellite basemaps.

NNita
89% match
Loading thumbnail…

Fork of Derive India map - Open street

This interactive map of India combines Leaflet.js with a D3.js SVG overlay to display state boundaries and street-level fallback data. Users can hover over states to reveal population, area, capital, and description details in a side panel, or click to zoom into regions. The application supports multiple tile styles including OpenStreetMap, terrain, and satellite views. D3’s geoTransform projection and geoPath render GeoJSON state data from the geohacker/india repository, while the Leaflet map API handles panning, zooming, and view resets.

NNita
85% match
Loading thumbnail…

Fork of HTML Starter

This choropleth map visualizes crime rates across Indian states, encoding rates using a sequential orange-red color scale with hover tooltips showing exact values. It loads India GeoJSON data from GitHub and renders SVG paths via d3.geoPath with a Mercator projection fitted to the viewport. The code applies a d3.scaleSequential color scale over a sample dataset, draws state labels using path.centroid, and binds mouseover events to display tooltips interactively.

NNita
85% match
Loading thumbnail…

Fork of Map of India-Part I

This choropleth map of India displays district-level crime rates, with districts shaded on a blue sequential scale and hover tooltips revealing the state name and crime rate. The visualization loads district boundaries from a TopoJSON source and crime statistics from a CSV file, then projects them using `d3.geoMercator` and `d3.geoPath`. District fill colors are assigned via `d3.scaleSequential` with `d3.interpolateBlues`, and `topojson.feature` extracts the geographic shapes for rendering as SVG paths.

NNita
84% match
Loading thumbnail…

Fork of Fork of Fork of Map of India Part 4

A choropleth map of India displays the rate of total crime against women per state or union territory for 2022, using a sequential blue color scale to represent intensity. The visualization pairs district-level geographic boundaries from a DataMeet TopoJSON file with crime statistics loaded from a GitHub Gist. Built with D3.js version 7.9.0 and TopoJSON, it uses `d3.geoMercator` and `d3.geoPath` to project and render the shapes, while `d3.scaleSequential` with `d3.interpolateBlues` maps crime rates to colors, with hover tooltips showing exact values.

NNita
84% match
Loading thumbnail…

Fork of Fork of Derive India map - Open street

This interactive map overlays Indian state boundaries from a GeoJSON file onto an OpenStreetMap tile layer using Leaflet and D3 v6. The visualization renders each state as a D3-generated SVG path through `d3.geoTransform` and `d3.geoPath`, with mouseover interactions highlighting states and displaying a tooltip with the state name. The map updates state paths dynamically on zoom or view reset using Leaflet’s `zoomend` and `viewreset` events.

NNita
83% match