Skip to content

Instantly share code, notes, and snippets.

@bricedev

bricedev/README.md

Last active October 21, 2015 09:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bricedev/b57ae6760ecd89dcbf0b to your computer and use it in GitHub Desktop.
Save bricedev/b57ae6760ecd89dcbf0b to your computer and use it in GitHub Desktop.
Download ZIP
Wars
Raw
data.csv
name start end sphere
American Revolutionary War 4/19/1775 9/3/1783 European
Cherokee–American wars 01/01/1776 12/31/1795 Native
Northwest Indian War 01/01/1785 12/31/1795 Native
Whiskey Rebellion 01/01/1795 12/31/1795 Internal
Quasi-War 01/01/1798 12/31/1800 European
First Barbary War 5/10/1801 6/10/1805 Colonial
Tecumseh's War 01/01/1811 12/31/1811 Native
War of 1812 6/18/1812 2/18/1815 European
Red Stick War 01/01/1813 8/31/1814 Native
Second Barbary War 06/17/1815 06/19/1815 Colonial
First Seminole War 01/01/1817 12/31/1818 Native
Texas/Indian Wars 01/01/1820 12/31/1875 Native
Arikara War 01/01/1823 12/31/1823 Native
Aegean Sea Anti/Piracy Operations 01/01/1825 12/31/1828 Colonial
Winnebago War 01/01/1827 12/31/1827 Native
First Sumatran expedition 01/01/1832 12/31/1832 Colonial
Black Hawk War 01/01/1832 12/31/1832 Native
Second Seminole War 01/01/1835 12/31/1842 Native
Patriot War 01/01/1838 12/31/1838 European
United States Exploring Expedition 01/01/1838 12/31/1842 Colonial
Second Sumatran expedition 01/01/1838 12/31/1838 Colonial
Mexican–American War 01/01/1846 12/31/1848 Latin America
Cayuse War 01/01/1847 12/31/1855 Native
Taiping Rebellion 01/01/1850 12/31/1864 Colonial
Apache Wars 01/01/1851 12/31/1900 Native
Bombardment of Greytown 01/01/1854 12/31/1854 European
Puget Sound War 01/01/1855 12/31/1856 Native
First Fiji Expedition 01/01/1855 12/31/1855 Colonial
Rogue River Wars 01/01/1855 12/31/1856 Native
Third Seminole War 01/01/1855 12/31/1858 Native
Yakima War 01/01/1855 12/31/1858 Native
Filibuster War 01/01/1856 12/31/1857 Latin America
Second Opium War 01/01/1856 12/31/1859 Colonial
Utah War 01/01/1857 12/31/1858 Internal
Navajo Wars 01/01/1858 12/31/1866 Native
Second Fiji Expedition 01/01/1858 12/31/1858 Colonial
First and Second Cortina War 01/01/1859 12/31/1861 Latin America
Paiute War 01/01/1860 12/31/1860 Native
Reform War 01/01/1860 12/31/1860 Latin America
American Civil War 01/01/1861 12/31/1865 Internal
Bombardment of Qui Nhơn 01/01/1861 12/31/1861 Colonial
Yavapai Wars 01/01/1861 12/31/1875 Native
Dakota War of 1862 01/01/1862 12/31/1862 Native
Colorado War 01/01/1863 12/31/1865 Native
Shimonoseki War 01/01/1863 12/31/1864 Colonial
Snake War 01/01/1864 12/31/1868 Native
Powder River War 01/01/1865 12/31/1865 Native
Red Cloud's War 01/01/1866 12/31/1868 Native
Siege of Mexico City 01/01/1867 12/31/1867 Latin America
Formosa Expedition 01/01/1867 12/31/1867 Colonial
Comanche Campaign 01/01/1867 12/31/1875 Native
United States expedition to Korea 01/01/1871 12/31/1871 Colonial
Modoc War 01/01/1872 12/31/1873 Native
Red River War 01/01/1874 12/31/1875 Native
Las Cuevas War 01/01/1875 12/31/1875 Latin America
Great Sioux War of 1876 01/01/1876 12/31/1877 Native
Buffalo Hunters' War 01/01/1876 12/31/1877 Native
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.y.axis line {
stroke: #777;
stroke-dasharray: 2,2;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 20, left: 0},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d/%m/%Y").parse;
var x = d3.time.scale()
.range([0, width - 50]);
var y = d3.scale.sqrt()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(6, 0)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickSize(30, 0)
.orient("left");
var color = d3.scale.ordinal()
.range(["#bc80bd","#8dd3c7","#fdb462","#fb8072","#80b1d3"]);
var diag = d3.svg.diagonal()
.source(function(d) { return {x: x(d.start),y: y(0)}; })
.target(function(d) { return {x: x(d.end),y: y(d.duration)}; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.start = parseDate(d.start);
d.end = parseDate(d.end);
d.duration = (d.end - d.start)/(1000*24*60*60*31*12);
});
x.domain([d3.min(data, function(d) { return d.start; }),d3.max(data, function(d) { return d.end; })]).nice();
y.domain([0,d3.max(data, function(d) { return d.duration; })]);
var war = svg.selectAll(".war")
.data(data)
.enter().append("g")
.attr("class","war");
war.append("path")
.attr("class","curves")
.attr("d", diag)
.attr("fill","none")
.attr("stroke-width",2)
.attr("stroke",function(d) { return color(d.sphere); });
war.append("circle")
.attr("class","circle")
.attr("r", function(d) { return 5; })
.attr("cx",function(d) { return x(d.end)})
.attr("cy",function(d) { return y(d.duration)})
.attr("fill",function(d) { return color(d.sphere);})
.attr("stroke","white")
.attr("stroke-width",1.5);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ",0)")
.call(yAxis)
.append("text")
.attr("x", 0)
.attr("y", 10)
.attr("transform", "rotate(-90)")
.style("text-anchor", "end")
.style("font-weight","bold")
.text("Duration (years)");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment