Fork of Map of India-Part I

100%

Fork of Map of India-Part I

✓ Published1🌍 Public

Last edited May 18, 2024

Created on May 18, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Map of India-Part I

This map of India uses a Mercator projection to display district-level crime rates, with each region colored on a blue sequential scale from white to dark blue based on the crime rate value. The visualization loads TopoJSON boundary data and CSV crime statistics, then combines them using the `topojson.feature` API and a `Map` lookup keyed by state names. D3’s `d3.geoPath` and `projection.fitSize` render the shapes, while `d3.scaleSequential` with `d3.interpolateBlues` assigns fill colors. Hovering over any district reveals its name and crime rate via a native SVG `title` tooltip.

NNita

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

91% match

Loading thumbnail…

Fork of Map of India Part 2

This interactive map of India visualizes crime data against women from 2020 to 2022, with each state rendered as a hover-responsive SVG path that fills red on mouseover. Built with D3.js (v7.9.0) and TopoJSON, it fetches geometry from an India district boundary dataset and joins it with a CSV of crime statistics. The map uses `d3.geoPath` with a Mercator projection and `d3.scaleOrdinal` for color coding, while `d3.select` manages the SVG element and appends interactive paths.

NNita

88% match

Loading thumbnail…

Fork of Fork of Map of India Part 3

This choropleth visualizes the rate of total crimes against women (2022) across Indian states. It uses a D3.js SVG rendering with a Mercator projection to draw state boundaries, colored by a linear scale from white to blue through the `d3.scaleLinear` API. The map data is sourced from a 2019 district boundary TopoJSON, while crime statistics are loaded from a CSV. Hovering over a state highlights it in red.

NNita

87% match

Loading thumbnail…

Fork of Map of India : Crime Rate 2022 Women

This choropleth map visualizes the crime rate against women across Indian districts for 2022, using a sequential blue color scale to indicate severity. District boundaries are rendered as SVG paths via `d3.geoPath` with a `d3.geoMercator` projection fitted to the viewport. Crime data is loaded from a CSV and joined to district geometries by state name, with tooltips showing exact values. The implementation relies on D3.js and TopoJSON to parse the district boundary file and apply the color encoding.

NNita

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

86% match

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

86% match

Loading thumbnail…

Fork of Map of India with D3 - chloropleth map-APR 23, 2021

This choropleth map of India colors district boundaries by state using a categorical color scale. The visualization renders district polygons as SVG paths and labels each with its state name at the polygon’s centroid. It uses d3.json to load district-level TopoJSON from a GitHub repository, topojson.feature to convert it to GeoJSON, and d3.geoMercator with d3.geoPath for projection and rendering. The code also applies d3.scaleOrdinal with schemeCategory10 for fills and sets stroke styling via CSS.

NNita

85% match