D3/Time Series: Difference between revisions

From charlesreid1

(Created page with "Plotting time series with D3: use C3 Category:Javascript Category:D3 Category:C3 Category:2018 Category:February 2018")
 
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
Plotting time series with D3: use C3
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'''
<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]]

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.

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

Retrieved from "https://charlesreid1.com/w/index.php?title=D3/Time_Series&oldid=24285"