Skip to content

Instantly share code, notes, and snippets.



Last active Aug 7, 2017
What would you like to do?
Parallel Coordinates
license: mit

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.


<!DOCTYPE html>
html, body, #Chart {
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
#Chart {
display: inline-block;
<title>Parallel Coordinates</title>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href=""/>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<div class="ui-layout-center">
<div id="Chart"></div>
<div class="ui-layout-west">
<div id="ConfigurationPane"></div>
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 () {
applyDemoStyles: false,
west: {
size: 335
onresize: function () {
var configPane = dex.ui.ConfigurationPane({
"parent": "#ConfigurationPane",
"csv": presidents,
"components": [chart]
Presidency President Party Home State
1 George Washington Independent Virginia
2 John Adams Federalist Massachusetts
3 Thomas Jefferson Dem/Rep Virginia
4 James Madison Dem/Rep Virginia
5 James Monroe Dem/Rep Virginia
6 John Quincy Adams Dem-Rep/Nat-Rep Massachusetts
7 Andrew Jackson Democratic Tennessee
8 Martin Van Buren Democratic New York
9 William Henry Harrison Whig Ohio
10 John Tyler Whig Virginia
11 James K. Polk Democratic Tennessee
12 Zachary Taylor Whig Louisiana
13 Millard Fillmore Whig New York
14 Franklin Pierce Democratic New Hampshire
15 James Buchanan Democratic Pennsylvania
16 Abraham Lincoln Rep/Nat Union Illinois
17 Andrew Johnson Dem/Nat Union Tennessee
18 Ulysses S. Grant Republican Ohio
19 Rutherford B. Hayes Republican Ohio
20 James A. Garfield Republican Ohio
21 Chester A. Arthur Republican New York
22 Grover Cleveland Democratic New York
23 Benjamin Harrison Republican Indiana
24 Grover Cleveland (2nd term) Democratic New York
25 William McKinley Republican Ohio
26 Theodore Roosevelt Republican New York
27 William Howard Taft Republican Ohio
28 Woodrow Wilson Democratic New Jersey
29 Warren G. Harding Republican Ohio
30 Calvin Coolidge Republican Massachusetts
31 Herbert Hoover Republican Iowa
32 Franklin D. Roosevelt Democratic New York
33 Harry S. Truman Democratic Missouri
34 Dwight D. Eisenhower Republican Texas
35 John F. Kennedy Democratic Massachusetts
36 Lyndon B. Johnson Democratic Texas
37 Richard Nixon Republican California
38 Gerald Ford Republican Michigan
39 Jimmy Carter Democratic Georgia
40 Ronald Reagan Republican California
41 George H. W. Bush Republican Texas
42 Bill Clinton Democratic Arkansas
43 George W. Bush Republican Texas
44 Barack Obama Democratic Illinois
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment