pages/_posts/2025-03-26-plotly.md
George f68e88c5ef
Added support for plotly js (#3097)
Only now I realized that the [previous
support](https://alshedivat.github.io/al-folio/blog/2021/distill/#interactive-plots)
for [plotly](https://plotly.com/) was enabled by exporting an HTML from
python code. This adds support for
[plotly.js](https://plotly.com/javascript/).

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>
2025-03-26 17:16:03 -03:00

1.6 KiB

layout title date description tags categories chart
post a post with plotly.js 2025-03-26 14:24:00 this is what included plotly.js code could look like formatting charts sample-posts
plotly
true

This is an example post with some plotly code.

```plotly
{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "type": "scatter"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [16, 5, 11, 9],
      "type": "scatter"
    }
  ]
}
```

Which generates:

{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "type": "scatter"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [16, 5, 11, 9],
      "type": "scatter"
    }
  ]
}

Also another example chart.

```plotly
{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "mode": "markers"
    },
    {
      "x": [2, 3, 4, 5],
      "y": [16, 5, 11, 9],
      "mode": "lines"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [12, 9, 15, 12],
      "mode": "lines+markers"
    }
  ],
  "layout": {
    "title": {
      "text": "Line and Scatter Plot"
    }
  }
}
```

This is how it looks like:

{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "mode": "markers"
    },
    {
      "x": [2, 3, 4, 5],
      "y": [16, 5, 11, 9],
      "mode": "lines"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [12, 9, 15, 12],
      "mode": "lines+markers"
    }
  ],
  "layout": {
    "title": {
      "text": "Line and Scatter Plot"
    }
  }
}