Skip to main content
100%

Wars II

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

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.

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>

forked from <a href='http://bl.ocks.org/Yonet/'>Yonet</a>'s block: <a href='http://bl.ocks.org/Yonet/63bc13eec44dd1ca63e4fb5227341a52'>Wars II</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Wars II

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.

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
76% 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
70% 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
69% 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
68% 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
68% match
Loading thumbnail…

Untitled

A stacked bar chart displays monthly mortality counts from the Crimean War, broken down by cause—disease, wounds, and other—using a dataset from a TSV file. The chart uses an ordinal x-axis with rounded bands and a linear y-axis, with layers computed via `d3.layout.stack`. SVG rectangles represent each cause per month, colored by a category scale. Formatting relies on `d3.time.format` for date parsing and axis tick labels, with axes generated through `d3.svg.axis`.

KKrishu
67% match
Loading thumbnail…

CSCE 5320 Assignment 6

This scatterplot shows World War II tank production, comparing tank weight against the number of units produced, with color encoding the country served. The visualization includes a delayed tooltip that displays tank details, with a caption indicating the two-second delay period. Built with D3 v7, the code loads CSV data from a GitHub gist, and uses d3.scaleLinear for quantitative axes, d3.scaleOrdinal with the Tableau10 scheme for categorical coloring, and d3.extent for domain calculations. The SVG chart renders points without brushing, linking, or animation.

Aaaronwilhelm15@gmail.com
66% match