Gist 5b0638a47ca0bbd7ef9b61d76f7ab613

100%

Gist 5b0638a47ca0bbd7ef9b61d76f7ab613

✓ Published0🌍 Public

Last edited Feb 25, 2022

Created on Feb 25, 2022

This example visualizes the Russia-Ukraine Monitor Map, a crowdsourced dataset of geolocated military activity points compiled by the Centre for Information Resilience. It plots thousands of incidents as colored markers on a map, with green indicating movement, blue satellite imagery, yellow other footage, and orange bombing or shelling. The code loads GeoJSON data via a `curl` script from the Maphub API, then uses D3’s `d3.geoPath` and geographic projections to render the map and points. Marker colors and sizes derive from each feature’s properties, and the visualization supports hover interactions to reveal detailed entry descriptions.

AI-generated description

Data from the Russia-Ukraine Monitor Map by Cen4infoRes.

This dataset is curated by the CENTRE FOR INFORMATION RESILIENCE.

See also their tweet about it: https://twitter.com/Cen4infoRes/status/1497154218121125890

It was not clear how to access the data, so I investigated how the map was loading the data and put together a script scrape.sh that fetches the data from that endpoint and outputs it to data.json.

Last updated 2/25/2022.

Similar vizzes

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

71% match

Loading thumbnail…

Gist 34bad0b124f4effdf99d5555cb3222d8

This example shows how spatial relationships between geographic features can be explored through an interactive map. It uses D3.js with `d3.geoPath` to render country outlines from a GeoJSON source, while a force-directed layout via `d3.forceSimulation` positions non-overlapping markers for data points. The visualization computes marker placement on a Canvas, reading pixel colors with `getImageData` to detect land versus water and ensure points remain on landmasses. Hover interactions trigger a tooltip and highlight neighboring regions, with smooth transitions handled by `transition.attrTween`. The data originates from a public GitHub gist and is embedded in a Power BI report, where the canvas is updated on each zoom or pan event.

HHugoberry

70% match

Loading thumbnail…

Russia

This visualization shows a choropleth-style map of Russia, with each of its federal subjects (oblasts, krais, and republics) filled in a sequential color scale ranging from light to dark blue. The map uses D3.js (v3) with SVG rendering to draw the geographic boundaries from a TopoJSON file. Users can hover over individual regions to highlight them and view tooltip details, likely the region name, making it an interactive reference for exploring Russia's administrative divisions. The title and axes, if any, are minimal, focusing attention on the geographic shape and the color-encoded data. The visualization is built with D3.js version 3 and follows an MIT license.# Russia This visualization displays a choropleth-style map of Russia using an SVG-based D3.js render. Built with D3 v3, the visualization highlights the country's administrative subdivisions using a subtle color scale, with each region rendered as an interactive SVG path. The map emphasizes the geographic boundaries and spatial relationships between Russia's federal subjects. **Technical details:** The visualization uses TopoJSON data to render the map, employing a standard geographic projection. The layout is clean and minimal, focusing on the country's outline and internal boundaries. No explicit data values are encoded in the visible marks—the visualization appears to focus on geographic shape rather than quantitative comparison. It is part of a series of blocks exploring country-level maps, forked from earlier examples featuring Brazil and Russia. The visualization is built with D3.js v3, uses SVG rendering, and is available under the MIT license. The author is EvertLagerberg, and the block was created using Blockbuilder.org. The code is forked from a series of related blocks, showing an iterative development of the geographic visualization approach.# Russia A minimalist SVG map of Russia rendered with D3.js, demonstrating geographic data visualization through a clean, monochromatic design. The visualization presents the country's outline using a simplified TopoJSON format, highlighting the geographic boundaries in a straightforward, unadorned manner suitable for reference or presentation contexts. Built with D3 v3 and SVG rendering, this example follows a line of geographic visualizations for different countries, with Russia being the final iteration in a series that includes Brazil. The visualization focuses on clarity and simplicity, making it a useful template for country-level mapping projects. Available under the MIT license.

EEvertLagerberg

69% 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…

Gist bb974dcf54acc39a81cb60d79bf0aa5c

This example plots earthquake epicenters as points on a map using GeoJSON features. It renders the geographic coordinates with `d3.geoPath` and a map projection, while each point is positioned via `d3.forceSimulation` to avoid overlapping labels. The visualization shows five recent seismic events, with the primary ID as magnitude and the secondary ID as a location description. The code uses D3’s force-directed layout to spread the point markers, and the map background likely comes from a geographic shapefile or topojson layer, making the data immediately readable by region.

JJn1532

68% match

Loading thumbnail…

Gist b51ddf3567e82869a364

This example visualizes a wildfire incident as a point location with a detailed perimeter polygon, both overlaid on a base map. The code renders the GeoJSON data using D3’s `geoPath` for the polygon and a simple circle for the point, with the map projection defined by `d3.geoMercator`. The visualization emphasizes the incident’s area and position, while the accompanying properties panel displays attributes like alert level and fire type. The source is a GeoJSON file from a gist by DylanFM, and the rendering relies on D3’s SVG path generation rather than canvas.

DDylanFM

68% match

Loading thumbnail…

Gist 10676346

This map displays labeled points from a GeoJSON file, plotting locations like "Internet Archive," "China," and "New York" at their geographic coordinates. The visualization likely renders a large-scale point cloud, with overlapping labels suggesting a messy or aggregated dataset. Using a mapping library, likely D3.js with `d3.geoPath` for drawing map features and standard SVG or Canvas techniques for placing text labels, the code creates a simple geographical scatter plot. The rendering emphasizes the spatial distribution of these named places across the globe.

CCliffordAnderson

68% 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

68% match