Skip to content

Instantly share code, notes, and snippets.

@mgold

mgold/.block

Last active May 26, 2018 20:53
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 mgold/dd15825bb2aba04357cb to your computer and use it in GitHub Desktop.
Save mgold/dd15825bb2aba04357cb to your computer and use it in GitHub Desktop.
Download ZIP
65 Years
Raw
.block
license: mit
Raw
README.md

This is a recreation of xkcd 893, updated with the lunar astronauts who died after it was made in 2011.

The axes are done with d3.sketchy but it's really the wrong look for emulating the comic.

Built with blockbuilder.org

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdn.rawgit.com/sebastian-meier/d3.sketchy/1.0/d3.sketchy.js"></script>
<style>
@font-face {
font-family: "xkcd";
src: url('https://cdn.rawgit.com/shreyankg/xkcd-desktop/4032030683d16c6d14ae57ad6d813b45a6c69df8/Humor-Sans.ttf');
}
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;font-family: "xkcd", sans-serif; }
svg { width:100%; height: 100% }
text.label {
text-anchor: end;
font-size: 12px;
}
.axis line, .axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
path.data {
fill: none;
stroke: #000;
}
path.estimated {
fill: #939393
}
line.annotation {
fill: none;
stroke: black;
}
</style>
</head>
<body>
<script>
var margin = {top: 20, right: 20, bottom: 20, left: 20},
padding = {top: 60, right: 60, bottom: 60, left: 60},
outerWidth = 960,
outerHeight = 500,
innerWidth = outerWidth - margin.left - margin.right,
innerHeight = outerHeight - margin.top - margin.bottom,
width = innerWidth - padding.left - padding.right,
height = innerHeight - padding.top - padding.bottom;
var x = d3.time.scale()
.domain([new Date("1960"), new Date("2040")])
.range([0, width])
var y = d3.scale.linear()
.domain([0, 15])
.range([height, 0])
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickValues(d3.range(1960, 2050, 10).map(function(y){ return new Date(""+y) }))
.tickFormat(function(d){ return d.getYear() + 1901});
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickValues([5, 10, 15]);
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var g = svg.append("g")
.attr("transform", "translate(" + padding.left + "," + padding.top + ")");
var sketchy = d3sketchy();
g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.select("path").remove();
sketchy.drawLine({
svg: g,
x1: 0, x2: width, y1: height, y2: height,
sketch: {x: 12, y: 5}
})
g.append("g")
.attr("class", "y axis")
.call(yAxis)
.select("path").remove();
sketchy.drawLine({
svg: g,
x1: 0, x2: 0, y1: 0, y2: height,
sketch: {x: 5, y: 12}
})
var data = [
{date: new Date("July 19 1969"), people: 0},
{event: "Apollo 11", date: new Date("July 20 1969"), people: 2},
{event: "Apollo 12", date: new Date("November 19 1969"), people: 4},
{event: "Apollo 14", date: new Date("Feb 5 1971"), people: 6},
{event: "Apollo 15", date: new Date("July 30 1971"), people: 8},
{event: "Apollo 16", date: new Date("April 21 1972"), people: 10},
{event: "Apollo 17", date: new Date("Dec 11 1972"), people: 12},
{event: "James Irwin", date: new Date("Aug 8 1991"), people: 11},
{event: "Alan Shepard", date: new Date("July 21 1998"), people: 10},
{event: "Pete Conrad", date: new Date("July 8 1999"), people: 9},
{event: "Neil Armstrong", date: new Date("Aug 25 2012"), people: 8},
{event: "Edgar Mitchell", date: new Date("Feb 4 2016"), people: 7},
{event: "Eugene Cernan", date: new Date("Jan 16 2017"), people: 6},
{event: "John Young", date: new Date("Jan 5 2018"), people: 5},
{event: "Alan Bean", date: new Date("May 26 2018"), people: 4}
]
var line = d3.svg.line()
.x(function(d){ return x(d.date)})
.y(function(d){ return y(d.people)})
.interpolate("step-after")
g.append("path")
.attr("class", "data")
.attr("d", line(data))
g.selectAll("text.label")
.data(data)
.enter()
.append("text")
.attr("class", "label")
.text(function(d){ return d.event; })
.attr("dx", function(d){ return x(d.date) - 4})
.attr("dy", function(d){ return y(d.people) - 1})
g.append("text")
.text("Number of living humans who have walked on another world")
.style("text-anchor", "middle")
.attr("transform", "translate("+width/2+","+(height+40)+")")
var estimated5 = new Date("2023");
var estimated95 = new Date("2035");
g.append("path")
.attr("class", "estimated")
.datum([
data[data.length - 1],
{ date: estimated5, people: 0},
{ date: estimated95, people: 0},
])
.attr("d", line.interpolate("linear"))
var firstX = x(data[0].date);
var lastX = x(estimated95);
g.append("line")
.attr({
x1: firstX,
y1: y(14),
x2: lastX,
y2: y(14),
class: "annotation"
})
g.append("line")
.attr({
x1: firstX,
y1: y(15),
x2: firstX,
y2: y(13),
class: "annotation"
})
g.append("line")
.attr({
x1: lastX,
y1: y(15),
x2: lastX,
y2: y(13),
class: "annotation"
})
g.append("rect")
.attr({
x: firstX + (lastX - firstX)/2 - 50,
width: 100,
y: y(15),
height: y(0) - y(2)
})
.style("fill", "white")
g.append("text")
.text("65 Years")
.attr("dy", y(13.8))
.attr("dx", firstX + (lastX - firstX)/2)
.attr("text-anchor", "middle")
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment