Skip to main content
SimilarExport ZIP
100%

Cross Country Trip

✓ Published0🌍 Public
CCurran Kelleher
Last edited Mar 9, 2019
Created on Jun 23, 2016

This layered map visualizes global population density using NASA's "Earth at Night" imagery, overlaid with world country and US state borders and Stamen Toner label tiles. The visualization supports panning and zooming, and an animation automatically moves the view westward. Implemented with D3 v4, it uses `d3.tile`, `d3.geoMercator`, `d3.geoPath`, `d3.zoom`, and `d3.timer` to manage tiled raster layers, vector paths, and continuous motion, with a click toggling the animation.

AI-generated description

Ever since I found out about Nasa's "Earth at Night" imagery, I wanted to make a map that puts the splotches of light into context. With this layered visualization, you can clearly see which splotches of light correspond to which cities, and into which states or countries they fall.

Click to start and stop the motion.

You can explore the whole world by panning and zooming.

This visualization uses d3-tile to show 4 layers:

Derived from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/5914438'>Raster & Vector III</a>.

<!-- Start of SimpleHitCounter Code --> <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=2130839&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->
gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

World Tour

This visualization presents an animated tour of countries on a globe using an orthographic projection. Each country's name is displayed before the globe rotates to center on that nation, with land, country borders, and the selected country drawn in separate colors onto a Canvas. The code loads world geometries from a TopoJSON file and country names from a TSV file, then uses D3's `d3.geo.path`, `d3.geo.centroid`, and `d3.interpolate` within a `d3.transition` queue to animate the rotation and redraw each frame.

DDangTHS
74% match
Loading thumbnail…

World Map

This interactive visualization displays global population data for 2018 on a natural Earth projection world map. It uses D3 v5’s `geoPath` and `geoNaturalEarth1` to render country boundaries from a TopoJSON world atlas, with hovering highlighting each nation. A color legend and a square-root size legend encode population values via `scaleOrdinal` and `scaleSqrt`, while a `zoom` handler enables panning and zooming. Data comes from a CSV merged with the atlas, and animated transitions update the legends.

Jjitendrashahiitb
73% match
Loading thumbnail…

World Tour

This visualization presents an animated orthographic globe that cycles through the world’s countries, highlighting each one in red while rotating to center it on screen. The display shows the country name above the globe as it transitions between nations. The code uses D3.js v3 for transitions and tweens, TopoJSON for world map data, and a Canvas 2D context for rendering. A queue loads GeoJSON topology and country name mappings, while d3.geo.path draws land, borders, and the globe sphere with dynamic rotation.

AAjar06
73% 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
73% match
Loading thumbnail…

地图的交互

This visualization displays a world map rendered with D3 v5 using the geoMercator projection and topojson data from the world-atlas package. Country boundaries are drawn as SVG paths, colored green with a red hover effect, and each country includes a title tooltip showing its name from the accompanying TSV file. The map supports interactive zooming and panning through d3.zoom, which applies a transform to the grouped SVG elements. Population data from a local CSV is loaded but not yet visualized, leaving the focus on the geographic interaction.

HHillKinsh
73% match
Loading thumbnail…

Untitled

A world map displays cities with populations exceeding 50,000 as semi-transparent teal circles scaled by population size. The visualization uses d3.geoNaturalEarth1 for projection and d3.geoPath to render landmasses, country interiors, and graticules from World Atlas TopoJSON data. City coordinates and populations are loaded via d3.csv, with circles positioned using the projection and sized through a linear scale. The SVG is built in React, with static styling applying a light fill to land and subtle borders.

VVineel Gannu
73% match
Loading thumbnail…

D3 map

This example visualizes a world map with data-driven location points, plotting over a thousand geographic coordinates as animated circles on a natural Earth projection. It uses D3 v5 with `d3.geoNaturalEarth1`, `d3.geoPath`, and TopoJSON’s `feature` to render country boundaries from the World Atlas dataset, while querying a SPARQL endpoint from the Dutch Digital Heritage Network for latitude and longitude data. Each circle appears sequentially with a bounce ease transition, growing from zero to a fixed radius to show the distribution of the dataset across continents.

RRoyCsuka
72% match
Loading thumbnail…

Map

This map visualizes global population data from a CSV file (accessed via `d3.csv`), with each country’s population represented by a semi-transparent circle overlaid on a geographic projection. The circles’ areas are scaled using `d3.scaleSqrt`, and the map is rendered with `d3.geoPath` and `d3.geoNaturalEarth1` on an SVG. Users can pan and zoom via `d3.zoom`, and hovering over a country reveals a tooltip with its regional name and population. A size legend, built with custom `sizeLegend.js`, and a color legend (`colorLegend.js`) accompany the visualization. Interactive encoding uses the `join` pattern to update SVG elements.

TTajallah-maryam
72% match