parallel_coordinates_laptops.js

/**
 * Author: Vladimir  Ilievski
 * Inspired form:
 *  1. https://bl.ocks.org/syntagmatic/482706e0638c67836d94b20f0cb37122
 *  2. http://bl.ocks.org/gka/17ee676dc59aa752b4e6
 *  3. http://bl.ocks.org/eesur/1a2514440351ec22f176
 */

/**  @type {dict} The margins of the plot container */
var margin = {top: 70, right: 50, bottom: 10, left: 70};
/** @type {number} The width of the plot container */
var width = document.body.clientWidth - margin.left - margin.right;
/** @type {number} The height of the plot container */
var height = 500 - margin.top - margin.bottom;
/** @type {number} The inner height used for plotting the axes */
var innerHeight = height - 2;

/**
 * @type {number}
 * Ratio of the resolution in physical pixels to the resolution in CSS pixels.
 * this tells the browser how many of the screen's actual pixels should be used
 * to draw a single CSS pixel.
 */
var devicePixelRatio = window.devicePixelRatio || 1;

/** Mapping of the company names to a color on an ordinal scale */
var color = d3.scaleOrdinal()
  .domain(["Apple", "HP", "Acer", "Asus", "Dell", "Lenovo", "Chuwi", "MSI", "Microsoft", "Toshiba", "Huawei", "Xiaomi", "Vero", "Razer", "Mediacom", "Samsung", "Google", "Fujitsu", "LG"])
  .range(["#D27F8A", "#50A9D4", "#4CFC86", "#C97D0B", "#459248", "#D26FA7", "#E1525A", "#5DB5B3", "#785D82", "#A8AF72", "#954A56", "#097AEB", "#D8197D", "#AB9E27", "#D27D4B", "#D98323", "#BA8AAD", "#35D468", "#8FF6C2"]);

/**
 * @type {dict}
 * Dictionary of the data types present in the data in order to assign one type to each dimension;
 * Each type contains the following fields:
 *  - key: the keu identifying the data type
 *  - coerce: function cast the  data to the same type
 *  - extent: the range of values that can appear
 *  - within: function to check whether a given point belongs in the range
 *  - defaultScale: the default scale used to map the values from the input domain to the given range
 */
var types = {
  "Number": {
    key: "Number",
    coerce: function(d) { return +d; }, // convert the input to number +d
    extent: d3.extent,  // return (min, max) to set in the domain
    within: function(d, extent, dim) { return extent[0] <= dim.scale(d) && dim.scale(d) <= extent[1]; },
    // use a linear function (y = m * x + b) to map the domain values to a specified and allowed range
    defaultScale: d3.scaleLinear().range([innerHeight, 0])
  },
  "String": {
    key: "String",
    coerce: String,
    extent: function (data) { return data.sort(); },  // sort alphabetically the strings to set in the domain
    within: function(d, extent, dim) { return extent[0] <= dim.scale(d) && dim.scale(d) <= extent[1]; },
    // map the domain value with one point each in the allowed range, no padding, no rounding and center alignment
    defaultScale: d3.scalePoint().range([0, innerHeight])
  }
};

/**
 * @type {dict}
 * List of dictionaries specifying every dimension to plot. Each dimension is specified with the
 * following fields:
 *  - key: specifies the key in the .csv file for that particular dimension;  it must be the same as in the .csv;
 *  - description: the  text to appear on top of the line describing that dimension
 *  - type: the type of data stored in the dimension; important to set the domain, range and scale
 * Optionally is may contain the following key:
 *  - axis: specifies how to render the axis
 * The dimensions will be plot from left to right in the order in which they are specified here.
 */
var dimensions = [
  {
    key: "Company",
    description: "Company",
    type: types["String"],
    axis: d3.axisLeft()
      .tickFormat(function(d,i) {
        return d;
      })
  },
  {
    key: "Inches",
    description: "Screen Size (Inches)",
    type: types["Number"]
  },
  {
    key: "ScreenResolution_px",
    description: "Screen Resolution (Pixels)",
    type: types["String"]
  },
  {
    key: "Ram_GB",
    description: "Ram Memory (GB)",
    type: types["Number"]
  },
  {
    key: "SSD_Memory_GB",
    description: "SSD Memory (GB)",
    type: types["Number"]
  },
  {
    key: "HDD_Memory_GB",
    description: "HDD Memory (GB)",
    type: types["Number"]
  },
  {
    key: "Cpu_Type",
    description: "CPU Model",
    type: types["String"]
  },
  {
    key: "Cpu_Frequency_GHz",
    description: "CPU Clock Rate (GHz)",
    type: types["Number"]
  },
  {
    key: "Gpu_Type",
    description: "GPU Model",
    type: types["String"]
  },
  {
    key: "Price_euros",
    description: "Price (Euros)",
    type: types["Number"]
  }
];


