diff --git a/.gitignore b/.gitignore
index 54c049475cc..4fefea4a4f7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,7 @@
node_modules
+_site
+
+__pycache__
build/*
!build/plotcss.js
@@ -17,3 +20,7 @@ tags
!.github/
!.gitignore
!.npmignore
+
+tmp
+
+docs/
diff --git a/BUILDING.md b/BUILDING.md
deleted file mode 100644
index c5ee25e7765..00000000000
--- a/BUILDING.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# Alternative ways to require or build plotly.js
-Depending on your needs you may require/import one of [the distributed plotly.js packages](https://github.com/plotly/plotly.js/blob/master/dist/README.md) or [a plotly.js/lib index file](https://github.com/plotly/plotly.js/tree/master/lib) and integrate it into your application.
-
-The sections below provide additional info in respect to alternative building frameworks.
-
----
-## Angular CLI
-
-Since Angular uses webpack under the hood and doesn't allow easily to change it's webpack configuration, there is some work needed using a `custom-webpack` builder to get things going.
-
-1. Install [`@angular-builders/custom-webpack`](https://www.npmjs.com/package/@angular-builders/custom-webpack) and [ify-loader@v1.1.0+](https://github.com/hughsk/ify-loader)
-2. Create a new `extra-webpack.config.js` beside `angular.json`.
-
-> extra-webpack.config.json
-```javascript
-module.exports = {
- module: {
- rules: [
- {
- test: /\.js$/,
- include: [
- path.resolve(__dirname, "node_modules/plotly.js")
- ],
- loader: 'ify-loader'
- }
- ]
- },
-};
-```
-
-3. Change the builder in `angular.json` to `"@angular-builders/custom-webpack:browser` and configure it correctly to use our new webpack config.
-
-> angular.json
-```json
-{
- "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
- "version": 1,
- "newProjectRoot": "projects",
- "projects": {
- "MY_PROJECT_NAME": {
- "root": "",
- "sourceRoot": "src",
- "projectType": "application",
- "prefix": "app",
- "schematics": {
- "@schematics/angular:component": {
- "styleext": "scss"
- }
- },
- "architect": {
- "build": {
- "builder": "@angular-builders/custom-webpack:browser",
- "options": {
- ....
- "customWebpackConfig": {
- "path": "./extra-webpack.config.js",
- "replaceDuplicatePlugins": true,
- "mergeStrategies": {"module.rules": "merge"}
- }
- }
- }
-...
-```
-
-It's important to set `projects.x.architect.build.builder` and `projects.x.architect.build.options.customWebpackConfig`.
-If you have more projects in your `angular.json` make sure to adjust their settings accordingly.
----
diff --git a/code_of_conduct.md b/CODE_OF_CONDUCT.md
similarity index 100%
rename from code_of_conduct.md
rename to CODE_OF_CONDUCT.md
diff --git a/CONTRIBUTING-DOCS.md b/CONTRIBUTING-DOCS.md
new file mode 100644
index 00000000000..ebcf4e94298
--- /dev/null
+++ b/CONTRIBUTING-DOCS.md
@@ -0,0 +1,151 @@
+# Contribute to Plotly's [JavaScript Documentation](https://plotly.com/javascript/)
+
+Plotly welcomes contributions to its [open-source JavaScript graphing libraries documentation](https://plotly.com/javascript) from its community of users.
+
+Our JavaScript tutorials are written in HTML files in the `_posts/plotly_js` directory of this repository.
+
+## Contribute Quickly to Plotly's JavaScript Graphing Library Documentation
+
+To quickly make a contribution to Plotly's JavaScript graphing libraries documentation, simply submit a pull request with the change you would like to suggest. This can be done using the GitHub graphical user interface at https://github.com/plotly/graphing-library-docs.
+
+The easiest way to do this is to follow the `Edit this page on GitHub` link at the top right of the page you are interested in contributing to:
+
+
+
+**You don't have to worry about breaking the site when you submit a pull request!** This is because your change will not be merged to production immediately. A Plotly team member will first perform a code review on your pull request in order to ensure that it definitely increases the health of Plotly's graphing libraries codebase.
+
+## Develop Locally
+
+For contributions such as new example posts, we recommend setting up a local development environment so that you can test your changes as you work on them.
+
+**See the `How To Get The Application Working Locally` section of the [Contributing Guide](https://github.com/plotly/graphing-library-docs/blob/master/Contributing.md) to learn how to clone this repository to your local development environment and install its dependencies.**
+
+Then follow these instructions to create or modify a new post. If the post is the first of its chart type, you need to create an index page for it first.
+
+## Create An Index Page For A New Chart Type:
+
+If you are documenting a new chart type, then you need to create an index page for it before creating the actual example page.
+
+1. In `documentation/_posts/plotly_js`, create a folder titled with the chart type or topic you're adding to the documentation (i.e. `bar`).
+
+2. `cd` into the folder you created and create an HTML index file for the chart type named: `yyyy-mm-dd-chart_type_plotly_js_index.html`. Copy the index file template below. Make sure to replace placeholder text!
+```
+---
+name: Add-Chart-Type-or-Topic
+permalink: javascript/add-chart-type-or-topic/
+description: How to make a D3.js-based add-chart-type-or-topic in javascript. Add an additional sentence summarizing chart-type or topic.
+layout: langindex
+thumbnail: thumbnail/mixed.jpg
+language: plotly_js
+page_type: example_index
+display_as: **SEE BELOW
+order: 5
+---
+ {% assign examples = site.posts | where:"language","plotly_js" | where:"suite","add-chart-type-or-topic"| sort: "order" %}
+ {% include posts/auto_examples.html examples=examples %}
+```
+ - Make sure to update `_includes/posts/documentation_eg.html`, `_includes/layouts/side-bar.html`, and `_data/display_as_py_r_js.yml` and the CI python scripts with the new chart type!
+
+ - Index pages for chart categories must have `order: 5`.
+
+## Create A New Example Post:
+
+1. In the folder containing the examples for the chart type you are writing documentation for, create a file named: `yyyy-mm-dd-example-title.html`.
+
+2. Copy the example post template below and write JavaScript code to demonstrate the feature you are documenting.
+ - If `plot_url` front-matter is not present, then the resulting chart will be displayed inline and a `Try It Codepen` button will be automatically generated.
+ - If `plot_url` front-matter is present, then the URL given will be embedded in an `iframe` below the example.
+```
+---
+description: How to make a D3.js-based bar chart in javascript. Seven examples of
+grouped, stacked, overlaid, and colored bar charts.
+display_as: basic
+language: plotly_js
+layout: base
+name: Bar Charts
+order: 3
+page_type: example_index
+permalink: javascript/bar-charts/
+redirect_from: javascript-graphing-library/bar-charts/
+thumbnail: thumbnail/bar.jpg **MORE INFO ON ADDING THUMBNAILS BELOW
+markdown_content: |
+ indented content in markdown format which will prefix an example ****SEE BELOW
+---
+var data = [
+ {
+ x: ['giraffes', 'orangutans', 'monkeys'],
+ y: [20, 14, 23],
+ type: 'bar'
+ }The
+];
+
+Plotly.newPlot('myDiv', data);
+```
+
+- `display_as` sets where your tutorial is displayed. Make sure to update `_includes/posts/documentation_eg.html` with the new chart type!:
+ - 'file_settings' = https://plotly.com/javascript/plotly-fundamentals
+ - 'basic' = https://plotly.com/javascript/basic-charts
+ - 'statistical' = https://plotly.com/javascript/statistical-charts
+ - 'scientific' = https://plotly.com/javascript/scientific-charts
+ - 'financial' = https://plotly.com/javascript/financial-charts
+ - 'maps' = https://plotly.com/javascript/maps
+ - '3d_charts' = https://plotly.com/javascript/3d-charts
+ - See additional options [HERE](https://github.com/plotly/graphing-library-docs/blob/master/_includes/posts/documentation_eg.html#L1)
+
+ - `order` defines the order in which the tutorials appear in each section on plot.ly/javascript.
+ - Note The `order` of posts within a `display_as` must be a set of consecutive integers (i.e. [1, 2, 3, 4, 5, 6, ...]).
+ - If a post has an `order` less than 5, it **MUST** also have the `page_type: example_index` front-matter so that it gets displayed on the index page.
+
+ - `markdown_content` is rendered directly above the examples. In general, it is best to *avoid* paragraph-formatted explanation and let the simplicity of the example speak for itself, but that's not always possible. Take note that headings in this block *are* reflected in the sidebar.
+
+ - Thumbnail images should named `your-tutorial-chart.jpg` and be *EXACTLY* 160px X 160px.
+ - posts in the following `display_as` categories **MUST** have a thumbnail
+ - 'file_settings' = https://plotly.com/javascript/plotly-fundamentals
+ - 'basic' = https://plotly.com/javascript/basic-charts
+ - 'statistical' = https://plotly.com/javascript/statistical-charts
+ - 'scientific' = https://plotly.com/javascript/scientific-charts
+ - 'financial' = https://plotly.com/javascript/financial-charts
+ - 'maps' = https://plotly.com/javascript/maps
+ - '3d_charts' = https://plotly.com/javascript/3d-charts
+ - Thumbnail images should be clear and interesting. You do not need to capture the ENTIRE chart, but rather focus on the most interesting part of the chart.
+ - Use images.plot.ly for adding new images. The password is in the Plotly 1Password Engineering Vault.
+ - Log-in here: https://661924842005.signin.aws.amazon.com/console
+ - From the Amazon Web Services Console select S3 (Scalable Storage in the Cloud) then select plotly-tutorials -> plotly-documentation -> thumbnail
+ - Now from All Buckets /plotly-tutorials/plotly-documentation/thumbnail select the Actions dropdown and upload your .jpg file
+
+## Modify An Existing Post:
+
+1. Find the post you want to modify in `_posts/plotly_js`. Then, open the HTML file that contains that post and modify either the front-matter or the JavaScript.
+
+# Best Practices:
+ - `order` examples from basic to advanced
+ - avoid the use of global JavaScript variables for `data` and `layout`.
+ - make the chart display in a DOM element named `myDiv`
+ - use the `.newPlot()` function
+ - use "real" data to make the examples realistic and useful for users.
+ - avoid using random or dummy data as much as humanly possible! Should only be a last resort.
+ - upload data files to https://github.com/plotly/datasets as importing data rather than pasting a large chunk of data in the tutorial creates a cleaner example.
+ - use `var config = {mapboxAccessToken: "your access token"};` if your chart requires Mapbox authentication. `"your access token` will replaced by Plotly's private token at build time. In development mode, you will need to create a `_data/mapboxtoken.yml` file and paste Plotly's non-URL restricted Mapbox key into it. This is available in 1Password.
+
+## Make a Pull Request
+ - Ready for your changes to be reviewed? Make a pull request!
+
+ - Create a feature branch and use `git status` to list changed files.
+ ```
+ git checkout -b your_feature_branch
+ git status
+ ```
+ - Add, commit, and push the files that you'd like to add to your PR:
+ ```
+ git add file-a
+ git add file-b
+ git commit -m 'message about your changes'
+ git push origin your_feature_branch
+ ```
+ - Visit the [documentation repo](https://github.com/plotly/graphing-library-docs) and open a pull request!. You can then tag **@jdamiba** for a review.
+
+## Style Edits
+
+Please refer to our [Styles README](https://github.com/plotly/graphing-library-docs/blob/master/style_README.md)
+
+Thanks for contributing to our documentation!!
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 14be34d8b8d..96d7b25c2d9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -12,11 +12,11 @@ environment for doing development and running tests.
Please check out our [Code of Conduct](code_of_conduct.md). Don't tl:dr; it
but the general idea is to be nice.
-## Plotly.js vs Plotly.py and Plotly.R
+## Plotly.js vs Plotly.py
-[Plotly.js](https://plotly.com/javascript) is a standalone Javascript data visualization library, and it also powers the Python and R modules named `plotly` in those respective ecosystems (referred to as [Plotly.py](https://plotly.com/python) and [Plotly.R](http://plotly.com/r), respectively, for clarity). There also exist Plotly.js-powered libraries for other languages such as Julia, Scala, Rust, .NET and even C++!
+[Plotly.js](https://plotly.com/javascript) is a standalone Javascript data visualization library, and it also powers the Python module named `plotly` (referred to as [Plotly.py](https://plotly.com/python) for clarity).
-The basic architecture of Plotly.js is to accept [JSON](https://json.org/) representation of figures that adhere to the [figure schema](https://plotly.com/javascript/reference/index/) and draw interactive graphical representations of these figures in a browser. Libraries in other languages like Python and R provide idiomatic interfaces for users of those languages to create and manipulate these JSON structures, and arrange for them to be rendered in a browser context by Plotly.js. This means that in many cases, when a Python or R user wishes to add a feature to the library they know as `plotly`, the relevant changes must be implemented in Plotly.js, in this repo.
+The basic architecture of Plotly.js is to accept [JSON](https://json.org/) representation of figures that adhere to the [figure schema](https://plotly.com/javascript/reference/index/) and draw interactive graphical representations of these figures in a browser. The Python library provides an idiomatic interface for Python users to create and manipulate these JSON structures, and arrange for them to be rendered in a browser context by Plotly.js. This means that in many cases, when a Python user wishes to add a feature to the library they know as `plotly`, the relevant changes must be implemented in Plotly.js, in this repo.
## How do changes get made to Plotly.js?
@@ -37,7 +37,8 @@ The basic process for adding new features or fixing bugs is as follows. Please n
The current Plotly.js maintainers are all employees of Plotly (the company) and one of their primary responsibilities is ensuring the process above runs smoothly. It is worth noting that maintainers and non-maintainer Plotly employees all follow the process above: proposing changes, iterating on proposals and eventually developing and reviewing each other's pull requests. As mentioned above, maintainers look after bug fixes, performance, security, documentation and concerns that impact the long-term prospects for this library. In terms of development work, maintainers tend to prioritize issues that do or are likely to impact Plotly customers, as well as on [sponsored features or bug fixes](https://plot.ly/products/consulting-and-oem/). Sponsored work proceeds via the process listed above, albeit with the option of conducting portions of the "discussion" step in a confidential setting if desired. Please note that maintainers are happy and eager to help with community-led pull requests, independent of customer-driven development priorities :)
### The Plotly.js Community
-The Plotly.js community, construed fairly broadly, includes the maintainers and all users of Plotly.js and associated projects ([Plotly.py](https://plotly.com/python), [Dash](https://dash.plotly.com/), [Plotly.R](https://plotly.com/r), [Chart Studio](https://plotly.com/chart-studio) and many others). The community includes people from any background, domain, affiliation and level of technical expertise, for example (but not limited to!) employees of small or large companies or startups; employees or students of universities or other educational institutions; government employees and contractors; employees and volunteers of non-profits; individual hobbyists etc.
+
+The Plotly.js community, construed fairly broadly, includes the maintainers and all users of Plotly.js and associated projects ([Plotly.py](https://plotly.com/python), [Dash](https://dash.plotly.com/), and others supported by the open source community). The community includes people from any background, domain, affiliation and level of technical expertise, for example (but not limited to!) employees of small or large companies or startups; employees or students of universities or other educational institutions; government employees and contractors; employees and volunteers of non-profits; individual hobbyists etc.
**Anyone in the community is encouraged to contribute to every step of the process described above!** Creating issues to report bugs or suggest new behaviours is a valuable contribution to this project, as is proposing a concrete set of changes to address issues created by anyone at any time. In the same way, giving feedback on proposals created by anyone in the community is valuable, as is, of course, development and review work. [Proposing changes to the documentation of Plotly.js or associated projects](https://github.com/plotly/graphing-library-docs/blob/master/README.md) is an extremely valuable form of contribution, as is [asking or answering questions on our community forum](https://community.plotly.com/), as it creates a record of a question and discussion, which others can stumble across later and use to further their own work.
diff --git a/Makefile b/Makefile
new file mode 100644
index 00000000000..58f1ff6f6e8
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,64 @@
+# Manage plotly.js documentation.
+
+RUN = uv run
+SCHEMA_SRC = test/plot-schema.json
+HANDWRITTEN = content
+TMP = tmp
+
+EXAMPLES_DIR = ${HANDWRITTEN}/plotly_js
+EXAMPLES_IN := $(shell find "${EXAMPLES_DIR}" -name '*.html')
+EXAMPLES_TMP = ${TMP}/javascript
+EXAMPLES_OUT = ${EXAMPLES_TMP}/axes/index.html # could be any of the generated files
+
+REFERENCE_DIR = ${HANDWRITTEN}/reference_pages/javascript/
+REFERENCE_IN := $(wildcard ${REFERENCE_DIR}/*.html)
+REFERENCE_TMP = ${TMP}/reference
+REFERENCE_OUT = ${REFERENCE_TMP}/bar/index.html # could be any of the generated files
+
+DOCS_DIR=docs
+DOCS_OUT=${DOCS_DIR}/sitemap.xml
+
+## commands: show available commands
+commands:
+ @grep -h -E '^##' ${MAKEFILE_LIST} | sed -e 's/## //g' | column -t -s ':'
+
+## docs: rebuild full documentation in `./docs`
+.PHONY: docs
+docs: ${DOCS_OUT}
+
+${DOCS_OUT}: ${EXAMPLES_OUT} ${REFERENCE_OUT}
+ @${RUN} mkdocs build
+
+## examples: build intermediate example documentation in ./tmp
+examples: ${EXAMPLES_OUT}
+
+${EXAMPLES_OUT}: bin/example_pages.py ${EXAMPLES_IN}
+ @mkdir -p ${TMP}
+ @${RUN} bin/example_pages.py --indir ${EXAMPLES_DIR} --outdir ${EXAMPLES_TMP} --jsversion 3.2.1
+
+## reference: build intermediate reference documentation in ./tmp
+reference: ${REFERENCE_OUT}
+
+${REFERENCE_OUT}: bin/reference_pages.py ${SCHEMA_SRC} ${REFERENCE_IN}
+ @mkdir -p ${TMP}
+ @${RUN} bin/reference_pages.py --schema ${SCHEMA_SRC} --outdir ${REFERENCE_TMP} ${REFERENCE_IN}
+
+## serve: display documentation
+serve:
+ ${RUN} mkdocs serve
+
+## --: --
+
+## clean: clean up repository
+clean:
+ @find . -name '*~' -delete
+ @find . -name '.DS_Store' -delete
+ @rm -rf docs ${TMP}
+
+## format: reformat Python code
+format:
+ @ruff format bin
+
+## lint: check code and project
+lint:
+ @ruff check bin
diff --git a/README.md b/README.md
index 218a7d49c7a..e56ac0da82c 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
[](https://circleci.com/gh/plotly/plotly.js)
[](https://github.com/plotly/plotly.js/blob/master/LICENSE)
-[Plotly.js](https://plotly.com/javascript) is a standalone Javascript data visualization library, and it also powers the Python and R modules named `plotly` in those respective ecosystems (referred to as [Plotly.py](https://plotly.com/python) and [Plotly.R](http://plotly.com/r)).
+[Plotly.js](https://plotly.com/javascript) is a standalone Javascript data visualization library, and it also powers the Python module named `plotly` (referred to as [Plotly.py](https://plotly.com/python)).
Plotly.js can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more.
@@ -22,22 +22,20 @@ Plotly.js can be used to produce dozens of chart types and visualizations, inclu
+## Table of Contents
-## Table of contents
-
-* [Load as a node module](#load-as-a-node-module)
-* [Load via script tag](#load-via-script-tag)
+* [Load as a Node Module](#load-as-a-node-module)
+* [Load via Script Tag](#load-via-script-tag)
* [Bundles](#bundles)
-* [Alternative ways to load and build plotly.js](#alternative-ways-to-load-and-build-plotlyjs)
* [Documentation](#documentation)
-* [Bugs and feature requests](#bugs-and-feature-requests)
+* [Bugs and Feature Requests](#bugs-and-feature-requests)
* [Contributing](#contributing)
-* [Notable contributors](#notable-contributors)
+* [Notable Contributors](#notable-contributors)
* [Copyright and license](#copyright-and-license)
* [Community](#community)
----
-## Load as a node module
+## Load as a Node Module
+
Install [a ready-to-use distributed bundle](https://github.com/plotly/plotly.js/blob/master/dist/README.md)
```sh
npm i --save plotly.js-dist-min
@@ -54,10 +52,10 @@ var Plotly = require('plotly.js-dist-min')
You may also consider using [`plotly.js-dist`](https://www.npmjs.com/package/plotly.js-dist) if you prefer using an unminified package.
----
-## Load via script tag
+## Load via Script Tag
+
+### The `script` HTML Element
-### The script HTML element
> 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).
```html
@@ -77,6 +75,7 @@ You may also consider using [`plotly.js-dist`](https://www.npmjs.com/package/plo
```
Alternatively you may consider using [native ES6 import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) in the script tag.
+
```html
```
@@ -95,7 +96,9 @@ While non-minified source files may contain characters outside UTF-8, it is reco
> 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.5. Therefore, to use the CDN with plotly.js v2 and higher, you must specify an exact plotly.js version.
### MathJax
+
You could load either version two or version three of MathJax files, for example:
+
```html
```
@@ -108,21 +111,20 @@ You could load either version two or version three of MathJax files, for example
Please refer to `devtools/test_dashboard/index-mathjax3chtml.html` to see an example.
### Need to have several WebGL graphs on a page?
+
You may simply load [virtual-webgl](https://github.com/greggman/virtual-webgl) script for WebGL 1 (not WebGL 2) before loading other scripts.
+
```html
```
## Bundles
+
There are two kinds of plotly.js bundles:
+
1. Complete and partial official bundles that are distributed to `npm` and the `CDN`, described in [the dist README](https://github.com/plotly/plotly.js/blob/master/dist/README.md).
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.
----
-## Alternative ways to load and build plotly.js
-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, then please visit [`BUILDING.md`](https://github.com/plotly/plotly.js/blob/master/BUILDING.md).
-
----
## Documentation
Official plotly.js documentation is hosted at [https://plotly.com/javascript](https://plotly.com/javascript).
@@ -130,18 +132,15 @@ Official plotly.js documentation is hosted at [https://plotly.com/javascript](ht
These pages are generated by the Plotly [graphing-library-docs repo](https://github.com/plotly/graphing-library-docs) built with [Jekyll](https://jekyllrb.com/) and publicly hosted on GitHub Pages.
For more info about contributing to Plotly documentation, please read through [contributing guidelines](https://github.com/plotly/graphing-library-docs/blob/master/README.md).
----
-## Bugs and feature requests
+## Bugs and Feature Requests
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)
----
## Contributing
Please read through our [contributing guidelines](https://github.com/plotly/plotly.js/blob/master/CONTRIBUTING.md). Included are directions for opening issues, using plotly.js in your project and notes on development.
----
-## Notable contributors
+## Notable Contributors
Plotly.js is at the core of a large and dynamic ecosystem with many contributors who file issues, reproduce bugs, suggest improvements, write code in this repo (and other upstream or downstream ones) and help users in the Plotly community forum. The following people deserve special recognition for their outsized contributions to this ecosystem:
@@ -171,7 +170,6 @@ Plotly.js is at the core of a large and dynamic ecosystem with many contributors
|**Alex Vados**| [@alexander-daniel](https://github.com/alexander-daniel) | Hall of Fame |
|**Mojtaba Samimi** | [@archmoj](https://github.com/archmoj) | Hall of Fame |
----
## Copyright and license
Code and documentation copyright 2025 Plotly, Inc.
@@ -184,7 +182,6 @@ This project is maintained under the [Semantic Versioning guidelines](https://se
See the [Releases section](https://github.com/plotly/plotly.js/releases) of our GitHub project for changelogs for each release version of plotly.js.
----
## Community
* Follow us on [X](https://x.com/plotlygraphs) and [LinkedIn](https://www.linkedin.com/company/plotly/) for the latest Plotly news.
diff --git a/bin/example_pages.py b/bin/example_pages.py
new file mode 100644
index 00000000000..c09c9e6862c
--- /dev/null
+++ b/bin/example_pages.py
@@ -0,0 +1,267 @@
+"""Rebuild plotly.js example pages from Jekyll HTML."""
+
+import argparse
+import frontmatter
+from html import escape
+import json
+from markdown import markdown
+from pathlib import Path
+import re
+from mkdocs.config import load_config
+from utils import _log
+
+
+HTML_TAG_RE = re.compile(r"<[^>]*>")
+SUITE_RE = re.compile(r'where:"suite","(.+?)"')
+
+
+def main():
+ """Main driver."""
+ args = _parse_args()
+ index_files, example_files = _get_source_files(args)
+ for path, record in index_files.items():
+ _process(args, path, record, example_files)
+
+
+def _get_source_files(args):
+ """Load and classify source files."""
+ index_files = {}
+ example_files = {}
+ for filepath in args.indir.glob("**/*.html"):
+ page = frontmatter.load(filepath)
+ record = {"header": page.metadata, "content": page.content}
+ if not str(filepath).endswith("index.html"):
+ example_files[filepath] = record
+ elif "posts/auto_examples.html" in page.content:
+ index_files[filepath] = record
+ return index_files, example_files
+
+
+def _get_suite(path, content):
+ """Get suite specification from index file."""
+ m = SUITE_RE.search(content)
+ if _log(not m, f"cannot find 'suite' in index file {path}"):
+ return None
+ return m.group(1)
+
+
+def _make_html(args, examples):
+ """Build HTML page full of examples."""
+ accum = []
+ for counter, (path, record) in enumerate(examples):
+ header = record["header"]
+ content = record["content"]
+ accum.append('
+"""
+
+
+def _make_html_name(accum, path, header):
+ """Make example name block."""
+ name = header["name"] if header["name"] else ""
+ _log(not name, f"{path} does not have name")
+ name = _strip_html(name.replace(" ", "-").replace(",", "").lower())
+ accum.append(HTML_NAME.format(name=name))
+
+
+HTML_TEXT = """\
+ {markdown_content}
+ {page_content}
+ {description}
+"""
+
+HTML_TEXT_PAGE_CONTENT = """\
+
+
{text}
+
+"""
+
+HTML_TEXT_DESCRIPTION = """\
+
+ {text}
+
+"""
+
+
+def _make_html_text(accum, path, header, content):
+ """Make text of example."""
+ # columns = "twelve" if "horizontal" in header.get("arrangement", "") else "six"
+ markdown_content = markdown(header.get("markdown_content", ""))
+ page_content = (
+ HTML_TEXT_PAGE_CONTENT.format(text=escape(content)) if content else ""
+ )
+ description = header.get("description", "")
+ description = HTML_TEXT_DESCRIPTION.format(text=description) if description else ""
+ accum.append(
+ HTML_TEXT.format(
+ markdown_content=markdown_content,
+ page_content=page_content,
+ description=description,
+ )
+ )
+
+
+MYDIV_D3 = "\n\t<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>"
+MYDIV_MATHJAX = "\n\t<script src='//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML'></script>"
+
+MYDIV = """\
+
+
+
+"""
+
+
+def _make_mydiv(args, accum, path, header, content, counter):
+ """Handle myDiv case."""
+ if ("'myDiv'" not in content) and ('"myDiv"' not in content):
+ return False
+
+ d3 = MYDIV_D3 if "d3." in content else ""
+ mathjax = MYDIV_MATHJAX if "remember to load MathJax.js" in content else ""
+ # columns = "twelve" if "horizontal" in header.get("arrangement", "") else "six"
+ name = header["name"]
+ unique_mydiv = f"myDiv_{counter}"
+ content_mydiv = content.replace("myDiv", unique_mydiv)
+ content_json = escape(json.dumps(content))
+
+ # Get JS Version
+ mkdocs_path = Path(__file__).resolve().parent.parent / "mkdocs.yml"
+ config = load_config(config_file=str(mkdocs_path))
+ extra = config.get("extra", {})
+ version = extra.get("js_version")
+
+ accum.append(
+ MYDIV.format(
+ d3=d3,
+ mathjax=mathjax,
+ name=name,
+ unique_mydiv=unique_mydiv,
+ content_mydiv=content_mydiv,
+ content_json=content_json,
+ jsversion=version,
+ )
+ )
+
+ return True
+
+
+PLOT_URL = """\
+ {plot_url_img}
+ {plot_url_embed}
+"""
+
+PLOT_URL_IMG = """\
+
+"""
+
+PLOT_URL_EMBED = """\
+
+"""
+
+
+def _make_plot_url(accum, path, header, content):
+ """Handle specified plot URL."""
+ plot_url = header.get("plot_url")
+ if not plot_url:
+ return False
+ columns = "twelve" if "horizontal" in header.get("arrangement", "") else "six"
+
+ plot_url_img = ""
+ plot_url_embed = ""
+ if (".gif" in plot_url) or (".png" in plot_url):
+ plot_url_img = PLOT_URL_IMG.format(plot_url=plot_url)
+ else:
+ embed_class = ".embed" if "plot.ly" in plot_url else ""
+ width = f"{header.get('width', '550')}px"
+ height = f"{header.get('height', '550')}px"
+ plot_url_embed = PLOT_URL_EMBED.format(
+ plot_url=plot_url,
+ embed_class=embed_class,
+ width=width,
+ height=height,
+ )
+ accum.append(
+ PLOT_URL.format(
+ columns=columns,
+ plot_url=plot_url,
+ plot_url_img=plot_url_img,
+ plot_url_embed=plot_url_embed,
+ )
+ )
+
+ return True
+
+
+def _parse_args():
+ """Parse command-line arguments."""
+ parser = argparse.ArgumentParser(description="Generate HTML example documentation")
+ parser.add_argument("--indir", type=Path, help="Input directory")
+ parser.add_argument("--jsversion", help="Plotly JS version")
+ parser.add_argument("--schema", type=Path, help="Path to plot schema JSON file")
+ parser.add_argument("--outdir", type=Path, help="Output directory")
+ parser.add_argument(
+ "--verbose", type=int, default=0, help="Integer verbosity level"
+ )
+ return parser.parse_args()
+
+
+def _process(args, path, record, example_files):
+ """Process a section."""
+ if (suite := _get_suite(path, record["content"])) is None:
+ return
+
+ examples = [
+ (p, r)
+ for p, r in example_files.items()
+ if r["header"].get("suite", None) == suite
+ ]
+ examples.sort(
+ key=lambda pair: (example_files[pair[0]]["header"]["order"], str(pair[0]))
+ )
+
+ section = record["header"]["permalink"].strip("/").split("/")[-1]
+ _log(args.verbose > 0, f"...{section}: {len(examples)}")
+
+ html = _make_html(args, examples)
+
+ output_path = args.outdir / section / "index.html"
+ output_path.parent.mkdir(parents=True, exist_ok=True)
+ output_path.write_text(html)
+
+
+def _strip_html(text):
+ """Remove HTML tags from text."""
+ return HTML_TAG_RE.sub("", text)
+
+
+if __name__ == "__main__":
+ main()
diff --git a/bin/generate_reference_pages.py b/bin/generate_reference_pages.py
new file mode 100644
index 00000000000..7f6418917cb
--- /dev/null
+++ b/bin/generate_reference_pages.py
@@ -0,0 +1,46 @@
+"""Generate reference pages to satisfy MkDocs."""
+
+import os
+from pathlib import Path
+import mkdocs_gen_files
+
+
+def generate_pages(path, output_dir, parent, nav=None):
+ """
+ Walk through a directory and generate Markdown files that
+ include the corresponding HTML snippets.
+ """
+ with os.scandir(path) as it:
+ entries = sorted(it, key=lambda e: e.name)
+ for folder in entries:
+ dir_name = folder.name + ".md"
+ file_path = os.path.join(output_dir, dir_name)
+
+ with open(file_path, "w") as f:
+ f.write(f"# {folder.name}\n")
+ f.write(f'--8<-- "{parent}/{folder.name}/index.html"\n')
+
+ # Add markdown file to navigation
+ if nav is not None:
+ nav[(folder.name)] = dir_name
+
+ it.close()
+
+
+nav = mkdocs_gen_files.Nav()
+
+parent = Path(__file__).resolve().parent.parent
+ref_path = f"{parent}/tmp/reference"
+ref_output_dir = f"{parent}/pages/reference/"
+
+examples_path = f"{parent}/tmp/javascript"
+examples_output_dir = f"{parent}/pages/"
+
+os.makedirs(ref_output_dir, exist_ok=True)
+os.makedirs(examples_output_dir, exist_ok=True)
+
+generate_pages(ref_path, ref_output_dir, "reference", nav)
+generate_pages(examples_path, examples_output_dir, "javascript")
+
+# with mkdocs_gen_files.open("reference/SUMMARY.md", "w") as nav_file:
+# nav_file.writelines(nav.build_literate_nav())
diff --git a/bin/reference_pages.py b/bin/reference_pages.py
new file mode 100644
index 00000000000..46e89ed1acb
--- /dev/null
+++ b/bin/reference_pages.py
@@ -0,0 +1,419 @@
+"""Rebuild a reference page from the Jekyll HTML and plot schema JSON file."""
+
+import argparse
+from html import escape
+import json
+from pathlib import Path
+import re
+import sys
+
+from utils import _log, _str
+
+
+INCLUDE_BLOCK_RE = re.compile(
+ r'{%\s*include\s+posts/reference-block.html\s+parentlink="(.+?)"\s+block="(.+?)"\s+parentpath="(.+?)"\s+mustmatch="(.+?)"\s*%}'
+)
+INCLUDE_TRACE_RE = re.compile(
+ r'\{%\s*include\s+posts/reference-trace.html\s+trace_name="(.+?)"\s+trace_data=site\.data\.plotschema\.traces\.(.+?)\s*%}'
+)
+TITLE_RE = re.compile(r"
.+?(.+?).*
")
+
+
+PLOT_SCHEMA_CONTENT = """\
+
+ A {trace_name} trace is an object with the key "type" equal to "{trace_data_attributes_type}"
+ (i.e. {{"type": "{trace_data_attributes_type}"}}) and any of the keys listed below.
+
{trace_data_meta_description}
+
+"""
+
+PLOT_SCHEMA_REPLACEMENTS = (
+ ("*", '"'),
+ ("{array}", "array"),
+ ("{arrays}", "arrays"),
+ ("{object}", "object"),
+ ("{2D array}", "2D array"),
+)
+
+OBJ_EXCLUDES = {
+ "_arrayAttrRegexps",
+ "_deprecated",
+ "_isLinkedToArray",
+ "_isSubplotObj",
+ "description",
+ "editType",
+ "extras",
+ "flags",
+ "impliedEdits",
+ "items",
+ "magic_underscores",
+ "role",
+ "stream",
+ "transformsuid",
+}
+
+SKIP_MUSTMATCH = {
+ "annotations",
+ "coloraxis",
+ "geo",
+ "images",
+ "mapbox",
+ "polar",
+ "scene",
+ "shapes",
+ "sliders",
+ "smith",
+ "ternary",
+ "updatemenus",
+ "xaxis",
+ "yaxis",
+}
+
+ANNOTATION = " ".join(
+ [
+ " An annotation is a text element that can be placed anywhere in the plot.",
+ "It can be positioned with respect to relative coordinates in the plot",
+ "or with respect to the actual data coordinates of the graph.",
+ "Annotations can be shown with or without an arrow.",
+ ]
+)
+
+
+def main():
+ """Main driver."""
+ args = _parse_args()
+ schema = json.loads(args.schema.read_text())
+ assert "traces" in schema, f"'traces' missing from {args.schema}"
+
+ for src_path in args.inputs:
+ _log(args.verbose > 0, f"...{src_path}")
+ src_content = src_path.read_text()
+
+ m = TITLE_RE.search(src_content)
+ if _log(not m, f"failed to match title in {src_path}"):
+ continue
+ title = m.group(1)
+
+ if m := INCLUDE_TRACE_RE.search(src_content):
+ if _log(
+ m.group(1) != title,
+ f"title {title} != include title {m.group(1)} in {src_path}",
+ ):
+ continue
+ trace_name = m.group(2)
+ trace_data = schema["traces"].get(trace_name, None)
+ if _log(
+ trace_data is None, f"trace '{trace_name}' not found in {args.schema}"
+ ):
+ continue
+ html = _reference_trace(args, schema, src_path, trace_name, trace_data)
+
+ elif m := INCLUDE_BLOCK_RE.search(src_content):
+ parent_link = m.group(1)
+ block = m.group(2)
+ parent_path = m.group(3)
+ mustmatch = m.group(4)
+ accum = []
+ attributes = schema["layout"]["layoutAttributes"]
+ _reference_block(
+ args,
+ src_path,
+ accum,
+ attributes,
+ parent_link,
+ parent_path,
+ block,
+ mustmatch,
+ )
+ html = _replace_special("".join([_str(a) for a in accum]))
+
+ else:
+ _log(not m, f"failed to match include in {src_path}")
+ continue
+
+ output_path = args.outdir / title.replace(".", "/") / "index.html"
+ output_path.parent.mkdir(parents=True, exist_ok=True)
+ output_path.write_text(html)
+
+
+def _bool_or_star(value):
+ if isinstance(value, bool):
+ return str(value).lower()
+ else:
+ return f"*{value}*"
+
+
+def _comma(accum, i, text=","):
+ """Conditionally insert comma in list."""
+ if i > 0:
+ accum.append(f"{text} ")
+
+
+def _get(value, key, default=None):
+ """Simulate Jekyll's obj.field (which is 'nil' if 'obj' is a string)."""
+ if isinstance(value, str):
+ return default
+ assert isinstance(value, dict), f"{value} not recognized"
+ return value.get(key, default)
+
+
+def _parse_args():
+ """Parse command-line arguments."""
+ parser = argparse.ArgumentParser(
+ description="Generate HTML reference documentation"
+ )
+ parser.add_argument("inputs", nargs="+", type=Path, help="Input Jekyll files")
+ parser.add_argument("--schema", type=Path, help="Path to plot schema JSON file")
+ parser.add_argument("--outdir", type=Path, help="Output directory")
+ parser.add_argument(
+ "--verbose", type=int, default=0, help="Integer verbosity level"
+ )
+ return parser.parse_args()
+
+
+def _reference_block(
+ args, src_path, accum, attributes, parent_link, parent_path, block, mustmatch=None
+):
+ """Generate HTML documentation for a trace's attributes."""
+ accum.append("
\n")
+ for key, value in attributes.items():
+ last_three = key[-3:]
+ if (last_three == "src") or (key in OBJ_EXCLUDES):
+ continue
+ if _skip_mustmatch(key, mustmatch):
+ continue
+ accum.append("
\n")
+
+ id = f"{parent_link}-{key}"
+ accum.append(f'\n')
+ accum.append(f" {key}\n")
+ accum.append("\n")
+
+ accum.append(
+ f" Parent:{parent_path.replace('-', '.')}\n"
+ )
+
+ if (key == "type") and (block == "data"):
+ accum.append(" \n")
+ accum.append(f"Type: *{value}*\n")
+
+ if _get(value, "valType"):
+ _reference_block_valtype(src_path, accum, key, value)
+
+ if _get(value, "dflt"):
+ _reference_block_dflt(src_path, accum, key, value)
+
+ if _get(value, "items") and (_get(value, "valType") != "info_array"):
+ _reference_block_array(src_path, accum, key, value)
+ elif _get(value, "role") == "object":
+ accum.append(
+ " Type: {object} containing one or more of the keys listed below.\n"
+ )
+
+ if _get(value, "description", "") != "":
+ accum.append(f"
+Most browsers have a limit of between 8 and 16 WebGL contexts per page. A Plotly WebGL-based figure may use multiple WebGL contexts, but generally you'll be able to render between 4 and 8 figures on one page.
+
+If you exceed the browser limit on WebGL contexts, some figures won't render and you'll see an error. In the console in Chrome, for example, you'll see the error: "Too many active WebGL contexts. Oldest context will be lost".
+
+If you encounter WebGL context limits when using WebGL-based figures, you can use [Virtual WebGL](https://github.com/greggman/virtual-webgl), which virtualizes a single WebGL context into multiple contexts.
+
+To use it, add the following script on your page:
+
+
+
+ {% assign languagelist = site.posts | where:"language","plotly_js" | where:"display_as","basic" | where: "layout","base" | sort: "order" %}
+ {% include posts/documentation_eg.html %}
diff --git a/content/plotly_js/basic/sankey/add_links.html b/content/plotly_js/basic/sankey/add_links.html
new file mode 100644
index 00000000000..e602514e14f
--- /dev/null
+++ b/content/plotly_js/basic/sankey/add_links.html
@@ -0,0 +1,55 @@
+---
+name: Add Links
+language: plotly_js
+suite: sankey
+order: 4
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+d3.json('https://raw.githubusercontent.com/plotly/plotly.js/master/test/image/mocks/sankey_energy.json', function(fig){
+
+var data = {
+ type: "sankey",
+ domain: {
+ x: [0,1],
+ y: [0,1]
+ },
+ orientation: "h",
+ valueformat: ".0f",
+ valuesuffix: "TWh",
+ node: {
+ pad: 15,
+ thickness: 15,
+ line: {
+ color: "black",
+ width: 0.5
+ },
+ label: fig.data[0].node.label,
+ color: fig.data[0].node.color
+ },
+
+ link: {
+ source: fig.data[0].link.source,
+ target: fig.data[0].link.target,
+ value: fig.data[0].link.value,
+ label: fig.data[0].link.label
+ }
+}
+
+var data = [data]
+
+var layout = {
+ title: {
+ text: "Energy forecast for 2050 Source: Department of Energy & Climate Change, Tom Counsell via Mike Bostock"
+ },
+ width: 1118,
+ height: 772,
+ font: {
+ size: 10
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout)
+});
diff --git a/content/plotly_js/basic/sankey/add_nodes.html b/content/plotly_js/basic/sankey/add_nodes.html
new file mode 100644
index 00000000000..2f88e09df3d
--- /dev/null
+++ b/content/plotly_js/basic/sankey/add_nodes.html
@@ -0,0 +1,50 @@
+---
+name: Add Nodes
+language: plotly_js
+suite: sankey
+order: 3
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+d3.json('https://raw.githubusercontent.com/plotly/plotly.js/master/test/image/mocks/sankey_energy.json', function(fig){
+
+var data = {
+ type: "sankey",
+ domain: {
+ x: [0,1],
+ y: [0,1]
+ },
+ orientation: "h",
+ valueformat: ".0f",
+ valuesuffix: "TWh",
+
+ node: {
+ pad: 15,
+ thickness: 15,
+ line: {
+ color: "black",
+ width: 0.5
+ },
+ label: fig.data[0].node.label,
+ color: fig.data[0].node.color
+ }
+}
+
+var data = [data]
+
+var layout = {
+ title: {
+ text: "Energy forecast for 2050 Source: Department of Energy & Climate Change, Tom Counsell via Mike Bostock"
+ },
+ width: 1118,
+ height: 772,
+ font: {
+ size: 10
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout)
+
+});
diff --git a/content/plotly_js/basic/sankey/align-example.html b/content/plotly_js/basic/sankey/align-example.html
new file mode 100644
index 00000000000..2dd8c887ed1
--- /dev/null
+++ b/content/plotly_js/basic/sankey/align-example.html
@@ -0,0 +1,38 @@
+---
+name: Node Alignment
+language: plotly_js
+suite: sankey
+order: 7
+sitemap: false
+arrangement: horizontal
+markdown_content : |
+ You can set the alignment of nodes using `node.align`. In this example, we align nodes to the "right". `node.align` can also be set to "left", "center", or "justify". The default is "justify" if ``node.align` is not set, and is similar to aligning to the "left", except that nodes without outgoing links are moved to the right of the figure.
+---
+
+var data = {
+ type: "sankey",
+ orientation: "h",
+ node: {
+ label: ["0", "1", "2", "3", "4", "5"],
+ align: "right",
+ },
+
+ link: {
+ source: [0, 1, 4, 2, 1],
+ target: [1, 4, 5, 4, 3],
+ value: [4, 2, 3, 1, 2],
+ },
+};
+
+var data = [data];
+
+var layout = {
+ title: {
+ text: "Align Nodes (Right)"
+ },
+ font: {
+ size: 10,
+ },
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/basic/sankey/basic-example.html b/content/plotly_js/basic/sankey/basic-example.html
new file mode 100644
index 00000000000..85bce263878
--- /dev/null
+++ b/content/plotly_js/basic/sankey/basic-example.html
@@ -0,0 +1,43 @@
+---
+name: Basic Sankey Diagram
+language: plotly_js
+suite: sankey
+order: 1
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+var data = {
+ type: "sankey",
+ orientation: "h",
+ node: {
+ pad: 15,
+ thickness: 30,
+ line: {
+ color: "black",
+ width: 0.5
+ },
+ label: ["A1", "A2", "B1", "B2", "C1", "C2"],
+ color: ["blue", "blue", "blue", "blue", "blue", "blue"]
+ },
+
+ link: {
+ source: [0,1,0,2,3,3],
+ target: [2,3,3,4,4,5],
+ value: [8,4,2,8,4,2]
+ }
+}
+
+var data = [data]
+
+var layout = {
+ title: {
+ text: "Basic Sankey"
+ },
+ font: {
+ size: 10
+ }
+}
+
+Plotly.react('myDiv', data, layout)
diff --git a/content/plotly_js/basic/sankey/basic.html b/content/plotly_js/basic/sankey/basic.html
new file mode 100644
index 00000000000..25c79ff0077
--- /dev/null
+++ b/content/plotly_js/basic/sankey/basic.html
@@ -0,0 +1,33 @@
+---
+name: Create Sankey Canvas
+language: plotly_js
+suite: sankey
+order: 2
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+var data = {
+ type: "sankey",
+ domain: {
+ x: [0,1],
+ y: [0,1]
+ },
+ orientation: "h",
+ valueformat: ".0f",
+ valuesuffix: "TWh"
+}
+
+var data = [data]
+
+var layout = {
+ title: {
+ text: "Energy forecast for 2050 Source: Department of Energy & Climate Change, Tom Counsell via Mike Bostock"
+ },
+ width: 1118,
+ height: 772,
+ font: {
+ size: 10
+ }
+}
diff --git a/content/plotly_js/basic/sankey/nodes-position.html b/content/plotly_js/basic/sankey/nodes-position.html
new file mode 100644
index 00000000000..15f4544f276
--- /dev/null
+++ b/content/plotly_js/basic/sankey/nodes-position.html
@@ -0,0 +1,35 @@
+---
+name: Define Node Position
+language: plotly_js
+suite: sankey
+order: 6
+sitemap: false
+arrangement: horizontal
+description:
+markdown_content: |
+ The following example sets [node.x](https://plotly.com/javascript/reference/sankey/#sankey-node-x) and `node.y` to place nodes in the specified locations, except in the `snap arrangement` (default behaviour when `node.x` and `node.y` are not defined) to avoid overlapping of the nodes, therefore, an automatic snapping of elements will be set to define the padding between nodes via [nodepad](https://plotly.com/javascript/reference/sankey/#sankey-node-pad). The other possible arrangements are: 1) perpendicular 2) freeform 3) fixed
+
+---
+var data = [{
+ type: "sankey",
+ arrangement: "snap",
+ node:{
+ label: ["A", "B", "C", "D", "E", "F"],
+ x: [0.2, 0.1, 0.5, 0.7, 0.3, 0.5],
+ y: [0.7, 0.5, 0.2, 0.4, 0.2, 0.3],
+ pad:10}, // 10 Pixels
+ link: {
+ source: [0, 0, 1, 2, 5, 4, 3, 5],
+ target: [5, 3, 4, 3, 0, 2, 2, 3],
+ value: [1, 2, 1, 1, 1, 1, 1, 2]}
+ }]
+
+var layout = {
+ title: {
+ text: "Sankey with manually positioned node"
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout)
+
+
diff --git a/content/plotly_js/basic/sankey/sankey_index.html b/content/plotly_js/basic/sankey/sankey_index.html
new file mode 100644
index 00000000000..b39b8a3227a
--- /dev/null
+++ b/content/plotly_js/basic/sankey/sankey_index.html
@@ -0,0 +1,13 @@
+---
+description: How to make D3.js-based sankey diagrams in Plotly.js.
+display_as: basic
+language: plotly_js
+layout: base
+name: Sankey Diagrams
+order: 10
+permalink: javascript/sankey-diagram/
+thumbnail: thumbnail/sankey.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","sankey" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/basic/sankey/style_sankey.html b/content/plotly_js/basic/sankey/style_sankey.html
new file mode 100644
index 00000000000..eaf7e3fd7c9
--- /dev/null
+++ b/content/plotly_js/basic/sankey/style_sankey.html
@@ -0,0 +1,57 @@
+---
+name: Style Sankey Diagram
+language: plotly_js
+suite: sankey
+order: 5
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+d3.json('https://raw.githubusercontent.com/plotly/plotly.js/master/test/image/mocks/sankey_energy_dark.json', function(fig){
+
+var data = {
+ type: "sankey",
+ domain: {
+ x: [0,1],
+ y: [0,1]
+ },
+ orientation: "h",
+ valueformat: ".0f",
+ valuesuffix: "TWh",
+ node: {
+ pad: 15,
+ thickness: 15,
+ line: {
+ color: "black",
+ width: 0.5
+ },
+ label: fig.data[0].node.label,
+ color: fig.data[0].node.color
+ },
+ link: {
+ source: fig.data[0].link.source,
+ target: fig.data[0].link.target,
+ value: fig.data[0].link.value,
+ label: fig.data[0].link.label
+ }
+}
+
+var data = [data]
+
+var layout = {
+ title: {
+ text: "Energy forecast for 2050 Source: Department of Energy & Climate Change, Tom Counsell via Mike Bostock"
+ },
+ width: 1118,
+ height: 772,
+ font: {
+ size: 10,
+ color: 'white'
+ },
+ plot_bgcolor: 'black',
+ paper_bgcolor: 'black'
+}
+
+Plotly.newPlot('myDiv', data, layout)
+});
diff --git a/content/plotly_js/basic/sunburst/basic-area.html b/content/plotly_js/basic/sunburst/basic-area.html
new file mode 100644
index 00000000000..5e61f50fab5
--- /dev/null
+++ b/content/plotly_js/basic/sunburst/basic-area.html
@@ -0,0 +1,26 @@
+---
+name: Basic Sunburst Chart
+language: plotly_js
+suite: sunburst
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var data = [{
+ type: "sunburst",
+ labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
+ parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
+ values: [10, 14, 12, 10, 2, 6, 6, 4, 4],
+ outsidetextfont: {size: 20, color: "#377eb8"},
+ leaf: {opacity: 0.4},
+ marker: {line: {width: 2}},
+}];
+
+var layout = {
+ margin: {l: 0, r: 0, b: 0, t: 0},
+ width: 500,
+ height: 500
+};
+
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/basic/sunburst/basic-branchvalues-total.html b/content/plotly_js/basic/sunburst/basic-branchvalues-total.html
new file mode 100644
index 00000000000..79dd390f4ef
--- /dev/null
+++ b/content/plotly_js/basic/sunburst/basic-branchvalues-total.html
@@ -0,0 +1,34 @@
+---
+name: Branchvalues
+language: plotly_js
+suite: sunburst
+order: 1.5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ With branchvalues "total", the value of the parent represents the width of its wedge. In the example below,
+ "Enoch" is 4 and "Awan" is 6 and so Enoch's width is 4/6ths of Awans. With branchvalues "remainder", the
+ parent's width is determined by its own value plus those of its children. So, Enoch's width is 4/10ths of
+ Awan's (4 / (6 + 4)).
Note that this means that the sum of the values of the children cannot exceed the
+ value of their parent when branchvalues "total". When branchvalues "relative" (the default), children will not take
+ up all of the space below their parent (unless the parent is the root and it has a value of 0).
+---
+var data = [
+{
+ "type": "sunburst",
+ "labels": ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
+ "parents": ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ],
+ "values": [65, 14, 12, 10, 2, 6, 6, 4, 4],
+ "leaf": {"opacity": 0.4},
+ "marker": {"line": {"width": 2}},
+ "branchvalues": 'total'
+}];
+
+var layout = {
+ "margin": {"l": 0, "r": 0, "b": 0, "t": 0},
+};
+
+
+Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true})
+
+myPlot = document.getElementById("myDiv");
diff --git a/content/plotly_js/basic/sunburst/inside-text-orientation.html b/content/plotly_js/basic/sunburst/inside-text-orientation.html
new file mode 100644
index 00000000000..94d9e34d94d
--- /dev/null
+++ b/content/plotly_js/basic/sunburst/inside-text-orientation.html
@@ -0,0 +1,29 @@
+---
+name: Control Text Orientation Inside Sunburst Chart Sectors
+language: plotly_js
+suite: sunburst
+order: 6
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The `insidetextorientation` attribute controls the orientation of the text inside chart sectors. When set to *auto*, text may be oriented in any direction in order to be as big as possible in the middle of a sector. The *horizontal* option orients text to be parallel with the bottom of the chart, and may make text smaller in order to achieve that goal. The *radial* option orients text along the radius of the sector. The *tangential* option orients text perpendicular to the radius of the sector.
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/coffee-flavors.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) {return row[key]})
+}
+
+ var data = [{
+ type: "sunburst",
+ maxdepth: 2,
+ ids: unpack(rows, 'ids'),
+ labels: unpack(rows, 'labels'),
+ parents: unpack(rows, 'parents'),
+ textposition: 'inside',
+ insidetextorientation: 'radial'
+ }]
+
+ var layout = {margin: {l: 0, r: 0, b: 0, t:0}}
+
+ Plotly.newPlot('myDiv', data, layout)
+})
diff --git a/content/plotly_js/basic/sunburst/large-number-of-slices.html b/content/plotly_js/basic/sunburst/large-number-of-slices.html
new file mode 100644
index 00000000000..4f547131c56
--- /dev/null
+++ b/content/plotly_js/basic/sunburst/large-number-of-slices.html
@@ -0,0 +1,35 @@
+---
+name: Large Number of Slices
+language: plotly_js
+suite: sunburst
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/coffee-flavors.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+}
+
+var data = [
+ {
+ type: "sunburst",
+ maxdepth: 3,
+ ids: unpack(rows, 'ids'),
+ labels: unpack(rows, 'labels'),
+ parents:unpack(rows, 'parents')
+ }
+ ];
+
+var layout = {
+ margin: {l: 0, r: 0, b: 0, t:0},
+ sunburstcolorway:[
+ "#636efa","#EF553B","#00cc96","#ab63fa","#19d3f3",
+ "#e763fa", "#FECB52","#FFA15A","#FF6692","#B6E880"
+ ],
+ extendsunburstcolorway: true
+};
+
+
+Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
+})
diff --git a/content/plotly_js/basic/sunburst/repeated-labels.html b/content/plotly_js/basic/sunburst/repeated-labels.html
new file mode 100644
index 00000000000..260daf4bbf2
--- /dev/null
+++ b/content/plotly_js/basic/sunburst/repeated-labels.html
@@ -0,0 +1,42 @@
+---
+name: Sunburst with Repeated Labels
+language: plotly_js
+suite: sunburst
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [{
+ type: "sunburst",
+ ids: [
+ "North America", "Europe", "Australia", "North America - Football", "Soccer",
+ "North America - Rugby", "Europe - Football", "Rugby",
+ "Europe - American Football","Australia - Football", "Association",
+ "Australian Rules", "Autstralia - American Football", "Australia - Rugby",
+ "Rugby League", "Rugby Union"
+ ],
+ labels: [
+ "North America", "Europe", "Australia", "Football", "Soccer", "Rugby",
+ "Football", "Rugby", "American Football", "Football", "Association",
+ "Australian Rules", "American Football", "Rugby", "Rugby League",
+ "Rugby Union"
+ ],
+ parents: [
+ "", "", "", "North America", "North America", "North America", "Europe",
+ "Europe", "Europe","Australia", "Australia - Football", "Australia - Football",
+ "Australia - Football", "Australia - Football", "Australia - Rugby",
+ "Australia - Rugby"
+ ],
+ outsidetextfont: {size: 20, color: "#377eb8"},
+ // leaf: {opacity: 0.4},
+ marker: {line: {width: 2}},
+}];
+
+var layout = {
+ margin: {l: 0, r: 0, b: 0, t:0},
+ sunburstcolorway:["#636efa","#ef553b","#00cc96"],
+};
+
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/basic/sunburst/sunburst_plotly_js_index.html b/content/plotly_js/basic/sunburst/sunburst_plotly_js_index.html
new file mode 100644
index 00000000000..11a4f3bdb1c
--- /dev/null
+++ b/content/plotly_js/basic/sunburst/sunburst_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to make a D3.js-based sunburst chart in javascript. Visualize hierarchical
+ data spanning outward radially from root to leaves.
+display_as: basic
+language: plotly_js
+layout: base
+name: Sunburst Charts
+order: 9
+permalink: javascript/sunburst-charts/
+thumbnail: thumbnail/sunburst.gif
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","sunburst" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
+
+See https://plotly/.com/javascript/reference/sunburst/ for more information and chart attribute options!
\ No newline at end of file
diff --git a/content/plotly_js/basic/table/alternating-rows.html b/content/plotly_js/basic/table/alternating-rows.html
new file mode 100644
index 00000000000..6bcce02aa4c
--- /dev/null
+++ b/content/plotly_js/basic/table/alternating-rows.html
@@ -0,0 +1,41 @@
+---
+name: Alternating Row Colors
+language: plotly_js
+suite: tables
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+var values = [
+ ['Salaries', 'Office', 'Merchandise', 'Legal', 'TOTAL'],
+ [1200000, 20000, 80000, 2000, 12120000],
+ [1300000, 20000, 70000, 2000, 130902000],
+ [1300000, 20000, 120000, 2000, 131222000],
+ [1400000, 20000, 90000, 2000, 14102000]]
+
+var headerColor = "grey";
+var rowEvenColor = "lightgrey";
+var rowOddColor = "white";
+
+var data = [{
+ type: 'table',
+ header: {
+ values: [["EXPENSES"], ["Q1"],
+ ["Q2"], ["Q3"], ["Q4"]],
+ align: "center",
+ line: {width: 1, color: 'black'},
+ fill: {color: headerColor},
+ font: {family: "Arial", size: 12, color: "white"}
+ },
+ cells: {
+ values: values,
+ align: "center",
+ line: {color: "black", width: 1},
+ fill: {color: [[rowOddColor,rowEvenColor,rowOddColor,
+ rowEvenColor,rowOddColor]]},
+ font: {family: "Arial", size: 11, color: ["black"]}
+ }
+}]
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/basic/table/basic-example.html b/content/plotly_js/basic/table/basic-example.html
new file mode 100644
index 00000000000..5a736e181a2
--- /dev/null
+++ b/content/plotly_js/basic/table/basic-example.html
@@ -0,0 +1,35 @@
+---
+name: Basic Table
+language: plotly_js
+suite: tables
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+var values = [
+ ['Salaries', 'Office', 'Merchandise', 'Legal', 'TOTAL'],
+ [1200000, 20000, 80000, 2000, 12120000],
+ [1300000, 20000, 70000, 2000, 130902000],
+ [1300000, 20000, 120000, 2000, 131222000],
+ [1400000, 20000, 90000, 2000, 14102000]]
+
+var data = [{
+ type: 'table',
+ header: {
+ values: [["EXPENSES"], ["Q1"],
+ ["Q2"], ["Q3"], ["Q4"]],
+ align: "center",
+ line: {width: 1, color: 'black'},
+ fill: {color: "grey"},
+ font: {family: "Arial", size: 12, color: "white"}
+ },
+ cells: {
+ values: values,
+ align: "center",
+ line: {color: "black", width: 1},
+ font: {family: "Arial", size: 11, color: ["black"]}
+ }
+}]
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/basic/table/from-a-csv.html b/content/plotly_js/basic/table/from-a-csv.html
new file mode 100644
index 00000000000..674ebe81256
--- /dev/null
+++ b/content/plotly_js/basic/table/from-a-csv.html
@@ -0,0 +1,61 @@
+---
+name: Table From a CSV
+language: plotly_js
+suite: tables
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/Mining-BTC-180.csv", function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+ var headerNames = d3.keys(rows[0]);
+
+ var headerValues = [];
+ var cellValues = [];
+ for (i = 0; i < headerNames.length; i++) {
+ headerValue = [headerNames[i]];
+ headerValues[i] = headerValue;
+ cellValue = unpack(rows, headerNames[i]);
+ cellValues[i] = cellValue;
+ }
+
+ // clean date
+ for (i = 0; i < cellValues[1].length; i++) {
+ var dateValue = cellValues[1][i].split(' ')[0]
+ cellValues[1][i] = dateValue
+ }
+
+
+var data = [{
+ type: 'table',
+ columnwidth: [150,600,1000,900,600,500,1000,1000,1000],
+ columnorder: [0,1,2,3,4,5,6,7,8,9],
+ header: {
+ values: headerValues,
+ align: "center",
+ line: {width: 1, color: 'rgb(50, 50, 50)'},
+ fill: {color: ['rgb(235, 100, 230)']},
+ font: {family: "Arial", size: 8, color: "white"}
+ },
+ cells: {
+ values: cellValues,
+ align: ["center", "center"],
+ line: {color: "black", width: 1},
+ fill: {color: ['rgba(228, 222, 249, 0.65)','rgb(235, 193, 238)', 'rgba(228, 222, 249, 0.65)']},
+ font: {family: "Arial", size: 9, color: ["black"]}
+ }
+}]
+
+var layout = {
+ title: {
+ text: "Bitcoin mining stats for 180 days"
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/basic/table/sizing-rows-columns.html b/content/plotly_js/basic/table/sizing-rows-columns.html
new file mode 100644
index 00000000000..af3cd8e02b9
--- /dev/null
+++ b/content/plotly_js/basic/table/sizing-rows-columns.html
@@ -0,0 +1,40 @@
+---
+name: Changing Size of Rows and Columns
+language: plotly_js
+suite: tables
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+
+var values = [
+ ['Salaries', 'Office', 'Merchandise', 'Legal', 'TOTAL EXPENSES'],
+ ["Lorem ipsum dolor sit amet, tollit discere inermis pri ut. Eos ea iusto timeam, an prima laboramus vim. Id usu aeterno adversarium, summo mollis timeam vel ad",
+ "Lorem ipsum dolor sit amet, tollit discere inermis pri ut. Eos ea iusto timeam, an prima laboramus vim. Id usu aeterno adversarium, summo mollis timeam vel ad",
+ "Lorem ipsum dolor sit amet, tollit discere inermis pri ut. Eos ea iusto timeam, an prima laboramus vim. Id usu aeterno adversarium, summo mollis timeam vel ad",
+ "Lorem ipsum dolor sit amet, tollit discere inermis pri ut. Eos ea iusto timeam, an prima laboramus vim. Id usu aeterno adversarium, summo mollis timeam vel ad",
+ "Lorem ipsum dolor sit amet, tollit discere inermis pri ut. Eos ea iusto timeam, an prima laboramus vim. Id usu aeterno adversarium, summo mollis timeam vel ad"]]
+
+var data = [{
+ type: 'table',
+ columnorder: [1,2],
+ columnwidth: [80,400],
+ header: {
+ values: [["EXPENSES as of July 2017"], ["DESCRIPTION"]],
+ align: ["left", "center"],
+ height: 40,
+ line: {width: 1, color: '#506784'},
+ fill: {color: '#119DFF'},
+ font: {family: "Arial", size: 12, color: "white"}
+ },
+ cells: {
+ values: values,
+ align: ["left", "center"],
+ height: 30,
+ line: {color: "#506784", width: 1},
+ fill: {color: ['#25FEFD', 'white']},
+ font: {family: "Arial", size: 11, color: ["#506784"]}
+ }
+}]
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/basic/table/styled-example.html b/content/plotly_js/basic/table/styled-example.html
new file mode 100644
index 00000000000..14e24ad39e6
--- /dev/null
+++ b/content/plotly_js/basic/table/styled-example.html
@@ -0,0 +1,36 @@
+---
+name: Styled Table
+language: plotly_js
+suite: tables
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+var values = [
+ ['Salaries', 'Office', 'Merchandise', 'Legal', 'TOTAL'],
+ [1200000, 20000, 80000, 2000, 12120000],
+ [1300000, 20000, 70000, 2000, 130902000],
+ [1300000, 20000, 120000, 2000, 131222000],
+ [1400000, 20000, 90000, 2000, 14102000]]
+
+var data = [{
+ type: 'table',
+ header: {
+ values: [["EXPENSES"], ["Q1"],
+ ["Q2"], ["Q3"], ["Q4"]],
+ align: ["left", "center"],
+ line: {width: 1, color: '#506784'},
+ fill: {color: '#119DFF'},
+ font: {family: "Arial", size: 12, color: "white"}
+ },
+ cells: {
+ values: values,
+ align: ["left", "center"],
+ line: {color: "#506784", width: 1},
+ fill: {color: ['#25FEFD', 'white']},
+ font: {family: "Arial", size: 11, color: ["#506784"]}
+ }
+}]
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/basic/table/table-subplot.html b/content/plotly_js/basic/table/table-subplot.html
new file mode 100644
index 00000000000..47b3b4ef3ad
--- /dev/null
+++ b/content/plotly_js/basic/table/table-subplot.html
@@ -0,0 +1,10 @@
+---
+name: Table Subplots
+language: plotly_js
+suite: tables
+order: 6
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Please see [Table Subplots](https://plotly.com/javascript/table-subplots) documentation.
+---
diff --git a/content/plotly_js/basic/table/tables-plotly_js_index.html b/content/plotly_js/basic/table/tables-plotly_js_index.html
new file mode 100644
index 00000000000..0a6c56f6738
--- /dev/null
+++ b/content/plotly_js/basic/table/tables-plotly_js_index.html
@@ -0,0 +1,13 @@
+---
+description: How to make a D3.js-based tables in javascript.
+display_as: basic
+language: plotly_js
+layout: base
+name: Tables
+order: 12
+permalink: javascript/table/
+thumbnail: thumbnail/table.gif
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","tables" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/basic/treemap/basic-treemap.html b/content/plotly_js/basic/treemap/basic-treemap.html
new file mode 100644
index 00000000000..8eade33f0c8
--- /dev/null
+++ b/content/plotly_js/basic/treemap/basic-treemap.html
@@ -0,0 +1,17 @@
+---
+name: Basic Treemap
+language: plotly_js
+suite: treemap
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ [Treemap charts](https://en.wikipedia.org/wiki/Treemapping) visualize hierarchical data using nested rectangles. Same as [Sunburst](https://plotly.com/javascript/sunburst-charts/) the hierarchy is defined by [labels](https://plotly.com/javascript/reference/treemap/#treemap-labels) and [parents](https://plotly.com/javascript/reference/treemap/#treemap-parents) attributes. Click on one sector to zoom in/out, which also displays a pathbar in the upper-left corner of your treemap. To zoom out you can use the path bar as well.
+---
+data = [{
+ type: "treemap",
+ labels: ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"],
+ parents: ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve" ]
+}]
+
+Plotly.newPlot('myDiv', data)
\ No newline at end of file
diff --git a/content/plotly_js/basic/treemap/nested-layers-treemap.html b/content/plotly_js/basic/treemap/nested-layers-treemap.html
new file mode 100644
index 00000000000..ab8561039d3
--- /dev/null
+++ b/content/plotly_js/basic/treemap/nested-layers-treemap.html
@@ -0,0 +1,24 @@
+---
+name: Nested Layers in Treemap
+language: plotly_js
+suite: treemap
+order: 6
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The following example uses hierarchical data that includes layers and grouping. Treemap and [Sunburst](https://plotly.com/javascript/sunburst-charts/) charts reveal insights into the data, and the format of your hierarchical data. [maxdepth](https://plotly.com/javascript/reference/treemap/#treemap-maxdepth) attribute sets the number of rendered sectors from the given level.
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/coffee-flavors.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]});
+}
+
+var data = [{
+ type: "treemap",
+ ids: unpack(rows, 'ids'),
+ labels: unpack(rows, 'labels'),
+ parents: unpack(rows, 'parents')
+ }];
+
+Plotly.newPlot('myDiv', data);
+})
diff --git a/content/plotly_js/basic/treemap/set-colorscale-treemap.html b/content/plotly_js/basic/treemap/set-colorscale-treemap.html
new file mode 100644
index 00000000000..c5937b115a5
--- /dev/null
+++ b/content/plotly_js/basic/treemap/set-colorscale-treemap.html
@@ -0,0 +1,23 @@
+---
+name:
+language: plotly_js
+suite: treemap
+order: 5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ This example uses marker.colorscale to change the sector's color.
+---
+var values = ["11", "12", "13", "14", "15", "20", "30"]
+var labels = ["A1", "A2", "A3", "A4", "A5", "B1", "B2"]
+var parents = ["", "A1", "A2", "A3", "A4", "", "B1"]
+
+var data = [{
+ type: 'treemap',
+ values: values,
+ labels: labels,
+ parents: parents,
+ marker: {colorscale: 'Blues'}
+}]
+
+Plotly.newPlot('myDiv', data)
\ No newline at end of file
diff --git a/content/plotly_js/basic/treemap/set-colorway-treemap.html b/content/plotly_js/basic/treemap/set-colorway-treemap.html
new file mode 100644
index 00000000000..a8f67b46a67
--- /dev/null
+++ b/content/plotly_js/basic/treemap/set-colorway-treemap.html
@@ -0,0 +1,20 @@
+---
+name:
+language: plotly_js
+suite: treemap
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ This example uses `treemapcolorway` attribute, which should be set in layout.
+---
+var labels = ["A1", "A2", "A3", "A4", "A5", "B1", "B2"];
+var parents = ["", "A1", "A2", "A3", "A4", "", "B1"];
+var data = [{
+ type: 'treemap',
+ labels: labels,
+ parents: parents
+}]
+var layout = {treemapcolorway: ["pink", "lightgray"]}
+
+Plotly.newPlot('myDiv', data, layout)
\ No newline at end of file
diff --git a/content/plotly_js/basic/treemap/set-marker-color-treemap.html b/content/plotly_js/basic/treemap/set-marker-color-treemap.html
new file mode 100644
index 00000000000..50c5f7b2538
--- /dev/null
+++ b/content/plotly_js/basic/treemap/set-marker-color-treemap.html
@@ -0,0 +1,21 @@
+---
+name: Set Color of Treemap Sectors
+language: plotly_js
+suite: treemap
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ There are three different ways to change the color of the sectors in Treemap:
+ 1) [marker.colors](https://plotly.com/javascript/reference/treemap/#treemap-marker-colors), 2) [colorway](https://plotly.com/javascript/reference/layout/#layout-colorway), 3) [colorscale](https://plotly.com/javascript/reference/treemap/#treemap-marker-colorscale). The following examples show how to use each of them.
+---
+var labels = ["A1", "A2", "A3", "A4", "A5", "B1", "B2"];
+var parents = ["", "A1", "A2", "A3", "A4", "", "B1"];
+var data = [{
+ type: 'treemap',
+ labels: labels,
+ parents: parents,
+ marker: {colors: ["pink", "royalblue", "lightgray", "purple", "cyan", "lightgray", "lightblue"]}
+}]
+
+Plotly.newPlot('myDiv', data)
\ No newline at end of file
diff --git a/content/plotly_js/basic/treemap/treemap_attributes.html b/content/plotly_js/basic/treemap/treemap_attributes.html
new file mode 100644
index 00000000000..494ea0dad9d
--- /dev/null
+++ b/content/plotly_js/basic/treemap/treemap_attributes.html
@@ -0,0 +1,59 @@
+---
+name: Set Different Attributes in Treemap
+language: plotly_js
+suite: treemap
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ This example uses the following attributes:
+
+
[values](https://plotly.com/javascript/reference/treemap/#treemap-values): sets the values associated with each of the sectors.
+
[textinfo](https://plotly.com/javascript/reference/treemap/#treemap-textinfo): determines which trace information appear on the graph that can be 'text', 'value', 'current path', 'percent root', 'percent entry', and 'percent parent', or any combination of them.
+
[pathbar](https://plotly.com/javascript/reference/treemap/#treemap-pathbar): a main extra feature of treemap to display the current path of the visible portion of the hierarchical map. It may also be useful for zooming out of the graph.
+
[branchvalues](https://plotly.com/javascript/reference/treemap/#treemap-branchvalues): determines how the items in `values` are summed. When set to "total", items in `values` are taken to be value of all its descendants. In the example below Eva = 65, which is equal to 14 + 12 + 10 + 2 + 6 + 6 + 1 + 4.
+
+ When set to "remainder", items in `values` corresponding to the root and the branches sectors are taken to be the extra part not part of the sum of the values at their leaves.
+---
+var labels = ["Eve", "Cain", "Seth", "Enos", "Noam", "Abel", "Awan", "Enoch", "Azura"]
+var parents = ["", "Eve", "Eve", "Seth", "Seth", "Eve", "Eve", "Awan", "Eve"]
+var data = [{
+ type: "treemap",
+ labels: labels,
+ parents: parents,
+ values: [10, 14, 12, 10, 2, 6, 6, 1, 4],
+ textinfo: "label+value+percent parent+percent entry",
+ domain: {"x": [0, 0.48]},
+ outsidetextfont: {"size": 20, "color": "#377eb8"},
+ marker: {"line": {"width": 2}},
+ pathbar: {"visible": false}
+ },{
+ type: "treemap",
+ branchvalues: "total",
+ labels: labels,
+ parents: parents,
+ domain: {x: [0.52, 1]},
+ values: [65, 14, 12, 10, 2, 6, 6, 1, 4],
+ textinfo: "label+value+percent parent+percent entry",
+ outsidetextfont: {"size": 20, "color": "#377eb8"},
+ marker: {"line": {"width": 2}},
+ pathbar: {"visible": false}
+ }];
+var layout = {
+ annotations: [{
+ showarrow: false,
+ text: "branchvalues: remainder",
+ x: 0.25,
+ xanchor: "center",
+ y: 1.1,
+ yanchor: "bottom"
+ }, {
+ showarrow: false,
+ text: "branchvalues: total",
+ x: 0.75,
+ xanchor: "center",
+ y: 1.1,
+ yanchor: "bottom"
+ }]}
+
+Plotly.newPlot('myDiv', data, layout)
\ No newline at end of file
diff --git a/content/plotly_js/basic/treemap/treemap_plotly_js_index.html b/content/plotly_js/basic/treemap/treemap_plotly_js_index.html
new file mode 100644
index 00000000000..2b9b034cb3b
--- /dev/null
+++ b/content/plotly_js/basic/treemap/treemap_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to make a D3.js-based treemap chart in javascript to visualize hierarchical
+ data.
+display_as: basic
+language: plotly_js
+layout: base
+name: Treemaps
+order: 11
+permalink: javascript/treemaps/
+thumbnail: thumbnail/treemap.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","treemap" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
+
+See https://plotly/.com/javascript/reference/treemap/ for more information and chart attribute options!
\ No newline at end of file
diff --git a/content/plotly_js/chart-events/callbacks-click/click-annotation.html b/content/plotly_js/chart-events/callbacks-click/click-annotation.html
new file mode 100644
index 00000000000..f37cc608913
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-click/click-annotation.html
@@ -0,0 +1,44 @@
+---
+name: Create annotation on click event
+plot_url: https://codepen.io/plotly/embed/Kzjamd/?height=465&theme-id=15263&default-tab=result
+arrangement: horizontal
+language: plotly_js
+suite: click-events
+sitemap: false
+order: 2
+---
+
+var myPlot = document.getElementById('myDiv'),
+ N = 100,
+ x = d3.range(N),
+ y1 = d3.range(N).map( d3.random.normal() ),
+ y2 = d3.range(N).map( d3.random.normal(-2) ),
+ y3 = d3.range(N).map( d3.random.normal(2) ),
+ trace1 = { x:x, y:y1, type:'scatter', mode:'lines', name:'Jeff' },
+ trace2 = { x:x, y:y2, type:'scatter', mode:'lines', name:'Terren' },
+ trace3 = { x:x, y:y3, type:'scatter', mode:'lines', name:'Arthur' },
+ data = [ trace1, trace2, trace3 ],
+ layout = {
+ hovermode:'closest',
+ title: {text: 'Click on Points to add an Annotation on it'}
+ };
+
+Plotly.newPlot('myDiv', data, layout);
+
+myPlot.on('plotly_click', function(data){
+ var pts = '';
+ for(var i=0; i < data.points.length; i++){
+ annotate_text = 'x = '+data.points[i].x +
+ 'y = '+data.points[i].y.toPrecision(4);
+
+ annotation = {
+ text: annotate_text,
+ x: data.points[i].x,
+ y: parseFloat(data.points[i].y.toPrecision(4))
+ }
+
+ annotations = self.layout.annotations || [];
+ annotations.push(annotation);
+ Plotly.relayout('myDiv',{annotations: annotations})
+ }
+});
diff --git a/content/plotly_js/chart-events/callbacks-click/click-event-data.html b/content/plotly_js/chart-events/callbacks-click/click-event-data.html
new file mode 100644
index 00000000000..5a3f3d6dc32
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-click/click-event-data.html
@@ -0,0 +1,22 @@
+---
+name: Click Event Data
+language: plotly_js
+suite: click-events
+sitemap: false
+order: 0
+---
+
+{
+ points: [{
+ curveNumber: 2, // index in data of the trace associated with the selected point
+ pointNumber: 2, // index of the selected point
+ x: 5, // x value
+ y: 600, // y value
+ data: {/* */}, // ref to the trace as sent to Plotly.newPlot associated with the selected point
+ fullData: {/* */}, // ref to the trace including all the defaults
+ xaxis: {/* */}, // ref to x-axis object (i.e layout.xaxis) associated with the selected point
+ yaxis: {/* */} // ref to y-axis object " "
+ }, {
+ /* similarly for other selected points */
+ }]
+}
diff --git a/content/plotly_js/chart-events/callbacks-click/click.html b/content/plotly_js/chart-events/callbacks-click/click.html
new file mode 100644
index 00000000000..750302195f7
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-click/click.html
@@ -0,0 +1,30 @@
+---
+name: Binding to Click Events
+plot_url: https://codepen.io/plotly/embed/QbZmZY/?height=465&theme-id=15263&default-tab=result
+arrangement: horizontal
+language: plotly_js
+suite: click-events
+sitemap: false
+order: 1
+---
+var myPlot = document.getElementById('myDiv'),
+ N = 16,
+ x = d3.range(N),
+ y = d3.range(N).map( d3.random.normal() ),
+ data = [ { x:x, y:y, type:'scatter',
+ mode:'markers', marker:{size:16} } ],
+ layout = {
+ hovermode:'closest',
+ title: {text: 'Click on Points'}
+ };
+
+Plotly.newPlot('myDiv', data, layout);
+
+myPlot.on('plotly_click', function(data){
+ var pts = '';
+ for(var i=0; i < data.points.length; i++){
+ pts = 'x = '+data.points[i].x +'\ny = '+
+ data.points[i].y.toPrecision(4) + '\n\n';
+ }
+ alert('Closest point clicked:\n\n'+pts);
+});
diff --git a/content/plotly_js/chart-events/callbacks-click/click_index.html b/content/plotly_js/chart-events/callbacks-click/click_index.html
new file mode 100644
index 00000000000..832148489a1
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-click/click_index.html
@@ -0,0 +1,14 @@
+---
+name: Click Events
+permalink: javascript/click-events/
+description: How to bind callback functions to click events in D3.js-based JavaScript charts.
+layout: base
+thumbnail: thumbnail/click.jpg
+language: plotly_js
+page_type: example_index
+display_as: chart_events
+order: 1
+redirect_from: javascript-graphing-library/click-events/
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","click-events" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
diff --git a/content/plotly_js/chart-events/callbacks-hover/hover-bind.html b/content/plotly_js/chart-events/callbacks-hover/hover-bind.html
new file mode 100644
index 00000000000..9d655212e9e
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-hover/hover-bind.html
@@ -0,0 +1,36 @@
+---
+name: Capturing Hover Events: Data
+plot_url: https://codepen.io/plotly/embed/oXadPM/?height=550&theme-id=15263&default-tab=result
+language: plotly_js
+suite: hover-events
+sitemap: false
+arrangement: horizontal
+order: 1
+---
+var myPlot = document.getElementById('myDiv'),
+ hoverInfo = document.getElementById('hoverinfo'),
+ N = 16,
+ x = d3.range(N),
+ y1 = d3.range(N).map( d3.random.normal() ),
+ y2 = d3.range(N).map( d3.random.normal() ),
+ data = [ { x:x, y:y1, type:'scatter', name:'Trial 1',
+ mode:'markers', marker:{size:16} },
+ { x:x, y:y2, type:'scatter', name:'Trial 2',
+ mode:'markers', marker:{size:16} } ];
+ layout = {
+ hovermode:'closest',
+ title: {text: 'Hover on Points'}
+ };
+
+Plotly.newPlot('myDiv', data, layout);
+
+myPlot.on('plotly_hover', function(data){
+ var infotext = data.points.map(function(d){
+ return (d.data.name+': x= '+d.x+', y= '+d.y.toPrecision(3));
+ });
+
+ hoverInfo.innerHTML = infotext.join(' ');
+})
+ .on('plotly_unhover', function(data){
+ hoverInfo.innerHTML = '';
+});
diff --git a/content/plotly_js/chart-events/callbacks-hover/hover-complex.html b/content/plotly_js/chart-events/callbacks-hover/hover-complex.html
new file mode 100644
index 00000000000..333ff05c6b7
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-hover/hover-complex.html
@@ -0,0 +1,12 @@
+---
+name: Combined Click and Hover Events
+plot_url: https://codepen.io/plotly/embed/eJOyej/?height=600&theme-id=15263&default-tab=result
+language: plotly_js
+suite: hover-events
+sitemap: false
+arrangement: horizontal
+height: 600
+order: 4
+---
+
+This is a more complex example that uses both hover, and click events to display traces. Take a look in the codepen javascript!
diff --git a/content/plotly_js/chart-events/callbacks-hover/hover-coupled.html b/content/plotly_js/chart-events/callbacks-hover/hover-coupled.html
new file mode 100644
index 00000000000..19fda3d62af
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-hover/hover-coupled.html
@@ -0,0 +1,48 @@
+---
+name: Coupled Hover Events
+plot_url: https://codepen.io/plotly/embed/zvzdGb/?height=550&theme-id=15263&default-tab=result
+language: plotly_js
+suite: hover-events
+sitemap: false
+arrangement: horizontal
+order: 3
+---
+var myPlot = document.getElementById('myDiv'),
+ N = 12,
+ x1 = d3.range(N).map( d3.random.normal() ),
+ x2 = d3.range(N).map( d3.random.normal() ),
+ x3 = d3.range(N).map( d3.random.normal() ),
+ y1 = d3.range(N).map( d3.random.normal() ),
+ y2 = d3.range(N).map( d3.random.normal() ),
+ y3 = d3.range(N).map( d3.random.normal() ),
+ months = ['January', 'February', 'March', 'April',
+ 'May', 'June', 'July', 'August',
+ 'September', 'October', 'November', 'December']
+ data = [{ x: x1, y: y1, text: months, type: 'scatter', name: '2014', hoverinfo: 'text+x+y',
+ mode: 'markers', marker: {color: 'rgba(200, 50, 100, .7)', size: 16}
+ },
+ { x: x2, y: y2, text: months, type: 'scatter', name: '2015', hoverinfo: 'text+x+y',
+ mode: 'markers', marker: {color: 'rgba(120, 20, 130, .7)', size: 16}
+ },
+ { x: x3, y: y3, text: months, type: 'scatter', name: '2016', hoverinfo: 'text+x+y',
+ mode: 'markers', marker: {color: 'rgba(10, 180, 180, .8)', size: 16}
+ }];
+ layout = {
+ hovermode:'closest',
+ title: {text: 'Display Hover Info for Related Points'},
+ xaxis:{zeroline:false, hoverformat: '.2r'},
+ yaxis:{zeroline:false, hoverformat: '.2r'}
+ };
+
+Plotly.newPlot('myDiv', data, layout);
+
+myPlot.on('plotly_hover', function (eventdata){
+ var points = eventdata.points[0],
+ pointNum = points.pointNumber;
+
+ Plotly.Fx.hover('myDiv',[
+ { curveNumber:0, pointNumber:pointNum },
+ { curveNumber:1, pointNumber:pointNum },
+ { curveNumber:2, pointNumber:pointNum },
+ ]);
+});
diff --git a/content/plotly_js/chart-events/callbacks-hover/hover-event-data.html b/content/plotly_js/chart-events/callbacks-hover/hover-event-data.html
new file mode 100644
index 00000000000..7841f4404c4
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-hover/hover-event-data.html
@@ -0,0 +1,23 @@
+---
+name: Hover Event Data
+language: plotly_js
+suite: hover-events
+sitemap: false
+arrangement: horizontal
+order: 0
+---
+
+{
+ points: [{
+ curveNumber: 2, // index in data of the trace associated with the selected point
+ pointNumber: 2, // index of the selected point
+ x: 5, // x value
+ y: 600, // y value
+ data: {/* */}, // ref to the trace as sent to Plotly.newPlot associated with the selected point
+ fullData: {/* */}, // ref to the trace including all the defaults
+ xaxis: {/* */}, // ref to x-axis object (i.e layout.xaxis) associated with the selected point
+ yaxis: {/* */} // ref to y-axis object " "
+ }, {
+ /* similarly for other selected points */
+ }]
+}
diff --git a/content/plotly_js/chart-events/callbacks-hover/hover-manual.html b/content/plotly_js/chart-events/callbacks-hover/hover-manual.html
new file mode 100644
index 00000000000..2d04f984221
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-hover/hover-manual.html
@@ -0,0 +1,40 @@
+---
+name: Triggering Hover Events
+plot_url: https://codepen.io/plotly/embed/bdmMQN/?height=550&theme-id=15263&default-tab=result
+language: plotly_js
+suite: hover-events
+sitemap: false
+arrangement: horizontal
+order: 2
+---
+var myPlot = document.getElementById('myDiv'),
+ hoverButton = document.getElementById('hoverbutton'),
+ N = 16,
+ x = d3.range(N),
+ y1 = d3.range(N).map( d3.random.normal() ),
+ y2 = d3.range(N).map( d3.random.normal() ),
+ data = [ { x:x, y:y1, type:'scatter', name:'Trial 1',
+ mode:'markers', marker:{size:16} },
+ { x:x, y:y2, type:'scatter', name:'Trial 2',
+ mode:'markers', marker:{size:16} } ];
+ layout = {
+ hovermode:'closest',
+ title: {text: 'Click "Go" button to trigger hover'}
+ };
+
+Plotly.newPlot('myDiv', data, layout);
+
+myPlot.on('plotly_beforehover',function(){
+ return false;
+});
+
+hoverButton.addEventListener('click', function(){
+ var curve1 = Math.floor(Math.random()*2),
+ curve2 = Math.floor(Math.random()*2),
+ point1 = Math.floor(Math.random()*14),
+ point2 = Math.floor(Math.random()*14);
+ Plotly.Fx.hover('myDiv',[
+ {curveNumber:curve1, pointNumber:point1},
+ {curveNumber:curve2, pointNumber:point2}
+ ]);
+});
diff --git a/content/plotly_js/chart-events/callbacks-hover/hover_index.html b/content/plotly_js/chart-events/callbacks-hover/hover_index.html
new file mode 100644
index 00000000000..64a7f4a8d3b
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-hover/hover_index.html
@@ -0,0 +1,15 @@
+---
+name: Hover Events
+permalink: javascript/hover-events/
+description: How to bind callback functions to hover events in D3.js-based JavaScript charts.
+layout: base
+thumbnail: thumbnail/hover.jpg
+language: plotly_js
+page_type: example_index
+display_as: chart_events
+order: 2
+arrangement: horizontal
+redirect_from: javascript-graphing-library/hover-events/
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","hover-events" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
diff --git a/content/plotly_js/chart-events/callbacks-hover/pixel-hover.html b/content/plotly_js/chart-events/callbacks-hover/pixel-hover.html
new file mode 100644
index 00000000000..1e3c5b73cc2
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-hover/pixel-hover.html
@@ -0,0 +1,37 @@
+---
+name: Capturing Hover Events: Pixels
+plot_url: https://codepen.io/plotly/embed/xgaEaR/?height=550&theme-id=15263&default-tab=result
+language: plotly_js
+suite: hover-events
+order: 1.5
+sitemap: false
+arrangement: horizontal
+---
+
+var myPlot = document.getElementById('myDiv'),
+ hoverInfo = document.getElementById('hoverinfo'),
+ N = 16,
+ x = d3.range(N),
+ y1 = d3.range(N).map(d3.random.normal()),
+ y2 = d3.range(N).map(d3.random.normal()),
+ data = [{x:x, y:y1, type:'scatter', name:'Trial 1',
+ mode:'markers', marker:{size:16}},
+ {x:x, y:y2, type:'scatter', name:'Trial 2',
+ mode:'markers', marker:{size:16}}],
+ layout = {hovermode:'closest',
+ title: {text: 'Hover on Points to see Pixel Coordinates'}};
+
+Plotly.newPlot('myDiv', data, layout);
+
+myPlot.on('plotly_hover', function(data){
+ var xaxis = data.points[0].xaxis,
+ yaxis = data.points[0].yaxis;
+ var infotext = data.points.map(function(d){
+ return ('width: '+xaxis.l2p(d.x)+', height: '+yaxis.l2p(d.y));
+ });
+
+ hoverInfo.innerHTML = infotext.join(' ');
+})
+ .on('plotly_unhover', function(data){
+ hoverInfo.innerHTML = '';
+});
diff --git a/content/plotly_js/chart-events/callbacks-zoom/zoom-bind.html b/content/plotly_js/chart-events/callbacks-zoom/zoom-bind.html
new file mode 100644
index 00000000000..01b4174e973
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-zoom/zoom-bind.html
@@ -0,0 +1,27 @@
+---
+name: Binding to Zoom Events
+plot_url: https://codepen.io/plotly/embed/dogexw/?height=530&theme-id=15263&default-tab=result
+language: plotly_js
+suite: zoom-events
+sitemap: false
+order: 0
+arrangement: horizontal
+---
+var graphDiv = document.getElementById('myDiv');
+
+var N = 40,
+ x = d3.range(N),
+ y = d3.range(N).map( d3.random.normal() ),
+ data = [ { x:x, y:y } ];
+ layout = { title: {text: 'Click-drag to zoom' }};
+
+Plotly.newPlot(graphDiv, data, layout);
+
+graphDiv.on('plotly_relayout',
+ function(eventdata){
+ alert( 'ZOOM!' + '\n\n' +
+ 'Event data:' + '\n' +
+ JSON.stringify(eventdata) + '\n\n' +
+ 'x-axis start:' + eventdata['xaxis.range[0]'] + '\n' +
+ 'x-axis end:' + eventdata['xaxis.range[1]'] );
+ });
diff --git a/content/plotly_js/chart-events/callbacks-zoom/zoom_index.html b/content/plotly_js/chart-events/callbacks-zoom/zoom_index.html
new file mode 100644
index 00000000000..0be89456838
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-zoom/zoom_index.html
@@ -0,0 +1,14 @@
+---
+name: Zoom Events
+permalink: javascript/zoom-events/
+description: How to bind callback functions to zoom events in D3.js-based JavaScript charts.
+layout: base
+thumbnail: thumbnail/zoom.jpg
+language: plotly_js
+page_type: example_index
+display_as: chart_events
+order: 4
+redirect_from: javascript-graphing-library/zoom-events/
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","zoom-events" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
diff --git a/content/plotly_js/chart-events/events/order10_afterplot.html b/content/plotly_js/chart-events/events/order10_afterplot.html
new file mode 100644
index 00000000000..d24ef1687cc
--- /dev/null
+++ b/content/plotly_js/chart-events/events/order10_afterplot.html
@@ -0,0 +1,27 @@
+---
+name: Afterplot Event
+plot_url: https://codepen.io/plotly/embed/YeGGdy/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: events
+order: 10.2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The event handler: `plotly_afterplot`, can be used to trigger an event each time a chart is plotted. This also includes re-plotting after the restyling or relayout of a plot.
+ Users also have the option of adding a post-plot handler to the plot call with the following syntax: `Plotly.newPlot('myDiv', data, layout, config).then(postPlotHandler);`
+
+ The simple example below logs a console message each time the chart is plotted. Zoom or pan on the graph below to trigger the `plotly_afterplot` handler.
+---
+var myPlot = document.getElementById('myDiv'),
+ N = 20,
+ x = d3.range(N),
+ y = d3.range(N).map( d3.random.normal() ),
+ data = [{x:x, y:y, type:'scatter',
+ mode:'markers', marker:{size:14}}
+ ];
+
+Plotly.newPlot('myDiv', data);
+
+myPlot.on('plotly_afterplot', function(){
+ console.log('done plotting');
+});
diff --git a/content/plotly_js/chart-events/events/order1_using_events.html b/content/plotly_js/chart-events/events/order1_using_events.html
new file mode 100644
index 00000000000..6251316c17e
--- /dev/null
+++ b/content/plotly_js/chart-events/events/order1_using_events.html
@@ -0,0 +1,17 @@
+---
+name: Using Plotly.js Events
+plot_url:
+language: plotly_js
+suite: events
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Plotly graphs emit events prefixed with plotly_ (i.e. `'plotly_click'`, `'plotly_hover'`, `'plotly_relayout'`) when interacted with (clicked, hovered, zoomed). Event handlers can be bound to events using the `.on` method that is exposed by the plot div object.
+
+ In addition to the event handler, some events emit additional information about the point(s) or plot interacted with. The following documentation organizes Plotly events based on the accessible information emitted with the event: [event data](), [update data](), or [no additional data](). The following page provides a description and example of each Plotly event as well as the structure of the data or update returned with the event.
+---
+myDiv.on('plotly_event', function(){
+ // do something;
+ });
+
diff --git a/content/plotly_js/chart-events/events/order2_simple_event_ex.html b/content/plotly_js/chart-events/events/order2_simple_event_ex.html
new file mode 100644
index 00000000000..3966f722a11
--- /dev/null
+++ b/content/plotly_js/chart-events/events/order2_simple_event_ex.html
@@ -0,0 +1,26 @@
+---
+name: Simple Event Example
+plot_url: https://codepen.io/plotly/embed/NbvPLa/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: events
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Here's a simple example using a Plotly event. Click on a point on the chart below to see an alert triggered by the `plotly_click` event.
+---
+var myPlot = document.getElementById('myDiv'),
+ x = [1, 2, 3, 4, 5],
+ y = [10, 20, 30, 20, 10],
+ data = [{x:x, y:y, type:'scatter',
+ mode:'markers', marker:{size:20}
+ }],
+ layout = {hovermode:'closest',
+ title: {text: 'Click on Points'}
+ };
+
+Plotly.newPlot('myDiv', data, layout);
+
+myPlot.on('plotly_click', function(){
+ alert('You clicked this Plotly chart!');
+});
diff --git a/content/plotly_js/chart-events/events/order3-1_event_data.html b/content/plotly_js/chart-events/events/order3-1_event_data.html
new file mode 100644
index 00000000000..632066a8b51
--- /dev/null
+++ b/content/plotly_js/chart-events/events/order3-1_event_data.html
@@ -0,0 +1,77 @@
+---
+name: Event Data
+plot_url:
+language: plotly_js
+suite: events
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Many Plotly events emit event data when the event is triggered. Event data is information about the data point related to the event (i.e. the point clicked).
+ The following events emit event data: [`plotly_click`](), [`plotly_hover`](), [`plotly_unhover`](), [`plotly_selecting`](), and [`plotly_selected`]().
+ Event data differs depending on the type of plot the user is interacting with. The event data structure for Cartesian (2D) plots, 3D plots, and maps can be found below, along with examples of each event.
+---
+// Cartesian
+{
+ points: [{
+ curveNumber: 1, // index in data of the trace associated with the selected point
+ pointNumber: 1, // index of the selected point
+ x: 1, // x value
+ y: 1, // y value
+ data: {/* */}, // ref to the trace as sent to Plotly.newPlot associated with the selected point
+ fullData: {/* */}, // ref to the trace including all of the default attributes
+ xaxis: {/* */}, // ref to x-axis object (i.e layout.xaxis) associated with the selected point
+ yaxis: {/* */} // ref to y-axis object " "
+ }, {
+ /* similarly for other selected points */
+ }]
+}
+
+// Cartesian Histograms
+{
+ points: [{
+ curveNumber: 1, // index in data of the trace associated with the selected point
+ pointNumbers: [1, 5, 28, 33, 41, ...], // Array of indices of the points aggregated into selected bin
+ x: 1, // x value
+ y: 45, // y value
+ data: {/* */}, // ref to the trace as sent to Plotly.newPlot associated with the selected point
+ fullData: {/* */}, // ref to the trace including all of the default attributes
+ xaxis: {/* */}, // ref to x-axis object (i.e layout.xaxis) associated with the selected point
+ yaxis: {/* */} // ref to y-axis object " "
+ }, {
+ /* similarly for other selected points */
+ }]
+}
+
+// 3D
+{
+ points: [{
+ curveNumber: 2, // index in data of the trace associated with the selected point
+ pointNumber: 2, // index of the selected point
+ x: 5, // x value
+ y: 600, // y value
+ z: 12, // z value
+ data: {/* */}, // ref to the trace as sent to Plotly.newPlot associated with the selected point
+ fullData: {/* */}, // ref to the trace including all of the default attributes
+ xaxis: {/* */}, // ref to x-axis object (i.e layout.xaxis) associated with the selected point
+ yaxis: {/* */} // ref to y-axis object " "
+ zaxis: {/* */} // ref to z-axis object " "
+ }, {
+ /* similarly for other selected points */
+ }]
+}
+
+// Maps
+{
+ points: [{
+ curveNumber: 2, // index in data of the trace associated with the selected point
+ pointNumber: 2, // index of the selected point
+ lat: 50, // latitude value
+ lon: -12, // longitude value
+ data: {/* */}, // ref to the trace as sent to Plotly.newPlot associated with the selected point
+ fullData: {/* */}, // ref to the trace including all of the default attributes
+ location: //
+ }, {
+ /* similarly for other selected points */
+ }]
+}
diff --git a/content/plotly_js/chart-events/events/order5_hover_event.html b/content/plotly_js/chart-events/events/order5_hover_event.html
new file mode 100644
index 00000000000..30ccbe924b7
--- /dev/null
+++ b/content/plotly_js/chart-events/events/order5_hover_event.html
@@ -0,0 +1,56 @@
+---
+name: Hover Event
+plot_url: https://codepen.io/plotly/embed/xgxbrj/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: events
+order: 5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Here's a simple example of using the data returned from the `plotly_hover` and `plotly_unhover` events to restyle the graph. After creating a plot, we can change the color of the point hovered on by updating the `marker.color` array at the index of the point we hovered on then using `Plotly.restyle()` to apply the update. Then we can use `plotly_unhover` to change the `marker.color` back to the original color. For more examples of using `plotly_hover` events, see: https://plotly.com/javascript/hover-events/
+---
+var myPlot = document.getElementById('myDiv'),
+ x = [1, 2, 3, 4, 5, 6, 7],
+ y = [1, 2, 3, 2, 3, 4, 3],
+ colors =['#00000','#00000','#00000',
+ '#00000','#00000','#00000',
+ '#00000'],
+ data = [{x:x, y:y,
+ type:'scatter',
+ mode:'markers', marker:{size:16, color:colors}}],
+ layout = {
+ hovermode:'closest',
+ title: {text: 'Hover on a Point to Change Color'}
+ };
+
+Plotly.newPlot('myDiv', data, layout);
+
+myPlot.on('plotly_hover', function(data){
+ var pn='',
+ tn='',
+ colors=[];
+ for(var i=0; i < data.points.length; i++){
+ pn = data.points[i].pointNumber;
+ tn = data.points[i].curveNumber;
+ colors = data.points[i].data.marker.color;
+ };
+ colors[pn] = '#C54C82';
+
+ var update = {'marker':{color: colors, size:16}};
+ Plotly.restyle('myDiv', update, [tn]);
+});
+
+myPlot.on('plotly_unhover', function(data){
+ var pn='',
+ tn='',
+ colors=[];
+ for(var i=0; i < data.points.length; i++){
+ pn = data.points[i].pointNumber;
+ tn = data.points[i].curveNumber;
+ colors = data.points[i].data.marker.color;
+ };
+ colors[pn] = '#00000';
+
+ var update = {'marker':{color: colors, size:16}};
+ Plotly.restyle('myDiv', update, [tn]);
+});
diff --git a/content/plotly_js/chart-events/events/order6_click_event.html b/content/plotly_js/chart-events/events/order6_click_event.html
new file mode 100644
index 00000000000..8f26565b2c6
--- /dev/null
+++ b/content/plotly_js/chart-events/events/order6_click_event.html
@@ -0,0 +1,39 @@
+---
+name: Click Event
+plot_url: https://codepen.io/plotly/embed/Obxbdv/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: events
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Here's a simple example of using the data returned from the `plotly_click` event to restyle the graph. After creating a plot, we can change the color of the point clicked on by updating the `marker.color` array at the index of the point we clicked on then using `Plotly.restyle()` to apply the update. For more examples of using `plotly_click` events, see: [https://plotly.com/javascript/click-events/]()
+---
+var myPlot = document.getElementById('myDiv'),
+ x = [1, 2, 3, 4, 5, 6],
+ y = [1, 2, 3, 2, 3, 4],
+ colors = ['#00000','#00000','#00000',
+ '#00000','#00000','#00000'],
+ data = [{x:x, y:y, type:'scatter',
+ mode:'markers', marker:{size:16, color:colors}}],
+ layout = {
+ hovermode:'closest',
+ title: {text: 'Click on a Point to Change Color Double Click (anywhere) to Change it Back'}
+ };
+
+Plotly.newPlot('myDiv', data, layout);
+
+myPlot.on('plotly_click', function(data){
+ var pn='',
+ tn='',
+ colors=[];
+ for(var i=0; i < data.points.length; i++){
+ pn = data.points[i].pointNumber;
+ tn = data.points[i].curveNumber;
+ colors = data.points[i].data.marker.color;
+ };
+ colors[pn] = '#C54C82';
+
+ var update = {'marker':{color: colors, size:16}};
+ Plotly.restyle('myDiv', update, [tn]);
+});
diff --git a/content/plotly_js/chart-events/events/order6_legendclick_event.html b/content/plotly_js/chart-events/events/order6_legendclick_event.html
new file mode 100644
index 00000000000..b28ff8fd3ea
--- /dev/null
+++ b/content/plotly_js/chart-events/events/order6_legendclick_event.html
@@ -0,0 +1,51 @@
+---
+name: Legend Click Events
+plot_url: https://codepen.io/plotly/embed/vazxKv/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: events
+order: 4.1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ `plotly_legendclick` and `plotly_legenddoubleclick` allow customization of the plotly legend. The default behaviour of `plotly_legendclick` is to hide a trace and the default behavior of `plotly_legenddoubleclick` is to select one trace and hide all the others.
+ We can add to the default behaviour by creating a new `plotly_legendclick` event with a function of our choice. We can also disable the default behaviour by creating a function that returns `false`. In the example below, we do both in order to create a `plotly_legendclick` event which changes the marker color back to black instead of erasing the trace.
+---
+var myPlot = document.getElementById('myDiv'),
+ x = [1, 2, 3, 4, 5, 6],
+ y = [1, 2, 3, 2, 3, 4],
+ y2 = [1, 4, 7, 6, 1, 5],
+ colors = [['#5C636E','#5C636E','#5C636E','#5C636E','#5C636E','#5C636E'],
+ ['#393e46','#393e46','#393e46','#393e46','#393e46','#393e46']],
+ data = [{x:x, y:y, type:'scatter',
+ mode:'line', line:{ color:'#5C636E'},marker:{size:16, color:colors[0]}},
+ {x:x, y:y2, type:'scatter',
+ mode:'line',line:{ color:'#393e46'}, marker:{size:16, color:colors[1]}}],
+ layout = {
+ showlegend: true,
+ hovermode:'closest',
+ title: {text: 'Click on a Point to Change Color Click on a Trace in the Legend to Change Back One Trace Only'}
+ };
+
+Plotly.newPlot('myDiv', data, layout);
+
+myPlot.on('plotly_click', function(data){
+ var pn='',
+ tn='',
+ colors=[];
+ for(var i=0; i < data.points.length; i++){
+ pn = data.points[i].pointNumber;
+ tn = data.points[i].curveNumber;
+ colors = data.points[i].data.marker.color;
+ };
+ colors[pn] = '#C54C82';
+ var update = {'marker':{color: colors, size:16}};
+ Plotly.restyle('myDiv', update,[tn]);
+});
+
+myPlot.on('plotly_legendclick', function(data){
+ var trColors = [['#5C636E','#5C636E','#5C636E','#5C636E','#5C636E','#5C636E'],
+ ['#393e46','#393e46','#393e46','#393e46','#393e46','#393e46']];
+ var update = {'marker':{color: trColors[data.curveNumber], size:16}};
+ Plotly.restyle('myDiv', update,[data.curveNumber]);
+ return false;
+});
diff --git a/content/plotly_js/chart-events/events/order6_selected_event.html b/content/plotly_js/chart-events/events/order6_selected_event.html
new file mode 100644
index 00000000000..151cd0040d4
--- /dev/null
+++ b/content/plotly_js/chart-events/events/order6_selected_event.html
@@ -0,0 +1,100 @@
+---
+name: Select Event
+plot_url: https://codepen.io/plotly/embed/BpayyX/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: events
+order: 6
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Here's a simple example using the data returned from the `plotly_selected` event. `plotly_selected` returns event data for all points selected simultaneously. After creating a scatter plot with random data and two histograms that display the x and y distributions of that random data, we can select points by clicking and dragging on the plot. Upon `plotly_selected` the histograms will update to display the distribution of the x and y values of the selected points. The color of the scatter plot will be updated as well to highlight the selected points. For more examples of using `plotly_selected` and `plotly_selecting` events, see: https://plotly.com/javascript/lasso-selection/
+---
+var graphDiv = document.getElementById('myDiv');
+var N = 1000;
+var color1 = '#7b3294';
+var color1Light = '#c2a5cf';
+var colorX = '#ffa7b5';
+var colorY = '#fdae61';
+
+function randomArray() {
+ var out = new Array(N);
+ for(var i = 0; i < N; i++) {
+ out[i] = Math.random();
+ }
+ return out;
+}
+var x = randomArray();
+var y = randomArray();
+
+Plotly.newPlot(graphDiv, [{
+ type: 'scatter',
+ mode: 'markers',
+ x: x,
+ y: y,
+ xaxis: 'x',
+ yaxis: 'y',
+ name: 'random data',
+ marker: {color: color1, size: 10}
+}, {
+ type: 'histogram',
+ x: x,
+ xaxis: 'x2',
+ yaxis: 'y2',
+ name: 'x coord dist.',
+ marker: {color: colorX}
+}, {
+ type: 'histogram',
+ x: y,
+ xaxis: 'x3',
+ yaxis: 'y3',
+ name: 'y coord dist.',
+ marker: {color: colorY}
+}], {
+ title: {
+ text: 'Lasso around the scatter points to see sub-distributions'
+ },
+ dragmode: 'lasso',
+ xaxis: {
+ zeroline: false,
+ },
+ yaxis: {
+ domain: [0.55, 1],
+ },
+ xaxis2: {
+ domain: [0, 0.45],
+ anchor: 'y2',
+ },
+ yaxis2: {
+ domain: [0, 0.45],
+ anchor: 'x2'
+ },
+ xaxis3: {
+ domain: [0.55, 1],
+ anchor: 'y3'
+ },
+ yaxis3: {
+ domain: [0, 0.45],
+ anchor: 'x3'
+ }
+});
+
+graphDiv.on('plotly_selected', function(eventData) {
+ var x = [];
+ var y = [];
+
+ var colors = [];
+ for(var i = 0; i < N; i++) colors.push(color1Light);
+
+ eventData.points.forEach(function(pt) {
+ x.push(pt.x);
+ y.push(pt.y);
+ colors[pt.pointNumber] = color1;
+ });
+
+ Plotly.restyle(graphDiv, {
+ x: [x, y],
+ xbins: {}
+ }, [1, 2]);
+
+ Plotly.restyle(graphDiv, 'marker.color', [colors], [0]);
+});
diff --git a/content/plotly_js/chart-events/events/order7_doubleclick_event.html b/content/plotly_js/chart-events/events/order7_doubleclick_event.html
new file mode 100644
index 00000000000..cd04eabd056
--- /dev/null
+++ b/content/plotly_js/chart-events/events/order7_doubleclick_event.html
@@ -0,0 +1,46 @@
+---
+name: Double Click Event
+plot_url: https://codepen.io/plotly/embed/WoZOdq/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: events
+order: 10.3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ In addition to `plotly_click`, `plotly_doubleclick` can be used as an event handle in Plotly charts as well. You may already be familiar with `plotly_doubleclick` if you regularly use Plotly's zoom and pan functionality, double clicking on the graph will restore the axes ranges after zooming into a specific area. Unlike `plotly_click`, a `plotly_doubleclick` is registered upon clicking anywhere on the graph (not just data points), therefore, `plotly_doubleclick` does not return data. In the following example, we'll build off of our `plotly_click` example, and reset the color of our data points upon double clicking anywhere on the graph.
+---
+var myPlot = document.getElementById('myDiv'),
+ x = [1, 2, 3, 4, 5, 6],
+ y = [1, 2, 3, 2, 3, 4],
+ colors = ['#00000','#00000','#00000',
+ '#00000','#00000','#00000'],
+ data = [{x:x, y:y, type:'scatter',
+ mode:'markers', marker:{size:16, color:colors}}],
+ layout = {
+ hovermode:'closest',
+ title: {text: 'Click on a Point to Change Color Double Click (anywhere) to Change it Back'}
+ };
+
+Plotly.newPlot('myDiv', data, layout);
+
+myPlot.on('plotly_click', function(data){
+ var pn='',
+ tn='',
+ colors=[];
+ for(var i=0; i < data.points.length; i++){
+ pn = data.points[i].pointNumber;
+ tn = data.points[i].curveNumber;
+ colors = data.points[i].data.marker.color;
+ };
+ colors[pn] = '#C54C82';
+
+ var update = {'marker':{color: colors, size:16}};
+ Plotly.restyle('myDiv', update, [tn]);
+});
+
+myPlot.on('plotly_doubleclick', function(data){
+ var orgColors = ['#00000','#00000','#00000',
+ '#00000','#00000','#00000'];
+ var update = {'marker':{color: orgColors, size:16}};
+ Plotly.restyle('myDiv', update);
+});
diff --git a/content/plotly_js/chart-events/events/order7_update_data.html b/content/plotly_js/chart-events/events/order7_update_data.html
new file mode 100644
index 00000000000..671f5a6c868
--- /dev/null
+++ b/content/plotly_js/chart-events/events/order7_update_data.html
@@ -0,0 +1,63 @@
+---
+name: Update Data
+plot_url:
+language: plotly_js
+suite: events
+order: 7
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The following Plotly events emit update information when the event is triggered: [`plotly_restyle`]() and [`plotly_relayout`]().
+ The update emitted with `plotly_restyle` is similar across plot types and includes an array containing an object of the newly updated
+ attributes and an array of the trace numbers that were updated.
+
+ For Cartesian (2D) plots, `plotly_relayout` emits only the xaxis and yaxis ranges which were directly changed by the triggering event.
+ For 3D plots, [`layout.scene.camera`](https://plotly.com/javascript/reference/layout/scene/#layout-scene-camera) data is similarly emitted.
+ See the full structures below:
+---
+// plotly_restyle update
+[
+ {update}, // update object -- attribute updated: new value
+ [0] // array of traces updated
+]
+
+// plotly_relayout update: Cartesian
+//// Upon resizing plot:
+{
+ xaxis.range[0]: , // new value if xaxis.range[0] was updated
+ xaxis.range[1]: ,
+ yaxis.range[0]: , // new value if yaxis.range[0] was updated
+ yaxis.range[1]:
+}
+//// Upon autosizing plot:
+{
+ xaxis.autorange: true,
+ yaxis.autorange: true
+}
+
+// plotly_relayout update: 3D
+// a subset of the following data will be emitted depending on
+// which attributes were changed by the triggering event.
+{
+ scene: {
+ center: { // https://plotly.com/javascript/reference/layout/scene/#layout-scene-camera-center
+ x: 0,
+ y: 0,
+ z: 0
+ }
+ },
+ {
+ eye: { // https://plotly.com/javascript/reference/layout/scene/#layout-scene-camera-eye
+ x: 1.25,
+ y: 1.25,
+ z: 1.25
+ }
+ }.
+ {
+ up: { // https://plotly.com/javascript/reference/layout/scene/#layout-scene-camera-up
+ x: 0,
+ y: 0,
+ z: 1
+ }
+ }
+}
diff --git a/content/plotly_js/chart-events/events/order8_add_events.html b/content/plotly_js/chart-events/events/order8_add_events.html
new file mode 100644
index 00000000000..ba06ad73872
--- /dev/null
+++ b/content/plotly_js/chart-events/events/order8_add_events.html
@@ -0,0 +1,17 @@
+---
+name: Additional Events
+plot_url:
+language: plotly_js
+suite: events
+order: 10
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The following Plotly events do not emit additional data or update information: [`plotly_webglcontextlost`](#webgl-context-lost-event), [`plotly_afterplot`](#afterplot-event), [`plotly_autosize`](), [`plotly_deselect`](), [`plotly_doubleclick`](#double-click-event), [`plotly_redraw`](), and [`plotly_animated`](). These event handlers can be used to notify or trigger an additional event with the following syntax:
+---
+
+function eventTriggeredHandler() {
+ /* add your event triggered handler here */
+}
+
+myDiv.on('plotly_event', eventTriggeredHandler);
\ No newline at end of file
diff --git a/content/plotly_js/chart-events/events/plotly_js_events_index.html b/content/plotly_js/chart-events/events/plotly_js_events_index.html
new file mode 100644
index 00000000000..91a980a453c
--- /dev/null
+++ b/content/plotly_js/chart-events/events/plotly_js_events_index.html
@@ -0,0 +1,10 @@
+---
+name: Event Handlers
+permalink: javascript/plotlyjs-events/
+description: Definitions and examples of how to use Plotly.js event handlers to add additional interactive capabilities to Plotly charts.
+layout: base
+language: plotly_js
+page_type: example_index
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","events" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
diff --git a/content/plotly_js/chart-events/events/webglcontextlost.html b/content/plotly_js/chart-events/events/webglcontextlost.html
new file mode 100644
index 00000000000..dd17a1e1ee0
--- /dev/null
+++ b/content/plotly_js/chart-events/events/webglcontextlost.html
@@ -0,0 +1,12 @@
+---
+name: Webgl Context Lost Event
+language: plotly_js
+suite: events
+order: 10.1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Plotly graphs which use WebGL receive a "WebGL context" from the browser which gives them access to gpu resources.
+ A program may lose its WebGL context if the browser is overloaded with them and is forced to shut one down.
+ The event handler: `plotly_webglcontextlost`, can be used to trigger an event after a graph loses it's WebGL context.
+---
diff --git a/content/plotly_js/chart-events/hover/basic-hovertemplate.html b/content/plotly_js/chart-events/hover/basic-hovertemplate.html
new file mode 100644
index 00000000000..1cdb3a2afa5
--- /dev/null
+++ b/content/plotly_js/chart-events/hover/basic-hovertemplate.html
@@ -0,0 +1,36 @@
+---
+name: Hovertemplate
+language: plotly_js
+suite: hover
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [
+ {
+ type: 'scatter',
+ mode: 'lines+markers',
+ x: [1,2,3,4,5],
+ y: [2.02825,1.63728,6.83839,4.8485,4.73463],
+ hovertemplate: 'Price: $%{y:.2f}' +
+ ' X: %{x} ' +
+ '%{text}',
+ text: ["Text A", "Text B", "Text C", "Text D", "Text E"],
+ showlegend: false
+ },
+ {
+ x: [1,2,3,4,5],
+ y: [3.02825,2.63728,4.83839,3.8485,1.73463],
+ hovertemplate: 'Price: %{y:$.2f}',
+ showlegend: false
+ }
+];
+
+var layout = {
+ title: {
+ text: "Set hover text with hovertemplate"
+ },
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/chart-events/plotly_js-chart-events-index.html b/content/plotly_js/chart-events/plotly_js-chart-events-index.html
new file mode 100644
index 00000000000..309c524f1c3
--- /dev/null
+++ b/content/plotly_js/chart-events/plotly_js-chart-events-index.html
@@ -0,0 +1,28 @@
+---
+permalink: javascript/chart-events/
+name: More Chart Events
+description: Plotly.js makes interactive, publication-quality graphs online. Examples of binding callbacks to Plotly chart interactions.
+layout: langindex
+language: plotly_js
+display_as: chart_events
+thumbnail: thumbnail/mixed.jpg
+page_type: example_index
+---
+
+
+
+
+---
+var data = [{
+ x:['trees', 'flowers', 'hedges'],
+ y: [90, 130, 40],
+ type: 'bar'}]
+
+var layout = {
+ title: {
+ text: 'Remove Modebar Buttons'
+ },
+ showlegend: false
+}
+
+Plotly.newPlot('myDiv', data, layout, {modeBarButtonsToRemove: ['toImage']})
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/eula/eula.html b/content/plotly_js/fundamentals/eula/eula.html
new file mode 100644
index 00000000000..ba7def0d395
--- /dev/null
+++ b/content/plotly_js/fundamentals/eula/eula.html
@@ -0,0 +1,45 @@
+---
+name: Plotly.js
+permalink: javascript/eula/
+description: End User License Agreement for Plotly.js and other Plotly products
+layout: langindex
+language: plotly_js
+sitemap: false
+redirect_from: javascript-graphing-library/eula/
+---
+
Plotly EULA
+
+
+
+ Please read the full Plotly.js End User License Agreement before using, downloading, or purchasing the software.
+
+
+
Free use of "Basic Charts"
+
+
The Plotly.js Basic Charts module is free for unlimited use if all links and references to Plotly remain visible and unmodified.
+
All Restricted and Permitted Uses below and the full EULA apply.
+
+
+
Permitted Uses
+
+
Plotly.js can be used with an unlimited number of SaaS projects, web applications, intranets, and websites.
+
Each person who directly or indirectly creates an application or user interface containing Plotly.js is considered a developer.
+
Source editing is allowed
+
+
+
Restricted Uses
+
+
Plotly.js distribution with your desktop software or hardware requires an OEM license. Please contact sales@plot.ly
+
Plotly.js use with IPython notebook, RStudio, MATLAB, or another desktop analytics IDE requires a Plotly Desktop license.
+
Plotly.js integration with Spotfire, Cognos, Qlikview, or Tableau products requires an additional support plan and license for viewers. Please contact sales@plot.ly
+
+
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","Plotly.js" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
+
+
diff --git a/content/plotly_js/fundamentals/font/font_plotly_js_index.html b/content/plotly_js/fundamentals/font/font_plotly_js_index.html
new file mode 100644
index 00000000000..f617762096a
--- /dev/null
+++ b/content/plotly_js/fundamentals/font/font_plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to edit and style the font of D3.js-based graphs in javascript.
+display_as: file_settings
+layout: base
+name: Text and Font Styling
+order: 8
+page_type: u-guide
+permalink: javascript/font/
+redirect_from: javascript-graphing-library/font/
+thumbnail: thumbnail/hover-text.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","font" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/font/global-font.html b/content/plotly_js/fundamentals/font/global-font.html
new file mode 100644
index 00000000000..57233991e50
--- /dev/null
+++ b/content/plotly_js/fundamentals/font/global-font.html
@@ -0,0 +1,26 @@
+---
+name: Global Font Properties
+language: plotly_js
+suite: font
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ type: 'scatter'
+ }
+];
+var layout = {
+ title: {
+ text: 'Global Font'
+ },
+ font: {
+ family: 'Courier New, monospace',
+ size: 18,
+ color: '#7f7f7f'
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/horizontal-legend/horizontal_legend.html b/content/plotly_js/fundamentals/horizontal-legend/horizontal_legend.html
new file mode 100644
index 00000000000..fa5a3deeeb2
--- /dev/null
+++ b/content/plotly_js/fundamentals/horizontal-legend/horizontal_legend.html
@@ -0,0 +1,34 @@
+---
+name: Basic Example
+arrangement: horizontal
+language: plotly_js
+suite: horizontal_legend
+order: 1
+sitemap: false
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
+ type: 'scatter',
+ name:'Plot 1'
+ };
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
+ type: 'scatter',
+ name:'Plot 2'
+ };
+var trace3 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 5, 3, 10, 5.33, 2.24, 4.4, 5.1, 7.2],
+ type: 'scatter',
+ name:'Plot 3'
+ };
+
+var data = [trace1, trace2, trace3];
+var layout = {
+ showlegend: true,
+ legend: {"orientation": "h"}
+ };
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/horizontal-legend/horizontal_legend_js_index.html b/content/plotly_js/fundamentals/horizontal-legend/horizontal_legend_js_index.html
new file mode 100644
index 00000000000..3cfb8760c76
--- /dev/null
+++ b/content/plotly_js/fundamentals/horizontal-legend/horizontal_legend_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to make a D3.js-based horizontal legend plot in JavaScript.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Horizontal Legends
+order: 16
+page_type: u-guide
+permalink: javascript/horizontal-legend/
+redirect_from: javascript-graphing-library/horizontal-legends/
+thumbnail: thumbnail/images.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","horizontal_legend" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/hover/hover-chart-basic.html b/content/plotly_js/fundamentals/hover/hover-chart-basic.html
new file mode 100644
index 00000000000..a54adfc7fc1
--- /dev/null
+++ b/content/plotly_js/fundamentals/hover/hover-chart-basic.html
@@ -0,0 +1,24 @@
+---
+name: Adding Hover Text to Data in Line and Scatter Plots
+language: plotly_js
+suite: hover
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: [0, .5, 1, 1.5, 2],
+ y: [1, 3, 2, 4, 2],
+ mode: 'markers',
+ marker: {size:16},
+ text: ['Text A', 'Text B', 'Text C', 'Text D', 'Text E'],
+ type: 'scatter'
+ }
+];
+var layout = {
+ title: {
+ text: 'Hover over the points to see the text'
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/hover/hover_plotly_js_index.html b/content/plotly_js/fundamentals/hover/hover_plotly_js_index.html
new file mode 100644
index 00000000000..6cf94337c4d
--- /dev/null
+++ b/content/plotly_js/fundamentals/hover/hover_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to add hover text and format hover values in D3.js-based javascript
+ charts.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Hover Text and Formatting
+order: 17
+page_type: u-guide
+permalink: javascript/hover-text-and-formatting/
+redirect_from: javascript-graphing-library/hover-text-and-formatting/
+thumbnail: thumbnail/hover-text.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","hover" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/hover/rounding-hover-values.html b/content/plotly_js/fundamentals/hover/rounding-hover-values.html
new file mode 100644
index 00000000000..a7509525598
--- /dev/null
+++ b/content/plotly_js/fundamentals/hover/rounding-hover-values.html
@@ -0,0 +1,44 @@
+---
+name: Rounding X and Y Hover Values
+language: plotly_js
+suite: hover
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+// Round x and y hover values by setting hoverformat in layout.xaxis and/or layout.yaxis
+// using D3 number formatting ( https://github.com/mbostock/d3/wiki/Formatting )
+
+var N = 40,
+ x = d3.range(N).map( d3.random.normal() ),
+ y1 = d3.range(N).map( d3.random.normal() ),
+ y2 = d3.range(N).map( d3.random.normal() ),
+ data = [{ x:x, y:y1, type:'scatter', mode:'markers',
+ marker:{color:'rgba(200, 50, 100, .7)', size:16},
+ hoverinfo:"x+y"
+ },
+ { x:x, y:y2, type:'scatter', mode:'markers',
+ marker:{color:'rgba(10, 180, 180, .8)', size:16},
+ hoverinfo:"x+y"}];
+ layout = {
+ hovermode: 'closest',
+ title: {
+ text: 'Formatting X & Y Hover Values'
+ },
+ xaxis: {
+ zeroline: false,
+ hoverformat: '.2f',
+ title: {
+ text: 'Rounded: 2 values after the decimal point on hover'
+ }
+ },
+ yaxis: {
+ zeroline: false,
+ hoverformat: '.2r',
+ title: {
+ text: 'Rounded: 2 significant values on hover'
+ }
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/hover/unified-hover-template.html b/content/plotly_js/fundamentals/hover/unified-hover-template.html
new file mode 100644
index 00000000000..5b032f5e1e8
--- /dev/null
+++ b/content/plotly_js/fundamentals/hover/unified-hover-template.html
@@ -0,0 +1,47 @@
+---
+name: Custom Unified Hover Title
+language: plotly_js
+suite: hover
+order: 5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ *New in 3.1*
+
+ Customize the title shown in unified hovermode by specifying `unifiedhovertitle.text`. The unified hover title is a template string that supports using variables from the data. Numbers are formatted using d3-format's syntax `%{variable:d3-format}`, for example `"Price: %{y:$.2f}"`. Dates are formatted using d3-time-format's syntax `%{variable|d3-time-format}`, for example `"Day: %{x|%A}"`.
+---
+var data = [
+ {
+ x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
+ y: [150.25, 165.50, 142.75, 178.90],
+ mode: 'lines+markers',
+ name: 'Stock A',
+ type: 'scatter'
+ },
+ {
+ x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
+ y: [85.30, 92.15, 88.45, 95.20],
+ mode: 'lines+markers',
+ name: 'Stock B',
+ type: 'scatter'
+ }
+];
+
+var layout = {
+ title: {
+ text: "Stock Prices with Custom Unified Hover Title"
+ },
+ hovermode: 'x unified',
+ xaxis: {
+ title: 'Date',
+ unifiedhovertitle: {
+ text: '%{x|%A, %B %d, %Y}'
+ }
+ },
+ yaxis: {
+ title: 'Price (USD)',
+ tickprefix: '$'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/hover/unified-hover.html b/content/plotly_js/fundamentals/hover/unified-hover.html
new file mode 100644
index 00000000000..15d90721268
--- /dev/null
+++ b/content/plotly_js/fundamentals/hover/unified-hover.html
@@ -0,0 +1,43 @@
+---
+name: Unified Hover Mode
+language: plotly_js
+suite: hover
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ If "x unified" (or "y unified"), a single hoverlabel will appear for multiple points at the closest x- (or y-) coordinate within the `hoverdistance` with the caveat that no more than one hoverlabel will appear per trace.
+---
+var data = [
+ {
+ x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
+ y: [10, 15, 12, 18],
+ mode: 'markers+lines',
+ name: 'Series A',
+ hovertemplate: null,
+ type: 'scatter'
+ },
+ {
+ x: ['2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01'],
+ y: [8, 12, 16, 14],
+ mode: 'markers+lines',
+ name: 'Series B',
+ hovertemplate: null,
+ type: 'scatter'
+ }
+];
+
+var layout = {
+ title: {
+ text: "layout.hovermode='x unified'"
+ },
+ hovermode: 'x unified',
+ xaxis: {
+ title: 'Date'
+ },
+ yaxis: {
+ title: 'Value'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/images/images_plotly_js_index.html b/content/plotly_js/fundamentals/images/images_plotly_js_index.html
new file mode 100644
index 00000000000..b4338646f5b
--- /dev/null
+++ b/content/plotly_js/fundamentals/images/images_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to add images to charts as background images or logos.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Images
+order: 9
+page_type: u-guide
+permalink: javascript/images/
+redirect_from: javascript-graphing-library/images/
+thumbnail: thumbnail/images.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","images" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/images/logo.html b/content/plotly_js/fundamentals/images/logo.html
new file mode 100644
index 00000000000..5bf0d8737ca
--- /dev/null
+++ b/content/plotly_js/fundamentals/images/logo.html
@@ -0,0 +1,88 @@
+---
+name: Add a Logo
+language: plotly_js
+suite: images
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [
+ {
+ x: ["-35.3", "-15.9", "-15.8", "-15.6", "-11.1", "-9.6", "-9.2", "-3.5", "-1.9", "-0.9", "1.0", "1.4", "1.7", "2.0", "2.8", "6.2", "8.1", "8.5", "8.5", "8.6", "11.4", "12.5", "13.3", "13.7", "14.4", "17.5", "17.7", "18.9", "25.1", "28.9", "41.4"],
+ y: ["Designers, musicians, artists, etc.", "Secretaries and administrative assistants", "Waiters and servers", "Archivists, curators, and librarians", "Sales and related", "Childcare workers, home car workers, etc.", "Food preparation occupations", "Janitors, maids, etc.", "Healthcare technicians, assistants. and aides", "Counselors, social and religious workers", "Physical, life and social scientists", "Construction", "Factory assembly workers", "Machinists, repairmen, etc.", "Media and communications workers", "Teachers", "Mechanics, repairmen, etc.", "Financial analysts and advisers", "Farming, fishing and forestry workers", "Truck drivers, heavy equipment operator, etc.", "Accountants and auditors", "Human resources, management analysts, etc.", "Managers", "Lawyers and judges", "Engineers, architects and surveyors", "Nurses", "Legal support workers", "Computer programmers and system admin.", "Police officers and firefighters", "Chief executives", "Doctors, dentists and surgeons"],
+ marker: {
+ color: "rgb(253, 240, 54)",
+ line: {
+ color: "rgb(0, 0, 0)",
+ width: 2
+ }
+ },
+ name: "y",
+ orientation: "h",
+ type: "bar",
+ }
+];
+var layout = {
+ autosize: false,
+ bargap: 0.15,
+ bargroupgap: 0.1,
+ barmode: "stack",
+ height: 800,
+ hovermode: "x",
+ images: [
+ {
+ x: 1,
+ y: 1.05,
+ sizex: 0.2,
+ sizey: 0.2,
+ source: "https://raw.githubusercontent.com/cldougl/plot_images/add_r_img/vox.png",
+ xanchor: "right",
+ xref: "paper",
+ yanchor: "bottom",
+ yref: "paper"
+ }
+ ],
+ margin: {
+ r: 20,
+ t: 125,
+ b: 75,
+ l: 300
+ },
+ title: {
+ text: "Moving Up, Moving Down Percentile change in income between childhood and adulthood"
+ },
+ width: 700,
+ xaxis: {
+ tickmode: "linear",
+ dtick: 10,
+ gridcolor: "rgba(102, 102, 102, 0.4)",
+ linecolor: "#000",
+ linewidth: 1,
+ mirror: true,
+ nticks: 0,
+ showticklabels: true,
+ tick0: 0,
+ tickwidth: 1,
+ title: {
+ text: "Change in percentile"
+ },
+ },
+ yaxis: {
+ anchor: "x",
+ tickmode: "linear",
+ gridcolor: "rgba(102, 102, 102, 0.4)",
+ gridwidth: 1,
+ linecolor: "#000",
+ linewidth: 1,
+ mirror: true,
+ showgrid: false,
+ showline: true,
+ showticklabels: true,
+ tick0: 0,
+ type: "category",
+ zeroline: false
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/images/multiple_images_example.html b/content/plotly_js/fundamentals/images/multiple_images_example.html
new file mode 100644
index 00000000000..1b4ccfee5ad
--- /dev/null
+++ b/content/plotly_js/fundamentals/images/multiple_images_example.html
@@ -0,0 +1,62 @@
+---
+name: Add Multiple Images
+language: plotly_js
+suite: images
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+Plotly.newPlot('myDiv', [{
+ x: [1, 2, 3],
+ y: [1, 2, 3]
+}], {
+ images: [
+ {
+ "source": "https://images.plot.ly/language-icons/api-home/python-logo.png",
+ "xref": "paper",
+ "yref": "paper",
+ "x": 0,
+ "y": 1,
+ "sizex": 0.2,
+ "sizey": 0.2,
+ "xanchor": "right",
+ "yanchor": "bottom"
+ },
+ {
+ "source": "https://images.plot.ly/language-icons/api-home/js-logo.png",
+ "xref": "x",
+ "yref": "y",
+ "x": 1.5,
+ "y": 2,
+ "sizex": 1,
+ "sizey": 1,
+ "xanchor": "right",
+ "yanchor": "bottom"
+ },
+ {
+ "source": "https://images.plot.ly/language-icons/api-home/r-logo.png",
+ "xref": "x",
+ "yref": "y",
+ "x": 1,
+ "y": 3,
+ "sizex": 2,
+ "sizey": 2,
+ "sizing": "stretch",
+ "opacity": 0.4,
+ "layer": "below"
+ },
+ {
+ "source": "https://images.plot.ly/language-icons/api-home/matlab-logo.png",
+ "xref": "x",
+ "yref": "paper",
+ "x": 3,
+ "y": 0,
+ "sizex": 0.5,
+ "sizey": 1,
+ "opacity": 1,
+ "xanchor": "right",
+ "yanchor": "middle"
+ },
+ ]
+})
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/labels/automargin.html b/content/plotly_js/fundamentals/labels/automargin.html
new file mode 100644
index 00000000000..5bb80188010
--- /dev/null
+++ b/content/plotly_js/fundamentals/labels/automargin.html
@@ -0,0 +1,63 @@
+---
+name: Setting Title Automargin
+language: plotly_js
+suite: labels
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Set `automargin` to `true` to allow the title to push the figure margins.
+ With `yref` set to `paper`, `automargin` expands the margins to make the title visible,
+ but doesn't push outside the container. With `yref` set to `container`, `automargin`
+ expands the margins, but doesn't overlap with the plot area, tick labels, and axis titles.
+---
+
+var trace1 = {
+ x: [1952, 1957, 1962, 1967, 1972, 1977, 1982, 1987, 1992, 1997, 2002, 2007],
+ y: [69.39,
+ 70.26,
+ 71.24,
+ 71.52,
+ 71.89,
+ 72.22,
+ 73.84,
+ 74.32,
+ 76.33,
+ 77.55,
+ 79.11,
+ 80.204
+ ],
+ type: 'scatter'
+};
+var trace2 = {
+ x: [1952, 1957, 1962, 1967, 1972, 1977, 1982, 1987, 1992, 1997, 2002, 2007],
+ y: [69.12,
+ 70.33,
+ 70.93,
+ 71.1,
+ 71.93,
+ 73.49,
+ 74.74,
+ 76.32,
+ 77.56,
+ 78.83,
+ 80.37,
+ 81.235
+ ],
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {
+ title: {
+ text: 'Population',
+ font: {
+ family: 'Courier New, monospace',
+ size: 70
+ },
+ yref: 'paper',
+ automargin: true,
+ },
+ showlegend: false
+};
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/labels/labels_plotly_js_index.html b/content/plotly_js/fundamentals/labels/labels_plotly_js_index.html
new file mode 100644
index 00000000000..3d15b1610db
--- /dev/null
+++ b/content/plotly_js/fundamentals/labels/labels_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to set the title, legend-entries, and axis-titles in javascript D3.js-based
+ charts.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Setting the Title, Legend Entries, and Axis Titles
+order: 18
+page_type: u-guide
+permalink: javascript/figure-labels/
+redirect_from: javascript-graphing-library/figure-labels/
+thumbnail: thumbnail/figure-labels.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","labels" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/labels/styling-names.html b/content/plotly_js/fundamentals/labels/styling-names.html
new file mode 100644
index 00000000000..0085f3c7f52
--- /dev/null
+++ b/content/plotly_js/fundamentals/labels/styling-names.html
@@ -0,0 +1,54 @@
+---
+name: Styling Names
+language: plotly_js
+suite: labels
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ name: 'Name of Trace 1',
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [1, 0, 3, 2, 5, 4, 7, 6, 8],
+ name: 'Name of Trace 2',
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {
+ title: {
+ text:'Plot Title',
+ font: {
+ family: 'Courier New, monospace',
+ size: 24
+ },
+ xref: 'paper',
+ x: 0.05,
+ },
+ xaxis: {
+ title: {
+ text: 'x Axis',
+ font: {
+ family: 'Courier New, monospace',
+ size: 18,
+ color: '#7f7f7f'
+ }
+ },
+ },
+ yaxis: {
+ title: {
+ text: 'y Axis',
+ font: {
+ family: 'Courier New, monospace',
+ size: 18,
+ color: '#7f7f7f'
+ }
+ }
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/latex/latex.html b/content/plotly_js/fundamentals/latex/latex.html
new file mode 100644
index 00000000000..569c1754e4c
--- /dev/null
+++ b/content/plotly_js/fundamentals/latex/latex.html
@@ -0,0 +1,35 @@
+---
+name: LaTeX Typesetting
+arrangement: horizontal
+language: plotly_js
+suite: latex
+order: 0
+sitemap: false
+---
+// remember to load MathJax.js?config=TeX-MML-AM_CHTML
+var trace1 = {
+ x: [1, 2, 3, 4],
+ y: [1, 4, 9, 16],
+ name: '$\\alpha_{1c} = 352 \\pm 11 \\text{ km s}^{-1}$',
+ type: 'scatter'
+};
+var trace2 = {
+ x: [1, 2, 3, 4],
+ y: [0.5, 2, 4.5, 8],
+ name: '$\\beta_{1c} = 25 \\pm 11 \\text{ km s}^{-1}$',
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {
+ xaxis: {
+ title: {
+ text: '$\\sqrt{(n_\\text{c}(t|{T_\\text{early}}))}$'
+ }
+ },
+ yaxis: {
+ title: {
+ text: '$d, r \\text{ (solar radius)}$'
+ }
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/latex/latex_plotly_js_index.html b/content/plotly_js/fundamentals/latex/latex_plotly_js_index.html
new file mode 100644
index 00000000000..d4f33c035ef
--- /dev/null
+++ b/content/plotly_js/fundamentals/latex/latex_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to add LaTeX to javascript D3.js-based graphs.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: LaTeX
+order: 10
+page_type: u-guide
+permalink: javascript/LaTeX/
+redirect_from: javascript-graphing-library/LaTeX/
+thumbnail: thumbnail/venn.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","latex" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/layout-template/adding-named-items.html b/content/plotly_js/fundamentals/layout-template/adding-named-items.html
new file mode 100644
index 00000000000..cfb1e952b0d
--- /dev/null
+++ b/content/plotly_js/fundamentals/layout-template/adding-named-items.html
@@ -0,0 +1,66 @@
+---
+name: Add Named Container Array Items
+language: plotly_js
+suite: layout_template
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Container array items in a template with a `name` attribute will be added to any plot using that template.
+ We can use this feature to create a template that adds watermarks to our chart by including named image items in `images`.
+ The example below also shows how to make one of these images invisible using the `templateitemname` attribute
+ if you don't want it to display for this specific chart.
+---
+var baseLayout = {
+ title: {
+ text: 'Watermark Template'
+ },
+ // items with a `name` attribute in template.images will be added to any
+ // plot using this template
+ images: [{
+ name: 'watermark_1',
+ source: "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png",
+ xref: "paper",
+ yref: "paper",
+ x: 0.40,
+ y: 0.9,
+ sizex: 0.7,
+ sizey: 0.7,
+ opacity: 0.1,
+ layer: "below"
+ },
+ {
+ name: 'watermark_2',
+ source: "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/naphthalene.png",
+ xref: "paper",
+ yref: "paper",
+ x: .75,
+ y: 0.3,
+ sizex: 0.25,
+ sizey: 0.25,
+ sizing: "stretch",
+ opacity: 0.2,
+ layer: "below"
+ }],
+ showlegend: false
+};
+
+var template = {data: {}, layout: baseLayout};
+
+var data = [{
+ x: [0, 1, 2, 3, 4, 5],
+ y: [2, 4, 3, 0, 5, 6],
+}];
+
+var layoutUsingTemplate = {
+ template: template,
+ images: [
+ {
+ // set the second watermark in the template to be invisible
+ templateitemname: 'watermark_2',
+ visible: false
+ }
+ ]
+};
+
+Plotly.newPlot("myDiv", data, layoutUsingTemplate);
diff --git a/content/plotly_js/fundamentals/layout-template/default-container.html b/content/plotly_js/fundamentals/layout-template/default-container.html
new file mode 100644
index 00000000000..4d031fc884d
--- /dev/null
+++ b/content/plotly_js/fundamentals/layout-template/default-container.html
@@ -0,0 +1,65 @@
+---
+name: Creating Default Item Values
+language: plotly_js
+suite: layout_template
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Add an attribute called `annotationdefaults` to your template to set a default annotation object. Each
+ item in the plot using the template without a `templateitemname` attribute will have the default applied
+ to it. `annotationdefaults` can be manually added to a template or, if makeTemplate is used, the first un-named
+ item in annotations will be used as the default.
+
+ Note, this behaviour works for all container array objects. E.g for `images`, you would create `imagedefaults` in
+ your layout containing the default image item.
+---
+var x = [0, 1, 2, 3, 4, 5];
+var y = [2, 4, 3, 0, 5, 6];
+
+var baseData = [{
+ mode: 'lines',
+ error_y: {visible: true, width: 0},
+ line: {color: 'teal'}
+}];
+
+var baseLayout = {
+
+ // Plotly.makeTemplate will use the first annotation without a `name` attribute
+ // in the annotations array as the annotationdefaults for the template.
+ annotations: [
+ {
+ text: 'DEFAULT ANNOTATION',
+ x: 0.1,
+ y: 1.1,
+ yref: 'paper', xref: 'paper',
+ showarrow: false,
+ font: {color:'teal', size: 14}
+ }
+ ],
+ showlegend: false
+};
+
+// use Plotly.makeTemplate to generate the template object
+var template = Plotly.makeTemplate({data: baseData, layout: baseLayout});
+
+var data = [{
+ x: x,
+ y: y
+}];
+
+var annotations = [
+ {}, // An empty annotation object will copy annotationdefaults
+ {
+ text: 'Third point',
+ x: x[2],
+ y: y[2],
+ showarrow: true,
+ yref: 'y', xref: 'x',
+ font: {size: 20} // since there is no font.color attribute for this object,
+ // it will use the annotationdefaults' color
+ }
+];
+var layoutWithTemplate = {template: template, annotations: annotations};
+
+Plotly.newPlot("myDiv", data, layoutWithTemplate);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/layout-template/labels_plotly_js_index.html b/content/plotly_js/fundamentals/layout-template/labels_plotly_js_index.html
new file mode 100644
index 00000000000..21ec61837d7
--- /dev/null
+++ b/content/plotly_js/fundamentals/layout-template/labels_plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: Plotly's template attribute and how to use it with Container arrays.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Layout Template Examples
+order: 19
+page_type: u-guide
+permalink: javascript/layout-template/
+thumbnail: thumbnail/plotly-express.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","layout_template" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/layout-template/matching-named-items.html b/content/plotly_js/fundamentals/layout-template/matching-named-items.html
new file mode 100644
index 00000000000..af04a1b0c8c
--- /dev/null
+++ b/content/plotly_js/fundamentals/layout-template/matching-named-items.html
@@ -0,0 +1,66 @@
+---
+name: Matching Named Template Container Items
+language: plotly_js
+suite: layout_template
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ A container item in your new plot with the attribute `templateitemname` matching one of the named
+ container items in the template will inherit attributes from item with the corresponding name.
+ If an item in the plot using the template has the `templateitemname` attribute but there is no
+ corresponding template container item by the same name, it will be marked as invisible in your new plot.
+---
+var x = [0, 1, 2, 3, 4, 5];
+var y = [2, 4, 3, 0, 5, 6];
+
+var baseData = [{
+ mode: 'lines',
+ error_y: {visible: true, width: 0},
+ line: {color: 'teal'}
+}];
+
+var baseLayout = {
+ title: {
+ text: 'Template Title'
+ },
+ annotations: [{
+ text: 'First point',
+ name:'first',
+ yref: 'y', xref: 'x',
+ ay: 40, ax: 30,
+ font: {size: 16}
+ }],
+ showlegend: false
+};
+
+// use Plotly.makeTemplate to generate the template object
+var template = Plotly.makeTemplate({data: baseData, layout: baseLayout});
+
+var data = [{
+ x: x,
+ y: y,
+}];
+
+var annotations = [
+
+ // plotly will look for an annotation with `name` matching `templateitemname`
+ // and use insert that annotation into the new plot.
+ {
+ templateitemname:'first',
+ x: x[0],
+ y: y[0],
+ },
+ {
+ templateitemname: 'fourth', //since there is no template item with this name,
+ //this annotation will be set to invisible.
+ text: 'Fourth point',
+ x: x[3],
+ y: y[3],
+ showarrow: true,
+ yref: 'y', xref: 'x',
+ }
+ ];
+var layoutWithTemplate = {template: template, annotations: annotations};
+
+Plotly.newPlot("myDiv", data, layoutWithTemplate);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/layout-template/template-attribute.html b/content/plotly_js/fundamentals/layout-template/template-attribute.html
new file mode 100644
index 00000000000..df5d51321eb
--- /dev/null
+++ b/content/plotly_js/fundamentals/layout-template/template-attribute.html
@@ -0,0 +1,16 @@
+---
+name: The Layout Template Attribute
+language: plotly_js
+suite: layout_template
+order: 0
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The `template` attribute of `layout` allows a Plotly chart to take it's style and formatting from a `template`
+ object. `template`s can be generated using [Plotly.makeTemplate](https://plotly.com/javascript/plotlyjs-function-reference/#plotlymaketemplate)
+ or manually. `annotaions`, `updatemenus`, `images`, `shapes` and other container array objects in the Plotly `layout`
+ are specially handled by the template machinery to provide more flexibility when using these container arrays
+ in plots derived from these templates.
+
+ For more information see [https://plotly.com/javascript/reference/layout/#layout-template](https://plotly.com/javascript/reference/layout/#layout-template).
+---
diff --git a/content/plotly_js/fundamentals/legends/grouped-legend.html b/content/plotly_js/fundamentals/legends/grouped-legend.html
new file mode 100644
index 00000000000..2ba1e3562c3
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/grouped-legend.html
@@ -0,0 +1,52 @@
+---
+name: Grouped Legend
+language: plotly_js
+suite: legends
+order: 10
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [1, 2, 3],
+ y: [2, 1, 3],
+ legendgroup: 'group',
+ marker: {color: 'rgb(164, 194, 244)'},
+ mode: 'markers',
+ name: 'first legend group',
+ type: 'scatter'
+};
+
+var trace2 = {
+ x: [1, 2, 3],
+ y: [2, 2, 2],
+ legendgroup: 'group',
+ line: {color: 'rgb(164, 194, 244)'},
+ mode: 'lines',
+ name: 'first legend group - average',
+ type: 'scatter'
+};
+
+var trace3 = {
+ x: [1, 2, 3],
+ y: [4, 9, 2],
+ legendgroup: 'group2',
+ marker: {color: 'rgb(142, 124, 195)'},
+ mode: 'markers',
+ name: 'second legend group',
+ type: 'scatter'
+};
+
+var trace4 = {
+ x: [1, 2, 3],
+ y: [5, 5, 5],
+ legendgroup: 'group2',
+ line: {color: 'rgb(142, 124, 195)'},
+ mode: 'lines',
+ name: 'second legend group - average',
+ type: 'scatter'
+};
+
+data = [trace1, trace2, trace3, trace4];
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/fundamentals/legends/legend-inside.html b/content/plotly_js/fundamentals/legends/legend-inside.html
new file mode 100644
index 00000000000..962e4559627
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/legend-inside.html
@@ -0,0 +1,28 @@
+---
+name: Positioning the Legend Inside the Plot
+language: plotly_js
+suite: legends
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {
+ showlegend: true,
+ legend: {
+ x: 1,
+ xanchor: 'right',
+ y: 1
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/legends/legend-labels.html b/content/plotly_js/fundamentals/legends/legend-labels.html
new file mode 100644
index 00000000000..1fa4bbfa522
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/legend-labels.html
@@ -0,0 +1,22 @@
+---
+name: Legend Names
+language: plotly_js
+suite: legends
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
+ name: 'Blue Trace',
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
+ name: 'Orange Trace',
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/fundamentals/legends/legend-orientation.html b/content/plotly_js/fundamentals/legends/legend-orientation.html
new file mode 100644
index 00000000000..cf2889c896b
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/legend-orientation.html
@@ -0,0 +1,23 @@
+---
+name: Changing the orientation of Legend
+language: plotly_js
+suite: legends
+order: 8
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {showlegend: true,
+ legend: {"orientation": "h"}};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/legends/legend-outside.html b/content/plotly_js/fundamentals/legends/legend-outside.html
new file mode 100644
index 00000000000..88f4259f1b4
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/legend-outside.html
@@ -0,0 +1,27 @@
+---
+name: Positioning the Legend Outside the Plot
+language: plotly_js
+suite: legends
+order: 6
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {
+ showlegend: true,
+ legend: {
+ x: 1,
+ y: 0.5
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/legends/legend-style.html b/content/plotly_js/fundamentals/legends/legend-style.html
new file mode 100644
index 00000000000..88d6fc6e2df
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/legend-style.html
@@ -0,0 +1,33 @@
+---
+name: Styling and Coloring the Legend
+language: plotly_js
+suite: legends
+order: 7
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {legend: {
+ x: 0,
+ y: 1,
+ traceorder: 'normal',
+ font: {
+ family: 'sans-serif',
+ size: 12,
+ color: '#000'
+ },
+ bgcolor: '#E2E2E2',
+ bordercolor: '#FFFFFF',
+ borderwidth: 2
+ }};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/legends/legend-visibility.html b/content/plotly_js/fundamentals/legends/legend-visibility.html
new file mode 100644
index 00000000000..4856f0f56ef
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/legend-visibility.html
@@ -0,0 +1,21 @@
+---
+name: Hiding the Legend
+language: plotly_js
+suite: legends
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {showlegend: false};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/legends/legends_plotly_js_index.html b/content/plotly_js/fundamentals/legends/legends_plotly_js_index.html
new file mode 100644
index 00000000000..e897633f1f9
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/legends_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to modify the legend in D3.js-based javascript graphs. Seven examples
+ of how to move, color, and hide the legend.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Legends
+order: 20
+page_type: u-guide
+permalink: javascript/legend/
+redirect_from: javascript-graphing-library/legend/
+thumbnail: thumbnail/legends.gif
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","legends" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/legends/show-legend.html b/content/plotly_js/fundamentals/legends/show-legend.html
new file mode 100644
index 00000000000..f008f7e4abe
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/show-legend.html
@@ -0,0 +1,24 @@
+---
+name: Hiding Legend Entries
+language: plotly_js
+suite: legends
+order: 9
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2],
+ y: [1, 2, 3],
+ name: 'First Trace',
+ showlegend: false,
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3],
+ y: [8, 4, 2, 0],
+ name: 'Second Trace',
+ showlegend: true,
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/fundamentals/legends/subplot-grouped-legend.html b/content/plotly_js/fundamentals/legends/subplot-grouped-legend.html
new file mode 100644
index 00000000000..70951d11189
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/subplot-grouped-legend.html
@@ -0,0 +1,135 @@
+---
+name: Subplot Grouped Legend
+language: plotly_js
+suite: legends
+order: 11
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: ['a'],
+ y: [2],
+ legendgroup: 'a',
+ marker: {
+ color: 'rgba(102,194,165,1)',
+ line: {color: 'transparent'}
+ },
+ name: 'a',
+ type: 'bar',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var trace2 = {
+ x: ['b'],
+ y: [3],
+ legendgroup: 'b',
+ marker: {
+ color: 'rgba(252,141,98,1)',
+ line: {color: 'transparent'}
+ },
+ name: 'b',
+ type: 'bar',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var trace3 = {
+ x: ['c'],
+ y: [2],
+ legendgroup: 'c',
+ marker: {
+ color: 'rgba(141,160,203,1)',
+ line: {color: 'transparent'}
+ },
+ name: 'c',
+ type: 'bar',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var trace4 = {
+ x: ['a'],
+ y: [4],
+ legendgroup: 'a',
+ marker: {
+ color: 'rgba(102,194,165,1)',
+ line: {color: 'transparent'}
+ },
+ name: 'a',
+ showlegend: false,
+ type: 'bar',
+ xaxis: 'x2',
+ yaxis: 'y2'
+};
+
+var trace5 = {
+ x: ['b'],
+ y: [2],
+ legendgroup: 'b',
+ marker: {
+ color: 'rgba(252,141,98,1)',
+ line: {color: 'transparent'}
+ },
+ name: 'b',
+ showlegend: false,
+ type: 'bar',
+ xaxis: 'x2',
+ yaxis: 'y2'
+};
+
+var trace6 = {
+ x: ['c'],
+ y: [4],
+ legendgroup: 'c',
+ marker: {
+ color: 'rgba(141,160,203,1)',
+ line: {color: 'transparent'}
+ },
+ name: 'c',
+ showlegend: false,
+ type: 'bar',
+ xaxis: 'x2',
+ yaxis: 'y2'
+};
+
+var data = [trace1, trace2, trace3, trace4, trace5, trace6];
+
+var layout = {
+ hovermode: 'closest',
+ margin: {
+ r: 10,
+ t: 25,
+ b: 40,
+ l: 60
+ },
+ showlegend: true,
+ xaxis: {
+ anchor: 'y',
+ categoryorder: 'array',
+ domain: [0, 1],
+ type: 'category',
+ showgrid: false,
+ showticklabels: false
+ },
+ xaxis2: {
+ anchor: 'y2',
+ categoryorder: 'array',
+ domain: [0, 1],
+ type: 'category',
+ showgrid: false
+ },
+ yaxis: {
+ anchor: 'x',
+ domain: [0.52, 1],
+ showgrid: false
+ },
+ yaxis2: {
+ anchor: 'x2',
+ domain: [0, 0.48],
+ showgrid: false
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/marker-style/color-opacity.html b/content/plotly_js/fundamentals/marker-style/color-opacity.html
new file mode 100644
index 00000000000..c971ad39e06
--- /dev/null
+++ b/content/plotly_js/fundamentals/marker-style/color-opacity.html
@@ -0,0 +1,45 @@
+---
+name: Color Opacity
+language: plotly_js
+suite: marker-style
+order: 5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ To maximise visibility of each point, set the color opacity by using alpha: `marker:{color: 'rgba(0,0,0,0.5)'}`. Here, the marker line will remain opaque.
+---
+
+var x = Array.from({length: 500}, () => Math.random()*(6-3)+3);
+var y = Array.from({length: 500}, () => Math.random()*(6-3)+3);
+
+var data = [{
+ x: x,
+ y: y,
+ type: 'scatter',
+ mode: 'markers',
+ marker: {
+ color: 'rgba(17, 157, 255,0.5)',
+ size: 20,
+ line: {
+ color: 'rgb(231, 99, 250)',
+ width: 2
+ }
+ },
+ showlegend: false
+ }, {
+ x: [2,2],
+ y: [4.25,4.75],
+ type: 'scatter',
+ mode: 'markers',
+ marker: {
+ color: 'rgba(17, 157, 255,0.5)',
+ size: 60,
+ line: {
+ color: 'rgb(231, 99, 250)',
+ width: 6
+ }
+ },
+ showlegend: false
+}]
+
+Plotly.newPlot('myDiv', data)
diff --git a/content/plotly_js/fundamentals/marker-style/marker-border.html b/content/plotly_js/fundamentals/marker-style/marker-border.html
new file mode 100644
index 00000000000..b20eff4e06c
--- /dev/null
+++ b/content/plotly_js/fundamentals/marker-style/marker-border.html
@@ -0,0 +1,45 @@
+---
+name: Add Marker Border
+language: plotly_js
+suite: marker-style
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ In order to make markers distinct, you can add a border to the markers. This can be achieved by adding the line dict to the marker dict. For example, `marker:{..., line: {...}}`.
+---
+
+var x = Array.from({length: 500}, () => Math.random()*(6-3)+3);
+var y = Array.from({length: 500}, () => Math.random()*(6-3)+3);
+
+var data = [{
+ x: x,
+ y: y,
+ type: 'scatter',
+ mode: 'markers',
+ marker: {
+ color: 'rgb(17, 157, 255)',
+ size: 20,
+ line: {
+ color: 'rgb(231, 99, 250)',
+ width: 2
+ }
+ },
+ showlegend: false
+ }, {
+ x: [2],
+ y: [4.5],
+ type: 'scatter',
+ mode: 'markers',
+ marker: {
+ color: 'rgb(17, 157, 255)',
+ size: 60,
+ line: {
+ color: 'rgb(231, 99, 250)',
+ width: 6
+ }
+ },
+ showlegend: false
+}]
+
+Plotly.newPlot('myDiv', data)
diff --git a/content/plotly_js/fundamentals/marker-style/marker-opacity.html b/content/plotly_js/fundamentals/marker-style/marker-opacity.html
new file mode 100644
index 00000000000..5258ff4f61a
--- /dev/null
+++ b/content/plotly_js/fundamentals/marker-style/marker-opacity.html
@@ -0,0 +1,47 @@
+---
+name: Marker Opacity
+language: plotly_js
+suite: marker-style
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ To maximise visibility of density, it is recommended to set the opacity inside the marker `marker:{opacity:0.5}`. If multiple traces exist with high density, consider using marker opacity in conjunction with trace opacity.
+---
+
+var x = Array.from({length: 500}, () => Math.random()*(6-3)+3);
+var y = Array.from({length: 500}, () => Math.random()*(6-3)+3);
+
+var data = [{
+ x: x,
+ y: y,
+ type: 'scatter',
+ mode: 'markers',
+ marker: {
+ color: 'rgb(17, 157, 255)',
+ opacity: 0.5,
+ size: 20,
+ line: {
+ color: 'rgb(231, 99, 250)',
+ width: 2
+ }
+ },
+ showlegend: false
+ }, {
+ x: [2,2],
+ y: [4.25,4.75],
+ type: 'scatter',
+ mode: 'markers',
+ marker: {
+ color: 'rgb(17, 157, 255)',
+ opacity: 0.5,
+ size: 60,
+ line: {
+ color: 'rgb(231, 99, 250)',
+ width: 6
+ }
+ },
+ showlegend: false
+}]
+
+Plotly.newPlot('myDiv', data)
diff --git a/content/plotly_js/fundamentals/marker-style/marker-opaque.html b/content/plotly_js/fundamentals/marker-style/marker-opaque.html
new file mode 100644
index 00000000000..261547bfb94
--- /dev/null
+++ b/content/plotly_js/fundamentals/marker-style/marker-opaque.html
@@ -0,0 +1,45 @@
+---
+name: Fully Opaque
+language: plotly_js
+suite: marker-style
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Fully opaque, the default setting, is useful for non-overlapping markers. When many points overlap it can be hard to observe density.
+---
+
+var x = Array.from({length: 500}, () => Math.random()*(6-3)+3);
+var y = Array.from({length: 500}, () => Math.random()*(6-3)+3);
+
+var data = [{
+ x: x,
+ y: y,
+ type: 'scatter',
+ mode: 'markers',
+ marker: {
+ color: 'rgb(17, 157, 255)',
+ size: 20,
+ line: {
+ color: 'rgb(231, 99, 250)',
+ width: 2
+ }
+ },
+ showlegend: false
+ }, {
+ x: [2,2],
+ y: [4.25,4.75],
+ type: 'scatter',
+ mode: 'markers',
+ marker: {
+ color: 'rgb(17, 157, 255)',
+ size: 60,
+ line: {
+ color: 'rgb(231, 99, 250)',
+ width: 6
+ }
+ },
+ showlegend: false
+}]
+
+Plotly.newPlot('myDiv', data)
diff --git a/content/plotly_js/fundamentals/marker-style/marker-style-plotly-js.html b/content/plotly_js/fundamentals/marker-style/marker-style-plotly-js.html
new file mode 100644
index 00000000000..beea5f99147
--- /dev/null
+++ b/content/plotly_js/fundamentals/marker-style/marker-style-plotly-js.html
@@ -0,0 +1,14 @@
+---
+description: How to style markers in JavaScript.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Styling Markers
+order: 11
+page_type: u-guide
+permalink: javascript/marker-style/
+thumbnail: thumbnail/marker-style.gif
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","marker-style" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/marker-style/trace-opacity.html b/content/plotly_js/fundamentals/marker-style/trace-opacity.html
new file mode 100644
index 00000000000..6207d5e112c
--- /dev/null
+++ b/content/plotly_js/fundamentals/marker-style/trace-opacity.html
@@ -0,0 +1,63 @@
+---
+name: Trace Opacity
+language: plotly_js
+suite: marker-style
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Setting opacity outside the marker will set the opacity of the trace. Thus, it will allow greater visbility of additional traces but like fully opaque it is hard to distinguish density.
+---
+
+var x = Array.from({length: 500}, () => Math.random()*(6-3)+3);
+var y = Array.from({length: 500}, () => Math.random()*(4.5-3)+3);
+var x2 = Array.from({length: 500}, () => Math.random()*(6-3)+3);
+var y2 = Array.from({length: 500}, () => Math.random()*(6-4.5)+4.5);
+
+var data = [{
+ x: x,
+ y: y,
+ type: 'scatter',
+ mode: 'markers',
+ opacity: 0.5,
+ marker: {
+ color: 'rgb(17, 157, 255)',
+ size: 20,
+ line: {
+ color: 'rgb(231, 99, 250)',
+ width: 2
+ }
+ },
+ name: 'Opacity 0.5'
+ }, {
+ x: x2,
+ y: y2,
+ type: 'scatter',
+ mode: 'markers',
+ marker: {
+ color: 'rgb(17, 157, 255)',
+ size: 20,
+ line: {
+ color: 'rgb(231, 99, 250)',
+ width: 2
+ }
+ },
+ name: 'Opacity 1.0'
+ }, {
+ x: [2,2],
+ y: [4.25,4.75],
+ type: 'scatter',
+ mode: 'markers',
+ opacity: 0.5,
+ marker: {
+ color: 'rgb(17, 157, 255)',
+ size: 60,
+ line: {
+ color: 'rgb(231, 99, 250)',
+ width: 6
+ }
+ },
+ showlegend: false
+}]
+
+Plotly.newPlot('myDiv', data)
diff --git a/content/plotly_js/fundamentals/plotly-js-3-changes/plotly-js-3-changes.md b/content/plotly_js/fundamentals/plotly-js-3-changes/plotly-js-3-changes.md
new file mode 100644
index 00000000000..7beac7958c9
--- /dev/null
+++ b/content/plotly_js/fundamentals/plotly-js-3-changes/plotly-js-3-changes.md
@@ -0,0 +1,362 @@
+---
+description: Learn about the changes in Plotly.js version 3.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Version 3 Changes
+order: 27
+page_type: u-guide
+permalink: javascript/version-3-changes/
+redirect_from: javascript/pointcloud/
+sitemap: false
+thumbnail: thumbnail/pointcloud.jpg
+---
+This page outlines the changes in Plotly.js version 3 and cases where you may need to update your charts.
+
+## Removed Features
+
+Plotly.js 3 removes the following features that were deprecated in previous versions.
+
+### `annotation.ref` Attribute
+
+`annotation.ref` has been removed. Use `annotation.xref` and `annotation.yref` instead.
+
+Here's an example using `annotation.ref`, followed by teh same example rewritte to use `annotation.xref` and `annotation.yref`:
+
+```js
+...
+var layout = {
+ title: "Try panning or zooming!",
+ annotations: [{
+ text: "Absolutely-positioned annotation",
+ ref: "paper",
+ x: 0.3,
+ y: 0.3,
+ showarrow: false
+ }]
+};
+...
+```
+
+```js
+...
+var layout = {
+ title: "Try panning or zooming!",
+ annotations: [{
+ text: "Absolutely-positioned annotation",
+ xref: "paper",
+ yref: "paper",
+ x: 0.3,
+ y: 0.3,
+ showarrow: false
+ }]
+};
+...
+```
+
+### `autotick` Attribute
+
+The `autotick` attribute has been removed. Use `tickmode: 'auto'` instead of `autotick: true` and `tickmode: 'linear'` instead of `autotick: false`.
+
+### `bardir` Attribute on Bar Charts
+
+The `bardir` attribute for setting the bar direction on bar charts has been removed. Use `orientation` instead.
+
+Here's an example using `bardir` to make the bars horizontal, followed by the same example rewritten to use `orientation`:
+
+```js
+var data = [{
+ type: 'bar',
+ x: [1, 2, 3, 4],
+ y: [10, 15, 13, 17],
+ bardir: 'h',
+}];
+
+var layout = {
+ title: 'Bar Chart with Horizontal Bars',
+ xaxis: {
+ title: 'X Axis'
+ },
+ yaxis: {
+ title: 'Y Axis'
+ }
+};
+
+
+Plotly.newPlot('bar-chart', data, layout);
+```
+
+```js
+var data = [{
+ type: 'bar',
+ x: [1, 2, 3, 4],
+ y: [10, 15, 13, 17],
+ orientation: 'h',
+}];
+
+var layout = {
+ title: 'Bar Chart with Horizontal Bars',
+ xaxis: {
+ title: 'X Axis'
+ },
+ yaxis: {
+ title: 'Y Axis'
+ }
+};
+
+
+Plotly.newPlot('bar-chart', data, layout);
+```
+
+### `layout.scene.cameraposition` Attribute for 3D Plots
+
+The `layout.scene.cameraposition` attribute on 3D plots has been removed. Use `layout.scene.camera` instead.
+
+If you are using `cameraposition`, you'll need to update it for it work with the `camera` attribute. Here's an example of converting a `cameraposition` to `camera`. This example uses [gl-mat4](https://www.npmjs.com/package/gl-mat4#fromquatoutmat4-qquat4).
+
+```js
+var m4FromQuat = require('gl-mat4/fromQuat');
+
+// Original cameraposition
+var cameraposition = ;
+
+var rotation = cameraposition[0];
+var center = cameraposition[1];
+var radius = cameraposition[2];
+var mat = m4FromQuat([], rotation);
+var eye = [];
+
+for(j = 0; j < 3; ++j) {
+ eye[j] = center[j] + radius * mat[2 + 4 * j];
+}
+
+// New camera
+var camera = {
+ eye: {x: eye[0], y: eye[1], z: eye[2]},
+ center: {x: center[0], y: center[1], z: center[2]},
+ up: {x: 0, y: 0, z: 1}
+};
+```
+
+### `heatmapgl` Trace
+
+`heatmapgl` has been removed. Use `heatmap` instead.
+
+```
+var data = [
+ {
+ z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
+ type: 'heatmapgl'
+ }
+];
+
+Plotly.newPlot('myDiv', data);
+```
+
+```
+var data = [
+ {
+ z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
+ type: 'heatmap'
+ }
+];
+
+Plotly.newPlot('myDiv', data);
+```
+
+### `opacity` Attribute on Error Bars
+
+The `opacity` attribute on error bars has been removed. Use the alpha channel of the `color` attribute instead.
+
+Here's an example that was previously in the Plotly.js docs, and which uses `opacity`, followed by the same example rewritten to use the alpha channel on a `rgba` color value.
+
+```
+ error_y: {
+ type: 'constant',
+ value: 0.1,
+ color: '#85144B',
+ thickness: 1.5,
+ width: 3,
+ opacity: 0.5
+ }
+
+```
+
+```
+ error_y: {
+ type: 'constant',
+ value: 0.1,
+ color: 'rgba(133, 20, 75, 0.5)',
+ thickness: 1.5,
+ width: 3,
+ }
+
+```
+
+### jQuery Events
+
+Support for using jQuery events has been removed. Use [Plotly.js events](/javascript/plotlyjs-events/) instead.
+
+### `pointcloud` Trace
+
+`pointcloud` has been removed. Use `scattergl` instead.
+
+Here's an example that was previously in the Plotly.js docs and which uses `pointcloud`, followed by the same example rewritten to use `scattergl`:
+
+```js
+var myPlot = document.getElementById('myDiv');
+
+var xy = new Float32Array([1,2,3,4,5,6,0,4]);
+
+
+data = [{ xy: xy, type: 'pointcloud' }];
+
+layout = { };
+
+
+Plotly.newPlot('myDiv', data, layout);
+```
+
+```js
+var myPlot = document.getElementById('myDiv');
+
+var xy = new Float32Array([1,2,3,4,5,6,0,4]);
+
+var x = [];
+var y = [];
+for (var i = 0; i < xy.length; i += 2) {
+ x.push(xy[i]);
+ y.push(xy[i + 1]);
+}
+
+var data = [{
+ x: x,
+ y: y,
+ mode: 'markers',
+ type: 'scattergl',
+ marker: {
+ size: 10,
+ color: 'blue',
+ opacity: 0.8
+ }
+}];
+var layout = {
+ title: 'Point Cloud',
+ xaxis: { title: 'X Axis' },
+ yaxis: { title: 'Y Axis' }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+```
+
+### `plot3dPixelRatio` for WebGL Image Export
+
+The `plot3dPixelRatio` option on `config` for setting the pixel ration during WebGL image export has been removed. Use `plotGlPixelRatio` instead.
+
+
+## `title` Attribute as a String
+
+The `title` attribute can no longer be set as a string. Use `title.text` instead. Here's an example of how to set the title using `title.text`:
+
+```js
+var data = [
+ {
+ x: [1, 2, 3, 4, 5],
+ y: [1, 2, 4, 8, 16]
+ }
+];
+
+var layout = {
+ title: { text: "My chart title" },
+ xaxis: {
+ title: {
+ text: "x-axis title"
+ }
+ },
+ yaxis: { title: { text: "y-axis title" } }
+};
+
+Plotly.newPlot("myDiv", data, layout);
+```
+
+### `titlefont`,`titleposition`, `titleside`, and `titleoffset` Attributes
+
+The `titlefont`,`titleposition`, `titleside`, and `titleoffset` attributes are removed. Replace them with `title.font`, `title.position`, `title.side`, and `title.offset`.
+
+Here's an example that uses `titlefont`, followed by the same example rewritten to use `title.font`:
+
+```js
+var data = [{
+ type: 'bar',
+ x: ['A', 'B', 'C', 'D'],
+ y: [10, 15, 13, 17]
+}];
+
+var layout = {
+ title: {
+ text: 'Chart Title',
+ },
+ titlefont: {
+ size: 40
+ }
+};
+
+Plotly.newPlot('chart', data, layout);
+```
+
+```js
+var data = [{
+ type: 'bar',
+ x: ['A', 'B', 'C', 'D'],
+ y: [10, 15, 13, 17]
+}];
+
+var layout = {
+ title: {
+ text: 'Chart Title',
+ font: {
+ size: 40
+ }
+ },
+};
+
+Plotly.newPlot('chart', data, layout);
+```
+
+### Transforms
+
+Transforms have been removed.
+
+### `zauto`, `zmin`, and `zmax` from Surface Trace
+
+The `zauto`, `zmin`, and `zmax` attributes have been removed on surface traces. Use `cauto`, `cmin`, and `cmax` instead.
+
+```JavaScript
+var data = [{
+ z: [
+ [1, 20, 30, 50],
+ [20, 1, 60, 80],
+ [30, 60, 1, 100],
+ [50, 80, 100, 1]
+ ],
+ type: 'surface',
+ zauto: false,
+ zmin: 0,
+ zmax: 100
+}];
+```
+
+```JavaScript
+var data = [{
+ z: [
+ [1, 20, 30, 50],
+ [20, 1, 60, 80],
+ [30, 60, 1, 100],
+ [50, 80, 100, 1]
+ ],
+ type: 'surface',
+ cauto: false,
+ cmin: 0,
+ cmax: 100
+}];
+```
diff --git a/content/plotly_js/fundamentals/plotly_js-fundamentals-index.html b/content/plotly_js/fundamentals/plotly_js-fundamentals-index.html
new file mode 100644
index 00000000000..ebb89a6aa6d
--- /dev/null
+++ b/content/plotly_js/fundamentals/plotly_js-fundamentals-index.html
@@ -0,0 +1,28 @@
+---
+permalink: javascript/plotly-fundamentals/
+redirect_from: javascript/modularizing-monolithic-javascript-projects/
+description: Plotly.js makes interactive, publication-quality graphs online. Tutorials and tips about fundamental features of Plotly JS
+name: Fundamentals
+layout: langindex
+display_as: file_settings
+language: plotly_js
+thumbnail: thumbnail/mixed.jpg
+---
+
+
+
+
+
+
+
+
+
Plotly.js Fundamentals
+
{{page.description}}
+ {% include layouts/dashplug.html %}
+
+
+
+
+
+ {% assign languagelist = site.posts | where:"language","plotly_js" | where:"display_as","file_settings" | where: "layout","base" | sort: "order" %}
+ {% include posts/documentation_eg.html %}
diff --git a/content/plotly_js/fundamentals/react/advanced.html b/content/plotly_js/fundamentals/react/advanced.html
new file mode 100644
index 00000000000..14c417125a3
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/advanced.html
@@ -0,0 +1,11 @@
+---
+name: Advanced Usage
+language: plotly_js
+suite: react
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ For information on more advanced usage patterns such as [State Management](https://github.com/plotly/react-plotly.js#state-management) or [Customizing the plotly.js bundle](https://github.com/plotly/react-plotly.js#customizing-the-plotlyjs-bundle) please see the [ReadMe for react-plotly.js](https://github.com/plotly/react-plotly.js/blob/master/README.md).
+
+---
diff --git a/content/plotly_js/fundamentals/react/api.html b/content/plotly_js/fundamentals/react/api.html
new file mode 100644
index 00000000000..b0af54f0fb1
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/api.html
@@ -0,0 +1,11 @@
+---
+name: Props and Events
+language: plotly_js
+suite: react
+order: 5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ More information about [Props](https://github.com/plotly/react-plotly.js/#basic-props) and [Event Handlers](https://github.com/plotly/react-plotly.js/#event-handler-props) can be found in the [ReadMe for react-plotly.js](https://github.com/plotly/react-plotly.js/blob/master/README.md).
+
+---
diff --git a/content/plotly_js/fundamentals/react/installation.html b/content/plotly_js/fundamentals/react/installation.html
new file mode 100644
index 00000000000..81fa7618173
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/installation.html
@@ -0,0 +1,10 @@
+---
+name: Installation
+language: plotly_js
+suite: react
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+$ npm install react-plotly.js plotly.js
diff --git a/content/plotly_js/fundamentals/react/introduction.html b/content/plotly_js/fundamentals/react/introduction.html
new file mode 100644
index 00000000000..9a9c46852a3
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/introduction.html
@@ -0,0 +1,10 @@
+---
+name: Introduction
+language: plotly_js
+suite: react
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Use [react-plotly.js](https://github.com/plotly/react-plotly.js) to embed D3 charts in your [React](https://reactjs.org/)-powered web application. This React component takes the chart type, data, and styling as [Plotly JSON](https://help.plot.ly/json-chart-schema/) in its data and layout props, then draws the chart using Plotly.js. See below about how to get started with react-plotly.js.
+---
diff --git a/content/plotly_js/fundamentals/react/plotly-js-chart-and-attributes.html b/content/plotly_js/fundamentals/react/plotly-js-chart-and-attributes.html
new file mode 100644
index 00000000000..6d2a144b3ca
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/plotly-js-chart-and-attributes.html
@@ -0,0 +1,10 @@
+---
+name: Plotly.js Chart Types and Attributes
+language: plotly_js
+suite: react
+order: 6
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Click here for more information about [Plotly Chart Types](https://plotly.com/javascript/) and [Attributes](https://plotly.com/javascript/reference/).
+---
diff --git a/content/plotly_js/fundamentals/react/quick_start.html b/content/plotly_js/fundamentals/react/quick_start.html
new file mode 100644
index 00000000000..37301c390d1
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/quick_start.html
@@ -0,0 +1,34 @@
+---
+name: Quick Start
+language: plotly_js
+suite: react
+plot_url: https://codepen.io/rsreusser/embed/qPgwwJ?height=550&default-tab=result
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The easiest way to use this component is to import and pass data to a plot component:
+---
+
+import React from 'react';
+import Plot from 'react-plotly.js';
+
+class App extends React.Component {
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/content/plotly_js/fundamentals/react/react-plotlyjs-index.html b/content/plotly_js/fundamentals/react/react-plotlyjs-index.html
new file mode 100644
index 00000000000..4a091dd7b62
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/react-plotlyjs-index.html
@@ -0,0 +1,14 @@
+---
+description: How to use the Plotly.js React component.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: React Plotly.js
+order: 4
+page_type: example_index
+permalink: javascript/react/
+thumbnail: thumbnail/react.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","react" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/responsive-fluid-layout/responsive-charts.html b/content/plotly_js/fundamentals/responsive-fluid-layout/responsive-charts.html
new file mode 100644
index 00000000000..b6d53dd2712
--- /dev/null
+++ b/content/plotly_js/fundamentals/responsive-fluid-layout/responsive-charts.html
@@ -0,0 +1,34 @@
+---
+name: Responsive Plots
+language: plotly_js
+suite: responsive-fluid-layout
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ If you set the `responsive` attribute equal to `true` (using the `config` object), then your figures will be automatically resized when the browser window size changes. This is an especially useful feature for charts which are going to viewed on mobile devices!
+---
+var trace1 = {
+ type: 'bar',
+ x: [1, 2, 3, 4],
+ y: [5, 10, 2, 8],
+ marker: {
+ color: '#C8A2C8',
+ line: {
+ width: 2.5
+ }
+ }
+};
+
+var data = [ trace1 ];
+
+var layout = {
+ title: {
+ text: 'Responsive to window\'s size!'
+ },
+ font: {size: 18}
+};
+
+var config = {responsive: true}
+
+Plotly.newPlot('myDiv', data, layout, config );
diff --git a/content/plotly_js/fundamentals/responsive-fluid-layout/responsive-fluid-layout_plotly_js_index.html b/content/plotly_js/fundamentals/responsive-fluid-layout/responsive-fluid-layout_plotly_js_index.html
new file mode 100644
index 00000000000..8e5bb95366b
--- /dev/null
+++ b/content/plotly_js/fundamentals/responsive-fluid-layout/responsive-fluid-layout_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to create figures with responsive/fluid layouts in JavaScript.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Responsive / Fluid Layouts
+order: 2
+page_type: example_index
+permalink: javascript/responsive-fluid-layout/
+redirect_from: javascript-graphing-library/responsive-fluid-layout/
+thumbnail: thumbnail/fluid-layout.gif
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","responsive-fluid-layout" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/shapes/basic-arbitrary-svg-paths.html b/content/plotly_js/fundamentals/shapes/basic-arbitrary-svg-paths.html
new file mode 100644
index 00000000000..8831569e697
--- /dev/null
+++ b/content/plotly_js/fundamentals/shapes/basic-arbitrary-svg-paths.html
@@ -0,0 +1,79 @@
+---
+name: Basic Arbitrary SVG Paths
+language: plotly_js
+suite: shape
+order: 7
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [2, 1, 8, 8],
+ y: [0.25, 9, 2, 6],
+ text: ['filled triangle', 'filled Polygon', 'Quadratic Bezier Curves', 'Cubic Bezier Curves'],
+ mode: 'text'
+};
+
+var layout = {
+ title: {
+ text: 'Basic Arbitrary SVG Paths'
+ },
+ xaxis: {
+ range: [0, 9],
+ zeroline: false
+ },
+ yaxis: {
+ range: [0, 11],
+ showgrid: false
+ },
+ width: 500,
+ height: 500,
+ shapes: [
+
+ //Quadratic Bezier Curves
+
+ {
+ type: 'path',
+ path: 'M 4,4 Q 6,0 8,4',
+ line: {
+ color: 'rgb(93, 164, 214)'
+ }
+ },
+
+ //Cubic Bezier Curves
+
+ {
+ type: 'path',
+ path: 'M 1,4 C 2,8 6,4 8,8',
+ line: {
+ color: 'rgb(207, 114, 255)'
+ }
+ },
+
+ //Filled Triangle
+
+ {
+ type: 'path',
+ path: 'M 1 1 L 1 3 L 4 1 Z',
+ fillcolor: 'rgba(44, 160, 101, 0.5)',
+ line: {
+ color: 'rgb(44, 160, 101)'
+ }
+ },
+
+ //Filled Polygon
+
+ {
+ type: 'path',
+ path: ' M 3,7 L2,8 L2,9 L3,10, L4,10 L5,9 L5,8 L4,7 Z',
+ fillcolor: 'rgba(255, 140, 184, 0.5)',
+ line: {
+ color: 'rgb(255, 140, 184)'
+ }
+ }
+ ]
+};
+
+var data = [trace1];
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/shapes/circle.html b/content/plotly_js/fundamentals/shapes/circle.html
new file mode 100644
index 00000000000..929abdbc92c
--- /dev/null
+++ b/content/plotly_js/fundamentals/shapes/circle.html
@@ -0,0 +1,67 @@
+---
+name: Circle
+language: plotly_js
+suite: shape
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [1.5, 3.5],
+ y: [0.75, 2.5],
+ text: ['Unfilled Circle', 'Filled Circle'],
+ mode: 'text'
+};
+
+var layout = {
+ title: {
+ text: 'Circles'
+ },
+ xaxis: {
+ range: [0, 4.5],
+ zeroline: false
+ },
+ yaxis: {
+ range: [0, 4.5]
+ },
+ width: 500,
+ height: 500,
+ shapes: [
+
+ // Unfilled Circle
+
+ {
+ type: 'circle',
+ xref: 'x',
+ yref: 'y',
+ x0: 1,
+ y0: 1,
+ x1: 3,
+ y1: 3,
+ line: {
+ color: 'rgba(50, 171, 96, 1)'
+ }
+ },
+
+ // Filled Circle
+
+ {
+ type: 'circle',
+ xref: 'x',
+ yref: 'y',
+ fillcolor: 'rgba(50, 171, 96, 0.7)',
+ x0: 3,
+ y0: 3,
+ x1: 4,
+ y1: 4,
+ line: {
+ color: 'rgba(50, 171, 96, 1)'
+ }
+ }
+ ]
+};
+
+var data = [trace1];
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/shapes/labels-on-shapes.html b/content/plotly_js/fundamentals/shapes/labels-on-shapes.html
new file mode 100644
index 00000000000..7fa65086c34
--- /dev/null
+++ b/content/plotly_js/fundamentals/shapes/labels-on-shapes.html
@@ -0,0 +1,91 @@
+---
+name: Adding Labels to Shapes
+language: plotly_js
+suite: shape
+order: 11
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ This example adds a `label` to a rectangle and a line on the graph,
+ sets a `font` `size` and `color` on the rectangle, and positions its label
+ 'top center' using `textposition`. On the line, we specify a `yanchor` of "top"
+ to anchor the top of the label to its `textposition`.
+ You can also draw new shapes on the graph and each new shape automatically
+ gets a text label.
+---
+var data = [
+ {
+ x: [
+ '2015-02-01', '2015-02-02', '2015-02-03', '2015-02-04', '2015-02-05',
+ '2015-02-06', '2015-02-07', '2015-02-08', '2015-02-09', '2015-02-10',
+ '2015-02-11', '2015-02-12', '2015-02-13', '2015-02-14', '2015-02-15',
+ '2015-02-16', '2015-02-17', '2015-02-18', '2015-02-19', '2015-02-20',
+ '2015-02-21', '2015-02-22', '2015-02-23', '2015-02-24', '2015-02-25',
+ '2015-02-26', '2015-02-27', '2015-02-28',
+ ],
+ y: [
+ 14, 17, 8, 4, 7, 10, 12, 14, 12, 11, 10, 9, 18, 14, 14, 16, 13, 8, 8,
+ 7, 7, 3, 9, 9, 4, 13, 9, 6,
+ ],
+ mode: 'line',
+ },
+];
+
+var layout = {
+ title: {text: 'Product price changes and revenue growth'},
+ xaxis: { title: {text: 'Date' }},
+ yaxis: { title: {text: 'Revenue Growth' }},
+ dragmode: 'drawline',
+
+ shapes: [
+ {
+ type: 'rect',
+ xref: 'x',
+ yref: 'paper',
+ x0: '2015-02-02',
+ y0: 0,
+ x1: '2015-02-08',
+ y1: 1,
+ fillcolor: '#d3d3d3',
+ opacity: 0.2,
+ editable: true,
+ line: {
+ width: 0,
+ },
+ label: {
+ text: 'Price drop',
+ font: { size: 10, color: 'green' },
+ textposition: 'top center',
+ },
+ },
+ {
+ type: 'line',
+ x0: '2015-02-01',
+ y0: 8,
+ x1: '2015-02-28',
+ y1: 8,
+ fillcolor: '#d3d3d3',
+ opacity: 0.2,
+ editable: true,
+ label: {
+ text: 'January average',
+ yanchor: 'top',
+ },
+ },
+ ],
+ newshape: { label: { text: 'New shape text' } },
+ height: 500,
+ width: 500,
+};
+
+var config = { 'modeBarButtonsToAdd': [
+ 'drawline',
+ 'drawopenpath',
+ 'drawclosedpath',
+ 'drawcircle',
+ 'drawrect',
+ 'eraseshape'
+ ]
+};
+
+Plotly.newPlot('myDiv', data, layout, config);
diff --git a/content/plotly_js/fundamentals/shapes/lines-positioned-realative-to-plot-and-to-axis.html b/content/plotly_js/fundamentals/shapes/lines-positioned-realative-to-plot-and-to-axis.html
new file mode 100644
index 00000000000..de3ed24d10a
--- /dev/null
+++ b/content/plotly_js/fundamentals/shapes/lines-positioned-realative-to-plot-and-to-axis.html
@@ -0,0 +1,67 @@
+---
+name: Lines Positioned Relative to the Plot and to the Axis
+language: plotly_js
+suite: shape
+order: 6
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [2, 6],
+ y: [1, 1],
+ text: ['Line positioned relative to the plot', 'Line positioned relative to the axes'],
+ mode: 'text'
+};
+
+var layout = {
+ title: {
+ text: 'Lines Positioned Relative to the Plot & to the Axes'
+ },
+ xaxis: {
+ range: [0, 8]
+ },
+ yaxis: {
+ range: [0, 2]
+ },
+ width: 500,
+ height: 500,
+ shapes: [
+
+ //Line reference to the axes
+
+ {
+ type: 'line',
+ xref: 'x',
+ yref: 'y',
+ x0: 4,
+ y0: 0,
+ x1: 8,
+ y1: 1,
+ line: {
+ color: 'rgb(55, 128, 191)',
+ width: 3
+ }
+ },
+
+ //Line reference to the plot
+
+ {
+ type: 'line',
+ xref: 'paper',
+ yref: 'paper',
+ x0: 0,
+ y0: 0,
+ x1: 0.5,
+ y1: 0.5,
+ line: {
+ color: 'rgb(50, 171, 96)',
+ width: 3
+ }
+ }
+ ]
+};
+
+var data = [trace1];
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/shapes/lines-positioned-relative-to-axis.html b/content/plotly_js/fundamentals/shapes/lines-positioned-relative-to-axis.html
new file mode 100644
index 00000000000..5512270f352
--- /dev/null
+++ b/content/plotly_js/fundamentals/shapes/lines-positioned-relative-to-axis.html
@@ -0,0 +1,79 @@
+---
+name: Vertical and Horizontal Lines Positioned Relative to the Axes
+language: plotly_js
+suite: shape
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [2, 3.5, 6],
+ y: [1, 1.5, 1],
+ text: ['Vertical Line', 'Horizontal Dashed Line', 'Diagonal dotted Line'],
+ mode: 'text'
+};
+
+var layout = {
+ title: {
+ text: 'Vertical and Horizontal Lines Positioned Relative to the Axes'
+ },
+ xaxis: {
+ range: [0, 7]
+ },
+ yaxis: {
+ range: [0, 2.5]
+ },
+ width: 500,
+ height: 500,
+ shapes: [
+
+ //line vertical
+
+ {
+ type: 'line',
+ x0: 1,
+ y0: 0,
+ x1: 1,
+ y1: 2,
+ line: {
+ color: 'rgb(55, 128, 191)',
+ width: 3
+ }
+ },
+
+ //Line Horizontal
+
+ {
+ type: 'line',
+ x0: 2,
+ y0: 2,
+ x1: 5,
+ y1: 2,
+ line: {
+ color: 'rgb(50, 171, 96)',
+ width: 4,
+ dash: 'dashdot'
+ }
+ },
+
+ //Line Diagonal
+
+ {
+ type: 'line',
+ x0: 4,
+ y0: 0,
+ x1: 6,
+ y1: 2,
+ line: {
+ color: 'rgb(128, 0, 128)',
+ width: 4,
+ dash: 'dot'
+ }
+ }
+ ]
+};
+
+var data = [trace1];
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/shapes/rectangle-positioned-relative-to-axis.html b/content/plotly_js/fundamentals/shapes/rectangle-positioned-relative-to-axis.html
new file mode 100644
index 00000000000..ffd2be993c2
--- /dev/null
+++ b/content/plotly_js/fundamentals/shapes/rectangle-positioned-relative-to-axis.html
@@ -0,0 +1,64 @@
+---
+name: Rectangle Positioned Relative to the Axes
+language: plotly_js
+suite: shape
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [1.5, 4.5],
+ y: [0.75, 0.75],
+ text: ['Unfilled Rectangle', 'Filled Rectangle'],
+ mode: 'text'
+};
+
+var layout = {
+ title: {
+ text: 'Rectangle Positioned Relative to the Axes'
+ },
+ xaxis: {
+ range: [0, 7],
+ showgrid: false
+ },
+ yaxis: {
+ range: [0, 3.5]
+ },
+ width: 500,
+ height: 500,
+ shapes: [
+
+ //Unfilled Rectangle
+
+ {
+ type: 'rect',
+ x0: 1,
+ y0: 1,
+ x1: 2,
+ y1: 3,
+ line: {
+ color: 'rgba(128, 0, 128, 1)'
+ }
+ },
+
+ //Filled Rectangle
+
+ {
+ type: 'rect',
+ x0: 3,
+ y0: 1,
+ x1: 6,
+ y1: 2,
+ line: {
+ color: 'rgba(128, 0, 128, 1)',
+ width: 2
+ },
+ fillcolor: 'rgba(128, 0, 128, 0.7)'
+ }
+ ]
+};
+
+var data = [trace1];
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/shapes/rectangles-positioned-relative-to-plot-and-axes.html b/content/plotly_js/fundamentals/shapes/rectangles-positioned-relative-to-plot-and-axes.html
new file mode 100644
index 00000000000..17d2593f3a5
--- /dev/null
+++ b/content/plotly_js/fundamentals/shapes/rectangles-positioned-relative-to-plot-and-axes.html
@@ -0,0 +1,70 @@
+---
+name: Rectangle Positioned Relative to the Plot and to the Axes
+language: plotly_js
+suite: shape
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [1.5, 3],
+ y: [2.5, 2.5],
+ text: ['Rectangle reference to the plot', 'Rectangle reference to the axes'],
+ mode: 'text'
+};
+
+var layout = {
+ title: {
+ text: 'Rectangles Positioned Relative to the Plot and to the Axes'
+ },
+ xaxis: {
+ range: [0, 4],
+ showgrid: false
+ },
+ yaxis: {
+ range: [0, 4]
+ },
+ width: 800,
+ height: 600,
+ shapes: [
+
+ //Rectangle reference to the axes
+
+ {
+ type: 'rect',
+ xref: 'x',
+ yref: 'y',
+ x0: 2.5,
+ y0: 0,
+ x1: 3.5,
+ y1: 2,
+ line: {
+ color: 'rgb(55, 128, 191)',
+ width: 3
+ },
+ fillcolor: 'rgba(55, 128, 191, 0.6)'
+ },
+
+ //Rectangle reference to the Plot
+
+ {
+ type: 'rect',
+ xref: 'paper',
+ yref: 'paper',
+ x0: 0.25,
+ y0: 0,
+ x1: 0.5,
+ y1: 0.5,
+ line: {
+ color: 'rgb(50, 171, 96)',
+ width: 3
+ },
+ fillcolor: 'rgba(50, 171, 96, 0.6)'
+ }
+ ]
+};
+
+var data = [trace1];
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/shapes/shape-clusters.html b/content/plotly_js/fundamentals/shapes/shape-clusters.html
new file mode 100644
index 00000000000..d7a56512de3
--- /dev/null
+++ b/content/plotly_js/fundamentals/shapes/shape-clusters.html
@@ -0,0 +1,118 @@
+---
+name: Highlighting Clusters of Scatter Points with Circle Shapes
+language: plotly_js
+suite: shape
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+function normal_array( mean, stddev, size ){
+ var arr = new Array(size), i;
+ // from http://bl.ocks.org/nrabinowitz/2034281
+ var generator = (function() {
+ return d3.random.normal(mean, stddev);
+ }());
+
+ for( i=0; i< arr.length; i++ ){
+ arr[i] = generator();
+ }
+ return arr;
+}
+
+var x0 = normal_array(2, 0.45, 300);
+var y0 = normal_array(2, 0.45, 300);
+
+var x1 = normal_array(6, 0.4, 200);
+var y1 = normal_array(6, 0.4, 200)
+
+var x2 = normal_array(4, 0.3, 200);
+var y2 = normal_array(4, 0.3, 200);
+
+console.log(x0);
+
+var data = [
+ {
+ x: x0,
+ y: y0,
+ mode: 'markers'
+ }, {
+ x: x1,
+ y: y1,
+ mode: 'markers'
+ }, {
+ x: x2,
+ y: y2,
+ mode: 'markers'
+ }, {
+ x: x1,
+ y: y0,
+ mode: 'markers'
+ }
+];
+
+var layout = {
+ shapes: [
+ {
+ type: 'circle',
+ xref: 'x',
+ yref: 'y',
+ x0: d3.min(x0),
+ y0: d3.min(y0),
+ x1: d3.max(x0),
+ y1: d3.max(y0),
+ opacity: 0.2,
+ fillcolor: 'blue',
+ line: {
+ color: 'blue'
+ }
+ },
+ {
+ type: 'circle',
+ xref: 'x',
+ yref: 'y',
+ x0: d3.min(x1),
+ y0: d3.min(y1),
+ x1: d3.max(x1),
+ y1: d3.max(y1),
+ opacity: 0.2,
+ fillcolor: 'orange',
+ line: {
+ color: 'orange'
+ }
+ },
+ {
+ type: 'circle',
+ xref: 'x',
+ yref: 'y',
+ x0: d3.min(x2),
+ y0: d3.min(y2),
+ x1: d3.max(x2),
+ y1: d3.max(y2),
+ opacity: 0.2,
+ fillcolor: 'green',
+ line: {
+ color: 'green'
+ }
+ },
+ {
+ type: 'circle',
+ xref: 'x',
+ yref: 'y',
+ x0: d3.min(x1),
+ y0: d3.min(y0),
+ x1: d3.max(x1),
+ y1: d3.max(y0),
+ opacity: 0.2,
+ fillcolor: 'red',
+ line: {
+ color: 'red'
+ }
+ }
+ ],
+ height: 400,
+ width: 480,
+ showlegend: false
+}
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/shapes/shape-timestamp-highlight.html b/content/plotly_js/fundamentals/shapes/shape-timestamp-highlight.html
new file mode 100644
index 00000000000..803aa01745c
--- /dev/null
+++ b/content/plotly_js/fundamentals/shapes/shape-timestamp-highlight.html
@@ -0,0 +1,68 @@
+---
+name: Highlighting Time Series Regions with Rectangle Shapes
+language: plotly_js
+suite: shape
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: ['2015-02-01', '2015-02-02', '2015-02-03', '2015-02-04', '2015-02-05',
+ '2015-02-06', '2015-02-07', '2015-02-08', '2015-02-09', '2015-02-10',
+ '2015-02-11', '2015-02-12', '2015-02-13', '2015-02-14', '2015-02-15',
+ '2015-02-16', '2015-02-17', '2015-02-18', '2015-02-19', '2015-02-20',
+ '2015-02-21', '2015-02-22', '2015-02-23', '2015-02-24', '2015-02-25',
+ '2015-02-26', '2015-02-27', '2015-02-28'],
+ y: [-14, -17, -8, -4, -7, -10, -12, -14, -12, -7, -11, -7, -18, -14, -14,
+ -16, -13, -7, -8, -14, -8, -3, -9, -9, -4, -13, -9, -6],
+ mode: 'line',
+ name: 'temperature'
+ }
+];
+
+var layout = {
+
+ // to highlight the timestamp we use shapes and create a rectangular
+
+ shapes: [
+ // 1st highlight during Feb 4 - Feb 6
+ {
+ type: 'rect',
+ // x-reference is assigned to the x-values
+ xref: 'x',
+ // y-reference is assigned to the plot paper [0,1]
+ yref: 'paper',
+ x0: '2015-02-04',
+ y0: 0,
+ x1: '2015-02-06',
+ y1: 1,
+ fillcolor: '#d3d3d3',
+ opacity: 0.2,
+ line: {
+ width: 0
+ }
+ },
+
+ // 2nd highlight during Feb 20 - Feb 23
+
+ {
+ type: 'rect',
+ xref: 'x',
+ yref: 'paper',
+ x0: '2015-02-20',
+ y0: 0,
+ x1: '2015-02-22',
+ y1: 1,
+ fillcolor: '#d3d3d3',
+ opacity: 0.2,
+ line: {
+ width: 0
+ }
+ }
+ ],
+ height: 500,
+ width: 500
+}
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/shapes/shape_plotlyjs_index.html b/content/plotly_js/fundamentals/shapes/shape_plotlyjs_index.html
new file mode 100644
index 00000000000..1e6c63f476f
--- /dev/null
+++ b/content/plotly_js/fundamentals/shapes/shape_plotlyjs_index.html
@@ -0,0 +1,16 @@
+---
+description: How to make arbitrary D3.js-based SVG shapes in JavaScript. Examples
+ of lines, circle, rectangle, and path.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Shapes
+order: 23
+page_type: u-guide
+permalink: javascript/shapes/
+redirect_from: javascript-graphing-library/shapes/
+thumbnail: thumbnail/shape.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","shape" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/shapes/tangent-lines-with-shapes.html b/content/plotly_js/fundamentals/shapes/tangent-lines-with-shapes.html
new file mode 100644
index 00000000000..83610a946b5
--- /dev/null
+++ b/content/plotly_js/fundamentals/shapes/tangent-lines-with-shapes.html
@@ -0,0 +1,72 @@
+---
+name: Creating Tangent Lines with Shapes
+language: plotly_js
+suite: shape
+order: 10
+sitemap: false
+arrangement: horizontal
+---
+function linspace(a,b,n) {
+ return d3.range(n).map(function(i){return a+i*(b-a)/(n-1);});
+}
+
+var xValues = linspace(1, 3, 200);
+
+var yValues = [];
+
+for ( var i = 0 ; i < xValues.length ; i++ ) {
+ var result = xValues[i] * Math.sin(Math.pow(xValues[i], 2)) + 1;
+ yValues.push(result);
+};
+
+var trace1 = {
+ x: xValues,
+ y: yValues,
+ type: 'scatter'
+};
+
+var data = [trace1];
+
+var layout = {
+ title: {
+ text: 'Rectangles Positioned Relative to the Plot and to the Axes'
+ },
+ shapes: [{
+ type: 'line',
+ x0: 1,
+ y0: 2.30756,
+ x1: 1.75,
+ y1: 2.30756,
+ opacity: 0.7,
+ line: {
+ color: 'red',
+ width: 2.5
+ }
+ }, {
+ type: 'line',
+ x0: 2.5,
+ y0: 3.80796,
+ x1: 3.05,
+ y1: 3.80796,
+ opacity: 0.7,
+ line: {
+ color: 'red',
+ width: 2.5
+ }
+ }, {
+ type: 'line',
+ x0: 1.90,
+ y0: -1.1827,
+ x1: 2.50,
+ y1: -1.1827,
+ opacity: 0.7,
+ line: {
+ color: 'red',
+ width: 2.5
+ }
+ }],
+ height: 500,
+ width: 500
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/shapes/venn-diagram-with-circle-shapes.html b/content/plotly_js/fundamentals/shapes/venn-diagram-with-circle-shapes.html
new file mode 100644
index 00000000000..6cbfa0670bf
--- /dev/null
+++ b/content/plotly_js/fundamentals/shapes/venn-diagram-with-circle-shapes.html
@@ -0,0 +1,77 @@
+---
+name: Venn Diagram with Circle Shapes
+language: plotly_js
+suite: shape
+order: 9
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [1, 1.75, 2.5],
+ y: [1, 1, 1],
+ type: 'scatter',
+ mode: 'text',
+ text: ['A', 'A+B', 'B'],
+ textfont: {
+ color: 'black',
+ size: 18,
+ family: 'Arial'
+ }
+};
+
+var layout = {
+ title: {
+ text: 'Venn Diagram with Circle Shapes'
+ },
+ xaxis: {
+ showticklabels: false,
+ tickmode: 'linear',
+ showgrid: false,
+ zeroline: false
+ },
+ yaxis: {
+ showticklabels: false,
+ tickmode: 'linear',
+ showgrid: false,
+ zeroline: false
+ },
+ shapes: [{
+ opacity: 0.3,
+ xref: 'x',
+ yref: 'y',
+ fillcolor: 'blue',
+ x0: 0,
+ y0: 0,
+ x1: 2,
+ y1: 2,
+ type: 'circle',
+ line: {
+ color: 'blue'
+ }
+ }, {
+ opacity: 0.3,
+ xref: 'x',
+ yref: 'y',
+ fillcolor: 'gray',
+ x0: 1.5,
+ y0: 0,
+ x1: 3.5,
+ y1: 2,
+ type: 'circle',
+ line: {
+ color: 'gray'
+ }
+ }],
+ margin: {
+ l: 20,
+ r: 20,
+ b: 100
+ },
+ height: 500,
+ width: 500
+};
+
+var data = [trace1];
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/sizing/automargin.html b/content/plotly_js/fundamentals/sizing/automargin.html
new file mode 100644
index 00000000000..bdc997ece57
--- /dev/null
+++ b/content/plotly_js/fundamentals/sizing/automargin.html
@@ -0,0 +1,35 @@
+---
+name: Automatically Adjust Margins
+language: plotly_js
+suite: sizing
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Set `automargin=true` ([reference](https://plotly.com/python/reference/layout/xaxis/#layout-xaxis-automargin)) and Plotly will automatically increase the margin size to prevent ticklabels from being cut off or overlapping with axis titles.
+---
+var data = [
+ {
+ x: ['Apples', 'Oranges', 'Watermelon', 'Pears'],
+ y: [3, 2, 1, 4],
+ type: 'bar'
+ }
+];
+var layout = {
+ autosize: false,
+ width: 500,
+ height: 500,
+ yaxis: {
+ title: {
+ text: 'Y-axis Title',
+ font: { size: 30 }
+ },
+ ticktext: ['long label','Very long label','3','label'],
+ tickvals: [1, 2, 3, 4],
+ tickmode: 'array',
+ automargin: true,
+ },
+ paper_bgcolor: '#7f7f7f',
+ plot_bgcolor: '#c7c7c7'
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/sizing/size-margins.html b/content/plotly_js/fundamentals/sizing/size-margins.html
new file mode 100644
index 00000000000..a4fe3a92e19
--- /dev/null
+++ b/content/plotly_js/fundamentals/sizing/size-margins.html
@@ -0,0 +1,30 @@
+---
+name: Adjusting Height, Width, and Margins
+language: plotly_js
+suite: sizing
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ type: 'scatter'
+ }
+];
+var layout = {
+ autosize: false,
+ width: 500,
+ height: 500,
+ margin: {
+ l: 50,
+ r: 50,
+ b: 100,
+ t: 100,
+ pad: 4
+ },
+ paper_bgcolor: '#7f7f7f',
+ plot_bgcolor: '#c7c7c7'
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/sizing/sizing_plotly_js_index.html b/content/plotly_js/fundamentals/sizing/sizing_plotly_js_index.html
new file mode 100644
index 00000000000..08130cb59b5
--- /dev/null
+++ b/content/plotly_js/fundamentals/sizing/sizing_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to change the size of D3.js-based graphs in javascript.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Setting Graph Size
+order: 21
+page_type: u-guide
+permalink: javascript/setting-graph-size/
+redirect_from: javascript-graphing-library/setting-graph-size/
+thumbnail: thumbnail/multiple-axes.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","sizing" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/static-image-export/static-image.md b/content/plotly_js/fundamentals/static-image-export/static-image.md
new file mode 100644
index 00000000000..94282aaadf8
--- /dev/null
+++ b/content/plotly_js/fundamentals/static-image-export/static-image.md
@@ -0,0 +1,71 @@
+---
+description: How to export graphs as static images in JavaScript. The Plotly JavaScript
+ graphing library supports `.jpg`, `.png`, and `.svg` as formats for static image
+ export.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Static Image Export
+order: 25
+page_type: u-guide
+permalink: javascript/static-image-export/
+sitemap: false
+thumbnail: thumbnail/png-export.png
+---
+
+You can save graphs created with `plotly.js` to static images and view them in your browser. Consider the following example:
+
+ var img_jpg= d3.select('#jpg-export');
+
+ // Plotting the Graph
+
+ var trace={x:[3,9,8,10,4,6,5],y:[5,7,6,7,8,9,8],type:"scatter"};
+ var trace1={x:[3,4,1,6,8,9,5],y:[4,2,5,2,1,7,3],type:"scatter"};
+ var data = [trace,trace1];
+ var layout = {title : "Simple JavaScript Graph"};
+ Plotly.newPlot(
+ 'plotly_div',
+ data,
+ layout)
+
+ // static image in jpg format
+
+ .then(
+ function(gd)
+ {
+ Plotly.toImage(gd,{height:300,width:300})
+ .then(
+ function(url)
+ {
+ img_jpg.attr("src", url);
+ }
+ )
+ });
+To view this image in your page include following HTML tag:
+
+
+
+Height and width of the image can be adjusted by specifying the same in `toImage` call:
+
+ Plotly.toImage(
+ gd,{
+ format:'jpeg',
+ height:desired_height,
+ width:desired_width,
+ });
+
+You can also save the image using different formats.
+
+# Formats Supported
+
+The common image formats: 'PNG', 'JPG/JPEG' are supported. In addition, formats like 'EPS', 'SVG' and 'PDF' are also available for user with a Personal or Professional subscription. You can get more details on our [pricing page] (https://plotly.com/products/cloud/)
+
+**Note:** It is important to note that any figures containing WebGL traces (i.e. of type scattergl, heatmapgl, contourgl, scatter3d, surface, mesh3d, scatterpolargl, cone, streamtube, splom, or parcoords) that are exported in a vector format like SVG, EPS or PDF will include encapsulated rasters instead of vectors for some parts of the image.
+
+## Saving as PNG ##
+ img_png.attr("src", url);
+ Plotly.toImage(gd,{format:'png',height:400,width:400});
+
+## Saving as SVG ##
+ img_svg.attr("src", url);
+ Plotly.toImage(gd,{format:'svg',height:800,width:800});
diff --git a/content/plotly_js/fundamentals/texttemplate/add_text_template.html b/content/plotly_js/fundamentals/texttemplate/add_text_template.html
new file mode 100644
index 00000000000..867cda63d28
--- /dev/null
+++ b/content/plotly_js/fundamentals/texttemplate/add_text_template.html
@@ -0,0 +1,19 @@
+---
+name: Add Text Template in Pie Chart
+language: plotly_js
+suite: texttemplate
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ To show an arbitrary text in your chart you can use [texttemplate](https://plotly.com/javascript/reference/pie/#pie-texttemplate), which is a template string used for rendering the information, and will override [textinfo](https://plotly.com/javascript/reference/treemap/#treemap-textinfo).
+---
+var data = [{
+ type: "pie",
+ values: [2, 5, 3, 2.5],
+ labels: ["R", "Python", "Java Script", "Matlab"],
+ texttemplate: "%{label}: %{value} (%{percent})",
+ textposition: "inside"
+}];
+
+Plotly.newPlot("myDiv", data)
diff --git a/content/plotly_js/fundamentals/texttemplate/customize_text_template.html b/content/plotly_js/fundamentals/texttemplate/customize_text_template.html
new file mode 100644
index 00000000000..a085ac6b1a3
--- /dev/null
+++ b/content/plotly_js/fundamentals/texttemplate/customize_text_template.html
@@ -0,0 +1,23 @@
+---
+name: Customize Text Template
+language: plotly_js
+suite: texttemplate
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The following example uses [textfont](https://plotly.com/javascript/reference/scatterternary/#scatterternary-textfont) to customize the added text.
+---
+var data = [{
+ type: "scatterternary",
+ a: [3, 2, 5],
+ b: [2, 5, 2],
+ c: [5, 2, 2],
+ mode: "markers+text",
+ text: ["A", "B", "C"],
+ texttemplate: "%{text} (%{a:.2f}, %{b:.2f}, %{c:.2f})",
+ textposition: "bottom center",
+ textfont:{'family': "Times", 'size': [18, 21, 20], 'color': ["IndianRed", "MediumPurple", "DarkOrange"]}
+}];
+
+Plotly.newPlot("myDiv", data)
diff --git a/content/plotly_js/fundamentals/texttemplate/date-in-text-template.html b/content/plotly_js/fundamentals/texttemplate/date-in-text-template.html
new file mode 100644
index 00000000000..da531782f3a
--- /dev/null
+++ b/content/plotly_js/fundamentals/texttemplate/date-in-text-template.html
@@ -0,0 +1,31 @@
+---
+name: Set Date in Text Template
+language: plotly_js
+suite: texttemplate
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ The following example displays how to show date by setting [axis.type](https://plotly.com/javascript/reference/layout/yaxis/#layout-yaxis-type) in [funnel charts](https://plotly.com/javascript/funnel-charts/).
+---
+var data = [{
+ type: 'funnel',
+ name: 'Montreal',
+ orientation: "h",
+ y: ["2018-01-01", "2018-07-01", "2019-01-01", "2020-01-01"],
+ x: [100, 60, 40, 20],
+ textposition: "inside",
+ texttemplate: "%{label}"
+},{
+ type: "funnel",
+ name: 'Vancouver',
+ orientation: "h",
+ y: ["2018-01-01", "2018-07-01", "2019-01-01", "2020-01-01"],
+ x: [90, 70, 50, 10],
+ textposition: "inside",
+ textinfo: "label"}]
+
+var layout = {yaxis: {type: 'date'}}
+
+Plotly.newPlot("myDiv", data, layout)
diff --git a/content/plotly_js/fundamentals/texttemplate/texttemplate_plotly_js_index.html b/content/plotly_js/fundamentals/texttemplate/texttemplate_plotly_js_index.html
new file mode 100644
index 00000000000..9b16a1b2580
--- /dev/null
+++ b/content/plotly_js/fundamentals/texttemplate/texttemplate_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to use D3.js-based text template in Plotly.js.
+display_as: file_settings
+has_thumbnail: true
+language: plotly_js
+layout: base
+name: Text Template
+order: 24
+page_type: u-guide
+permalink: javascript/texttemplate/
+thumbnail: thumbnail/texttemplate.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","texttemplate" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/tick-format/array-tickmode.html b/content/plotly_js/fundamentals/tick-format/array-tickmode.html
new file mode 100644
index 00000000000..2f5211293be
--- /dev/null
+++ b/content/plotly_js/fundamentals/tick-format/array-tickmode.html
@@ -0,0 +1,25 @@
+---
+name: Tickmode - Array
+language: plotly_js
+suite: tick-formatting
+order: 1.5
+sitemap: false
+arrangement: horizontal
+---
+
+var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+var y = [28.8, 28.5, 37, 56.8, 69.7, 79.7, 78.5, 77.8, 74.1, 62.6, 45.3, 39.9];
+var data = [{
+ x: x,
+ y: y,
+ type: 'scatter'
+}];
+var layout = {
+ xaxis: {
+ tickmode: "array", // If "array", the placement of the ticks is set via `tickvals` and the tick text is `ticktext`.
+ tickvals: [1, 3, 5, 7, 9, 11],
+ ticktext: ['One', 'Three', 'Five', 'Seven', 'Nine', 'Eleven']
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/tick-format/how-to-tick-format-layout.html b/content/plotly_js/fundamentals/tick-format/how-to-tick-format-layout.html
new file mode 100644
index 00000000000..4c4254926bb
--- /dev/null
+++ b/content/plotly_js/fundamentals/tick-format/how-to-tick-format-layout.html
@@ -0,0 +1,58 @@
+---
+name: Layout Attributes with respect to Formatting Ticks
+language: plotly_js
+suite: tick-formatting
+sitemap: false
+arrangement: horizontal
+order: 0
+---
+
+
+
+{
+ xaxis: {
+ /* show/hide tick labels (defaults to true) */
+ showticklabels: boolean,
+ /* Set the tick mode for the axis "auto" or "linear" or "array" */
+ tickmode: 'auto',
+
+ /* Set the placement of the first tick*/
+ tick0: '',
+ /* Set the step in-between ticks*/
+ dtick: '',
+ /* Specifies the maximum number of ticks */
+ nticks: 0,
+
+ /* Set the values at which ticks on this axis appear */
+ tickvals: [ /* */ ],
+ /* Set the text displayed at the ticks position via tickvals */
+ ticktext: [ /* */ ],
+ /* Set the source reference for tickvals */
+ tickvalssrc: '',
+ /* Set the source reference for ticktext */
+ tickvtextsrc: '',
+
+ /* Set the tick label formatting rule using d3 formatting mini-languages */
+ tickformat: '',
+ /* Set the tickformat per zoom level */
+ tickformatstops: {
+ enabled: true,
+ /* Set the range of the dtick values which describe the zoom level, it is possible to omit "min" or "max" value by passing "null" */
+ dtickrange: ["min", "max"],
+ /* dtickformat for described zoom level, the same as "tickformat" */
+ value: string,
+ },
+
+ /* Set the ticks to display with a prefix: "all" or "first" or "last" or "none" */
+ showtickprefix: 'all',
+ tickprefix: string,
+
+ /* Set the ticks to display with a suffix: "all" or "first" or "last" or "none" */
+ showticksuffix: 'all',
+ ticksuffix: string,
+
+ /* Determines a formatting rule for the tick exponents: "none" or "e" or "E" or "power" or "SI" or "B" */
+ exponentformat: 'B',
+ }
+ /* similarly for yaxis */
+}
diff --git a/content/plotly_js/fundamentals/tick-format/how-to-tick-format_index.html b/content/plotly_js/fundamentals/tick-format/how-to-tick-format_index.html
new file mode 100644
index 00000000000..2b43f4a7be0
--- /dev/null
+++ b/content/plotly_js/fundamentals/tick-format/how-to-tick-format_index.html
@@ -0,0 +1,15 @@
+---
+arrangement: horizontal
+description: How to format axes ticks in D3.js-based JavaScript charts.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Formatting Ticks
+order: 22
+page_type: u-guide
+permalink: javascript/tick-formatting/
+thumbnail: thumbnail/hover.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","tick-formatting" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/tick-format/include-fr-locale.html b/content/plotly_js/fundamentals/tick-format/include-fr-locale.html
new file mode 100644
index 00000000000..e4f770e8b49
--- /dev/null
+++ b/content/plotly_js/fundamentals/tick-format/include-fr-locale.html
@@ -0,0 +1,25 @@
+---
+name: Include Locale Config
+language: plotly_js
+suite: tick-formatting
+order: 4.0
+sitemap: false
+arrangement: horizontal
+---
+
+var x = ['2013-02-04', '2013-04-05', '2013-06-06', '2013-08-07', '2013-10-02'];
+var y = [1, 4, 3, 6, 2];
+var data = [{
+ x: x,
+ y: y,
+ type: 'scatter'
+}];
+var layout = {
+ xaxis: {
+ tickformat: '%a %e %b \n %Y'
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout, {
+ locale: 'fr' // For more info, see: https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-include-localization and https://github.com/plotly/plotly.js/tree/master/dist
+});
diff --git a/content/plotly_js/fundamentals/tick-format/linear(date)-tickmode.html b/content/plotly_js/fundamentals/tick-format/linear(date)-tickmode.html
new file mode 100644
index 00000000000..fbc527bbe2f
--- /dev/null
+++ b/content/plotly_js/fundamentals/tick-format/linear(date)-tickmode.html
@@ -0,0 +1,25 @@
+---
+name: Tickmode - Linear (Date)
+language: plotly_js
+suite: tick-formatting
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+var x = ['2000-01', '2000-02', '2000-03', '2000-04', '2000-05', '2000-06', '2000-07', '2000-08', '2000-09', '2000-10', '2000-11', '2000-12', '2001-01'];
+var y = [-36.5, -26.6, -43.6, -52.3, -71.5, -81.4, -80.5, -82.2, -76, -67.3, -46.1, -35, -40];
+var data = [{
+ x: x,
+ y: y,
+ type: 'scatter'
+}];
+var layout = {
+ xaxis: {
+ tickmode: "linear", // If "linear", the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick`
+ tick0: '1999-12-15',
+ dtick: 30 * 24 * 60 * 60 * 1000 // milliseconds
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/tick-format/linear-tickmode.html b/content/plotly_js/fundamentals/tick-format/linear-tickmode.html
new file mode 100644
index 00000000000..2d06b7f8a0f
--- /dev/null
+++ b/content/plotly_js/fundamentals/tick-format/linear-tickmode.html
@@ -0,0 +1,25 @@
+---
+name: Tickmode - Linear
+language: plotly_js
+suite: tick-formatting
+order: 0.5
+sitemap: false
+arrangement: horizontal
+---
+
+var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+var y = [28.8, 28.5, 37, 56.8, 69.7, 79.7, 78.5, 77.8, 74.1, 62.6, 45.3, 39.9];
+var data = [{
+ x: x,
+ y: y,
+ type: 'scatter'
+}];
+var layout = {
+ xaxis: {
+ tickmode: "linear", // If "linear", the placement of the ticks is determined by a starting position `tick0` and a tick step `dtick`
+ tick0: 0.5,
+ dtick: 0.75
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/tick-format/tickformatstops.html b/content/plotly_js/fundamentals/tick-format/tickformatstops.html
new file mode 100644
index 00000000000..834967f68cd
--- /dev/null
+++ b/content/plotly_js/fundamentals/tick-format/tickformatstops.html
@@ -0,0 +1,57 @@
+---
+name: Tickformatstops to customize for different zoom levels
+language: plotly_js
+suite: tick-formatting
+order: 2.75
+sitemap: false
+arrangement: horizontal
+---
+
+var gd = document.getElementById('myDiv');
+var x = ["2005-01", "2005-02", "2005-03", "2005-04", "2005-05", "2005-06", "2005-07"];
+var y = [-20, 10, -5, 0, 5, -10, 20];
+var data = [{
+ x: x,
+ y: y,
+ type: 'scatter'
+}];
+var layout = {
+ xaxis: {
+ tickformatstops: [{
+ "dtickrange": [null, 1000],
+ "value": "%H:%M:%S.%L ms"
+ },
+ {
+ "dtickrange": [1000, 60000],
+ "value": "%H:%M:%S s"
+ },
+ {
+ "dtickrange": [60000, 3600000],
+ "value": "%H:%M m"
+ },
+ {
+ "dtickrange": [3600000, 86400000],
+ "value": "%H:%M h"
+ },
+ {
+ "dtickrange": [86400000, 604800000],
+ "value": "%e. %b d"
+ },
+ {
+ "dtickrange": [604800000, "M1"],
+ "value": "%e. %b w"
+ },
+ {
+ "dtickrange": ["M1", "M12"],
+ "value": "%b '%y M"
+ },
+ {
+ "dtickrange": ["M12", null],
+ "value": "%Y Y"
+ }
+ ]
+ }
+};
+
+Plotly.newPlot("myDiv", data, layout);
+
diff --git a/content/plotly_js/fundamentals/tick-format/using-exponentformat.html b/content/plotly_js/fundamentals/tick-format/using-exponentformat.html
new file mode 100644
index 00000000000..da475cbf87f
--- /dev/null
+++ b/content/plotly_js/fundamentals/tick-format/using-exponentformat.html
@@ -0,0 +1,24 @@
+---
+name: Using Exponentformat
+language: plotly_js
+suite: tick-formatting
+order: 3.0
+sitemap: false
+arrangement: horizontal
+---
+
+var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+var y = [68000, 52000, 60000, 20000, 95000, 40000, 60000, 79000, 74000, 42000, 20000, 90000];
+var data = [{
+ x: x,
+ y: y,
+ type: 'scatter'
+}];
+var layout = {
+ yaxis: {
+ showexponent: 'all',
+ exponentformat: 'e'
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/tick-format/using-tickformat(date).html b/content/plotly_js/fundamentals/tick-format/using-tickformat(date).html
new file mode 100644
index 00000000000..f726a4e9fce
--- /dev/null
+++ b/content/plotly_js/fundamentals/tick-format/using-tickformat(date).html
@@ -0,0 +1,53 @@
+---
+name: Using Tickformat (Date)
+language: plotly_js
+suite: tick-formatting
+order: 2.5
+sitemap: false
+arrangement: horizontal
+---
+
+
+
+d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv", function (err, rows) {
+
+ function unpack(rows, key) {
+ return rows.map(function (row) {
+ return row[key];
+ });
+ }
+
+
+ var trace1 = {
+ type: "scatter",
+ mode: "lines",
+ name: 'AAPL High',
+ x: unpack(rows, 'Date'),
+ y: unpack(rows, 'AAPL.High'),
+ line: {
+ color: '#17BECF'
+ }
+ }
+
+ var trace2 = {
+ type: "scatter",
+ mode: "lines",
+ name: 'AAPL Low',
+ x: unpack(rows, 'Date'),
+ y: unpack(rows, 'AAPL.Low'),
+ line: {
+ color: '#7F7F7F'
+ }
+ }
+
+ var data = [trace1, trace2];
+
+ var layout = {
+ title: {text: 'Time series with custom tickformat'},
+ xaxis: {
+ tickformat: '%d %B (%a)\n %Y' // For more time formatting types, see: https://github.com/d3/d3-time-format/blob/master/README.md
+ }
+ };
+
+ Plotly.newPlot('myDiv', data, layout);
+})
diff --git a/content/plotly_js/fundamentals/tick-format/using-tickformat.html b/content/plotly_js/fundamentals/tick-format/using-tickformat.html
new file mode 100644
index 00000000000..bc65b70cff2
--- /dev/null
+++ b/content/plotly_js/fundamentals/tick-format/using-tickformat.html
@@ -0,0 +1,23 @@
+---
+name: Using Tickformat
+language: plotly_js
+suite: tick-formatting
+order: 2.0
+sitemap: false
+arrangement: horizontal
+---
+
+var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+var y = [0.18, 0.38, 0.56, 0.46, 0.59, 0.4, 0.78, 0.77, 0.74, 0.42, 0.45, 0.39];
+var data = [{
+ x: x,
+ y: y,
+ type: 'scatter'
+}];
+var layout = {
+ yaxis: {
+ tickformat: '%' // For more formatting types, see: https://github.com/d3/d3-format/blob/master/README.md#locale_format
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/uirevision/uirevision-index.html b/content/plotly_js/fundamentals/uirevision/uirevision-index.html
new file mode 100644
index 00000000000..ae70e4898c3
--- /dev/null
+++ b/content/plotly_js/fundamentals/uirevision/uirevision-index.html
@@ -0,0 +1,14 @@
+---
+description: Persist user interactions using uirevision with Plotly.react or Dash.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: uirevision in Plotly.react
+order: 3
+page_type: example_index
+permalink: javascript/uirevision/
+thumbnail: thumbnail/uirevision.gif
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","uirevision" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/uirevision/uirevision-persist.html b/content/plotly_js/fundamentals/uirevision/uirevision-persist.html
new file mode 100644
index 00000000000..12bd05db9e7
--- /dev/null
+++ b/content/plotly_js/fundamentals/uirevision/uirevision-persist.html
@@ -0,0 +1,53 @@
+---
+arrangement: horizontal
+language: plotly_js
+markdown_content: 'Adding a `uirevision` attribute and then keeping it the same during
+ the next call to Plotly.react ensures that user
+
+ interactions persist.
+
+ '
+name: Persist User Changes
+order: 1
+plot_url: https://codepen.io/plotly/embed/ebMJEW/?height=550&theme-id=15263&default-tab=result
+sitemap: false
+suite: uirevision
+---
+
+const rand = () => Math.random();
+var x = [1, 2, 3, 4, 5];
+const new_data = (trace) => Object.assign(trace, {y: x.map(rand)});
+
+// add random data to three line traces
+var data = [
+ {mode:'lines', line: {color: "#b55400"}},
+ {mode: 'lines', line: {color: "#393e46"}},
+ {mode: 'lines', line: {color: "#222831"}}
+].map(new_data);
+
+var layout = {
+ title: {text: 'User Zoom Persists When uirevision Unchanged'},
+ uirevision:'true',
+ xaxis: {autorange: true},
+ yaxis: {autorange: true}
+};
+
+Plotly.react('myDiv', data, layout);
+
+var myPlot = document.getElementById('myDiv');
+
+var cnt = 0;
+var interval = setInterval(function() {
+ data = data.map(new_data);
+
+ // user interaction will mutate layout and set autorange to false
+ // so we need to reset it to true
+ layout.xaxis.autorange = true;
+ layout.yaxis.autorange = true;
+
+ // not changing uirevision will ensure that user interactions are unchanged
+ // layout.uirevision = rand();
+
+ Plotly.react('myDiv', data, layout);
+ if(cnt === 100) clearInterval(interval);
+}, 2500);
diff --git a/content/plotly_js/fundamentals/uirevision/uirevision-reset.html b/content/plotly_js/fundamentals/uirevision/uirevision-reset.html
new file mode 100644
index 00000000000..eddee1a31e3
--- /dev/null
+++ b/content/plotly_js/fundamentals/uirevision/uirevision-reset.html
@@ -0,0 +1,52 @@
+---
+arrangement: horizontal
+language: plotly_js
+markdown_content: 'Changing the `uirevision` attribute during a Plotly.react call
+ will reset previous user interactions in the updated plot.
+
+ '
+name: Reset User Changes
+order: 2
+plot_url: https://codepen.io/plotly/embed/REMrgv/?height=550&theme-id=15263&default-tab=result
+sitemap: false
+suite: uirevision
+---
+
+const rand = () => Math.random();
+var x = [1, 2, 3, 4, 5];
+const new_data = (trace) => Object.assign(trace, {y: x.map(rand)});
+
+// add random data to three line traces
+var data = [
+ {mode:'lines', line: {color: "#b55400"}},
+ {mode: 'lines', line: {color: "#393e46"}},
+ {mode: 'lines', line: {color: "#222831"}}
+].map(new_data);
+
+var layout = {
+ title: {text: 'User Zoom Resets When uirevision Changes'},
+ uirevision:'true',
+ xaxis: {autorange: true},
+ yaxis: {autorange: true}
+};
+
+Plotly.react('myDiv', data, layout);
+
+var myPlot = document.getElementById('myDiv');
+
+var cnt = 0;
+var interval = setInterval(function() {
+ data = data.map(new_data);
+
+ // user interaction will mutate layout and set autorange to false
+ // so we need to reset it to true
+ layout.xaxis.autorange = true;
+ layout.yaxis.autorange = true;
+
+ // a new random number should ensure that uirevision will be different
+ // and so the graph will autorange after the Plotly.react
+ layout.uirevision = rand();
+
+ Plotly.react('myDiv', data, layout);
+ if(cnt === 100) clearInterval(interval);
+}, 2500);
\ No newline at end of file
diff --git a/content/plotly_js/maps/bubble-maps/USA-bubble-map.html b/content/plotly_js/maps/bubble-maps/USA-bubble-map.html
new file mode 100644
index 00000000000..3ee9eae6601
--- /dev/null
+++ b/content/plotly_js/maps/bubble-maps/USA-bubble-map.html
@@ -0,0 +1,66 @@
+---
+name: USA Bubble Map
+language: plotly_js
+suite: bubble-maps
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_us_cities.csv', function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+ var cityName = unpack(rows, 'name'),
+ cityPop = unpack(rows, 'pop'),
+ cityLat = unpack(rows, 'lat'),
+ cityLon = unpack(rows, 'lon'),
+ color = [,"rgb(255,65,54)","rgb(133,20,75)","rgb(255,133,27)","lightgrey"],
+ citySize = [],
+ hoverText = [],
+ scale = 50000;
+
+ for ( var i = 0 ; i < cityPop.length; i++) {
+ var currentSize = cityPop[i] / scale;
+ var currentText = cityName[i] + " pop: " + cityPop[i];
+ citySize.push(currentSize);
+ hoverText.push(currentText);
+ }
+
+ var data = [{
+ type: 'scattergeo',
+ locationmode: 'USA-states',
+ lat: cityLat,
+ lon: cityLon,
+ hoverinfo: 'text',
+ text: hoverText,
+ marker: {
+ size: citySize,
+ line: {
+ color: 'black',
+ width: 2
+ },
+ }
+ }];
+
+ var layout = {
+ title: {text: '2014 US City Populations'},
+ showlegend: false,
+ geo: {
+ scope: 'usa',
+ projection: {
+ type: 'albers usa'
+ },
+ showland: true,
+ landcolor: 'rgb(217, 217, 217)',
+ subunitwidth: 1,
+ countrywidth: 1,
+ subunitcolor: 'rgb(255,255,255)',
+ countrycolor: 'rgb(255,255,255)'
+ },
+ };
+
+ Plotly.newPlot("myDiv", data, layout, {showLink: false});
+
+});
diff --git a/content/plotly_js/maps/bubble-maps/bubble-map.html b/content/plotly_js/maps/bubble-maps/bubble-map.html
new file mode 100644
index 00000000000..42144cbe1ab
--- /dev/null
+++ b/content/plotly_js/maps/bubble-maps/bubble-map.html
@@ -0,0 +1,39 @@
+---
+name: Europe Bubble Map
+language: plotly_js
+suite: bubble-maps
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [{
+ type: 'scattergeo',
+ mode: 'markers',
+ locations: ['FRA', 'DEU', 'RUS', 'ESP'],
+ marker: {
+ size: [20, 30, 15, 10],
+ color: [10, 20, 40, 50],
+ cmin: 0,
+ cmax: 50,
+ colorscale: 'Greens',
+ colorbar: {
+ title: {text: 'Some rate'},
+ ticksuffix: '%',
+ showticksuffix: 'last'
+ },
+ line: {
+ color: 'black'
+ }
+ },
+ name: 'europe data'
+}];
+
+var layout = {
+ 'geo': {
+ 'scope': 'europe',
+ 'resolution': 50
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/maps/bubble-maps/bubble_maps_plotlyjs_index.html b/content/plotly_js/maps/bubble-maps/bubble_maps_plotlyjs_index.html
new file mode 100644
index 00000000000..2effd407915
--- /dev/null
+++ b/content/plotly_js/maps/bubble-maps/bubble_maps_plotlyjs_index.html
@@ -0,0 +1,16 @@
+---
+description: How to make a D3.js-based bubble map in JavaScript. A bubble map overlays
+ a bubble chart on a map.
+display_as: maps
+language: plotly_js
+layout: base
+name: Bubble Maps
+order: 6
+page_type: example_index
+permalink: javascript/bubble-maps/
+redirect_from: javascript-graphing-library/bubble-maps/
+thumbnail: thumbnail/bubble-map.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","bubble-maps" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/maps/choropleth-mapbox/US_states.html b/content/plotly_js/maps/choropleth-mapbox/US_states.html
new file mode 100644
index 00000000000..b87485c7ab3
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-mapbox/US_states.html
@@ -0,0 +1,20 @@
+---
+name: Dark tile
+language: plotly_js
+suite: tile-county-choropleth
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ This example uses [zmin and zmax](https://plotly.com/javascript/reference/choroplethmap/#choroplethmap-zmin) to define the lower bound and upper bound of the color domain. If these attributes are not set, Plotly [determines the color domain](https://plotly.com/javascript/reference/heatmap/#heatmap-zauto) based on the input data.
+---
+
+var data = [{
+ type: "choroplethmap", name: "US states", geojson: "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/us-states.json", locations: [ "AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY" ],
+z: [ 141, 140, 155, 147, 132, 146, 151, 137, 146, 136, 145, 141, 149, 151, 138, 158, 164, 141, 146, 145, 142, 150, 155, 160, 156, 161, 147, 164, 150, 152, 155, 167, 145, 146, 151, 154, 161, 145, 155, 150, 151, 162, 172, 169, 170, 151, 152, 173, 160, 176 ],
+zmin: 25, zmax: 280, colorbar: {y: 0, yanchor: "bottom", title: {text: "US states", side: "right"}}}
+ ];
+
+var layout = {map: {style: "dark", center: {lon: -110, lat: 50}, zoom: 0.8}, width: 600, height: 400, margin: {t: 0, b: 0}};
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/maps/choropleth-mapbox/basic-choropleth1.html b/content/plotly_js/maps/choropleth-mapbox/basic-choropleth1.html
new file mode 100644
index 00000000000..4dd495c25f1
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-mapbox/basic-choropleth1.html
@@ -0,0 +1,21 @@
+---
+name: Basic Tile
+language: plotly_js
+suite: tile-county-choropleth
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ This tutorial uses [Maplibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) to make a map of US states using [vector tiles](https://plotly.com/javascript/map-layers/).
+---
+
+var data = [{
+ type: "choroplethmap", locations: ["NY", "MA", "VT"], z: [-50, -10, -20],
+ geojson: "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/us-states.json"
+}];
+
+var layout = {map: {center: {lon: -74, lat: 43}, zoom: 3.5},
+ width: 600, height:400};
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/maps/choropleth-mapbox/basic-mapbox.html b/content/plotly_js/maps/choropleth-mapbox/basic-mapbox.html
new file mode 100644
index 00000000000..0df34d16597
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-mapbox/basic-mapbox.html
@@ -0,0 +1,27 @@
+---
+name: Basic Tile using Mapbox
+language: plotly_js
+suite: tile-county-choropleth
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ > Mapbox traces are deprecated and may be removed in a future version of Plotly.js.
+
+ Earlier examples use traces that render with [Maplibre GL JS](https://maplibre.org/maplibre-gl-js/docs/).
+ These traces were introduced in Plotly.js 2.35.0 and replace Mapbox-based tile maps,
+ which are now deprecated. Here's one of the earlier examples using the Mapbox-based `choroplethmapbox` trace
+---
+
+var data = [{
+ type: "choroplethmapbox", locations: ["NY", "MA", "VT"], z: [-50, -10, -20],
+ geojson: "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/us-states.json"
+}];
+
+var layout = {mapbox: {center: {lon: -74, lat: 43}, zoom: 3.5},
+ width: 600, height:400};
+
+var config = {mapboxAccessToken: "your access token"};
+
+Plotly.newPlot('myDiv', data, layout, config);
\ No newline at end of file
diff --git a/content/plotly_js/maps/choropleth-mapbox/choropleth-geojson-object.html b/content/plotly_js/maps/choropleth-mapbox/choropleth-geojson-object.html
new file mode 100644
index 00000000000..b95fc9463a3
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-mapbox/choropleth-geojson-object.html
@@ -0,0 +1,26 @@
+---
+name: Streets Tile
+language: plotly_js
+suite: tile-county-choropleth
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ The following example sets `geojson object` of type `feature` and geometries of type 'Polygon'. For more information see [geojson attribute](https://plotly.com/javascript/reference/choroplethmap/#choroplethmap-geojson) in the reference page.
+ As you see, the scattermap trace is above the Choropleth map trace. To set the Choropleth map trace above all the other traces you should set [below attribute](https://plotly.com/javascript/reference/choroplethmap/#choroplethmap-below).
+---
+var data = [
+ {type: "scattermap", lon: [-86], lat: [34], marker: {size: 20, color: 'purple'}},
+ {
+ type: "choroplethmap",locations: ["AL"], z: [10], coloraxis: "coloraxis", geojson: {type: "Feature", id: "AL", geometry: {type: "Polygon", coordinates: [[
+ [-86, 35], [-85, 34], [-85, 32], [-85, 32], [-85, 32], [-85, 32], [-85, 31],
+ [-86, 31], [-87, 31], [-87, 31], [-88, 30], [-88, 30], [-88, 30], [-88, 30],
+ [-88, 34], [-88, 35]]]
+ }}}];
+
+var layout = {width: 600, height: 400, map: {style: 'streets',
+ center: {lon: -86, lat: 33}, zoom: 5}, marker: {line: {color: "blue"}},
+ coloraxis: {showscale: false, colorscale: "Viridis"}};
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/maps/choropleth-mapbox/choropleth_plotly_js_index.html b/content/plotly_js/maps/choropleth-mapbox/choropleth_plotly_js_index.html
new file mode 100644
index 00000000000..e759a0652c3
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-mapbox/choropleth_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to make a tile-based choropleth map in JavaScript. A Choropleth map shades geographic regions by value.
+display_as: maps
+language: plotly_js
+layout: base
+name: Choropleth Tile Map
+order: 4
+page_type: example_index
+permalink: javascript/tile-county-choropleth/
+redirect_from: javascript/mapbox-county-choropleth/
+thumbnail: thumbnail/mapbox-choropleth.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","tile-county-choropleth" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/maps/choropleth-maps/US-pop-by-state-choropleth.html b/content/plotly_js/maps/choropleth-maps/US-pop-by-state-choropleth.html
new file mode 100644
index 00000000000..dc4755bcf4b
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-maps/US-pop-by-state-choropleth.html
@@ -0,0 +1,38 @@
+---
+name: Choropleth Map of 2014 US Population by State
+language: plotly_js
+suite: choropleth-maps
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv', function(err, rows){
+ function unpack(rows, key) {
+return rows.map(function(row) { return row[key]; });
+}
+var data = [{
+ type: 'choropleth',
+ locationmode: 'USA-states',
+ locations: unpack(rows, 'Postal'),
+ z: unpack(rows, 'Population'),
+ text: unpack(rows, 'State'),
+ autocolorscale: true
+}];
+
+var layout = {
+title: {text: '2014 US Popultaion by State'},
+ geo:{
+ scope: 'usa',
+ countrycolor: 'rgb(255, 255, 255)',
+ showland: true,
+ landcolor: 'rgb(217, 217, 217)',
+ showlakes: true,
+ lakecolor: 'rgb(255, 255, 255)',
+ subunitcolor: 'rgb(255, 255, 255)',
+ lonaxis: {},
+ lataxis: {}
+ }
+};
+Plotly.newPlot("myDiv", data, layout, {showLink: false});
+});
diff --git a/content/plotly_js/maps/choropleth-maps/choropleth-north-america.html b/content/plotly_js/maps/choropleth-maps/choropleth-north-america.html
new file mode 100644
index 00000000000..c776d3660f4
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-maps/choropleth-north-america.html
@@ -0,0 +1,51 @@
+---
+name: USA Choropleth Map
+language: plotly_js
+suite: choropleth-maps
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+ var data = [{
+ type: 'choropleth',
+ locationmode: 'USA-states',
+ locations: unpack(rows, 'code'),
+ z: unpack(rows, 'total exports'),
+ text: unpack(rows, 'state'),
+ zmin: 0,
+ zmax: 17000,
+ colorscale: [
+ [0, 'rgb(242,240,247)'], [0.2, 'rgb(218,218,235)'],
+ [0.4, 'rgb(188,189,220)'], [0.6, 'rgb(158,154,200)'],
+ [0.8, 'rgb(117,107,177)'], [1, 'rgb(84,39,143)']
+ ],
+ colorbar: {
+ title: {text: 'Millions USD'},
+ thickness: 0.2
+ },
+ marker: {
+ line:{
+ color: 'rgb(255,255,255)',
+ width: 2
+ }
+ }
+ }];
+
+
+ var layout = {
+ title: {text: '2011 US Agriculture Exports by State'},
+ geo:{
+ scope: 'usa',
+ showlakes: true,
+ lakecolor: 'rgb(255,255,255)'
+ }
+ };
+
+ Plotly.newPlot("myDiv", data, layout, {showLink: false});
+});
diff --git a/content/plotly_js/maps/choropleth-maps/choropleth-world-robinson.html b/content/plotly_js/maps/choropleth-maps/choropleth-world-robinson.html
new file mode 100644
index 00000000000..1035bb8550a
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-maps/choropleth-world-robinson.html
@@ -0,0 +1,35 @@
+---
+name: World Choropleth Map (Robinson Projection)
+language: plotly_js
+suite: choropleth-maps
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2010_alcohol_consumption_by_country.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+ var data = [{
+ type: 'choropleth',
+ locationmode: 'country names',
+ locations: unpack(rows, 'location'),
+ z: unpack(rows, 'alcohol'),
+ text: unpack(rows, 'location'),
+ autocolorscale: true
+ }];
+
+ var layout = {
+ title: {text: 'Pure alcohol consumption among adults (age 15+) in 2010'},
+ geo: {
+ projection: {
+ type: 'robinson'
+ }
+ }
+ };
+
+ Plotly.newPlot("myDiv", data, layout, {showLink: false});
+
+});
diff --git a/content/plotly_js/maps/choropleth-maps/choropleth_plotly_js_index.html b/content/plotly_js/maps/choropleth-maps/choropleth_plotly_js_index.html
new file mode 100644
index 00000000000..60cce827f14
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-maps/choropleth_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to make a D3.js-based choropleth map in JavaScript. A choropleth
+ map shades geographic regions by value.
+display_as: maps
+language: plotly_js
+layout: base
+name: Choropleth Maps
+order: 9
+permalink: javascript/choropleth-maps/
+redirect_from: javascript-graphing-library/choropleth-maps/
+thumbnail: thumbnail/choropleth.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","choropleth-maps" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/maps/choropleth-maps/countrygdp-choropleth-map.html b/content/plotly_js/maps/choropleth-maps/countrygdp-choropleth-map.html
new file mode 100644
index 00000000000..a27603f18b8
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-maps/countrygdp-choropleth-map.html
@@ -0,0 +1,53 @@
+---
+name: Country GDP Choropleth Map
+language: plotly_js
+suite: choropleth-maps
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2014_world_gdp_with_codes.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+ var data = [{
+ type: 'choropleth',
+ locations: unpack(rows, 'CODE'),
+ z: unpack(rows, 'GDP (BILLIONS)'),
+ text: unpack(rows, 'COUNTRY'),
+ colorscale: [
+ [0,'rgb(5, 10, 172)'],[0.35,'rgb(40, 60, 190)'],
+ [0.5,'rgb(70, 100, 245)'], [0.6,'rgb(90, 120, 245)'],
+ [0.7,'rgb(106, 137, 247)'],[1,'rgb(220, 220, 220)']],
+ autocolorscale: false,
+ reversescale: true,
+ marker: {
+ line: {
+ color: 'rgb(180,180,180)',
+ width: 0.5
+ }
+ },
+ tick0: 0,
+ zmin: 0,
+ dtick: 1000,
+ colorbar: {
+ autotic: false,
+ tickprefix: '$',
+ title: {text: 'GDP Billions US$'}
+ }
+ }];
+
+ var layout = {
+ title: {text: '2014 Global GDP Source: CIA World Factbook'},
+ geo:{
+ showframe: false,
+ showcoastlines: false,
+ projection:{
+ type: 'mercator'
+ }
+ }
+ };
+ Plotly.newPlot("myDiv", data, layout, {showLink: false});
+});
diff --git a/content/plotly_js/maps/choropleth-maps/florida-counties.html b/content/plotly_js/maps/choropleth-maps/florida-counties.html
new file mode 100644
index 00000000000..9ea84a72715
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-maps/florida-counties.html
@@ -0,0 +1,49 @@
+---
+name: Choropleth Map of Florida Counties Colored by Political Party
+language: plotly_js
+suite: choropleth-maps
+order: 6
+sitemap: false
+arrangement: horizontal
+---
+
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/florida-red-data.json', function(redjson) {
+
+ d3.json('https://raw.githubusercontent.com/plotly/datasets/master/florida-blue-data.json', function(bluejson) {
+
+ Plotly.newPlot('myDiv', [{
+ type: 'scattermap',
+ lat: [46],
+ lon: [-74]
+ }], {
+ title: {text: "Florida Counties"},
+ height: 600,
+ width: 600,
+ map: {
+ center: {
+ lat: 28,
+ lon: -84
+ },
+ style: 'light',
+ zoom: 4.8,
+ layers: [
+ {
+ sourcetype: 'geojson',
+ source: redjson,
+ type: 'fill',
+ color: 'rgba(163,22,19,0.8)'
+ },
+ {
+ sourcetype: 'geojson',
+ source: bluejson,
+ type: 'fill',
+ color: 'rgba(40,0,113,0.8)'
+ },
+ ]
+ }
+ });
+
+
+});
+
+});
diff --git a/content/plotly_js/maps/density-mapbox/basic_density_mapbox.html b/content/plotly_js/maps/density-mapbox/basic_density_mapbox.html
new file mode 100644
index 00000000000..6c168a37133
--- /dev/null
+++ b/content/plotly_js/maps/density-mapbox/basic_density_mapbox.html
@@ -0,0 +1,17 @@
+---
+name: Stamen Terrain Tile
+language: plotly_js
+suite: tile-density-heatmaps
+order: 5
+sitemap: false
+layout: base
+arrangement: horizontal
+markdown_content: |
+
+
+---
+var data = [{type: 'densitymapbox', lon: [10, 20, 30], lat: [15, 25, 35], z: [1, 3, 2]}];
+
+var layout = {width: 600, height: 400, mapbox: {style: 'https://tiles.stadiamaps.com/styles/stamen_watercolor.json?api_key=YOUR-API-KEY'}};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/maps/density-mapbox/density_plotly_js_index.html b/content/plotly_js/maps/density-mapbox/density_plotly_js_index.html
new file mode 100644
index 00000000000..7bc025f8819
--- /dev/null
+++ b/content/plotly_js/maps/density-mapbox/density_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to make a tile-based density heatmap in JavaScript. A density heatmap
+ uses a variable binding expression to display population density.
+display_as: maps
+language: plotly_js
+layout: base
+name: Tile Density Heatmap
+order: 3
+page_type: example_index
+permalink: javascript/tile-density-heatmaps/
+redirect_from: javascript/mapbox-density-heatmaps/
+thumbnail: thumbnail/mapbox-density.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","tile-density-heatmaps" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/maps/density-mapbox/earthquack_density.html b/content/plotly_js/maps/density-mapbox/earthquack_density.html
new file mode 100644
index 00000000000..f5aae9ac2b0
--- /dev/null
+++ b/content/plotly_js/maps/density-mapbox/earthquack_density.html
@@ -0,0 +1,26 @@
+---
+name: Outdoors Tile
+language: plotly_js
+layout: base
+suite: tile-density-heatmaps
+order: 3
+sitemap: false
+arrangement: horizontal
+
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/earthquakes-23k.csv',
+ function(err, rows){function unpack(rows, key) {return rows.map(function(row){ return row[key];
+})};
+
+var data = [{
+ lon: unpack(rows, 'Longitude'), lat: unpack(rows, 'Latitude'), radius:10,
+ z: unpack(rows, 'Magnitude'), type: "densitymap", coloraxis: 'coloraxis',
+ hoverinfo: 'skip'}];
+
+var layout = {
+ map: {center: {lon: 60, lat: 30}, style: "outdoors", zoom: 2},
+ coloraxis: {colorscale: "Viridis"}, title: {text: "Earthquake Magnitude"},
+ width: 600, height: 400, margin: {t: 30, b: 0}};
+
+Plotly.newPlot('myDiv', data, layout);
+})
diff --git a/content/plotly_js/maps/density-mapbox/light-tile-mapbox.html b/content/plotly_js/maps/density-mapbox/light-tile-mapbox.html
new file mode 100644
index 00000000000..ed0cd357636
--- /dev/null
+++ b/content/plotly_js/maps/density-mapbox/light-tile-mapbox.html
@@ -0,0 +1,27 @@
+---
+name: Light Tile (Mapbox) - Requires Token
+language: plotly_js
+layout: base
+suite: tile-density-heatmaps
+order: 7
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ **Mapbox traces are deprecated and may be removed in a future version of Plotly.js.**
+
+ Earlier examples use traces that render with [Maplibre GL JS](https://maplibre.org/maplibre-gl-js/docs/).
+ These traces were introduced in Plotly.js 2.35.0 and replace Mapbox-based tile maps,
+ which are now deprecated. Here's one of the earlier examples written using the Mapbox-based `densitymapbox` trace.
+---
+var data = [
+ {type: "densitymapbox", lon: [10, 20, 30], lat: [15, 25, 35], z: [1, 3, 2],
+ radius: 50, colorbar: {y: 1, yanchor: 'top', len: 0.45}},
+ {type: 'densitymapbox', lon: [-10, -20, -30], lat: [15, 25, 35],
+ radius: [50, 100, 10], colorbar: {y: 0, yanchor: 'bottom', len: 0.45}
+ }];
+
+var layout = {mapbox: {style: 'light', center: {lat: 20}}, width: 600, height: 400};
+
+var config = {mapboxAccessToken: "your access token"};
+
+Plotly.newPlot('myDiv', data, layout, config);
diff --git a/content/plotly_js/maps/density-mapbox/multi_density-mapbox.html b/content/plotly_js/maps/density-mapbox/multi_density-mapbox.html
new file mode 100644
index 00000000000..31023bc4249
--- /dev/null
+++ b/content/plotly_js/maps/density-mapbox/multi_density-mapbox.html
@@ -0,0 +1,20 @@
+---
+name: Light Tile
+language: plotly_js
+layout: base
+suite: tile-density-heatmaps
+order: 2
+sitemap: false
+arrangement: horizontal
+
+---
+var data = [
+ {type: "densitymap", lon: [10, 20, 30], lat: [15, 25, 35], z: [1, 3, 2],
+ radius: 50, colorbar: {y: 1, yanchor: 'top', len: 0.45}},
+ {type: 'densitymap', lon: [-10, -20, -30], lat: [15, 25, 35],
+ radius: [50, 100, 10], colorbar: {y: 0, yanchor: 'bottom', len: 0.45}
+ }];
+
+var layout = {map: {style: 'light', center: {lat: 20}}, width: 600, height: 400};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/maps/fill-area-on-mapbox/access-token.html b/content/plotly_js/maps/fill-area-on-mapbox/access-token.html
new file mode 100644
index 00000000000..dd3da713df2
--- /dev/null
+++ b/content/plotly_js/maps/fill-area-on-mapbox/access-token.html
@@ -0,0 +1,39 @@
+---
+name: Overview
+language: plotly_js
+suite: filled-area-on-map
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ There are three different ways to show a filled area in a tile-based map.
+
+
Use a [scattermap](https://plotly.com/javascript/reference/scattermap/) trace and set `fill` attribute to 'toself'
+
Use a map layout (i.e. by minimally using an empty Scattermap trace) and add a GeoJSON layer
+
Use the [Choroplethmap](https://plotly.com/javascript/map-county-choropleth/) trace type
+
+
Filled `Scattermap` Trace
+ The following example uses `Scattermap` and sets `fill = 'toself'`.
+---
+var data = [
+ {
+ type: "scattermap",
+ fill: "toself",
+ lon: [-74, -70, -70, -74],
+ lat: [47, 47, 45, 45],
+ marker: { size: 10, color: "orange" }
+ }
+];
+
+var layout = {
+ map: {
+ style: "stamen-terrain",
+ center: { lon: -73, lat: 46 },
+ zoom: 5
+ },
+ showlegend: false,
+ height: 450,
+ width: 600
+};
+
+Plotly.newPlot("myDiv", data, layout);
diff --git a/content/plotly_js/maps/fill-area-on-mapbox/fill-area_plotly_js_index.html b/content/plotly_js/maps/fill-area-on-mapbox/fill-area_plotly_js_index.html
new file mode 100644
index 00000000000..2f563f4bf50
--- /dev/null
+++ b/content/plotly_js/maps/fill-area-on-mapbox/fill-area_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to make an area on Map using a D3.js-based scattermap.
+display_as: maps
+has_thumbnail: true
+language: plotly_js
+layout: base
+name: Filled Area on Tile Maps
+order: 10
+page_type: u-guide
+permalink: javascript/filled-area-on-map/
+redirect_from: javascript/filled-area-on-mapbox/
+thumbnail: thumbnail/area.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","filled-area-on-map" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/maps/fill-area-on-mapbox/geojson_layers.html b/content/plotly_js/maps/fill-area-on-mapbox/geojson_layers.html
new file mode 100644
index 00000000000..c29ed77db76
--- /dev/null
+++ b/content/plotly_js/maps/fill-area-on-mapbox/geojson_layers.html
@@ -0,0 +1,57 @@
+---
+name: GeoJSON Layers
+language: plotly_js
+suite: filled-area-on-map
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ This example shows an area below [water layer](https://plotly.com/javascript/reference/choroplethmap/#choroplethmap-below), and sets geojson object of type feature and geometries of type [MultiPolygon](https://plotly.com/javascript/reference/choroplethmap/#choroplethmap-geojson).
+---
+var data = [{
+ type: "scattermap", mode: "markers",
+ lon: [-73.605], lat: [45.51],
+ marker: { size: 20, color: ["cyan"] }
+ }];
+
+var layout = {
+ map: {
+ style: "dark",
+ center: { lon: -73.6, lat: 45.515},
+ zoom: 12, layers: [{
+ source: {
+ type: "FeatureCollection",
+ features: [{
+ type: "Feature",
+ geometry: {
+ type: "MultiPolygon",
+ coordinates: [[[
+ [-73.606352888, 45.507489991], [-73.606133883, 45.50687600],
+ [-73.605905904, 45.506773980], [-73.603533905, 45.505698946],
+ [-73.602475870, 45.506856969], [-73.600031904, 45.505696003],
+ [-73.599379992, 45.505389066], [-73.599119902, 45.505632008],
+ [-73.598896977, 45.505514039], [-73.598783894, 45.505617001],
+ [-73.591308727, 45.516246185], [-73.591380782, 45.516280145],
+ [-73.596778656, 45.518690062], [-73.602796770, 45.521348046],
+ [-73.612239983, 45.525564037], [-73.612422919, 45.525642061],
+ [-73.617229085, 45.527751983], [-73.617279234, 45.527774160],
+ [-73.617304713, 45.527741334], [-73.617492052, 45.527498362],
+ [-73.617533258, 45.527512253], [-73.618074188, 45.526759105],
+ [-73.618271651, 45.526500673], [-73.618446320, 45.526287943],
+ [-73.618968507, 45.525698560], [-73.619388002, 45.525216750],
+ [-73.619532966, 45.525064183], [-73.619686662, 45.524889290],
+ [-73.619787038, 45.524770086], [-73.619925742, 45.524584939],
+ [-73.619954486, 45.524557690], [-73.620122362, 45.524377961],
+ [-73.620201713, 45.524298907], [-73.620775593, 45.523650879]
+ ]]]
+ }
+ }]
+ },
+ type: "fill", below: "water", color: "teal"
+ }]
+ },
+ height: 450, width: 700
+};
+
+Plotly.newPlot("myDiv", data, layout);
diff --git a/content/plotly_js/maps/fill-area-on-mapbox/multi-filled-area.html b/content/plotly_js/maps/fill-area-on-mapbox/multi-filled-area.html
new file mode 100644
index 00000000000..600fa264ee2
--- /dev/null
+++ b/content/plotly_js/maps/fill-area-on-mapbox/multi-filled-area.html
@@ -0,0 +1,25 @@
+---
+name: Multiple Filled Areas with a Scattermap trace
+language: plotly_js
+suite: filled-area-on-map
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ The following example shows how to use `null` in your data to draw multiple filled areas. Such gaps in trace data are unconnected by default, but this can be controlled via the [connectgaps](https://plotly.com/javascript/reference/scattermap/#scattermap-connectgaps) attribute.
+---
+var data = [{
+ type: "scattermap",
+ mode: "lines",
+ fill: "toself",
+ lon: [-10, -10, 8, 8, -10, null, 30, 30, 50, 50, 30, null, 100, 100, 80, 80, 100],
+ lat: [30, 6, 6, 30, 30, null, 20, 30, 30, 20, 20, null, 40, 50, 50, 40, 40]
+ }]
+
+var layout = {
+ map: {style: "stamen-terrain", center: {lon: 40, lat: 20}, 'zoom': 1.5},
+ showlegend: false,
+ width:700, height: 700}
+
+Plotly.newPlot("myDiv", data, layout)
diff --git a/content/plotly_js/maps/lines-on-maps/flightpath-london-to-nyc.html b/content/plotly_js/maps/lines-on-maps/flightpath-london-to-nyc.html
new file mode 100644
index 00000000000..7c831309570
--- /dev/null
+++ b/content/plotly_js/maps/lines-on-maps/flightpath-london-to-nyc.html
@@ -0,0 +1,50 @@
+---
+name: London to NYC Great Circle
+language: plotly_js
+suite: lines-on-maps
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+var data = [{
+ type: 'scattergeo',
+ lat: [ 40.7127, 51.5072 ],
+ lon: [ -74.0059, 0.1275 ],
+ mode: 'lines',
+ line:{
+ width: 2,
+ color: 'blue'
+ }
+ }];
+
+var layout = {
+ title: {text: 'London to NYC Great Circle'},
+ showlegend: false,
+ geo: {
+ resolution: 50,
+ showland: true,
+ showlakes: true,
+ landcolor: 'rgb(204, 204, 204)',
+ countrycolor: 'rgb(204, 204, 204)',
+ lakecolor: 'rgb(255, 255, 255)',
+ projection: {
+ type: 'equirectangular'
+ },
+ coastlinewidth: 2,
+ lataxis: {
+ range: [ 20, 60 ],
+ showgrid: true,
+ tickmode: 'linear',
+ dtick: 10
+ },
+ lonaxis:{
+ range: [-100, 20],
+ showgrid: true,
+ tickmode: 'linear',
+ dtick: 20
+ }
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+
diff --git a/content/plotly_js/maps/lines-on-maps/lines-on-orthographic.html b/content/plotly_js/maps/lines-on-maps/lines-on-orthographic.html
new file mode 100644
index 00000000000..53767f2a271
--- /dev/null
+++ b/content/plotly_js/maps/lines-on-maps/lines-on-orthographic.html
@@ -0,0 +1,72 @@
+---
+name: Lines on an Orthographic Map
+language: plotly_js
+suite: lines-on-maps
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/globe_contours.csv', function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+ var data = [];
+ var scl =['rgb(213,62,79)','rgb(244,109,67)','rgb(253,174,97)','rgb(254,224,139)','rgb(255,255,191)','rgb(230,245,152)','rgb(171,221,164)','rgb(102,194,165)','rgb(50,136,189)'];
+ var allLats = [];
+ var allLons = [];
+
+ for ( var i = 0 ; i < scl.length; i++){
+ var latHead = 'lat-'+i;
+ var lonHead = 'lon-'+i;
+ var lat = unpack(rows, latHead);
+ var lon = unpack(rows, lonHead);
+ allLats.push(lat);
+ allLons.push(lon);
+ }
+
+ for ( var i = 0 ; i < scl.length; i++) {
+ var current = {
+ type:'scattergeo',
+ lon: allLons[i],
+ lat: allLats[i],
+ mode: 'lines',
+ line: {
+ width: 2,
+ color: scl[i]
+ }
+ }
+ data.push(current);
+ };
+
+
+ var layout = {
+ geo: {
+ projection: {
+ type: 'orthographic',
+ rotation: {
+ lon: -100,
+ lat: 40
+ },
+ },
+ showocean: true,
+ oceancolor: 'rgb(0, 255, 255)',
+ showland: true,
+ landcolor: 'rgb(230, 145, 56)',
+ showlakes: true,
+ lakecolor: 'rgb(0, 255, 255)',
+ showcountries: true,
+ lonaxis: {
+ showgrid: true,
+ gridcolor: 'rgb(102, 102, 102)'
+ },
+ lataxis: {
+ showgrid: true,
+ gridcolor: 'rgb(102, 102, 102)'
+ }
+ }
+ };
+
+ Plotly.newPlot("myDiv", data, layout, {showLink: false});
+});
diff --git a/content/plotly_js/maps/lines-on-maps/lines_on_maps_plotly_js_index.html b/content/plotly_js/maps/lines-on-maps/lines_on_maps_plotly_js_index.html
new file mode 100644
index 00000000000..b22ea5adaa4
--- /dev/null
+++ b/content/plotly_js/maps/lines-on-maps/lines_on_maps_plotly_js_index.html
@@ -0,0 +1,17 @@
+---
+description: How to draw D3.js-based lines, great circles, and contours on maps in
+ JavaScript. Lines on maps can show distance between geographic points or be contour
+ lines (isolines, isopleths, or isarithms).
+display_as: maps
+language: plotly_js
+layout: base
+name: Lines on Maps
+order: 5
+page_type: example_index
+permalink: javascript/lines-on-maps/
+redirect_from: javascript-graphing-library/lines-on-maps/
+thumbnail: thumbnail/flight-paths.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","lines-on-maps" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/maps/lines-on-maps/us-flight-paths-map.html b/content/plotly_js/maps/lines-on-maps/us-flight-paths-map.html
new file mode 100644
index 00000000000..153c32d5cd2
--- /dev/null
+++ b/content/plotly_js/maps/lines-on-maps/us-flight-paths-map.html
@@ -0,0 +1,59 @@
+---
+name: US Flight Paths Map
+language: plotly_js
+suite: lines-on-maps
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/c34aaa0b1b3cddad335173cb7bc0181897201ee6/2011_february_aa_flight_paths.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });}
+
+ function getMaxOfArray(numArray) {
+ return Math.max.apply(null, numArray);
+ }
+
+ var data = [];
+ var count = unpack(rows, 'cnt');
+ var startLongitude = unpack(rows, 'start_lon');
+ var endLongitude = unpack(rows, 'end_lon');
+ var startLat = unpack(rows, 'start_lat');
+ var endLat = unpack(rows, 'end_lat');
+
+ for ( var i = 0 ; i < count.length; i++ ) {
+ var opacityValue = count[i]/getMaxOfArray(count);
+
+ var result = {
+ type: 'scattergeo',
+ locationmode: 'USA-states',
+ lon: [ startLongitude[i] , endLongitude[i] ],
+ lat: [ startLat[i] , endLat[i] ],
+ mode: 'lines',
+ line: {
+ width: 1,
+ color: 'red'
+ },
+ opacity: opacityValue
+ };
+
+ data.push(result);
+ };
+
+ var layout = {
+ title: {text: 'Feb. 2011 American Airline flight paths'},
+ showlegend: false,
+ geo:{
+ scope: 'north america',
+ projection: {
+ type: 'azimuthal equal area'
+ },
+ showland: true,
+ landcolor: 'rgb(243,243,243)',
+ countrycolor: 'rgb(204,204,204)'
+ }
+ };
+
+ Plotly.newPlot("myDiv", data, layout, {showLink: false});
+
+});
diff --git a/content/plotly_js/maps/mapbox-layers/Open-street-map.html b/content/plotly_js/maps/mapbox-layers/Open-street-map.html
new file mode 100644
index 00000000000..30569ab159e
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/Open-street-map.html
@@ -0,0 +1,39 @@
+---
+name: OpenStreetMap tiles
+language: plotly_js
+suite: map-layers
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ Here is a simple map rendered with "open-street-map" tiles.
+---
+d3.csv(
+ "https://raw.githubusercontent.com/plotly/datasets/master/2015_06_30_precipitation.csv",
+ function(err, rows) {
+ function unpack(rows, key) {
+ return rows.map(function(row) {
+ return row[key];
+ });
+ }
+
+ var data = [
+ {
+ type: "scattermap",
+ text: unpack(rows, "Globvalue"),
+ lon: unpack(rows, "Lon"),
+ lat: unpack(rows, "Lat"),
+ marker: { color: "fuchsia", size: 4 }
+ }
+ ];
+
+ var layout = {
+ dragmode: "zoom",
+ map: { style: "open-street-map", center: { lat: 38, lon: -90 }, zoom: 3 },
+ margin: { r: 0, t: 0, b: 0, l: 0 }
+ };
+
+ Plotly.newPlot("myDiv", data, layout);
+ }
+);
diff --git a/content/plotly_js/maps/mapbox-layers/access-token.html b/content/plotly_js/maps/mapbox-layers/access-token.html
new file mode 100644
index 00000000000..aa232bf04fe
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/access-token.html
@@ -0,0 +1,29 @@
+---
+name: Mapbox Maps and Access Tokens
+language: plotly_js
+suite: map-layers
+order: 10
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ > Mapbox traces are deprecated and may be removed in a future version of Plotly.js.
+
+ The word "mapbox" in the trace names and `layout.mapbox` refers to the Mapbox GL JS open-source library.
+ If your basemap in `layout.mapbox.style` uses data from the Mapbox *service*,
+ then you will need to register for a free account at https://mapbox.com/ and obtain a Mapbox Access token.
+ If your basemap uses data from the [Stadia Maps service](https://www.stadiamaps.com) (see below for details), you'll need to register for a Stadia Maps account and token.
+
+ To use a token, provide it as `mapboxAccessToken` in the `setPlotConfig` function, or as a variable that would be passed as an argument of `newPlot`.
+ If your `layout.mapbox.style` does not use data from the Mapbox service, you do *not* need to register for a Mapbox account.
+
Base Maps in `layout.mapbox.style`
+ The accepted values for `layout.mapbox.style` are one of the following tiles.
+
+
`"white-bg"` yields an empty white canvas which results in no external HTTP requests
+
`"open-street-map"`, `"carto-positron"`, or `"carto-darkmatter"` yield maps composed of *raster* tiles from various public tile servers which do not require signups or access tokens
+
`"stamen-terrain"`, `"stamen-toner"` or `"stamen-watercolor"` yield maps composed of *raster* tiles from the [Stadia Maps service](https://stadiamaps.com/) and require a Stadia Maps account and token.
+
`"basic"`, `"streets"`, `"outdoors"`, `"light"`, `"dark"`, `"satellite"`, or `"satellite-streets"` yield maps composed of *vector* tiles from the Mapbox service, and *do* require a Mapbox Access Token or an on-premise Mapbox installation.
+
A Mapbox service style URL, which requires a Mapbox Access Token or an on-premise Mapbox installation.
+
A Mapbox Style object as defined at https://docs.mapbox.com/mapbox-gl-js/style-spec/
+
+---
diff --git a/content/plotly_js/maps/mapbox-layers/dark-tile.html b/content/plotly_js/maps/mapbox-layers/dark-tile.html
new file mode 100644
index 00000000000..8c9fc5d2505
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/dark-tile.html
@@ -0,0 +1,26 @@
+---
+name: Dark tiles
+language: plotly_js
+suite: map-layers
+order: 7
+sitemap: false
+arrangement: horizontal
+---
+var url = "https://maplibre.org/maplibre-gl-js/docs/assets/significant-earthquakes-2015.geojson";
+
+d3.json(url, (err, raw) => {
+ var lon = raw.features.map(f => f.geometry.coordinates[0]);
+ var lat = raw.features.map(f => f.geometry.coordinates[1]);
+ var z = raw.features.map(f => f.properties.mag);
+
+ var data = [
+ { type: "scattermap", lon: lon, lat: lat, z: z, hoverinfo: "y" }
+ ];
+
+ var layout = {
+ map: { style: "dark", zoom: 2, center: { lon: -150, lat: 60 } },
+ margin: { t: 0, b: 0 }
+ };
+
+ Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/maps/mapbox-layers/environment_canada.html b/content/plotly_js/maps/mapbox-layers/environment_canada.html
new file mode 100644
index 00000000000..9d2086ec376
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/environment_canada.html
@@ -0,0 +1,44 @@
+---
+name: Base Tiles from the USGS, radar overlay from Environment Canada
+language: plotly_js
+suite: map-layers
+order: 6
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ Here is the same example, with in addition, a WMS layer from Environment Canada which displays near-real-time radar imagery in partly-transparent raster tiles, rendered above the go.Scattermap trace, as is the default.
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2015_06_30_precipitation.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+var data = [{
+ type: 'scattermap', text: unpack(rows, 'Globvalue'),
+ lon: unpack(rows, 'Lon'), lat: unpack(rows, 'Lat'),
+ marker: {color: 'fuchsia', size: 4}
+ }];
+
+var layout = {
+ dragmode: 'zoom',
+ map: {
+ style: 'white-bg',
+ layers: [
+ {
+ "below": 'traces',
+ "sourcetype": "raster",
+ "source": [
+ "https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}"
+ ]
+ },
+ {
+ sourcetype: "raster",
+ source: ["https://geo.weather.gc.ca/geomet/?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&BBOX={bbox-epsg-3857}&CRS=EPSG:3857&WIDTH=1000&HEIGHT=1000&LAYERS=RADAR_1KM_RDBR&TILED=true&FORMAT=image/png"]}],
+ below: 'traces',
+ center: {lat: 38, lon: -90}, zoom: 4},
+ margin: {r: 0, t: 0, b: 0, l: 0},
+ showlegend: false};
+
+Plotly.newPlot('myDiv', data, layout);
+ });
diff --git a/content/plotly_js/maps/mapbox-layers/how-layers-work.html b/content/plotly_js/maps/mapbox-layers/how-layers-work.html
new file mode 100644
index 00000000000..4c533908be2
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/how-layers-work.html
@@ -0,0 +1,17 @@
+---
+name: How Layers work in Tile-based Maps
+language: plotly_js
+suite: map-layers
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ If your figure contains one or more traces of type `Scattermap`, `Choroplethmap` or `Densitymap`, the `layout` object in your figure contains configuration information for the map itself. The map is composed of various layers, of three different types.
+
+
`layout.map.style` defines the lowest layers, also known as your "base map"
+
The various traces in `data` are by default rendered above the base map (although this can be controlled via the `below` attribute).
+
`layout.map.layers` is an array that defines more layers that are by default rendered above the traces in `data` (although this can also be controlled via the `below` attribute).
+
+
+---
diff --git a/content/plotly_js/maps/mapbox-layers/mapbox-layers_plotly_js_index.html b/content/plotly_js/maps/mapbox-layers/mapbox-layers_plotly_js_index.html
new file mode 100644
index 00000000000..3e36160d217
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/mapbox-layers_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to make a tile-based maps in JavaScript with various base layers.
+display_as: maps
+language: plotly_js
+layout: base
+name: Tile Map Layers
+order: 2
+page_type: example_index
+permalink: javascript/tile-map-layers/
+redirect_from: javascript/mapbox-layers/
+thumbnail: thumbnail/mapbox-layers.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","map-layers" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/maps/mapbox-layers/specify-a-base-map.html b/content/plotly_js/maps/mapbox-layers/specify-a-base-map.html
new file mode 100644
index 00000000000..229dfabcc58
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/specify-a-base-map.html
@@ -0,0 +1,12 @@
+---
+name: Using "layout.map.layers" to Specify a Base Map
+language: plotly_js
+suite: map-layers
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ If you have access to your own private tile servers, or wish to use a tile server not included in the list above, the recommended approach is to set layout.map.style to "white-bg" and to use layout.map.layers with below to specify a custom base map.
+ If you omit the below attribute when using this approach, your data will likely be hidden by fully-opaque raster tiles!
+---
diff --git a/content/plotly_js/maps/mapbox-layers/white-bg.html b/content/plotly_js/maps/mapbox-layers/white-bg.html
new file mode 100644
index 00000000000..425781cf1a8
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/white-bg.html
@@ -0,0 +1,50 @@
+---
+name: Base Tiles from the USGS
+language: plotly_js
+suite: map-layers
+order: 5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ Here is an example of a map which uses a public USGS imagery map, specified in layout.map.layers, and which is rendered below the data layer.
+---
+d3.csv(
+ "https://raw.githubusercontent.com/plotly/datasets/master/2015_06_30_precipitation.csv",
+ function(err, rows) {
+ function unpack(rows, key) {
+ return rows.map(function(row) {
+ return row[key];
+ });
+ }
+
+var data = [
+ {
+ type: "scattermap",
+ text: unpack(rows, "Globvalue"),
+ lon: unpack(rows, "Lon"),
+ lat: unpack(rows, "Lat"),
+ marker: { color: "fuchsia", size: 4 }
+ }
+];
+
+var layout = {
+ dragmode: "zoom",
+ map: {
+ style: "white-bg",
+ layers: [
+ {
+ sourcetype: "raster",
+ source: ["https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}"],
+ below: "traces"
+ }
+ ],
+ center: { lat: 38, lon: -90 },
+ zoom: 3
+ },
+ margin: { r: 0, t: 0, b: 0, l: 0 }
+};
+
+Plotly.newPlot("myDiv", data, layout);
+ }
+);
diff --git a/content/plotly_js/maps/maplibre-migration/migrate-to-maplibre_plotly_js_index.html b/content/plotly_js/maps/maplibre-migration/migrate-to-maplibre_plotly_js_index.html
new file mode 100644
index 00000000000..8105293a31d
--- /dev/null
+++ b/content/plotly_js/maps/maplibre-migration/migrate-to-maplibre_plotly_js_index.html
@@ -0,0 +1,56 @@
+---
+description: How to migrate from Mapbox traces to Maplibre traces.
+display_as: maps
+language: plotly_js
+layout: base
+name: Migrate to Maplibre
+order: 1
+page_type: example_index
+permalink: javascript/maplibre-migration/
+thumbnail: thumbnail/area.jpg
+---
+
+
With the release of Plotly.js v2.35.0, we are introducing a new set of trace types for maps with tile underlays:
+
+
+
Choroplethmap
+
Scattermap
+
Densitymap
+
+
+
These traces replace the existing Mapbox traces, Choroplethmapbox, Scattermapbox,
+ Densitymapbox, but use MapLibre as the map renderer rather than
+ Mapbox.
+
+
+
When switching to the new traces, keep an eye out for improved rendering performance, WebGL2 support, and over time,
+ improved features in the Plotly map traces inherited from the MapLibre renderer, including projection support, globe
+ views, terrain support, and support for modern mapping standards.
+
+
You can learn more about the motivations for this change in our announcement
+ post.
+
+
As a result of removing Mapbox as the rendering engine, we're also removing the Mapbox branding from these trace
+ names.
+ This means that migrating from Mapbox traces to MapLibre traces will require some code changes in your projects.
+
+
+
Change trace names from *mapbox to *map. For any existing trace name ending in
+ *mapbox,
+ ensure you've removed the "box" suffix.
+
+
If in use, update layout.mapbox argument in your layout configuration to layout.map.
+ The nested properties are identical in the new map traces, so no other changes should be required.
+
If in use, update mapbox_style to map_style.
+
Verify your map_style settings. With mapbox traces, we bundle basic,
+ streets,
+ outdoors, light, dark, satellite, and
+ satellite-streets styles,
+ using Mapbox styling. These style names are still available, but they now reference slightly different styles
+ provided by other tools.
+
+
+
+
Note that Mapbox API keys are no longer required for Plotly-provided styles, but using external styles in your Plotly
+ maps remains supported with the existing API.
\ No newline at end of file
diff --git a/content/plotly_js/maps/plotly_js-map-index.html b/content/plotly_js/maps/plotly_js-map-index.html
new file mode 100644
index 00000000000..377ee3ea7aa
--- /dev/null
+++ b/content/plotly_js/maps/plotly_js-map-index.html
@@ -0,0 +1,27 @@
+---
+permalink: javascript/maps/
+description: Plotly.js makes interactive, publication-quality graphs online. Examples of how to make maps.
+name: Maps
+layout: langindex
+language: plotly_js
+display_as: maps
+thumbnail: thumbnail/mixed.jpg
+---
+
+
+
+
+ plotly.js charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes.
+
d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows){
+ var trace = {
+ type: 'scatter', // set the chart type
+ mode: 'lines', // connect points with lines
+ x: rows.map(function(row){ // set the x-data
+ return row['Time'];
+ }),
+ y: rows.map(function(row){ // set the x-data
+ return row['10 Min Sampled Avg'];
+ }),
+ line: { // set the width of the line.
+ width: 1
+ },
+ error_y: {
+ array: rows.map(function(row){ // set the height of the error bars
+ return row['10 Min Std Dev'];
+ }),
+ thickness: 0.5, // set the thickness of the error bars
+ width: 0
+ }
+ };
+
+ var layout = {
+ yaxis: {
+ title: {
+ text: "Wind Speed"
+ }
+ }, // set the y axis title
+ xaxis: {
+ showgrid: false, // remove the x-axis grid lines
+ tickformat: "%B, %Y" // customize the date format to "month, day"
+ },
+ margin: { // update the left, bottom, right, top margin
+ l: 40, b: 10, r: 10, t: 20
+ }
+ };
+
+ Plotly.newPlot(document.getElementById('wind-speed'), [trace], layout, {showLink: false});
+ });
+
+
+
+
High performance
+
+
+ Most plotly graphs are drawn with SVG. This offers great compatibility across browsers and publication-quality vector image export. Unfortunately, there are inherent performance limitations with the number of SVG elements that you can draw in the DOM.
+ plotly.js uses stack.gl for high performance 2D and 3D charting.
+
+
+
+
+
+
+ This chart was drawn with the plotly.js chart type scattergl. scattergl charts render an order of magnitude faster than their SVG counterparts.
+
The functions documented here all create or modify a plot that is drawn into a <div> element on the page, commonly referred to as graphDiv or plotDiv. The first argument to each function on this page is a reference to this element, and it can be either a DOM node, i.e. the output of document.getElementById(), or a string, in which case it will be treated as the id of the div. A note on sizing: You can either supply height and width in the layout object (see below), or give the <div> a height and width in CSS.
+
+
data
+
The data to be plotted is described in an array usually called data, whose elements are trace objects of various types (e.g. scatter, bar etc) as documented in the Full Reference.
+
+
layout
+
The layout of the plot – non-data-related visual attributes such as the title, annotations etc – is described in an object usually called layout, as documented in/ the Full Reference.
+
+
config
+
High-level configuration options for the plot, such as the scroll/zoom/hover behaviour, is described in an object usually called config, as documented here. The difference between config and layout is that layout relates to the content of the plot, whereas config relates to the context in which the plot is being shown.
+
+
frames
+
Animation frames are described in an object usually called frames as per the example here.
+ They can contain data and layout objects, which define any changes to be animated, and a traces
+ object that defines which traces to animate. Additionally, frames containing name and/or group
+ attributes can be referenced by Plotly.animate
+ after they are added by Plotly.addFrames
+
+
+Draws a new plot in an <div> element, overwriting any existing plot. To update an existing plot in a <div>, it is much more efficient to use Plotly.react than to overwrite it.
+
+
+
+
+
+After plotting, the data or layout can always be retrieved from the <div> element in which the plot was drawn:
+
+
+Plotly.react has the same signature as Plotly.newPlot above, and can be used in its place to create a plot, but when called again on the same <div> will update it far more efficiently than Plotly.newPlot, which would destroy and recreate the plot. Plotly.react is as fast as Plotly.restyle/Plotly.relayout documented below.
+
+Important Note: In order to use this method to plot new items in arrays under data such as x or marker.color etc, these items must either have been added immutably (i.e. the identity of the parent array must have changed) or the value of layout.datarevision must have changed.
+
+
+This function has comparable performance to Plotly.react and is faster than redrawing the whole plot with Plotly.newPlot.
+
+An efficient means of changing attributes in the data array in an existing plot. When restyling, you may choose to have the specified changes affect as many traces as desired. The update is given as a single object and the traces that are affected are given as a list of traces indices. Note, leaving the trace indices unspecified assumes that you want to restyle all the traces.
+
+
+
+
+
+
+// restyle a single trace using attribute strings
+var update = {
+ opacity: 0.4,
+ 'marker.color': 'red'
+};
+Plotly.restyle(graphDiv, update, 0);
+
+// restyle all traces using attribute strings
+var update = {
+ opacity: 0.4,
+ 'marker.color': 'red'
+};
+Plotly.restyle(graphDiv, update);
+
+// restyle two traces using attribute strings
+var update = {
+ opacity: 0.4,
+ 'marker.color': 'red'
+};
+Plotly.restyle(graphDiv, update, [1, 2]);
+
+
+The above examples have applied values across single or multiple traces. However, you can also specify arrays of values to apply to traces in turn.
+
+
+// restyle the first trace's marker color 'red' and the second's 'green'
+var update = {
+ 'marker.color': ['red', 'green']
+};
+Plotly.restyle(graphDiv, update, [0, 1])
+
+// alternate between red and green for all traces (note omission of traces)
+var update = {
+ 'marker.color': ['red', 'green']
+};
+Plotly.restyle(graphDiv, update)
+
+
+In restyle, arrays are assumed to be used in conjunction with the trace indices provided. Therefore, to apply an array as a value, you need to wrap it in an additional array. For example:
+
+
+// update the color attribute of the first trace so that the markers within the same trace
+// have different colors
+var update = {
+ 'marker.color': [['red', 'green']]
+}
+Plotly.restyle(graphDiv, update, [0])
+
+// update two traces with new z data
+var update = {z: [[[1,2,3], [2,1,2], [1,1,1]], [[0,1,1], [0,2,1], [3,2,1]]]};
+Plotly.restyle(graphDiv, update, [1, 2])
+
+
+The term attribute strings is used above to mean flattened (e.g., {marker: {color: 'red'}} vs. {'marker.color': red}). When you pass an attribute string to restyle inside the update object, it’s assumed to mean update only this attribute. Therefore, if you wish to replace and entire sub-object, you may simply specify one less level of nesting.
+
+
+// replace the entire marker object with the one provided
+var update = {
+ marker: {color: 'red'}
+};
+Plotly.restyle(graphDiv, update, [0])
+
+
+Finally, you may wish to selectively reset or ignore certain properties when restyling. This may be useful when specifying multiple properties for multiple traces so that you can carefully target what is and is not affected. In general `null` resets a property to the default while `undefined` applies no change to the current state.
+
+
+// Set the first trace's line to red, the second to the default, and ignore the third
+Plotly.restyle(graphDiv, {
+ 'line.color': ['red', null, undefined]
+}, [0, 1, 2])
+
+This function has comparable performance to Plotly.react and is faster than redrawing the whole plot with Plotly.newPlot.
+
+An efficient means of updating the layout object of an existing plot. The call signature and arguments for relayout are similar (but simpler) to restyle. Because there are no indices to deal with, arrays need not be wrapped. Also, no argument specifying applicable trace indices is passed in.
+
+
+
+
+
+
+
+// update only values within nested objects
+var update = {
+ title: {text: 'some new title'}, // updates the title
+ 'xaxis.range': [0, 5], // updates the xaxis range
+ 'yaxis.range[1]': 15 // updates the end of the yaxis range
+};
+Plotly.relayout(graphDiv, update)
+
+This function has comparable performance to Plotly.react and is faster than redrawing the whole plot with Plotly.newPlot.
+
+An efficient means of updating both the data array and layout object in an existing plot, basically a combination of Plotly.restyle and Plotly.relayout.
+
+
+
+
+
+//update the layout and all the traces
+var layout_update = {
+ title: {text: 'some new title'}, // updates the title
+};
+var data_update = {
+ 'marker.color': 'red'
+};
+Plotly.update(graphDiv, data_update, layout_update)
+
+//update the layout and a single trace
+var layout_update = {
+ title: {text: 'some new title'}, // updates the title
+};
+var data_update = {
+ 'marker.color': 'red'
+};
+Plotly.update(graphDiv, data_update, layout_update,0)
+
+//update the layout and two specific traces
+var layout_update = {
+ title: {text: 'some new title'}, // updates the title
+};
+var data_update = {
+ 'marker.color': 'red'
+};
+Plotly.update(graphDiv, data_update, layout_update, [0,2])
+
+
+
+Plotly.validate allows users to validate their input data array and layout object. This can be done on the data array and layout object passed into Plotly.newPlot or on an updated graphDiv with Plotly.validate(graphDiv.data, graphDiv.layout).
+
+
+
+
+
+var data = [{
+ type: 'bar',
+ y: [2, 1, 3, 2],
+ orientation: 'horizontal'
+}];
+
+var out = Plotly.validate(data, layout);
+console.log(out[0].msg)
+// "In data trace 0, key orientation is set to an invalid value (horizontal)"
+
+
+Plotly.makeTemplate copies the style information from a figure. It does this by returning a template object which can be passed to the layout.template attribute of another figure.
+
+
+Plotly.validateTemplate allows users to Test for consistency between the given figure and a template,
+either already included in the figure or given separately. Note that not every issue identified here is necessarily
+a problem, it depends on what you're using the template for.
+
+
+
+
+
+var out = Plotly.validateTemplate(figure, template);
+console.log(out[0].msg)
+// "The template has 1 traces of type bar but there are none in the data."
+
+This function has comparable performance to Plotly.react and is faster than redrawing the whole plot with Plotly.newPlot.
+
+This allows you to add new traces to an existing graphDiv at any location in its data array. Every graphDiv object has a data component which is an array of JSON blobs that each describe one trace. The full list of trace types can be found in the Full Reference.
+
+
+
+// add a single trace to an existing graphDiv
+Plotly.addTraces(graphDiv, {y: [2,1,2]});
+
+// add two traces
+Plotly.addTraces(graphDiv, [{y: [2,1,2]}, {y: [4, 5, 7]}]);
+
+// add a trace at the beginning of the data array
+Plotly.addTraces(graphDiv, {y: [1, 5, 7]}, 0);
+
+This function has comparable performance to Plotly.react and is faster than redrawing the whole plot with Plotly.newPlot.
+This allows you to reorder traces in an existing graphDiv. This will change the ordering of the layering and the legend.
+
+All traces defined in graphDiv are ordered in an array. They are drawn one by one from first to last. Each time a new layer or trace is drawn to the canvas the new trace is drawn directly over the current canvas, replacing the colors of the traces and background. This algorithm to image stacking/drawing is known as the Painter's Algorithm. As its name implies the Painter's Algorithm is typically the manner in which a painter paints a landscape, starting from objects with the most perspective depth and progressively moving forward and layering over the background objects.
+
+
+// move the first trace (at index 0) the the end of the data array
+Plotly.moveTraces(graphDiv, 0);
+
+// move selected traces (at indices [0, 3, 5]) to the end of the data array
+Plotly.moveTraces(graphDiv, [0, 3, 5]);
+
+// move last trace (at index -1) to the beginning of the data array (index 0)
+Plotly.moveTraces(graphDiv, -1, 0);
+
+// move selected traces (at indices [1, 4, 5]) to new indices [0, 3, 2]
+Plotly.moveTraces(graphDiv, [1, 4, 5], [0, 3, 2]);
+
+This function has comparable performance to Plotly.react and is faster than redrawing the whole plot with Plotly.newPlot.
+This allows you to add animation frames to a graphDiv. The group or name attribute of a frame can
+be used by Plotly.animate in place of a frame object (or array of
+frame objects).
+See example here.
+
+
+
+toImage will generate a promise to an image of the plot in data URL format.
+
+// Plotly.toImage will turn the plot in the given div into a data URL string
+// toImage takes the div as the first argument and an object specifying image properties as the other
+Plotly.toImage(graphDiv, {format: 'png', width: 800, height: 600}).then(function(dataUrl) {
+ // use the dataUrl
+})
+
+
+downloadImage will trigger a request to download the image of a Plotly plot.
+
+// downloadImage will accept the div as the first argument and an object specifying image properties as the other
+Plotly.downloadImage(graphDiv, {format: 'png', width: 800, height: 600, filename: 'newplot'});
+
+
+Plots emit events prefixed with plotly_ when clicked or hovered over, and event handlers can be bound to events using the on method that is exposed by the plot div object. For more information and examples of how to use Plotly events see: https://plotly.com/javascript/plotlyjs-events/.
diff --git a/content/plotly_js/plotlyjs-getting-started.html b/content/plotly_js/plotlyjs-getting-started.html
new file mode 100644
index 00000000000..8792041a2fe
--- /dev/null
+++ b/content/plotly_js/plotlyjs-getting-started.html
@@ -0,0 +1,105 @@
+---
+name: Getting Started
+permalink: javascript/getting-started/
+description: Getting Started with plotly
+layout: base
+language: plotly_js
+redirect_from: javascript-graphing-library/getting-started/
+---
+
+
+
+
The pages linked in the sidebar together form the exhaustive reference for all of the attributes in the core figure data structure
+that the plotly library operates on. They are automatically-generated from the
+ machine-readable Plotly.js schema reference.
+
+
How are Plotly attributes organized?
+
+
+ plotly.js charts are described declaratively as JSON objects. Every aspect of a plotly chart (the colors, the grids, the data, and so on) has a corresponding JSON attribute. This page contains an extensive list of these attributes.
+
+ Plotly's graph description places attributes into two categories: traces (objects that describe a single series of data in a graph) and layout (attributes that apply to the rest of the chart, like the title, xaxis, or annotations). Traces are categorized by chart type (e.g. scatter, heatmap).
+
+ Here is a simple example of a plotly chart inlined with links to each attribute's reference section.
+
+
+ plotly.js charts are described declaratively as JSON objects. Every aspect of a plotly chart (the colors, the grids, the data, and so on) has a corresponding JSON attribute. This page contains an extensive list of these attributes.
+
+ Plotly's graph description places attributes into two categories: traces (objects that describe a single series of data in a graph) and layout (attributes that apply to the rest of the chart, like the title, xaxis, or annotations). Traces are categorized by chart type (e.g. scatter, heatmap).
+
+ Here is a simple example of a plotly chart inlined with links to each attribute's reference section.
+
+
The pages linked in the sidebar together form the exhaustive reference for all of the attributes in the core figure data structure
+that the plotly library operates on. They are automatically-generated from the
+ machine-readable Plotly.js schema reference.
+
+
+
How to use these Reference pages
+
+
Figures are represented as trees with named nodes called "attributes".
+The root node of the tree has three top-level attributes: data, layout and frames.
+Attributes are referred to in text and in this reference by their full "path" i.e. the dot-delimited concatenation of their parents.
+For example "layout.width" refers to the attribute whose key is "width" inside a dict which is
+the value associated with a key "layout" at the root of the figure. If one of the parents is a list rather
+than a dict, a set of brackets is inserted in the path when referring to the attribute in the abstract,
+e.g. "layout.annotations[].text". Finally, as explained below, the top-level "data"
+attribute defines a list of typed objects called "traces" with the schema dependent upon the type,
+and these attributes' paths are listed in this reference as
+"data[type=scatter].name". When manipulating
+a plotly.graph_objects.Figure object, attributes can be set either directly
+using Python object attributes e.g. fig.layout.title.font.family="Open Sans"
+or using update methods
+and "magic underscores" e.g. fig.update_layout(title_font_family="Open Sans")
+
+
+
When building a figure, it is not necessary to populate every attribute
+of every object. At render-time, the JavaScript layer will compute default values
+for each required unspecified attribute, depending upon the ones that are specified,
+as documented in this page. An example of this would be layout.xaxis.range,
+which may be specified explicitly, but if not will be computed based on the range of x values for
+every trace linked to that axis. The JavaScript layer will ignore unknown attributes
+or malformed values, although the plotly.graph_objects module provides
+Python-side validation for attribute values. Note also that if the layout.template
+key is present (as it is by default) then default values will be drawn first from the contents
+of the template and only if missing from there will the JavaScript layer infer further defaults.
+The built-in template can be disabled by setting layout.template="none".
Figures are represented as trees with named nodes called "attributes".
+The root node of the tree has three top-level attributes: data, layout and frames.
+Attributes are referred to in text and in this page by their full "path" i.e. the dot-delimited concatenation of their parents.
+For example "layout.width" refers to the attribute whose key is "width" inside a dict which is
+the value associated with a key "layout" at the root of the figure. If one of the parents is a list rather
+than a dict, a set of brackets is inserted in the path when referring to the attribute in the abstract,
+e.g. "layout.annotations[].text". Finally, as explained below, the top-level "data"
+attribute defines a list of typed objects called "traces" with the schema dependent upon the type,
+and these attributes' paths are listed in this page as
+"data[type=scatter].name". When manipulating
+a plotly.graph_objects.Figure object, attributes can be set either directly
+using Python object attributes e.g. fig.layout.title.font.family="Open Sans"
+or using update methods
+and "magic underscores" e.g. fig.update_layout(title_font_family="Open Sans")
+
+
+
When building a figure, it is not necessary to populate every attribute
+of every object. At render-time, the JavaScript layer will compute default values
+for each required unspecified attribute, depending upon the ones that are specified,
+as documented in this page. An example of this would be layout.xaxis.range,
+which may be specified explicitly, but if not will be computed based on the range of x values for
+every trace linked to that axis. The JavaScript layer will ignore unknown attributes
+or malformed values, although the plotly.graph_objects module provides
+Python-side validation for attribute values. Note also that if the layout.template
+key is present (as it is by default) then default values will be drawn first from the contents
+of the template and only if missing from there will the JavaScript layer infer further defaults.
+The built-in template can be disabled by setting layout.template="none".
+
\ No newline at end of file
diff --git a/pages/graphing-multiple-chart-types.md b/pages/graphing-multiple-chart-types.md
new file mode 100644
index 00000000000..4bdb0b4f565
--- /dev/null
+++ b/pages/graphing-multiple-chart-types.md
@@ -0,0 +1,2 @@
+# graphing-multiple-chart-types
+--8<-- "javascript/graphing-multiple-chart-types/index.html"
diff --git a/pages/heatmaps.md b/pages/heatmaps.md
new file mode 100644
index 00000000000..55b63c01ff2
--- /dev/null
+++ b/pages/heatmaps.md
@@ -0,0 +1,2 @@
+# heatmaps
+--8<-- "javascript/heatmaps/index.html"
diff --git a/pages/histograms.md b/pages/histograms.md
new file mode 100644
index 00000000000..7fe04dbe932
--- /dev/null
+++ b/pages/histograms.md
@@ -0,0 +1,2 @@
+# histograms
+--8<-- "javascript/histograms/index.html"
diff --git a/pages/horizontal-bar-charts.md b/pages/horizontal-bar-charts.md
new file mode 100644
index 00000000000..d1e39744e62
--- /dev/null
+++ b/pages/horizontal-bar-charts.md
@@ -0,0 +1,2 @@
+# horizontal-bar-charts
+--8<-- "javascript/horizontal-bar-charts/index.html"
diff --git a/pages/horizontal-legend.md b/pages/horizontal-legend.md
new file mode 100644
index 00000000000..cdd72305755
--- /dev/null
+++ b/pages/horizontal-legend.md
@@ -0,0 +1,2 @@
+# horizontal-legend
+--8<-- "javascript/horizontal-legend/index.html"
diff --git a/pages/hover-events.md b/pages/hover-events.md
new file mode 100644
index 00000000000..22a9f641224
--- /dev/null
+++ b/pages/hover-events.md
@@ -0,0 +1,2 @@
+# hover-events
+--8<-- "javascript/hover-events/index.html"
diff --git a/pages/hover-text-and-formatting.md b/pages/hover-text-and-formatting.md
new file mode 100644
index 00000000000..0fad668fdc2
--- /dev/null
+++ b/pages/hover-text-and-formatting.md
@@ -0,0 +1,2 @@
+# hover-text-and-formatting
+--8<-- "javascript/hover-text-and-formatting/index.html"
diff --git a/pages/images.md b/pages/images.md
new file mode 100644
index 00000000000..2bc1094851f
--- /dev/null
+++ b/pages/images.md
@@ -0,0 +1,2 @@
+# images
+--8<-- "javascript/images/index.html"
diff --git a/pages/index.md b/pages/index.md
new file mode 100644
index 00000000000..656cfa3b605
--- /dev/null
+++ b/pages/index.md
@@ -0,0 +1 @@
+{!../README.md!}
\ No newline at end of file
diff --git a/pages/indicator.md b/pages/indicator.md
new file mode 100644
index 00000000000..9202cbdccde
--- /dev/null
+++ b/pages/indicator.md
@@ -0,0 +1,2 @@
+# indicator
+--8<-- "javascript/indicator/index.html"
diff --git a/pages/insets.md b/pages/insets.md
new file mode 100644
index 00000000000..311cd4e7819
--- /dev/null
+++ b/pages/insets.md
@@ -0,0 +1,2 @@
+# insets
+--8<-- "javascript/insets/index.html"
diff --git a/pages/is-plotly-free.md b/pages/is-plotly-free.md
new file mode 100644
index 00000000000..8ddc6eda7d0
--- /dev/null
+++ b/pages/is-plotly-free.md
@@ -0,0 +1,33 @@
+---
+name: Is Plotly.js Free?
+permalink: javascript/is-plotly-free/
+redirect_from: javascript/open-source-announcement/
+description: Plotly's open-source graphing libraries are free to use, work offline and don't require any account registration. Plotly also has a commercial offering called Dash Enterprise.
+layout: base
+no_in_language: true
+language: plotly_js
+---
+
+### Is Plotly.js Free?
+
+ **Yes.** Plotly.js is free and open-source software, [licensed under the **MIT license**](https://github.com/plotly/plotly.js/blob/master/LICENSE). It costs nothing to [install and use](getting-started.md). You can view the source, report issues or contribute using [our Github repository](https://github.com/plotly/plotly.js).
+
+
+### Can I use Plotly.js without signing up to any service?
+
+ **Yes.** You can use Plotly.js to make, view, and distribute charts and maps without registering for any service,
+obtaining any token, or creating any account. The one exception is that to view tile maps
+which use tiles from the Mapbox service (which is optional, as [you can use other tile servers](../mapbox-layers/)), you will need to have a Mapbox token.
+
+### Can I use Plotly.js offline, without being connected to the internet?
+
+ **Yes.** You can use Plotly.js to make, view, and distribute graphics totally offline. The one exception is that to view tile maps
+which use tiles from a cloud-hosted service, such as Open Street Maps or Mapbox, you will need a connection to that service. You can view tile maps totally offline if you run your own local tile server and [use its tiles](../mapbox-layers/).
+
+### Is Dash free?
+
+ **Yes.** Plotly's [Dash](https://plotly.com/dash) analytics application framework is also free and open-source software, licensed under the **MIT license**.
+
+### Does Plotly also make commercial software?
+
+ **Yes.** Plotly has commercial offerings such as [Dash Enterprise](https://plotly.com/dash).
diff --git a/pages/javascript/highlight.js b/pages/javascript/highlight.js
new file mode 100644
index 00000000000..341a39c5f54
--- /dev/null
+++ b/pages/javascript/highlight.js
@@ -0,0 +1,6 @@
+document$.subscribe(function() {
+ // Highlight all the javascript code blocks
+ document.querySelectorAll('pre code[class*="language-"]').forEach((block) => {
+ hljs.highlightElement(block);
+ });
+});
\ No newline at end of file
diff --git a/pages/lasso-selection.md b/pages/lasso-selection.md
new file mode 100644
index 00000000000..422db9d6d54
--- /dev/null
+++ b/pages/lasso-selection.md
@@ -0,0 +1,2 @@
+# lasso-selection
+--8<-- "javascript/lasso-selection/index.html"
diff --git a/pages/layout-template.md b/pages/layout-template.md
new file mode 100644
index 00000000000..a7577c42851
--- /dev/null
+++ b/pages/layout-template.md
@@ -0,0 +1,2 @@
+# layout-template
+--8<-- "javascript/layout-template/index.html"
diff --git a/pages/legend.md b/pages/legend.md
new file mode 100644
index 00000000000..1b8280aa0e9
--- /dev/null
+++ b/pages/legend.md
@@ -0,0 +1,2 @@
+# legend
+--8<-- "javascript/legend/index.html"
diff --git a/pages/line-and-scatter.md b/pages/line-and-scatter.md
new file mode 100644
index 00000000000..b5403596926
--- /dev/null
+++ b/pages/line-and-scatter.md
@@ -0,0 +1,2 @@
+# line-and-scatter
+--8<-- "javascript/line-and-scatter/index.html"
diff --git a/pages/line-charts.md b/pages/line-charts.md
new file mode 100644
index 00000000000..4d8177c044d
--- /dev/null
+++ b/pages/line-charts.md
@@ -0,0 +1,2 @@
+# line-charts
+--8<-- "javascript/line-charts/index.html"
diff --git a/pages/lines-on-maps.md b/pages/lines-on-maps.md
new file mode 100644
index 00000000000..d3dd1d08cf5
--- /dev/null
+++ b/pages/lines-on-maps.md
@@ -0,0 +1,2 @@
+# lines-on-maps
+--8<-- "javascript/lines-on-maps/index.html"
diff --git a/pages/log-plot.md b/pages/log-plot.md
new file mode 100644
index 00000000000..145e7f25a56
--- /dev/null
+++ b/pages/log-plot.md
@@ -0,0 +1,2 @@
+# log-plot
+--8<-- "javascript/log-plot/index.html"
diff --git a/pages/map-animations.md b/pages/map-animations.md
new file mode 100644
index 00000000000..9f0a64d17c3
--- /dev/null
+++ b/pages/map-animations.md
@@ -0,0 +1,2 @@
+# map-animations
+--8<-- "javascript/map-animations/index.html"
diff --git a/pages/maps.md b/pages/maps.md
new file mode 100644
index 00000000000..2945f08b7df
--- /dev/null
+++ b/pages/maps.md
@@ -0,0 +1,55 @@
+## Plotly.js Maps
+
+
+ {% endif %}
+
+
+ {% if not "toc.integrate" in features %}
+ {% if page and page.meta and page.meta.hide %}
+ {% set hidden = "hidden" if "toc" in page.meta.hide %}
+ {% endif %}
+
+
+
+ {% include "partials/toc.html" %}
+
+
+
+ {% endif %}
+{% endblock %}
+
+{% block content %}
+
+{% if page.file.src_path != "index.md" and not page.url.startswith('reference/') and
+not page.url.endswith(('plotly-fundamentals/', 'basic-charts/',
+'statistical-charts/', 'scientific-charts/', 'financial-charts/',
+'maps/', '3d-charts/', 'multiple-axes/', 'chart-events/', 'plotly-animations/',
+'advanced-opt/', 'controls/')) %}
+{% set filename = page.file.src_path.split('/')[-1] %}
+
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try
+ Plotly Studio now.
+
+
+{{ super() }}
+
+{% if not page.url.startswith('reference/') %}
+
+{% endif %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/pages/overrides/partials/footer.html b/pages/overrides/partials/footer.html
new file mode 100644
index 00000000000..9a704848664
--- /dev/null
+++ b/pages/overrides/partials/footer.html
@@ -0,0 +1,76 @@
+{% import "partials/language.html" as lang with context %}
+
+
\ No newline at end of file
diff --git a/pages/overrides/partials/header.html b/pages/overrides/partials/header.html
new file mode 100644
index 00000000000..6b6a7aa4bad
--- /dev/null
+++ b/pages/overrides/partials/header.html
@@ -0,0 +1,80 @@
+{#-
+ This file was automatically generated - do not edit
+-#}
+{% set class = "md-header" %}
+{% if "navigation.tabs.sticky" in features %}
+ {% set class = class ~ " md-header--shadow md-header--lifted" %}
+{% elif "navigation.tabs" not in features %}
+ {% set class = class ~ " md-header--shadow" %}
+{% endif %}
+
+
+ {% if "navigation.tabs.sticky" in features %}
+ {% if "navigation.tabs" in features %}
+ {% include "partials/tabs.html" %}
+ {% endif %}
+ {% endif %}
+
\ No newline at end of file
diff --git a/pages/parallel-categories-diagram.md b/pages/parallel-categories-diagram.md
new file mode 100644
index 00000000000..02bb6a62ade
--- /dev/null
+++ b/pages/parallel-categories-diagram.md
@@ -0,0 +1,2 @@
+# parallel-categories-diagram
+--8<-- "javascript/parallel-categories-diagram/index.html"
diff --git a/pages/parallel-coordinates-plot.md b/pages/parallel-coordinates-plot.md
new file mode 100644
index 00000000000..7831f749cb6
--- /dev/null
+++ b/pages/parallel-coordinates-plot.md
@@ -0,0 +1,2 @@
+# parallel-coordinates-plot
+--8<-- "javascript/parallel-coordinates-plot/index.html"
diff --git a/pages/pie-charts.md b/pages/pie-charts.md
new file mode 100644
index 00000000000..2849d77f121
--- /dev/null
+++ b/pages/pie-charts.md
@@ -0,0 +1,2 @@
+# pie-charts
+--8<-- "javascript/pie-charts/index.html"
diff --git a/pages/plotly-animations.md b/pages/plotly-animations.md
new file mode 100644
index 00000000000..413a9606c8f
--- /dev/null
+++ b/pages/plotly-animations.md
@@ -0,0 +1,28 @@
+## Plotly.js Animations
+
+
\ No newline at end of file
diff --git a/pages/plotly-fundamentals.md b/pages/plotly-fundamentals.md
new file mode 100644
index 00000000000..f4fea3ed23c
--- /dev/null
+++ b/pages/plotly-fundamentals.md
@@ -0,0 +1,165 @@
+## Plotly.js Fundamentals
+
+
diff --git a/pages/plotlyjs-events.md b/pages/plotlyjs-events.md
new file mode 100644
index 00000000000..a7d2996b7c2
--- /dev/null
+++ b/pages/plotlyjs-events.md
@@ -0,0 +1,2 @@
+# plotlyjs-events
+--8<-- "javascript/plotlyjs-events/index.html"
diff --git a/pages/plotlyjs-function-reference.md b/pages/plotlyjs-function-reference.md
new file mode 100644
index 00000000000..bcee6bacf43
--- /dev/null
+++ b/pages/plotlyjs-function-reference.md
@@ -0,0 +1,650 @@
+### Common Parameters
+
+`graphDiv`
+
+The functions documented here all create or modify a plot that is drawn into a `
` element on the page, commonly referred to as `graphDiv` or `plotDiv`. The first argument to each function on this page is a reference to this element, and it can be either a DOM node, i.e. the output of `document.getElementById()`, or a string, in which case it will be treated as the `id` of the `div`. A note on sizing: You can either supply height and width in the `layout` object (see below), or give the `
` a height and width in CSS.
+
+`data`
+
+The data to be plotted is described in an array usually called `data`, whose elements are trace objects of various types (e.g. `scatter`, `bar` etc) as documented [in the Full Reference](/reference/index.md).
+
+`layout`
+
+The layout of the plot – non-data-related visual attributes such as the title, annotations etc – is described in an object usually called `layout`, as documented [in the Full Reference](/reference/layout.md).
+
+`config`
+
+High-level configuration options for the plot, such as the scroll/zoom/hover behaviour, is described in an object usually called `config`, as [documented here](configuration-options.md). The difference between `config` and `layout` is that `layout` relates to the content of the plot, whereas `config` relates to the context in which the plot is being shown.
+
+`frames`
+
+Animation frames are described in an object usually called `frames` as per the [example here](gapminder-example.md). They can contain `data` and `layout` objects, which define any changes to be animated, and a `traces` object that defines which traces to animate. Additionally, frames containing `name` and/or `group` attributes can be referenced by [Plotly.animate](#plotlyanimate) after they are added by [Plotly.addFrames](#plotlyaddframes)
+
+
+### Plotly.newPlot
+
+Draws a new plot in an `
` element, *overwriting any existing plot*. To update an existing plot in a `
`, it is much more efficient to use [`Plotly.react`](#plotlyreact) than to overwrite it.
+
+
+
+
+
+After plotting, the `data` or `layout` can always be retrieved from the `
+
+
+### Plotly.react
+
+`Plotly.react` has the same signature as [`Plotly.newPlot`](#plotlynewplot) above, and can be used in its place to create a plot, but when called again on the same `
` will update it far more efficiently than [`Plotly.newPlot`](#plotlynewplot), which would destroy and recreate the plot. `Plotly.react` is as fast as `Plotly.restyle`/`Plotly.relayout` documented below.
+
+Important Note: In order to use this method to plot new items in arrays under `data` such as `x` or `marker.color` etc, these items must either have been added immutably (i.e. the identity of the parent array must have changed) or the value of [`layout.datarevision`](/reference/layout.md#layout-datarevision) must have changed.
+
+
+### Plotly.restyle
+
+*This function has comparable performance to [`Plotly.react`](#plotlyreact) and is faster than redrawing the whole plot with [`Plotly.newPlot`](#plotlynewplot).*
+
+An efficient means of changing attributes in the `data` array in an existing plot. When restyling, you may choose to have the specified changes affect as many traces as desired. The update is given as a single object and the traces that are affected are given as a list of traces indices. Note, leaving the trace indices unspecified assumes that you want to restyle **all** the traces.
+
+
+
+
+
+
+// restyle a single trace using attribute strings
+var update = {
+ opacity: 0.4,
+ 'marker.color': 'red'
+};
+Plotly.restyle(graphDiv, update, 0);
+
+// restyle all traces using attribute strings
+var update = {
+ opacity: 0.4,
+ 'marker.color': 'red'
+};
+Plotly.restyle(graphDiv, update);
+
+// restyle two traces using attribute strings
+var update = {
+ opacity: 0.4,
+ 'marker.color': 'red'
+};
+Plotly.restyle(graphDiv, update, [1, 2]);
+
+
+
+
+
+The above examples have applied values across single or multiple traces. However, you can also specify arrays of values to apply to traces in turn.
+
+
+// restyle the first trace's marker color 'red' and the second's 'green'
+var update = {
+ 'marker.color': ['red', 'green']
+};
+Plotly.restyle(graphDiv, update, [0, 1])
+
+// alternate between red and green for all traces (note omission of traces)
+var update = {
+ 'marker.color': ['red', 'green']
+};
+Plotly.restyle(graphDiv, update)
+
+
+In restyle, arrays are assumed to be used in conjunction with the trace indices provided. Therefore, to apply an array as a value, you need to wrap it in an additional array. For example:
+
+
+// update the color attribute of the first trace so that the markers within the same trace
+// have different colors
+var update = {
+ 'marker.color': [['red', 'green']]
+}
+Plotly.restyle(graphDiv, update, [0])
+
+// update two traces with new z data
+var update = {z: [[[1,2,3], [2,1,2], [1,1,1]], [[0,1,1], [0,2,1], [3,2,1]]]};
+Plotly.restyle(graphDiv, update, [1, 2])
+
+
+The term attribute strings is used above to mean flattened (e.g., {marker: {color: 'red'}} vs. {'marker.color': red}). When you pass an attribute string to restyle inside the update object, it’s assumed to mean update only this attribute. Therefore, if you wish to replace and entire sub-object, you may simply specify one less level of nesting.
+
+
+// replace the entire marker object with the one provided
+var update = {
+ marker: {color: 'red'}
+};
+Plotly.restyle(graphDiv, update, [0])
+
+
+Finally, you may wish to selectively reset or ignore certain properties when restyling. This may be useful when specifying multiple properties for multiple traces so that you can carefully target what is and is not affected. In general `null` resets a property to the default while `undefined` applies no change to the current state.
+
+
+// Set the first trace's line to red, the second to the default, and ignore the third
+Plotly.restyle(graphDiv, {
+ 'line.color': ['red', null, undefined]
+}, [0, 1, 2])
+
+
+
+### Plotly.relayout
+
+*This function has comparable performance to [`Plotly.react`](#plotlyreact) and is faster than redrawing the whole plot with [`Plotly.newPlot`](#plotlynewplot).*
+
+An efficient means of updating the `layout` object of an existing plot. The call signature and arguments for relayout are similar (but simpler) to restyle. Because there are no indices to deal with, arrays need not be wrapped. Also, no argument specifying applicable trace indices is passed in.
+
+
+
+
+
+
+
+// update only values within nested objects
+var update = {
+ title: {text: 'some new title'}, // updates the title
+ 'xaxis.range': [0, 5], // updates the xaxis range
+ 'yaxis.range[1]': 15 // updates the end of the yaxis range
+};
+Plotly.relayout(graphDiv, update)
+
+
+
+### Plotly.update
+
+*This function has comparable performance to [`Plotly.react`](#plotlyreact) and is faster than redrawing the whole plot with [`Plotly.newPlot`](#plotlynewplot).*
+
+An efficient means of updating both the `data` array and `layout` object in an existing plot, basically a combination of `Plotly.restyle` and `Plotly.relayout`.
+
+
+
+
+
+
+//update the layout and all the traces
+var layout_update = {
+ title: {text: 'some new title'}, // updates the title
+};
+var data_update = {
+ 'marker.color': 'red'
+};
+Plotly.update(graphDiv, data_update, layout_update)
+
+//update the layout and a single trace
+var layout_update = {
+ title: {text: 'some new title'}, // updates the title
+};
+var data_update = {
+ 'marker.color': 'red'
+};
+Plotly.update(graphDiv, data_update, layout_update,0)
+
+//update the layout and two specific traces
+var layout_update = {
+ title: {text: 'some new title'}, // updates the title
+};
+var data_update = {
+ 'marker.color': 'red'
+};
+Plotly.update(graphDiv, data_update, layout_update, [0,2])
+
+
+
+
+### Plotly.validate
+
+`Plotly.validate` allows users to validate their input `data` array and `layout` object. This can be done on the `data` array and `layout` object passed into `Plotly.newPlot` or on an updated `graphDiv` with `Plotly.validate(graphDiv.data, graphDiv.layout)`.
+
+
+
+
+
+
+var data = [{
+ type: 'bar',
+ y: [2, 1, 3, 2],
+ orientation: 'horizontal'
+}];
+
+var out = Plotly.validate(data, layout);
+console.log(out[0].msg)
+// "In data trace 0, key orientation is set to an invalid value (horizontal)"
+
+
+### Plotly.makeTemplate
+
+`Plotly.makeTemplate` copies the style information from a figure. It does this by returning a `template` object which can be passed to the `layout.template` attribute of another figure.
+
+
+
+
+
+
+
+### Plotly.validateTemplate
+
+`Plotly.validateTemplate` allows users to Test for consistency between the given figure and a template,
+either already included in the figure or given separately. Note that not every issue identified here is necessarily
+a problem, it depends on what you're using the template for.
+
+
+
+
+
+
+var out = Plotly.validateTemplate(figure, template);
+console.log(out[0].msg)
+// "The template has 1 traces of type bar but there are none in the data."
+
+
+### Plotly.addTraces
+
+*This function has comparable performance to [`Plotly.react`](#plotlyreact) and is faster than redrawing the whole plot with [`Plotly.newPlot`](#plotlynewplot).*
+
+This allows you to add **new** traces to an existing `graphDiv` at any location in its [data array](#retrieving-data-layout). Every `graphDiv` object has a `data` component which is an array of JSON blobs that each describe one trace. The full list of trace types can be found [in the Full Reference](/reference/index.md).
+
+
+// add a single trace to an existing graphDiv
+Plotly.addTraces(graphDiv, {y: [2,1,2]});
+
+// add two traces
+Plotly.addTraces(graphDiv, [{y: [2,1,2]}, {y: [4, 5, 7]}]);
+
+// add a trace at the beginning of the data array
+Plotly.addTraces(graphDiv, {y: [1, 5, 7]}, 0);
+
+
+
+### Plotly.deleteTraces
+
+*This function has comparable performance to [`Plotly.react`](#plotlyreact) and is faster than redrawing the whole plot with [`Plotly.newPlot`](#plotlynewplot).*
+
+This allows you to remove traces from an existing `graphDiv` by specifying the indices of the traces to be removed.
+
+
+// remove the first trace
+Plotly.deleteTraces(graphDiv, 0);
+
+// remove the last two traces
+Plotly.deleteTraces(graphDiv, [-2, -1]);
+
+
+
+### Plotly.moveTraces
+
+*This function has comparable performance to [`Plotly.react`](#plotlyreact) and is faster than redrawing the whole plot with [`Plotly.newPlot`](#plotlynewplot).*
+
+This allows you to reorder traces in an existing `graphDiv`. This will change the ordering of the layering and the legend.
+
+All traces defined in `graphDiv` are ordered in an array. They are drawn one by one from first to last. Each time a new layer or trace is drawn to the canvas the new trace is drawn directly over the current canvas, replacing the colors of the traces and background. This algorithm to image stacking/drawing is known as the [Painter's Algorithm](https://www.youtube.com/watch?v=oMgOR3PxmDU). As its name implies the Painter's Algorithm is typically the manner in which a painter paints a landscape, starting from objects with the most perspective depth and progressively moving forward and layering over the background objects.
+
+
+// move the first trace (at index 0) the the end of the data array
+Plotly.moveTraces(graphDiv, 0);
+
+// move selected traces (at indices [0, 3, 5]) to the end of the data array
+Plotly.moveTraces(graphDiv, [0, 3, 5]);
+
+// move last trace (at index -1) to the beginning of the data array (index 0)
+Plotly.moveTraces(graphDiv, -1, 0);
+
+// move selected traces (at indices [1, 4, 5]) to new indices [0, 3, 2]
+Plotly.moveTraces(graphDiv, [1, 4, 5], [0, 3, 2]);
+
+
+
+### Plotly.extendTraces
+
+*This function has comparable performance to [`Plotly.react`](#plotlyreact) and is faster than redrawing the whole plot with [`Plotly.newPlot`](#plotlynewplot).*
+
+This allows you to add data to traces in an existing `graphDiv`.
+
+
+// extend one trace
+Plotly.extendTraces(graphDiv, {y: [[rand()]]}, [0])
+
+// extend multiple traces
+Plotly.extendTraces(graphDiv, {y: [[rand()], [rand()]]}, [0, 1])
+
+// extend multiple traces up to a maximum of 10 points per trace
+Plotly.extendTraces(graphDiv, {y: [[rand()], [rand()]]}, [0, 1], 10)
+
+
+
+### Plotly.prependTraces
+
+*This function has comparable performance to [`Plotly.react`](#plotlyreact) and is faster than redrawing the whole plot with [`Plotly.newPlot`](#plotlynewplot).*
+
+This allows you to prepend data to an existing trace `graphDiv`.
+
+
+// prepend one trace
+Plotly.prependTraces(graphDiv, {y: [[rand()]]}, [0])
+
+// prepend multiple traces
+Plotly.prependTraces(graphDiv, {y: [[rand()], [rand()]]}, [0, 1])
+
+// prepend multiple traces up to a maximum of 10 points per trace
+Plotly.prependTraces(graphDiv, {y: [[rand()], [rand()]]}, [0, 1], 10)
+
+
+### Plotly.addFrames
+
+*This function has comparable performance to [`Plotly.react`](#plotlyreact) and is faster than redrawing the whole plot with [`Plotly.newPlot`](#plotlynewplot).*
+
+This allows you to add animation frames to a `graphDiv`. The `group` or `name` attribute of a frame can be used by [Plotly.animate](#plotlyanimate) in place of a frame object (or array of frame objects). See [example here](gapminder-example.md).
+
+
+### Plotly.animate
+
+Add dynamic behaviour to plotly graphs with `Plotly.animate`.
+
+
+
+
+
+
+
+
+
+### Plotly.toImage
+
+`toImage` will generate a promise to an image of the plot in data URL format.
+
+
+// Plotly.toImage will turn the plot in the given div into a data URL string
+// toImage takes the div as the first argument and an object specifying image properties as the other
+Plotly.toImage(graphDiv, {format: 'png', width: 800, height: 600}).then(function(dataUrl) {
+ // use the dataUrl
+})
+
+
+
+### Plotly.downloadImage
+
+`downloadImage` will trigger a request to download the image of a Plotly plot.
+
+
+// downloadImage will accept the div as the first argument and an object specifying image properties as the other
+Plotly.downloadImage(graphDiv, {format: 'png', width: 800, height: 600, filename: 'newplot'});
+
The pages linked in the sidebar together form the exhaustive reference for all of the attributes in the core figure data structure
+that the plotly library operates on. They are automatically-generated from the
+ machine-readable Plotly.js schema reference.
+
+
How are Plotly attributes organized?
+
+
+ plotly.js charts are described declaratively as JSON objects. Every aspect of a plotly chart (the colors, the grids, the data, and so on) has a corresponding JSON attribute. This page contains an extensive list of these attributes.
+
+ Plotly's graph description places attributes into two categories: traces (objects that describe a single series of data in a graph) and layout (attributes that apply to the rest of the chart, like the title, xaxis, or annotations). Traces are categorized by chart type (e.g. scatter, heatmap).
+
+ Here is a simple example of a plotly chart inlined with links to each attribute's reference section.
+
+
+ + ++
+ 
+ + ++
+ 
+ 
+ + ++
+ 
+ 
+ 
+ 