D3 Examples - Parallel Coordinates w/ Filters

Parallel Coordinates

This is the parallel dex.js coordinates visualization. There are a large number of configuration options for this visual. Most notable are:

Configuration

Data Filters - Allows the user to narrow data down to that which is of interest.
GUI Configuration - Various GUI configuration options.

The labels are sized in accordance to the available space. This might change in later versions, however, the labels to the left and rightmost axis infringe on the margins. Configure a larger margin to accommodate them.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <style>
        html, body, #Chart {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }
​
        #Chart {
            display: inline-block;
        }
​
    </style>
    <title>Parallel Coordinates</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
    <link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
    <link rel="stylesheet" href="https://dexjs.net/js/dex.css">
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://dexjs.net/js/dex-jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://dexjs.net/js/dex-bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://dexjs.net/js/dex-libs.js"></script>
    <script src="https://dexjs.net/js/dex.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/faker/3.1.0/faker.min.js"></script>
</head>
<body>
​
<div class="ui-layout-center">
    <div id="Chart"></div>
</div>
<div class="ui-layout-west">
    <div id="ConfigurationPane"></div>
</div>
​
<script>
  d3.csv("presidents.csv", function (error, data) {
    var presidents = new dex.csv(data);
    // Configure a chart.
    var chart = dex.charts.d3.ParallelCoordinates({
      'parent': '#Chart',
      'csv': presidents
    });
​
    $(document).ready(function () {
      $('body').layout({
        applyDemoStyles: false,
        west: {
          size: 335
        },
        onresize: function () {
          chart.resize();
        }
      });
​
      chart.render();
​
      var configPane = dex.ui.ConfigurationPane({
        "parent": "#ConfigurationPane",
        "csv": presidents,
        "components": [chart]
      }).render();
    });
  });
</script>
</body>
</html>
​
    