My Map!

100%

✓ Published0🌍 Public

Last edited Nov 24, 2020

Created on Nov 24, 2020

This interactive SVG world map visualizes country-level data from a CSV file, using a color scale from light blue to red to represent the "value" field for each country. Built with D3 v5 and the `d3.geo.orthographic` projection, it loads country geometries from a TopoJSON file and colors them via `d3.scale.linear`. Users can click on any country to explore its associated information, though the detailed interaction logic is not fully implemented in the provided code. The map renders geographic paths with `d3.geo.path` and includes a legend for the color scale.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

An interactive D3 map

This interactive D3 map displays a world map with countries colored pink and overlaid with green-bordered circles, visualizing numerical values from a CSV dataset via a color-coded choropleth. Built with React and D3 v5, it loads GeoJSON topology data from the world-atlas package and uses topojson’s feature and mesh functions to render land and country boundaries as SVG paths, while the data CSV is joined by ISO country codes for the visual encoding.

Nnouralkhoury

86% match

Loading thumbnail…

Map!!!!!!!!!!!!!

This world map visualization displays a color-coded choropleth of country scores using a sequential red-yellow scale, with hover highlighting and a legend showing the score range. Built with D3 v5, it uses `geoNaturalEarth1` projection with `geoPath` to render the map, and `topojson` to load world geometry. Country data comes from a CSV file matched by ISO codes, and the visualization supports zoom and pan via D3's `zoom` behavior.

Xxyang3672

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

85% match

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

84% match

Loading thumbnail…

Map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue ocean background. It uses D3.js version 5 to load geographic data from the World Atlas TopoJSON file and convert it to GeoJSON features. The map is drawn with the `d3.geoPath` and `d3.geoNaturalEarth1` projection, while `topojson.feature` extracts country boundaries from the dataset. The code appends paths for the sphere and each country, applying basic styling from an external CSS file.

Mma-jacobs

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

83% match

Loading thumbnail…

Let's make a map with D3.js!

This example uses D3.js to build an interactive orthographic map of the world, rendered as SVG paths. It loads GeoJSON country boundaries from a TopoJSON dataset via `topojson.feature`, then draws the globe with `d3.geoOrthographic` and `d3.geoPath`. Hovering highlights countries in red, while the `d3.zoom` behavior enables pan and zoom transformations on the entire map group.

Nnouralkhoury

83% match

Loading thumbnail…

Map Interaction Assignment Final

This interactive world map visualizes countries colored in light green against a blue sphere, with hover effects that turn countries yellow and reveal a tooltip containing the country name, continent, and economic status. Built with D3 v5 and the topojson library, it uses `d3.geoPath` with an equirectangular projection to render geographic features from the World Atlas 50m dataset, while supporting zoom and pan interactions through `d3.zoom`. Country metadata, including economy and continent classifications, is loaded from the accompanying TSV file and linked to the geometric data by ISO country codes.

MMukund Khandelwal

83% match