Sazerland

@Sazerland·5 public vizzes

Cities on the Globe

A rotatable and zoomable orthographic globe displays circles for cities with populations over 100,000, sized by population and colored semi-transparent blue. Dragging rotates the globe using D3’s drag and projection inversion; zooming scales the projection. Built with D3 v4, it uses `d3.geoOrthographic` and `d3.geoPath` to render country boundaries from TopoJSON world-atlas data, while city coordinates come from a preprocessed Geonames CSV. Population-based circle radii scale with zoom, and hover tooltips (via d3-tip) show each city’s name and formatted population.

Jun 9, 2018

Loading thumbnail…

SVG Globe with cities

An interactive SVG globe displays roughly 48,000 cities from the MaxMind WorldCities database, with each city shown as a red point. Users can pan and zoom the globe, which uses `d3.geoOrthographic` and `d3.geoPath` to render the sphere, graticule, and country borders. The implementation leverages `d3.zoom` for navigation, and dynamically redraws the paths on each zoom or drag event. The city data is loaded from a CSV and plotted as a single `MultiPoint` feature, with population values available but not visually encoded.

Jun 9, 2018

Loading thumbnail…

Canvas Globe with cities

This example visualizes the locations and populations of cities from the MaxMind WorldCities database (~48,000 points) on a rotatable and zoomable orthographic globe. It renders the graticule, landmasses, and city points using the Canvas API, with d3.geoOrthographic projection and d3.geoPath for geographic mapping. The visualization is interactive, supporting both pan and zoom gestures through d3.zoom, which updates the projection’s rotation and scale. The city data includes a subset of major world cities with their names, populations, and coordinates.

Jun 9, 2018

Loading thumbnail…

Canvas Globe with cities

This interactive visualization presents a world map showing the distribution of approximately 48,000 cities from the MaxMind WorldCities database. Using an orthographic projection rendered on a Canvas element, the map displays each city as a red point overlaid on a graticule and land polygons. The view supports pan and zoom interactions through the d3.zoom API, with the projection updating dynamically. The implementation leverages d3.geoOrthographic, d3.geoPath, and d3.geoGraticule within a Vue framework, with animation driven by requestAnimationFrame.

Jun 9, 2018

Loading thumbnail…

SVG intro

A scatterplot of global cities maps each location with a circle scaled by population, using longitude and latitude for positioning on an 800×400 SVG canvas. Built with Vue and D3.js, the visualization loads city data from a CSV file and applies a square-root scale so circle area corresponds to population size. The code uses `d3.scale.sqrt()` and `d3.extent()` to set scales, then renders semi-transparent white circles against a black background.

Jun 9, 2018