Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Dec 10, 2022

Created on Dec 9, 2022

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of table

This example demonstrates a minimal D3 v7 starter template that renders a GeoJSON LineString feature onto an SVG map using `d3.geoPath` with a `d3.geoIdentity` projection. The code manually defines a `FeatureCollection` containing a single path with three coordinate pairs, then appends SVG path elements bound to the feature data via `selectAll().data().enter()`. The map displays the path as a black stroke on a transparent background, but the projection is not calibrated to real geographic coordinates, so the line appears as an abstract diagonal segments rather than a geographically accurate route. The HTML page shows the word "D3 Starter" in large text above the empty SVG container.

Fferneyhoughedward@gmail.com

81% match

Loading thumbnail…

Fork of D3 Starter

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.

Aagreenyy

80% match

Loading thumbnail…

Map of Greece

This example displays a map of Greece rendered as a gold SVG path on a blue background, with regions highlighted in salmon on hover. It uses D3 v4’s `d3.geoMercator()` projection and `d3.geoPath()` to draw the country from a GeoJSON file loaded via `d3.json()` from a GitHub-hosted world dataset, filtering features to Greece by name. The script initializes the SVG with a fixed width and height, applies a scale and translation to center the map, and uses CSS to style the path fill and hover effects.

YYiorgos Bagakis

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

78% match

Loading thumbnail…

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

This example renders a world map using D3.js and TopoJSON, projecting country boundaries with an orthographic projection via `d3.geoOrthographic` and drawing them as SVG paths with `d3.geoPath`. The code loads GeoJSON data from the world-atlas dataset using `d3.json`, then binds the country features to path elements. The map is displayed on a light gray background, with countries filled in black and strokes in light gray, creating a simple, high-contrast visualization of global landmasses.

Aannadehtiarova

77% match

Loading thumbnail…

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

This example demonstrates how to load and render world country boundaries as SVG paths. It fetches GeoJSON data from the world-atlas TopoJSON dataset via `d3.json` and converts it using `topojson.feature`. The visualization applies `d3.geoMercator` and `d3.geoPath` to project the geographic coordinates into a 960 by 500 pixel SVG canvas, though the rendering function is only partially implemented, leaving the map unpublished until the path data is appended. The code imports `select`, `json`, `geoPath`, and `geoMercator` from D3 v5.

HHassan Abdullah

77% match

Loading thumbnail…

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

This example displays a natural Earth projection of the world, with countries filled in light green against a blue ocean sphere. It loads GeoJSON country boundaries from the World Atlas TopoJSON file and renders them as SVG paths using `d3.geoPath` with the `geoNaturalEarth1` projection. The code uses `d3.json` to fetch the data and `feature` from TopoJSON to convert it to GeoJSON. A single SVG element holds both the sphere backdrop and the country outlines, which have a subtle black stroke.

Yyycgrace

76% match

Loading thumbnail…

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

This example displays a world map using D3.js, with each country rendered as a light green SVG path with subtle black strokes. The visualization fetches geographic data from the world-atlas TopoJSON file and converts it into GeoJSON features using the `feature` function from TopoJSON. The map uses the `geoNaturalEarth1` projection and draws paths with `geoPath`. The code loads a video tutorial in the README, and the map itself appears on a plain white background with no additional interaction.

SSun-XH

76% match