Skip to content

Instantly share code, notes, and snippets.

@jkeohan
Last active December 11, 2015 01:25
Show Gist options
  • Select an option

  • Save jkeohan/c403cf2ac52b1c5635c7 to your computer and use it in GitHub Desktop.

Select an option

Save jkeohan/c403cf2ac52b1c5635c7 to your computer and use it in GitHub Desktop.
Censible Line Graph (run npm install)

image

SETUP

$ npm install ./node_modules/.bin/browser-sync start --proxy="localhost:3000" --files="index.html"

year composite_average_cum_returns composite_cum_returns index_cum_returns
1989-01-01 1.0 1.0 1.0
1990-01-01 0.9887 0.9977 0.969
1991-01-01 1.34403878 1.34779293 1.2642543
1992-01-01 1.42602514558 1.429064843679 1.36059047766
1993-01-01 1.689982400026858 1.6875826739005313 1.497737997808128
1994-01-01 1.7496387787478058 1.7458042761500996 1.5175081393791954
1995-01-01 2.310048079580728 2.3276808413909276 2.087787698157897
1996-01-01 2.5990350943362768 2.594665833898467 2.56714375365495
1997-01-01 3.429166903467283 3.4355970306649604 3.423542909874242
1998-01-01 3.9301681880638535 3.9241389284255175 4.401991473516301
1999-01-01 4.528339786287172 4.522570115010409 5.32817047954413
2000-01-01 5.123363634205306 5.107790687892756 4.843306965905614
2001-01-01 4.66277324349025 4.6460464097072505 4.265500444873075
2002-01-01 4.073398705513082 4.084339398773644 3.3245310467340743
2003-01-01 5.0290180418264505 5.039666384146799 4.278006550937406
2004-01-01 5.776833024646044 5.803679807983454 4.7434536636793965
2005-01-01 6.007328662329422 6.041050312129977 4.976357238566054
2006-01-01 6.930655077729454 6.976204900447698 5.76262168225949
2007-01-01 7.865600447715157 7.905435393187331 6.078989612615536
2008-01-01 5.608173119220908 5.643690327196436 3.8297634559477878
2009-01-01 7.292307506922946 7.313093925981142 4.843118866391572
2010-01-01 8.099565947939317 8.125578661157647 5.572492567670143
2011-01-01 8.71432300338791 8.694369167438683 5.690072160847983
2012-01-01 10.216672289171987 10.147198255317688 6.60048370658366
2013-01-01 14.196066145804474 14.028501587976704 8.738380379146108
2014-01-01 15.811578473197022 15.561816811542558 9.93466465305121
<html>
<style>
body { font: 12px Arial;}
path { stroke: steelblue; stroke-width: 2; fill: none; }
.axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges; }
</style>
<body>
<div id='chart'></div>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.js'></script>
<script id='settings' type='text/javascript'>
// Set the dimensions of the canvas / graph
var margin = { top: 30, right: 20, bottom: 30, left: 50 }
, width = 600 - margin.left - margin.right
, height = 270 - margin.top - margin.bottom
var x = d3.time.scale().range([0, width])
, y = d3.scale.linear().range([height, 0])
, xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(18)
, yAxis = d3.svg.axis().scale(y).orient("left").ticks(18)
, line = d3.svg.line()
.x(function(d) { console.log(d.foo); return x(d.foo); })
.y(function(d) { return y(d.cumulative_returns); })
// Adds the svg canvas
var svg = d3.select("div#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var format = function(row) {
return {
foo: new Date(row.year),
cumulative_returns: parseFloat(row.composite_average_cum_returns),
composite_cumulative_returns: parseFloat(row.composite_cum_returns),
index_cumulative_returns: parseFloat(row.index_cum_returns)
}
}
var plot = function(error, rows) {
x.domain(d3.extent(rows, function(d) { return d.foo; }))
y.domain([0, d3.max(rows, function(d) { return d.cumulative_returns; })])
var path = svg.append("path");
path
.attr("class", "line")
.attr("d", line(rows));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
}
d3.csv("data.csv", format, plot)
</script>
</body>
</html>
var express = require("express");
var app = express();
var path = require("path");
app.use(express.static('.'))
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
})
.listen(3000)
console.log("Running at Port 3000")
{
"name": "censibled3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"browser-sync": "^2.10.0",
"express": "^4.13.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment