title: How to add another axis in a parallel coordinate plot in d3
body: <p>In <a href="https://jsfiddle.net/cswj20du/2/" rel="nofollow noreferrer">this</a> parallel coordinate plot you can see another axis at the end called "species" but it is not attached to the other axis. I wanted to make it work just like in the other axis but this is not working because it has non numeric data therefore it is not connected. I wanted to know how could I make this work in d3?</p>
  
  <p>html code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;!-- Load d3.js --&gt;
  &lt;script src="https://d3js.org/d3.v4.js"&gt;&lt;/script&gt;
  
  &lt;!-- Create a div where the graph will take place --&gt;
  &lt;div id="my_dataviz"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>d3.js code:</p>
  
  <pre><code>// set the dimensions and margins of the graph
  var margin = {top: 30, right: 10, bottom: 10, left: 0},
    width = 500 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
  
  // append the svg object to the body of the page
  var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");
  
  // Parse the Data
  d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(data) {
  
    // Extract the list of dimensions we want to keep in the plot. Here I keep all except the column called Species
    dimensions = d3.keys(data[0]).filter(function(d) { return d })
  
    // For each dimension, I build a linear scale. I store all in a y object
    var y = {}
    for (i in dimensions) {
      name = dimensions[i]
      y[name] = d3.scaleLinear()
        .domain( d3.extent(data, function(d) { return +d[name]; }) )
        .range([height, 0])
    }
  
    // Build the X scale -&gt; it find the best position for each Y axis
    x = d3.scalePoint()
      .range([0, width])
      .padding(1)
      .domain(dimensions);
  
    // The path function take a row of the csv as input, and return x and y coordinates of the line to draw for this raw.
    function path(d) {
        return d3.line()(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
    }
  
    // Draw the lines
    svg
      .selectAll("myPath")
      .data(data)
      .enter().append("path")
      .attr("d",  path)
      .style("fill", "none")
      .style("stroke", "#69b3a2")
      .style("opacity", 0.5)
  
    // Draw the axis:
    svg.selectAll("myAxis")
      // For each dimension of the dataset I add a 'g' element:
      .data(dimensions).enter()
      .append("g")
      // I translate this element to its right position on the x axis
      .attr("transform", function(d) { return "translate(" + x(d) + ")"; })
      // And I build the axis with the call function
      .each(function(d) { d3.select(this).call(d3.axisLeft().scale(y[d])); })
      // Add axis title
      .append("text")
        .style("text-anchor", "middle")
        .attr("y", -9)
        .text(function(d) { return d; })
        .style("fill", "black")
  
  })
  </code></pre>
  
  <p>thank you for any of your suggestions.</p>
  
  <p>I know that I have to extract the list of dimensions and create a scale for each but I am not being able to successfully do it. 
  Instead of building a linear scale for each dimension</p>
  
  <pre><code>// For each dimension, I build a linear scale. I store all in a y object
    var y = {}
    for (i in dimensions) {
      name = dimensions[i]
      y[name] = d3.scaleLinear()
        .domain( d3.extent(data, function(d) { return +d[name]; }) )
        .range([height, 0])
    }
  </code></pre>
  
  <p>I suppose I need something like this: </p>
  
  <pre><code>// Extract the list of dimensions and create a scale for each.
    x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
  
        if(d === "name") return false;
  
        if(d === "colour") {
            y[d] = d3.scale.ordinal()
              .domain(cars.map(function(p) { return p[d]; }))
              .rangePoints([h, 0]);
  
        }
        else {
            y[d] = d3.scale.linear()
              .domain(d3.extent(cars, function(p) { return +p[d]; }))
              .range([h, 0]);
        }
  
        return true;
    }));
  </code></pre>
  
  <p>but it's not working when I edit it.</p>