/** Scale for the x axis to place every parallel line */
var xscale = d3.scalePoint()  /** map every value in the domain to one point, s.t. they are equidistant */
    .domain(d3.range(dimensions.length))  /** input domain: one point per dimension */
    .range([0, width]);  /** map the points equidistantly in the range from [0, width] */

/** The default y axis to render */
var yAxis = d3.axisLeft();

/** Create a <div> container to contain the SVG and the canvas to draw the plot. */
var container = d3.select("body").append("div")
    .attr("class", "parcoords")  /** the div tag will have a class "parcoords" */
    .style("width", width + margin.left + margin.right + "px")  /** set the width of the container */
    .style("height", height + margin.top + margin.bottom + "px");  /** set the height of the container */

/** Create an SVG element with one group <g> element */
var svg = container.append("svg")
    .attr("width", width + margin.left + margin.right)  /** set the width of the SVG element */
    .attr("height", height + margin.top + margin.bottom)  /** set the height of the SVG element */
    .append("g")  /** append one group <g> element inside */
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");  /** move the <g> element along x and y axis */

/** Create a canvas element to draw the data points */
var canvas = container.append("canvas")
    .attr("width", width * devicePixelRatio)
    .attr("height", height * devicePixelRatio)
    .style("width", width + "px")
    .style("height", height + "px")
    .style("margin-top", margin.top + "px")
    .style("margin-left", margin.left + "px");

/**
 * Create data table to update it according to the selection in the Parallel Coordinates plot.
 * The table will contain the same columns as the parallel coordinates plot.
 */

/**
 * @type {list}
 * Column definitions in the table head. Each element in the array is a dictionary fully  defining one
 * column in the table. It has the following keys:
 *  - head: the text to display
 *  - cl: the class of the column, depending on the data
 *  - key: the original key in the data set
 */
var columns = [
    { head: 'Company', cl: 'title', key: 'Company' },
    { head: 'Screen Size (Inches)', cl: 'num', key: 'Inches'},
    { head: 'Screen Resolution (Pixels)', cl: 'center', key: 'ScreenResolution_px'},
    { head: 'Ram Memory (GB)', cl: 'num', key: 'Ram_GB'},
    { head: 'SSD Memory (GB)', cl: 'num', key: 'SSD_Memory_GB'},
    { head: 'HDD Memory (GB)', cl: 'num', key: 'HDD_Memory_GB'},
    { head: 'CPU Model', cl: 'center', key: 'Cpu_Type'},
    { head: 'CPU Clock Rate (GHz)', cl: 'num', key: 'Cpu_Frequency_GHz'},
    { head: 'GPU Model', cl: 'center', key: 'Gpu_Type'},
    { head: 'Price (Euros)', cl: 'num', key: 'Price_euros'}
];


/** Create a <table> element with id "grid" */
var table = d3.select("body")
            .append("table")
            .attr("id", "grid");

/** Create the table header */
table.append('thead')
    .append('tr')  /** append one row */
    .selectAll('th')  /** select all header cells */
    .data(columns)  /** attach the columns list as data */
    .enter()
    .append('th')  /** for each entry in the columns list create one <th> element */
    .attr('class', function(col){return col.cl; })  /** set the <th> element class as specified in the current column */
    .text(function(col){return col.head; });  /** display the text in the <th> element as specified in the current column */

/**
 * Get the 2D context for drawing of class CanvasRenderingContext2D.
 * Documentation for the class: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
 */
var ctx = canvas.node().getContext("2d");
ctx.globalCompositeOperation = 'darken';
ctx.globalAlpha = 0.25;  /** Set the transparency level between 0.0 and 1.0 */
ctx.lineWidth = 1.5;  /** Set the width of the line in coordinate space unit */
ctx.scale(devicePixelRatio, devicePixelRatio);  /** Scale the canvas according to the pixels */

