fresh block

100%

✓ Published0🌍 Public

Last edited Mar 22, 2017

Created on Mar 22, 2017

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.

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

79% match

Loading thumbnail…

fresh block

A world map of countries is rendered as SVG paths using D3's `d3.geo.equirectangular` projection and `d3.geo.path` tool, colored light gray except for those with authority data, which are filled with a lighter orange. Clicking a country zooms in via a D3 transition on the `g` group, and a text zone updates with the country's name, linking to its grid authority URL if available. The interaction relies on `d3.behavior.zoom` to handle pan and zoom, with the map data sourced from an external `grid_countries.txt` file containing GeoJSON.

RRCura

75% match

Loading thumbnail…

mapa proyectos 7

This interactive map visualization displays two geographic points as dots on a Mapbox GL map, centered on a specified location in Mexico. Users can draw a circular selection region directly on the map using a custom `circleSelector` component, which uses D3's projection and inverse projection functions to translate between screen coordinates and longitude/latitude. The dots' colors change from teal to pink when they fall within the selection circle, providing immediate visual feedback based on the user's spatial query. The map uses Mapbox GL and D3.js, and renders data from a simple CSV file containing latitude and longitude coordinates.

MMarcosHiramRojasSosa

75% match

Loading thumbnail…

fresh block

This example presents an interactive map of the United States that layers OpenStreetMap raster tiles over a vector outline of the country. Users can pan and zoom, which triggers the loading of new map tiles and the redrawing of the state boundaries. The visualization is built with D3 v4, using its geographic projection and path modules alongside the d3-tile and d3-zoom libraries. The vector data originates from a local US GeoJSON file, while the background imagery is fetched from the OpenStreetMap tile server.

AAnaMal08

74% match

Loading thumbnail…

fresh block

This visualization displays five data points as circles positioned along a chart area. The circles are colored either purple or green depending on whether their value exceeds 100, with each point’s x and y coordinates equal to its data value. Built using d3.v4, the code appends an SVG canvas to the page and populates it with circles via the `.data().enter().append()` pattern. The fill color is determined by a conditional function, and the circle radius and positions are set using SVG attributes. The data is a hardcoded array in the script.

LLisaPicado

74% match

Loading thumbnail…

fresh block

A map visualizes multiple voyages as colored, animated routes across a Mercator projection, with each year's set of journeys shown as dimmed paths and red markers moving along them, while green and red text labels sort voyages by year and individual trip. Clicking a year toggles its paths' opacity, and clicking a voyage label triggers a transition on the corresponding path marker. The visualization uses D3 v4's `d3.geoMercator`, `d3.geoPath`, `d3.line` with `d3.curveCatmullRom`, `d3.nest`, `d3.queue`, and `d3.csv`, reading voyage data from `multipleVoyages4.csv` to render SVG paths, circles, and text with fading encodings.

SSallyFl

74% match

Loading thumbnail…

fresh block

A rectangular block changes color from red to blue with a bounce easing over three seconds. Data loaded from a CSV file via `d3.csv` is bound to an SVG selection, though only circle elements are appended, each positioned horizontally based on its index using `attr` with a `cx` function. The visualization uses D3.js version 3.5.5 and renders entirely through SVG elements, including a transition applied to the rectangle's fill style. The animation is triggered on page load.

TTheLady

73% match

Loading thumbnail…

fresh block

This visualization displays three red circles on a blank canvas. It uses the D3.js v4 library to select the body element, append an SVG container, and bind an array of three numeric values as the primary dataset. The circles are then rendered using the `.data().enter().append()` pipeline, with the numeric values directly mapped to both the x and y coordinates using the `.attr("cx")` and `.attr("cy")` methods. The radius is fixed at 5 pixels, and all circles are filled with the color red.

KKerchoo

73% match