Map using Canvas

100%

Map using Canvas

✓ Published2🌍 Public

Last edited Jun 5, 2021

Created on Feb 17, 2021

This example displays an Indian state-level choropleth map, colored with a rainbow sequential scale based on the `POINTS_` property from NFHS-4 survey data. It renders geographic boundaries onto a Canvas element using D3 v4’s `d3.geoPath` with a Mercator projection, while `d3.scaleSequential` maps data values to colors. Each feature is individually stroked in black and filled via Canvas 2D context operations, with data loaded from a remote GeoJSON file.

AI-generated description

Map on canvas using D3

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Map using Canvas

This example renders a map of India using D3's `d3.geoMercator` projection and `d3.geoPath` with a Canvas 2D context. It draws the GeoJSON boundaries of Indian states with white fill and black strokes onto an 890×430 canvas. The code loads the geographic data from a remote GeoJSON file and also references the `random-points-on-polygon` library, though it does not explicitly generate points in the visible script. The map is centered on coordinates [80, 22.9] and uses a mercator projection scaled to the canvas width.

SShweta-tech

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

81% match

Loading thumbnail…

map with legend

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.

AAnimesh Nautiyal

81% match

Loading thumbnail…

IndiaMap

This example renders a choropleth map of Indian states, with each state filled by a categorical color and labeled with its name. It uses D3 v5’s `geoMercator` projection and `geoPath` to convert TopoJSON geometries into SVG paths, while `scaleOrdinal` and `schemeCategory10` assign colors. State boundaries are emphasized with white strokes, and hovering turns a state white. Data comes from a remote TopoJSON file, and the map is displayed within a fixed-width SVG on a teal gradient background.

VVamsi Krishna

80% match

Loading thumbnail…

Fork of Map of India with D3 - chloropleth map

This example shows a choropleth map of India’s states, with each state filled by a categorical color scale and labeled by name at its centroid. The visualization uses D3 v5’s `geoMercator` projection, `geoPath`, and `scaleOrdinal` to render the SVG paths. TopoJSON data from a remote GitHub source is parsed with `feature` to draw state boundaries, while state names are positioned using `pathGenerator.centroid`. The map omits the first feature from the dataset, likely removing a national outline or disputed region.

NNita

79% match

Loading thumbnail…

Map with React & D3

This example renders a choropleth map of India using React and D3. It displays state boundaries as SVG paths, filled with a teal color, against the full browser viewport. The map is projected using `d3.geoMercator` and drawn with `d3.geoPath`, while TopoJSON data is fetched from a remote gist and converted to GeoJSON via the `feature` function. React components manage the data loading lifecycle and render the SVG elements, with D3 handling the geographic calculations.

AAnimesh Nautiyal

79% match

Loading thumbnail…

country map

This example displays a choropleth map of India, rendering each state as a distinct colored path using geographic features loaded from a GitHub gist. The visualization employs a Mercator projection via `d3.geoMercator` and converts TopoJSON data to GeoJSON features with the `topojson.feature` function. Each state is drawn as an SVG path generated by `d3.geoPath`, with fill colors assigned from `d3.scaleOrdinal` and `schemeCategory10`. The map includes a title and uses hover styling, with all rendering handled through React and D3 v5.

Nnagarjuna1968

79% match

Loading thumbnail…

country map

This example displays a choropleth-style map of India rendered as SVG paths, with each state filled using a categorical color scale from `schemeCategory10`. The visualization uses `d3-geoMercator` for projection and `d3.geoPath` to generate the state boundaries from TopoJSON data loaded via `d3.json`. A zoom interaction is enabled, and hovering over a state changes its fill to grey via CSS. The map includes a title and is built with React, though the core logic relies on D3 v5 and the `topojson` feature API.

Nnagarjuna1968

78% match