Skip to main content
SimilarExport ZIP
100%

map with legend

✓ Published7🌍 Public
AAnimesh Nautiyal
Last edited Jun 5, 2021
Created on May 14, 2021

This example displays a choropleth map of Indian states, colored according to the area of each state using a sequential rainbow color scale. The map is rendered with React and D3 v6, using `d3.geoMercator` with `fitSize` for projection and `d3.geoPath` to draw SVG paths. State boundaries come from a TopoJSON file loaded via `d3.json`, and the color mapping uses `d3.scaleSequential` with `d3.interpolateRainbow`. The accompanying legend is prepared with the `d3-legend` library, though the legend rendering is commented out.

AI-generated description

Making map in react d3 method 1

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of map with legend

This example displays a choropleth map of Indian states, with each state’s color encoding its area value through a sequential rainbow scale. The map is rendered as SVG using React and D3. The code loads TopoJSON data for Indian states, converts it to GeoJSON with `topojson.feature`, and projects it with `geoMercator` and `d3.geoPath`. A `d3.scaleSequential` with `d3.interpolateRainbow` assigns colors based on the `AREA_` property, while the legend is prepared but not rendered.

SSnapika
92% match
Loading thumbnail…

Fork of map with legend

This example displays a choropleth map of Indian states, using a sequential rainbow color scale to encode the `AREA_` property of each state. The map is rendered as SVG within a React component, with geographic paths generated using `d3.geoPath` and a Mercator projection fitted to the viewport via `d3.geoMercator().fitSize`. State boundaries come from a TopoJSON file loaded with `d3.json`, and the color mapping uses `d3.scaleSequential` with `d3.interpolateRainbow`. The code includes a legend SVG element but does not currently render a legend.

SSoorena
92% match
Loading thumbnail…

Fork of map with legend

This example renders a choropleth map of Indian states, coloring each state by its `AREA_` attribute using a sequential rainbow color scale. The map is drawn as SVG paths via `d3.geoPath` with a `d3.geoMercator` projection fit to the window size. State boundaries come from a TopoJSON file loaded with `d3.json` and converted to GeoJSON using `topojson.feature`. React manages the component lifecycle, while `d3.scaleSequential` maps data extents to colors; a separate SVG element is prepared for a legend, though the legend itself is not implemented in the visible code.

Bbindhureddy98
92% match
Loading thumbnail…

Fork of Fork of map with legend

This example displays a choropleth map of Indian states, colored with a rainbow sequential scale based on each state’s `AREA_` property. Built with React and D3 v6, it uses `json` to load TopoJSON data, `feature` to convert it to GeoJSON, and `geoMercator` with `fitSize` for projection. `geoPath` renders the SVG paths, while `scaleSequential` and `interpolateRainbow` map area values to fills. The code includes a legend reference, but no legend is actually rendered.

Bbhargavarathod
90% match
Loading thumbnail…

Fork of map with legend

This example visualizes Indian states as a choropleth map, where each state’s color encodes its `AREA_` property using a sequential rainbow interpolator. The map is rendered with React and D3 v6, using `d3.geoMercator` projection and `d3.geoPath` to draw SVG paths from TopoJSON data loaded from a GitHub gist. A color legend is declared via `d3-legend` but is not actually rendered. The visualization updates reactively when the geometry state loads, filling each polygon based on the computed color scale.

Ccharkaoui
90% match
Loading thumbnail…

Fork of map with legend

This choropleth map displays Indian states, with each polygon’s fill color mapped to its AREA_ attribute. The color scale uses a sequential interpolator with a rainbow gradient, applied via `d3.scaleSequential` and `d3.interpolateRainbow`. The map is rendered as SVG using React and `react-dom`, with topology loaded from a remote TopoJSON URL. Geographic projection and paths are generated with `geoMercator` and `geoPath`, while the data array is processed through `topojson.feature`.

AAnissa Belkelfa
88% match
Loading thumbnail…

Map

This example displays a choropleth map of Indian states, with each state filled by a distinct categorical color and labeled with its name. It uses D3 v4's `d3.geoPath` with the `d3.geoMercator` projection to render SVG paths from TopoJSON data, and `d3.scaleOrdinal` with `schemeCategory10` for coloring. State labels are positioned using the path generator's centroid method. The map also generates tooltips via appended `title` elements, loading geographic data from a remote TopoJSON source.

DDINESH SAI BOPPANA
87% match
Loading thumbnail…

Fork of map with legend

This example displays a choropleth map of Indian states, colored by the `AREA_` property from NFHS-4 data. It loads TopoJSON state geometries from a GitHub gist and renders them as SVG paths using React and D3 v6. The map uses `geoMercator` with `fitSize` for projection, and a sequential color scale with an `interpolateRainbow` interpolator to encode area values. A legend is prepared via `d3-legend` but remains commented out.

RRahulChaitu999
86% match