Sparql vs. Json performance

by Nivaldo

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css">
<div id="chart">
    <svg></svg>
</div>

CSS

#chart svg {
    height: 200px;
}

JavaScript

nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .useInteractiveGuideline(true)
    ;

  chart.xAxis
    .axisLabel('query')
    .tickFormat(d3.format(',r'))
    ;

  chart.yAxis
    //.axisLabel('Voltage (v)')
    .tickFormat(d3.format('.02f'))
    ;

  d3.select('#chart svg')
    .datum(getData())
    .transition().duration(500)
    .call(chart)
    ;

  nv.utils.windowResize(chart.update);

  return chart;
});

function getData() {
    var sparql = [{
        x: 1,
        y: 0.190
    }, {
        x: 2,
        y: 0.142
    }, {
        x: 3,
        y: 0.208
    }, {
        x: 4,
        y: 0.443
    }, {
        x: 5,
        y: 0.247
    }, {
        x: 6,
        y: 0.165
    }, {
        x: 7,
        y: 0.142
    }, {
        x: 8,
        y: 0.182
    }, {
        x: 9,
        y: 0.329
    }, {
        x: 10,
        y: 0.240
    }, {
        x: 11,
        y: 0.192
    }];
    
    var json = [{
        x: 1,
        y: 0.981
    }, {
        x: 2,
        y: 2.087
    }, {
        x: 3,
        y: 0.008
    }, {
        x: 4,
        y: 0.938
    }, {
        x: 5,
        y: 0.544
    }, {
        x: 6,
        y: 0.136
    }, {
        x: 7,
        y: 0.057
    }, {
        x: 8,
        y: 1.484
    }, {
        x: 9,
        y: 2.462
    }, {
        x: 10,
        y: 0.825
    }, {
        x: 11,
        y: 1.293
    }];

    return [{
        values: sparql,
        key: 'sparql',
        color: '#ff7f0e'
    }, {
        values: json,
        key: 'json',
        color: '#2ca02c'
    }];
};