Plotly.js: New charts wishlist

[jackparmer]

The most requested feature in the plotly user survey has been "More chart types" 2 years in a row.

This issue inventories remaining chart types (or "traces" in plotly parlance) that are still requested for plotly.js and Chart Studio. Pipelines to make most of these charts already exists in Python and R by combining lower level plotly.js traces (lines, SVG shapes, bars, area fills, etc).

plotly.js trace types that do not exist yet

"Business charts"

• [x] Funnel charts Example
• [x] Stacked area charts Example
• [x] Waterfall charts Example
• [x] Hero numbers Example
• [x] Gauges Example
• [x] Bullet charts Example
• [x] Tree maps https://github.com/plotly/plotly.js/issues/1038
• [ ] Voronoi tree maps Example & resource
• [ ] Marimekko charts #4019
• [ ] Timeline https://github.com/plotly/plotly.js/issues/2803
• [ ] Gantt charts Discussion
• [ ] Aster plots (https://github.com/plotly/plotly.js/issues/2901)
• [ ] Cost curve charts Example

Geo

• [x] County choropleths (w/o zoom for perf.) Example
• [ ] Contours on maps ("weather maps") Example
• [x] MapboxGL heatmap support Example

Scientific

• [x] 3d streamtubes Example
• [x] 3d cone plots Example
• [x] 3d volume plots Example
• [x] 3d isosurface Example
• [x] Sunbursts Example
• ~WebGL/regl network graphs Example~ Implementing as a Dash Component
• [x] Parallel categories Example ➡️ https://github.com/jonmmease/plotly.js/pull/1
• [ ] 2d quiver plots Example
• [ ] Bagplot (and Bagplot matrix) Reference
• [ ] strip and/or swarm plots #4021
• [ ] Chord diagrams #3942
• [ ] Mosaic charts #4020
• [ ] fromto https://github.com/plotly/plotly.js/issues/2876

Existing plotly.js traces which need Chart Studio integration

• [x] All polar trace types
• [x] histogram2dcontour
• [x] Sankey diagrams
• [x] All 2d WebGL trace types
• [x] Violin plots
• [ ] All carpet plot trace types
• [ ] pointcloud
• [ ] Parallel coordinate plots
• [ ] sploms
• [ ] Chart types in "plotly.js trace types that do not exist yet" when finished

[jonmmease]

I am currently working on a trace type that is very similar to this R implementation of an alluvial diagram: https://cran.r-project.org/web/packages/alluvial/vignettes/alluvial.html

It's basically a categorical analog of a Parallel Coordinate Plot, where density is encoded as the height of the bands between the dimensions. I find these to be really helpful for exploring relationships in multidimensional categorical datasets.

I don't have code the share yet (that's probably a few months away), but is this a community contribution you would be willing to entertain? @jackparmer @chriddyp @alexcjohnson

_An aside on naming:_ I have shied away from calling this an 'alluvial' diagram because, apart from the R implementation linked above, this term seems to often be used interchangeably with Sankey diagram. Whereas Sankey diagrams are used to represent network flow, the diagram I'm proposing (and the one linked above) is used to represent multi-dimensional categorial data. Because of the close relationship with the Parallel Coordinates Plot, I've taken to calling this a "Parallel Categories" Plot. But, I'm open to renaming it if desired by the team.

[jackparmer]

Hi @jmmease ! We may already have what you're looking for in the sankey trace type. Take a look at this blog post and some of the user examples on plotly cloud.

I think that the sankey trace type covers the examples in the alluvial cran package, but let us know if you see any gaps in features/functionality that we should be considering.

[jonmmease]

Hi @jackparmer , Thanks for the response and pointing out some of the more detailed sankey examples. I think I understand the Sankey feature set a bit more thoroughly now, and I hope I'll be able to better describe the distinction between these and the "Parallel Categories" trace that I'm working on.

Also, this description got kind of long. Let me know if you'd like me to move this somewhere else.

Example

Here's an example using the cars dataset (https://archive.ics.uci.edu/ml/datasets/automobile), which contains a combination of continuous and categorical features. Let's look at the relationship between 4 continuous features (curb-weight, horsepower, price, and highway-mpg) and 4 categorical features (fuel-type, aspiration, drive-wheels, and num-of-cylinders).