/** Create one axis per dimension */
var axes = svg.selectAll(".axis")  /** create an axis element inside the svg tag */
    .data(dimensions)  /** bound the dimensions to the .axis element */
    .enter().append("g")  /** for each entry in the dimensions append one <g> tag in the svg */
    .attr("class", function(d) { return "axis " + d.key.replace(/ /g, "_"); })  /** the class of each <g> tag is axis_dimension_key_name */
    .attr("transform", function(d,i) { return "translate(" + xscale(i) + ")"; });  /** translate  the <g> tag to the right */


/**
 * Loads the data at the specified path and plots it. The callback function takes the loaded data.
 * @param {list} data: a list of dictionaries with a keys same as column names in the loaded .csv file
 */
d3.csv("laptops_updated.csv", function(error, data) {
  if (error) throw error;

  /**
   * Iterate through each data row.
   * @param {dict} d: one entry in the list of data points
   */
  data.forEach(function(d) {
    /**
     * Iterate through each dimension.
     * @param {dict} p: one entry in the list of dimensions
     */
    dimensions.forEach(function(p) {
      /**
       * Check if the data entry belongs to the current dimension:
       * if not belong set it null, otherwise coerce it to the specified type;
      */
      d[p.key] = !d[p.key] ? null : p.type.coerce(d[p.key]);
    });
  });

  /**
   * Iterate through each dimension and set domain and scale.
   * Every dimension appears as one line and needs a domain and a scale that knows
   * how to map, i.e. how to transform the input from the domain as an output that
   * appears in the final plot.
   * @param {dict} dim: one entry in the list of dimensions
   */
  dimensions.forEach(function(dim) {
    /** If the current dimension does not define its own input domain */
    if (!("domain" in dim)) {
      /** set domain using dimension type's extent function */
      dim.domain = d3_functor(dim.type.extent)(data.map(function(d) { return d[dim.key]; }));
    }
    /** If the current dimension does not define its own scale */
    if (!("scale" in dim)) {
      /** use dimension type's default scale */
      dim.scale = dim.type.defaultScale.copy();
    }
    dim.scale.domain(dim.domain);
  });

  /**
   * Draw 30 data entries each frame asynchronously.
   * @param {function} draw: function defined below that knows how to draw one data point
   */
  var render = renderQueue(draw).rate(30);

  ctx.clearRect(0,0,width,height); /** erase the pixels in a rectangular area */
  ctx.globalAlpha = d3.min([1.15/Math.pow(data.length,0.3),1]); /** set the transparency according to how much data is selected */
  render(data);  /** render the selected data by calling the 'draw' function */

  /** Render each axis associated with one dimension */
  axes.append("g")
    .each(function(d) {
        var renderAxis = "axis" in d ? d.axis.scale(d.scale) : yAxis.scale(d.scale); /** custom or default axis */
        d3.select(this).call(renderAxis);
    })
    .append("text")
    .attr("class", "title")
    .attr("text-anchor", "start")
    .text(function(d) { return "description" in d ? d.description : d.key; });

  /** Add and store a brush for each axis. */
  axes.append("g")
      .attr("class", "brush")
      .each(function(d) {
        d3.select(this).call(d.brush = d3.brushY()
          .extent([[-10,0], [10,height]])
          .on("start", brushstart)
          .on("brush", brush)
          .on("end", brush)
        )
      })
    .selectAll("rect")
    .attr("x", -8)
    .attr("width", 16);

  /** Set the colors for the axis representing the companies */
  d3.selectAll(".axis.Company .tick text")
    .style("fill", color);

  /** Create the table body */
  var tbody = table.append('tbody')
    .selectAll('tr')  /** Select all rows in the table's body */
    .data(data.sort(function(d1, d2){  /** sort the data in ascending order according to the price */
        return d3.ascending(d1['Price_euros'], d2['Price_euros']);
    }).slice(0, 5))  /** select the first five entries with lowest price */
    .enter()
    .append('tr')  /** for each of the 5 selected data entries create one row */
    .selectAll('td')  /** select all cells in the created rows */
    .data(function(row, i) {  /** insert data in each cell in the rows, @param {dict} row: selected data entry */
        return columns.map(function(c) {  /** map every entry in the list of columns, @param {dict} c: column specification */
            /** compute cell values for this specific row */
            var cell = {};
            d3.keys(c).forEach(function(k) {  /** iterate over the keys of the current column,  @param {string} k: key */
                cell[k] = k == 'key' ? row[c[k]] : c[k];  /** if specifying the content of the cell or something else */
            });
            return cell;
        });
    }).enter()
    .append('td')  /** for each of the selected data entries create one table cell */
    .html(function(cell){ return cell.key; })
    .attr('class', function(cell){ return cell.cl; });

  /**
   * Project a data entry to the corresponding dimension.
   * @param {dict} d: one data entry
   * @return {list} (x, y) coordinates for each dimension in the input  data entry
   */
  function project(d) {
    /**
     * Run the callback function on every element in the list
     * @param {dict} p: one element in the list
     * @param {number} i: the index of the element
     */
    return dimensions.map(function(p,i) {
      /** check if the data element d has the current dimension key and contains a value */
      if (!(p.key in d) || d[p.key] === null) return null;
      return [xscale(i),p.scale(d[p.key])];
    });
  };

  /**
   * Function to draw one data entry as a poly-line across the parallel axes.
   * @param {dict} d: one data entry
   */
  function draw(d) {
    ctx.strokeStyle = color(d.Company);  /** Set the color of the poly-line */
    ctx.beginPath();  /** Start a new path by emptying the list of sub-paths */
    var coords = project(d);  /** Take the (x, y) coordinates for each dimension of the current data point */

    /**
     * Drawing the poly-line following the coordinates.
     * @param {list} p: (x, y) coordinates for each element in the data point
     * @param {number} i: the index of the element
     */
    coords.forEach(function(p,i) {
      /** Initialize the line for the first element */
      if (i == 0) {
        ctx.moveTo(p[0],p[1]);  /** Begin a new sub-path at the specified point */
        return;
      }

      ctx.lineTo(p[0],p[1]);  /** Connect the sub-path's last point to the specified point */
    });

    ctx.stroke(); /**  Stroke the current path with the current stroke style */
  }

  /** Event listener to activate the brush */
  function brushstart() {
    d3.event.sourceEvent.stopPropagation();
  }

  /**
   * Handles a brush event, toggling the display of foreground lines and updates the table.
   */
  function brush() {
    render.invalidate(); /**  stop rendering the data points */

    /** Select the axis with an active brush on them */
    var actives = [];
    svg.selectAll(".axis .brush")
      .filter(function(d) {
        return d3.brushSelection(this);
      })
      .each(function(d) {
        actives.push({
          dimension: d,
          extent: d3.brushSelection(this)
        });
      });

    /** Get the selected data */
    var selected = data.filter(function(d) {
      if (actives.every(function(active) {
          var dim = active.dimension;
          /** test if point is within extents for each active brush */
          return dim.type.within(d[dim.key], active.extent, dim);
        })) {
        return true;
      }
    });

    /** Draw only the selected lines */
    ctx.clearRect(0,0,width,height);  /** erase the pixels in a rectangular area */
    ctx.globalAlpha = d3.min([0.85/Math.pow(selected.length,0.3),1]);  /** set the transparency according to how much data is selected */
    render(selected);  /** render the selected data by calling the 'draw' function */

    /** Update the table */
    var rows = table.selectAll('tbody tr')
      .data(selected.sort(function(d1, d2){
        return d3.ascending(d1['Price_euros'], d2['Price_euros']);
      }).slice(0, 5));

    var cells = rows.selectAll('td')
      .data(function(row, i) {
        return columns.map(function(c) {
            // compute cell values for this specific row
            var cell = {};
            d3.keys(c).forEach(function(k) {
                cell[k] = k == 'key' ? row[c[k]] : c[k];
            });
            return cell;
        });
    }).html(function(cell){ return cell.key; })
    .attr('class', function(cell){ return cell.cl; });

   /** Insert the new data */
   cells.enter()
    .append("td")
    .html(function(cell) { return cell.key; });

   /** Remove the absent data */
   cells.exit().remove();

  }
});

function d3_functor(v) {
  return typeof v === "function" ? v : function() { return v; };
};