Skip to main content
100%

Wars II

✓ Published0🌍 Public
YYonet
Last edited Sep 18, 2016
Created on Sep 18, 2016

This visualization displays wars from 1823 to 2003 as diagonal paths on a timeline, with each path’s start and end points mapped from the data's dates and duration. A circle at each path’s end encodes battle deaths through both area (using a square-root scale) and color (using a quantile scale). The chart uses D3’s `d3.time.scale`, `d3.scale.sqrt`, and `d3.svg.diagonal` to compute positions and draw the curves, while axes are rendered with `d3.svg.axis`. Data comes from the Correlates of War (COW) dataset, and the SVG output is inspired by Valentina D’Efilippo’s work.

AI-generated description

Wars dataset from COW. Each path represents a war and associated circles represent the number of victims. Inspired from Valentina D'Efilippo's work

forked from <a href='http://bl.ocks.org/bricedev/'>bricedev</a>'s block: <a href='http://bl.ocks.org/bricedev/6aee19737bf0ad910b04'>Wars II</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Wars II

A static SVG visualization plots historical wars from 1823 to 2003 as diagonal curves, with each war's start and end dates mapped to a time axis and the curve's height reflecting its duration. Circle size and color, using a quantile scale, encode the number of battle deaths, while a square-root scale handles the wide range of casualties. The code uses `d3.svg.axis`, `d3.svg.diagonal`, `d3.scale.sqrt`, `d3.time.scale`, and `d3.scale.quantile` to build the chart, reading the war dataset from a local CSV file sourced from the Correlates of War project. The visualization is inspired by Valentina D'Efilippo's work.

YYonet
94% match
Loading thumbnail…

War Length vs Deaths Scatterplot

This scatterplot visualizes the relationship between war duration in years and the number of battle deaths, excluding WWI and WWII to avoid scale distortion. Each circle represents a conflict, with hover tooltips revealing the war’s name, duration, and death toll. Built with D3.js, it uses `scaleLinear` for axes, `csv` for data loading from Curran’s Repository, and SVG rendering. The chart includes labeled axes, a title, and custom tooltip styling via CSS.

MMatthew Bruffey
77% match
Loading thumbnail…

Categorized Timeline Using Dates

This example uses the d3.layout.timeline plugin to render a categorized timeline of wars involving the United States during its first 100 years, based on data from Wikipedia. Each war is represented as a colored bar positioned along a date axis, with events grouped into five distinct swimlanes: Colonial, European, Internal, Latin America, and Native. The visualization encodes category membership through both lane placement and an ordinal color scale. War data is loaded from a CSV file, and the timeline layout automatically assigns each event to a lane, avoiding overlaps while respecting the fixed date extent from July 4, 1776, to December 31, 1876.

ZZhengYingqian
72% match
Loading thumbnail…

Categorized Timeline Using Dates

This visualization displays a categorized timeline of wars involving the United States during its first 100 years, using data from Wikipedia. Events are grouped into five distinct lanes—colonial, native, internal, European, and Latin American conflicts—each rendered as horizontal bars within its own row. The example uses the d3.timeline layout from the d3.layout.timeline plugin, with D3 v4’s scaleOrdinal for color mapping and d3.csv to load the data. Rectangles are positioned and sized based on the timeline’s computed start and end coordinates, with each category separated vertically.

TThanaporn-sk
72% match
Loading thumbnail…

Categorized Timeline Using Dates

This example shows US military conflicts from 1776 to 1876, divided into separate horizontal lanes by category: colonial, Native, European, Latin American, and internal wars. Each event is drawn as a rectangle positioned along a shared date scale, with overlapping events automatically stacked within each lane. The visualization uses the d3.layout.timeline plugin to compute lane assignments and band positions, while d3.scale.ordinal maps conflict categories to a fixed color palette. Data comes from a CSV file listing each war’s start and end dates and its sphere of influence.

BBBischof
71% match
Loading thumbnail…

Untitled

This example displays a stacked area chart of monthly casualties in the Crimean War, broken down by cause (wounds, other, and disease) using the d3.layout.stack() API and SVG rectangles. The chart uses a category10 color scale and ordinal x-axis with a custom time format. Data is loaded from a TSV file and parsed via d3.time.format, while the axes are generated using d3.svg.axis(). The visualization highlights the dramatic spike in disease-related deaths during the winter of 1854–55.

OOsekovS
68% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Escalation to War: A Timeline of Key Events (1953 - 2025)

This circular timeline visualization maps political and military events in the Middle East from 1953 to 2025 onto a ring, with event nodes positioned by date using `d3.scaleTime` and color-coded by category. The view opens with static SVG rendering of the timeline axis, year markers, and event circles, and users can click events to view details or filter by category. Built with D3.js v7, the visualization uses an interactive SVG layout where events are drawn as circles around a circular axis, with tooltips and a details panel that populates on selection.

NNita
67% match
Loading thumbnail…

Tufte's : The map of soldier data visualization in war - Napoleon's Russian campaign

This interactive D3.js v7 visualization recreates Minard’s 1869 flow map of Napoleon’s 1812 Russian campaign, showing the army’s shrinking size through tan (advance) and black (retreat) bands whose width encodes troop numbers. It plots city markers with dates, river crossings, and a temperature chart, displaying tooltips on mouseover. The code uses `d3.csvParse` to load troop, city, and temperature data, then renders the map with SVG paths via `d3.area` and `d3.curveLinear`, while implementing custom mouseover handlers for the annotations.

NNita
66% match