D3 : Loading multiple CSV files, and visualizing them using parallel coordinates

Question

I have 4 csv files (say 4 classes), each has 100x200 elements (100 cases, 200 features). I need to visualize some of these features (feature1,feature2,...,feature8; So I will have 100x8 for each csv file) using a parallel coordinates. To recognize the classes, I need to use 4 different color.

I already have the parallel coordinates that I can use to visualize the data (100x10) in one csv file. The code is as below:

    <style type="text/css">

      svg {
        font: 10px sans-serif;
      }

      .background path {
        fill: none;
        stroke: #ccc;
        stroke-opacity: .1;
        shape-rendering: crispEdges;
      }

      .foreground path {
        fill: none;
        stroke: steelblue;
        stroke-opacity: .7;
      }

      .brush .extent {
        fill-opacity: .3;
        stroke: #fff;
        shape-rendering: crispEdges;
      }

      .axis line, .axis path {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

      .axis text {
        text-shadow: 0 1px 0 #fff;
        cursor: move;
      }

    </style>
  </head>
<body>
<script type="text/javascript">

        var m = [30, 10, 10, 10],
            w = 1300 - m[1] - m[3],
            h = 500 - m[0] - m[2];

        var x = d3.scale.ordinal().rangePoints([0, w], 1),
            y = {},
            dragging = {};

        var line = d3.svg.line(),
            axis = d3.svg.axis().orient("left"),
            background,
            foreground;

     var svg = d3.select("body").append("svg:svg")
        .attr("width", w + m[1] + m[3])
        .attr("height", h + m[0] + m[2])
      .append("svg:g")
        .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

      d3.csv("myData.csv")
      .row(function(d) {
        return {
        // Features that are needed to be visualize
         feature1   :  d.feature1,
         feature2   :  d.feature2,
         feature3   :  d.feature3,
         feature4   :  d.feature4,
         feature5   :  d.feature5,
         feature6   :  d.feature6,
         feature7   :  d.feature7,
         feature8   :  d.feature8
        };
      })
      .get(function(e, data) {
        x.domain(
            dimensions = d3.keys(data[0])
                            .filter(function(d) {
                                        return d != "source" && 
                                                (y[d] = d3.scale.linear()
                                                            .domain(d3.extent(data, function(p) { return +p[d]; }))
                                                            .range([h, 0]));
      }
      ));

      // Add grey background lines for context.
      background = svg.append("svg:g")
          .attr("class", "background")
        .selectAll("path")
          .data(data)
        .enter().append("svg:path")
          .attr("d", path);

      // Add blue foreground lines for focus.
      foreground = svg.append("svg:g")
          .attr("class", "foreground")
        .selectAll("path")
          .data(data)
        .enter().append("svg:path")
          .attr("d", path);

      // Add a group element for each dimension.
      var g = svg.selectAll(".dimension")
          .data(dimensions)
        .enter().append("svg:g")
          .attr("class", "dimension")
          .attr("transform", function(d) { return "translate(" + x(d) + ")"; })
          .call(d3.behavior.drag()
            .on("dragstart", function(d) {
              dragging[d] = this.__origin__ = x(d);
              background.attr("visibility", "hidden");
            })
            .on("drag", function(d) {
              dragging[d] = Math.min(w, Math.max(0, this.__origin__ += d3.event.dx));
              foreground.attr("d", path);
              dimensions.sort(function(a, b) { return position(a) - position(b); });
              x.domain(dimensions);
              g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
            })
            .on("dragend", function(d) {
              delete this.__origin__;
              delete dragging[d];
              transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
              transition(foreground)
                  .attr("d", path);
              background
                  .attr("d", path)
                  .transition()
                  .delay(500)
                  .duration(0)
                  .attr("visibility", null);
            }));

      // Add an axis and title.
      g.append("svg:g")
          .attr("class", "axis")
          .each(function(d) { d3.select(this).call(axis.scale(y[d])); })
        .append("svg:text")
          .attr("text-anchor", "middle")
          .attr("y", -9)
          .text(String);

      // Add and store a brush for each axis.
      g.append("svg:g")
          .attr("class", "brush")
          .each(function(d) { d3.select(this).call(y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush)); })
        .selectAll("rect")
          .attr("x", -8)
          .attr("width", 16);
    });

    function position(d) {
      var v = dragging[d];
      return v == null ? x(d) : v;
    }

    function transition(g) {
      return g.transition().duration(500);
    }

    // Returns the path for a given data point.
    function path(d) {
      return line(dimensions.map(function(p) { return [position(p), y[p](d[p])]; }));
    }

    // Handles a brush event, toggling the display of foreground lines.
    function brush() {
      var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }),
          extents = actives.map(function(p) { return y[p].brush.extent(); });
      foreground.style("display", function(d) {
        return actives.every(function(p, i) {
          return extents[i][0] <= d[p] && d[p] <= extents[i][1];
        }) ? null : "none";
      });
    }

        </script>
      </body>

Also my sample data is something like this:

