Old school D3 from simpler times

All examples By author By category About

metmajer

Full window Github gist

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="https://d3js.org/d3.v3.js"></script>
<script src="https://cdn.jsdelivr.net/gh/metmajer/dataseries.js/dataseries.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/metmajer/dataseries.js/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>

Modified http://d3js.org/d3.v3.js to a secure url

Updated missing url https://raw.github.com/metmajer/dataseries.js/master/dataseries.min.js to https://cdn.jsdelivr.net/gh/metmajer/dataseries.js/dataseries.min.js

Updated missing url https://raw.github.com/metmajer/dataseries.js/master/examples/lib/charts/line.js to https://cdn.jsdelivr.net/gh/metmajer/dataseries.js/examples/lib/charts/line.js

https://d3js.org/d3.v3.js

https://raw.github.com/metmajer/dataseries.js/master/dataseries.min.js

https://raw.github.com/metmajer/dataseries.js/master/examples/lib/charts/line.js