Admin: /* Notes */

2018-02-16T04:27:43Z

Notes

← Older revision		Revision as of 04:27, 16 February 2018
Line 2:		Line 2:

	=Notes=		=Notes=

			==Time Series Data==

			Gathering time series data from instrumenting a machine running processor-intensive code.

			[[Profiling/Timeseries]]

			==C3==

	Inserting a chart into an html page requires the following:		Inserting a chart into an html page requires the following:
Line 123:		Line 131:
	});		});
	</pre>		</pre>


	=Flags=		=Flags=

Admin at 04:24, 16 February 2018

2018-02-16T04:24:19Z

← Older revision		Revision as of 04:24, 16 February 2018
Line 1:		Line 1:
	Plotting time series with D3: use C3		Plotting time series with D3: use C3.

			=Notes=

			Inserting a chart into an html page requires the following:
			* script tag with d3
			* script tag with c3
			* script tag with javascript defining the c3 chart

			here's what index.html looks like:

			'''index.html'''

			<pre>
			<html>
			<head>
			<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
			<link href="static/c3.css" rel="stylesheet" type="text/css">
			</head>
			<body>

			<script src="static/d3.js" charset="utf-8"></script>
			<script src="static/c3.js"></script>
			<script src="ts.js"></script>

			<h2>A Decade of Wiki Edits: Number of Edits</h2>
			<div id="edits_chart"></div>

			<br />

			<h2>A Decade of Wiki Edits: Character Counts</h2>
			<div id="char_chart"></div>

			</body>
			</html>
			</pre>

			Likewise, here is the Javascript that defines two separate charts. Note, this is terrible copy-pasta, but I'm better with vim than I am with Javascript.

			'''index.html'''

			<pre>
			$ cat ts.js
			d3.csv("page_edits.csv", function(origcsv) {
			var xkey = 'timestamp';
			var ykey = 'edits';
			var csv = origcsv.filter(function(stuff) {
			result = {};
			for (var key in stuff) {
			if(key == xkey \|\| key == ykey ) {
			result[key] = stuff[key]
			}
			}
			return result;
			});
			var chart = c3.generate({
			size: {
			width: 640,
			height: 200
			},
			bindto: '#edits_chart',
			data: {
			json: csv,
			keys: {
			x : xkey,
			value: [ykey]
			},
			'type' : 'area'
			},
			axis: {
			x: {
			type: 'timeseries',
			tick: {
			format: '%Y-%m-%d'
			}
			},
			y: {
			inner: true,
			}
			}
			});
			});


			d3.csv("page_edits.csv", function(origcsv) {
			var xkey = 'timestamp';
			var ykey = 'charcount';
			var csv = origcsv.filter(function(stuff) {
			result = {};
			for (var key in stuff) {
			if(key == xkey \|\| key == ykey ) {
			result[key] = stuff[key]
			}
			}
			return result;
			});
			var chart = c3.generate({
			size: {
			width: 640,
			height: 200
			},
			bindto: '#char_chart',
			data: {
			json: csv,
			keys: {
			x : xkey,
			value: [ykey]
			},
			'type' : 'area'
			},
			axis: {
			x: {
			type: 'timeseries',
			tick: {
			format: '%Y-%m-%d'
			}
			},
			y: {
			inner: true
			}
			}
			});
			});
			</pre>


			=Flags=

	[[Category:Javascript]]		[[Category:Javascript]]

Admin: Created page with "Plotting time series with D3: use C3 Category:Javascript Category:D3 Category:C3 Category:2018 Category:February 2018"

2018-02-16T04:20:56Z

Created page with "Plotting time series with D3: use C3 Category:Javascript Category:D3 Category:C3 Category:2018 Category:February 2018"

New page

Plotting time series with D3: use C3

[[Category:Javascript]]
[[Category:D3]]
[[Category:C3]]
[[Category:2018]]
[[Category:February 2018]]

D3/Time Series - Revision history

Admin: /* Notes */

Admin at 04:24, 16 February 2018

Admin: Created page with "Plotting time series with D3: use C3 Category:Javascript Category:D3 Category:C3 Category:2018 Category:February 2018"