Skip to content

Instantly share code, notes, and snippets.

@hemulin

hemulin/index.html

Last active August 29, 2015 13:57
Show Gist options
  • Save hemulin/9370294 to your computer and use it in GitHub Desktop.
Save hemulin/9370294 to your computer and use it in GitHub Desktop.
Download ZIP
description
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pythia portfolio comulative chart</title>
<script src="https://rawgithub.com/mbostock/d3/master/d3.min.js" type="text/javascript"></script>
<script src="https://rawgithub.com/novus/nvd3/master/nv.d3.min.js" type="text/javascript"></script>
<link type="https://rawgithub.com/novus/nvd3/master/src/nv.d3.css" rel="stylesheet" href="./css/nv.d3.css">
<style>
#chart { height: 700px; }
</style>
</head>
<body>
<div id="chart"><svg></svg></div>
<script type="text/javascript">
d3.json('http://nvd3.org/ghpages/cumulativeLineData.json', function (data) {
nv.addGraph(function () {
var chart = nv.models.cumulativeLineChart()
.x(function (d) { return d[0] })
.y(function (d) { return d[1] / 100 })
//adjusting, 100% is 1.00, not 100 as it is in the data
.color(d3.scale.category10().range())
.useInteractiveGuideline(true);
chart.xAxis
.tickFormat(function (d) {
return d3.time.format('%d/%m/%Y')(new Date(d))
});
chart.yAxis
.tickFormat(d3.format(',.1%'));
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment