Skip to content

Instantly share code, notes, and snippets.

@mikehadlow

mikehadlow/README.md

Last active August 29, 2015 14:02
Show Gist options
  • Save mikehadlow/f7849b1bbbe40d099a6e to your computer and use it in GitHub Desktop.
Save mikehadlow/f7849b1bbbe40d099a6e to your computer and use it in GitHub Desktop.
Download ZIP
Predict Your Awesomeness
Raw
README.md

The results of playing with building graphs using D3js. This doesn't really predict your awesomeness over the next 100 days, it's entirely random, so if you don't like the results, just hit refresh to see if you get a better prediction :)

Raw
index.html
<!DOCTYPE html>
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>SVG Test</title>
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
.circle {
fill: white;
stroke: steelblue;
stroke-width: 2px;
}
.area {
fill: steelblue;
stroke: none;
opacity: 0.1;
}
.zeroline {
fill: none;
stroke: red;
stroke-width: 0.5px;
stroke-dasharray: 5 5;
}
.zerolinetext {
fill: red;
}
</style>
</head>
<body>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// generate some awesomeness data
var data = [];
var currentValue = 100;
var random = d3.random.normal(0, 20.0);
for(var i=0; i<100; i++) {
var currentDate = new Date();
currentDate.setDate(currentDate.getDate() + i);
data.push([currentDate, currentValue]);
currentValue = currentValue + random();
}
// create the graph
var containerHeight = 400, containerWidth = 800;
var svg = d3.select("body").append("svg")
.attr("width", containerWidth)
.attr("height", containerHeight);
var margin = { top: 50, left: 50, right: 50, bottom: 50 };
var height = containerHeight - margin.top - margin.bottom;
var width = containerWidth - margin.left - margin.right;
var parseDate = d3.time.format("%Y-%m-%d").parse;
var xDomain = d3.extent(data, function(d) { return d[0]; })
var yDomain = d3.extent(data, function(d) { return d[1]; });
var xScale = d3.time.scale().range([0, width]).domain(xDomain);
var yScale = d3.scale.linear().range([height, 0]).domain(yDomain);
var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
var yAxis = d3.svg.axis().scale(yScale).orient('left');
var line = d3.svg.line()
.x(function(d) { return xScale(d[0]); })
.y(function(d) { return yScale(d[1]); });
var area = d3.svg.area()
.x(function(d) { return xScale(d[0]); })
.y0(function(d) { return yScale(d[1]); })
.y1(height);
var g = svg.append('g').attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
g.append('path')
.datum(data)
.attr('class', 'area')
.attr('d', area);
g.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0, ' + height + ')')
.call(xAxis);
g.append('g')
.attr('class', 'y axis')
.call(yAxis)
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '.71em')
.attr('text-anchor', 'end')
.text('Awesomeness');
g.append('path')
.datum(data)
.attr('class', 'line')
.attr('d', line);
g.selectAll('circle').data(data).enter().append('circle')
.attr('cx', function(d) { return xScale(d[0]); })
.attr('cy', function(d) { return yScale(d[1]); })
.attr('r', 5)
.attr('class', 'circle');
if(yDomain[0] < 0) {
g.append('line')
.attr('x1', xScale(xDomain[0]))
.attr('y1', yScale(0))
.attr('x2', xScale(xDomain[1]))
.attr('y2', yScale(0))
.attr('class', 'zeroline');
g.append('text')
.attr('x', xScale(xDomain[1]))
.attr('y', yScale(0))
.attr('dy', '1em')
.attr('text-anchor', 'end')
.text('OMG Negative Awesomeness')
.attr('class', 'zerolinetext');
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment