Skip to main content
100%

Paths between named points

✓ Published0🌍 Public
Aandrew-reid
Last edited Mar 17, 2017
Created on Mar 7, 2017

A map of India renders city markers and orange curved arcs between them, using D3 v4 with an SVG Mercator projection. City coordinates are loaded from a JSON dictionary and plotted as circles, while routes between pairs of cities are drawn as quadratic arcs using a custom `lngLatToArc` function that computes curved paths from projected source and target points. The map is layered with a green semi-transparent GeoJSON shape of India beneath the arcs and city points.

AI-generated description

This block is in response to a stack overflow question on multiple data sources and d3 maps. It may however be more useful in showing how to use named nodes. Uses d3v4.

Similar vizzes

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
76% match
Loading thumbnail…

SVG Map template

This example displays a map of India using D3.js, rendering geographic boundaries as SVG paths. It loads GeoJSON data from a remote URL and projects it with a Mercator projection using `d3.geoMercator` and `d3.geoPath`. The map is centered on India and scaled to fit the browser window, with each feature drawn as a path element styled with the class `boundary`.

AAnimesh Nautiyal
75% match
Loading thumbnail…

country map

This interactive visualization displays a choropleth map of India rendered as SVG paths. Using D3 v5 with the geoMercator projection and geoPath API, it draws country boundaries with colors assigned via scaleOrdinal. Data is loaded from a Gist-hosted TopoJSON file and parsed through the topojson library’s feature function. Hovering highlights regions in violet. The visualization also includes a white header text, with styling handled by an external CSS file.

Ppavankalyan1507
74% match
Loading thumbnail…

India Map

This interactive map of India renders each state as a filled SVG path, with state names overlayed at their geographic centroids. The visualization uses D3's `geoMercator` projection and `geoPath` to generate the map geometry from a GeoJSON file containing `IND_adm1` administrative boundaries. Each state is colored using D3's `scaleOrdinal` with `schemeCategory10` palette, and hovering turns a state white. The vector data is processed through the TopoJSON library's `feature` function, with the map positioned and scaled via explicit projection translations.

AArun Pratap
74% match
Loading thumbnail…

India Map

The example displays a choropleth-style map of Indian states and territories, rendered as orange SVG paths on a full-screen canvas. It draws geographic boundaries using a Mercator projection centered on the country, with `d3.geoPath` converting GeoJSON features into SVG path data. The map data is loaded remotely from a TopoJSON file, which is converted to GeoJSON via `topojson.feature`. The visualization is built with React components, where the `Map` component receives the parsed feature collection and applies the projection, while React manages the overall SVG rendering.

Ggayathri
74% 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
74% match
Loading thumbnail…

Map of India with D3 - chloropleth map

This choropleth map of India colors each state using D3’s `scaleOrdinal` and `schemeCategory10`, with state names placed at the centroid of each polygon via `geoPath.centroid`. It uses the `geoMercator` projection, `topojson.feature` to parse India’s states from a TopoJSON file, and renders SVG paths with black strokes between states. The map loads data from a remote TopoJSON source and appends interactive tooltips using SVG `<title>` elements.

RRavi Teja Bonam
74% match
Loading thumbnail…

Country

This example displays a map of India rendered in red on a blank SVG canvas. Using the D3.js v4 library, it loads GeoJSON country data, filters the features to isolate India, and projects it with `d3.geoMercator` and `d3.geoPath`. The map is centered using specific latitude and longitude coordinates and scaled to fit an 840x500 pixel SVG, with data sourced from a GitHub gist.

MManoj Kolluri
74% match