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>
    <title>Metric Graphics Time Series | Gliesians</title>
    <div id="floyd"></div>
    <script src=""></script>
    <script src=""></script>
    <link  href="" rel="stylesheet" type="text/css">

    <script type="text/javascript">
        d3.json('/data/floyds-wins.json', function (data) {
                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'}]

The associated JSON is here.

No comments:

Post a Comment

The source code for is for sale on Ebay.

I've decided to shut down and sell the source code. If anyone is looking to purchase the related source, you can find it...