Skip to content

Commit 66b80c0

Browse files
archmojarchmoj
committed
revise README
1 parent e720965 commit 66b80c0

File tree

1 file changed

+48
-36
lines changed

1 file changed

+48
-36
lines changed

‎README.md

+48-36
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,58 @@ Plotly.js can be used to produce dozens of chart types and visualizations, inclu
1818

1919
## Table of contents
2020

21-
* [Quick start options](#quick-start-options)
21+
* [Load from CDN](#load-from-cdn)
22+
* [Load from npm](#load-from-npm)
23+
* [Versioning](#versioning)
2224
* [Partial bundles](#partial-bundles)
2325
* [Alternative ways to require or build plotly.js](#alternative-ways-to-require-or-build-plotlyjs)
2426
* [Bugs and feature requests](#bugs-and-feature-requests)
2527
* [Documentation](#documentation)
2628
* [Contributing](#contributing)
2729
* [Community](#community)
28-
* [Versioning](#versioning)
2930
* [Notable contributors](#creators)
3031
* [Copyright and license](#copyright-and-license)
3132

3233
---
33-
## Quick start options
34+
## Load from CDN
35+
Fastly supports Plotly.js with free CDN service. Read more at <https://www.fastly.com/open-source>.
36+
37+
### Minified plotly.js X.Y.Z bundles
38+
```html
39+
<head>
40+
<script src="https://cdn.plot.ly/plotly-2.0.0-rc.2.min.js"></script>
41+
</head>
42+
<body>
43+
<div id="gd"></div>
44+
45+
<script>
46+
Plotly.newPlot("gd", {
47+
"data": [{
48+
"y": [1, 2, 3]
49+
}],
50+
"layout": {
51+
"width": 600,
52+
"height": 400
53+
}
54+
});
55+
</script>
56+
</body>
57+
```
58+
In the example above `Plotly` object is added to the window scope by the script in the `head` section.
59+
The `newPlot` method is then used to draw an interactive figure as described by `data` and `layout` into the desired `div` here named `gd`.
60+
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!
61+
To learn and build more with plotly.js please visit [plotly.js documentation](https://plotly.com/javascript).
62+
63+
### Un-minified versions are also available on CDN
64+
While non-minified source files may contain characters outside UTF-8, it is recommended that you specify the `charset` when loading those bundles.
65+
```html
66+
<script src="https://cdn.plot.ly/plotly-2.0.0-rc.2.js" charset="utf-8"></script>
67+
```
68+
69+
#### 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.
3470

35-
### Install with npm
71+
72+
## Load from npm
3673

3774
```sh
3875
npm install plotly.js-dist-min
@@ -42,37 +79,19 @@ and import plotly.js as
4279

4380
```js
4481
import Plotly from 'plotly.js-dist-min'
45-
// Or using require,
46-
var Plotly = require('plotly.js-dist-min')
4782
```
48-
49-
### Use the plotly.js CDN hosted by Fastly
50-
51-
#### A minified plotly.js X.Y.Z release
52-
```html
53-
<script src="https://cdn.plot.ly/plotly-1.58.4.min.js" charset="utf-8"></script>
54-
```
55-
56-
#### An un-minified version is also available
57-
```html
58-
<script src="https://cdn.plot.ly/plotly-1.58.4.js" charset="utf-8"></script>
83+
Or
84+
```js
85+
var Plotly = require('plotly.js-dist-min')
5986
```
6087

61-
and use the `Plotly` object in the window scope.
62-
63-
##### 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.
64-
65-
Fastly supports Plotly.js with free CDN service. Read more at <https://www.fastly.com/open-source>
66-
67-
### Download the latest release or a release candidate (rc)
68-
69-
[Latest and rc releases on GitHub](https://github.com/plotly/plotly.js/releases/)
88+
---
89+
## Versioning
7090

71-
and use the plotly.js `dist` file(s). More info [here](https://github.com/plotly/plotly.js/blob/master/dist/README.md).
91+
This project is maintained under the [Semantic Versioning guidelines](https://semver.org/).
7292

73-
#### Read the [Getting started page](https://plotly.com/javascript/getting-started/) for more examples.
93+
See the [Releases section](https://github.com/plotly/plotly.js/releases) of our GitHub project for changelogs for each release version of plotly.js.
7494

75-
---
7695
## Partial bundles
7796

7897
There are two kinds of plotly.js partial bundles:
@@ -159,13 +178,6 @@ Please read through our [contributing guidelines](https://github.com/plotly/plot
159178
on Stack Overflow (tagged [`plotly`](https://stackoverflow.com/questions/tagged/plotly)).
160179
* Developers should use the keyword `plotly` on packages which modify or add to the functionality of plotly.js when distributing through [npm](https://www.npmjs.com/browse/keyword/plotly).
161180

162-
---
163-
## Versioning
164-
165-
This project is maintained under the [Semantic Versioning guidelines](https://semver.org/).
166-
167-
See the [Releases section](https://github.com/plotly/plotly.js/releases) of our GitHub project for changelogs for each release version of plotly.js.
168-
169181
---
170182
## Notable contributors
171183

0 commit comments

Comments
 (0)