Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Documentation for Parallel Categories trace type #1096

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Nov 7, 2018
Merged

Documentation for Parallel Categories trace type #1096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
83432b0
Added initial Parallel Categories documentation
Sep 18, 2018
9c495d6
Added initial parcats python documentation
Sep 25, 2018
8d3b7fe
python updates
Nov 2, 2018
3a932ee
Review python parcats docs and update dataset locations
jonmmease Nov 6, 2018
5d56304
Review/update Plotly.js pages
jonmmease Nov 6, 2018
eec633f
Moved GIFs to githubusercontent url
jonmmease Nov 6, 2018
d242078
Final review
jonmmease Nov 6, 2018
43aa838
Review updates:
jonmmease Nov 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions _posts/plotly_js/statistical/parcats/2018-09-17-basic-parcats-counts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
name: Basic Parallel Categories Diagram with Counts
plot_url: https://codepen.io/plotly/embed/yQNbxy/?height=601&theme-id=15263&default-tab=result
arrangement: horizontal
language: plotly_js
suite: parcats
order: 2
sitemap: false
markdown_content: |
If the frequency of occurrence for each combination of attributes is known in advance, this can be specified using
the `counts` property
---
var trace1 = {
type: 'parcats',
dimensions: [
{label: 'Hair',
values: ['Black', 'Brown', 'Brown', 'Brown', 'Red']},
{label: 'Eye',
values: ['Brown', 'Brown', 'Brown', 'Blue', 'Blue']},
{label: 'Sex',
values: ['Female', 'Male', 'Female', 'Male', 'Male']}],
counts: [6, 10, 40, 23, 7]
};

var data = [ trace1 ];

var layout = {width: 600};

Plotly.newPlot('myDiv', data, layout);
45 changes: 45 additions & 0 deletions _posts/plotly_js/statistical/parcats/2018-09-17-basic-parcats.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
name: Basic Parallel Categories Diagram
plot_url: https://codepen.io/plotly/embed/KrpmQO/?height=601&theme-id=15263&default-tab=result
arrangement: horizontal
language: plotly_js
suite: parcats
order: 1
sitemap: false
markdown_content: |
The parallel categories diagram is a visualization of multi-dimensional categorical data sets. Each variable in
the data set is represented by a column of rectangles, where each rectangle corresponds to a discrete value
taken on by that variable. The relative heights of the rectangles reflect the relative frequency of occurrence of
the corresponding value.

Combinations of category rectangles across dimensions are connected by ribbons, where the height of the ribbon
corresponds to the relative frequency of occurrence of the combination of categories in the data set.

In this example, we visualize the hair color, eye color, and sex of a sample of 8 people. Hovering over a
category rectangle displays a tooltip with the number of people with that single trait. Hovering over a ribbon
in the diagram displays a tooltip with the number of people with a particular combination of the three
traits connected by the ribbon.

The dimension labels can be dragged horizontally to reorder the dimensions and the category rectangles can be
dragged vertically to reorder the categories within a dimension.
---
var trace1 = {
type: 'parcats',
dimensions: [
{label: 'Hair',
values: ['Black', 'Black', 'Black', 'Brown',
'Brown', 'Brown', 'Red', 'Brown']},
{label: 'Eye',
values: ['Brown', 'Brown', 'Brown', 'Brown',
'Brown', 'Blue', 'Blue', 'Blue']},
{label: 'Sex',
values: ['Female', 'Female', 'Female', 'Male',
'Female', 'Male', 'Male', 'Male']}]
};

var data = [ trace1 ];

var layout = {width: 600};

Plotly.newPlot('myDiv', data, layout);

101 changes: 101 additions & 0 deletions _posts/plotly_js/statistical/parcats/2018-09-17-brushing-parcats.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
---
name: Parallel Categories Linked Brushing
plot_url: https://codepen.io/plotly/embed/jQPmXN/?height=801&theme-id=15263&default-tab=result
arrangement: horizontal
language: plotly_js
suite: parcats
order: 4
sitemap: false
markdown_content: |
This example demonstrates how the `plotly_selected` and `plotly_click` events can be used to implement linked
brushing between 3 categorical dimensions displayed with a `parcats` trace and 2 continuous dimensions displayed
with a `scatter` trace.

