Tell us what works and what could be better. We read every submission.
@aleishanelson·7 public vizzes
A spinning orthographic globe displays a world map and a red point at [0°, 52°] while a graticule of latitude and longitude lines rotates with it. The projection uses `d3.geo.orthographic` with a 90° clip angle, and `d3.geo.path` renders the GeoJSON world data and graticule. A `d3.timer` continuously updates the rotation, and the red marker stays fixed relative to the globe’s surface. The map data comes from an external GeoJSON file, and the visualization uses D3 v3 with SVG.
This example demonstrates how to load and display GeoJSON polygon data on an interactive Mapbox-gl map. It fetches UK county boundaries from an external URL using d3.json, then adds them as a fill layer with a teal color and dark outline. The map initializes with Mapbox’s streets style, centered on the UK, and the code uses the Mapbox-gl API’s `addSource` and `addLayer` methods to render the spatial data. D3 v3 handles the data request, while Mapbox-gl manages the map rendering and interaction.
This example displays a world map using Leaflet, with country boundaries rendered as interactive vector layers. It initializes a Leaflet map centered on the equator and adds an OpenStreetMap tile layer as the base. The code then loads GeoJSON data containing 50-meter-resolution country outlines from a hosted GitHub source and uses Leaflet’s `L.geoJson` API to draw them onto the map. D3.js handles the asynchronous JSON fetching, while Leaflet manages the map display and interaction.
This example uses Leaflet with D3 to render an interactive world map from GeoJSON country boundaries. The map displays population estimates using a threshold color scale, ranging from light yellow to dark green. Mouseover highlights country borders, while clicking zooms to fit the selected country’s bounds. The map uses OpenStreetMap tile layers and loads data from a remote GeoJSON file containing administrative country polygons.
This choropleth map shows population density for each county in Kentucky using a ColorBrewer sequential color scale. The visualization uses a threshold scale to map population per square mile into five color classes, with a legend key displayed in the upper-left corner. County boundaries are rendered as white lines, and the state border is drawn in dark gray. Hovering over a county reveals a tooltip with its name and density. The map is projected using Kentucky’s State Plane coordinate system, with data from the U.S. Atlas project. The choropleth uses per-county population and area attributes from a TopoJSON file to compute density, and a ColorBrewer color scheme encodes the values. The visualization was forked from Mike Bostock's block and uses D3 v3 with SVG rendering.
This example shows a world map rendered with Leaflet, displaying country boundaries from a GeoJSON file of Natural Earth data. The map uses OpenStreetMap tiles as the base layer. The code loads the GeoJSON with d3.json and applies basic styling—white fill with partial opacity and thin borders—to each country polygon via Leaflet’s `L.geoJson` style option. The visualization demonstrates a minimal setup for combining D3 data loading with Leaflet’s interactive mapping capabilities.
A blank world map uses Leaflet to display OpenStreetMap tiles, with the view centered at coordinates [30, 0] at zoom level 2. The page loads Leaflet’s CSS and JavaScript from a CDN alongside D3, and initializes the map in a full-height div. This example serves as a minimal starter for spatial data visualization, showing how to set up a basic interactive tile layer without additional data or custom rendering.