Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio timelyportfolio/Readme.md
Last active Aug 29, 2015

Embed
What would you like to do?
rCharts parallel coordinates version of market returns

Quick combination of parallel coordinates and rCharts to show returns by year and annualized returns since 2007 of three index ETFs (SPY, EEM, and VEA). This could easily be extended to other risk/return data points on a much larger sets of indices, asset classes, or securities.

Thanks to d3.js, parallel coordinates, rCharts, R, and PerformanceAnalytics.

Data from Yahoo! Finance for personal educational use.

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href='http://syntagmatic.github.io/parallel-coordinates/d3.parcoords.css'>
<script src='http://d3js.org/d3.v2.min.js' type='text/javascript'></script>
<script src='http://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js' type='text/javascript'></script>
<style>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
height: 400px;
}
</style>
</head>
<body >
<div id = 'chart2290584f2d89' class = 'rChart parcoords'></div>
<script id="brushing">
var params = {
"dom": "chart2290584f2d89",
"width": "800",
"height": "400",
"padding": {
"top": 24,
"left": 100,
"bottom": 12,
"right": 100
},
"color": d3.scale.category10(),
"id": "chart2290584f2d89",
"data": [
{
"since 2007": 0.47,
"tckrs": "VEA",
"2007": -5.3,
"2008": -44.9,
"2009": 40.2,
"2010": 17.1,
"2011": -9.3,
"2012": 16.6,
"2013": 11.2,
"2014": 2.5
},
{
"since 2007": 1.9,
"tckrs": "EEM",
"2007": 21.3,
"2008": -49.7,
"2009": 71.8,
"2010": 21.5,
"2011": -6.3,
"2012": 6.9,
"2013": -11.7,
"2014": 1.4
},
{
"since 2007": 5.95,
"tckrs": "SPY",
"2007": -2.7,
"2008": -38.3,
"2009": 32.7,
"2010": 22.2,
"2011": 4.2,
"2012": 16.5,
"2013": 21.4,
"2014": 5.4
}
],
"colorby": "tckrs",
"range": [ "SPY", "EEM", "VEA" ],
"colors": [ "#CA0020", "gray", "#0571B0" ]
}
var getColors = params.color
//.domain(params.range)
//.range(params.colors)
//.interpolate(d3.interpolateLab);
var color = function(d) { return getColors(d[params.colorby]); };
d3.parcoords()("#" + params.dom)
.width(params.width)
.height(params.height)
.margin(params.padding)
.data(params.data)
.color(color)
.alpha(0.4)
.render()
.shadows()
.brushable() // enable brushing
//.reorderable(); // enable moving axes
</script>
<script>
d3.selectAll("svg").selectAll("text")
.style("font-size","10px")
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.