This example also sets the `line.shape` property to `hspline` to cause the ribbons to curve between categories.
---
var gd = document.getElementById('myDiv');
var categoricalDimensionLabels = [
'body-style',
'drive-wheels',
'fuel-type'
];

Plotly.d3.csv(
'https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv',
function(carsData) {
// Preprocess Data
var mpg = carsData.map(function(row) { return row['highway-mpg'] });
var horsepower = carsData.map(function(row) { return row['horsepower'] });

var categoricalDimensions = categoricalDimensionLabels.map(
function(dimLabel) {
// Extract column
var values = carsData.map(function(row) {
return row[dimLabel]
});

return {
values: values,
label: dimLabel
};
});

// Colors
var color = new Int8Array(carsData.length);
var colorscale = [[0, 'gray'], [1, 'firebrick']];

// Layout
var layout = {
width: 600,
height: 800,
xaxis: {title: 'Horsepower'},
yaxis: {domain: [0.6, 1], title: 'MPG'},
dragmode: 'lasso',
hovermode: 'closest'
};

// Build Traces
var traces = [
{type: 'scatter',
x: horsepower,
y: mpg,
marker: {color: 'gray'},
mode: 'markers',
selected: {'marker': {'color': 'firebrick'}},
unselected: {'marker': {'opacity': 0.3}}
},
{type: 'parcats',
domain: {y: [0, 0.4]},
dimensions:categoricalDimensions,
line: {
colorscale: colorscale,
cmin: 0,
cmax: 1,
color: color,
shape: 'hspline'},
labelfont: {size: 14}
}
];

// Make plot
Plotly.newPlot(gd, traces, layout);

// Update color on selection and click
var update_color = function(points_data) {
var new_color = new Int8Array(carsData.length);
var selection = []
for(var i = 0; i < points_data.points.length; i++) {
new_color[points_data.points[i].pointNumber] = 1;
selection.push(points_data.points[i].pointNumber);
}

// Update selected points in scatter plot
Plotly.restyle(gd, {'selectedpoints': [selection]}, 0)

// Update color of selected paths in parallel categories diagram
Plotly.restyle(gd, {'line.color': [new_color]}, 1)
};

gd.on('plotly_selected', update_color);
gd.on('plotly_click', update_color);
});
109 changes: 109 additions & 0 deletions _posts/plotly_js/statistical/parcats/2018-09-17-multi-brushing-parcats.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
---
name: Parallel Categories with Multi-Color Linked Brushing
plot_url: https://codepen.io/plotly/embed/EOjmrW/?height=801&theme-id=15263&default-tab=result
arrangement: horizontal
language: plotly_js
suite: parcats
order: 5
sitemap: false
markdown_content: |
This example extends the previous example to support brushing with multiple colors. The radio buttons above may
be used to select the active color, and this color will be applied when points are selected in the `scatter`
trace and when categories or ribbons are clicked in the `parcats` trace.
---
var gd = document.getElementById('myDiv');
var categoricalDimensionLabels = [
'body-style',
'drive-wheels',
'fuel-type'
];

Plotly.d3.csv(
'https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv',
function(carsData) {
// Preprocess Data
var mpg = carsData.map(function(row) { return row['highway-mpg'] });
var horsepower = carsData.map(function(row) { return row['horsepower'] });

var categoricalDimensions = categoricalDimensionLabels.map(
function(dimLabel) {
// Extract column
var values = carsData.map(function(row) {
return row[dimLabel]
});

return {
values: values,
label: dimLabel
};
}
);

// Colors
var color = new Int8Array(carsData.length);
var colorscale = [[0, 'gray'], [0.33, 'gray'],
[0.33, 'firebrick'], [0.66, 'firebrick'],
[0.66, 'blue'], [1.0, 'blue']];

// Layout
var layout = {
width: 600,
height: 800,
xaxis: {title: 'Horsepower'},
yaxis: {domain: [0.6, 1], title: 'MPG'},
dragmode: 'lasso',
hovermode: 'closest'
};

// Build Traces
var traces = [
{type: 'scatter',
x: horsepower,
y: mpg,
marker: {color: color,
colorscale: colorscale,
cmin: -0.5,
cmax: 2.5,
showscale: true,
colorbar: {tickvals: [0, 1, 2],
ticktext: ['None', 'Red', 'Blue']}},
mode: 'markers',
},
{type: 'parcats',
domain: {y: [0, 0.4]},
dimensions:categoricalDimensions,
line: {
colorscale: colorscale,
cmin: -0.5,
cmax: 2.5,
color: color,
shape: 'hspline'},
labelfont: {size: 14}
}
];

// Make plot
Plotly.newPlot(gd, traces, layout);

// Update color on selection and click
var update_color = function(points_data) {
var new_color = color;
var color_value = document.querySelector('input[name="rate"]:checked').value;
console.log(color_value);
var selection = []
for(var i = 0; i < points_data.points.length; i++) {
new_color[points_data.points[i].pointNumber] = color_value;
selection.push(points_data.points[i].pointNumber);
}

// Update selected points in scatter plot
Plotly.restyle(gd, {'marker.color': [new_color]}, 0)

// Update color of selected paths in parallel categories diagram
Plotly.restyle(gd,
{'line.color': [new_color]}, 1)
};

gd.on('plotly_selected', update_color);
gd.on('plotly_click', update_color);
});
14 changes: 14 additions & 0 deletions _posts/plotly_js/statistical/parcats/2018-09-17-parcats_plotly_js_index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
title: Javascript Graphing Library Parallel Categories Diagram | Examples | Plotly
name: Parallel Categories Diagram
permalink: javascript/parallel-categories-diagram/
description: How to make parallel categories diagrams in JavaScript
layout: user-guide
thumbnail: thumbnail/parcats.jpg
language: plotly_js
has_thumbnail: true
display_as: statistical
order: 11
---
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","parcats" | sort: "order" %}
{% include auto_examples.html examples=examples %}
66 changes: 66 additions & 0 deletions _posts/plotly_js/statistical/parcats/2018-09-17-titanic-parcats.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
name: Mutli-Color Parallel Categories Diagram
plot_url: https://codepen.io/plotly/embed/BGNRqM/?height=601&theme-id=15263&default-tab=result
arrangement: horizontal
language: plotly_js
suite: parcats
order: 3
sitemap: false
markdown_content: |
The color of the ribbons can be specified with the `line.color` property. Similar to other trace types, this
property may be set to an array of numbers, which are then mapped to colors according to the the colorscale
specified in the `line.colorscale` property.

Here is an example of visualizing the survival rate of passengers in the titanic dataset, where the ribbons are
colored based on survival outcome.

By setting the `hoveron` property to `'color'` and the `hoverinfo` property to `'count+probability'` the tooltips
now display count and probability information for each color (outcome) per category.

By setting the `arrangement` property to `'freeform'` it is now possible to drag categories horizontally to
reorder dimensions as well as vertically to reorder categories within the dimension.
---
var gd = document.getElementById('myDiv');

Plotly.d3.csv(
"https://raw.githubusercontent.com/plotly/datasets/master/titanic.csv",
function(titanicData) {
var classDim = {
values: titanicData.map(function(row) {return row['Pclass']}),
categoryorder: 'category ascending',
label: "Class"
};

var genderDim = {
values: titanicData.map(function(row) {return row['Sex']}),
label: "Gender"
};

var survivalDim = {
values: titanicData.map(function(row) {return row['Survived']}),
label: "Outcome",
categoryarray: [0, 1],
ticktext: ['perished', 'survived'],
};

var color = survivalDim.values;
var colorscale = [[0, 'lightsteelblue'], [1, 'mediumseagreen']];

// Build Traces
var traces = [
{type: 'parcats',
dimensions: [classDim, genderDim, survivalDim],
line: {color: color,
colorscale: colorscale},
hoveron: 'color',
hoverinfo: 'count+probability',
labelfont: {size: 14},
arrangement: 'freeform'
}
];

var layout = {width: 600};

// Make plot
Plotly.newPlot(gd, traces, layout);
});
Loading