Letting users plot/graph data

Dev
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:

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)

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?)

9 Likes
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:

6 Likes