Friday, November 25, 2016

Time Series Graphs - Javascript libraries built on D3

We are going to take a look at a few time series graphs.  These will be from Javascript libraries built on top of D3.

"A time series is a series of data points indexed (or listed or graphed) in time order." -- wikipedia



Many Javascript APIs provide time series support, however only a few specialize in time series components such as Cubism.js, Rickshaw and MetricsGraphics.js.


Time Series
Javascript API
Activity License Maintainer
Cubism.js GitHub Apache License 2.0 Square, Inc.
Rickshaw GitHub Shutterstock Images, LLC Shutterstock, Inc.
MetricsGraphics.jsGitHub Mozilla Public License  Ali AlmossawiHamilton Ulmer
Epoch GitHub The MIT License (MIT) Fastly, Inc.
Plotly GitHub The MIT License (MIT) Plotly
Ember ... Apache License 2.0 Addepar
xCharts GitHub Apache License 2.0 tenXer, Inc.
D4 GitHub The MIT License (MIT) Mark Daggett


Here is a MetricsGraphics example of a time series chart, along with the associated source





 <!DOCTYPE html>
<head>
    <title>Metric Graphics Time Series | Gliesians</title>
</head>
<body>
    <div id="floyd"></div>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.10.1/metricsgraphics.min.js"></script>
    <link  href="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.10.1/metricsgraphics.min.css" rel="stylesheet" type="text/css">

    <script type="text/javascript">
        d3.json('/data/floyds-wins.json', function (data) {
            MG.data_graphic({
                title: "Floyd Mayweather Wins Per Year",
                description: "Floyd Mayweather Professional Wins",
                data: data,
                width: 650,
                height: 150,
                target: '#floyd',
                x_accessor: 'year',
                y_accessor: 'wins',
                markers: [{'year': 1998, 'label': '"WBC World Title'}]
            });
        });
    </script>
</body>


The associated JSON is here.

No comments:

Post a Comment

OXY 3 Parts Needed

This blog post lists the parts needed to build and operate an OXY 3 .... but first an Oxy 3 unboxing video! Lynx OXY3-255 - Oxy 3 H...