Search code examples
javascriptd3.jsdimple.js

D3 - Dimple basic example improve rapidity

Let me explain my situation.
First, I have chosen to use Dimple because I am new with d3, and I see dimple as a way to progressively get more familiar with d3 (but still produce interesting plots).

I want to plot a multiple line graph.
Each line represents the power demand at a location during the day.

The data is coming from a Python algorithm under the following shape: 

{ time:[00:00:00...23:59:59], locationName1:[power values], ..., locationNameN:[]}

In order to plot it, I transformed it into a flat format, and so I wrote a piece of code to create a csv file such as there are 3 columns: 

"Time,Location,Power_Demand"  
"00:00,Home,1000"  
"...,...,..."

My csv file is approximately 0.14MB

I use the following script to plot my result: 

   var svg = dimple.newSvg("#chartContainer", 1500, 800);
   d3.csv("data.csv", function (data) {
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(100, 100, 1000, 620)
    var x = myChart.addTimeAxis("x", "Time", "%H:%M:%S", "%H:%M");
    x.addOrderRule("Time");
    var y = myChart.addMeasureAxis("y", "Power_Demand");
    y.overrideMax = 300000;
    y.overrideMin = 0;
    var s = myChart.addSeries(["Location"], dimple.plot.line);
    myChart.addLegend(130, 10, 400, 35, "right");
    myChart.draw();
   });

It takes approximately 1 minutes to draw.

My main question is: why is it that slow ? Is it my JavaScript code ? In the end it's just 5 curves with 1439 points each... it should be quick.

(ps: I have also been a bit disappointed that working with a non-flat JSON object is not easier)

Solution

  • Alright, turned out that trying to follow this dimple example http://dimplejs.org/examples_viewer.html?id=lines_horizontal_stacked made me format my data in a weird way without questioning it.

    I have decided to use http://bl.ocks.org/mbostock/3884955 instead and realized that I could also write my data under this flat format:

    Time,Location1,Location2,...,LocationN
00:00,power value1.1,power value2.1,...,power valueN.1

    The result is instantaneous. Not using Dimple was a little bit harder at first, but worth it in the end. I am sure that my JavaScript code using dimple wasn't the good way to proceed (probably because I am new to it). But still it's a bit disappointing that there are no examples using a simpler dataset on the dimple page. As a result it turns out to be confusing to use a very simple dataset (according to me).