timvink / mkdocs-charts-plugin

Mkdocs plugin to add plots from data using vegalite
https://timvink.github.io/mkdocs-charts-plugin/
MIT License
84 stars 6 forks source link

Add support for plotly.js #9

Closed timvink closed 1 year ago

timvink commented 2 years ago

Could be cool to add and probably relatively low effort.

timvink commented 2 years ago

Reading in data files is slightly more involved though: https://plotly.com/javascript/ajax-call/ That also means support for data_path will be trickier. Actually the entire syntax seems more contrived because javascript doesn't have the concept of dataframes.

Instead, we could use plotly python.

import plotly.express as px
long_df = px.data.medals_long()

fig = px.bar(long_df, x="nation", y="count", color="medal", title="Long-Form Input")
fig.show()

we can drop the import, and the fig.show() and do that automatically in fence_plotly().

The data loading is trickier to solve, as the fence_plotly function wouldn't know about the project root.

timvink commented 2 years ago

So back to plotly.js.

If we require data to be stored a .json files, we can ask user to point to it.

var plot_data = custom_load_data_function("...")

var trace1 = {
  x: plot_data['x'],
  y: plot_data['y'],
  type: 'scatter',
};

var data = [trace1];

For for each block we can run the javascript and

Plotly.newPlot('myDiv', data, {}, {showSendToCloud: true});

https://stackoverflow.com/questions/58576662/django-plotly-js-pass-pandas-dataframe-columns-to-template-chart

haoda-li commented 1 year ago

Hello, I've actively used plotly and mkdocs for creating notebooks. Thanks for this great work!

I got innovated by this repo and implemented a Plotly charts version. The mechanism of mine is a bit different. I left the URL updates in mkdocs' on_page_content stage. Therefore, I did not bother to send a pull request and merge with your implementation.

Feel free to check my implementation here and give some suggestions!
https://github.com/haoda-li/mkdocs-plotly-plugin

timvink commented 1 year ago

Nice work!

Make sure to add your plugin to the plugins wiki (https://github.com/mkdocs/mkdocs/wiki/MkDocs-Plugins) for more exposure.

Closing this issue, no point to add plotly support to this plugin