Adding custom axis names to Javascript D3 Parallel Coordinates (CSV has no header line)

Question

I'm loading in a csv file using D3 that by design doesn't have a header line. The data looks like this:

11,12,16,32,12

63,21,34,74,23

I've managed to load the data in and am plotting it using the D3 Parallel Coordinates module (syntagmatic.github.io/parallel-coordinates). However when plotting the axis names default to 0,1,2,3,4. I am trying to change these custom labels to labels read in from an additional file that contains the label names. I have no control over the data structure.

The code below shows two of my functions. The first converts data from a csv file path into a plottable format. The second is the actual plotting of that data. Is there anything I should be altering in order to specify custom axis lables?

// This function takes a file path and loads the data into a variable, then calls plot_data
    function load_file(file) {

        // removes previous SVG plots to prevent messy overlays and memory chaos
        d3.selectAll("svg").remove();

        // This code takes the file (which is a path, and puts it into var data, which is then given to the parcoords plot function)
        d3.text(file, function(text) {
            var data = d3.csv.parseRows(text).map(function(row) {
                return row.map(function(value) {
                    return +value;

                });
            });


// This function plots the data given to it.
    function plot_data(data) {

        pc1 = d3.parcoords()("#example")
                // This is how we get colour working. put a function in the parameters it iterates over each data item .color()
                .data(data)
                .render()
                .alpha(0.35)
                .brushMode("1D-axes")
                .interactive()  // command line mode


        pc1.reorderable();
        console.log("The plot should be done now")
    };

You're using another library, probably this one: https://syntagmatic.github.io/parallel-coordinates/ . If that's correct, please add this information in your question, otherwise it will be very difficult for anyone to help you. — Gerardo Furtado, Mar 20 '17 at 14:49
It's mentioned. "I've managed to load the data in and am plotting it using the D3 Parallel Coordinates module." — PhlexBomb, Mar 20 '17 at 14:51
Yes, I read it, but people trying to helping you may not know what module is this. Even I don't know, I'm just *guessing* that it is the one I linked. — Gerardo Furtado, Mar 20 '17 at 14:58
Ah yes, sorry for the lack of clarity. That is the correct module, I will add it to my post. — PhlexBomb, Mar 20 '17 at 15:00
Please read [How does accepting an answer work?](http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work). Don't edit the word "solved" into the question. — Quentin, Mar 20 '17 at 15:02

score 0 · Answer 1 · edited May 23 '17 at 12:32

I've managed to fix this problem.

I used an answer posted in: read csv/tsv with no header line in D3

I manually added the headers in. They are hardcoded at the moment but can be easily adjusted to read from a file, as is my aim.

function load_file(file) {

        // removes previous SVG plots to prevent messy overlays and memory chaos
        d3.selectAll("svg").remove();

        // This code takes the file (which is a path, and puts it into var data, which is then given to the parcoords plot function)
        d3.text(file, function(text) {

            /* The '6,7,8,9,0\n' is like adding a new line to the CSV file to act as the header
            */
            var result = "6,7,8,9,0\n" + text

            var data = d3.csv.parse(result)
            /*
            var data = d3.csv.parseRows(text).map(function(row) {
                return row.map(function(value) {
                    return +value;

                });
            });
            */

        console.log(data)
        plot_data(data)

Adding custom axis names to Javascript D3 Parallel Coordinates (CSV has no header line)

1 Answers1