Letting users plot/graph data

Development
1

I really like discourse’s support for inline-LaTeX for talking about maths, and mermaid for doing diagrams, but one thing I’ve been missing is the ability to grab small little bits of data and make x/y plots of it – dropping into a spreadsheet and exporting a png sucks. But after a bit of staring at the mermaid theme component’s source, I’ve had some success at making a theme component for plotly.js. It’s here:

https://github.com/ajtowns/discourse-plotly-theme-component

Once it’s enabled, you can do a scatter plot as:

```plotly
data:
  - x: [0,300,400]
    y: [0,950,1050]
    name: Old mempool
  - x: [0,200,400]
    y: [0,700, 1150]
    name: New mempool
layout:
  title: Test plot
```

giving an image like

newplot(10)
newplot(10)650×450 18 KB

Or, presumably, any of the other sorts of charts you can make by passing data/layout values to plotly.js.

A particularly nice thing is that the plots by default are interactive, so you can see the actual values of points by hovering, can zoom in and out, and can save a png. And of course, the raw data is there in the post source as well.

Haven’t deployed it live yet, so can only say it seems to work in a test environment; but wanted to share it early, particularly in case someone wants to take over maintaining it for me… :slight_smile: (Also, if there’s some way better way of doing this that I’ve just somehow missed, I’d be happy to find out about it before I waste too much more time on this…)

(the minified plotly js is over 4MB, so you need to bump the “max attachment size” setting to 5m for it to work, I think?)

2

This is neat, nice work!

Once you’re ready for this to be run in production, please post it under the #theme-component category. Would love to see this alongside the mermaid component. (Note also that we ahve a graphviz plugin that does something similar.)

And also, plotly has a lively community, they’d love to know about this as well: