Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

This example displays an interactive map of India, showing both state boundaries and district-level divisions, with each district colored by its state. Users can zoom and pan the map using d3.zoom, and hovering over a district reveals its name and state in a tooltip. The visualization uses d3.geoMercator for projection, d3.geoPath to render TopoJSON data from two external sources, and d3.scaleOrdinal with schemeCategory10 for colors. The code also includes an orthographic world map with draggable rotation in a separate module.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of India Map

This interactive map of India displays state and district boundaries, with each district colored by its state using a categorical color scale. The visualization uses d3.geoMercator for projection, d3.geoPath to render TopoJSON features for both administrative levels, and d3.zoom to enable panning and zooming. Hovering over a district reveals a tooltip with its name and state; the code also attempts to label states with text positioned via path centroids, though that feature is incomplete.

SsreepavanKothapalli

88% match

Loading thumbnail…

Fork of india map

This interactive visualization displays India’s administrative divisions, using distinct colors for districts and dark green highlighting on hover. It also marks state boundaries with a black stroke. The map is rendered as SVG using `d3.geoPath` with a Mercator projection, and supports zoom and pan via `d3.zoom`. District and state boundaries come from TopoJSON files, with district names and states shown as tooltips. The code also loads a CSV of Indian cities, though city markers are not rendered.

Bbindhureddy98

88% match

Loading thumbnail…

Fork of Fork of Fork of india map

This visualization displays a zoomable map of India with all its districts and states, rendered as SVG paths. The map uses categorical colors for districts and overlays state boundaries with red strokes. Built with D3 v5, it employs `d3.geoMercator` for projection and `d3.geoPath` to generate paths from TopoJSON data. The map supports interactive zooming via `d3.zoom`, and hovering over districts changes their fill to silver, while tooltips show district and state names from the loaded data.

DDivyaVellanki

88% match

Loading thumbnail…

Fork of India Map

This visualization displays a choropleth map of India with its districts and states, rendered using the Mercator projection and geographic path generation. It overlays district boundaries colored by state using `d3.scaleOrdinal` with `schemeCategory10`, while state borders are stroked in black, and hovering highlights districts in dark blue. The map supports interactive zooming via `d3.zoom`, with district and state data loaded from GeoJSON and TopoJSON sources, and uses SVG paths for rendering.

GGogineni44

87% match

Loading thumbnail…

Fork of Fork of Fork of india map

This visualization shows a choropleth map of India with district-level boundaries colored by state and overlaid with state outlines, enabling pan and zoom interaction. The map renders districts using `d3.geoPath` with a `geoMercator` projection, while state and district data come from external TopoJSON files. Hovering a district displays its name and state in a tooltip via appended `title` elements, and the view transforms with `d3.zoom`. District colors derive from `scaleOrdinal` with `schemeCategory10`.

Ssaiteja0725

87% match

Loading thumbnail…

Fork of Fork of india map

This visualization displays a map of India with its states and districts, colored by state using a categorical color scale. It shows district-level boundaries with hover effects that turn districts black, and state boundaries with orange strokes. The map supports zooming and panning via d3.zoom. Built with React, it uses d3.json to load TopoJSON data from GitHub sources, d3.geoMercator for projection, and d3.geoPath to render the SVG paths.

Ssaiteja0725

86% match

Loading thumbnail…

Fork of Fork of Fork of Fork of india map

This visualization displays a choropleth map of India, rendering both state boundaries and district-level subdivisions. Districts are filled with categorical colors using a `d3.scaleOrdinal` with `schemeCategory10`, and hovering over a district turns it black. The map uses a `d3.geoMercator` projection and `d3.geoPath` to draw the geometry. It is built with React and D3, pulling TopoJSON data from GitHub sources for state and district boundaries. Pan and zoom interactions are enabled via `d3.zoom`.

Ssaiteja0725

86% match

Loading thumbnail…

Fork of Fork of india map

This visualization displays India’s states and districts as vector paths overlaid on a Mercator projection. The map distinguishes administrative levels with red state boundaries and brown district borders, while district fills use an ordinal color scale. It loads two TopoJSON datasets (state and district boundaries) and renders them as SVG paths using `d3.geoPath` and `d3.geoMercator`. The implementation also applies `d3.zoom` for interactive pan and zoom, with hover effects that highlight districts. The map is built with React and uses the `topojson` library to process the geographic features.

DDivyaVellanki

86% match