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

Skip to content

Commit fdae51f

Browse files
jonmmeasejonmmease
authored
Documentation for Parallel Categories trace type (plotly#1096)
* Added Parallel Categories Diagram documentation page for the JavaScript and Python APIs
1 parent 4909944 commit fdae51f

8 files changed

+2343
-0
lines changed

‎_posts/plotly_js/statistical/parcats/2018-09-17-basic-parcats-counts.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
name: Basic Parallel Categories Diagram with Counts
3+
plot_url: https://codepen.io/plotly/embed/yQNbxy/?height=601&theme-id=15263&default-tab=result
4+
arrangement: horizontal
5+
language: plotly_js
6+
suite: parcats
7+
order: 2
8+
sitemap: false
9+
markdown_content: |
10+
If the frequency of occurrence for each combination of attributes is known in advance, this can be specified using
11+
the `counts` property
12+
---
13+
var trace1 = {
14+
type: 'parcats',
15+
dimensions: [
16+
{label: 'Hair',
17+
values: ['Black', 'Brown', 'Brown', 'Brown', 'Red']},
18+
{label: 'Eye',
19+
values: ['Brown', 'Brown', 'Brown', 'Blue', 'Blue']},
20+
{label: 'Sex',
21+
values: ['Female', 'Male', 'Female', 'Male', 'Male']}],
22+
counts: [6, 10, 40, 23, 7]
23+
};
24+
25+
var data = [ trace1 ];
26+
27+
var layout = {width: 600};
28+
29+
Plotly.newPlot('myDiv', data, layout);

‎_posts/plotly_js/statistical/parcats/2018-09-17-basic-parcats.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
name: Basic Parallel Categories Diagram
3+
plot_url: https://codepen.io/plotly/embed/KrpmQO/?height=601&theme-id=15263&default-tab=result
4+
arrangement: horizontal
5+
language: plotly_js
6+
suite: parcats
7+
order: 1
8+
sitemap: false
9+
markdown_content: |
10+
The parallel categories diagram is a visualization of multi-dimensional categorical data sets. Each variable in
11+
the data set is represented by a column of rectangles, where each rectangle corresponds to a discrete value
12+
taken on by that variable. The relative heights of the rectangles reflect the relative frequency of occurrence of
13+
the corresponding value.
14+
15+
Combinations of category rectangles across dimensions are connected by ribbons, where the height of the ribbon
16+
corresponds to the relative frequency of occurrence of the combination of categories in the data set.
17+
18+
In this example, we visualize the hair color, eye color, and sex of a sample of 8 people. Hovering over a
19+
category rectangle displays a tooltip with the number of people with that single trait. Hovering over a ribbon
20+
in the diagram displays a tooltip with the number of people with a particular combination of the three
21+
traits connected by the ribbon.
22+
23+
The dimension labels can be dragged horizontally to reorder the dimensions and the category rectangles can be
24+
dragged vertically to reorder the categories within a dimension.
25+
---
26+
var trace1 = {
27+
type: 'parcats',
28+
dimensions: [
29+
{label: 'Hair',
30+
values: ['Black', 'Black', 'Black', 'Brown',
31+
'Brown', 'Brown', 'Red', 'Brown']},
32+
{label: 'Eye',
33+
values: ['Brown', 'Brown', 'Brown', 'Brown',
34+
'Brown', 'Blue', 'Blue', 'Blue']},
35+
{label: 'Sex',
36+
values: ['Female', 'Female', 'Female', 'Male',
37+
'Female', 'Male', 'Male', 'Male']}]
38+
};
39+
40+
var data = [ trace1 ];
41+
42+
var layout = {width: 600};
43+
44+
Plotly.newPlot('myDiv', data, layout);
45+

‎_posts/plotly_js/statistical/parcats/2018-09-17-brushing-parcats.html

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
name: Parallel Categories Linked Brushing
3+
plot_url: https://codepen.io/plotly/embed/jQPmXN/?height=801&theme-id=15263&default-tab=result
4+
arrangement: horizontal
5+
language: plotly_js
6+
suite: parcats
7+
order: 4
8+
sitemap: false
9+
markdown_content: |
10+
This example demonstrates how the `plotly_selected` and `plotly_click` events can be used to implement linked
11+
brushing between 3 categorical dimensions displayed with a `parcats` trace and 2 continuous dimensions displayed
12+
with a `scatter` trace.
13+
14+
This example also sets the `line.shape` property to `hspline` to cause the ribbons to curve between categories.
15+
---
16+
var gd = document.getElementById('myDiv');
17+
var categoricalDimensionLabels = [
18+
'body-style',
19+
'drive-wheels',
20+
'fuel-type'
21+
];
22+
23+
Plotly.d3.csv(
24+
'https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv',
25+
function(carsData) {
26+
// Preprocess Data
27+
var mpg = carsData.map(function(row) { return row['highway-mpg'] });
28+
var horsepower = carsData.map(function(row) { return row['horsepower'] });
29+
30+
var categoricalDimensions = categoricalDimensionLabels.map(
31+
function(dimLabel) {
32+
// Extract column
33+
var values = carsData.map(function(row) {
34+
return row[dimLabel]
35+
});
36+
37+
return {
38+
values: values,
39+
label: dimLabel
40+
};
41+
});
42+
43+
// Colors
44+
var color = new Int8Array(carsData.length);
45+
var colorscale = [[0, 'gray'], [1, 'firebrick']];
46+
47+
// Layout
48+
var layout = {
49+
width: 600,
50+
height: 800,
51+
xaxis: {title: 'Horsepower'},
52+
yaxis: {domain: [0.6, 1], title: 'MPG'},
53+
dragmode: 'lasso',
54+
hovermode: 'closest'
55+
};
56+
57+
// Build Traces
58+
var traces = [
59+
{type: 'scatter',
60+
x: horsepower,
61+
y: mpg,
62+
marker: {color: 'gray'},
63+
mode: 'markers',
64+
selected: {'marker': {'color': 'firebrick'}},
65+
unselected: {'marker': {'opacity': 0.3}}
66+
},
67+
{type: 'parcats',
68+
domain: {y: [0, 0.4]},
69+
dimensions:categoricalDimensions,
70+
line: {
71+
colorscale: colorscale,
72+
cmin: 0,
73+
cmax: 1,
74+
color: color,
75+
shape: 'hspline'},
76+
labelfont: {size: 14}
77+
}
78+
];
79+
80+
// Make plot
81+
Plotly.newPlot(gd, traces, layout);
82+
83+
// Update color on selection and click
84+
var update_color = function(points_data) {
85+
var new_color = new Int8Array(carsData.length);
86+
var selection = []
87+
for(var i = 0; i < points_data.points.length; i++) {
88+
new_color[points_data.points[i].pointNumber] = 1;
89+
selection.push(points_data.points[i].pointNumber);
90+
}
91+
92+
// Update selected points in scatter plot
93+
Plotly.restyle(gd, {'selectedpoints': [selection]}, 0)
94+
95+
// Update color of selected paths in parallel categories diagram
96+
Plotly.restyle(gd, {'line.color': [new_color]}, 1)
97+
};
98+
99+
gd.on('plotly_selected', update_color);
100+
gd.on('plotly_click', update_color);
101+
});

‎_posts/plotly_js/statistical/parcats/2018-09-17-multi-brushing-parcats.html

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
name: Parallel Categories with Multi-Color Linked Brushing
3+
plot_url: https://codepen.io/plotly/embed/EOjmrW/?height=801&theme-id=15263&default-tab=result
4+
arrangement: horizontal
5+
language: plotly_js
6+
suite: parcats
7+
order: 5
8+
sitemap: false
9+
markdown_content: |
10+
This example extends the previous example to support brushing with multiple colors. The radio buttons above may
11+
be used to select the active color, and this color will be applied when points are selected in the `scatter`
12+
trace and when categories or ribbons are clicked in the `parcats` trace.
13+
---
14+
var gd = document.getElementById('myDiv');
15+
var categoricalDimensionLabels = [
16+
'body-style',
17+
'drive-wheels',
18+
'fuel-type'
19+
];
20+
21+
Plotly.d3.csv(
22+
'https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv',
23+
function(carsData) {
24+
// Preprocess Data
25+
var mpg = carsData.map(function(row) { return row['highway-mpg'] });
26+
var horsepower = carsData.map(function(row) { return row['horsepower'] });
27+
28+
var categoricalDimensions = categoricalDimensionLabels.map(
29+
function(dimLabel) {
30+
// Extract column
31+
var values = carsData.map(function(row) {
32+
return row[dimLabel]
33+
});
34+
35+
return {
36+
values: values,
37+
label: dimLabel
38+
};
39+
}
40+
);
41+
42+
// Colors
43+
var color = new Int8Array(carsData.length);
44+
var colorscale = [[0, 'gray'], [0.33, 'gray'],
45+
[0.33, 'firebrick'], [0.66, 'firebrick'],
46+
[0.66, 'blue'], [1.0, 'blue']];
47+
48+
// Layout
49+
var layout = {
50+
width: 600,
51+
height: 800,
52+
xaxis: {title: 'Horsepower'},
53+
yaxis: {domain: [0.6, 1], title: 'MPG'},
54+
dragmode: 'lasso',
55+
hovermode: 'closest'
56+
};
57+
58+
// Build Traces
59+
var traces = [
60+
{type: 'scatter',
61+
x: horsepower,
62+
y: mpg,
63+
marker: {color: color,
64+
colorscale: colorscale,
65+
cmin: -0.5,
66+
cmax: 2.5,
67+
showscale: true,
68+
colorbar: {tickvals: [0, 1, 2],
69+
ticktext: ['None', 'Red', 'Blue']}},
70+
mode: 'markers',
71+
},
72+
{type: 'parcats',
73+
domain: {y: [0, 0.4]},
74+
dimensions:categoricalDimensions,
75+
line: {
76+
colorscale: colorscale,
77+
cmin: -0.5,
78+
cmax: 2.5,
79+
color: color,
80+
shape: 'hspline'},
81+
labelfont: {size: 14}
82+
}
83+
];
84+
85+
// Make plot
86+
Plotly.newPlot(gd, traces, layout);
87+
88+
// Update color on selection and click
89+
var update_color = function(points_data) {
90+
var new_color = color;
91+
var color_value = document.querySelector('input[name="rate"]:checked').value;
92+
console.log(color_value);
93+
var selection = []
94+
for(var i = 0; i < points_data.points.length; i++) {
95+
new_color[points_data.points[i].pointNumber] = color_value;
96+
selection.push(points_data.points[i].pointNumber);
97+
}
98+
99+
// Update selected points in scatter plot
100+
Plotly.restyle(gd, {'marker.color': [new_color]}, 0)
101+
102+
// Update color of selected paths in parallel categories diagram
103+
Plotly.restyle(gd,
104+
{'line.color': [new_color]}, 1)
105+
};
106+
107+
gd.on('plotly_selected', update_color);
108+
gd.on('plotly_click', update_color);
109+
});

‎_posts/plotly_js/statistical/parcats/2018-09-17-parcats_plotly_js_index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Javascript Graphing Library Parallel Categories Diagram | Examples | Plotly
3+
name: Parallel Categories Diagram
4+
permalink: javascript/parallel-categories-diagram/
5+
description: How to make parallel categories diagrams in JavaScript
6+
layout: user-guide
7+
thumbnail: thumbnail/parcats.jpg
8+
language: plotly_js
9+
has_thumbnail: true
10+
display_as: statistical
11+
order: 11
12+
---
13+
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","parcats" | sort: "order" %}
14+
{% include auto_examples.html examples=examples %}

‎_posts/plotly_js/statistical/parcats/2018-09-17-titanic-parcats.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
name: Mutli-Color Parallel Categories Diagram
3+
plot_url: https://codepen.io/plotly/embed/BGNRqM/?height=601&theme-id=15263&default-tab=result
4+
arrangement: horizontal
5+
language: plotly_js
6+
suite: parcats
7+
order: 3
8+
sitemap: false
9+
markdown_content: |
10+
The color of the ribbons can be specified with the `line.color` property. Similar to other trace types, this
11+
property may be set to an array of numbers, which are then mapped to colors according to the the colorscale
12+
specified in the `line.colorscale` property.
13+
14+
Here is an example of visualizing the survival rate of passengers in the titanic dataset, where the ribbons are
15+
colored based on survival outcome.
16+
17+
By setting the `hoveron` property to `'color'` and the `hoverinfo` property to `'count+probability'` the tooltips
18+
now display count and probability information for each color (outcome) per category.
19+
20+
By setting the `arrangement` property to `'freeform'` it is now possible to drag categories horizontally to
21+
reorder dimensions as well as vertically to reorder categories within the dimension.
22+
---
23+
var gd = document.getElementById('myDiv');
24+
25+
Plotly.d3.csv(
26+
"https://raw.githubusercontent.com/plotly/datasets/master/titanic.csv",
27+
function(titanicData) {
28+
var classDim = {
29+
values: titanicData.map(function(row) {return row['Pclass']}),
30+
categoryorder: 'category ascending',
31+
label: "Class"
32+
};
33+
34+
var genderDim = {
35+
values: titanicData.map(function(row) {return row['Sex']}),
36+
label: "Gender"
37+
};
38+
39+
var survivalDim = {
40+
values: titanicData.map(function(row) {return row['Survived']}),
41+
label: "Outcome",
42+
categoryarray: [0, 1],
43+
ticktext: ['perished', 'survived'],
44+
};
45+
46+
var color = survivalDim.values;
47+
var colorscale = [[0, 'lightsteelblue'], [1, 'mediumseagreen']];
48+
49+
// Build Traces
50+
var traces = [
51+
{type: 'parcats',
52+
dimensions: [classDim, genderDim, survivalDim],
53+
line: {color: color,
54+
colorscale: colorscale},
55+
hoveron: 'color',
56+
hoverinfo: 'count+probability',
57+
labelfont: {size: 14},
58+
arrangement: 'freeform'
59+
}
60+
];
61+
62+
var layout = {width: 600};
63+
64+
// Make plot
65+
Plotly.newPlot(gd, traces, layout);
66+
});

0 commit comments

Comments
 (0)