Fork of Attacks

Last edited Feb 9, 2026

Created on Jan 23, 2026

Forked from Attacks

A cluster of small grey circles represents over two thousand xenophobic attacks in Germany during 1992, while twenty larger red circles mark the locations of fatal incidents. This visualization uses a force-directed layout with `d3.forceSimulation` and `d3.forceCollide` to pack circles tightly inside an invisible boundary. The data comes from a CSV file and shows that fatality-free attacks vastly outnumber lethal ones, emphasizing the scale of the phenomenon.

AI-generated description

MIT Licensed

Similar vizzes

Attacks

This visualization maps 21 far-right extremist attacks in Germany in 1992, each represented by a red bubble, within a dense grey field of over 2,000 simulated smaller circles that convey the broader scale of incidents. The red bubbles are sized uniformly and positioned using a seeded random function, while a d3.forceSimulation with a forceCollide constraint packs all circles tightly into a circular boundary. The data comes from a CSV file listing attack names, locations, dates, and victim counts, rendered as a React component using d3.csv for loading and d3.select for SVG manipulation.

87% match

Fork of HAW: Bday Data viz

This interactive bubble chart visualizes the human toll of terrorist attacks, encoding each incident as a circle whose size and red color intensity correspond to the number of deaths. Built with React and D3 v7, the visualization uses `d3.forceSimulation` to position the bubbles in a force-directed layout, while custom hover interactions with `transition` and event listeners reveal detailed tooltips with the location, date, and death count. The are sized using a linear `radiusScale` and colored via a `colorScale`, both derived from the `attacksData` dataset.

76% match

Clustered Force Layout II

Ten clusters of colored circles drift and separate on a dark background, with each cluster gathering around its largest member while circles avoid overlapping. The visualization uses d3.layout.force with custom cluster and collide forces, leveraging d3.geom.quadtree for collision detection and d3.scale.category10 for colors. Data is procedurally generated in the browser, with 200 circles of varying radii across 10 groups, rendered as SVG elements.

Mmbostock

71% match

Fork of Umfrage

This example presents a survey-driven data visualization of terrorist attack death tolls in Europe from 2015 to 2020. After users submit their guesses via sliders, the results phase renders an animated SVG bubble chart where circle size and color encode death counts, plotted against year on the x-axis and deaths on the y-axis. The visualization uses React for state management, d3.v7's `scaleLinear`, `selection.join`, and `.transition().ease()` for animated updates, with data loaded from CSV. Interactive features include tooltips on hover and clickable bubbles.

70% match

Fork of packedlayout

Three groups of colored circles separate into loose clusters as a D3 force simulation runs. The visualization uses `d3.forceSimulation` with `forceX` pulling nodes toward three distinct horizontal centers, `forceManyBody` for repulsion, and `forceCollide` to prevent overlap. Each of the 100 randomly sized nodes is assigned one of three categories and rendered as an SVG circle whose fill color matches that category. The simulation updates positions on every tick, redrawing the circles via a data join in `index.js`.

DDeclan Naughton

Fork of Working with Time

This visualization plots reported migrant deaths and disappearances over time, with each circle representing an incident and its vertical position encoding the number of dead or missing. The scatterplot is built with React components rendering SVG, while D3 utilities handle data loading via `d3.csv`, scales via `scaleTime` and `scaleLinear`, and axis tick generation. Data comes from a Missing Migrants Project CSV file, with tooltips showing formatted dates.

Nnexus1058

CyberAttacks Final Draft v5

Two coordinated visualizations explore cyber attack data from 2014 to 2023. A multi-line chart displays attack counts per industry over time, with a clickable color legend; selecting an industry filters the adjacent scatter plot to show only that sector's attacks by year and attack type, colored by actor. The scatter plot supports d3.brush for highlighting points. The code uses d3.scaleOrdinal, d3.line, d3.axisLeft, and d3.axisBottom, rendering as SVG with data sourced from a local dataset.

Ccoreyfnolan@gmail.com

Clustered Force Layout 4.0

This example shows a force-directed layout with 200 circles organized into 10 distinct clusters, each rendered in a different color from the `d3.schemeCategory20` palette. The circles are separated into their groups by the `clustering` custom force, while the `collide` function, which uses a quadtree, prevents overlap both within and between clusters. The visualization is built with D3 v4, uses the `d3.forceSimulation` API for physics, and renders via SVG. The `ticked` callback updates each circle’s `cx` and `cy` attributes as the simulation runs.

AAjayyy