Fork of Map

100%

✓ Published0🌍 Public

Last edited Apr 12, 2026

Created on Apr 12, 2026

Forked from Map

This choropleth shows global crime rates by country, with a pink-to-purple sequential color scale indicating values from 0 to 50. The map uses the Natural Earth projection via `d3.geoNaturalEarth1` and renders country boundaries as SVG paths from the world-atlas TopoJSON dataset. A hardcoded `Map` object supplies crime values for a few nations (e.g., USA, India, China), which are mapped to fill colors using `d3.scaleSequential` with `d3.interpolateRdPu`. Interactive tooltips display each country’s crime rate or "No Data" on hover, driven by `d3.geoPath` and D3’s event listeners.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

A9-World Choropleth Map

This is a choropleth map showing the global crime index by country, using a red sequential color scale where darker shades indicate higher crime levels. The visualization loads world GeoJSON boundaries and crime index data from a CSV, then renders each country as an SVG path via `d3.geoPath` with a Mercator projection. A tooltip displays the country name and crime index on hover, while the color scale is defined with `d3.scaleSequential` and `d3.interpolateReds`. Countries without data appear gray.

Bbhavi.kenia@gmail.com

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

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

82% match

Loading thumbnail…

maps

This choropleth map shows U.S. state crime rates per 100,000 people, with states colored on a sequential orange-red scale based on values loaded from a CSV file. The visualization uses D3 v7 and TopoJSON to render state boundaries via `d3.geoAlbersUsa` projection and `d3.geoPath`, while encoding data with `d3.scaleSequential` and `d3.interpolateOrRd`. A canvas-generated gradient legend with a `d3.axisBottom` scale accompanies the SVG map, and hover interactions display crime values and state names in a tooltip.

Vvydeeshm@gmail.com

81% match

Loading thumbnail…

ICE8Wmap

This map shows global crime rates by country, using a yellow-to-red color scale to represent the range of synthetic crime rate values. Built with D3.js, it renders a Natural Earth projection using `d3.geoNaturalEarth1()` and draws country boundaries with `d3.geoPath()`. The code generates random crime rates and merges them with TopoJSON country data from the world-atlas package via `topojson.feature()`. It also adds a graticule layer with `d3.geoGraticule()` and an interactive color legend with axis labels.

Ddandamidhun41613@gmail.com

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

81% match

Loading thumbnail…

Fork of map1

This world map uses a blue sequential color scale to show internet penetration percentages for a sample of countries, with darker blues indicating higher usage and gray for missing data. Built with d3.geoPath and a Natural Earth projection, the visualization renders country boundaries from the world-atlas TopoJSON and joins names from its TSV file. Interactive tooltips display country names and values, while a legend and captions clarify the color mapping. The code uses d3.scaleSequential with an interpolateBlues interpolator for the choropleth coloring.

Ppriyankachary1701@gmail.com

81% match

Loading thumbnail…

Fork of D3 Starter

This choropleth maps crime rates per 100,000 people across U.S. states, coloring each state on a red-orange gradient from low to high values. The map uses an Albers USA projection via `d3.geoAlbersUsa()`, with state boundaries drawn through `d3.geoPath()`. State-level data from a CSV is joined to TopoJSON features from the us-atlas package, and a hover tooltip shows each state’s name and rate. A gradient legend, rendered as a Canvas image embedded in the SVG, includes an axis from `d3.axisBottom()`.

Vvydeeshm@gmail.com

80% match