D3: Loading GeoJSON data and generating SVG paths

100%

D3: Loading GeoJSON data and generating SVG paths

✓ Published0🌍 Public

Last edited Nov 24, 2017

Created on Oct 8, 2014

This example combines Canadian health data with geographic boundaries to create a choropleth map. It loads GeoJSON province outlines via `d3.json` and CSV health statistics via `d3.csv`, merging them by province name to color each region using a `d3.scale.quantize` color scale. The map uses a `d3.geo.conicConformal` projection and `d3.geo.path` for SVG rendering, with population circles from a third CSV overlaid using the same projection.

AI-generated description

Similar vizzes

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example visualizes Canada’s provinces as a choropleth map on a blue spherical background using a natural Earth projection. The map is rendered with SVG paths generated by `d3.geoPath` and `d3.geoNaturalEarth1`, while TopoJSON data is fetched and converted to GeoJSON via the `feature` method. Province boundaries appear as light green shapes with thin black strokes, and the sphere itself is drawn as a distinct path. The code loads data from a GitHub gist and relies on D3 v5 and TopoJSON v3.

SSeldomtimely

79% match

Loading thumbnail…

Untitled

This example displays a choropleth map of Canada using D3 v7, with provinces rendered as SVG paths via `d3.geoPath` and an Albers projection. Hovering over a province changes its fill color from green to red and triggers a tooltip div, positioned via mouse event coordinates, that shows the province name from the loaded GeoJSON data. The tooltip is shown and hidden by toggling a CSS class, and the map data is fetched from a GitHub-hosted GeoJSON file.

SSUSHMA CHIRRA

78% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a choropleth map of geographic features rendered as SVG paths. It uses D3.js v5 to load the GeoJSON data, apply a Mercator projection with `d3.geoMercator`, and generate the path data via `d3.geoPath`. The TopoJSON library converts the datasource into GeoJSON features using `feature()`, while `d3.json` fetches the remote file before appending each path to the SVG canvas.

Cchaimmaeee

78% match

Loading thumbnail…

Canada Map

This example presents a choropleth-style map of Canada’s provinces, rendered as orange SVG paths with white strokes on a blue background. It uses `d3.json` to load the `provinces-10m.json` TopoJSON dataset from the `canada-atlas` package, then converts it to GeoJSON via `topojson.feature`. The `d3.geoPath` generator applies a `d3.geoMercator` projection with a scale of 1500 to draw each province boundary, with styling handled through static attributes.

NNitheeshSama

77% match

Loading thumbnail…

Canadian Province TopoJSON

This example displays a graticule-free map of Canadian provinces as a topojson mesh, rendered as SVG paths with black outlines. The code uses d3.geo.conicConformal for projection and d3.geo.path to draw the features. A scatter of small circles marks each arc’s starting point. The data comes from a topojson file that refines a GeoJSON FeatureCollection sourced from Natural Earth.

BBrideau

77% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to build a map visualization using D3.js, displaying geographic features as green polygons with black outlines on a blue background. It loads GeoJSON data from a remote URL and renders it as SVG paths using the `geoPath` generator with the `geoAiryRaw` projection from d3-geo-projection. The code relies on `d3.json` for data loading and topojson’s `feature` conversion, with all styling defined in external CSS.

Cchaimmaeee

77% match

Loading thumbnail…

Untitled

This example displays a map of Canada loaded from a GeoJSON file and rendered as SVG paths using D3 v7. When the mouse moves over a province, the code positions an HTML tooltip div through its style attributes. The tooltip reveals the province name, sourced from the GeoJSON properties. The D3 geoPath and geoAlbers APIs handle the map projection and path generation, while province colors change via CSS :hover rules.

LLokeshBachu5

77% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a map visualization using D3.js, rendering geographical features as green shapes with black strokes on a blue background. It showcases a basic choropleth-style map by loading GeoJSON data from an external URL and projecting it using the `geoAlbers` projection. The code employs `d3.json` to fetch the data and `d3.geoPath` with the projection to generate SVG paths for each feature, while `topojson.feature` converts the data into GeoJSON format. The visualization is rendered entirely as SVG within an HTML page, making it a simple, self-contained map example.

Cchaimmaeee

76% match