First steps with Plotly.js
Plotly.js is a JavaScript library for creating many kinds of charts. It's often used in data science, especially that this library is also available in Python (and you probably know that Python is data scientists' favorite language). But let's talk about JavaScript usage for a moment.
As you can see there are plenty possibilities of what you can do with Plotly.js: https://plotly.com/javascript/
Many kinds of charts. Even three-dimensional ones! I like 3D graphics so when I saw a 3D chart, I immediately wanted it to be my first chart I would do with Plotly.js. So I've npm-installed plotly:
npm install plotly.js
(notice package name, we'll return to this later).
And I wrote some HelloWorld-like code based on the code from example.
And here it goes. Weird (yet Trivial) Failure. WTF in short. Instead of beautiful three-dimensional scatter chart, I saw this:
Which is very weird, because my browser does support WebGL. I thought then "this library is overrated. Why do I even do this? Fuck this!". I mean, I don't recall my exact thoughts, but it is a pretty close approximation of what I felt at this very moment.
But sometimes solution is simple. And this time it really was! Actually it waited just around the corner. In the README of Github Plotly.js repository. But nobody really reads readme files these days. Anyway the trick is to install and import other NPM package than a normal human would. So don't install plotly-js, because the Readme tells us to install plotly.js-dist package.
Install:
npm install plotly.js-dist
Import:
import * as Plotly from 'plotly.js-dist'
So I did. And it worked:
Then I discovered that there is also a second option. plotly.js package also could work under condition that you import it like this:
Import
import * as Plotly from 'plotly.js/dist/plotly';.
And here is the code I used to create my Hello-Plotly (my code is in React but Plotly does not need React. It's just my personal preference to work in React):
Comments
Post a Comment