Skip to content

Instantly share code, notes, and snippets.

@metmajer
Last active December 12, 2015 07:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save metmajer/4739442 to your computer and use it in GitHub Desktop.
Save metmajer/4739442 to your computer and use it in GitHub Desktop.
Simple time series data modeling with dataseries.js.

Simple time series data modeling composed of a trend, seasonality and random component with dataseries.js.

<!doctype html>
<meta charset="utf-8"/>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="https://raw.github.com/metmajer/dataseries.js/master/dataseries.min.js"></script>
<script src="https://raw.github.com/metmajer/dataseries.js/master/examples/lib/charts/line.js"></script>
<style>
body {
font-family: Georgia; Arial; sans-serif;
padding: 0;
margin: 0;
}
#graph svg .axis path,
#graph svg .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
#graph svg .graph {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<div id="graph"></div>
</body>
<script type="text/javascript">
var data = ds.generators.f(function(x) {
return ds.functions.linear(x, { a: 1, b: 1 })
+ ds.functions.sin(x, { f: 0.5 })
+ ds.random.rand(-0.2, 0.2);
})
.inputs(ds.range(0, 1, 0.01))
.time(new Date(), ds.time.DAY)
.transform(ds.transforms.point)
.values();
line(d3.select("#graph"))
.width(900)
.height(500)
.margin({top: 20, right: 20, bottom: 40, left: 60})
.data(data)();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment