Skip to content

Commit 551e8ed

Browse files
archmojarchmoj
authored
Merge pull request #5713 from plotly/readme-headers
Revise readme headers and more edits
2 parents f6932a7 + 0fdd22d commit 551e8ed

File tree

1 file changed

+33
-33
lines changed

1 file changed

+33
-33
lines changed

‎README.md

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ 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 as a node module](#load-as-a-node-module)
22+
* [Load via script tag](#load-via-script-tag)
2323
* [Bundles](#bundles)
24-
* [Alternative ways to require or build plotly.js](#alternative-ways-to-require-or-build-plotlyjs)
24+
* [Alternative ways to load and build plotly.js](#alternative-ways-to-load-and-build-plotlyjs)
2525
* [Documentation](#documentation)
2626
* [Bugs and feature requests](#bugs-and-feature-requests)
2727
* [Contributing](#contributing)
@@ -30,27 +30,29 @@ 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 as a node module
34+
Install [a ready-to-use distributed bundle](https://github.com/plotly/plotly.js/blob/master/dist/README.md)
3535
```sh
36-
npm install plotly.js-dist-min
36+
npm i --save plotly.js-dist-min
3737
```
3838

39-
and import plotly.js as
40-
39+
and use import or require in node.js
4140
```js
41+
// ES6 module
4242
import Plotly from 'plotly.js-dist-min'
43-
```
44-
Or
45-
```js
43+
44+
// CommonJS
4645
var Plotly = require('plotly.js-dist-min')
4746
```
4847

48+
You may also consider using [`plotly.js-dist`](https://www.npmjs.com/package/plotly.js-dist) if you prefer using an unminified package.
49+
4950
---
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>.
51+
## Load via script tag
52+
53+
### The script HTML element
54+
> In the examples below `Plotly` object is added to the window scope by `script`. 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).
5255
53-
### Usage example
5456
```html
5557
<head>
5658
<script src="https://cdn.plot.ly/plotly-2.0.0-rc.3.min.js"></script>
@@ -59,22 +61,23 @@ Fastly supports Plotly.js with free CDN service. Read more at <https://www.fastl
5961
<div id="gd"></div>
6062

6163
<script>
62-
Plotly.newPlot("gd", {
63-
"data": [{
64-
"y": [1, 2, 3]
65-
}],
66-
"layout": {
67-
"width": 600,
68-
"height": 400
69-
}
70-
});
64+
Plotly.newPlot("gd", /* JSON object */ {
65+
"data": [{ "y": [1, 2, 3] }],
66+
"layout": { "width": 600, "height": 400}
67+
})
7168
</script>
7269
</body>
7370
```
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).
71+
72+
Alternatively you may consider using [native ES6 import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) in the script tag.
73+
```html
74+
<script>
75+
import "https://cdn.plot.ly/plotly-2.0.0-rc.3.min.js"
76+
Plotly.newPlot("gd", [{ y: [1, 2, 3] }]);
77+
</script>
78+
```
79+
80+
Fastly supports Plotly.js with free CDN service. Read more at <https://www.fastly.com/open-source>.
7881

7982
### Un-minified versions are also available on CDN
8083
While non-minified source files may contain characters outside UTF-8, it is recommended that you specify the `charset` when loading those bundles.
@@ -84,11 +87,9 @@ While non-minified source files may contain characters outside UTF-8, it is reco
8487

8588
> Please note that as of v2 the "plotly-latest" outputs (e.g. https://cdn.plot.ly/plotly-latest.min.js) will no longer be updated on the CDN, and will stay at the last v1 patch v1.58.4. Therefore, to use the CDN with plotly.js v2 and higher, you must specify an exact plotly.js version.
8689
87-
### To support MathJax
88-
Load relevant MathJax (v2) files *Before* the plotly.js script tag:
90+
To support MathJax, you need to load version two of MathJax e.g. `v2.7.5` files from CDN or npm.
8991
```html
9092
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js"></script>
91-
<script src="https://cdn.plot.ly/plotly-2.0.0-rc.3.min.js"></script>
9293
```
9394

9495
## Bundles
@@ -97,8 +98,8 @@ There are two kinds of plotly.js bundles:
9798
2. Custom bundles you can create yourself to optimize the size of bundle depending on your needs. Please visit [CUSTOM_BUNDLE](https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md) for more information.
9899

99100
---
100-
## Alternative ways to require or build plotly.js
101-
If your library needs to bundle or directly require [plotly.js/lib/index.js](https://github.com/plotly/plotly.js/blob/master/lib/index.js) or parts of its modules similar to [index-basic](https://github.com/plotly/plotly.js/blob/master/lib/index-basic.js) in some other way than via an official or a custom bundle, or in case you want to tweak the default build configurations of `browserify` or `webpack`, etc. then please visit [`BUILDING.md`](https://github.com/plotly/plotly.js/blob/master/BUILDING.md).
101+
## Alternative ways to load and build plotly.js
102+
If your library needs to bundle or directly load [plotly.js/lib/index.js](https://github.com/plotly/plotly.js/blob/master/lib/index.js) or parts of its modules similar to [index-basic](https://github.com/plotly/plotly.js/blob/master/lib/index-basic.js) in some other way than via an official or a custom bundle, or in case you want to tweak the default build configurations of `browserify` or `webpack`, etc. then please visit [`BUILDING.md`](https://github.com/plotly/plotly.js/blob/master/BUILDING.md).
102103

103104
---
104105
## Documentation
@@ -113,7 +114,6 @@ For more info about contributing to Plotly documentation, please read through [c
113114

114115
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)
115116

116-
117117
---
118118
## Contributing
119119

0 commit comments

Comments
 (0)