diff --git a/_posts/plotly_js/statistical/parcats/2018-09-17-basic-parcats-counts.html b/_posts/plotly_js/statistical/parcats/2018-09-17-basic-parcats-counts.html new file mode 100755 index 000000000000..7fc6d4bb6c3a --- /dev/null +++ b/_posts/plotly_js/statistical/parcats/2018-09-17-basic-parcats-counts.html @@ -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); diff --git a/_posts/plotly_js/statistical/parcats/2018-09-17-basic-parcats.html b/_posts/plotly_js/statistical/parcats/2018-09-17-basic-parcats.html new file mode 100755 index 000000000000..e60866f53686 --- /dev/null +++ b/_posts/plotly_js/statistical/parcats/2018-09-17-basic-parcats.html @@ -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); + diff --git a/_posts/plotly_js/statistical/parcats/2018-09-17-brushing-parcats.html b/_posts/plotly_js/statistical/parcats/2018-09-17-brushing-parcats.html new file mode 100755 index 000000000000..77b1c539ab19 --- /dev/null +++ b/_posts/plotly_js/statistical/parcats/2018-09-17-brushing-parcats.html @@ -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); + }); diff --git a/_posts/plotly_js/statistical/parcats/2018-09-17-multi-brushing-parcats.html b/_posts/plotly_js/statistical/parcats/2018-09-17-multi-brushing-parcats.html new file mode 100755 index 000000000000..e0c96359593e --- /dev/null +++ b/_posts/plotly_js/statistical/parcats/2018-09-17-multi-brushing-parcats.html @@ -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); + }); diff --git a/_posts/plotly_js/statistical/parcats/2018-09-17-parcats_plotly_js_index.html b/_posts/plotly_js/statistical/parcats/2018-09-17-parcats_plotly_js_index.html new file mode 100755 index 000000000000..832e4007df51 --- /dev/null +++ b/_posts/plotly_js/statistical/parcats/2018-09-17-parcats_plotly_js_index.html @@ -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 %} diff --git a/_posts/plotly_js/statistical/parcats/2018-09-17-titanic-parcats.html b/_posts/plotly_js/statistical/parcats/2018-09-17-titanic-parcats.html new file mode 100755 index 000000000000..ce7ea72c2ae0 --- /dev/null +++ b/_posts/plotly_js/statistical/parcats/2018-09-17-titanic-parcats.html @@ -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); + }); diff --git a/_posts/python/statistical/parcats/2015-06-30-parcats.html b/_posts/python/statistical/parcats/2015-06-30-parcats.html new file mode 100644 index 000000000000..0763c38ccc3c --- /dev/null +++ b/_posts/python/statistical/parcats/2015-06-30-parcats.html @@ -0,0 +1,606 @@ +--- +permalink: python/parallel-categories-diagram/ +description: How to make parallel categories diagrams in Python with Plotly. +name: Parallel Categories Diagram +has_thumbnail: true +thumbnail: thumbnail/parcats.jpg +layout: user-guide +language: python +title: Python Parallel Categories | Plotly +display_as: statistical +has_thumbnail: true +ipynb: ~notebook_demo/258 +order: 10.3 +page_type: u-guide +--- +{% raw %} +
Plotly's Python library is free and open source! Get started by downloading the client and reading the primer.
+
You can set up Plotly to work in online or offline mode, or in jupyter notebooks.
+
We also have a quick-reference cheatsheet (new!) to help you get started!
Plotly's python package is updated frequently. Run pip install plotly --upgrade
to use the latest version.
import plotly
+plotly.__version__
+
from plotly.offline import iplot, init_notebook_mode
+import plotly.graph_objs as go
+
+import pandas as pd
+import numpy as np
+import ipywidgets as widgets
+
We'll configure the notebook for use in offline mode
+ +init_notebook_mode(connected=True)
+
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 first 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.
+ +parcats = go.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']}]
+)
+
+iplot([parcats])
+
If the frequency of occurrence for each combination of attributes is known in advance, this can be specified using the counts
property
parcats = go.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]
+)
+
+iplot([parcats])
+
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 (survival 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.
titanic_df = pd.read_csv(
+ "https://raw.githubusercontent.com/plotly/datasets/master/titanic.csv")
+
+# Create dimensions
+class_dim = go.parcats.Dimension(
+ values=titanic_df.Pclass,
+ categoryorder='category ascending',
+ label="Class"
+)
+
+gender_dim = go.parcats.Dimension(
+ values=titanic_df.Sex,
+ label="Gender"
+)
+
+survival_dim = go.parcats.Dimension(
+ values=titanic_df.Survived,
+ label="Outcome",
+ categoryarray=[0, 1],
+ ticktext=['perished', 'survived'],
+)
+
+# Create parcats trace
+color = titanic_df.Survived;
+colorscale = [[0, 'lightsteelblue'], [1, 'mediumseagreen']];
+
+data = [
+ go.Parcats(
+ dimensions=[class_dim, gender_dim, survival_dim],
+ line={'color': color,
+ 'colorscale': colorscale},
+ hoveron='color',
+ hoverinfo='count+probability',
+ labelfont={'size': 18, 'family': 'Times'},
+ tickfont={'size': 16, 'family': 'Times'},
+ arrangement='freeform'
+ )
+]
+
+# Display figure
+iplot(data)
+
This example demonstrates how the on_selection
and on_click
callbacks 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.
Note: In order for the callback functions to be executed the figure must be a FigureWidget
, and the figure should display itself. In particular the plot
and iplot
functions should not be used.
cars_df = pd.read_csv(
+ 'https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv')
+
+# Build parcats dimensions
+categorical_dimensions = [
+ 'body-style',
+ 'drive-wheels',
+ 'fuel-type'
+];
+
+dimensions = [
+ dict(values=cars_df[label], label=label)
+ for label in categorical_dimensions
+]
+
+# Build colorscale
+color = np.zeros(len(cars_df), dtype='uint8')
+colorscale = [[0, 'gray'], [1, 'firebrick']]
+
+# Build figure as FigureWidget
+fig = go.FigureWidget(
+ data=[
+ go.Scatter(
+ x=cars_df.horsepower,
+ y=cars_df['highway-mpg'],
+ marker={'color': 'gray'},
+ mode='markers',
+ selected={'marker': {'color': 'firebrick'}},
+ unselected={'marker': {'opacity': 0.3}}),
+
+ go.Parcats(
+ domain={'y': [0, 0.4]},
+ dimensions=dimensions,
+ line={
+ 'colorscale': colorscale,
+ 'cmin': 0,
+ 'cmax': 1,
+ 'color': color,
+ 'shape': 'hspline'})
+ ],
+ layout=go.Layout(
+ height=800,
+ xaxis={'title': 'Horsepower'},
+ yaxis={'title': 'MPG',
+ 'domain': [0.6, 1]},
+ dragmode='lasso',
+ hovermode='closest')
+)
+
+# Update color callback
+def update_color(trace, points, state):
+ # Update scatter selection
+ fig.data[0].selectedpoints = points.point_inds
+
+ # Update parcats colors
+ new_color = np.zeros(len(cars_df), dtype='uint8')
+ new_color[points.point_inds] = 1
+ fig.data[1].line.color = new_color
+
+# Register callback on scatter selection...
+fig.data[0].on_selection(update_color)
+# and parcats click
+fig.data[1].on_click(update_color)
+
+# Display figure
+fig
+
This example extends the previous example to support brushing with multiple colors. The toggle 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.
cars_df = pd.read_csv(
+ 'https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv')
+
+# Build parcats dimensions
+categorical_dimensions = [
+ 'body-style',
+ 'drive-wheels',
+ 'fuel-type'
+];
+
+dimensions = [
+ dict(values=cars_df[label], label=label)
+ for label in categorical_dimensions
+]
+
+# Build colorscale
+color = np.zeros(len(cars_df), dtype='uint8')
+colorscale = [[0, 'gray'], [0.33, 'gray'],
+ [0.33, 'firebrick'], [0.66, 'firebrick'],
+ [0.66, 'blue'], [1.0, 'blue']];
+cmin = -0.5
+cmax = 2.5
+
+# Build figure as FigureWidget
+fig = go.FigureWidget(
+ data=[
+ go.Scatter(
+ x=cars_df.horsepower,
+ y=cars_df['highway-mpg'],
+ marker={'color': color,
+ 'cmin': cmin,
+ 'cmax': cmax,
+ 'colorscale': colorscale,
+ 'showscale': True,
+ 'colorbar': {'tickvals': [0, 1, 2],
+ 'ticktext': ['None', 'Red', 'Blue']}
+ },
+ mode='markers'),
+
+ go.Parcats(
+ domain={'y': [0, 0.4]},
+ dimensions=dimensions,
+ line={
+ 'colorscale': colorscale,
+ 'cmin': cmin,
+ 'cmax': cmax,
+ 'color': color,
+ 'shape': 'hspline'})
+ ],
+ layout=go.Layout(
+ height=800,
+ xaxis={'title': 'Horsepower'},
+ yaxis={'title': 'MPG',
+ 'domain': [0.6, 1]},
+ dragmode='lasso',
+ hovermode='closest')
+)
+
+# Build color selection widget
+color_toggle = widgets.ToggleButtons(
+ options=['None', 'Red', 'Blue'],
+ index=1,
+ description='Brush Color:',
+ disabled=False,
+)
+
+# Update color callback
+def update_color(trace, points, state):
+ # Compute new color array
+ new_color = np.array(fig.data[0].marker.color)
+ new_color[points.point_inds] = color_toggle.index
+
+ with fig.batch_update():
+ # Update scatter color
+ fig.data[0].marker.color = new_color
+
+ # Update parcats colors
+ fig.data[1].line.color = new_color
+
+# Register callback on scatter selection...
+fig.data[0].on_selection(update_color)
+# and parcats click
+fig.data[1].on_click(update_color)
+
+# Display figure
+widgets.VBox([color_toggle, fig])
+
See https://plot.ly/python/reference/#parcats for more information and chart attribute options!
+ +