Skip to content

Instantly share code, notes, and snippets.

@wfalkwallace

wfalkwallace/ Coffee D3 Example

Last active August 29, 2015 14:07
Show Gist options
  • Save wfalkwallace/287aa1ff08afb2bb57a9 to your computer and use it in GitHub Desktop.
Save wfalkwallace/287aa1ff08afb2bb57a9 to your computer and use it in GitHub Desktop.
Download ZIP
Coffee
Raw
README.md

My coffee intake over the last month and a half.

Raw
coffee.json
[
{ "date": "2014-09-11", "change": 3 },
{ "date": "2014-09-12", "change": 2 },
{ "date": "2014-09-13", "change": 3 },
{ "date": "2014-09-14", "change": 1 },
{ "date": "2014-09-15", "change": 1 },
{ "date": "2014-09-16", "change": 3 },
{ "date": "2014-09-17", "change": 2 },
{ "date": "2014-09-18", "change": 2 },
{ "date": "2014-09-19", "change": 3 },
{ "date": "2014-09-20", "change": 1 },
{ "date": "2014-09-21", "change": 4 },
{ "date": "2014-09-22", "change": 4 },
{ "date": "2014-09-23", "change": 2 },
{ "date": "2014-09-24", "change": 2 },
{ "date": "2014-09-25", "change": 2 },
{ "date": "2014-09-26", "change": 3 },
{ "date": "2014-09-27", "change": 2 },
{ "date": "2014-09-28", "change": 2 },
{ "date": "2014-09-29", "change": 3 },
{ "date": "2014-09-30", "change": 2 },
{ "date": "2014-10-01", "change": 4 },
{ "date": "2014-10-02", "change": 3 },
{ "date": "2014-10-03", "change": 1 },
{ "date": "2014-10-04", "change": 1 },
{ "date": "2014-10-05", "change": 2 },
{ "date": "2014-10-06", "change": 3 },
{ "date": "2014-10-07", "change": 3 },
{ "date": "2014-10-08", "change": 2 },
{ "date": "2014-10-09", "change": 2 },
{ "date": "2014-10-10", "change": 2 },
{ "date": "2014-10-13", "change": 3 },
{ "date": "2014-10-14", "change": 4 },
{ "date": "2014-10-15", "change": 2 },
{ "date": "2014-10-16", "change": 3 },
{ "date": "2014-10-17", "change": 2 },
{ "date": "2014-10-18", "change": 2 },
{ "date": "2014-10-19", "change": 3 }
]
Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<head>
<style>
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
padding:100px;
}
.x-axis text {
transform: rotate(0.1875turn) translateY(20px);
font-size: .75em;
}
.axis line,
.axis path {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
</style>
<script src='http://d3js.org/d3.v3.min.js'></script>
</head>
<body>
<script>
var data;
d3.json('coffee.json', function(error, json) {
data = json;
});
// overall size
var width = 1000,
height = 500,
padding = 30;
// x-y scales
var xScale = d3.time.scale()
.domain([
new Date(Date.parse(d3.min(data, function(d) { return d.date; }))),
new Date(Date.parse(d3.max(data, function(d) { return d.date; })))
])
.range([
0 + 2 * padding,
width - 2 * padding
]);
var yScale = d3.scale.linear()
.domain([
0,
d3.max(data, function(d) { return d.cups; })
])
.range([
height - 2 * padding,
0 + padding
]);
//x-y axes
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(data.length / 4);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left')
.ticks(
data.reduce(function(prev, cur) {
return(prev.indexOf(cur.cups) >= 0 || prev.push(cur.cups)) && prev;
}, []).length
);
// setup
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
// .append('g')
// .attr('class', 'chart');
svg.append('g')
.attr('class', 'axis x-axis')
.attr("transform", "translate(" + padding + "," + (height - padding) + ")")
.call(xAxis);
svg.append('g')
.attr('class', 'axis y-axis')
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
var points = svg.selectAll('circle')
.data(data);
var newPoints = points.enter();
newPoints.append('circle')
.attr('cx', function(d, i) {
return xScale(new Date(Date.parse(d.date)));
})
.attr('cy', function(d, i) {
return yScale(d.cups);
})
.attr('r', 5);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment