TechQA.

Plotting zeros with dimple/d3 js results NaN

578 views Asked by At

I am having a fairly interesting problem. Every time I try to plot a csv file, which contains only zeros, I get:

 d3.v4.min.js:2 Error: <g> attribute transform: Trailing garbage, "translate(0, NaN)".

I first kept thinking it is either from dimple js or from my csv data, but I could not find a single error in them. The most interesting thing is that, I tested it with a jsfiddle and it worked normally (link to fiddle), however, the exact same code, does not work for me outside the fiddle:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.min.js"></script>

<pre id="data">
Value,Year
0,2009
0,2010
0,2011
0,2012
0,2013
0,2014
0,2015
0,2014
0,2014
0,2012
0,2015
0,2010
0,2011
0,2013
</pre>

<body>

<div id="chartContainer" style="height: 80%">
<script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 600, 400);
    var data = d3.csvParse( d3.select("pre#data").text() );

    var chart = new dimple.chart(svg, data);
    var x = chart.addCategoryAxis("x", "Year");
    x.addOrderRule("Year");
    var y = chart.addMeasureAxis("y", "Value");
    chart.addColorAxis("Value", ["green", "yellow", "red"]);
    var lines = chart.addSeries(null, dimple.plot.line);
    lines.lineWeight = 4;
    lines.lineMarkers = true;
    chart.ease = "bounce";
    chart.staggerDraw = true;
    chart.draw(2000);
</script>
</div>

</body>
</html>

When I use the code I get the following errors:

  1. Error: attribute transform: Trailing garbage, "translate(0, NaN)".
  2. Error: attribute y: Expected length, "NaN".
  3. Error: attribute d: Expected number, "M94.3,NaNL162.9,NaNL23…".
  4. Error: attribute cy: Expected length, "NaN".
javascript d3.js dimple.js
Original Q&A
1

There are 1 answers

0
ibrahim tanyalcin On

PS THAT SHOULD HAVE BEEN WRITTEN FIRST:

Did you check (!) the resources that you give link to that fiddle????? It uses d3.v3.min.js whereas in your case you are using d3.v4. So clearly dimple 2.3.0 with d3.v4 could not handle all zero cases.

I think I found your problem, I played around a bit with your html, I suspect that you infact get the same error in jsfiddle as well BUT you don't see it. Strangely in the fiddle the library handles all 0, but not no local.

If you change your data a bit like a min value and a max value other than 0, then your library can plot.

I am suspecting that your library is trying to scale the data by doing (value-min)/(max-min) and it gives you 0/0 thus NaN. Changing the pre mitigates it:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.min.js"></script>

</head>

<body>
<pre id="data">
Value,Year
1,2009
0,2010
0,2011
0,2012
0,2013
0,2014
0,2015
0,2014
0,2014
0,2012
0,2015
0,2010
0,2011
10,2013
</pre>
<div id="chartContainer" style="height: 80%"></div>
<script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 600, 400);
    var data = d3.csvParse( d3.select("pre#data").text());
    data.forEach(function(d,i){d.Value = +d.Value;d.Year = +d.Year});
    data.sort(function(a,b){return a.Year - b.Year});
    console.log(data);
    console.log(typeof data);
    setTimeout(function(d,i){
        var chart = new dimple.chart(svg, data);
        var x = chart.addCategoryAxis("x", "Year");
        x.addOrderRule("Year");
        var y = chart.addMeasureAxis("y", "Value");
        chart.addColorAxis("Value", ["green", "yellow", "red"]);
        var lines = chart.addSeries(null, dimple.plot.line);
        lines.lineWeight = 4;
        lines.lineMarkers = true;
        chart.ease = "bounce";
        //chart.staggerDraw = true;
        chart.draw(2000);
    },3000)
</script>
</body>
</html>

Related Questions in JAVASCRIPT

Related Questions in D3.JS

Related Questions in DIMPLE.JS

Popular Questions

Trending Questions