d3.carto - Basic d3.carto Map

100%

d3.carto - Basic d3.carto Map

✓ Published0🌍 Public

Last edited Oct 15, 2018

Created on Oct 15, 2018

This map uses the d3.carto.map plugin to render a single GeoJSON layer of world country boundaries, styled with a blue fill and black strokes. The page loads the map into a full-screen div, applies zoom/pan controls via the plugin's built-in interface, and enables clickable features for interactivity. Data comes from a local world.geojson file, with countries drawn as SVG polygons; the accompanying CSS defines the visual styling for map elements, controls, and modal dialogs.

AI-generated description

A simple map example created with d3.carto.map that loads a single geoJSON layer.

forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/b60d4c31f5802a120456'>Simple Map - d3.carto</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Map with D3.js

This map displays the countries of the world in light green with black outlines, colored red on hover. The map supports zooming and panning through D3’s zoom module and geoMercator projection. It renders country shapes as SVG paths generated with d3.geoPath, using world-atlas data from TopoJSON and TSV files for country names. The code employs d3.select, d3.json, d3.tsv, and the topojson feature function to construct the visualization.

Aanastasiiaplatovskikh

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

81% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js, displaying country boundaries as SVG paths colored light green, with a blue sphere background. The map supports zooming and panning through a d3.zoom behavior, and hovering over a country turns it red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for generating paths from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file and displayed as tooltips via SVG `<title>` elements.

Ggcappadaniel

81% match

Loading thumbnail…

d3 Visualization Map

This example displays a zoomable world map using a natural Earth projection, with countries colored light green and the ocean rendered as a blue sphere. Built with D3 v5 and TopoJSON, it loads country boundaries from the world-atlas dataset (50m.json) and names from 50m.tsv. The map supports interactive pan and zoom via d3.zoom, while d3.geoPath and geoNaturalEarth1 handle geographic rendering. Countries highlight red on hover, with tooltips showing country names. The visualization is rendered as SVG, with the sphere and country paths generated from the projected GeoJSON features.

JJohnPaulPagelerJr

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

81% match

Loading thumbnail…

Interactive map with D3.js

This interactive map visualizes world countries using a natural Earth projection, with hover highlighting and zoom-and-pan navigation. The D3.js code loads GeoJSON country boundaries from a TopoJSON dataset via `d3.json` and `topojson.feature`, then renders them as SVG paths with `d3.geoPath`. A blue sphere path represents the globe’s outline. The `d3.zoom` API enables user interaction by applying transform events to the SVG group, while CSS `:hover` styles change country fills to red.

MMartin Christensen

81% match

Loading thumbnail…

lets make a map!

This example displays an interactive world map with countries rendered in light green and hover effects that change their color to red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geographic features from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file. Pan and zoom functionality is implemented via d3.zoom, and the map is rendered as SVG with a light blue sphere background.

SShane Carey

80% match

Loading thumbnail…

Let's make a map with D3.js!

This example uses D3.js to render an interactive world map from TopoJSON and TSV data loaded from the world-atlas package. Countries are drawn as SVG paths using the d3.geoNaturalEarth1 projection and d3.geoPath, with hover effects changing their fill color. The visualization incorporates d3.zoom to enable pan and zoom transformations on the map group, while a sphere background is rendered from a GeoJSON Sphere object. Country names are joined to features via ISO numeric codes and displayed as SVG title tooltips.

AAaron Goebel

80% match