Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Mar 16, 2022

Created on Mar 16, 2022

This example displays a choropleth map of France, rendered as a single grey SVG path on a Mercator projection. It demonstrates a minimal D3 v7 setup, loading GeoJSON data from an external ArcGIS Open Data endpoint and filtering the features to keep only the country of France. The visualization uses `d3.json` for data loading, `d3.geoMercator` for projection, and `d3.geoPath` to draw the geographic outline. The design is intentionally sparse, focusing on the foundational workflow of importing data and creating a basic map.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays a map of France, rendered in yellow on a pink background using a Mercator projection centered on the country. The visualization loads GeoJSON data from an external URL, filters the dataset to select only the feature named "France", and draws it as an SVG path using `d3.geoPath` with a `d3.geoMercator` projection. The code relies on D3 v4's `d3.json` method to fetch the geographic data and applies a custom scale and translation to position the map within the 540x400 pixel canvas.

SSNarasimhar

82% match

Loading thumbnail…

Fork of ICE - 8 Making Maps (Country Map) Maanas Katta

This example displays a single country, France, rendered as a light green SVG path against a blue background, isolated from the rest of the world. It loads world country boundaries from the World Atlas TopoJSON dataset and uses `d3.geoMercator()` with a scale of 780 to project the geographic coordinates. The code filters the fetched features to select only France, then applies `d3.geoPath` with the Mercator projection to generate the path data, appending it to the SVG canvas.

SSNarasimhar

81% match

Loading thumbnail…

France Map

This example displays a choropleth map of French departments, using a Mercator projection to render each region as a colored SVG path with its name label positioned at the centroid. The visualization loads GeoJSON TopoJSON data from a remote URL, processing it with `feature` from topojson, and generates the paths and labels using `d3.geoPath` and `d3.geoMercator`. Fill colors come from `scaleOrdinal` with `schemeCategory10`, while the map’s layout is adjusted via projection translation and scale parameters in d3 v5 within a React framework.

Kkakumanusreya

81% match

Loading thumbnail…

Fork of Fork of D3 Starter

This example displays a world map colored by per-country values from a small CSV dataset, using a blue sequential color scale to encode the data. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and renders them as SVG paths with a Mercator projection (d3.geoMercator). The visualization relies on d3.json for fetching, topojson.feature for conversion, and d3.geoPath to generate the map shapes.

Rrevanthdasari10@gmail.com

80% match

Loading thumbnail…

Fork of D3 Starter

This example displays the outline of Greece as a gray, black-stroked SVG path centered on a blank page. It fetches a remote GeoJSON file containing Greek boundaries, filters the data to the single feature named “Greece,” and projects it using a Mercator projection (`d3.geoMercator`) with a scale of 3000. The path is drawn with `d3.geoPath`, and the code uses `d3.fetch` to load the data and D3 v7 to append the SVG element.

YYiorgos Bagakis

80% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal geographic visualization using D3 v7, rendering a red point at coordinates [0,0] on a Mercator-projected map. It creates an SVG canvas, applies `d3.geoMercator` for projection and `d3.geoPath` to generate the path data for the point. The circle is drawn as a single SVG path with a red fill and black stroke. The code highlights the basic setup for projecting geographic coordinates into SVG paths using the D3 library.

NNigel

79% match

Loading thumbnail…

Gist cf47ed32426b88863d607d9d0dccb77d

This example shows a single outlined region of France rendered as a black-and-white map using the D3.js library. It uses the `d3.geo.path()` API with a conic conformal projection to transform GeoJSON polygon coordinates into SVG paths. The visualization loads its geographic data from a local `regions_geo.json` file and draws the shape on a fixed-size SVG canvas.

MMarineRu

78% match

Loading thumbnail…

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

This map renders world countries as light blue SVG paths on a white background, with thin black strokes, using the Mercator projection. The code builds the visualization with D3 v5’s `geoPath` and `geoMercator`, converting TopoJSON features from the world-atlas dataset via the `topojson` library’s `feature` function. Country shapes are drawn by appending SVG path elements bound to the projected geometry.

LLes Lim

78% match