Tell us what works and what could be better. We read every submission.
@allardw·14 public vizzes
Aardbevingen in Groningen is an animated map of earthquake activity in the northern Netherlands, drawn from a gist by allardw and rendered as SVG. The visualization plots seismic events on a geographic map of the region, using colored markers to indicate magnitude (val categories eq1–eq3) and encoding depth through visual cues. Each earthquake appears at its recorded location with a timestamp, and the animation sequentially reveals events over time, letting viewers follow the progression of seismic activity in the province. The data includes details such as magnitude, depth, and location name, with the animation highlighting the temporal distribution of the earthquakes.
This visualization shows the first-egg laying dates of 44 songbird species in the Netherlands from 1986 to 2014, revealing a clear trend toward earlier breeding seasons. Each species is represented as a horizontal line, with year on one axis and day-of-year on the other; the animated SVG chart scrolls through the decades, and the data points drift downward as the years progress, illustrating the impact of warmer springs. The D3 v3 visualization uses circles connected by lines for each bird species, colored to differentiate them, with the overall downward slope highlighting the shift to earlier egg-laying dates. Hovering or inspecting individual species reveals its specific trend across the 29-year period.
This visualization shows the growth of wind energy capacity in megawatts (MW) across the twelve provinces of the Netherlands from 1990 to 2017, based on data from a gist by allardw. It uses D3 v4 to render an SVG chart where each province is represented by a separate time series line, with the x-axis showing the year and the y-axis showing installed capacity in MW. The data reveals significant growth over time, with Flevoland emerging as the leading province, reaching over 1,000 MW by 2016, while others like Groningen show steady but more moderate increases. The visualization likely includes hover interactions to highlight individual provinces and their trajectories, making it easy to compare regional wind energy development across the Netherlands.
The visualization shows the municipalities of the Netherlands as randomly distributed regions that drift apart and collide on a blank canvas. Each region is rendered as an SVG path using D3’s `d3.geo.path` with a Mercator projection, while a force layout (`d3.layout.force`) with negative gravity and collision detection moves the regions apart. The code also uses `d3.geom.quadtree` for efficient collision checks, and hover over the SVG reveals hidden circles. The geographic data is loaded from an external GeoJSON file.
This interactive map shows the number of commuters to Dutch municipalities in 2012. Clicking a municipality recolors all municipalities according to how many of their residents commute to the selected one, with darker reds indicating higher counts. The visualization uses D3 v3 with `d3.geo.path` and a Mercator projection to render the map from GeoJSON, while commuter data is loaded from a TSV file. Colors are assigned via a linear scale mapping value ranges to a sequential palette.
Commutes 2012 visualizes commuter flows between Dutch municipalities using a choropleth map. Clicking a municipality recolors all regions by the number of residents working there, with darker shades indicating higher counts. Animated arrows, rotated via `d3.transition` with an elastic ease, point from each municipality toward the selected destination, with arrow lengths scaled proportionally to commuter volume. Built with D3 v3, it uses `d3.geo.path`, `d3.geo.mercator`, and `d3.behavior.zoom`. Data comes from CBS Statline, rendered as SVG with interactive zoom and pan.
This interactive map shows the number of commuters to Dutch municipalities in 2012, based on CBS Statline data. Clicking a municipality switches its fill to a line texture and displays scaled, rotated arrows on other municipalities, oriented toward the selected location. The visualization uses D3 v3 with a Mercator projection, `d3.geo.path` for SVG rendering, and Textures.js for pattern fills. Arrow size encodes commuter volume, with pan and zoom via `d3.behavior.zoom`.
A click of the button triggers an animated update to a semicircular gauge. The gauge displays four colored arc segments, each representing a random value generated by `d3.randomUniform`, with a black needle pointing to a separate random value. The arcs are rendered using `d3.arc` and `d3.pie` with a start and end angle of -π/2 and π/2. Clicking the button transitions the arcs with a default easing and animates the needle using `transition.attrTween` and `d3.easeElasticOut`, giving it a bouncy motion.
This experiment renders an orthographic globe of the world on two canvas elements, creating a stereoscopic 3D effect for Google Cardboard. Using D3 v3 and TopoJSON, the visualization loads world land topology and draws the globe with a steelblue ocean and dark green landmasses. Two canvases render the same rotating globe from slightly offset angles, simulating left- and right-eye perspectives for use in a Cardboard viewer. The globe continuously spins on a timer, and the projection’s rotation is updated incrementally to create animation. The side-by-side canvases are intended to be viewed through a Google Cardboard headset for a 3D experience, though the code does not implement the barrel distortion or lens correction typically required for a true VR view.
A map of Europe rendered in the EEA’s ETRS 1989 LAEA projection, using D3 v4’s `d3.geoTransverseMercator` projection with a center at 10°E, 52°N and a rotation of -10° to align the central meridian. Country outlines are drawn as SVG paths via `d3.geoPath`, with data from a TopoJSON `world.json` file processed using `topojson.feature`. The map is styled with a steelblue fill and white stroke, and the projection is manually translated to fit the 500×500 canvas.
A Voronoi diagram partitions the view into 2,000 irregular polygons generated from random coordinates, with each cell filled using the `d3.interpolateRdYlBu` continuous color scale from `d3-scale-chromatic`. Hovering over a cell recalculates all fills based on the distance from the hovered point to every other polygon’s data point, reusing the same color interpolator. The visualization relies on `d3.voronoi` for the tessellation and renders paths as SVG, with the hover interaction driven by `mouseover` events.
This animation shows monthly mean temperatures in the Netherlands from 1906 to 2016 as a spiraling coffee cup. Each line segment represents a month, positioned radially around a center point. The distance from the center encodes temperature, with larger radii for warmer months, while the segment color follows a sequential orange heatmap scale indicating the year. As the animation progresses, segments draw outward from the cup's base, forming a spiral that visually compresses over a century of climate data into a single rotating shape. The visualization is inspired by Ed Hawkins' climate spiral and Mitchell Whitelaw's Measuring Cup, and the data comes from the KNMI weather service. A slider allows interactive exploration of the time range.
This visualization compares seven European cities across several quality-of-life indicators using a custom D3 path generator. Each city is represented as a unique polygon whose vertices are positioned according to indicator values, with color-coded paths for each metric. The data is loaded from a JSON file containing city-specific scores for indicators such as public transport, safety, and housing affordability. The custom path generator creates smooth, dynamic shapes that animate when rendered in SVG, allowing viewers to quickly compare the relative strengths and weaknesses of each city across the selected criteria.
A circular menu of three colored buttons—red, yellow, and green—surrounds a large grey circle. Hovering over the central circle animates the buttons outward along their radial positions, and clicking a button changes the central circle’s fill to that color. Built with D3 v3, the SVG elements use `selection.on` for mouse events, `transition.attr` for smooth movement, and a `data` join to bind the button labels. The buttons rotate and translate via `attr('transform')`, with a delayed transition on mouseout to retract them.