Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aabender14
Last edited Jan 1, 2018
Created on Jan 1, 2018

A map of Boston displays hundreds of small dots that animate from a radius of 1 to 6 pixels over one second. The dots represent points from a CSV file loaded with D3. The visualization uses Mapbox GL JS for the base map and D3 to project geographic coordinates into screen positions. As the user pans or zooms the map, the dots reposition themselves in real time, with each dot styled in teal with a darker stroke. The animation runs on page load, and the map has scroll zoom disabled.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A map of London shows a cluster of dots animating from radius one to radius six, each positioned by latitude and longitude from a CSV file. The visualization uses Leaflet with a Mapbox tile layer, and D3.js to render SVG circles that are projected to pixel coordinates and repositioned as the map pans or zooms, overlaid on the map’s overlay pane.

CChmits
85% match
Loading thumbnail…

fresh block

Three points from a CSV file are plotted as glowing cyan dots on an interactive Mapbox map centered on a location in Mexico. The visualization uses Mapbox GL to render the base map and D3.js to overlay an SVG layer, projecting geographic coordinates to screen positions. Each dot animates from a small radius to a larger one using D3 transitions. The dots re-project whenever the map is panned or zoomed, ensuring they remain anchored to their geographic locations.

MMarcosHiramRojasSosa
80% match
Loading thumbnail…

fresh block

This example shows a simple line chart with circular dots plotted against a linear scale, where both axes use a value range of 0 to 1. The visualization begins with a static rendering, but the dots respond to mouseover and mouseout events, changing color to red and scaling up briefly before returning to black. The code uses D3 v4 with `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to generate the chart, while SVG circle elements handle the interactive hover behavior via `transition().duration(500)`. Data is randomly generated with `d3.randomUniform`, and the chart fills the browser window.

663anp3ca
77% match
Loading thumbnail…

fresh block

A scatterplot maps a small array of numbers to points where each value is paired with its square. The visualization shows a diagonal cluster of chartreuse squares rising toward the upper right, alongside a static yellow circle and a text label reading "Hello everyone!" in monospace. The code uses d3.v4 to bind data to SVG rectangles, setting their x and y positions from the mapped data points, while a console log prints the first transformed pair. The SVG canvas is 960 by 500 pixels, with the circle defined directly in the markup.

VVickyLouise
76% match
Loading thumbnail…

fresh block

This example displays a world map with graticules and a red dot for each data point, which animates by drawing blue lines between consecutive projected coordinates in a looping sequence. A dropdown menu allows switching between Natural Earth and Aitoff projections, triggering a smooth transition via `attrTween`. The visualization uses D3 v4 with `d3.geoPath`, `d3.geoGraticule`, and TopoJSON, rendering geographic data as SVG with animated transitions.

Aanojoual
76% match
Loading thumbnail…

fresh block

A small D3.js visualization renders six data points as red rectangles on an 800-by-400 SVG canvas. The rectangles’ x and y positions are calculated by multiplying each point’s first coordinate by its index, while the height uses the second coordinate times the index; all rectangles share a fixed width of 50. The code uses D3’s data join pattern, appending `rect` elements via `enter()` and setting attributes with anonymous functions. The data is a hardcoded array of coordinate pairs, and the rendering relies on SVG within an HTML page.

Aamrikd
76% match
Loading thumbnail…

fresh block

This interactive map displays Mapbox street tiles across a full-screen view, with zoom and pan controls that update the visible tile set. Built with D3 v3, it uses the custom `d3.geo.tile` plugin to calculate which tiles are needed for the current zoom level and viewport, then positions them as absolutely placed `<img>` elements. The zoom behavior updates the projection and tile layer via a CSS `matrix3d` transform, while a coordinate readout shows the latitude and longitude under the cursor.

Aabdul-alim
75% match
Loading thumbnail…

fresh block

A rotating world map displays continents in a continuous spin. Using D3.js v4, the visualization loads GeoJSON country boundaries and applies an orthographic projection. The code sets up an SVG canvas and employs `d3.geoOrthographic` and `d3.geoPath` to render the geographic shapes. A timer-driven animation updates the projection's rotation along the X-axis, causing the globe to turn smoothly. The map's data originates from a remote GeoJSON source provided in the code, and the frame is rendered dynamically as an SVG path that updates each tick.

NNafisehmousavian
75% match