Skip to content

Instantly share code, notes, and snippets.

@pietvandongen

pietvandongen/.block

Last active July 4, 2017 10:48
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 pietvandongen/6bc05e59621e227a7c770a23c73ac226 to your computer and use it in GitHub Desktop.
Save pietvandongen/6bc05e59621e227a7c770a23c73ac226 to your computer and use it in GitHub Desktop.
Download ZIP
Countdown graph for aphextwin.warp.net
Raw
.block
license: apache-2.0
Raw
application.css
html,
body {
background: #000;
color: #fff;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#graph {
height: 100%;
width: 100%;
}
.line,
.domain,
line{
fill: none;
stroke: #fff;
stroke-width: 2px;
}
.domain,
line{
stroke-width: 1px;
}
.tick {
fill: #fff;
font-family: courier, monospace;
font-weight: normal;
stroke: #fff;
}
Raw
application.js
var startDate = new Date("Jun 1, 2017 00:00:00");
var countdownDate = new Date("Jul 6, 2017 17:00:00");
function a(date) {
return (countdownDate.getTime() - date.getTime()) / (1000 * 60 * 60 * 24);
}
function f(date) {
return (6 - a(date)) * 0.85;
}
function x(date) {
return -1 * Math.pow(Math.max(0, 2 * (-1.7 - a(date))), 2) / 200;
}
function getDistance(date) {
return a(date) + f(date) + x(date);
}
function getData() {
var data = [];
var currentDate = new Date(startDate.getTime());
var currentDistance = getDistance(currentDate);
while (currentDistance >= 0) {
data.push({
date: currentDate,
distance: currentDistance
});
currentDate = new Date(currentDate.getTime() + 1000000);
currentDistance = getDistance(currentDate);
}
return data;
}
var data = getData();
var graph = $("#graph");
var graphContainer = graph.get(0);
var margin = 40;
var height = graph.height() - 2 * margin;
var width = graph.width() - 2 * margin;
var xScale = d3.scaleTime()
.domain([startDate, data[data.length - 1].date])
.range([0, width]);
var yScale = d3.scaleLinear()
.domain([0, data[0].distance])
.range([height, 0]);
var valueLine = d3.line()
.x(function (d) {
return xScale(d.date)
})
.y(function (d) {
return yScale(d.distance)
});
var svg = d3.select(graphContainer)
.append("svg")
.attr("height", height + 2 * margin)
.attr("width", width + 2 * margin)
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
// Append path
svg
.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueLine);
// Append x axis
svg
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(xScale).tickFormat(d3.timeFormat("%a %e %b %Y")));
// Append y axis
svg
.append("g")
.call(d3.axisLeft(yScale));
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="application.css">
<title>Fiddle</title>
</head>
<body>
<div id="graph"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="application.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment