# Support for graphing data

**URL:** <https://delvingbitcoin.org/t/support-for-graphing-data/1180>\
**Category:** Meta\
**Created:** [October 4, 2024, 6:45am UTC](https://delvingbitcoin.org/t/support-for-graphing-data/1180 "2024-10-04T06:45:12Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ajtowns](https://delvingbitcoin.org/user_avatar/delvingbitcoin.org/ajtowns/32/417_2.png) [@ajtowns](https://delvingbitcoin.org/u/ajtowns)\
**Post date:** [October 4, 2024, 6:45am UTC](https://delvingbitcoin.org/t/support-for-graphing-data/1180/1 "2024-10-04T06:45:12Z")

</div>

One thing I’ve been wishing for is support for graphing data in a traditional x-y plot with just text markup and not having to generate a png externally or similar. Eventually I gave up and wrote my own [discourse component](https://github.com/ajtowns/discourse-plotly-theme-component) based on [plotly.js](https://github.com/plotly/plotly.js/), which I’ve now enabled here.

Here’s an example graph based on a graph from [the cluster mempool proposal overview](https://delvingbitcoin.org/t/an-overview-of-the-cluster-mempool-proposal/393):

```plotly
data:
  - x: [0,300,400]
    y: [0,950,1050]
    mode: lines+markers
    name: Old mempool
  - x: [0,200,400]
    y: [0,700, 1150]
    name: New mempool
layout:
  title: Feerate Diagram
  xaxis:
    title: "size"
  yaxis:
    title: "fees"

```

You can have a look at the source used to generate that graph via the “Raw Post” link at the bottom of this post, hidden behind the “…”. One thing I like about it is that you can hover over the points on the graph to see their actual values; but you can also zoom in and pan around which might also be useful.

You can also do log graphs easily, just by adding `yaxis: {type: log, autorange: true}` to the `layout` section:

```plotly
data:
  - x: [0,300,400]
    y: [1,950,1050]
    mode: lines+markers
    name: Old mempool
  - x: [0,200,400]
    y: [1,700, 1150]
    name: New mempool
layout:
  title: Feerate Diagram
  xaxis: { title: size }
  yaxis: { type: log, autorange: true, title: fees }

```

(Log axes work remarkably poorly if you have datapoints with a value of zero or less, of course…)

Plotly supports a lot of different graph types, eg drawing great circles on a world map:

```plotly
data:
  - type: scattergeo    
    lat: [40.7127, 51.5072]
    lon: [-74.0059, 0.1275]
    mode: lines
    line:
      width: 4
      color: black
layout:
  title: London to NYC Great Circle
  showlegend: false
  geo:
      resolution: 50
      showland: true
      showlakes: true
      showocean: true
      landcolor: tan
      lakecolor: lightblue
      oceancolor: lightblue
      projection:
        type: equirectangular
      coastlinewidth: 2
      lataxis:
        range: [20, 60]
        showgrid: true
        tickmode: linear
        dtick: 10
      lonaxis:
        range: [-100, 20]
        showgrid: true
        tickmode: linear
        dtick: 20

```

Not sure how useful any of that is likely to be, but it’s more effort to disable it than to leave it in.

You can get a general idea of what’s available from [Plotly javascript graphing library in JavaScript](https://plotly.com/javascript/) and in particular, the code in a `plotly` code block is just treated as a yaml with the `data` and `layout` sections passed into plotly as the `data` and `layout` arguments of plotly’s `newPlot()`.