Below is an example of using a Parallel Coordinates trace for the continuous features and a "Parallel Categories" trace for the categorical features. I've colored cars with highway-mpg >= 35 red in both diagrams.

From the Parallel Coordinates plot we can see that most of the fuel-efficient cars are inexpensive with low horsepower. From the "Parallel Categories" plot we can see that most of the fuel-efficient cars have 4 cylinders and front-wheel-drive.

Interactive Features

Eventually, it will be possible to set up callbacks to restyle the "Parallel Categories" coloring dynamically in response to constraintrange updates in the Parallel Coordinates diagram.

Also, just as you can drag to reorder the dimensions in the Parallel Coordinates diagram, you can drag to reorder the dimensions of the "Parallel Categories" diagram.

API

The API for constructing a "Parallel Categories" diagram is almost identical to the API for the Parallel Coordinates diagram.

var data = loadCars(); // `data` is a simple object with properties for each column
var color = data["highway-mpg"].map(function(mpg){return Number(mpg >= 35)})
var colorscale = [[0, 'lightgray'], [0.5, 'lightgray'], [0.5, 'red'], [1, 'red']];

var traces = [
            {type: 'parcoords',
                domain: {y: [0.5, 1]},
                dimensions: [{label: "curb-weight", values: data["curb-weight"]}, ...],
                line: {color: color, colorscale: colorscale}
            },
            {type: 'parcats',
                domain: {y: [0, 0.5]},
                dimensions:  [{label: "fuel-type", values: data["fuel-type"]}, ...],
                marker: {color: color, colorscale: colorscale}
            }];

Plotly.newPlot(gd, traces)

In particular, the trace handles the identification of the unique paths through all of the dimensions from the raw table columns. This means that dimension values and colors can be specified as columns from the same data table used to populate the parallel coordinates diagram (or scatter, histogram, etc.). This is why it's possible to share the same color array between the two traces.

One of my overall goals here is for this trace to play well with the other Plotly.js traces in brushing/cross-filtering scenarios.

Comparison with the Sankey Trace

After looking through the Sankey examples you mentioned I think it would be possible to create a diagram using the sankey trace that looks pretty similar to what I have above. I think this would involve something like:

1. Create nodes for each category in each of the 4 dimensions
2. Compute counts of each unique combination of the 4 dimensions and the color array.
3. Create 3 links for each unique combination from (2). Each link has the count computed in (2), the color, and the same label string so that the trace will connect the links together on hover.

In addition to being pretty cumbersome, this approach has some other shortcomings for this use-case:

• The links from (2) above will often have vertical discontinuities across nodes. This can be seen by hovering over links in the diagram here: https://plot.ly/~alishobeiri/1367.embed. This could probably be addressed as an option to the Sankey trace.
  
• It's not possible to specify column/dimension labels (e.g. fuel-type, aspiration, etc.). The Sankey layout engine computes the columns for each node dynamically based on the directed graph structure, so I'm not sure it would be feasible to support this feature in general.
• It's not possible to reorder the dimensions from left to right (e.g. drag num-of-cylinders all the way to the left). I think this would be difficult to support since columns/dimensions are not actually part of the data model. The Sankey layout engine uses the directionality of the links to dynamically choose the display column for each node, so reordering the columns would probably require changing the direction of particular links.
• Updating colors in a brushing/cross-filtering scenario would require regenerating all of the links again (steps 2 and 3 above)

Conclusion

Though there is some overlap in what can be accomplished with the Sankey trace and with the "Parallel Categories" trace, I believe that they represent datasets with fundamentally different structures. Sankey traces represent directed (and acyclic in our case) weighted graphs while "Parallel Categories" traces represent multi-dimensional categorical frequency distributions.

Thanks for reading. Does this make sense? @jackparmer @chriddyp @alexcjohnson @etpinard

Related work

The two other diagrams that I'm aware of that are also designed to represent multi-dimensional categorical frequency data are Mosaic plots and Parallel Sets plots.

[jackparmer]

I see, makes sense. Thanks for this excellent write-up. "parcats" sounds like a very nice trace type addition when you're ready to submit a PR. I added parallel categories to the list above. Perhaps we can do mosaic plots around the same time for a multidim. categorical data push.

[alexcjohnson]

@jmmease really interesting, thanks for bringing this up. It's a great point, that parcoords doesn't work well with categorical variables, esp. when you have several categorical variables in sequence - you can't tell the difference between 1 link and a million links following the same path, you just get "everything is connected":

