D3 World Map

100%

✓ Published0🌍 Public

Last edited Dec 14, 2022

Created on Dec 14, 2022

Forked from States with Stamen employees

This example displays a U.S. map with state boundaries and labels, alongside a scatterplot of cities plotted by latitude and longitude, using a dark background. It loads geographic data from a JSON file and renders it with the D3 v3 library, using the AlbersUSA projection and `d3.geo.path` for SVG paths. The map also includes city points from a CSV file, and the code demonstrates basic chart setup with D3 selections and event handlers.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 World Map

This D3 world map visualizes university diversity across U.S. states, using a blue-white linear color scale mapped to each state’s diversity index. Hovering over a state with the mouse reveals a histogram image of that state’s diversity distribution. The visualization uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` for rendering state boundaries, and `d3.legendColor` for the color scale, with data from a static JSON file.

JJincheng Liu

82% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with countries filled in light green against a blue spherical background. It uses D3 v5 and TopoJSON to load world-atlas data and render the map as SVG paths. The code applies a US-centered Albers projection via `d3.geoAlbersUsa`, and draws the globe using `d3.geoPath` with a synthetic sphere feature.

IIlir Memedi

82% match

Loading thumbnail…

Let's make a US map with D3.js!

This example renders a map of the United States using state boundaries. The map is drawn as black paths with white strokes on an SVG canvas. The code loads GeoJSON state outlines from the `us-atlas` package, converts them into topological features with the `topojson` library, and projects them using `d3.geoAlbers` with `d3.geoPath` for rendering. The visualization demonstrates a basic choropleth-ready framework without additional data encoding.

Ddaigokawabe

82% match

Loading thumbnail…

Country Map with d3.js

This example displays a world map using D3.js, coloring individual countries based on sample population data. It shows a Mercator projection of the globe, with the United States and China shaded according to the provided values. The visualization constructs the map by appending SVG paths from GeoJSON data to the chart. It relies on D3 APIs including `d3.geoMercator`, `d3.geoPath`, `d3.json`, `d3.scaleLinear`, and `d3.extent` to handle the projection, rendering, and color encoding, with a domain from data values mapped to a light-to-dark color range.

UUVarshaReddy

80% match

Loading thumbnail…

USA in v3

This example displays a static map of the United States, using the AlbersUSA projection to render state boundaries as SVG paths. It shows the geographic shape of the country without additional data encoding. The visualization uses D3 v4’s `d3.json` to load GeoJSON state data, then `d3.geoPath` with a `d3.geoAlbersUsa` projection to generate the paths. The map is centered and scaled within an SVG canvas. The code relies solely on the loaded GeoJSON features and does not include interactivity or color encoding.

FFrieseWoudloper

80% match

Loading thumbnail…

Let's make a US map with D3.js!

This example demonstrates how to create a map of the United States using D3.js, rendering each state as a green SVG path with black strokes. The code loads county-level TopoJSON data from the us-atlas package, extracts state boundaries with topojson.feature, and projects them using the d3.geoAlbersUsa() projection. State paths are generated with d3.geoPath and appended to an SVG element, with styles defined in an accompanying CSS file. The example uses D3 v5 and relies on the geo-albers-usa-territories plugin for the projection.

NNita

80% match

Loading thumbnail…

D3 World Map III

This example displays an interactive world map with countries rendered in light green against a light blue ocean. Users can pan and zoom the map using mouse or touch gestures, with a hover effect that highlights countries in red and reveals their names as tooltips. The visualization uses d3-geo with the geoNaturalEarth1 projection and d3.geoPath to draw SVG paths, while d3.zoom handles the interactive transformations. Geographic data comes from the world-atlas TopoJSON dataset, with country names loaded from a corresponding TSV file.

YYoung Song

79% match

Loading thumbnail…

Let's make the US Map with D3.js!

This example displays a choropleth-style map of the United States with state boundaries rendered as SVG paths. It uses D3.js v5 to load US Atlas TopoJSON data, converts it to GeoJSON with the topojson library’s `feature` function, and projects it using `d3.geoAlbersUsa`. The `geoPath` generator draws each state as a separate path with a light green fill and subtle black strokes. A light blue sphere background is added first to contrast with the landmasses. The visualization intentionally omits labels or interactive features, focusing strictly on the geographic outlines.

Aacrasto-tibco

79% match