Fork of HTML Starter

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.

87% match

Fork of Fork of HTML Starter

This interactive map displays the states of India with hover effects that highlight each state and reveal its name in a tooltip. The visualization is built with React and D3.js, using the `d3.geoMercator` projection and `d3.geoPath` to render GeoJSON state boundaries as SVG paths. State polygons are colored a muted teal and brighten on mouseover. The GeoJSON data is loaded from an external GitHub repository, and the tooltip is implemented as an HTML overlay positioned via mouse event coordinates.

87% match

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.

86% match

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.

Fork of Fork of React Starter

This interactive map displays the states of India using GeoJSON data from the India State Map Data GitHub repository. Users hover over regions to reveal state names via a tooltip and click to toggle a persistent selection state, visualized by distinct fill colors. The visualization is built with React and D3.js, leveraging `d3.geoMercator` for projection, `d3.geoPath` for geographic paths, and state-based styling to update SVG attributes dynamically. The map loads the geographic data asynchronously and handles loading and error states.

Fork of React Starter

This interactive map of India displays each state as a colored SVG region, highlighting states and showing their names via tooltips on hover. Using React for the UI and D3.js for rendering, the map loads GeoJSON data from a remote TopoJSON repository and projects it with a Mercator projection. The code uses `d3.geoPath` for drawing shapes, `topojson.feature` for converting data, and a tooltip system driven by mouse events.

Fork of Derive India map - Open street

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.

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.