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
Last active
May 26, 2018 20:53
-
-
Save mgold/dd15825bb2aba04357cb to your computer and use it in GitHub Desktop.
65 Years
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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