Looking for ALL the charts

Hi everyone!

I recently did some consulting which brought be back to working on the elm-charts library. I’d like to make sure the new version of the API can cover all the use cases people have, but I’m not sure if I’m missing some! Thus I want to ask you all if you would post a picture of whatever charts you have ever needed to make or will need to make, so I can cover them. Feel free to send them to tereza@elm-lang.org or post them here! Thank you in advance and have a great day! :blush:

13 Likes

These are the ones we use in our app (using Highcharts)

A column chart. Some columns are overlayed on top of others.

bar-chart-overlay

Stacked bar chart
stacked-bar-chart

Stacked bar chart (relative)
stacked-bar-chart-relative

Line
line-chart

Area chart
area-chart

Bubbles
bubble-chart

Mini area chart
sparkline

Sparklines
spark-lines-bars

Thanks

1 Like

Hi @terezka, here are some charts that are in a web app that we’re making at the moment:

Bar charts

Histograms

2D Histograms and line plots

We’ll probably have some scatter plots too.

We’re using elm-vegalite at the moment, which is really powerful, but we’ve found it very difficult to wrap our heads around. Most of the time it just feels like trial and error! I used elm-charts in a previous application, and really appreciated the “Tuftian” approach that you took.

2 Likes

We have this one:
image
which I made with terezka/line-charts 2.0.1 (thank you!)

I remember that I originally wanted the x axis to start with “Jan” and end with “Apr”, but I couldn’t figure out how to adjust the way that the library chose the values for the axes. But it was good enough for our purposes so I shipped it :slight_smile:

1 Like

This is SO helpful, thank you!!

I’m glad I’m not the only one who found it a bit perplexing :slight_smile:

1 Like

(That timeline issue is fixed in the upcoming version!)

1 Like

Hi @terezka

Apology: After I posted I read the comments above from @ChrisWellsWood and @Janiczek. Those who already know Vega can skip most of this post.

Thank you for the great work you and others are doing. You asked:

I’m new to Elm but have a long background in publishing, both print and online. Based on that, perhaps you should look at Vega.

A Vega specification defines an interactive visualization in a JSON format. Specifications are parsed by Vega’s JavaScript runtime to generate both static images or interactive web-based views. Vega provides a convenient representation for computational generation of visualizations, and can serve as a foundation for new APIs and visual analysis tools.

The have a long Example Gallery.

The Nature science journal published an article on the use of Vega and other tools:

Data visualization tools drive interactivity and reproducibility in online publishing.

People who do data science and Jupyter notebooks use Vega. Disclaimer: I’ve never used Vega myself.

1 Like

Hi @jfine2358! Welcome to Elm and thank you for your suggestion! That is a wonderful and extensive gallery, though I’m partially asking because I won’t have time to implement everything at once, so I’m looking to see what people usually use, so I know what to prioritize / what should be the easiest to implement! Should have clarified in the post, but definitely still a useful resource for inspiration- thank you! :blush:

A lot of plotting packages for other languages integrates statistic and data exploration basics to their API, e.g. histogram, but I feel that would be decoupled as a type of bar plot.

I use heat-map to explore data very often, examples can be found here:
https://seaborn.pydata.org/generated/seaborn.heatmap.html

2 Likes

On a slight tangent, I really enjoy “Data Voyager” to explore data (Voyager 2). That tool is based on Vega for the visualization, but if such a tool was made in Elm, I’d find it super cool. It could use elm-vega of course but I guess it could also be done with elm-charts so that is something that might interest @terezka. It’s probably a very pragmatic subset of all the charts supported by Vega.

2 Likes

Ooh, very cool! Will add that to the project backlog!

We use grouped bar charts:

1 Like

This is what we have

All of them have some sort of mouse interactions.

also cc @Janiczek to share what GWI has

1 Like

I would recommend you to look into Grammar of graphics and related papers for inspiration. If you provide small building blocks in your API (encodings, marks, projections) and combinations for making bigger charts from smaller ones you would be set.

I’m developing dataviz library in my company and I got few big ”aha moments “ from these papers. Extracting smallest charts (without guides - axes and so on) and combining them with nesting and stacking operations could lead to great results like violin plots, ridgelines, grouped bar charts, historical scatterplot or marginal histograms.

Also talk with people who design visualization, not only developers. Their vocabulary could teach you a lot. They do think with “variable encodings” and “projections”.

And interactivity is hard. Very hard.

We have storybook where we have reimplemented most exotic examples from Vega and Semiotic. And few cool ones from observablehq.

2 Likes

Thank you for the recommendation, that’s great advice! Will definitely look into those.

And interactivity is hard. Very hard.

I’m curious what kind of interactivity do you refer here?

Most common ones: brushing, panning and zooming. On one hand most of them are very stateful, on the other hand you want to have good data representation of interaction. Vega uses selection streams and they are quite good but vega has full control over rendered markup.

1 Like

Here are some charts I’ve created with other softwares recently which have features that don’t seem to be represented in this topic yet. I hope it helps.

image

1 Like

I’d echo the recommendations to look systematically at the ways in which we can structure chart design. Wilkinson’s Grammar of Graphics and related implementations (e.g. ggPlot, Vega-Lite and elm-VegaLite etc.) attempt to do this by looking at the design process itself as a series of transformations, which is especially handy for writing APIs and libraries.

But you may also find it useful to structure the charts themselves using some kind of taxonomy. The FT Visual Vocabulary provides a nice example of this, which may help you relate the design space to the tasks that each chart attempts to address.

1 Like

Might be an edge case, but I’ve missed the ability to stack charts on top of each other, with different scales. Most notably, line/scatter charts on top of 2d histograms/heatmaps.

2 Likes