D3/Time Series: Difference between revisions
From charlesreid1
No edit summary |
(→Notes) |
||
| 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= | ||
Latest revision as of 04:27, 16 February 2018
Plotting time series with D3: use C3.
Notes
Time Series Data
Gathering time series data from instrumenting a machine running processor-intensive code.
C3
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
<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>
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
$ 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
}
}
});
});