Search code examples
d3.jsparallel-coordinates

wrong shadows at a parallel coordinates plot

i'm (still) working on the representation of some data using the parallel-coordinates library from github (https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates)(based on d3.js).

At the moment i'm facing the problem that there is a shadow wich shouldn't exist, after i reorder the axes.

after the upload of the data to the website the plot looks like that: enter image description here

after the reordering (switch the first to axes) the plot looks like that: enter image description here

here you can see a shadow between the second and the third axis, which shouldn't be there.
the other shadows work fine (as you can see in the following picture). there is only this additional one. enter image description here

i checked the api description of the library if i maybe use the .shadows() method in a wrong way, but didn't find anything. i although checked the issues, stackoverflow and google but didn't find anything helpful.

here is my code:

<link rel="stylesheet" type="text/css" href="Imports/d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="Imports/style.css">
<script src="Imports/lib/d3.min.js"></script>
<script src="Imports/d3.parcoords.js"></script>

<link rel="stylesheet" type="text/css" href="Imports/d3.parcoords.css">
<link rel="stylesheet" type="text/css" href="Imports/style.css">


<body>

    <input type="file" id="fileInput" />

    <div id="example" class="parcoords" style="width:700px; height:300px; position:relativ;"></div>

    <script>
        function handleFileSelect(evt) {
            var inputFiles=evt.target.files;

            var reader=new FileReader();
            reader.onload = (function(e){
                ausfuehren(reader.result);     //call the 'main' method
            });
            reader.readAsText(inputFiles[0]);
        }
        document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);

        // main method
        function ausfuehren(eingabe){
            var save=eingabe;
            save=parse(save);           
            save=drawParallelCoordinates(save);
        }

        // text ->objekt Array
        function parse(text){   
            var ergebnis= text.split("\n");         //split into single lines
            var header = ergebnis[0].split(",");    //split the first line by "," to get the names of the attributes/dimensions
            var final_res = [];                     //arrayList
            for (var i = 1; i<ergebnis.length; i++) {  //loop over the following lines, which contain the information for the representet objekts
                var zeile=ergebnis[i];
                var tmp = zeile.split(",");                     //split by "," to get the single attributevalues
                final_res.push({});                             //push a new objekt to the array list
                for (var j = 0, element; element = tmp[j]; j++) {   //loop over every attribute
                    final_res[i-1][header[j]] = element;            // add dynamical one attribute to the objekt with the identifier which is in the header and the value from the csv
                }
            }
            return final_res;
        }

        // eingabe: the data
        function drawParallelCoordinates(eingabe){  //Objekt Array -> Parcoords Objekt
            console.log("drawParallelCoordinates: The data:",eingabe);
            var parcoords = d3.parcoords()("#example")  
                .data(eingabe)                     
                .render()       
                .reorderable()  
                .shadows()      
                .brushMode("1D-axes")  

            return parcoords;
        }
    </script>
</body>

(if you want to run it(it should work), you need the imports for d3 and the paarcoords lib in an imports directory which has to be in the same directory as the htmlfile) (you can get my "imports" directory at the following link: http://ge.tt/31WHTgL2/v/0?c)

the main functional part is the drawParallelCoordinates method at the end of the code.

the uploaded csv file contains the following:

name,reifen,tueren,ps
audi ,4,5,300
motorad,2,0,100
fiat,4,5,60
trike,3,0,130

the inner data (directly before the overhanding to the parcoords) is the following: enter image description here

The questions are: Do i do a mistake? and if so: what do i do wrong, what is the right solution, or where can i find the answers ?
or am i facing a bug in the library

Update: (some additional info)

One thing which looks similar (it causes wrong shadows too) can be caused by missing / undefinded values. But here i think this is not the case, because i didn't finde a spot were a value could be missing in my little(postet above) example.

i observed that the discribed behavior only appears at the bottom of the plot (this means: only when to min values of axes next to eachother are connected) if you then change the order of the axes, the shadow stays. So you can kind of creat new wrong shadows. (At the moment i dont know if there can be such wrong shadws from beginning)

Fiddle

Here is the working fiddle: https://jsfiddle.net/x74wemq0/4/
Somehow the error doesn't occur in the results window of the fiddle. Maybe i only had on older version of the the library and the bug is already fixed. (i'll check this)

thanks in advance
Jones

Solution

  • i switched to load the imports via link: 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://syntagmatic.github.io/parallel-coordinates/d3.parcoords.css"/>

    So now i have the newest version of the libraries and the error doesn't occur anymore.
    i think it was a bug in the older version i used before and it should be fixed now.

    greetings Jones

    PS: if i'm wrong and the error occurs again i'll let you know ;)