8000 revise readme headers and more edits · plotly/plotly.js@eba98f9 · GitHub
[go: up one dir, main page]
Skip to content

Commit eba98f9

Browse files
archmojarchmoj
committed
revise readme headers and more edits
1 parent f6932a7 commit eba98f9

File tree

1 file changed

+41
-29
lines changed

1 file changed

+41
-29
lines changed

‎README.md

Lines changed: 41 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ Plotly.js can be used to produce dozens of chart types and visualizations, inclu
1818

1919
## Table of contents
2020

21-
* [Load from npm (Node.js Package Manager)](#load-from-npm-nodejs-package-manager)
22-
* [Load from Content Delivery Network (CDN)](#load-from-content-delivery-network-cdn)
21+
* [Load via node.js](#load-via-nodejs)
22+
* [Load via script tag](#load-via-script-tag)
2323
* [Bundles](#bundles)
2424
* [Alternative ways to require or build plotly.js](#alternative-ways-to-require-or-build-plotlyjs)
2525
* [Documentation](#documentation)
@@ -30,27 +30,31 @@ Plotly.js can be used to produce dozens of chart types and visualizations, inclu
3030
* [Community](#community)
3131

3232
---
33-
## Load from npm (Node.js Package Manager)
34-
33+
## Load via node.js
34+
install plotly.js source
3535
```sh
36-
npm install plotly.js-dist-min
36+
npm i --save plotly.js
3737
```
38-
39-
and import plotly.js as
40-
41-
```js
42-
import Plotly from 'plotly.js-dist-min'
38+
Or [a ready-to-use distributed bundle](https://github.com/plotly/plotly.js/blob/master/dist/README.md)
39+
```sh
40+
npm i --save plotly.js-dist-min
4341
```
44-
Or
42+
43+
and use import or require in node.js
4544
```js
46-
var Plotly = require('plotly.js-dist-min')
45+
// ES6 module
46+
import Plotly from 'plotly.js-dist-dist';
47+
48+
// CommonJS
49+
var Plotly = require('plotly.js-dist-dist');
4750
```
4851

4952
---
50-
## Load from Content Delivery Network (CDN)
51-
Fastly supports Plotly.js with free CDN service. Read more at <https://www.fastly.com/open-source>.
53+
## Load via script tag
54+
55+
### The script HTML element
56+
> In the examples below `Plotly` object is added to the window scope by `script` and `import`. The `newPlot` method is then used to draw an interactive figure as described by `data` and `layout` into the desired `div` here named `gd`. As demonstrated in the example above basic knowledge of `html` and [JSON](https://en.wikipedia.org/wiki/JSON) syntax is enough to get started i.e. with/without JavaScript! To learn and build more with plotly.js please visit [plotly.js documentation](https://plotly.com/javascript).
5257
53-
### Usage example
5458
```html
5559
<head>
5660
<script src="https://cdn.plot.ly/plotly-2.0.0-rc.3.min.js"></script>
@@ -59,22 +63,31 @@ Fastly supports Plotly.js with free CDN service. Read more at <https://www.fastl
5963
<div id="gd"></div>
6064

6165
<script>
62-
Plotly.newPlot("gd", {
63-
"data": [{
64-
"y": [1, 2, 3]
65-
}],
66-
"layout": {
67-
"width": 600,
68-
"height": 400
69-
}
70-
});
66+
Plotly.newPlot("gd", /* JSON object */ {
67+
"data": [{ "y": [1, 2, 3] }],
68+
"layout": { "width": 600, "height": 400}
69+
})
70+
</script>
71+
</body>
72+
```
73+
74+
### Native ES6 JavaScript import
75+
```html
76+
<body>
77+
<div id="gd"></div>
78+
79+
<script>
80+
import "https://cdn.plot.ly/plotly-2.0.0-rc.3.min.js"
81+
82+
Plotly.newPlot("gd", /* JSON object */ {
83+
"data": [{ "y": [1, 2, 3] }],
84+
"layout": { "width": 600, "height": 400}
85+
})
7186
</script>
7287
</body>
7388
```
74-
In the example above `Plotly` object is added to the window scope by the script in the `head` section.
75-
The `newPlot` method is then used to draw an interactive figure as described by `data` and `layout` into the desired `div` here named `gd`.
76-
As demonstrated in the example above basic knowledge of `html` and [JSON](https://en.wikipedia.org/wiki/JSON) syntax is enough to get started i.e. with/without JavaScript!
77-
To learn and build more with plotly.js please visit [plotly.js documentation](https://plotly.com/javascript).
89+
90+
To learn more about native imports please visit [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). Also please note that ES6 import is not supported by IE-11.
7891

7992
### Un-minified versions are also available on CDN
8093
While non-minified source files may contain characters outside UTF-8, it is recommended that you specify the `charset` when loading those bundles.
@@ -113,7 +126,6 @@ For more info about contributing to Plotly documentation, please read through [c
113126

114127
Have a bug or a feature request? Please [open a Github issue](https://github.com/plotly/plotly.js/issues/new) keeping in mind the [issue guidelines](https://github.com/plotly/plotly.js/blob/master/.github/ISSUE_TEMPLATE.md). You may also want to read about [how changes get made to Plotly.js](https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md)
115128

116-
117129
---
118130
## Contributing
119131

0 commit comments

Comments
 (0)
0