f68e88c5ef
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>
111 lines
1.6 KiB
Markdown
111 lines
1.6 KiB
Markdown
---
|
|
layout: post
|
|
title: a post with plotly.js
|
|
date: 2025-03-26 14:24:00
|
|
description: this is what included plotly.js code could look like
|
|
tags: formatting charts
|
|
categories: sample-posts
|
|
chart:
|
|
plotly: true
|
|
---
|
|
|
|
This is an example post with some [plotly](https://plotly.com/javascript/) code.
|
|
|
|
````markdown
|
|
```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:
|
|
|
|
```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"
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
Also another example chart.
|
|
|
|
````markdown
|
|
```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:
|
|
|
|
```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"
|
|
}
|
|
}
|
|
}
|
|
```
|