Plotting time series with D3: use C3.

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:

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
            }
        }
    });
});

Flags

D3/Time Series

From charlesreid1

Contents

Notes

Time Series Data

C3

Flags