Skip to content

Instantly share code, notes, and snippets.

View dougdowson's full-sized avatar

Doug Dowson dougdowson

View GitHub Profile
@dougdowson
dougdowson / chart.js
Last active August 29, 2015 13:57
Reusable Line Chart
function timeSeriesChart() {
var margin = {top: 20, right: 20, bottom: 20, left: 35},
width = 760,
height = 420,
xValue = function(d) { return d[0]; },
yValue = function(d) { return d[1]; },
xScale = d3.time.scale(),
yScale = d3.scale.linear(),
xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(6, 0),
yAxis = d3.svg.axis().scale(yScale).orient("left").tickSize(-width - margin.left - margin.right),
@dougdowson
dougdowson / chart.js
Last active August 29, 2015 13:57
Multi-Series Line Chart
var margin = {top: 15, right: 70, bottom: 50, left: 29},
width = 675 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom,
formatPercent = d3.format(".0%"),
labelBuffer = 7;
var color = d3.scale.ordinal().range(["#66BFED","#338CBA","#005987","#7F8C8D","#95A5A6","#34495E","#677C91","#C0392B"]);
var xScale = d3.scale.linear()
.range([0, width]);
@dougdowson
dougdowson / chart.js
Last active August 29, 2015 13:57
Scatterplot
var body = d3.select('body'),
menu = d3.select("#menu"),
margin = { top: 0, right: 0, bottom: 30, left: 40 },
height = 500 - margin.top - margin.bottom,
width = 550 - margin.left - margin.right,
formatNumber = d3.format(',.1f'),
formatCurrency = d3.format('$,.0f'),
tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
@dougdowson
dougdowson / chart.js
Last active August 29, 2015 14:00
Line Chart: Season of Birth
var margin = {top: 20, right: 75, bottom: 30, left: 30},
width = 700 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom,
xScale = d3.time.scale().range([0, width]),
yScale = d3.scale.linear().range([height, 0]),
parseDate = d3.time.format("%Y").parse,
formatPercent = d3.format(".0%");
var birthData,
filtered,
@dougdowson
dougdowson / chart.js
Last active August 29, 2015 14:01
Line Chart: BLS Industry Data
var margin = {top: 10, right: 65, bottom: 25, left: 55},
width = 675 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom,
numberFormat = d3.format(",.0f"),
dollarFormat = d3.format("$,.0f"),
labelBuffer = 7;
var xScale = d3.time.scale()
.range([0, width]);
@dougdowson
dougdowson / chart.js
Last active August 29, 2015 14:02
Line Chart: Brazilian Real
var margin = {top: 15, right: 30, bottom: 20, left: 0},
width = 575 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var parseDate = d3.time.format("%m-%d-%Y").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
@dougdowson
dougdowson / chart.js
Last active August 29, 2015 14:05
Line Chart: Recent College Graduates
var margin = {top: 15, right: 38, bottom: 20, left: 12},
width = 575 - margin.left - margin.right,
height = 460 - margin.top - margin.bottom;
var parseYear = d3.time.format("%Y").parse,
parseMonth = d3.time.format("%m-%Y").parse,
formatPercent = d3.format("%"),
formatPercentDetailed = d3.format(".1%");
var x = d3.time.scale()
@dougdowson
dougdowson / chart.js
Last active August 29, 2015 14:06
Scatterplot: Labor Force Participation
var margin = {top: 15, right: 45, bottom: 40, left: 25},
width = 565 - margin.left - margin.right,
height = 460 - margin.top - margin.bottom;
var parseYear = d3.time.format("%Y").parse,
parseDate = d3.time.format("%Y%m").parse,
parseMonth = d3.time.format("%m-%Y").parse,
numberFormat = d3.format(",.0f"),
numberFormatDetailed = d3.format(",.1f");
@dougdowson
dougdowson / chart.js
Last active August 29, 2015 14:06
Scatterplot: CO2 Emissions
var margin = {top: 35, right: 45, bottom: 40, left: 25},
width = 565 - margin.left - margin.right,
height = 460 - margin.top - margin.bottom;
var parseYear = d3.time.format("%Y").parse,
parseDate = d3.time.format("%Y%m").parse,
parseMonth = d3.time.format("%m-%Y").parse,
numberFormat = d3.format(",.0f"),
numberFormatDetailed = d3.format(",.1f");
@dougdowson
dougdowson / chart.js
Last active August 29, 2015 14:07
Scatterplot: Income Inequality
var margin = {top: 15, right: 20, bottom: 40, left: 40},
width = 575 - margin.left - margin.right,
height = 460 - margin.top - margin.bottom;
var parseYear = d3.time.format("%Y").parse,
parseDate = d3.time.format("%Y%m").parse,
parseMonth = d3.time.format("%m-%Y").parse,
numberFormat = d3.format(",.0f"),
numberFormatDetailed = d3.format(",.1f");