JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://syntagmatic.github.io/parallel-coordinates/d3.parcoords.js"></script>
<link rel="stylesheet" href="https://syntagmatic.github.io/parallel-coordinates/d3.parcoords.css">
<input type="file" id="fileInput" />
<div id="example" class="parcoords" style="width:700px; height:300px; position:relativ;"></div>
JavaScript
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;
}