Skip to main content
100%

geojson csv join

✓ Published0🌍 Public
Aangelferro
Last edited Jun 10, 2017
Created on Jun 10, 2017

A world map renders country outlines as SVG paths, with each country’s name appearing on mouseover via a reporter function. The visualization joins country IDs from a GeoJSON file with names from a CSV, using nested `forEach` loops to match identifiers. The map uses a D3 v3 Mercator projection with automatic scaling and translation based on the data’s bounding box. The code loads `countries.geo.json` and `idCountry.csv`, then displays stroke-only paths, leaving country fills empty.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

World Map Visualization

A world map visualization colors each country according to a numeric value from an external CSV dataset. The example uses D3 v6 with a Mercator projection via `d3.geoMercator` and `d3.geoPath` to render GeoJSON country boundaries as SVG paths. Country fill colors are determined by a sequential blue color scale, while missing data appears gray. The code demonstrates loading remote TopoJSON and CSV files with `d3.json` and `d3.csv`, and includes an ES6 module import for a simple message.

UUVarshaReddy
79% match
Loading thumbnail…

Let's make a map

This example shows a world map rendered as SVG paths, with each country outlined using a Mercator projection. The code loads a GeoJSON-like dataset from the world-atlas package and uses the `topojson` library's `feature` function to extract country features. It then applies `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data for each country, appending them to the SVG canvas.

JJanet Chen
78% match
Loading thumbnail…

HTML Starter

This example shows a world map rendered with D3’s Mercator projection, displaying country boundaries as SVG paths. The code loads GeoJSON country features from the world-atlas TopoJSON file via `topojson.feature`, then appends each country as a `<path>` using `d3.geoPath`. The accompanying `data.csv` includes population figures, but the current script does not encode population visually—only the geographic outlines appear. The map is drawn inside a fixed 960×600 SVG, with CSS styling for tick lines, though no axes or scales are currently applied to the map itself.

NNebotXavi
77% match
Loading thumbnail…

Map.js!

This map visualization displays the world’s countries by using a Mercator projection to render geographic features as filled SVG paths on a light gray sphere background. The code loads country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with `topojson.feature`, then draws each country using `d3.geoPath`. Styling applies a blue fill with dark strokes and a subtle opacity, while the hidden overflow and full-bleed body create an immersive, full-window presentation.

Aargonaeut
77% match
Loading thumbnail…

let's make a world map

This interactive map renders world countries as SVG paths using a Mercator projection. The visualization loads country boundaries from a world-atlas GeoJSON/TopoJSON dataset and draws them server-side with D3’s `geoPath` and `geoMercator`. The code employs `topojson.feature` to convert topological data into geometric features, then appends each path to the SVG canvas.

KKRITIKA RAI DWIVEDI
76% match
Loading thumbnail…

Let's make a Map with simplified code!

This example shows a world map rendered as SVG paths, with countries filled in light green and the ocean sphere in blue. The code uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to convert geographic data into SVG path strings, while TopoJSON's `feature` method transforms the TopoJSON world-atlas dataset into GeoJSON features for rendering. A data join appends one path per country, and the map is loaded asynchronously via `d3.json` from a remote unpkg URL.

CChristine Lanser
76% match
Loading thumbnail…

Let's make a map!

This interactive map displays world countries as green SVG paths on a blue sphere, with hover tooltips revealing country names. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to render geographic features from TopoJSON world-atlas data, while country names are joined via TSV data using ISO numeric codes. Users can pan and zoom the map through D3’s `zoom` behavior, which applies a transform to the map group. The code loads both TopoJSON and TSV files asynchronously with `Promise.all`.

Ccathykan
76% match
Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map from TopoJSON data loaded from the World Atlas package, using D3’s `geoMercator` projection and `geoPath` to draw each country as an SVG path. The map features green-filled countries with black strokes, and the code demonstrates the basic data join pattern with `selectAll` and `enter().append()`.

TTheRedUnicorn
76% match