https://github.com/rreusser/idyll-plotly-example

Quick example of plugging Plotly JSON into an Idyll document
https://github.com/rreusser/idyll-plotly-example

Last synced: 2 months ago
JSON representation

Quick example of plugging Plotly JSON into an Idyll document

• Host: GitHub
• URL: https://github.com/rreusser/idyll-plotly-example
• Owner: rreusser
• Created: 2019-11-08T16:34:55.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-05-07T05:48:19.000Z (over 1 year ago)
• Last Synced: 2024-10-20T12:44:17.591Z (2 months ago)
• Language: JavaScript
• Homepage: https://rreusser.github.io/idyll-plotly-example/build/
• Size: 4.35 MB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# idyll-plotly-example

This project shows an example of including an [Plotly](http://plotly.com/) plot in an [Idyll](https://idyll-lang.org/) document.

## Running it

To run the project, clone the repo and start the Idyll development server.

```sh

npm update -g idyll

git clone [email protected]:rreusser/idyll-plotly-example.git

cd idyll-plotly-example

npm install

idyll

```

## Getting a plot

For portability, the fundamental representation of a Plotly plot is JSON. If the JSON represents a valid plot, then any way you can obtain it should work here. Below are a couple common solutions.

If you have a plot in the Plotly cloud, you can add `.json` to the URL, as in https://chart-studio.plot.ly/~rreusser/99.json and place the resulting JSON in the `data/` directory of your Idyll project.

If you're creating plots via the Plotly Python API, you can also use `fig.to_json()` to obtain the JSON representation of a plot.

Once you have data in your data directory, you may reference the data with a `data` element. For example if the data is in `data/plotData.json`, then you may include it with

```

[data name:'plotData' source:'plotData.json'/]

```

## Drawing the plot

There is a [Plotly.js React component](https://plot.ly/javascript/react/), but I had trouble getting it to work since server-side rendering fails if `document` is not defined. Instead, I defined a simple wrapper in `components/plot.js`:

```jsx

const React = require('react');

const PlotComponent = (() => {

  try {

    const Plotly =  require('plotly.js/dist/plotly-basic.min.js');

    return require('react-plotly.js/factory').default(Plotly);

  } catch (e) { }

})();

class Plot extends React.Component {

  render() {

    return PlotComponent ?  : 
;

  }

}


module.exports = Plot;

```

Finally, we can hook everything up with Idyll:

```

[data name:'plotData' source:'plotData.json' /]

[Plot data:plotData/]

```