I wonder though whether we can solve this within the existing parcoords framework? Right now parcoords handles categorical data by requiring you to map it to numbers, and then supply the categories as tick labels matching those numbers. That probably has important use cases (where the positioning of these categories relative to each other is meaningful), but I bet we could make a new categorical axis type that lets you enter data as category names, lays out like you've drawn with a box around the bundle of lines for each category and a gap between them, and automatically distributes the lines across that bundle so that their thicknesses (and the thickness of any given selection) represent the weight in that category. That way we can seamlessly combine categorical and continuous variables into a single parcoords plot, while taking advantage of the code and considerable performance tuning that went into parcoords already.

@monfera does this seem feasible and desirable? @jmmease does this seem like it would handle your use case?

[chriddyp]

The most requested feature in the plotly user survey has been "More chart types" 2 years in a row.

How about

• [x] ~Mapping data to subplots ("faceting") as in the create_facet_grid figure factory: https://plot.ly/python/facet-plots/~ Moved this one to the Python layer in plotly.express with facet_row and facet_col

[monfera]

Added some technical notes on parcoords, parsets, sankey here: https://github.com/plotly/plotly.js/issues/2229

[nicolaskruchten]

Star Coordinates: http://people.cs.vt.edu/~north/infoviz/starcoords.pdf

There doesn't seem to be any JS support for it, and it would be a nice complement to SPLOM and ParCoords ;)

[jackparmer]

Some nice progress recently in adding plotly.js trace types to the online chart editor (https://plot.ly/create/):

Very easy way to try out these chart types before coding.

[AbdealiJK]

Would be nice to have native support for funnels in the JS library too
https://plot.ly/python/funnel-charts/

[etpinard]

• profiler graphs https://github.com/plotly/plotly.js/issues/3878
• force-directed-graph https://github.com/plotly/plotly.js/issues/3883

[etpinard]

• bubble pie charts https://github.com/plotly/plotly.js/issues/3259 / https://github.com/plotly/plotly.js/issues/3270

[etpinard]

From @kiranshila in https://github.com/plotly/plotly.js/issues/4074

---

I think adding support to plot to Smith Charts would be extremely beneficial to everyone working in RF/Microwave engineering.

It basically is a modified polar plot with a Mobius transform mapping complex numbers onto a polar plane.

There are several implementations across a few plotting backends: PGFPlots has it in LaTeX, PySmithChart and Matplotlib have it in Python, it's native in MATLAB, and InspectDR has it in Julia. But none of them implement interactability as well as the leading CAD software which utilizes Smith Charts in design work.

I think Plotly is perfect for this as it can provide a true cross-platform interactive means by which to visualize complex data for radio engineers.

I am more than happy to do a PR, I just need some guidance on how to start working on what is effectively a new axis type.

[kiranshila]

Happy to see the maintainers looking into Smith Charts. I've been working on this for some time and will be able to submit a PR soon.

[etpinard]

• [ ] facet / trellis from https://github.com/plotly/plotly.js/issues/4248

[pope1ni]

How about waffle charts?

http://jkunst.com/d3-waffle/
https://pywaffle.readthedocs.io/en/latest/

[alexcjohnson]

hexbin / hexagonal heatmaps - from @mafar in https://github.com/plotly/plotly.js/issues/4368

[jdb78]

Are there any plans to support stacked waterfall charts directly (e.g. here), i.e. not with the workaround of stacking different bars? Along with gantt charts this is a very common chart type in business environments that is currently not supported by plotly.

BTW: I love all the hard work you are putting into development. The plotly packages really make a difference on a daily basis.

[nicolaskruchten]

@jdb78 we’re open to the idea but it’s not clear how to support stacked negative values in the general case...

[nicolaskruchten]

I should clarify: it’s not clear how to handle stacks of mixed positive and negative values :)

[jdb78]

As this is a edge case in reality, can we not just throw an exception? I know this is unsatisfying but for 99% of applications a combination of negative and positive values is not a valid case.

[nicolaskruchten]

@jdb78 lets continue this conversation in https://github.com/plotly/plotly.js/issues/4450 ?

[cherepanovic]

any news to https://github.com/plotly/plotly.js/issues/3259#event-2359482769?

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $25k-$30k (per new chart type)

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.