Skip to content

Instantly share code, notes, and snippets.

@hyonschu
Created April 26, 2016 03:49
Show Gist options
  • Save hyonschu/cb0d0583257cc25121e7e6e170e964d5 to your computer and use it in GitHub Desktop.
Save hyonschu/cb0d0583257cc25121e7e6e170e964d5 to your computer and use it in GitHub Desktop.
Tufte Minimal Line Plot
<!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://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<style>
.axis path, .yaxis path { fill: none; shape-rendering: auto; }
.axis text, .yaxis text, .notes{ font-family: "Times"; font-size: 12px; color: black;}
</style>
</head>
<body>
<script>
//data
var x = _.range(1967,1978);
var y = [287, 314, 371,386,386,394,388,380,390,400,390];
// var y = []
min = 287;
max = 400;
//
// for (i=0; i<x.length; i++) {
// y.push(Math.random()*7)
// }
// y = y.sort(d3.ascending)
//
// normalizing it between actual values (~287 - 400), not sure why y-values are so small...
// create new JSON file {year: x, values: y}
var dataset = [];
for (var i=0; i<x.length; i++) {
var obj = {'year': x[i], 'values': y[i]};
dataset.push(obj)
}
// layout variables
var pad = 50;
var ww = 640;
var hh = 400;
// CREATE SVG CANVAS
var canvas = d3.select('body')
.append('svg').attr({'height': hh,'width': ww })
// CREATE SCALES TO AUTO ADJUST USING D3.SCALE
var xscale = d3.scale.linear()
.range([pad,ww-pad]).domain([d3.min(x), d3.max(x)])
var yscale = d3.scale.linear()
.range([hh-pad,pad]).domain([min,max])
// DECLARE AXES
var xAx = d3.svg.axis()
.scale(xscale).orient('bottom')
.ticks(x.length).tickFormat(d3.format('d'))
var yAx = d3.svg.axis()
.scale(yscale).ticks(5)
.tickFormat(function(d) { return "$"+d ; }).orient('left')
// drawing the output
var lineFunc = d3.svg.line()
.x(function(d) {return xscale(d.year);})
.y(function(d) {return yscale(d.values);})
canvas.append('svg:path')
.attr('d', lineFunc(dataset))
.attr('stroke', 'black')
.attr('stroke-width', 0.8)
.attr('fill', 'none');
canvas.selectAll('circles')
.data(dataset).enter().append('circle')
.attr({
'cx': function(d){ return xscale(d.year); },
'cy': function(d){ return yscale(d.values); },
'r': 5,
'stroke-width': 5,
'stroke': 'white'
});
canvas.append("line")
.attr({'class': 'mean-line','x1': pad,'x2': ww-(pad/2),
'y1': yscale(max*0.95),'y2': yscale(max*0.95)})
.attr({'stroke': 'black',
'stroke-width': 0.5,
'stroke-dasharray': '5,5'})
canvas.append("line")
.attr({'class': 'mean-line','x1': pad,'x2': ww-(pad/2),
'y1': yscale(max),'y2': yscale(max)})
.attr({'stroke': 'black',
'stroke-width': 0.5,
'stroke-dasharray': '5,5'})
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (hh - 40) + ")").call(xAx)
canvas.append("g")
.attr("class", "yaxis")
.attr("transform", "translate(" + 40 + ",0)").call(yAx)
canvas.append('line')
.data(dataset)
.attr({'class': 'mean-line',
'x1': function(d) { return xscale(d.year) },
'x2': function(d) { return xscale(d.year)},
'y1': d3.max(y)-8 ,'y2': d3.max(y)-18})
.attr({
'stroke': 'black',
'stroke-width': 1,
})
</script>
<div class='notes'>Per capita budget expenditures in constant dollars</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment