Skip to main content
SimilarExport ZIP
100%

Map- 1

✓ Published0🌍 Public
NNita
Last edited Feb 23, 2025
Created on Feb 23, 2025
Forked from React Starter

This example shows a choropleth map of India displaying the rate of missing children per 100,000 population for each state in 2021, using a yellow-orange-red color scale to indicate intensity. Hovering over a state reveals a tooltip with its name and data value. The visualization uses the D3.js `geoMercator` projection, `geoPath` for rendering, and `scaleSequential` for coloring, with state interactivity handled through `.on("mouseover")` events. Geographic boundaries come from an external GeoJSON source, while crime statistics are hardcoded in a JavaScript array.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Rate of Missing Children Under Age 18,India, year-2022-Map

The choropleth map visualizes the rate of missing children under age 18 per 100,000 population across Indian states and union territories in 2022, using a sequential red color scale where darker shades indicate higher rates. Built with D3 v7, the visualization loads GeoJSON state boundaries and CSV population data, then applies the `d3.geoMercator` projection and `d3.geoPath` to render the map. Interactive tooltips display state names and precise rates on hover, while a gradient legend shows the data range. The map reveals the highest rates in Delhi, Chandigarh, and Madhya Pradesh, with several northeastern states showing near-zero rates.

NNita
85% match
Loading thumbnail…

Fork of Rate of Missing Children Under Age 18,India, year-2022-Map

This visualization explores the issue of missing children under 18 in India for 2022, combining a choropleth map of India showing rates per 100,000 population with bar charts displaying total counts by state and gender breakdowns. The interactive elements highlight specific data points through tooltips, with the map using d3.geoPath and topojson to render geographic boundaries. Additional bar charts use d3.scaleBand, d3.scaleLinear, and d3.stack to show comparisons and stacked gender distributions. The choropleth employs a sequential color scale with a linear gradient legend, while data is loaded from CSV files using d3.csv.

NNita
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…

India Map

This example displays a choropleth map of Indian states, colored with a categorical color scale and labeled with state names positioned at each region's centroid. It renders SVG paths using `d3.geoPath` with a `geoMercator` projection, and loads GeoJSON data via `d3.json` from a public gist. State boundaries are styled with orange strokes, and tooltips appear on hover via appended `title` elements. The visualization uses `scaleOrdinal` with `schemeCategory10` to assign colors to each state based on its `NAME_1` property.

Aachyutanandmishra17@gmail.com
81% 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
80% match
Loading thumbnail…

Missing Children per 100k Population

This interactive bar chart shows the number of missing children per 100,000 population across Indian states and union territories, ranked from highest to lowest. The visualization uses a red sequential color scale, with darker shades indicating higher rates, and includes hover tooltips displaying exact values. Built with React and D3.js, it utilizes D3’s band scales for categorical state positioning and linear scales for the value axis, with a `ResizeObserver` to make the SVG responsive to container size. The data is loaded from a CSV file containing state names and corresponding rates.

NNita
80% match
Loading thumbnail…

Rate of Missing Children Under Age 18,India, year-2022

This visualization gallery example examines missing children under 18 in India for 2022, presenting both total counts and per-capita rates across states and union territories. The views include a large horizontal bar chart ranking total missing children, a stacked bar chart breaking down the top 15 states by gender (boys, girls, transgender), and a choropleth map using `d3.geoMercator` and `d3.geoPath` to show rates per 100,000 population. All charts use `d3.csv` to load data and include interactive tooltips on hover, with the map employing TopoJSON for geographic boundaries and a sequential color scale.

NNita
79% match
Loading thumbnail…

Country Map

This example displays a choropleth map of India rendered as an SVG, with each state filled using a categorical color scale. The visualization uses D3’s `geoMercator` projection, `geoPath`, and `scaleOrdinal` to draw the country’s boundaries from a TopoJSON file hosted on GitHub. Title text appears above the map, and hovering over any state highlights it in red via CSS. The code relies on the D3 v5, TopoJSON, and d3-geo-projection libraries.

Vvaddepallinaveen
79% match