path,Ktype,label,CGX,CGY,C_1,C_2,C_3,C_4,total1,total2,totalI3,total4,feature1,feature2,feature3,feature4,feature5,feature6,feature7,feature8,feature9,feature10,feature11,feature12,A,B,C,D,feature13,feature14,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
    .\Mydata\Case1,k1,1,42,33,0,57.44534,0,52597,71,16,10,276,4038,3789.631,0.6173469,0.6499337,2.103316,0.6661285,1.065539,248.3694,0.630161,0.000192848,0.9999996,0.000642777,1,0,0,1,9.60E-05,3136.698,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
    .\Mydata\Case2,k1,2,163,29,0,43.28862,0,49050,71,16,10,248,2944,2587.956,0.5726808,0.5681185,2.130387,0.601512,1.137578,356.0444,0.6335613,0.000327267,1.000029,0.001271235,1,0,0,1,0.00010854,2676.418,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
    .\Mydata\Case3,k1,3,774,19,0,45.26291,0,53455,71,16,10,212,2366,1982.547,0.408179,0.4579566,1.994296,0.6615351,1.193415,383.4534,0.7153812,0.000264522,1.000031,0.001210507,1,1,0,0,9.54E-05,3221.289,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
    .\Mydata\Case4,k1,4,1116,25,0,80.76469,0,57542,71,16,10,284,3908,3453.988,0.3549117,0.4811547,1.982244,0.6088744,1.131446,454.0122,0.6166388,0.000314288,0.9999836,0.00129846,0,1,1,0,0.000140592,2143.42,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
    .\Mydata\Case5,k1,5,1364,59,1,52.96776,0,49670,71,16,10,228,2725,2642.675,0.4328255,0.475517,1.859871,0.6587288,1.031152,82.32471,0.5775694,0.000466264,0.9999803,0.001765345,0,1,1,0,0.00012014,2439.636,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

Now, I have two questions:

First, I don't know how I can load 4 csv files at the same time? In future, I might need to increase the number of classes (i.e. increase the number of csv files needed to be visualize), so maybe combining the csv files, and loading just one csv file is not good idea. How I can handle that?

Second, how I should color the lines regarding to the csv file they are belonging to?

@Oleg, I am still stuck here :(

sara_123
– sara_123

2014-07-14 00:11:28 +00:00
Commented Jul 14, 2014 at 0:11 — sara_123
– sara_123, Commented Jul 14, 2014 at 0:11

Oleg · Accepted Answer · 2014-07-13 07:57:11Z

3

To load multiple files asynchronously, you can use a queuing library, such as queue.js.

Then, once the files are loaded, you can render them inside of individual overlapping g group elements with color applied to the entire group based, for example, on the index of the order in which the file was loaded.

Below is an untested and unfinished solution that might give you some clues:

var q = queue(), // create the queue
    dataSources = [ // your data sources
        'dataSource1.csv',
        'dataSource2.csv',
        ...
    ],
    colorScale = d3.scale.category20(); // categorical color scale bundled with d3

// Returns a different color for elements based on their index in the data:
function colorByIndex(d, i) {
    return colorScale(i);
}

// Go through each data source and add it to the queue:
dataSources.forEach(function (source) {
    q.defer(function (callback) {
        d3.csv(source, callback);
    });
});

// Wait for all requests to be completed:
q.awaitAll(function (error, results) {
    // TODO: check for errors!
    // Select and create groups of elements that are to be colored differently:
    d3.selectAll('.group').data(results) // array of arrays
        .append('g')
        .style('color', colorByIndex) // this applies color to the entire group
            .selectAll('???') // whatever you render, paths perhaps
            .data(function (d) { return d; })
            ...
            // at this point the d variable is an array of data
            // straight from each of your csv files, you can
            // proceed rendering as you usually do and there's
            // no longer need to apply any colors
});

Alternatively, you can merge the results together in a single array and mark each individual row with an indicator of which file it comes from, like so:

['dataSource1.csv', 'a1', 'b1', 'c1', ...],
['dataSource1.csv', 'a2', 'b2', 'c2', ...],
['dataSource2.csv', 'a3', 'b3', 'c3', ...],
...

And then apply color based on the value of the indicator.

answered Jul 13, 2014 at 7:57

Oleg

9,4092 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sara_123 Over a year ago

Thanks for your answer. I am trying to fit your code into my code. Where should I select the features I am interested in ? should I put this code ".row(function(d) { return { // Features that are needed to be visualize feature1 : d.feature1, feature2 : d.feature2, feature3 : d.feature3, feature4 : d.feature4, feature5 : d.feature5, feature6 : d.feature6, feature7 : d.feature7, feature8 : d.feature8 }; })" instead of "return d;" in your code?

Oleg Over a year ago

@sara_123 you can add it directly from .data(function (d) { return d; }). Just replace the return d; with your own mapping to "features" or whatever you call it.

sara_123 Over a year ago

I think I am doing something wrong here, because the code is not running and it is complaining about .get function. What I changed is : q.awaitAll(function (error, results) { d3.selectAll('.group').data(results).append('g') .style('color', colorByIndex).selectAll("path").data(function (d) { return { feature1 : d.feature1, feature2 : d.feature2,..., feature8 : d.feature8 };}) .get(function(e, data) { /*rest of my code*/ } /*end of .get*/); }/*end of q.awaitAll*/)

Collectives™ on Stack Overflow

D3 : Loading multiple CSV files, and visualizing them using parallel coordinates

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related