Skip to content

Instantly share code, notes, and snippets.

@diannepeng

diannepeng/index.html

Last active June 7, 2019 19:14
Show Gist options
  • Save diannepeng/7e404a8bffd613757ec835139406daf5 to your computer and use it in GitHub Desktop.
Save diannepeng/7e404a8bffd613757ec835139406daf5 to your computer and use it in GitHub Desktop.
Download ZIP
Start Dates of Triumphators per 25 Years
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.bar rect {
shape-rendering: crispEdges;
}
.bar text {
fill: #999999;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set the base bar color
var color = "purple";
// A comma-separated list of the years, using negative numbers for BCE
var years = [-272, -277, -290, -273, -283, -282, -278, -280, -281, -280, -275, -266, -266, -270, -264, -268, -268, -267, -267, -266, -266, -233, -209, -264, -263, -263, -259, -253, -260, -258, -257, -258, -257, -256, -254, -254, -253, -252, -250, -241, -241, -241, -241, -235, -235, -234, -233, -223, -228, -222, -211, -211, -225, -223, -222, -219, -219, -207, -206, -201, -194, -207, -200, -196, -194, -189, -200, -197, -190, -195, -197, -175, -191, -196, -195, -187, -191, -187, -188, -177, -189, -181, -167, -180, -175, -166, -189, -178, -175, -182, -185, -180, -184, -184, -180, -179, -178, -175, -174, -166, -155, -172, -167, -158, -155, -167, -143, -146, -142, -143, -154, -151, -152, -145, -146, -132, -129, -142, -138, -133, -135, -133, -132, -120, -132, -126, -123, -122, -107, -120, -122, -121, -115, -117, -110, -117, -104, -102, -101, -111, -106, -106, -111, -100, -101, -81, -104, -99, -89, -100, -93, -93, -98, -88, -74, -81, -80, -74, -73, -72, -71, -63, -81, -46, -46, -46, -46, -45, -44, -69, -81, -80, -71 ,-61, -77, -71, -71, -70, -62, -63, -51, -42, -54, -36, -47, -43, -54, -53, -45, -45, -40, -34, -43, -43, -41, -33, -39, -40, -36, -38, -39, -34, -33, -38, -34, -34, -33, -231];
// A formatter for counts.
var formatCount = d3.format(",.0f");
// Sets the margins
var margin = {top: 40, right: 30, bottom: 60, left: 30},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// Round the minimum year down to the nearest 50 and the maximum year up to the nearest 50
var max = Math.ceil(d3.max(years) / 50) * 50;
var min = Math.floor(d3.min(years) / 50) * 50;
var x = d3.scale.linear()
.domain([min, max])
.range([0, width]);
// Generate a histogram using bins of length 25 years.
var data = d3.layout.histogram()
.bins(d3.range(min, max, 25))
(years);
// Set the bar coloring
var yMax = d3.max(data, function(d){return d.length});
var yMin = d3.min(data, function(d){return d.length});
var colorScale = d3.scale.linear()
.domain([yMin, yMax])
.range([d3.rgb(color).brighter(), d3.rgb(color).darker()]);
var y = d3.scale.linear()
.domain([0, yMax])
.range([height, 0]);
// Ensure the axis uses 50 year increments
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues(d3.range(min, max, 50));
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 + ")");
var bar = svg.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
bar.append("rect")
.attr("x", 1)
.attr("width", (x(data[0].dx) - x(0)) - 1)
.attr("height", function(d) { return height - y(d.y); })
.attr("fill", function(d) { return colorScale(d.y) });
bar.append("text")
.attr("dy", ".75em")
.attr("y", -12)
.attr("x", (x(data[0].dx) - x(0)) / 2)
.attr("text-anchor", "middle")
.text(function(d) { return formatCount(d.y); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Graph title
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.text("Start Dates of Triumphators per 25 Years");
// Axis label
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", height + 50)
.text("Year");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment