Skip to content

Instantly share code, notes, and snippets.

@PatMartin

PatMartin/.block

Last active August 7, 2017 02:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PatMartin/bd69dbae7df498e0218c4d0e5cb3342a to your computer and use it in GitHub Desktop.
Save PatMartin/bd69dbae7df498e0218c4d0e5cb3342a to your computer and use it in GitHub Desktop.
Download ZIP
PC2Chord
Raw
.block
license: mit
Raw
README.md

Data Driven Parallel Coordinates to Chord Diagram

This example is interesting in a couple of ways.

First, it demonstrates the ability of dex.js to construct charts from data. This construction can include interactions as well.

Secondly, the interaction itself is interesting. By selecting the axis on the parallel coordinates chart the chord diagram is updated showing the relationships of the selected data.

dex.create

The dex.create method takes a json specification and constructs the components it describes but does not render them.

dex.render

The dex.render method takes a json specification, constructs and renders it. An array of constructed components is returned.

References

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
#ParallelCoordinatesParent, #ChordParent {
display: inline-block;
height: 100%;
min-height: 100%;
width: 49%;
min-width: 49%;
}
</style>
<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">
<body>
<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>
<div id="ParallelCoordinatesParent"></div>
<div id="ChordParent"></div>
<script>
d3.csv("presidents.csv", function(error, data) {
// Converting from d3's json-csv to dex-csv
var csv = new dex.csv(data);
// Create interactive components from json data.
var components = dex.render({
"components": [
{
"name": "PC",
"class": "dex.charts.d3.ParallelCoordinates",
"config": {
"parent": "#ParallelCoordinatesParent",
"margin": {"top": 40, "bottom": 30, "left": 50, "right": 50},
"csv": csv
}
},
{
"name": "Chord",
"class": "dex.charts.d3.Chord",
"config": {
"parent": "#ChordParent",
'margin': {'top': 10, 'bottom': 20, 'left': 10, 'right': 10},
"csv": csv
}
}
],
"interactions": [{
"sources": ["PC"],
"destinations": ["Chord"],
"event": "select",
"action": "setSelected"
}]
});
});
</script>
Raw
presidents.csv
President Party Home State
George Washington Independent Virginia
John Adams Federalist Massachusetts
Thomas Jefferson Dem/Rep Virginia
James Madison Dem/Rep Virginia
James Monroe Dem/Rep Virginia
John Quincy Adams Dem-Rep/Nat-Rep Massachusetts
Andrew Jackson Democratic Tennessee
Martin Van Buren Democratic New York
William Henry Harrison Whig Ohio
John Tyler Whig Virginia
James K. Polk Democratic Tennessee
Zachary Taylor Whig Louisiana
Millard Fillmore Whig New York
Franklin Pierce Democratic New Hampshire
James Buchanan Democratic Pennsylvania
Abraham Lincoln Rep/Nat Union Illinois
Andrew Johnson Dem/Nat Union Tennessee
Ulysses S. Grant Republican Ohio
Rutherford B. Hayes Republican Ohio
James A. Garfield Republican Ohio
Chester A. Arthur Republican New York
Grover Cleveland Democratic New York
Benjamin Harrison Republican Indiana
Grover Cleveland (2nd term) Democratic New York
William McKinley Republican Ohio
Theodore Roosevelt Republican New York
William Howard Taft Republican Ohio
Woodrow Wilson Democratic New Jersey
Warren G. Harding Republican Ohio
Calvin Coolidge Republican Massachusetts
Herbert Hoover Republican Iowa
Franklin D. Roosevelt Democratic New York
Harry S. Truman Democratic Missouri
Dwight D. Eisenhower Republican Texas
John F. Kennedy Democratic Massachusetts
Lyndon B. Johnson Democratic Texas
Richard Nixon Republican California
Gerald Ford Republican Michigan
Jimmy Carter Democratic Georgia
Ronald Reagan Republican California
George H. W. Bush Republican Texas
Bill Clinton Democratic Arkansas
George W. Bush Republican Texas
Barack Obama Democratic Illinois
Donald Trump Republican New York
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment