Skip to main content
SimilarExport ZIP
100%

Geo spatial points with H3

✓ Published0🌍 Public
Aarun-subba
Last edited Aug 27, 2020
Created on Aug 27, 2020

A map of India displays a geo-spatial point distribution, with the region of Jammu & Kashmir highlighted by a grid of hexagonal cells generated using the H3 library. The visualization uses D3.js v5 to render the map and points as SVG elements, with a Mercator projection applied via `d3.geoPath`. User-supplied CSV data is aggregated by rounding coordinates to find duplicate points and increment their count, with zoom interactions enabled through `d3.zoom`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Geo India

Geo India is an interactive choropleth map that visualizes Indian state and district boundaries, allowing users to drill down from a national overview to a specific state by clicking on it. Built with React and D3, the map uses `d3.geoMercator` for projection and `d3.geoPath` to render TopoJSON features from two remote datasets. Clicking a state triggers a smooth `d3.zoom` transition, scaling and translating the SVG view to focus on the selected region, which then re-renders with district-level polygons. The animation lasts 500 milliseconds, and the map supports pan and zoom up to an 8x scale.

VVikil Lakkavatri
73% match
Loading thumbnail…

GeoVisualization - Choropleth map of India

This example displays a choropleth map of India, rendering its states and major places as an interactive SVG graphic. It uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to draw TopoJSON features representing state polygons and city points. State subdivisions are filled with a categorical `d3.scaleOrdinal` color scheme at reduced opacity, while labels for each state and place are positioned using `path.centroid` and the projection of coordinates. The map automatically centers and scales to fit the viewport using geographic bounds. Data comes from a remote TopoJSON file, and the code updates an earlier D3 v4 implementation to D3 v7.

AAlark Joshi
73% match
Loading thumbnail…

INDIA

This interactive visualization presents a map of India, highlighting its states and districts in color. Users can explore the geography through zooming and panning via d3.zoom, while the map’s districts display hover tooltips that reveal district and state names. The visualization uses d3.geoPath with a geoMercator projection to render GeoJSON features built from TopoJSON data, which is sourced from external repositories for Indian state and district boundaries.

Aadapavaishnavi12
71% match
Loading thumbnail…

Map

This visualization displays a geographic map of India and surrounding regions using a Mercator projection, centered on coordinates [77, 19]. The map renders GeoJSON features as SVG paths, with continents outlined in gray and specific school-type locations highlighted in blue. Built with D3 v5, the code uses `d3.geoMercator()` for projection and `d3.geoPath()` for path generation. The visualization loads data from a local GeoJSON file and renders at a fixed viewBox size of 1400 by 700 pixels.

SShweta-tech
71% match
Loading thumbnail…

India Map with d3.js

This example renders a choropleth-style map of India using the D3.js library. It loads GeoJSON data from a remote TopoJSON repository and projects it with a Mercator projection, using `d3.geoMercator` and `d3.geoPath`. The SVG output displays each state as a path with gray fill and dark stroke, sized to an 800x600 viewport.

VVenkat-Sumith-Thota
70% match
Loading thumbnail…

Map - India

This example visualizes the states and districts of India as an interactive SVG map. Users can pan and zoom the map using d3.zoom, while hover states reveal district names via title elements. The visualization uses d3-geoMercator for projection, d3.geoPath for rendering paths, and d3.scaleOrdinal with schemeCategory10 to color districts. Geographic data comes from two TopoJSON sources: India state boundaries and 2019 district boundaries. The code also loads city data from a CSV, though points are not plotted in the final rendering.

Llambda-fox
70% match
Loading thumbnail…

India Map

This example displays an interactive choropleth map of India, with districts and states rendered as colored SVG paths that respond to zooming and hovering. It uses D3’s `geoMercator` projection, `geoPath` for drawing geographic features, and `topojson.feature` to extract polygon data from TopoJSON files. The map also applies `d3.scaleOrdinal` with `schemeCategory10` to color districts, and `d3.zoom` enables pan and zoom. State and district names appear in tooltips via appended text elements.

UUmarani Vemula
70% match
Loading thumbnail…

India Map

This example displays a map of India with each state rendered as a filled green path. It demonstrates the core D3 geo capabilities, using `geoMercator` to project geographic coordinates and `geoPath` to generate the SVG path strings for the map features. The visualization is built with React, fetching GeoJSON data from a GitHub gist and converting it from TopoJSON using the `topojson` `feature` function. The Map component imports these D3 functions to transform the data into the final SVG rendering.

AAshrith Kudidhi
70% match