slav

100%

✓ Published0🌍 Public

Last edited Jul 7, 2014

Created on Jul 7, 2014

This example presents a chronological, map-based narrative of military events around Sloviansk, Ukraine, from July 1–5, 2014. It combines a static SVG map of Ukrainian regions with overlaid text annotations and photographs positioned along the page. The map is rendered from TopoJSON data using D3’s geographic projection and path generators. Scrolling and hovering trigger tooltips and animated transitions, while D3’s hexbin plugin and queue library are loaded but not visibly applied in the displayed code.

AI-generated description

Similar vizzes

Loading thumbnail…

slav

This visualization maps the territorial control of Ukrainian forces and separatists around Slavyansk in July 2014, using a chronological series of annotated narrative text blocks. It displays a static SVG map of Ukrainian oblasts, with the Donetsk region highlighted, overlaid with dated, descriptive event updates that incorporate images and tooltips. The application loads GeoJSON-like topology data to render maps via the `d3.geo` API, while text annotations are positioned absolutely within the HTML. Animation and interactivity are absent, instead relying on fixed spatial storytelling with the `d3` library and its `topojson` module for geographic projection.

MMraleksa

89% match

Loading thumbnail…

ATO

This map visualizes attacks on Ukrainian forces during a unilateral ceasefire from June 20–30, 2014, using a slider to animate events by day and location. A static SVG map of Ukrainian oblasts, rendered via `d3.geo.path()` with a Mercator projection, is layered with circles and text annotations; hovering over a point triggers a tooltip with attack details. The visualization uses `d3.csv()` to load the dataset and `d3.forceSimulation` for the interactive slider, with colors encoding the date range. The map is built using TopoJSON and SVG animation, while the background annotation provides narrative context.

MMraleksa

73% match

Loading thumbnail…

map_ATO3

This map visualizes the territorial situation in eastern Ukraine during the 2014 anti-terrorist operation (ATO), marking cities controlled by separatists, liberated towns, and recent attack locations. It also plots major regional cities and leader lines for reference. The visualization uses D3 v3 with a Mercator projection and `d3.geo.path` to render Ukraine’s oblast boundaries from a TopoJSON file, while custom SVG circles and labels represent place data. Hovering over map elements triggers a tooltip displaying the corresponding city or village name. The map also includes hexbin overlays and contextual annotations in Russian.

MMraleksa

69% match

Loading thumbnail…

возобновление ато

This visualization maps attacks on Ukrainian forces during the "ceasefire" period of June 20-30, 2014, using a Mercator projection of eastern Ukraine. Circles on the map encode the date, location, and casualties (killed, wounded) of each incident from the CSV dataset. A draggable timeline slider filters events by day, and hovering over a circle displays its attack description in a tooltip. The map is drawn with `d3.geo.path` from a TopoJSON file of Ukrainian oblasts, with animations and transitions handled by the D3 v3 library.

MMraleksa

68% match

Loading thumbnail…

Story Map D3JS

This example presents a scrollable story map that follows the historical travels of Bošković as a sequence of dated path segments across a geographic region. It shows the journey as a continuous line with distinct daily segments, highlighted by city markers along the route. The visualization is built using D3.js v5.15.0, utilizing the Mercator projection and topological data from JSON files. It renders the map as an SVG and incorporates scroll-driven animation to reveal the narrative of the journey as the user scrolls.

MMarin Govorcin

68% match

Loading thumbnail…

Ukraine Events

This visualization maps Ukraine conflict events on a dark, stylized basemap using OpenLayers with a Stamen toner-lite layer, inverted for a moody aesthetic. React manages the map lifecycle and data loading, fetching GeoJSON coordinates via D3's `json`. Each event is rendered as a glowing, soft-edged sprite on a Canvas, generated by a radial gradient in `generateSprite.js` with a Cubehelix color scale, creating a firefly-like cartographic effect. The map automatically removes layers on component unmount.

CCurran Kelleher

67% match

Loading thumbnail…

lets make a Map of Slovakia

This example displays a map of Slovakia using a dark blue spherical backdrop and light green country boundaries. It loads world TopoJSON data, converts it to GeoJSON, and renders the paths with an SVG projection. The code uses `d3.geoMercator`, `d3.geoPath`, and `topojson.feature` to position and draw the geometry. It also demonstrates asynchronous data loading via a Promise that simulates fetching car records, then formats and filters them into a text report shown on the page.

PPeter S

67% match

Loading thumbnail…

ATO2

This interactive map visualizes attacks on Ukrainian forces during a unilateral ceasefire from June 20-30, 2014, with each incident plotted as a circle on a Mercator projection of Ukraine. The map uses a draggable slider to filter events by day, while hovering over a circle reveals the attack description via an HTML tooltip. It renders with D3.v3, using `d3.geo.path` for the TopoJSON boundaries and `d3.csv` to load the incident data, which includes coordinates, casualties, and text descriptions. The color of each circle encodes the day of the attack, and circles are sized by the number of killed and wounded.

MMraleksa

67% match