+
+ You can install Plotly.js from NPM via npm install plotly.js-dist or yarn add plotly.js-dist
+
+
+
+
+
+ plotly.js CDN
+
+
+ You can also use the ultrafast plotly.js CDN link. This CDN is graciously provided by the incredible team at Fastly .
+
+
+
<head>
+ <script src="https://cdn.plot.ly/plotly-{{site.data.jsversion.version}}.min.js" charset="utf-8"></script>
+</head>
+
+
+
+
+ Download
+
+
+ Download the minified plotly.js source code and dependencies.
+
+
+
+ Include the downloaded scripts before the end of the </head> tag in your HTML document:
+
+
+
<head>
+ <script src="plotly-{{site.data.jsversion.version}}.min.js" charset="utf-8"></script>
+</head>
+
+
+
+
+
+
+
+
+
+
+ Start plotting!
+
+
+ In your HTML document, create an empty DIV to draw the graph in:
+
+
+
<div id="tester" style="width:600px;height:250px;"></div>
+
+
+ Now you can make interactive plotly.js charts using Plotly.newPlot().
+
+
<script>
+ TESTER = document.getElementById('tester');
+ Plotly.newPlot( TESTER, [{
+ x: [1, 2, 3, 4, 5],
+ y: [1, 2, 4, 8, 16] }], {
+ margin: { t: 0 } } );
+</script>
+
+
+ Now you can pass Plotly.newPlot() either the ID of the DIV ("tester") or the DIV DOM element (TESTER).
+
+
+
+
+
+ Hello World Example
+
+
+
+
+
+
+
+
diff --git a/content/plotly_js/2016-06-03-plotly_js_function_ref.html b/content/plotly_js/2016-06-03-plotly_js_function_ref.html
new file mode 100644
index 00000000000..c256e8e203e
--- /dev/null
+++ b/content/plotly_js/2016-06-03-plotly_js_function_ref.html
@@ -0,0 +1,629 @@
+---
+name: Function Reference
+permalink: /javascript/plotlyjs-function-reference/
+description: Plotly.js function reference. How to create, update, and modify graphs drawn with Plotly's JavaScript Graphing Library.
+language: plotly_js
+layout: base
+redirect_from: /javascript-graphing-library/plotlyjs-function-reference
+---
+
+
+
+
+
+
+ graphDivThe 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.
+
+ dataThe 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 .
+
+ layoutThe 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 .
+
+ configHigh-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.
+
+ framesAnimation 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.
+
+
+Signature
+
+ Plotly.newPlot(graphDiv, data, layout, config)
+
+ graphDivDOM node or string id of a DOM node
+ dataarray of objects, see documentation [])
+ layoutobject, see documentation / {})
+ configobject, see documentation {})
+
+
+ Plotly.newPlot(graphDiv, obj)
+
+ graphDivDOM node or string id of a DOM node
+ obj
+ single object with keys for data, layout, config and frames, see above for contents {data: [], layout: {}, config: {}, frames: []})
+
+
+
+
+
+
+
+After plotting, the
data or
layout can always be retrieved from the
<div> element in which the plot was drawn:
+
+var graphDiv = document.getElementById('id_of_the_div')
+
+var data = [{
+ x: [1999, 2000, 2001, 2002],
+ y: [10, 15, 13, 17],
+ type: 'scatter'
+}];
+
+var layout = {
+ title: {
+ text: 'Sales Growth'
+ },
+ xaxis: {
+ title: {
+ text: 'Year'
+ },
+ showgrid: false,
+ zeroline: false
+ },
+ yaxis: {
+ title: {
+ text: 'Percent'
+ },
+ showline: false
+ }
+};
+Plotly.newPlot(graphDiv, data, layout);
+
+...
+var dataRetrievedLater = graphDiv.data;
+var layoutRetrievedLater = graphDiv.layout;
+
+
+
+
+
+
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.reactPlotly.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.
+
+
+
+Signature
+
+ Plotly.restyle(graphDiv, update [, traceIndices])
+
+ graphDivDOM node or string id of a DOM node
+ updateobject, see below for examples {})
+ traceIndicesarray of integer indices into existing value of data
+
+
+
+
+
+
+
+// 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]);
+
+
+
See the Pen Plotly.restyle by plotly (@plotly ) on CodePen .
+
+
+
+
+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)
+
+
+
See the Pen Plotly.restyle Traces in Turn by plotly (@plotly ) on CodePen .
+
+
+
+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])
+
+
+
See the Pen Plotly.restyle Arrays by plotly (@plotly ) on CodePen .
+
+
+
+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])
+
+
+
See the Pen Plotly.restyle Attribute strings by plotly (@plotly ) on CodePen .
+
+
+
+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])
+
+
+
See the Pen null vs. undefined in Plotly.restyle by plotly (@plotly ) on CodePen .
+
+
+
+
This function has comparable performance to Plotly.reactPlotly.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.
+
+
+
+Signature
+
+ Plotly.relayout(graphDiv, update)
+
+ graphDivDOM node or string id of a DOM node
+ updateobject, see below for examples {})
+
+
+
+
+
+
+
+
+// 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)
+
+
+
See the Pen Plotly.relayout by plotly (@plotly ) on CodePen .
+
+
+
+
This function has comparable performance to Plotly.reactPlotly.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.
+
+
+Signature
+
+ Plotly.update(graphDiv, data_update, layout_update, [, traceIndices])
+
+ graphDivDOM node or string id of a DOM node
+ data_updateobject, see Plotly.restyle above {})
+ layout_updateobject, see Plotly.relayout above {})
+ traceIndicesarray of integer indices into existing value of data, see Plotly.restyle above
+
+
+
+
+
+
+
+//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])
+
+
+
+
+
See the Pen Plotly.update by plotly (@plotly ) on CodePen .
+
+
+
+
+
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).
+
+
+Signature
+
+ Plotly.validate(data, layout)
+
+ dataarray of objects
+ layoutobject
+
+
+
+
+
+
+
+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.
+
+
+Signature
+
+ Plotly.makeTemplate(figure)
+
+ figure or DOM Nodewhere figure is a plot object, with {data, layout} members. If a DOM node is used
+ it must be a div element already containing a plot.
+
+
+
+
+
+
+
+var figure = {
+ data: [{
+ type: 'bar',
+ marker: {color: 'red'},
+ y: [2, 1, 3, 2],
+ }],
+ layout:{
+ title: {
+ text: 'Quarterly Earnings'
+ }
+ }
+};
+
+var template = Plotly.makeTemplate(figure);
+
+var newData = [{
+ type:'bar',
+ y:[3,2,5,8]
+}]
+
+var layout = {template:template}
+
+Plotly.newPlot(graphDiv,newData,layout)
+
+
+
+
+
+
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.
+
+
+Signature
+
+ Plotly.validateTemplate(figure, template)
+
+ figure or DOM Nodewhere figure is a plot object, with {data, layout} members.
+ templatethe template, with its own {data, layout}, to test.
+ If omitted, we will look for a template already attached as
+ the plot's layout.template attribute.
+
+
+
+
+
+
+
+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.reactPlotly.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);
+
+
+
See the Pen Plotly.addtraces by plotly (@plotly ) on CodePen .
+
+
+
+
This function has comparable performance to Plotly.reactPlotly.newPlot
+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]);
+
+
+
See the Pen Plotly.deleteTraces by plotly (@plotly ) on CodePen .
+
+
+
+
This function has comparable performance to Plotly.reactPlotly.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]);
+
+
+
See the Pen Plotly.moveTraces by plotly (@plotly ) on CodePen .
+
+
+
+
This function has comparable performance to Plotly.reactPlotly.newPlot
+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)
+
+
+
See the Pen Plotly.extendTraces by plotly (@plotly ) on CodePen .
+
+
+
+
This function has comparable performance to Plotly.reactPlotly.newPlot
+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)
+
+
+
+
This function has comparable performance to Plotly.reactPlotly.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 .
+
+
+Add dynamic behaviour to plotly graphs with
Plotly.animate.
+
+
+
+Signature
+
+
+ Plotly.animate(graphDiv, frameOrGroupNameOrFrameList, animationAttributes)
+
+ graphDivDOM node or string id of a DOM node
+ frameOrGroupNameOrFrameListA frame to be animated or an array of frames to be animated in sequence. Frames added by
+ Plotly.addFrames which have a
+ group attribute, can be animated by passing their group name here.
+ Similarly, you can reference frames by an array of strings of frame name values.
+ animationAttributesAn object, see documentation for examples.
+
+
+
+
+
+
+
+
+Plotly.newPlot('graph', [{
+ x: [1, 2, 3],
+ y: [0, 0.5, 1],
+ line: {simplify: false},
+}]);
+
+function randomize() {
+ Plotly.animate('graph', {
+ data: [{y: [Math.random(), Math.random(), Math.random()]}],
+ traces: [0],
+ layout: {}
+ }, {
+ transition: {
+ duration: 500,
+ easing: 'cubic-in-out'
+ },
+ frame: {
+ duration: 500
+ }
+ })
+}
+
+
+
See the Pen Plotly.animate by plotly (@plotly ) on CodePen .
+
+
+
+
+
+Using
purge will clear the div, and remove any Plotly plots that have been placed in it.
+
+// purge will be used on the div that you wish clear of Plotly plots
+Plotly.purge(graphDiv);
+
+
+
See the Pen Plotly.purge by plotly (@plotly ) on CodePen .
+
+
+
+
+
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
+})
+
+
+
See the Pen Plotly.toImage by plotly (@plotly ) on CodePen .
+
+
+
+
+
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'});
+
+
+
See the Pen Plotly.toImage by plotly (@plotly ) on CodePen .
+
+
+
+
+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/2019-07-03-is-plotly-free-js.md b/content/plotly_js/2019-07-03-is-plotly-free-js.md
new file mode 100644
index 00000000000..cf0259affb0
--- /dev/null
+++ b/content/plotly_js/2019-07-03-is-plotly-free-js.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](/javascript/getting-started). 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](/javascript/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](/javascript/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/content/plotly_js/3d/2017-02-24-plotly_js-3D-index.html b/content/plotly_js/3d/2017-02-24-plotly_js-3D-index.html
new file mode 100644
index 00000000000..98202789c0d
--- /dev/null
+++ b/content/plotly_js/3d/2017-02-24-plotly_js-3D-index.html
@@ -0,0 +1,27 @@
+---
+permalink: javascript/3d-charts/
+description: Plotly.js makes interactive, publication-quality graphs online. Examples of how to make 3D graphs such as 3D scatter and surface charts.
+name: 3D Charts
+layout: langindex
+language: plotly_js
+display_as: 3d_charts
+thumbnail: thumbnail/mixed.jpg
+---
+
+
+
+
+
+
+
+
+
Plotly.js 3D Charts
+
{{page.description}}
+ {% include layouts/dashplug.html %}
+
+
+
+
+ {% assign languagelist = site.posts | where:"language","plotly_js" | where:"display_as","3d_charts" | where: "layout","base" | sort: "order" %}
+ {% include posts/documentation_eg.html %}
diff --git a/content/plotly_js/3d/3d-cluster/2015-08-10-3d-point-cluster.html b/content/plotly_js/3d/3d-cluster/2015-08-10-3d-point-cluster.html
new file mode 100644
index 00000000000..6f5509abf4c
--- /dev/null
+++ b/content/plotly_js/3d/3d-cluster/2015-08-10-3d-point-cluster.html
@@ -0,0 +1,81 @@
+---
+name: 3D Point Clustering
+language: plotly_js
+suite: 3d-cluster
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/alpha_shape.csv', function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+ var data = [{
+ x: unpack(rows, 'x'),
+ y: unpack(rows, 'y'),
+ z: unpack(rows, 'z'),
+ mode: 'markers',
+ type: 'scatter3d',
+ marker: {
+ color: 'rgb(23, 190, 207)',
+ size: 2
+ }
+ },{
+ alphahull: 7,
+ opacity: 0.1,
+ type: 'mesh3d',
+ x: unpack(rows, 'x'),
+ y: unpack(rows, 'y'),
+ z: unpack(rows, 'z')
+ }];
+
+ var layout = {
+ autosize: true,
+ height: 480,
+ scene: {
+ aspectratio: {
+ x: 1,
+ y: 1,
+ z: 1
+ },
+ camera: {
+ center: {
+ x: 0,
+ y: 0,
+ z: 0
+ },
+ eye: {
+ x: 1.25,
+ y: 1.25,
+ z: 1.25
+ },
+ up: {
+ x: 0,
+ y: 0,
+ z: 1
+ }
+ },
+ xaxis: {
+ type: 'linear',
+ zeroline: false
+ },
+ yaxis: {
+ type: 'linear',
+ zeroline: false
+ },
+ zaxis: {
+ type: 'linear',
+ zeroline: false
+ }
+ },
+ title: {
+ text: '3d point clustering'
+ },
+ width: 477
+ };
+
+ Plotly.newPlot('myDiv', data, layout);
+
+});
diff --git a/content/plotly_js/3d/3d-cluster/2015-08-10-3d_point_cluster_index.html b/content/plotly_js/3d/3d-cluster/2015-08-10-3d_point_cluster_index.html
new file mode 100644
index 00000000000..9c64706ff38
--- /dev/null
+++ b/content/plotly_js/3d/3d-cluster/2015-08-10-3d_point_cluster_index.html
@@ -0,0 +1,14 @@
+---
+description: How to make a 3D Cluster Graph in JavaScript.
+display_as: 3d_charts
+language: plotly_js
+layout: base
+name: 3D Cluster Graph
+order: 7
+permalink: javascript/3d-point-clustering/
+redirect_from: javascript-graphing-library/3d-point-clustering/
+thumbnail: thumbnail/3d-clusters.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3d-cluster" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/3d/3d-cone/2018-06-12-3d-cone-plotly_js_index.html b/content/plotly_js/3d/3d-cone/2018-06-12-3d-cone-plotly_js_index.html
new file mode 100644
index 00000000000..599c4533ea1
--- /dev/null
+++ b/content/plotly_js/3d/3d-cone/2018-06-12-3d-cone-plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to make 3D cone plots in javascript.
+display_as: 3d_charts
+language: plotly_js
+layout: base
+name: 3D Cone Plots
+order: 8
+permalink: javascript/cone-plot/
+redirect_from: javascript/3d-cone/
+thumbnail: thumbnail/3dcone.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3dcone" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/3d/3d-cone/2018-06-12-basic-3d-cone.html b/content/plotly_js/3d/3d-cone/2018-06-12-basic-3d-cone.html
new file mode 100644
index 00000000000..621c8cfb7b2
--- /dev/null
+++ b/content/plotly_js/3d/3d-cone/2018-06-12-basic-3d-cone.html
@@ -0,0 +1,24 @@
+---
+name: Basic 3D Cone
+language: plotly_js
+suite: 3dcone
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [{
+ type: "cone",
+ x: [1], y: [1], z: [1],
+ u: [1], v: [1], w: [0]
+}]
+
+var layout = {
+ "scene": {
+ "camera": {
+ "eye": {x: -0.76, y: 1.8, z: 0.92}
+ }
+ }
+}
+
+Plotly.newPlot('myDiv',data,layout)
diff --git a/content/plotly_js/3d/3d-cone/2018-06-12-lighting.html b/content/plotly_js/3d/3d-cone/2018-06-12-lighting.html
new file mode 100644
index 00000000000..d65813e86fb
--- /dev/null
+++ b/content/plotly_js/3d/3d-cone/2018-06-12-lighting.html
@@ -0,0 +1,126 @@
+---
+name: 3D Cone Lighting
+language: plotly_js
+suite: 3dcone
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [{
+ type: "cone",
+ name: "base",
+ x: [1, 1, 1],
+ y: [1, 2, 3],
+ z: [1, 1, 1],
+ u: [1, 2, 3],
+ v: [1, 1, 2],
+ w: [4, 4, 1],
+ hoverinfo: "u+v+w+name",
+ showscale: false
+ },
+ {
+ type: "cone",
+ name: "opacity:0.3",
+ x: [2, 2, 2],
+ y: [1, 2, 3],
+ z: [1, 1, 1],
+ u: [1, 2, 3],
+ v: [1, 1, 2],
+ w: [4, 4, 1],
+ hoverinfo: "u+v+w+name",
+ showscale: false,
+ opacity: 0.3
+ },
+ {
+ type: "cone",
+ name: "lighting.ambient:0.3",
+ x: [3, 3, 3],
+ y: [1, 2, 3],
+ z: [1, 1, 1],
+ u: [1, 2, 3],
+ v: [1, 1, 2],
+ w: [4, 4, 1],
+ hoverinfo: "u+v+w+name",
+ showscale: false,
+ lighting: {ambient: 0.3}
+ },
+ {
+ type: "cone",
+ name: "lighting.diffuse:0.3",
+ x: [4, 4, 4],
+ y: [1, 2, 3],
+ z: [1, 1, 1],
+ u: [1, 2, 3],
+ v: [1, 1, 2],
+ w: [4, 4, 1],
+ hoverinfo: "u+v+w+name",
+ showscale: false,
+ lighting: {diffuse: 0.3}
+ },
+ {
+ type: "cone",
+ name: "lighting.specular:2",
+ x: [5, 5, 5],
+ y: [1, 2, 3],
+ z: [1, 1, 1],
+ u: [1, 2, 3],
+ v: [1, 1, 2],
+ w: [4, 4, 1],
+ hoverinfo: "u+v+w+name",
+ showscale: false,
+ lighting: {specular: 2}
+ },
+ {
+ type: "cone",
+ name: "lighting.roughness:1",
+ x: [6, 6, 6],
+ y: [1, 2, 3],
+ z: [1, 1, 1],
+ u: [1, 2, 3],
+ v: [1, 1, 2],
+ w: [4, 4, 1],
+ hoverinfo: "u+v+w+name",
+ showscale: false,
+ lighting: {roughness: 1}
+ },
+ {
+ type: "cone",
+ name: "lighting.fresnel:2",
+ x: [7, 7, 7],
+ y: [1, 2, 3],
+ z: [1, 1, 1],
+ u: [1, 2, 3],
+ v: [1, 1, 2],
+ w: [4, 4, 1],
+ hoverinfo: "u+v+w+name",
+ showscale: false,
+ lighting: {fresnel: 2}
+ },
+ {
+ type: "cone",
+ name: "lighting.position x:0,y:0,z:1e5",
+ x: [8, 8, 8],
+ y: [1, 2, 3],
+ z: [1, 1, 1],
+ u: [1, 2, 3],
+ v: [1, 1, 2],
+ w: [4, 4, 1],
+ hoverinfo: "u+v+w+name",
+ showscale: false,
+ lightposition: {x: 0, y: 0, z: 1e5}
+}]
+
+var layout = {
+ scene: {
+ aspectmode: "data",
+ camera: {
+ eye: {x: 0.05, y: -2.6, z: 2}
+ }
+ },
+ width: 500,
+ height: 500,
+ margin: {t: 0, b: 0, l: 0, r: 0}
+}
+
+Plotly.newPlot('myDiv',data,layout)
diff --git a/content/plotly_js/3d/3d-cone/2018-06-12-multiple-3d-cone.html b/content/plotly_js/3d/3d-cone/2018-06-12-multiple-3d-cone.html
new file mode 100644
index 00000000000..2feb33e8ef5
--- /dev/null
+++ b/content/plotly_js/3d/3d-cone/2018-06-12-multiple-3d-cone.html
@@ -0,0 +1,38 @@
+---
+name: Multiple 3D Cone
+language: plotly_js
+suite: 3dcone
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [{
+ type: "cone",
+ x: [1, 2, 3],
+ y: [1, 2, 3],
+ z: [1, 2, 3],
+ u: [1, 0, 0],
+ v: [0, 3, 0],
+ w: [0, 0, 2],
+ sizemode: "absolute",
+ sizeref: 2,
+ anchor: "tip",
+ colorbar: {
+ x: 0,
+ xanchor: "right",
+ side: "left"
+ }
+}]
+
+var layout = {
+ scene: {
+ domain: {x: [0, 1]},
+ camera: {
+ eye: {x: -1.57, y: 1.36, z: 0.58}
+ }
+ },
+ width: 800
+}
+
+Plotly.newPlot('myDiv', data, layout)
diff --git a/content/plotly_js/3d/3d-isosurface/2019-04-16-basic-isosurface.html b/content/plotly_js/3d/3d-isosurface/2019-04-16-basic-isosurface.html
new file mode 100644
index 00000000000..7e7e3da8b91
--- /dev/null
+++ b/content/plotly_js/3d/3d-isosurface/2019-04-16-basic-isosurface.html
@@ -0,0 +1,36 @@
+---
+name: Basic Isosurface Plot
+language: plotly_js
+suite: isosurface
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [
+ {
+ type: "isosurface",
+ x: [0,0,0,0,1,1,1,1],
+ y: [0,1,0,1,0,1,0,1],
+ z: [1,1,0,0,1,1,0,0],
+ value: [1,2,3,4,5,6,7,8],
+ isomin: 2,
+ isomax: 6,
+ colorscale: "Reds"
+ }
+];
+
+var layout = {
+ margin: {t:0, l:0, b:0},
+ scene: {
+ camera: {
+ eye: {
+ x: 1.88,
+ y: -2.12,
+ z: 0.96
+ }
+ }
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
diff --git a/content/plotly_js/3d/3d-isosurface/2019-04-16-isosurface-plotly_js_index.html b/content/plotly_js/3d/3d-isosurface/2019-04-16-isosurface-plotly_js_index.html
new file mode 100644
index 00000000000..f93e61bd781
--- /dev/null
+++ b/content/plotly_js/3d/3d-isosurface/2019-04-16-isosurface-plotly_js_index.html
@@ -0,0 +1,13 @@
+---
+description: How to make 3D isosurface plots in javascript.
+display_as: 3d_charts
+language: plotly_js
+layout: base
+name: 3D Isosurface Plots
+order: 10
+permalink: javascript/3d-isosurface-plots/
+thumbnail: thumbnail/isosurface.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","isosurface" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/3d/3d-isosurface/2019-04-16-isosurface-slices.html b/content/plotly_js/3d/3d-isosurface/2019-04-16-isosurface-slices.html
new file mode 100644
index 00000000000..35cd650780f
--- /dev/null
+++ b/content/plotly_js/3d/3d-isosurface/2019-04-16-isosurface-slices.html
@@ -0,0 +1,50 @@
+---
+name: Isosurface with Additional Slices
+language: plotly_js
+suite: isosurface
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/clebsch-cubic.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) {return parseFloat(row[key]); });
+}
+
+var data = [
+ {
+ type: "isosurface",
+ x: unpack(rows, 'x'),
+ y: unpack(rows, 'y'),
+ z: unpack(rows, 'z'),
+ value: unpack(rows, 'value'),
+ isomin: -100,
+ isomax: 100,
+ surface: {show: true, count: 1, fill: 0.8},
+ slices: {z: {
+ show: true, locations: [-0.3, 0.5]
+ }},
+ caps: {
+ x: {show: false},
+ y: {show: false},
+ z: {show: false}
+ },
+ }
+];
+
+var layout = {
+ margin: {t:0, l:0, b:0},
+ scene: {
+ camera: {
+ eye: {
+ x: 1.86,
+ y: 0.61,
+ z: 0.98
+ }
+ }
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
+});
diff --git a/content/plotly_js/3d/3d-isosurface/2019-04-16-multiple-isosurfaces-caps.html b/content/plotly_js/3d/3d-isosurface/2019-04-16-multiple-isosurfaces-caps.html
new file mode 100644
index 00000000000..cbe30342945
--- /dev/null
+++ b/content/plotly_js/3d/3d-isosurface/2019-04-16-multiple-isosurfaces-caps.html
@@ -0,0 +1,48 @@
+---
+name: Multiple Isosurfaces with Caps
+language: plotly_js
+suite: isosurface
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/clebsch-cubic.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) {return parseFloat(row[key]); });
+}
+
+var data = [
+ {
+ type: "isosurface",
+ x: unpack(rows, 'x'),
+ y: unpack(rows, 'y'),
+ z: unpack(rows, 'z'),
+ value: unpack(rows, 'value'),
+ isomin: -10,
+ isomax: 10,
+ surface: {show: true, count: 4, fill: 1, pattern: 'odd'},
+ caps: {
+ x: {show: true},
+ y: {show: true},
+ z: {show: true}
+ },
+ }
+];
+
+var layout = {
+ margin: {t:0, l:0, b:0},
+ scene: {
+ camera: {
+ eye: {
+ x: 1.86,
+ y: 0.61,
+ z: 0.98
+ }
+ }
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
+});
+
diff --git a/content/plotly_js/3d/3d-line/2015-04-09-3d-line-spiral.html b/content/plotly_js/3d/3d-line/2015-04-09-3d-line-spiral.html
new file mode 100644
index 00000000000..c00bf962050
--- /dev/null
+++ b/content/plotly_js/3d/3d-line/2015-04-09-3d-line-spiral.html
@@ -0,0 +1,37 @@
+---
+name: 3D Line Spiral Plot
+language: plotly_js
+suite: 3d-line
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+var pointCount = 3142;
+var i, r;
+
+var x = [];
+var y = [];
+var z = [];
+var c = [];
+
+for(i = 0; i < pointCount; i++)
+ {
+ r = i * (pointCount - i);
+ x.push(r * Math.cos(i / 30));
+ y.push(r * Math.sin(i / 30));
+ z.push(i);
+ c.push(i)
+ }
+
+Plotly.newPlot('myDiv', [{
+ type: 'scatter3d',
+ mode: 'lines',
+ x: x,
+ y: y,
+ z: z,
+ opacity: 0.7,
+ line: {
+ width: 10,
+ color: c,
+ colorscale: 'Viridis'}
+ }]);
\ No newline at end of file
diff --git a/content/plotly_js/3d/3d-line/2015-04-09-3d-line_plotly_js_index.html b/content/plotly_js/3d/3d-line/2015-04-09-3d-line_plotly_js_index.html
new file mode 100644
index 00000000000..0c20f58808f
--- /dev/null
+++ b/content/plotly_js/3d/3d-line/2015-04-09-3d-line_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to make 3D line plots in javascript.
+display_as: 3d_charts
+language: plotly_js
+layout: base
+name: 3D Line Plots
+order: 5
+page_type: example_index
+permalink: javascript/3d-line-plots/
+redirect_from: javascript-graphing-library/3d-line-plots/
+thumbnail: thumbnail/3d-line.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3d-line" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/3d/3d-line/2015-04-09-random-walk.html b/content/plotly_js/3d/3d-line/2015-04-09-random-walk.html
new file mode 100644
index 00000000000..824f0b2ab74
--- /dev/null
+++ b/content/plotly_js/3d/3d-line/2015-04-09-random-walk.html
@@ -0,0 +1,91 @@
+---
+name: 3D Random Walk Plot
+language: plotly_js
+suite: 3d-line
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/_3d-line-plot.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row)
+ { return row[key]; });
+ }
+
+var trace1 = {
+ x: unpack(rows, 'x1'),
+ y: unpack(rows, 'y1'),
+ z: unpack(rows, 'z1'),
+ mode: 'lines',
+ marker: {
+ color: '#1f77b4',
+ size: 12,
+ symbol: 'circle',
+ line: {
+ color: 'rgb(0,0,0)',
+ width: 0
+ }},
+ line: {
+ color: '#1f77b4',
+ width: 1
+ },
+ type: 'scatter3d'
+};
+
+var trace2 = {
+ x: unpack(rows, 'x2'),
+ y: unpack(rows, 'y2'),
+ z: unpack(rows, 'z2'),
+ mode: 'lines',
+ marker: {
+ color: '#9467bd',
+ size: 12,
+ symbol: 'circle',
+ line: {
+ color: 'rgb(0,0,0)',
+ width: 0
+ }},
+ line: {
+ color: 'rgb(44, 160, 44)',
+ width: 1
+ },
+ type: 'scatter3d'
+};
+
+var trace3 = {
+ x: unpack(rows, 'x3'),
+ y: unpack(rows, 'y3'),
+ z: unpack(rows, 'z3'),
+ mode: 'lines',
+ marker: {
+ color: '#bcbd22',
+ size: 12,
+ symbol: 'circle',
+ line: {
+ color: 'rgb(0,0,0)',
+ width: 0
+ }},
+ line: {
+ color: '#bcbd22',
+ width: 1
+ },
+ type: 'scatter3d'
+};
+
+var data = [trace1, trace2, trace3];
+var layout = {
+ title: {
+ text: '3D Line Plot'
+ },
+ autosize: false,
+ width: 500,
+ height: 500,
+ margin: {
+ l: 0,
+ r: 0,
+ b: 0,
+ t: 65
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/3d/3d-line/2015-04-09-simple-3d-line+markers.html b/content/plotly_js/3d/3d-line/2015-04-09-simple-3d-line+markers.html
new file mode 100644
index 00000000000..01fee224c88
--- /dev/null
+++ b/content/plotly_js/3d/3d-line/2015-04-09-simple-3d-line+markers.html
@@ -0,0 +1,43 @@
+---
+name: 3D Line + Markers Plot
+language: plotly_js
+suite: 3d-line
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var pointCount = 31;
+var i, r;
+
+var x = [];
+var y = [];
+var z = [];
+var c = [];
+
+for(i = 0; i < pointCount; i++)
+{
+ r = 10 * Math.cos(i / 10);
+ x.push(r * Math.cos(i));
+ y.push(r * Math.sin(i));
+ z.push(i);
+ c.push(i)
+}
+
+Plotly.newPlot('myDiv', [{
+ type: 'scatter3d',
+ mode: 'lines+markers',
+ x: x,
+ y: y,
+ z: z,
+ line: {
+ width: 6,
+ color: c,
+ colorscale: "Viridis"},
+ marker: {
+ size: 3.5,
+ color: c,
+ colorscale: "Greens",
+ cmin: -20,
+ cmax: 50
+ }},
+]);
\ No newline at end of file
diff --git a/content/plotly_js/3d/3d-line/2015-04-09-simple-3d-line-plot.html b/content/plotly_js/3d/3d-line/2015-04-09-simple-3d-line-plot.html
new file mode 100644
index 00000000000..5edbb41d93c
--- /dev/null
+++ b/content/plotly_js/3d/3d-line/2015-04-09-simple-3d-line-plot.html
@@ -0,0 +1,33 @@
+---
+name: 3D Line Plot
+language: plotly_js
+suite: 3d-line
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/3d-line1.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row)
+ { return row[key]; }); }
+
+var x = unpack(rows , 'x');
+var y = unpack(rows , 'y');
+var z = unpack(rows , 'z');
+var c = unpack(rows , 'color');
+Plotly.newPlot('myDiv', [{
+ type: 'scatter3d',
+ mode: 'lines',
+ x: x,
+ y: y,
+ z: z,
+ opacity: 1,
+ line: {
+ width: 6,
+ color: c,
+ reversescale: false
+ }
+}], {
+ height: 640
+});
+});
diff --git a/content/plotly_js/3d/3d-mesh/2016-05-30-3d-alphahull-mesh.html b/content/plotly_js/3d/3d-mesh/2016-05-30-3d-alphahull-mesh.html
new file mode 100644
index 00000000000..703cef4e249
--- /dev/null
+++ b/content/plotly_js/3d/3d-mesh/2016-05-30-3d-alphahull-mesh.html
@@ -0,0 +1,34 @@
+---
+name: 3D Mesh Plot with Alphahull
+language: plotly_js
+suite: 3d-mesh
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+// Generating random data..
+a=[]; b=[]; c=[];
+for(i=0;i<50;i++)
+ {
+ var a_ = Math.random();
+ a.push(a_);
+
+ var b_ = Math.random();
+ b.push(b_);
+
+ var c_ = Math.random();
+ c.push(c_);
+ }
+// Plotting the mesh
+var data=[
+ {
+ alphahull:5,
+ opacity:0.8,
+ color:'rgb(200,100,300)',
+ type: 'mesh3d',
+ x: a,
+ y: b,
+ z: c,
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/3d/3d-mesh/2016-05-30-3d-mesh-index.html b/content/plotly_js/3d/3d-mesh/2016-05-30-3d-mesh-index.html
new file mode 100644
index 00000000000..44c19e36759
--- /dev/null
+++ b/content/plotly_js/3d/3d-mesh/2016-05-30-3d-mesh-index.html
@@ -0,0 +1,14 @@
+---
+description: How to make 3D mesh plots in javascript.
+display_as: 3d_charts
+language: plotly_js
+layout: base
+name: 3D Mesh Plots
+order: 4
+page_type: example_index
+permalink: javascript/3d-mesh/
+thumbnail: thumbnail/3d-mesh.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3d-mesh" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/3d/3d-mesh/2016-05-30-3d-simple-mesh.html b/content/plotly_js/3d/3d-mesh/2016-05-30-3d-simple-mesh.html
new file mode 100644
index 00000000000..2f3c2af0104
--- /dev/null
+++ b/content/plotly_js/3d/3d-mesh/2016-05-30-3d-simple-mesh.html
@@ -0,0 +1,34 @@
+---
+name: Simple 3D Mesh Plot
+language: plotly_js
+suite: 3d-mesh
+order: 0
+sitemap: true
+arrangement: horizontal
+---
+
+// Generating random data..
+a=[]; b=[]; c=[];
+for(i=0;i<50;i++)
+ {
+ var a_ = Math.random();
+ a.push(a_);
+
+ var b_ = Math.random();
+ b.push(b_);
+
+ var c_ = Math.random();
+ c.push(c_);
+ }
+// Plotting the mesh
+var data=[
+ {
+ opacity:0.8,
+ color:'rgb(300,100,200)',
+ type: 'mesh3d',
+ x: a,
+ y: b,
+ z: c,
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/3d/3d-mesh/2016-06-16-cube-mesh.html b/content/plotly_js/3d/3d-mesh/2016-06-16-cube-mesh.html
new file mode 100644
index 00000000000..d1106bc9512
--- /dev/null
+++ b/content/plotly_js/3d/3d-mesh/2016-06-16-cube-mesh.html
@@ -0,0 +1,29 @@
+---
+name: 3D Mesh Cube
+language: plotly_js
+suite: 3d-mesh
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+var intensity = [0, 0.14285714285714285, 0.2857142857142857, 0.42857142857142855, 0.5714285714285714, 0.7142857142857143, 0.8571428571428571, 1];
+
+var data = [{
+ type: "mesh3d",
+ x: [0, 0, 1, 1, 0, 0, 1, 1],
+ y: [0, 1, 1, 0, 0, 1, 1, 0],
+ z: [0, 0, 0, 0, 1, 1, 1, 1],
+ i: [7, 0, 0, 0, 4, 4, 6, 6, 4, 0, 3, 2],
+ j: [3, 4, 1, 2, 5, 6, 5, 2, 0, 1, 6, 3],
+ k: [0, 7, 2, 3, 6, 7, 1, 1, 5, 5, 7, 6],
+ intensity: intensity,
+ colorscale: [
+ [0, 'rgb(255, 0, 255)'],
+ [0.5, 'rgb(0, 255, 0)'],
+ [1, 'rgb(0, 0, 255)']
+ ]
+ }
+];
+
+Plotly.newPlot('myDiv', data, {});
diff --git a/content/plotly_js/3d/3d-mesh/2016-06-16-tetrahedron.html b/content/plotly_js/3d/3d-mesh/2016-06-16-tetrahedron.html
new file mode 100644
index 00000000000..1864ec37129
--- /dev/null
+++ b/content/plotly_js/3d/3d-mesh/2016-06-16-tetrahedron.html
@@ -0,0 +1,26 @@
+---
+name: 3D Mesh Tetrahedron
+language: plotly_js
+suite: 3d-mesh
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+var data = [{
+ type: "mesh3d",
+ x: [0, 1, 2, 0],
+ y: [0, 0, 1, 2],
+ z: [0, 2, 0, 1],
+ i: [0, 0, 0, 1],
+ j: [1, 2, 3, 2],
+ k: [2, 3, 1, 3],
+ intensity: [0, 0.33, 0.66, 1],
+ colorscale: [
+ [0, 'rgb(255, 0, 0)'],
+ [0.5, 'rgb(0, 255, 0)'],
+ [1, 'rgb(0, 0, 255)']
+ ]
+ }
+];
+
+Plotly.newPlot('myDiv', data, {});
diff --git a/content/plotly_js/3d/3d-scatter/2015-04-09-3d-scatter_plotly_js_index.html b/content/plotly_js/3d/3d-scatter/2015-04-09-3d-scatter_plotly_js_index.html
new file mode 100644
index 00000000000..982d4d4f84a
--- /dev/null
+++ b/content/plotly_js/3d/3d-scatter/2015-04-09-3d-scatter_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to make 3D scatter plots in javascript.
+display_as: 3d_charts
+language: plotly_js
+layout: base
+name: 3D Scatter Plots
+order: 1
+page_type: example_index
+permalink: javascript/3d-scatter-plots/
+redirect_from: javascript-graphing-library/3d-scatter-plots/
+thumbnail: thumbnail/3d-scatter.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3d-scatter" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/3d/3d-scatter/2015-04-09-simple-3d-scatter.html b/content/plotly_js/3d/3d-scatter/2015-04-09-simple-3d-scatter.html
new file mode 100644
index 00000000000..d0655e52326
--- /dev/null
+++ b/content/plotly_js/3d/3d-scatter/2015-04-09-simple-3d-scatter.html
@@ -0,0 +1,47 @@
+---
+name: 3D Scatter Plot
+language: plotly_js
+suite: 3d-scatter
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/3d-scatter.csv', function(err, rows){
+function unpack(rows, key) {
+ return rows.map(function(row)
+ { return row[key]; });}
+
+var trace1 = {
+ x:unpack(rows, 'x1'), y: unpack(rows, 'y1'), z: unpack(rows, 'z1'),
+ mode: 'markers',
+ marker: {
+ size: 12,
+ line: {
+ color: 'rgba(217, 217, 217, 0.14)',
+ width: 0.5},
+ opacity: 0.8},
+ type: 'scatter3d'
+};
+
+var trace2 = {
+ x:unpack(rows, 'x2'), y: unpack(rows, 'y2'), z: unpack(rows, 'z2'),
+ mode: 'markers',
+ marker: {
+ color: 'rgb(127, 127, 127)',
+ size: 12,
+ symbol: 'circle',
+ line: {
+ color: 'rgb(204, 204, 204)',
+ width: 1},
+ opacity: 0.8},
+ type: 'scatter3d'};
+
+var data = [trace1, trace2];
+var layout = {margin: {
+ l: 0,
+ r: 0,
+ b: 0,
+ t: 0
+ }};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/3d/3d-streamtube/2018-07-19-3d-streamtube-plotly_js_index.html b/content/plotly_js/3d/3d-streamtube/2018-07-19-3d-streamtube-plotly_js_index.html
new file mode 100644
index 00000000000..bc80988b791
--- /dev/null
+++ b/content/plotly_js/3d/3d-streamtube/2018-07-19-3d-streamtube-plotly_js_index.html
@@ -0,0 +1,13 @@
+---
+description: How to make 3D streamtube plots in javascript.
+display_as: 3d_charts
+language: plotly_js
+layout: base
+name: 3D Streamtube Plots
+order: 9
+permalink: javascript/streamtube-plot/
+thumbnail: thumbnail/streamtube.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","streamtube" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/3d/3d-streamtube/2018-07-19-basic-streamtube.html b/content/plotly_js/3d/3d-streamtube/2018-07-19-basic-streamtube.html
new file mode 100644
index 00000000000..c74cab0c7b8
--- /dev/null
+++ b/content/plotly_js/3d/3d-streamtube/2018-07-19-basic-streamtube.html
@@ -0,0 +1,43 @@
+---
+name: Basic Streamtube Plot
+language: plotly_js
+suite: streamtube
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/streamtube-basic.csv', function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+ var data = [{
+ type: "streamtube",
+ x: unpack(rows, 'x'),
+ y: unpack(rows, 'y'),
+ z: unpack(rows, 'z'),
+ u: unpack(rows, 'u'),
+ v: unpack(rows, 'v'),
+ w: unpack(rows, 'w'),
+ sizeref: 0.5,
+ cmin: 0,
+ cmax: 3
+ }]
+
+ var layout = {
+ scene: {
+ camera: {
+ eye: {
+ x: -0.7243612458865182,
+ y: 1.9269804254717962,
+ z: 0.6704828299861716
+ }
+ }
+ }
+ }
+
+ Plotly.newPlot('myDiv', data, layout)
+
+});
diff --git a/content/plotly_js/3d/3d-streamtube/2018-07-19-intro-streamtube.html b/content/plotly_js/3d/3d-streamtube/2018-07-19-intro-streamtube.html
new file mode 100644
index 00000000000..74ed19d94ad
--- /dev/null
+++ b/content/plotly_js/3d/3d-streamtube/2018-07-19-intro-streamtube.html
@@ -0,0 +1,10 @@
+---
+name: Introduction
+language: plotly_js
+suite: streamtube
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ In streamtube plots, attributes inlcude `x`, `y`, and `z`, which set the coorindates of the vector field, and `u`, `v`, and `w`, which sets the x, y, and z components of the vector field. Additionally, you can use `starts` to determine the streamtube's starting position. Lastly, `maxdisplayed` determines the maximum segments displayed in a streamtube.
+---
diff --git a/content/plotly_js/3d/3d-streamtube/2018-07-19-starting-position.html b/content/plotly_js/3d/3d-streamtube/2018-07-19-starting-position.html
new file mode 100644
index 00000000000..3ae2ac73261
--- /dev/null
+++ b/content/plotly_js/3d/3d-streamtube/2018-07-19-starting-position.html
@@ -0,0 +1,55 @@
+---
+name: Starting Position and Segments
+language: plotly_js
+suite: streamtube
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/streamtube-wind.csv', function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return +row[key]; });
+ }
+
+ var data = [{
+ type: 'streamtube',
+ x: unpack(rows, 'x'),
+ y: unpack(rows, 'y'),
+ z: unpack(rows, 'z'),
+ u: unpack(rows, 'u'),
+ v: unpack(rows, 'v'),
+ w: unpack(rows, 'w'),
+ starts: {
+ x: Array(16).fill(80),
+ y: [20,30,40,50,20,30,40,50,20,30,40,50,20,30,40,50],
+ z: [0,0,0,0,5,5,5,5,10,10,10,10,15,15,15,15]
+ },
+ sizeref: 0.3,
+ colorscale: "Portland",
+ showscale: false,
+ maxdisplayed: 3000
+ }]
+
+ var layout = {
+ scene: {
+ aspectratio: {
+ x: 2,
+ y: 1,
+ z: 0.3
+ }
+ },
+ margin: {
+ t: 20,
+ b: 20,
+ l: 20,
+ r: 20
+ },
+ width: 600,
+ height: 400
+ }
+
+ Plotly.newPlot('myDiv', data, layout);
+
+});
diff --git a/content/plotly_js/3d/3d-surface/2015-04-09-3d-surface_plotly_js_index.html b/content/plotly_js/3d/3d-surface/2015-04-09-3d-surface_plotly_js_index.html
new file mode 100644
index 00000000000..9642491d218
--- /dev/null
+++ b/content/plotly_js/3d/3d-surface/2015-04-09-3d-surface_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to make 3D surface plots in javascript.
+display_as: 3d_charts
+language: plotly_js
+layout: base
+name: 3D Surface Plots
+order: 3
+page_type: example_index
+permalink: javascript/3d-surface-plots/
+redirect_from: javascript-graphing-library/3d-surface-plots/
+thumbnail: thumbnail/3d-surface.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3d-surface" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/3d/3d-surface/2015-04-09-elevations-3d-surface.html b/content/plotly_js/3d/3d-surface/2015-04-09-elevations-3d-surface.html
new file mode 100644
index 00000000000..9aa643ab28c
--- /dev/null
+++ b/content/plotly_js/3d/3d-surface/2015-04-09-elevations-3d-surface.html
@@ -0,0 +1,41 @@
+---
+name: Topographical 3D Surface Plot
+language: plotly_js
+suite: 3d-surface
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows){
+function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+}
+
+var z_data=[ ]
+for(i=0;i<24;i++)
+{
+ z_data.push(unpack(rows,i));
+}
+
+var data = [{
+ z: z_data,
+ type: 'surface'
+ }];
+
+var layout = {
+ title: {
+ text: 'Mt Bruno Elevation'
+ },
+ autosize: false,
+ width: 500,
+ height: 500,
+ margin: {
+ l: 65,
+ r: 50,
+ b: 65,
+ t: 90,
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/3d/3d-surface/2015-12-07-multiple-graphs-3d-surface.html b/content/plotly_js/3d/3d-surface/2015-12-07-multiple-graphs-3d-surface.html
new file mode 100644
index 00000000000..10d7a1aef2c
--- /dev/null
+++ b/content/plotly_js/3d/3d-surface/2015-12-07-multiple-graphs-3d-surface.html
@@ -0,0 +1,53 @@
+---
+name: Multiple 3D Surface Plots
+language: plotly_js
+suite: 3d-surface
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+z1 = [
+ [8.83,8.89,8.81,8.87,8.9,8.87],
+ [8.89,8.94,8.85,8.94,8.96,8.92],
+ [8.84,8.9,8.82,8.92,8.93,8.91],
+ [8.79,8.85,8.79,8.9,8.94,8.92],
+ [8.79,8.88,8.81,8.9,8.95,8.92],
+ [8.8,8.82,8.78,8.91,8.94,8.92],
+ [8.75,8.78,8.77,8.91,8.95,8.92],
+ [8.8,8.8,8.77,8.91,8.95,8.94],
+ [8.74,8.81,8.76,8.93,8.98,8.99],
+ [8.89,8.99,8.92,9.1,9.13,9.11],
+ [8.97,8.97,8.91,9.09,9.11,9.11],
+ [9.04,9.08,9.05,9.25,9.28,9.27],
+ [9,9.01,9,9.2,9.23,9.2],
+ [8.99,8.99,8.98,9.18,9.2,9.19],
+ [8.93,8.97,8.97,9.18,9.2,9.18]
+];
+
+z2 = [];
+for (var i=0;i
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/content/plotly_js/animations/2016-08-29-animations_plotly_js_index.html b/content/plotly_js/animations/2016-08-29-animations_plotly_js_index.html
new file mode 100644
index 00000000000..77c1ea97b60
--- /dev/null
+++ b/content/plotly_js/animations/2016-08-29-animations_plotly_js_index.html
@@ -0,0 +1,13 @@
+---
+name: Animations
+permalink: javascript/animations/
+description: How to animate charts in JavaScript with the animate API.
+layout: base
+thumbnail: thumbnail/animations.gif
+language: plotly_js
+page_type: example_index
+display_as: animations
+order: 1
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","animations" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
diff --git a/content/plotly_js/animations/animations-slider/2017-08-22-adding-sliders.html b/content/plotly_js/animations/animations-slider/2017-08-22-adding-sliders.html
new file mode 100644
index 00000000000..6e87af70fe2
--- /dev/null
+++ b/content/plotly_js/animations/animations-slider/2017-08-22-adding-sliders.html
@@ -0,0 +1,172 @@
+---
+name: Animating with a Slider
+plot_url: https://codepen.io/plotly/embed/KNrJQo/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: adding-sliders
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv', function (err, data) {
+ // Create a lookup table to sort and regroup the columns of data,
+ // first by year, then by continent:
+ var lookup = {};
+ function getData(year, continent) {
+ var byYear, trace;
+ if (!(byYear = lookup[year])) {;
+ byYear = lookup[year] = {};
+ }
+ // If a container for this year + continent doesn't exist yet,
+ // then create one:
+ if (!(trace = byYear[continent])) {
+ trace = byYear[continent] = {
+ x: [],
+ y: [],
+ id: [],
+ text: [],
+ marker: {size: []}
+ };
+ }
+ return trace;
+ }
+
+ // Go through each row, get the right trace, and append the data:
+ for (var i = 0; i < data.length; i++) {
+ var datum = data[i];
+ var trace = getData(datum.year, datum.continent);
+ trace.text.push(datum.country);
+ trace.id.push(datum.country);
+ trace.x.push(datum.lifeExp);
+ trace.y.push(datum.gdpPercap);
+ trace.marker.size.push(datum.pop);
+ }
+
+ // Get the group names:
+ var years = Object.keys(lookup);
+ // In this case, every year includes every continent, so we
+ // can just infer the continents from the *first* year:
+ var firstYear = lookup[years[0]];
+ var continents = Object.keys(firstYear);
+
+ // Create the main traces, one for each continent:
+ var traces = [];
+ for (i = 0; i < continents.length; i++) {
+ var data = firstYear[continents[i]];
+ // One small note. We're creating a single trace here, to which
+ // the frames will pass data for the different years. It's
+ // subtle, but to avoid data reference problems, we'll slice
+ // the arrays to ensure we never write any new data into our
+ // lookup table:
+ traces.push({
+ name: continents[i],
+ x: data.x.slice(),
+ y: data.y.slice(),
+ id: data.id.slice(),
+ text: data.text.slice(),
+ mode: 'markers',
+ marker: {
+ size: data.marker.size.slice(),
+ sizemode: 'area',
+ sizeref: 200000
+ }
+ });
+ }
+
+ // Create a frame for each year. Frames are effectively just
+ // traces, except they don't need to contain the *full* trace
+ // definition (for example, appearance). The frames just need
+ // the parts the traces that change (here, the data).
+ var frames = [];
+ for (i = 0; i < years.length; i++) {
+ frames.push({
+ name: years[i],
+ data: continents.map(function (continent) {
+ return getData(years[i], continent);
+ })
+ })
+ }
+
+ // Now create slider steps, one for each frame. The slider
+ // executes a plotly.js API command (here, Plotly.animate).
+ // In this example, we'll animate to one of the named frames
+ // created in the above loop.
+ var sliderSteps = [];
+ for (i = 0; i < years.length; i++) {
+ sliderSteps.push({
+ method: 'animate',
+ label: years[i],
+ args: [[years[i]], {
+ mode: 'immediate',
+ transition: {duration: 300},
+ frame: {duration: 300, redraw: false},
+ }]
+ });
+ }
+
+ var layout = {
+ xaxis: {
+ title: {text: 'Life Expectancy'},
+ range: [30, 85]
+ },
+ yaxis: {
+ title: {text: 'GDP per Capita'},
+ type: 'log'
+ },
+ hovermode: 'closest',
+ // We'll use updatemenus (whose functionality includes menus as
+ // well as buttons) to create a play button and a pause button.
+ // The play button works by passing `null`, which indicates that
+ // Plotly should animate all frames. The pause button works by
+ // passing `[null]`, which indicates we'd like to interrupt any
+ // currently running animations with a new list of frames. Here
+ // The new list of frames is empty, so it halts the animation.
+ updatemenus: [{
+ x: 0,
+ y: 0,
+ yanchor: 'top',
+ xanchor: 'left',
+ showactive: false,
+ direction: 'left',
+ type: 'buttons',
+ pad: {t: 87, r: 10},
+ buttons: [{
+ method: 'animate',
+ args: [null, {
+ mode: 'immediate',
+ fromcurrent: true,
+ transition: {duration: 300},
+ frame: {duration: 500, redraw: false}
+ }],
+ label: 'Play'
+ }, {
+ method: 'animate',
+ args: [[null], {
+ mode: 'immediate',
+ transition: {duration: 0},
+ frame: {duration: 0, redraw: false}
+ }],
+ label: 'Pause'
+ }]
+ }],
+ // Finally, add the slider and use `pad` to position it
+ // nicely next to the buttons.
+ sliders: [{
+ pad: {l: 130, t: 55},
+ currentvalue: {
+ visible: true,
+ prefix: 'Year:',
+ xanchor: 'right',
+ font: {size: 20, color: '#666'}
+ },
+ steps: sliderSteps
+ }]
+ };
+
+ // Create the plot:
+ Plotly.newPlot('myDiv', {
+ data: traces,
+ layout: layout,
+ frames: frames,
+ });
+});
diff --git a/content/plotly_js/animations/animations-slider/gapminder-with-frames.json b/content/plotly_js/animations/animations-slider/gapminder-with-frames.json
new file mode 100644
index 00000000000..843dc88bad5
--- /dev/null
+++ b/content/plotly_js/animations/animations-slider/gapminder-with-frames.json
@@ -0,0 +1,8705 @@
+{
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 8425333,
+ 120447,
+ 46886859,
+ 4693836,
+ 556263527.999989,
+ 2125900,
+ 372000000,
+ 82052000,
+ 17272000,
+ 5441766,
+ 1620914,
+ 86459025,
+ 607914,
+ 8865488,
+ 20947571,
+ 160000,
+ 1439529,
+ 6748378,
+ 800663,
+ 20092996,
+ 9182536,
+ 507833,
+ 41346560,
+ 22438691,
+ 4005677,
+ 1127000,
+ 7982342,
+ 3661549,
+ 8550362,
+ 21289402,
+ 26246839,
+ 1030585,
+ 4963829
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 28.801,
+ 50.939,
+ 37.484,
+ 39.417,
+ 44,
+ 60.96,
+ 37.373,
+ 37.468,
+ 44.869,
+ 45.32,
+ 65.39,
+ 63.03,
+ 43.158,
+ 50.056,
+ 47.453,
+ 55.565,
+ 55.928,
+ 48.463,
+ 42.244,
+ 36.319,
+ 36.157,
+ 37.578,
+ 43.436,
+ 47.752,
+ 39.875,
+ 60.396,
+ 57.593,
+ 45.883,
+ 58.5,
+ 50.848,
+ 40.412,
+ 43.16,
+ 32.548
+ ],
+ "y":[
+ 779.4453145,
+ 9867.084765,
+ 684.2441716,
+ 368.4692856,
+ 400.448610699994,
+ 3054.421209,
+ 546.5657493,
+ 749.6816546,
+ 3035.326002,
+ 4129.766056,
+ 4086.522128,
+ 3216.956347,
+ 1546.907807,
+ 1088.277758,
+ 1030.592226,
+ 108382.3529,
+ 4834.804067,
+ 1831.132894,
+ 786.5668575,
+ 331,
+ 545.8657229,
+ 1828.230307,
+ 684.5971438,
+ 1272.880995,
+ 6459.554823,
+ 2315.138227,
+ 1083.53203,
+ 1643.485354,
+ 1206.947913,
+ 757.7974177,
+ 605.0664917,
+ 1515.592329,
+ 781.7175761
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 1282697,
+ 6927772,
+ 8730405,
+ 2791000,
+ 7274900,
+ 3882229,
+ 9125183,
+ 4334000,
+ 4090500,
+ 42459667,
+ 69145952,
+ 7733250,
+ 9504000,
+ 147962,
+ 2952156,
+ 47666000,
+ 413834,
+ 10381988,
+ 3327728,
+ 25730551,
+ 8526050,
+ 16630000,
+ 6860147,
+ 3558137,
+ 1489518,
+ 28549870,
+ 7124673,
+ 4815000,
+ 22235677,
+ 50430000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 55.23,
+ 66.8,
+ 68,
+ 53.82,
+ 59.6,
+ 61.21,
+ 66.87,
+ 70.78,
+ 66.55,
+ 67.41,
+ 67.5,
+ 65.86,
+ 64.03,
+ 72.49,
+ 66.91,
+ 65.94,
+ 59.164,
+ 72.13,
+ 72.67,
+ 61.31,
+ 59.82,
+ 61.05,
+ 57.996,
+ 64.36,
+ 65.57,
+ 64.94,
+ 71.86,
+ 69.62,
+ 43.585,
+ 69.18
+ ],
+ "y":[
+ 1601.056136,
+ 6137.076492,
+ 8343.105127,
+ 973.5331948,
+ 2444.286648,
+ 3119.23652,
+ 6876.14025,
+ 9692.385245,
+ 6424.519071,
+ 7029.809327,
+ 7144.114393,
+ 3530.690067,
+ 5263.673816,
+ 7267.688428,
+ 5210.280328,
+ 4931.404155,
+ 2647.585601,
+ 8941.571858,
+ 10095.42172,
+ 4029.329699,
+ 3068.319867,
+ 3144.613186,
+ 3581.459448,
+ 5074.659104,
+ 4215.041741,
+ 3834.034742,
+ 8527.844662,
+ 14734.23275,
+ 1969.10098,
+ 9979.508487
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 9279525,
+ 4232095,
+ 1738315,
+ 442308,
+ 4469979,
+ 2445618,
+ 5009067,
+ 1291695,
+ 2682462,
+ 153936,
+ 14100005,
+ 854885,
+ 2977019,
+ 63149,
+ 22223309,
+ 216964,
+ 1438760,
+ 20860941,
+ 420702,
+ 284320,
+ 5581001,
+ 2664249,
+ 580653,
+ 6464046,
+ 748747,
+ 863308,
+ 1019729,
+ 4762912,
+ 2917802,
+ 3838168,
+ 1022556,
+ 516556,
+ 9939217,
+ 6446316,
+ 485831,
+ 3379468,
+ 33119096,
+ 257700,
+ 2534927,
+ 60011,
+ 2755589,
+ 2143249,
+ 2526994,
+ 14264935,
+ 8504667,
+ 290243,
+ 8322925,
+ 1219113,
+ 3647735,
+ 5824797,
+ 2672000,
+ 3080907
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 43.077,
+ 30.015,
+ 38.223,
+ 47.622,
+ 31.975,
+ 39.031,
+ 38.523,
+ 35.463,
+ 38.092,
+ 40.715,
+ 39.143,
+ 42.111,
+ 40.477,
+ 34.812,
+ 41.893,
+ 34.482,
+ 35.928,
+ 34.078,
+ 37.003,
+ 30,
+ 43.149,
+ 33.609,
+ 32.5,
+ 42.27,
+ 42.138,
+ 38.48,
+ 42.723,
+ 36.681,
+ 36.256,
+ 33.685,
+ 40.543,
+ 50.986,
+ 42.873,
+ 31.286,
+ 41.725,
+ 37.444,
+ 36.324,
+ 52.724,
+ 40,
+ 46.471,
+ 37.278,
+ 30.331,
+ 32.978,
+ 45.009,
+ 38.635,
+ 41.407,
+ 41.215,
+ 38.596,
+ 44.6,
+ 39.978,
+ 42.038,
+ 48.451
+ ],
+ "y":[
+ 2449.008185,
+ 3520.610273,
+ 1062.7522,
+ 851.2411407,
+ 543.2552413,
+ 339.2964587,
+ 1172.667655,
+ 1071.310713,
+ 1178.665927,
+ 1102.990936,
+ 780.5423257,
+ 2125.621418,
+ 1388.594732,
+ 2669.529475,
+ 1418.822445,
+ 375.6431231,
+ 328.9405571,
+ 362.1462796,
+ 4293.476475,
+ 485.2306591,
+ 911.2989371,
+ 510.1964923,
+ 299.850319,
+ 853.540919,
+ 298.8462121,
+ 575.5729961,
+ 2387.54806,
+ 1443.011715,
+ 369.1650802,
+ 452.3369807,
+ 743.1159097,
+ 1967.955707,
+ 1688.20357,
+ 468.5260381,
+ 2423.780443,
+ 761.879376,
+ 1077.281856,
+ 2718.885295,
+ 493.3238752,
+ 879.5835855,
+ 1450.356983,
+ 879.7877358,
+ 1135.749842,
+ 4725.295531,
+ 1615.991129,
+ 1148.376626,
+ 716.6500721,
+ 859.8086567,
+ 1468.475631,
+ 734.753484,
+ 1147.388831,
+ 406.8841148
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 17876956,
+ 2883315,
+ 56602560,
+ 14785584,
+ 6377619,
+ 12350771,
+ 926317,
+ 6007797,
+ 2491346,
+ 3548753,
+ 2042865,
+ 3146381,
+ 3201488,
+ 1517453,
+ 1426095,
+ 30144317,
+ 1165790,
+ 940080,
+ 1555876,
+ 8025700,
+ 2227000,
+ 662850,
+ 157553000,
+ 2252965,
+ 5439568
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 62.485,
+ 40.414,
+ 50.917,
+ 68.75,
+ 54.745,
+ 50.643,
+ 57.206,
+ 59.421,
+ 45.928,
+ 48.357,
+ 45.262,
+ 42.023,
+ 37.579,
+ 41.912,
+ 58.53,
+ 50.789,
+ 42.314,
+ 55.191,
+ 62.649,
+ 43.902,
+ 64.28,
+ 59.1,
+ 68.44,
+ 66.071,
+ 55.088
+ ],
+ "y":[
+ 5911.315053,
+ 2677.326347,
+ 2108.944355,
+ 11367.16112,
+ 3939.978789,
+ 2144.115096,
+ 2627.009471,
+ 5586.53878,
+ 1397.717137,
+ 3522.110717,
+ 3048.3029,
+ 2428.237769,
+ 1840.366939,
+ 2194.926204,
+ 2898.530881,
+ 3478.125529,
+ 3112.363948,
+ 2480.380334,
+ 1952.308701,
+ 3758.523437,
+ 3081.959785,
+ 3023.271928,
+ 13990.48208,
+ 5716.766744,
+ 7689.799761
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 8691212,
+ 1994794
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 69.12,
+ 69.39
+ ],
+ "y":[
+ 10039.59564,
+ 10556.57566
+ ]
+ }
+ ],
+ "frames":[
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 8425333,
+ 120447,
+ 46886859,
+ 4693836,
+ 556263527.999989,
+ 2125900,
+ 372000000,
+ 82052000,
+ 17272000,
+ 5441766,
+ 1620914,
+ 86459025,
+ 607914,
+ 8865488,
+ 20947571,
+ 160000,
+ 1439529,
+ 6748378,
+ 800663,
+ 20092996,
+ 9182536,
+ 507833,
+ 41346560,
+ 22438691,
+ 4005677,
+ 1127000,
+ 7982342,
+ 3661549,
+ 8550362,
+ 21289402,
+ 26246839,
+ 1030585,
+ 4963829
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 28.801,
+ 50.939,
+ 37.484,
+ 39.417,
+ 44,
+ 60.96,
+ 37.373,
+ 37.468,
+ 44.869,
+ 45.32,
+ 65.39,
+ 63.03,
+ 43.158,
+ 50.056,
+ 47.453,
+ 55.565,
+ 55.928,
+ 48.463,
+ 42.244,
+ 36.319,
+ 36.157,
+ 37.578,
+ 43.436,
+ 47.752,
+ 39.875,
+ 60.396,
+ 57.593,
+ 45.883,
+ 58.5,
+ 50.848,
+ 40.412,
+ 43.16,
+ 32.548
+ ],
+ "y":[
+ 779.4453145,
+ 9867.084765,
+ 684.2441716,
+ 368.4692856,
+ 400.448610699994,
+ 3054.421209,
+ 546.5657493,
+ 749.6816546,
+ 3035.326002,
+ 4129.766056,
+ 4086.522128,
+ 3216.956347,
+ 1546.907807,
+ 1088.277758,
+ 1030.592226,
+ 108382.3529,
+ 4834.804067,
+ 1831.132894,
+ 786.5668575,
+ 331,
+ 545.8657229,
+ 1828.230307,
+ 684.5971438,
+ 1272.880995,
+ 6459.554823,
+ 2315.138227,
+ 1083.53203,
+ 1643.485354,
+ 1206.947913,
+ 757.7974177,
+ 605.0664917,
+ 1515.592329,
+ 781.7175761
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 1282697,
+ 6927772,
+ 8730405,
+ 2791000,
+ 7274900,
+ 3882229,
+ 9125183,
+ 4334000,
+ 4090500,
+ 42459667,
+ 69145952,
+ 7733250,
+ 9504000,
+ 147962,
+ 2952156,
+ 47666000,
+ 413834,
+ 10381988,
+ 3327728,
+ 25730551,
+ 8526050,
+ 16630000,
+ 6860147,
+ 3558137,
+ 1489518,
+ 28549870,
+ 7124673,
+ 4815000,
+ 22235677,
+ 50430000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 55.23,
+ 66.8,
+ 68,
+ 53.82,
+ 59.6,
+ 61.21,
+ 66.87,
+ 70.78,
+ 66.55,
+ 67.41,
+ 67.5,
+ 65.86,
+ 64.03,
+ 72.49,
+ 66.91,
+ 65.94,
+ 59.164,
+ 72.13,
+ 72.67,
+ 61.31,
+ 59.82,
+ 61.05,
+ 57.996,
+ 64.36,
+ 65.57,
+ 64.94,
+ 71.86,
+ 69.62,
+ 43.585,
+ 69.18
+ ],
+ "y":[
+ 1601.056136,
+ 6137.076492,
+ 8343.105127,
+ 973.5331948,
+ 2444.286648,
+ 3119.23652,
+ 6876.14025,
+ 9692.385245,
+ 6424.519071,
+ 7029.809327,
+ 7144.114393,
+ 3530.690067,
+ 5263.673816,
+ 7267.688428,
+ 5210.280328,
+ 4931.404155,
+ 2647.585601,
+ 8941.571858,
+ 10095.42172,
+ 4029.329699,
+ 3068.319867,
+ 3144.613186,
+ 3581.459448,
+ 5074.659104,
+ 4215.041741,
+ 3834.034742,
+ 8527.844662,
+ 14734.23275,
+ 1969.10098,
+ 9979.508487
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 9279525,
+ 4232095,
+ 1738315,
+ 442308,
+ 4469979,
+ 2445618,
+ 5009067,
+ 1291695,
+ 2682462,
+ 153936,
+ 14100005,
+ 854885,
+ 2977019,
+ 63149,
+ 22223309,
+ 216964,
+ 1438760,
+ 20860941,
+ 420702,
+ 284320,
+ 5581001,
+ 2664249,
+ 580653,
+ 6464046,
+ 748747,
+ 863308,
+ 1019729,
+ 4762912,
+ 2917802,
+ 3838168,
+ 1022556,
+ 516556,
+ 9939217,
+ 6446316,
+ 485831,
+ 3379468,
+ 33119096,
+ 257700,
+ 2534927,
+ 60011,
+ 2755589,
+ 2143249,
+ 2526994,
+ 14264935,
+ 8504667,
+ 290243,
+ 8322925,
+ 1219113,
+ 3647735,
+ 5824797,
+ 2672000,
+ 3080907
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 43.077,
+ 30.015,
+ 38.223,
+ 47.622,
+ 31.975,
+ 39.031,
+ 38.523,
+ 35.463,
+ 38.092,
+ 40.715,
+ 39.143,
+ 42.111,
+ 40.477,
+ 34.812,
+ 41.893,
+ 34.482,
+ 35.928,
+ 34.078,
+ 37.003,
+ 30,
+ 43.149,
+ 33.609,
+ 32.5,
+ 42.27,
+ 42.138,
+ 38.48,
+ 42.723,
+ 36.681,
+ 36.256,
+ 33.685,
+ 40.543,
+ 50.986,
+ 42.873,
+ 31.286,
+ 41.725,
+ 37.444,
+ 36.324,
+ 52.724,
+ 40,
+ 46.471,
+ 37.278,
+ 30.331,
+ 32.978,
+ 45.009,
+ 38.635,
+ 41.407,
+ 41.215,
+ 38.596,
+ 44.6,
+ 39.978,
+ 42.038,
+ 48.451
+ ],
+ "y":[
+ 2449.008185,
+ 3520.610273,
+ 1062.7522,
+ 851.2411407,
+ 543.2552413,
+ 339.2964587,
+ 1172.667655,
+ 1071.310713,
+ 1178.665927,
+ 1102.990936,
+ 780.5423257,
+ 2125.621418,
+ 1388.594732,
+ 2669.529475,
+ 1418.822445,
+ 375.6431231,
+ 328.9405571,
+ 362.1462796,
+ 4293.476475,
+ 485.2306591,
+ 911.2989371,
+ 510.1964923,
+ 299.850319,
+ 853.540919,
+ 298.8462121,
+ 575.5729961,
+ 2387.54806,
+ 1443.011715,
+ 369.1650802,
+ 452.3369807,
+ 743.1159097,
+ 1967.955707,
+ 1688.20357,
+ 468.5260381,
+ 2423.780443,
+ 761.879376,
+ 1077.281856,
+ 2718.885295,
+ 493.3238752,
+ 879.5835855,
+ 1450.356983,
+ 879.7877358,
+ 1135.749842,
+ 4725.295531,
+ 1615.991129,
+ 1148.376626,
+ 716.6500721,
+ 859.8086567,
+ 1468.475631,
+ 734.753484,
+ 1147.388831,
+ 406.8841148
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 17876956,
+ 2883315,
+ 56602560,
+ 14785584,
+ 6377619,
+ 12350771,
+ 926317,
+ 6007797,
+ 2491346,
+ 3548753,
+ 2042865,
+ 3146381,
+ 3201488,
+ 1517453,
+ 1426095,
+ 30144317,
+ 1165790,
+ 940080,
+ 1555876,
+ 8025700,
+ 2227000,
+ 662850,
+ 157553000,
+ 2252965,
+ 5439568
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 62.485,
+ 40.414,
+ 50.917,
+ 68.75,
+ 54.745,
+ 50.643,
+ 57.206,
+ 59.421,
+ 45.928,
+ 48.357,
+ 45.262,
+ 42.023,
+ 37.579,
+ 41.912,
+ 58.53,
+ 50.789,
+ 42.314,
+ 55.191,
+ 62.649,
+ 43.902,
+ 64.28,
+ 59.1,
+ 68.44,
+ 66.071,
+ 55.088
+ ],
+ "y":[
+ 5911.315053,
+ 2677.326347,
+ 2108.944355,
+ 11367.16112,
+ 3939.978789,
+ 2144.115096,
+ 2627.009471,
+ 5586.53878,
+ 1397.717137,
+ 3522.110717,
+ 3048.3029,
+ 2428.237769,
+ 1840.366939,
+ 2194.926204,
+ 2898.530881,
+ 3478.125529,
+ 3112.363948,
+ 2480.380334,
+ 1952.308701,
+ 3758.523437,
+ 3081.959785,
+ 3023.271928,
+ 13990.48208,
+ 5716.766744,
+ 7689.799761
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 8691212,
+ 1994794
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 69.12,
+ 69.39
+ ],
+ "y":[
+ 10039.59564,
+ 10556.57566
+ ]
+ }
+ ],
+ "name":"1952"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 9240934,
+ 138655,
+ 51365468,
+ 5322536,
+ 637408000,
+ 2736300,
+ 409000000,
+ 90124000,
+ 19792000,
+ 6248643,
+ 1944401,
+ 91563009,
+ 746559,
+ 9411381,
+ 22611552,
+ 212846,
+ 1647412,
+ 7739235,
+ 882134,
+ 21731844,
+ 9682338,
+ 561977,
+ 46679944,
+ 26072194,
+ 4419650,
+ 1445929,
+ 9128546,
+ 4149908,
+ 10164215,
+ 25041917,
+ 28998543,
+ 1070439,
+ 5498090
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 30.332,
+ 53.832,
+ 39.348,
+ 41.366,
+ 50.54896,
+ 64.75,
+ 40.249,
+ 39.918,
+ 47.181,
+ 48.437,
+ 67.84,
+ 65.5,
+ 45.669,
+ 54.081,
+ 52.681,
+ 58.033,
+ 59.489,
+ 52.102,
+ 45.248,
+ 41.905,
+ 37.686,
+ 40.08,
+ 45.557,
+ 51.334,
+ 42.868,
+ 63.179,
+ 61.456,
+ 48.284,
+ 62.4,
+ 53.63,
+ 42.887,
+ 45.671,
+ 33.97
+ ],
+ "y":[
+ 820.8530296,
+ 11635.79945,
+ 661.6374577,
+ 434.0383364,
+ 575.9870009,
+ 3629.076457,
+ 590.061996,
+ 858.9002707,
+ 3290.257643,
+ 6229.333562,
+ 5385.278451,
+ 4317.694365,
+ 1886.080591,
+ 1571.134655,
+ 1487.593537,
+ 113523.1329,
+ 6089.786934,
+ 1810.066992,
+ 912.6626085,
+ 350,
+ 597.9363558,
+ 2242.746551,
+ 747.0835292,
+ 1547.944844,
+ 8157.591248,
+ 2843.104409,
+ 1072.546602,
+ 2117.234893,
+ 1507.86129,
+ 793.5774148,
+ 676.2854478,
+ 1827.067742,
+ 804.8304547
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 1476505,
+ 6965860,
+ 8989111,
+ 3076000,
+ 7651254,
+ 3991242,
+ 9513758,
+ 4487831,
+ 4324000,
+ 44310863,
+ 71019069,
+ 8096218,
+ 9839000,
+ 165110,
+ 2878220,
+ 49182000,
+ 442829,
+ 11026383,
+ 3491938,
+ 28235346,
+ 8817650,
+ 17829327,
+ 7271135,
+ 3844277,
+ 1533070,
+ 29841614,
+ 7363802,
+ 5126000,
+ 25670939,
+ 51430000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 59.28,
+ 67.48,
+ 69.24,
+ 58.45,
+ 66.61,
+ 64.77,
+ 69.03,
+ 71.81,
+ 67.49,
+ 68.93,
+ 69.1,
+ 67.86,
+ 66.41,
+ 73.47,
+ 68.9,
+ 67.81,
+ 61.448,
+ 72.99,
+ 73.44,
+ 65.77,
+ 61.51,
+ 64.1,
+ 61.685,
+ 67.45,
+ 67.85,
+ 66.66,
+ 72.49,
+ 70.56,
+ 48.079,
+ 70.42
+ ],
+ "y":[
+ 1942.284244,
+ 8842.59803,
+ 9714.960623,
+ 1353.989176,
+ 3008.670727,
+ 4338.231617,
+ 8256.343918,
+ 11099.65935,
+ 7545.415386,
+ 8662.834898,
+ 10187.82665,
+ 4916.299889,
+ 6040.180011,
+ 9244.001412,
+ 5599.077872,
+ 6248.656232,
+ 3682.259903,
+ 11276.19344,
+ 11653.97304,
+ 4734.253019,
+ 3774.571743,
+ 3943.370225,
+ 4981.090891,
+ 6093.26298,
+ 5862.276629,
+ 4564.80241,
+ 9911.878226,
+ 17909.48973,
+ 2218.754257,
+ 11283.17795
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 10270856,
+ 4561361,
+ 1925173,
+ 474639,
+ 4713416,
+ 2667518,
+ 5359923,
+ 1392284,
+ 2894855,
+ 170928,
+ 15577932,
+ 940458,
+ 3300000,
+ 71851,
+ 25009741,
+ 232922,
+ 1542611,
+ 22815614,
+ 434904,
+ 323150,
+ 6391288,
+ 2876726,
+ 601095,
+ 7454779,
+ 813338,
+ 975950,
+ 1201578,
+ 5181679,
+ 3221238,
+ 4241884,
+ 1076852,
+ 609816,
+ 11406350,
+ 7038035,
+ 548080,
+ 3692184,
+ 37173340,
+ 308700,
+ 2822082,
+ 61325,
+ 3054547,
+ 2295678,
+ 2780415,
+ 16151549,
+ 9753392,
+ 326741,
+ 9452826,
+ 1357445,
+ 3950849,
+ 6675501,
+ 3016000,
+ 3646340
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 45.685,
+ 31.999,
+ 40.358,
+ 49.618,
+ 34.906,
+ 40.533,
+ 40.428,
+ 37.464,
+ 39.881,
+ 42.46,
+ 40.652,
+ 45.053,
+ 42.469,
+ 37.328,
+ 44.444,
+ 35.983,
+ 38.047,
+ 36.667,
+ 38.999,
+ 32.065,
+ 44.779,
+ 34.558,
+ 33.489,
+ 44.686,
+ 45.047,
+ 39.486,
+ 45.289,
+ 38.865,
+ 37.207,
+ 35.307,
+ 42.338,
+ 58.089,
+ 45.423,
+ 33.779,
+ 45.226,
+ 38.598,
+ 37.802,
+ 55.09,
+ 41.5,
+ 48.945,
+ 39.329,
+ 31.57,
+ 34.977,
+ 47.985,
+ 39.624,
+ 43.424,
+ 42.974,
+ 41.208,
+ 47.1,
+ 42.571,
+ 44.077,
+ 50.469
+ ],
+ "y":[
+ 3013.976023,
+ 3827.940465,
+ 959.6010805,
+ 918.2325349,
+ 617.1834648,
+ 379.5646281,
+ 1313.048099,
+ 1190.844328,
+ 1308.495577,
+ 1211.148548,
+ 905.8602303,
+ 2315.056572,
+ 1500.895925,
+ 2864.969076,
+ 1458.915272,
+ 426.0964081,
+ 344.1618859,
+ 378.9041632,
+ 4976.198099,
+ 520.9267111,
+ 1043.561537,
+ 576.2670245,
+ 431.7904566,
+ 944.4383152,
+ 335.9971151,
+ 620.9699901,
+ 3448.284395,
+ 1589.20275,
+ 416.3698064,
+ 490.3821867,
+ 846.1202613,
+ 2034.037981,
+ 1642.002314,
+ 495.5868333,
+ 2621.448058,
+ 835.5234025,
+ 1100.592563,
+ 2769.451844,
+ 540.2893983,
+ 860.7369026,
+ 1567.653006,
+ 1004.484437,
+ 1258.147413,
+ 5487.104219,
+ 1770.337074,
+ 1244.708364,
+ 698.5356073,
+ 925.9083202,
+ 1395.232468,
+ 774.3710692,
+ 1311.956766,
+ 518.7642681
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 19610538,
+ 3211738,
+ 65551171,
+ 17010154,
+ 7048426,
+ 14485993,
+ 1112300,
+ 6640752,
+ 2923186,
+ 4058385,
+ 2355805,
+ 3640876,
+ 3507701,
+ 1770390,
+ 1535090,
+ 35015548,
+ 1358828,
+ 1063506,
+ 1770902,
+ 9146100,
+ 2260000,
+ 764900,
+ 171984000,
+ 2424959,
+ 6702668
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 64.399,
+ 41.89,
+ 53.285,
+ 69.96,
+ 56.074,
+ 55.118,
+ 60.026,
+ 62.325,
+ 49.828,
+ 51.356,
+ 48.57,
+ 44.142,
+ 40.696,
+ 44.665,
+ 62.61,
+ 55.19,
+ 45.432,
+ 59.201,
+ 63.196,
+ 46.263,
+ 68.54,
+ 61.8,
+ 69.49,
+ 67.044,
+ 57.907
+ ],
+ "y":[
+ 6856.856212,
+ 2127.686326,
+ 2487.365989,
+ 12489.95006,
+ 4315.622723,
+ 2323.805581,
+ 2990.010802,
+ 6092.174359,
+ 1544.402995,
+ 3780.546651,
+ 3421.523218,
+ 2617.155967,
+ 1726.887882,
+ 2220.487682,
+ 4756.525781,
+ 4131.546641,
+ 3457.415947,
+ 2961.800905,
+ 2046.154706,
+ 4245.256698,
+ 3907.156189,
+ 4100.3934,
+ 14847.12712,
+ 6150.772969,
+ 9802.466526
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 9712569,
+ 2229407
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 70.33,
+ 70.26
+ ],
+ "y":[
+ 10949.64959,
+ 12247.39532
+ ]
+ }
+ ],
+ "name":"1957"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 10267083,
+ 171863,
+ 56839289,
+ 6083619,
+ 665770000,
+ 3305200,
+ 454000000,
+ 99028000,
+ 22874000,
+ 7240260,
+ 2310904,
+ 95831757,
+ 933559,
+ 10917494,
+ 26420307,
+ 358266,
+ 1886848,
+ 8906385,
+ 1010280,
+ 23634436,
+ 10332057,
+ 628164,
+ 53100671,
+ 30325264,
+ 4943029,
+ 1750200,
+ 10421936,
+ 4834621,
+ 11918938,
+ 29263397,
+ 33796140,
+ 1133134,
+ 6120081
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 31.997,
+ 56.923,
+ 41.216,
+ 43.415,
+ 44.50136,
+ 67.65,
+ 43.605,
+ 42.518,
+ 49.325,
+ 51.457,
+ 69.39,
+ 68.73,
+ 48.126,
+ 56.656,
+ 55.292,
+ 60.47,
+ 62.094,
+ 55.737,
+ 48.251,
+ 45.108,
+ 39.393,
+ 43.165,
+ 47.67,
+ 54.757,
+ 45.914,
+ 65.798,
+ 62.192,
+ 50.305,
+ 65.2,
+ 56.061,
+ 45.363,
+ 48.127,
+ 35.18
+ ],
+ "y":[
+ 853.10071,
+ 12753.27514,
+ 686.3415538,
+ 496.9136476,
+ 487.6740183,
+ 4692.648272,
+ 658.3471509,
+ 849.2897701,
+ 4187.329802,
+ 8341.737815,
+ 7105.630706,
+ 6576.649461,
+ 2348.009158,
+ 1621.693598,
+ 1536.344387,
+ 95458.11176,
+ 5714.560611,
+ 2036.884944,
+ 1056.353958,
+ 388,
+ 652.3968593,
+ 2924.638113,
+ 803.3427418,
+ 1649.552153,
+ 11626.41975,
+ 3674.735572,
+ 1074.47196,
+ 2193.037133,
+ 1822.879028,
+ 1002.199172,
+ 772.0491602,
+ 2198.956312,
+ 825.6232006
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 1728137,
+ 7129864,
+ 9218400,
+ 3349000,
+ 8012946,
+ 4076557,
+ 9620282,
+ 4646899,
+ 4491443,
+ 47124000,
+ 73739117,
+ 8448233,
+ 10063000,
+ 182053,
+ 2830000,
+ 50843200,
+ 474528,
+ 11805689,
+ 3638919,
+ 30329617,
+ 9019800,
+ 18680721,
+ 7616060,
+ 4237384,
+ 1582962,
+ 31158061,
+ 7561588,
+ 5666000,
+ 29788695,
+ 53292000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 64.82,
+ 69.54,
+ 70.25,
+ 61.93,
+ 69.51,
+ 67.13,
+ 69.9,
+ 72.35,
+ 68.75,
+ 70.51,
+ 70.3,
+ 69.51,
+ 67.96,
+ 73.68,
+ 70.29,
+ 69.24,
+ 63.728,
+ 73.23,
+ 73.47,
+ 67.64,
+ 64.39,
+ 66.8,
+ 64.531,
+ 70.33,
+ 69.15,
+ 69.69,
+ 73.37,
+ 71.32,
+ 52.098,
+ 70.76
+ ],
+ "y":[
+ 2312.888958,
+ 10750.72111,
+ 10991.20676,
+ 1709.683679,
+ 4254.337839,
+ 5477.890018,
+ 10136.86713,
+ 13583.31351,
+ 9371.842561,
+ 10560.48553,
+ 12902.46291,
+ 6017.190733,
+ 7550.359877,
+ 10350.15906,
+ 6631.597314,
+ 8243.58234,
+ 4649.593785,
+ 12790.84956,
+ 13450.40151,
+ 5338.752143,
+ 4727.954889,
+ 4734.997586,
+ 6289.629157,
+ 7481.107598,
+ 7402.303395,
+ 5693.843879,
+ 12329.44192,
+ 20431.0927,
+ 2322.869908,
+ 12477.17707
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 11000948,
+ 4826015,
+ 2151895,
+ 512764,
+ 4919632,
+ 2961915,
+ 5793633,
+ 1523478,
+ 3150417,
+ 191689,
+ 17486434,
+ 1047924,
+ 3832408,
+ 89898,
+ 28173309,
+ 249220,
+ 1666618,
+ 25145372,
+ 455661,
+ 374020,
+ 7355248,
+ 3140003,
+ 627820,
+ 8678557,
+ 893143,
+ 1112796,
+ 1441863,
+ 5703324,
+ 3628608,
+ 4690372,
+ 1146757,
+ 701016,
+ 13056604,
+ 7788944,
+ 621392,
+ 4076008,
+ 41871351,
+ 358900,
+ 3051242,
+ 65345,
+ 3430243,
+ 2467895,
+ 3080153,
+ 18356657,
+ 11183227,
+ 370006,
+ 10863958,
+ 1528098,
+ 4286552,
+ 7688797,
+ 3421000,
+ 4277736
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 48.303,
+ 34,
+ 42.618,
+ 51.52,
+ 37.814,
+ 42.045,
+ 42.643,
+ 39.475,
+ 41.716,
+ 44.467,
+ 42.122,
+ 48.435,
+ 44.93,
+ 39.693,
+ 46.992,
+ 37.485,
+ 40.158,
+ 40.059,
+ 40.489,
+ 33.896,
+ 46.452,
+ 35.753,
+ 34.488,
+ 47.949,
+ 47.747,
+ 40.502,
+ 47.808,
+ 40.848,
+ 38.41,
+ 36.936,
+ 44.248,
+ 60.246,
+ 47.924,
+ 36.161,
+ 48.386,
+ 39.487,
+ 39.36,
+ 57.666,
+ 43,
+ 51.893,
+ 41.454,
+ 32.767,
+ 36.981,
+ 49.951,
+ 40.87,
+ 44.992,
+ 44.246,
+ 43.922,
+ 49.579,
+ 45.344,
+ 46.023,
+ 52.358
+ ],
+ "y":[
+ 2550.81688,
+ 4269.276742,
+ 949.4990641,
+ 983.6539764,
+ 722.5120206,
+ 355.2032273,
+ 1399.607441,
+ 1193.068753,
+ 1389.817618,
+ 1406.648278,
+ 896.3146335,
+ 2464.783157,
+ 1728.869428,
+ 3020.989263,
+ 1693.335853,
+ 582.8419714,
+ 380.9958433,
+ 419.4564161,
+ 6631.459222,
+ 599.650276,
+ 1190.041118,
+ 686.3736739,
+ 522.0343725,
+ 896.9663732,
+ 411.8006266,
+ 634.1951625,
+ 6757.030816,
+ 1643.38711,
+ 427.9010856,
+ 496.1743428,
+ 1055.896036,
+ 2529.067487,
+ 1566.353493,
+ 556.6863539,
+ 3173.215595,
+ 997.7661127,
+ 1150.927478,
+ 3173.72334,
+ 597.4730727,
+ 1071.551119,
+ 1654.988723,
+ 1116.639877,
+ 1369.488336,
+ 5768.729717,
+ 1959.593767,
+ 1856.182125,
+ 722.0038073,
+ 1067.53481,
+ 1660.30321,
+ 767.2717398,
+ 1452.725766,
+ 527.2721818
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 21283783,
+ 3593918,
+ 76039390,
+ 18985849,
+ 7961258,
+ 17009885,
+ 1345187,
+ 7254373,
+ 3453434,
+ 4681707,
+ 2747687,
+ 4208858,
+ 3880130,
+ 2090162,
+ 1665128,
+ 41121485,
+ 1590597,
+ 1215725,
+ 2009813,
+ 10516500,
+ 2448046,
+ 887498,
+ 186538000,
+ 2598466,
+ 8143375
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 65.142,
+ 43.428,
+ 55.665,
+ 71.3,
+ 57.924,
+ 57.863,
+ 62.842,
+ 65.246,
+ 53.459,
+ 54.64,
+ 52.307,
+ 46.954,
+ 43.59,
+ 48.041,
+ 65.61,
+ 58.299,
+ 48.632,
+ 61.817,
+ 64.361,
+ 49.096,
+ 69.62,
+ 64.9,
+ 70.21,
+ 68.253,
+ 60.77
+ ],
+ "y":[
+ 7133.166023,
+ 2180.972546,
+ 3336.585802,
+ 13462.48555,
+ 4519.094331,
+ 2492.351109,
+ 3460.937025,
+ 5180.75591,
+ 1662.137359,
+ 4086.114078,
+ 3776.803627,
+ 2750.364446,
+ 1796.589032,
+ 2291.156835,
+ 5246.107524,
+ 4581.609385,
+ 3634.364406,
+ 3536.540301,
+ 2148.027146,
+ 4957.037982,
+ 5108.34463,
+ 4997.523971,
+ 16173.14586,
+ 5603.357717,
+ 8422.974165
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 10794968,
+ 2488550
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 70.93,
+ 71.24
+ ],
+ "y":[
+ 12217.22686,
+ 13175.678
+ ]
+ }
+ ],
+ "name":"1962"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 11537966,
+ 202182,
+ 62821884,
+ 6960067,
+ 754550000,
+ 3722800,
+ 506000000,
+ 109343000,
+ 26538000,
+ 8519282,
+ 2693585,
+ 100825279,
+ 1255058,
+ 12617009,
+ 30131000,
+ 575003,
+ 2186894,
+ 10154878,
+ 1149500,
+ 25870271,
+ 11261690,
+ 714775,
+ 60641899,
+ 35356600,
+ 5618198,
+ 1977600,
+ 11737396,
+ 5680812,
+ 13648692,
+ 34024249,
+ 39463910,
+ 1142636,
+ 6740785
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 34.02,
+ 59.923,
+ 43.453,
+ 45.415,
+ 58.38112,
+ 70,
+ 47.193,
+ 45.964,
+ 52.469,
+ 54.459,
+ 70.75,
+ 71.43,
+ 51.629,
+ 59.942,
+ 57.716,
+ 64.624,
+ 63.87,
+ 59.371,
+ 51.253,
+ 49.379,
+ 41.472,
+ 46.988,
+ 49.8,
+ 56.393,
+ 49.901,
+ 67.946,
+ 64.266,
+ 53.655,
+ 67.5,
+ 58.285,
+ 47.838,
+ 51.631,
+ 36.984
+ ],
+ "y":[
+ 836.1971382,
+ 14804.6727,
+ 721.1860862,
+ 523.4323142,
+ 612.7056934,
+ 6197.962814,
+ 700.7706107,
+ 762.4317721,
+ 5906.731805,
+ 8931.459811,
+ 8393.741404,
+ 9847.788607,
+ 2741.796252,
+ 2143.540609,
+ 2029.228142,
+ 80894.88326,
+ 6006.983042,
+ 2277.742396,
+ 1226.04113,
+ 349,
+ 676.4422254,
+ 4720.942687,
+ 942.4082588,
+ 1814.12743,
+ 16903.04886,
+ 4977.41854,
+ 1135.514326,
+ 1881.923632,
+ 2643.858681,
+ 1295.46066,
+ 637.1232887,
+ 2649.715007,
+ 862.4421463
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 1984060,
+ 7376998,
+ 9556500,
+ 3585000,
+ 8310226,
+ 4174366,
+ 9835109,
+ 4838800,
+ 4605744,
+ 49569000,
+ 76368453,
+ 8716441,
+ 10223422,
+ 198676,
+ 2900100,
+ 52667100,
+ 501035,
+ 12596822,
+ 3786019,
+ 31785378,
+ 9103000,
+ 19284814,
+ 7971222,
+ 4442238,
+ 1646912,
+ 32850275,
+ 7867931,
+ 6063000,
+ 33411317,
+ 54959000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 66.22,
+ 70.14,
+ 70.94,
+ 64.79,
+ 70.42,
+ 68.5,
+ 70.38,
+ 72.96,
+ 69.83,
+ 71.55,
+ 70.8,
+ 71,
+ 69.5,
+ 73.73,
+ 71.08,
+ 71.06,
+ 67.178,
+ 73.82,
+ 74.08,
+ 69.61,
+ 66.6,
+ 66.8,
+ 66.914,
+ 70.98,
+ 69.18,
+ 71.44,
+ 74.16,
+ 72.77,
+ 54.336,
+ 71.36
+ ],
+ "y":[
+ 2760.196931,
+ 12834.6024,
+ 13149.04119,
+ 2172.352423,
+ 5577.0028,
+ 6960.297861,
+ 11399.44489,
+ 15937.21123,
+ 10921.63626,
+ 12999.91766,
+ 14745.62561,
+ 8513.097016,
+ 9326.64467,
+ 13319.89568,
+ 7655.568963,
+ 10022.40131,
+ 5907.850937,
+ 15363.25136,
+ 16361.87647,
+ 6557.152776,
+ 6361.517993,
+ 6470.866545,
+ 7991.707066,
+ 8412.902397,
+ 9405.489397,
+ 7993.512294,
+ 15258.29697,
+ 22966.14432,
+ 2826.356387,
+ 14142.85089
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 12760499,
+ 5247469,
+ 2427334,
+ 553541,
+ 5127935,
+ 3330989,
+ 6335506,
+ 1733638,
+ 3495967,
+ 217378,
+ 19941073,
+ 1179760,
+ 4744870,
+ 127617,
+ 31681188,
+ 259864,
+ 1820319,
+ 27860297,
+ 489004,
+ 439593,
+ 8490213,
+ 3451418,
+ 601287,
+ 10191512,
+ 996380,
+ 1279406,
+ 1759224,
+ 6334556,
+ 4147252,
+ 5212416,
+ 1230542,
+ 789309,
+ 14770296,
+ 8680909,
+ 706640,
+ 4534062,
+ 47287752,
+ 414024,
+ 3451079,
+ 70787,
+ 3965841,
+ 2662190,
+ 3428839,
+ 20997321,
+ 12716129,
+ 420690,
+ 12607312,
+ 1735550,
+ 4786986,
+ 8900294,
+ 3900000,
+ 4995432
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 51.407,
+ 35.985,
+ 44.885,
+ 53.298,
+ 40.697,
+ 43.548,
+ 44.799,
+ 41.478,
+ 43.601,
+ 46.472,
+ 44.056,
+ 52.04,
+ 47.35,
+ 42.074,
+ 49.293,
+ 38.987,
+ 42.189,
+ 42.115,
+ 44.598,
+ 35.857,
+ 48.072,
+ 37.197,
+ 35.492,
+ 50.654,
+ 48.492,
+ 41.536,
+ 50.227,
+ 42.881,
+ 39.487,
+ 38.487,
+ 46.289,
+ 61.557,
+ 50.335,
+ 38.113,
+ 51.159,
+ 40.118,
+ 41.04,
+ 60.542,
+ 44.1,
+ 54.425,
+ 43.563,
+ 34.113,
+ 38.977,
+ 51.927,
+ 42.858,
+ 46.633,
+ 45.757,
+ 46.769,
+ 52.053,
+ 48.051,
+ 47.768,
+ 53.995
+ ],
+ "y":[
+ 3246.991771,
+ 5522.776375,
+ 1035.831411,
+ 1214.709294,
+ 794.8265597,
+ 412.9775136,
+ 1508.453148,
+ 1136.056615,
+ 1196.810565,
+ 1876.029643,
+ 861.5932424,
+ 2677.939642,
+ 2052.050473,
+ 3020.050513,
+ 1814.880728,
+ 915.5960025,
+ 468.7949699,
+ 516.1186438,
+ 8358.761987,
+ 734.7829124,
+ 1125.69716,
+ 708.7595409,
+ 715.5806402,
+ 1056.736457,
+ 498.6390265,
+ 713.6036483,
+ 18772.75169,
+ 1634.047282,
+ 495.5147806,
+ 545.0098873,
+ 1421.145193,
+ 2475.387562,
+ 1711.04477,
+ 566.6691539,
+ 3793.694753,
+ 1054.384891,
+ 1014.514104,
+ 4021.175739,
+ 510.9637142,
+ 1384.840593,
+ 1612.404632,
+ 1206.043465,
+ 1284.73318,
+ 7114.477971,
+ 1687.997641,
+ 2613.101665,
+ 848.2186575,
+ 1477.59676,
+ 1932.360167,
+ 908.9185217,
+ 1777.077318,
+ 569.7950712
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 22934225,
+ 4040665,
+ 88049823,
+ 20819767,
+ 8858908,
+ 19764027,
+ 1588717,
+ 8139332,
+ 4049146,
+ 5432424,
+ 3232927,
+ 4690773,
+ 4318137,
+ 2500689,
+ 1861096,
+ 47995559,
+ 1865490,
+ 1405486,
+ 2287985,
+ 12132200,
+ 2648961,
+ 960155,
+ 198712000,
+ 2748579,
+ 9709552
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 65.634,
+ 45.032,
+ 57.632,
+ 72.13,
+ 60.523,
+ 59.963,
+ 65.424,
+ 68.29,
+ 56.751,
+ 56.678,
+ 55.855,
+ 50.016,
+ 46.243,
+ 50.924,
+ 67.51,
+ 60.11,
+ 51.884,
+ 64.071,
+ 64.951,
+ 51.445,
+ 71.1,
+ 65.4,
+ 70.76,
+ 68.468,
+ 63.479
+ ],
+ "y":[
+ 8052.953021,
+ 2586.886053,
+ 3429.864357,
+ 16076.58803,
+ 5106.654313,
+ 2678.729839,
+ 4161.727834,
+ 5690.268015,
+ 1653.723003,
+ 4579.074215,
+ 4358.595393,
+ 3242.531147,
+ 1452.057666,
+ 2538.269358,
+ 6124.703451,
+ 5754.733883,
+ 4643.393534,
+ 4421.009084,
+ 2299.376311,
+ 5788.09333,
+ 6929.277714,
+ 5621.368472,
+ 19530.36557,
+ 5444.61962,
+ 9541.474188
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 11872264,
+ 2728150
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 71.1,
+ 71.52
+ ],
+ "y":[
+ 14526.12465,
+ 14463.91893
+ ]
+ }
+ ],
+ "name":"1967"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 13079460,
+ 230800,
+ 70759295,
+ 7450606,
+ 862030000,
+ 4115700,
+ 567000000,
+ 121282000,
+ 30614000,
+ 10061506,
+ 3095893,
+ 107188273,
+ 1613551,
+ 14781241,
+ 33505000,
+ 841934,
+ 2680018,
+ 11441462,
+ 1320500,
+ 28466390,
+ 12412593,
+ 829050,
+ 69325921,
+ 40850141,
+ 6472756,
+ 2152400,
+ 13016733,
+ 6701172,
+ 15226039,
+ 39276153,
+ 44655014,
+ 1089572,
+ 7407075
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 36.088,
+ 63.3,
+ 45.252,
+ 40.317,
+ 63.11888,
+ 72,
+ 50.651,
+ 49.203,
+ 55.234,
+ 56.95,
+ 71.63,
+ 73.42,
+ 56.528,
+ 63.983,
+ 62.612,
+ 67.712,
+ 65.421,
+ 63.01,
+ 53.754,
+ 53.07,
+ 43.971,
+ 52.143,
+ 51.929,
+ 58.065,
+ 53.886,
+ 69.521,
+ 65.042,
+ 57.296,
+ 69.39,
+ 60.405,
+ 50.254,
+ 56.532,
+ 39.848
+ ],
+ "y":[
+ 739.9811058,
+ 18268.65839,
+ 630.2336265,
+ 421.6240257,
+ 676.9000921,
+ 8315.928145,
+ 724.032527,
+ 1111.107907,
+ 9613.818607,
+ 9576.037596,
+ 12786.93223,
+ 14778.78636,
+ 2110.856309,
+ 3701.621503,
+ 3030.87665,
+ 109347.867,
+ 7486.384341,
+ 2849.09478,
+ 1421.741975,
+ 357,
+ 674.7881296,
+ 10618.03855,
+ 1049.938981,
+ 1989.37407,
+ 24837.42865,
+ 8597.756202,
+ 1213.39553,
+ 2571.423014,
+ 4062.523897,
+ 1524.358936,
+ 699.5016441,
+ 3133.409277,
+ 1265.047031
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 2263554,
+ 7544201,
+ 9709100,
+ 3819000,
+ 8576200,
+ 4225310,
+ 9862158,
+ 4991596,
+ 4639657,
+ 51732000,
+ 78717088,
+ 8888628,
+ 10394091,
+ 209275,
+ 3024400,
+ 54365564,
+ 527678,
+ 13329874,
+ 3933004,
+ 33039545,
+ 8970450,
+ 20662648,
+ 8313288,
+ 4593433,
+ 1694510,
+ 34513161,
+ 8122293,
+ 6401400,
+ 37492953,
+ 56079000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 67.69,
+ 70.63,
+ 71.44,
+ 67.45,
+ 70.9,
+ 69.61,
+ 70.29,
+ 73.47,
+ 70.87,
+ 72.38,
+ 71,
+ 72.34,
+ 69.76,
+ 74.46,
+ 71.28,
+ 72.19,
+ 70.636,
+ 73.75,
+ 74.34,
+ 70.85,
+ 69.26,
+ 69.21,
+ 68.7,
+ 70.35,
+ 69.82,
+ 73.06,
+ 74.72,
+ 73.78,
+ 57.005,
+ 72.01
+ ],
+ "y":[
+ 3313.422188,
+ 16661.6256,
+ 16672.14356,
+ 2860.16975,
+ 6597.494398,
+ 9164.090127,
+ 13108.4536,
+ 18866.20721,
+ 14358.8759,
+ 16107.19171,
+ 18016.18027,
+ 12724.82957,
+ 10168.65611,
+ 15798.06362,
+ 9530.772896,
+ 12269.27378,
+ 7778.414017,
+ 18794.74567,
+ 18965.05551,
+ 8006.506993,
+ 9022.247417,
+ 8011.414402,
+ 10522.06749,
+ 9674.167626,
+ 12383.4862,
+ 10638.75131,
+ 17832.02464,
+ 27195.11304,
+ 3450.69638,
+ 15895.11641
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 14760787,
+ 5894858,
+ 2761407,
+ 619351,
+ 5433886,
+ 3529983,
+ 7021028,
+ 1927260,
+ 3899068,
+ 250027,
+ 23007669,
+ 1340458,
+ 6071696,
+ 178848,
+ 34807417,
+ 277603,
+ 2260187,
+ 30770372,
+ 537977,
+ 517101,
+ 9354120,
+ 3811387,
+ 625361,
+ 12044785,
+ 1116779,
+ 1482628,
+ 2183877,
+ 7082430,
+ 4730997,
+ 5828158,
+ 1332786,
+ 851334,
+ 16660670,
+ 9809596,
+ 821782,
+ 5060262,
+ 53740085,
+ 461633,
+ 3992121,
+ 76595,
+ 4588696,
+ 2879013,
+ 3840161,
+ 23935810,
+ 14597019,
+ 480105,
+ 14706593,
+ 2056351,
+ 5303507,
+ 10190285,
+ 4506497,
+ 5861135
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 54.518,
+ 37.928,
+ 47.014,
+ 56.024,
+ 43.591,
+ 44.057,
+ 47.049,
+ 43.457,
+ 45.569,
+ 48.944,
+ 45.989,
+ 54.907,
+ 49.801,
+ 44.366,
+ 51.137,
+ 40.516,
+ 44.142,
+ 43.515,
+ 48.69,
+ 38.308,
+ 49.875,
+ 38.842,
+ 36.486,
+ 53.559,
+ 49.767,
+ 42.614,
+ 52.773,
+ 44.851,
+ 41.766,
+ 39.977,
+ 48.437,
+ 62.944,
+ 52.862,
+ 40.328,
+ 53.867,
+ 40.546,
+ 42.821,
+ 64.274,
+ 44.6,
+ 56.48,
+ 45.815,
+ 35.4,
+ 40.973,
+ 53.696,
+ 45.083,
+ 49.552,
+ 47.62,
+ 49.759,
+ 55.602,
+ 51.016,
+ 50.107,
+ 55.635
+ ],
+ "y":[
+ 4182.663766,
+ 5473.288005,
+ 1085.796879,
+ 2263.611114,
+ 854.7359763,
+ 464.0995039,
+ 1684.146528,
+ 1070.013275,
+ 1104.103987,
+ 1937.577675,
+ 904.8960685,
+ 3213.152683,
+ 2378.201111,
+ 3694.212352,
+ 2024.008147,
+ 672.4122571,
+ 514.3242082,
+ 566.2439442,
+ 11401.94841,
+ 756.0868363,
+ 1178.223708,
+ 741.6662307,
+ 820.2245876,
+ 1222.359968,
+ 496.5815922,
+ 803.0054535,
+ 21011.49721,
+ 1748.562982,
+ 584.6219709,
+ 581.3688761,
+ 1586.851781,
+ 2575.484158,
+ 1930.194975,
+ 724.9178037,
+ 3746.080948,
+ 954.2092363,
+ 1698.388838,
+ 5047.658563,
+ 590.5806638,
+ 1532.985254,
+ 1597.712056,
+ 1353.759762,
+ 1254.576127,
+ 7765.962636,
+ 1659.652775,
+ 3364.836625,
+ 915.9850592,
+ 1649.660188,
+ 2753.285994,
+ 950.735869,
+ 1773.498265,
+ 799.3621758
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 24779799,
+ 4565872,
+ 100840058,
+ 22284500,
+ 9717524,
+ 22542890,
+ 1834796,
+ 8831348,
+ 4671329,
+ 6298651,
+ 3790903,
+ 5149581,
+ 4698301,
+ 2965146,
+ 1997616,
+ 55984294,
+ 2182908,
+ 1616384,
+ 2614104,
+ 13954700,
+ 2847132,
+ 975199,
+ 209896000,
+ 2829526,
+ 11515649
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 67.065,
+ 46.714,
+ 59.504,
+ 72.88,
+ 63.441,
+ 61.623,
+ 67.849,
+ 70.723,
+ 59.631,
+ 58.796,
+ 58.207,
+ 53.738,
+ 48.042,
+ 53.884,
+ 69,
+ 62.361,
+ 55.151,
+ 66.216,
+ 65.815,
+ 55.448,
+ 72.16,
+ 65.9,
+ 71.34,
+ 68.673,
+ 65.712
+ ],
+ "y":[
+ 9443.038526,
+ 2980.331339,
+ 4985.711467,
+ 18970.57086,
+ 5494.024437,
+ 3264.660041,
+ 5118.146939,
+ 5305.445256,
+ 2189.874499,
+ 5280.99471,
+ 4520.246008,
+ 4031.408271,
+ 1654.456946,
+ 2529.842345,
+ 7433.889293,
+ 6809.40669,
+ 4688.593267,
+ 5364.249663,
+ 2523.337977,
+ 5937.827283,
+ 9123.041742,
+ 6619.551419,
+ 21806.03594,
+ 5703.408898,
+ 10505.25966
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 13177000,
+ 2929100
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 71.93,
+ 71.89
+ ],
+ "y":[
+ 16788.62948,
+ 16046.03728
+ ]
+ }
+ ],
+ "name":"1972"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 14880372,
+ 297410,
+ 80428306,
+ 6978607,
+ 943455000,
+ 4583700,
+ 634000000,
+ 136725000,
+ 35480679,
+ 11882916,
+ 3495918,
+ 113872473,
+ 1937652,
+ 16325320,
+ 36436000,
+ 1140357,
+ 3115787,
+ 12845381,
+ 1528000,
+ 31528087,
+ 13933198,
+ 1004533,
+ 78152686,
+ 46850962,
+ 8128505,
+ 2325300,
+ 14116836,
+ 7932503,
+ 16785196,
+ 44148285,
+ 50533506,
+ 1261091,
+ 8403990
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 38.438,
+ 65.593,
+ 46.923,
+ 31.22,
+ 63.96736,
+ 73.6,
+ 54.208,
+ 52.702,
+ 57.702,
+ 60.413,
+ 73.06,
+ 75.38,
+ 61.134,
+ 67.159,
+ 64.766,
+ 69.343,
+ 66.099,
+ 65.256,
+ 55.491,
+ 56.059,
+ 46.748,
+ 57.367,
+ 54.043,
+ 60.06,
+ 58.69,
+ 70.795,
+ 65.949,
+ 61.195,
+ 70.59,
+ 62.494,
+ 55.764,
+ 60.765,
+ 44.175
+ ],
+ "y":[
+ 786.11336,
+ 19340.10196,
+ 659.8772322,
+ 524.9721832,
+ 741.2374699,
+ 11186.14125,
+ 813.337323,
+ 1382.702056,
+ 11888.59508,
+ 14688.23507,
+ 13306.61921,
+ 16610.37701,
+ 2852.351568,
+ 4106.301249,
+ 4657.22102,
+ 59265.47714,
+ 8659.696836,
+ 3827.921571,
+ 1647.511665,
+ 371,
+ 694.1124398,
+ 11848.34392,
+ 1175.921193,
+ 2373.204287,
+ 34167.7626,
+ 11210.08948,
+ 1348.775651,
+ 3195.484582,
+ 5596.519826,
+ 1961.224635,
+ 713.5371196,
+ 3682.831494,
+ 1829.765177
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 2509048,
+ 7568430,
+ 9821800,
+ 4086000,
+ 8797022,
+ 4318673,
+ 10161915,
+ 5088419,
+ 4738902,
+ 53165019,
+ 78160773,
+ 9308479,
+ 10637171,
+ 221823,
+ 3271900,
+ 56059245,
+ 560073,
+ 13852989,
+ 4043205,
+ 34621254,
+ 9662600,
+ 21658597,
+ 8686367,
+ 4827803,
+ 1746919,
+ 36439000,
+ 8251648,
+ 6316424,
+ 42404033,
+ 56179000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 68.93,
+ 72.17,
+ 72.8,
+ 69.86,
+ 70.81,
+ 70.64,
+ 70.71,
+ 74.69,
+ 72.52,
+ 73.83,
+ 72.5,
+ 73.68,
+ 69.95,
+ 76.11,
+ 72.03,
+ 73.48,
+ 73.066,
+ 75.24,
+ 75.37,
+ 70.67,
+ 70.41,
+ 69.46,
+ 70.3,
+ 70.45,
+ 70.97,
+ 74.39,
+ 75.44,
+ 75.39,
+ 59.507,
+ 72.76
+ ],
+ "y":[
+ 3533.00391,
+ 19749.4223,
+ 19117.97448,
+ 3528.481305,
+ 7612.240438,
+ 11305.38517,
+ 14800.16062,
+ 20422.9015,
+ 15605.42283,
+ 18292.63514,
+ 20512.92123,
+ 14195.52428,
+ 11674.83737,
+ 19654.96247,
+ 11150.98113,
+ 14255.98475,
+ 9595.929905,
+ 21209.0592,
+ 23311.34939,
+ 9508.141454,
+ 10172.48572,
+ 9356.39724,
+ 12980.66956,
+ 10922.66404,
+ 15277.03017,
+ 13236.92117,
+ 18855.72521,
+ 26982.29052,
+ 4269.122326,
+ 17428.74846
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 17152804,
+ 6162675,
+ 3168267,
+ 781472,
+ 5889574,
+ 3834415,
+ 7959865,
+ 2167533,
+ 4388260,
+ 304739,
+ 26480870,
+ 1536769,
+ 7459574,
+ 228694,
+ 38783863,
+ 192675,
+ 2512642,
+ 34617799,
+ 706367,
+ 608274,
+ 10538093,
+ 4227026,
+ 745228,
+ 14500404,
+ 1251524,
+ 1703617,
+ 2721783,
+ 8007166,
+ 5637246,
+ 6491649,
+ 1456688,
+ 913025,
+ 18396941,
+ 11127868,
+ 977026,
+ 5682086,
+ 62209173,
+ 492095,
+ 4657072,
+ 86796,
+ 5260855,
+ 3140897,
+ 4353666,
+ 27129932,
+ 17104986,
+ 551425,
+ 17129565,
+ 2308582,
+ 6005061,
+ 11457758,
+ 5216550,
+ 6642107
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 58.014,
+ 39.483,
+ 49.19,
+ 59.319,
+ 46.137,
+ 45.91,
+ 49.355,
+ 46.775,
+ 47.383,
+ 50.939,
+ 47.804,
+ 55.625,
+ 52.374,
+ 46.519,
+ 53.319,
+ 42.024,
+ 44.535,
+ 44.51,
+ 52.79,
+ 41.842,
+ 51.756,
+ 40.762,
+ 37.465,
+ 56.155,
+ 52.208,
+ 43.764,
+ 57.442,
+ 46.881,
+ 43.767,
+ 41.714,
+ 50.852,
+ 64.93,
+ 55.73,
+ 42.495,
+ 56.437,
+ 41.291,
+ 44.514,
+ 67.064,
+ 45,
+ 58.55,
+ 48.879,
+ 36.788,
+ 41.974,
+ 55.527,
+ 47.8,
+ 52.537,
+ 49.919,
+ 52.887,
+ 59.837,
+ 50.35,
+ 51.386,
+ 57.674
+ ],
+ "y":[
+ 4910.416756,
+ 3008.647355,
+ 1029.161251,
+ 3214.857818,
+ 743.3870368,
+ 556.1032651,
+ 1783.432873,
+ 1109.374338,
+ 1133.98495,
+ 1172.603047,
+ 795.757282,
+ 3259.178978,
+ 2517.736547,
+ 3081.761022,
+ 2785.493582,
+ 958.5668124,
+ 505.7538077,
+ 556.8083834,
+ 21745.57328,
+ 884.7552507,
+ 993.2239571,
+ 874.6858643,
+ 764.7259628,
+ 1267.613204,
+ 745.3695408,
+ 640.3224383,
+ 21951.21176,
+ 1544.228586,
+ 663.2236766,
+ 686.3952693,
+ 1497.492223,
+ 3710.982963,
+ 2370.619976,
+ 502.3197334,
+ 3876.485958,
+ 808.8970728,
+ 1981.951806,
+ 4319.804067,
+ 670.0806011,
+ 1737.561657,
+ 1561.769116,
+ 1348.285159,
+ 1450.992513,
+ 8028.651439,
+ 2202.988423,
+ 3781.410618,
+ 962.4922932,
+ 1532.776998,
+ 3120.876811,
+ 843.7331372,
+ 1588.688299,
+ 685.5876821
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 26983828,
+ 5079716,
+ 114313951,
+ 23796400,
+ 10599793,
+ 25094412,
+ 2108457,
+ 9537988,
+ 5302800,
+ 7278866,
+ 4282586,
+ 5703430,
+ 4908554,
+ 3055235,
+ 2156814,
+ 63759976,
+ 2554598,
+ 1839782,
+ 2984494,
+ 15990099,
+ 3080828,
+ 1039009,
+ 220239000,
+ 2873520,
+ 13503563
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 68.481,
+ 50.023,
+ 61.489,
+ 74.21,
+ 67.052,
+ 63.837,
+ 70.75,
+ 72.649,
+ 61.788,
+ 61.31,
+ 56.696,
+ 56.029,
+ 49.923,
+ 57.402,
+ 70.11,
+ 65.032,
+ 57.47,
+ 68.681,
+ 66.353,
+ 58.447,
+ 73.44,
+ 68.3,
+ 73.38,
+ 69.481,
+ 67.456
+ ],
+ "y":[
+ 10079.02674,
+ 3548.097832,
+ 6660.118654,
+ 22090.88306,
+ 4756.763836,
+ 3815.80787,
+ 5926.876967,
+ 6380.494966,
+ 2681.9889,
+ 6679.62326,
+ 5138.922374,
+ 4879.992748,
+ 1874.298931,
+ 3203.208066,
+ 6650.195573,
+ 7674.929108,
+ 5486.371089,
+ 5351.912144,
+ 3248.373311,
+ 6281.290855,
+ 9770.524921,
+ 7899.554209,
+ 24072.63213,
+ 6504.339663,
+ 13143.95095
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 14074100,
+ 3164900
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 73.49,
+ 72.22
+ ],
+ "y":[
+ 18334.19751,
+ 16233.7177
+ ]
+ }
+ ],
+ "name":"1977"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 12881816,
+ 377967,
+ 93074406,
+ 7272485,
+ 1000281000,
+ 5264500,
+ 708000000,
+ 153343000,
+ 43072751,
+ 14173318,
+ 3858421,
+ 118454974,
+ 2347031,
+ 17647518,
+ 39326000,
+ 1497494,
+ 3086876,
+ 14441916,
+ 1756032,
+ 34680442,
+ 15796314,
+ 1301048,
+ 91462088,
+ 53456774,
+ 11254672,
+ 2651869,
+ 15410151,
+ 9410494,
+ 18501390,
+ 48827160,
+ 56142181,
+ 1425876,
+ 9657618
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 39.854,
+ 69.052,
+ 50.009,
+ 50.957,
+ 65.525,
+ 75.45,
+ 56.596,
+ 56.159,
+ 59.62,
+ 62.038,
+ 74.45,
+ 77.11,
+ 63.739,
+ 69.1,
+ 67.123,
+ 71.309,
+ 66.983,
+ 68,
+ 57.489,
+ 58.056,
+ 49.594,
+ 62.728,
+ 56.158,
+ 62.082,
+ 63.012,
+ 71.76,
+ 68.757,
+ 64.59,
+ 72.16,
+ 64.597,
+ 58.816,
+ 64.406,
+ 49.113
+ ],
+ "y":[
+ 978.0114388,
+ 19211.14731,
+ 676.9818656,
+ 624.4754784,
+ 962.4213805,
+ 14560.53051,
+ 855.7235377,
+ 1516.872988,
+ 7608.334602,
+ 14517.90711,
+ 15367.0292,
+ 19384.10571,
+ 4161.415959,
+ 4106.525293,
+ 5622.942464,
+ 31354.03573,
+ 7640.519521,
+ 4920.355951,
+ 2000.603139,
+ 424,
+ 718.3730947,
+ 12954.79101,
+ 1443.429832,
+ 2603.273765,
+ 33693.17525,
+ 15169.16112,
+ 1648.079789,
+ 3761.837715,
+ 7426.354774,
+ 2393.219781,
+ 707.2357863,
+ 4336.032082,
+ 1977.55701
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 2780097,
+ 7574613,
+ 9856303,
+ 4172693,
+ 8892098,
+ 4413368,
+ 10303704,
+ 5117810,
+ 4826933,
+ 54433565,
+ 78335266,
+ 9786480,
+ 10705535,
+ 233997,
+ 3480000,
+ 56535636,
+ 562548,
+ 14310401,
+ 4114787,
+ 36227381,
+ 9859650,
+ 22356726,
+ 9032824,
+ 5048043,
+ 1861252,
+ 37983310,
+ 8325260,
+ 6468126,
+ 47328791,
+ 56339704
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 70.42,
+ 73.18,
+ 73.93,
+ 70.69,
+ 71.08,
+ 70.46,
+ 70.96,
+ 74.63,
+ 74.55,
+ 74.89,
+ 73.8,
+ 75.24,
+ 69.39,
+ 76.99,
+ 73.1,
+ 74.98,
+ 74.101,
+ 76.05,
+ 75.97,
+ 71.32,
+ 72.77,
+ 69.66,
+ 70.162,
+ 70.8,
+ 71.063,
+ 76.3,
+ 76.42,
+ 76.21,
+ 61.036,
+ 74.04
+ ],
+ "y":[
+ 3630.880722,
+ 21597.08362,
+ 20979.84589,
+ 4126.613157,
+ 8224.191647,
+ 13221.82184,
+ 15377.22855,
+ 21688.04048,
+ 18533.15761,
+ 20293.89746,
+ 22031.53274,
+ 15268.42089,
+ 12545.99066,
+ 23269.6075,
+ 12618.32141,
+ 16537.4835,
+ 11222.58762,
+ 21399.46046,
+ 26298.63531,
+ 8451.531004,
+ 11753.84291,
+ 9605.314053,
+ 15181.0927,
+ 11348.54585,
+ 17866.72175,
+ 13926.16997,
+ 20667.38125,
+ 28397.71512,
+ 4241.356344,
+ 18232.42452
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 20033753,
+ 7016384,
+ 3641603,
+ 970347,
+ 6634596,
+ 4580410,
+ 9250831,
+ 2476971,
+ 4875118,
+ 348643,
+ 30646495,
+ 1774735,
+ 9025951,
+ 305991,
+ 45681811,
+ 285483,
+ 2637297,
+ 38111756,
+ 753874,
+ 715523,
+ 11400338,
+ 4710497,
+ 825987,
+ 17661452,
+ 1411807,
+ 1956875,
+ 3344074,
+ 9171477,
+ 6502825,
+ 6998256,
+ 1622136,
+ 992040,
+ 20198730,
+ 12587223,
+ 1099010,
+ 6437188,
+ 73039376,
+ 517810,
+ 5507565,
+ 98593,
+ 6147783,
+ 3464522,
+ 5828892,
+ 31140029,
+ 20367053,
+ 649901,
+ 19844382,
+ 2644765,
+ 6734098,
+ 12939400,
+ 6100407,
+ 7636524
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 61.368,
+ 39.942,
+ 50.904,
+ 61.484,
+ 48.122,
+ 47.471,
+ 52.961,
+ 48.295,
+ 49.517,
+ 52.933,
+ 47.784,
+ 56.695,
+ 53.983,
+ 48.812,
+ 56.006,
+ 43.662,
+ 43.89,
+ 44.916,
+ 56.564,
+ 45.58,
+ 53.744,
+ 42.891,
+ 39.327,
+ 58.766,
+ 55.078,
+ 44.852,
+ 62.155,
+ 48.969,
+ 45.642,
+ 43.916,
+ 53.599,
+ 66.711,
+ 59.65,
+ 42.795,
+ 58.968,
+ 42.598,
+ 45.826,
+ 69.885,
+ 46.218,
+ 60.351,
+ 52.379,
+ 38.445,
+ 42.955,
+ 58.161,
+ 50.338,
+ 55.561,
+ 50.608,
+ 55.471,
+ 64.048,
+ 49.849,
+ 51.821,
+ 60.363
+ ],
+ "y":[
+ 5745.160213,
+ 2756.953672,
+ 1277.897616,
+ 4551.14215,
+ 807.1985855,
+ 559.603231,
+ 2367.983282,
+ 956.7529907,
+ 797.9081006,
+ 1267.100083,
+ 673.7478181,
+ 4879.507522,
+ 2602.710169,
+ 2879.468067,
+ 3503.729636,
+ 927.8253427,
+ 524.8758493,
+ 577.8607471,
+ 15113.36194,
+ 835.8096108,
+ 876.032569,
+ 857.2503577,
+ 838.1239671,
+ 1348.225791,
+ 797.2631074,
+ 572.1995694,
+ 17364.27538,
+ 1302.878658,
+ 632.8039209,
+ 618.0140641,
+ 1481.150189,
+ 3688.037739,
+ 2702.620356,
+ 462.2114149,
+ 4191.100511,
+ 909.7221354,
+ 1576.97375,
+ 5267.219353,
+ 881.5706467,
+ 1890.218117,
+ 1518.479984,
+ 1465.010784,
+ 1176.807031,
+ 8568.266228,
+ 1895.544073,
+ 3895.384018,
+ 874.2426069,
+ 1344.577953,
+ 3560.233174,
+ 682.2662268,
+ 1408.678565,
+ 788.8550411
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 29341374,
+ 5642224,
+ 128962939,
+ 25201900,
+ 11487112,
+ 27764644,
+ 2424367,
+ 9789224,
+ 5968349,
+ 8365850,
+ 4474873,
+ 6395630,
+ 5198399,
+ 3669448,
+ 2298309,
+ 71640904,
+ 2979423,
+ 2036305,
+ 3366439,
+ 18125129,
+ 3279001,
+ 1116479,
+ 232187835,
+ 2953997,
+ 15620766
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 69.942,
+ 53.859,
+ 63.336,
+ 75.76,
+ 70.565,
+ 66.653,
+ 73.45,
+ 73.717,
+ 63.727,
+ 64.342,
+ 56.604,
+ 58.137,
+ 51.461,
+ 60.909,
+ 71.21,
+ 67.405,
+ 59.298,
+ 70.472,
+ 66.874,
+ 61.406,
+ 73.75,
+ 68.832,
+ 74.65,
+ 70.805,
+ 68.557
+ ],
+ "y":[
+ 8997.897412,
+ 3156.510452,
+ 7030.835878,
+ 22898.79214,
+ 5095.665738,
+ 4397.575659,
+ 5262.734751,
+ 7316.918107,
+ 2861.092386,
+ 7213.791267,
+ 4098.344175,
+ 4820.49479,
+ 2011.159549,
+ 3121.760794,
+ 6068.05135,
+ 9611.147541,
+ 3470.338156,
+ 7009.601598,
+ 4258.503604,
+ 6434.501797,
+ 10330.98915,
+ 9119.528607,
+ 25009.55914,
+ 6920.223051,
+ 11152.41011
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 15184200,
+ 3210650
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 74.74,
+ 73.84
+ ],
+ "y":[
+ 19477.00928,
+ 17632.4104
+ ]
+ }
+ ],
+ "name":"1982"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 13867957,
+ 454612,
+ 103764241,
+ 8371791,
+ 1084035000,
+ 5584510,
+ 788000000,
+ 169276000,
+ 51889696,
+ 16543189,
+ 4203148,
+ 122091325,
+ 2820042,
+ 19067554,
+ 41622000,
+ 1891487,
+ 3089353,
+ 16331785,
+ 2015133,
+ 38028578,
+ 17917180,
+ 1593882,
+ 105186881,
+ 60017788,
+ 14619745,
+ 2794552,
+ 16495304,
+ 11242847,
+ 19757799,
+ 52910342,
+ 62826491,
+ 1691210,
+ 11219340
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 40.822,
+ 70.75,
+ 52.819,
+ 53.914,
+ 67.274,
+ 76.2,
+ 58.553,
+ 60.137,
+ 63.04,
+ 65.044,
+ 75.6,
+ 78.67,
+ 65.869,
+ 70.647,
+ 69.81,
+ 74.174,
+ 67.926,
+ 69.5,
+ 60.222,
+ 58.339,
+ 52.537,
+ 67.734,
+ 58.245,
+ 64.151,
+ 66.295,
+ 73.56,
+ 69.011,
+ 66.974,
+ 73.4,
+ 66.084,
+ 62.82,
+ 67.046,
+ 52.922
+ ],
+ "y":[
+ 852.3959448,
+ 18524.02406,
+ 751.9794035,
+ 683.8955732,
+ 1378.904018,
+ 20038.47269,
+ 976.5126756,
+ 1748.356961,
+ 6642.881371,
+ 11643.57268,
+ 17122.47986,
+ 22375.94189,
+ 4448.679912,
+ 4106.492315,
+ 8533.088805,
+ 28118.42998,
+ 5377.091329,
+ 5249.802653,
+ 2338.008304,
+ 385,
+ 775.6324501,
+ 18115.22313,
+ 1704.686583,
+ 2189.634995,
+ 21198.26136,
+ 18861.53081,
+ 1876.766827,
+ 3116.774285,
+ 11054.56175,
+ 2982.653773,
+ 820.7994449,
+ 5107.197384,
+ 1971.741538
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 3075321,
+ 7578903,
+ 9870200,
+ 4338977,
+ 8971958,
+ 4484310,
+ 10311597,
+ 5127024,
+ 4931729,
+ 55630100,
+ 77718298,
+ 9974490,
+ 10612740,
+ 244676,
+ 3539900,
+ 56729703,
+ 569473,
+ 14665278,
+ 4186147,
+ 37740710,
+ 9915289,
+ 22686371,
+ 9230783,
+ 5199318,
+ 1945870,
+ 38880702,
+ 8421403,
+ 6649942,
+ 52881328,
+ 56981620
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 72,
+ 74.94,
+ 75.35,
+ 71.14,
+ 71.34,
+ 71.52,
+ 71.58,
+ 74.8,
+ 74.83,
+ 76.34,
+ 74.847,
+ 76.67,
+ 69.58,
+ 77.23,
+ 74.36,
+ 76.42,
+ 74.865,
+ 76.83,
+ 75.89,
+ 70.98,
+ 74.06,
+ 69.53,
+ 71.218,
+ 71.08,
+ 72.25,
+ 76.9,
+ 77.19,
+ 77.41,
+ 63.108,
+ 75.007
+ ],
+ "y":[
+ 3738.932735,
+ 23687.82607,
+ 22525.56308,
+ 4314.114757,
+ 8239.854824,
+ 13822.58394,
+ 16310.4434,
+ 25116.17581,
+ 21141.01223,
+ 22066.44214,
+ 24639.18566,
+ 16120.52839,
+ 12986.47998,
+ 26923.20628,
+ 13872.86652,
+ 19207.23482,
+ 11732.51017,
+ 23651.32361,
+ 31540.9748,
+ 9082.351172,
+ 13039.30876,
+ 9696.273295,
+ 15870.87851,
+ 12037.26758,
+ 18678.53492,
+ 15764.98313,
+ 23586.92927,
+ 30281.70459,
+ 5089.043686,
+ 21664.78767
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 23254956,
+ 7874230,
+ 4243788,
+ 1151184,
+ 7586551,
+ 5126023,
+ 10780667,
+ 2840009,
+ 5498955,
+ 395114,
+ 35481645,
+ 2064095,
+ 10761098,
+ 311025,
+ 52799062,
+ 341244,
+ 2915959,
+ 42999530,
+ 880397,
+ 848406,
+ 14168101,
+ 5650262,
+ 927524,
+ 21198082,
+ 1599200,
+ 2269414,
+ 3799845,
+ 10568642,
+ 7824747,
+ 7634008,
+ 1841240,
+ 1042663,
+ 22987397,
+ 12891952,
+ 1278184,
+ 7332638,
+ 81551520,
+ 562035,
+ 6349365,
+ 110812,
+ 7171347,
+ 3868905,
+ 6921858,
+ 35933379,
+ 24725960,
+ 779348,
+ 23040630,
+ 3154264,
+ 7724976,
+ 15283050,
+ 7272406,
+ 9216418
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 65.799,
+ 39.906,
+ 52.337,
+ 63.622,
+ 49.557,
+ 48.211,
+ 54.985,
+ 50.485,
+ 51.051,
+ 54.926,
+ 47.412,
+ 57.47,
+ 54.655,
+ 50.04,
+ 59.797,
+ 45.664,
+ 46.453,
+ 46.684,
+ 60.19,
+ 49.265,
+ 55.729,
+ 45.552,
+ 41.245,
+ 59.339,
+ 57.18,
+ 46.027,
+ 66.234,
+ 49.35,
+ 47.457,
+ 46.364,
+ 56.145,
+ 68.74,
+ 62.677,
+ 42.861,
+ 60.835,
+ 44.555,
+ 46.886,
+ 71.913,
+ 44.02,
+ 61.728,
+ 55.769,
+ 40.006,
+ 44.501,
+ 60.834,
+ 51.744,
+ 57.678,
+ 51.535,
+ 56.941,
+ 66.894,
+ 51.509,
+ 50.821,
+ 62.351
+ ],
+ "y":[
+ 5681.358539,
+ 2430.208311,
+ 1225.85601,
+ 6205.88385,
+ 912.0631417,
+ 621.8188189,
+ 2602.664206,
+ 844.8763504,
+ 952.386129,
+ 1315.980812,
+ 672.774812,
+ 4201.194937,
+ 2156.956069,
+ 2880.102568,
+ 3885.46071,
+ 966.8968149,
+ 521.1341333,
+ 573.7413142,
+ 11864.40844,
+ 611.6588611,
+ 847.0061135,
+ 805.5724718,
+ 736.4153921,
+ 1361.936856,
+ 773.9932141,
+ 506.1138573,
+ 11770.5898,
+ 1155.441948,
+ 635.5173634,
+ 684.1715576,
+ 1421.603576,
+ 4783.586903,
+ 2755.046991,
+ 389.8761846,
+ 3693.731337,
+ 668.3000228,
+ 1385.029563,
+ 5303.377488,
+ 847.991217,
+ 1516.525457,
+ 1441.72072,
+ 1294.447788,
+ 1093.244963,
+ 7825.823398,
+ 1507.819159,
+ 3984.839812,
+ 831.8220794,
+ 1202.201361,
+ 3810.419296,
+ 617.7244065,
+ 1213.315116,
+ 706.1573059
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 31620918,
+ 6156369,
+ 142938076,
+ 26549700,
+ 12463354,
+ 30964245,
+ 2799811,
+ 10239839,
+ 6655297,
+ 9545158,
+ 4842194,
+ 7326406,
+ 5756203,
+ 4372203,
+ 2326606,
+ 80122492,
+ 3344353,
+ 2253639,
+ 3886512,
+ 20195924,
+ 3444468,
+ 1191336,
+ 242803533,
+ 3045153,
+ 17910182
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 70.774,
+ 57.251,
+ 65.205,
+ 76.86,
+ 72.492,
+ 67.768,
+ 74.752,
+ 74.174,
+ 66.046,
+ 67.231,
+ 63.154,
+ 60.782,
+ 53.636,
+ 64.492,
+ 71.77,
+ 69.498,
+ 62.008,
+ 71.523,
+ 67.378,
+ 64.134,
+ 74.63,
+ 69.582,
+ 75.02,
+ 71.918,
+ 70.19
+ ],
+ "y":[
+ 9139.671389,
+ 2753.69149,
+ 7807.095818,
+ 26626.51503,
+ 5547.063754,
+ 4903.2191,
+ 5629.915318,
+ 7532.924763,
+ 2899.842175,
+ 6481.776993,
+ 4140.442097,
+ 4246.485974,
+ 1823.015995,
+ 3023.096699,
+ 6351.237495,
+ 8688.156003,
+ 2955.984375,
+ 7034.779161,
+ 3998.875695,
+ 6360.943444,
+ 12281.34191,
+ 7388.597823,
+ 29884.35041,
+ 7452.398969,
+ 9883.584648
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 16257249,
+ 3317166
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 76.32,
+ 74.32
+ ],
+ "y":[
+ 21888.88903,
+ 19007.19129
+ ]
+ }
+ ],
+ "name":"1987"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 16317921,
+ 529491,
+ 113704579,
+ 10150094,
+ 1164970000,
+ 5829696,
+ 872000000,
+ 184816000,
+ 60397973,
+ 17861905,
+ 4936550,
+ 124329269,
+ 3867409,
+ 20711375,
+ 43805450,
+ 1418095,
+ 3219994,
+ 18319502,
+ 2312802,
+ 40546538,
+ 20326209,
+ 1915208,
+ 120065004,
+ 67185766,
+ 16945857,
+ 3235865,
+ 17587060,
+ 13219062,
+ 20686918,
+ 56667095,
+ 69940728,
+ 2104779,
+ 13367997
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 41.674,
+ 72.601,
+ 56.018,
+ 55.803,
+ 68.69,
+ 77.601,
+ 60.223,
+ 62.681,
+ 65.742,
+ 59.461,
+ 76.93,
+ 79.36,
+ 68.015,
+ 69.978,
+ 72.244,
+ 75.19,
+ 69.292,
+ 70.693,
+ 61.271,
+ 59.32,
+ 55.727,
+ 71.197,
+ 60.838,
+ 66.458,
+ 68.768,
+ 75.788,
+ 70.379,
+ 69.249,
+ 74.26,
+ 67.298,
+ 67.662,
+ 69.718,
+ 55.599
+ ],
+ "y":[
+ 649.3413952,
+ 19035.57917,
+ 837.8101643,
+ 682.3031755,
+ 1655.784158,
+ 24757.60301,
+ 1164.406809,
+ 2383.140898,
+ 7235.653188,
+ 3745.640687,
+ 18051.52254,
+ 26824.89511,
+ 3431.593647,
+ 3726.063507,
+ 12104.27872,
+ 34932.91959,
+ 6890.806854,
+ 7277.912802,
+ 1785.402016,
+ 347,
+ 897.7403604,
+ 18616.70691,
+ 1971.829464,
+ 2279.324017,
+ 24841.61777,
+ 24769.8912,
+ 2153.739222,
+ 3340.542768,
+ 15215.6579,
+ 4616.896545,
+ 989.0231487,
+ 6017.654756,
+ 1879.496673
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 3326498,
+ 7914969,
+ 10045622,
+ 4256013,
+ 8658506,
+ 4494013,
+ 10315702,
+ 5171393,
+ 5041039,
+ 57374179,
+ 80597764,
+ 10325429,
+ 10348684,
+ 259012,
+ 3557761,
+ 56840847,
+ 621621,
+ 15174244,
+ 4286357,
+ 38370697,
+ 9927680,
+ 22797027,
+ 9826397,
+ 5302888,
+ 1999210,
+ 39549438,
+ 8718867,
+ 6995447,
+ 58179144,
+ 57866349
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 71.581,
+ 76.04,
+ 76.46,
+ 72.178,
+ 71.19,
+ 72.527,
+ 72.4,
+ 75.33,
+ 75.7,
+ 77.46,
+ 76.07,
+ 77.03,
+ 69.17,
+ 78.77,
+ 75.467,
+ 77.44,
+ 75.435,
+ 77.42,
+ 77.32,
+ 70.99,
+ 74.86,
+ 69.36,
+ 71.659,
+ 71.38,
+ 73.64,
+ 77.57,
+ 78.16,
+ 78.03,
+ 66.146,
+ 76.42
+ ],
+ "y":[
+ 2497.437901,
+ 27042.01868,
+ 25575.57069,
+ 2546.781445,
+ 6302.623438,
+ 8447.794873,
+ 14297.02122,
+ 26406.73985,
+ 20647.16499,
+ 24703.79615,
+ 26505.30317,
+ 17541.49634,
+ 10535.62855,
+ 25144.39201,
+ 17558.81555,
+ 22013.64486,
+ 7003.339037,
+ 26790.94961,
+ 33965.66115,
+ 7738.881247,
+ 16207.26663,
+ 6598.409903,
+ 9325.068238,
+ 9498.467723,
+ 14214.71681,
+ 18603.06452,
+ 23880.01683,
+ 31871.5303,
+ 5678.348271,
+ 22705.09254
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 26298373,
+ 8735988,
+ 4981671,
+ 1342614,
+ 8878303,
+ 5809236,
+ 12467171,
+ 3265124,
+ 6429417,
+ 454429,
+ 41672143,
+ 2409073,
+ 12772596,
+ 384156,
+ 59402198,
+ 387838,
+ 3668440,
+ 52088559,
+ 985739,
+ 1025384,
+ 16278738,
+ 6990574,
+ 1050938,
+ 25020539,
+ 1803195,
+ 1912974,
+ 4364501,
+ 12210395,
+ 10014249,
+ 8416215,
+ 2119465,
+ 1096202,
+ 25798239,
+ 13160731,
+ 1554253,
+ 8392818,
+ 93364244,
+ 622191,
+ 7290203,
+ 125911,
+ 8307920,
+ 4260884,
+ 6099799,
+ 39964159,
+ 28227588,
+ 962344,
+ 26605473,
+ 3747553,
+ 8523077,
+ 18252190,
+ 8381163,
+ 10704340
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 67.744,
+ 40.647,
+ 53.919,
+ 62.745,
+ 50.26,
+ 44.736,
+ 54.314,
+ 49.396,
+ 51.724,
+ 57.939,
+ 45.548,
+ 56.433,
+ 52.044,
+ 51.604,
+ 63.674,
+ 47.545,
+ 49.991,
+ 48.091,
+ 61.366,
+ 52.644,
+ 57.501,
+ 48.576,
+ 43.266,
+ 59.285,
+ 59.685,
+ 40.802,
+ 68.755,
+ 52.214,
+ 49.42,
+ 48.388,
+ 58.333,
+ 69.745,
+ 65.393,
+ 44.284,
+ 61.999,
+ 47.391,
+ 47.472,
+ 73.615,
+ 23.599,
+ 62.742,
+ 58.196,
+ 38.333,
+ 39.658,
+ 61.888,
+ 53.556,
+ 58.474,
+ 50.44,
+ 58.061,
+ 70.001,
+ 48.825,
+ 46.1,
+ 60.377
+ ],
+ "y":[
+ 5023.216647,
+ 2627.845685,
+ 1191.207681,
+ 7954.111645,
+ 931.7527731,
+ 631.6998778,
+ 1793.163278,
+ 747.9055252,
+ 1058.0643,
+ 1246.90737,
+ 457.7191807,
+ 4016.239529,
+ 1648.073791,
+ 2377.156192,
+ 3794.755195,
+ 1132.055034,
+ 582.8585102,
+ 421.3534653,
+ 13522.15752,
+ 665.6244126,
+ 925.060154,
+ 794.3484384,
+ 745.5398706,
+ 1341.921721,
+ 977.4862725,
+ 636.6229191,
+ 9640.138501,
+ 1040.67619,
+ 563.2000145,
+ 739.014375,
+ 1361.369784,
+ 6058.253846,
+ 2948.047252,
+ 410.8968239,
+ 3804.537999,
+ 581.182725,
+ 1619.848217,
+ 6101.255823,
+ 737.0685949,
+ 1428.777814,
+ 1367.899369,
+ 1068.696278,
+ 926.9602964,
+ 7225.069258,
+ 1492.197043,
+ 3553.0224,
+ 825.682454,
+ 1034.298904,
+ 4332.720164,
+ 644.1707969,
+ 1210.884633,
+ 693.4207856
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 33958947,
+ 6893451,
+ 155975974,
+ 28523502,
+ 13572994,
+ 34202721,
+ 3173216,
+ 10723260,
+ 7351181,
+ 10748394,
+ 5274649,
+ 8486949,
+ 6326682,
+ 5077347,
+ 2378618,
+ 88111030,
+ 4017939,
+ 2484997,
+ 4483945,
+ 22430449,
+ 3585176,
+ 1183669,
+ 256894189,
+ 3149262,
+ 20265563
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 71.868,
+ 59.957,
+ 67.057,
+ 77.95,
+ 74.126,
+ 68.421,
+ 75.713,
+ 74.414,
+ 68.457,
+ 69.613,
+ 66.798,
+ 63.373,
+ 55.089,
+ 66.399,
+ 71.766,
+ 71.455,
+ 65.843,
+ 72.462,
+ 68.225,
+ 66.458,
+ 73.911,
+ 69.862,
+ 76.09,
+ 72.752,
+ 71.15
+ ],
+ "y":[
+ 9308.41871,
+ 2961.699694,
+ 6950.283021,
+ 26342.88426,
+ 7596.125964,
+ 5444.648617,
+ 6160.416317,
+ 5592.843963,
+ 3044.214214,
+ 7103.702595,
+ 4444.2317,
+ 4439.45084,
+ 1456.309517,
+ 3081.694603,
+ 7404.923685,
+ 9472.384295,
+ 2170.151724,
+ 6618.74305,
+ 4196.411078,
+ 4446.380924,
+ 14641.58711,
+ 7370.990932,
+ 32003.93224,
+ 8137.004775,
+ 10733.92631
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 17481977,
+ 3437674
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 77.56,
+ 76.33
+ ],
+ "y":[
+ 23424.76683,
+ 18363.32494
+ ]
+ }
+ ],
+ "name":"1992"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 22227415,
+ 598561,
+ 123315288,
+ 11782962,
+ 1230075000,
+ 6495918,
+ 959000000,
+ 199278000,
+ 63327987,
+ 20775703,
+ 5531387,
+ 125956499,
+ 4526235,
+ 21585105,
+ 46173816,
+ 1765345,
+ 3430388,
+ 20476091,
+ 2494803,
+ 43247867,
+ 23001113,
+ 2283635,
+ 135564834,
+ 75012988,
+ 21229759,
+ 3802309,
+ 18698655,
+ 15081016,
+ 21628605,
+ 60216677,
+ 76048996,
+ 2826046,
+ 15826497
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 41.763,
+ 73.925,
+ 59.412,
+ 56.534,
+ 70.426,
+ 80,
+ 61.765,
+ 66.041,
+ 68.042,
+ 58.811,
+ 78.269,
+ 80.69,
+ 69.772,
+ 67.727,
+ 74.647,
+ 76.156,
+ 70.265,
+ 71.938,
+ 63.625,
+ 60.328,
+ 59.426,
+ 72.499,
+ 61.818,
+ 68.564,
+ 70.533,
+ 77.158,
+ 70.457,
+ 71.527,
+ 75.25,
+ 67.521,
+ 70.672,
+ 71.096,
+ 58.02
+ ],
+ "y":[
+ 635.341351,
+ 20292.01679,
+ 972.7700352,
+ 734.28517,
+ 2289.234136,
+ 28377.63219,
+ 1458.817442,
+ 3119.335603,
+ 8263.590301,
+ 3076.239795,
+ 20896.60924,
+ 28816.58499,
+ 3645.379572,
+ 1690.756814,
+ 15993.52796,
+ 40300.61996,
+ 8754.96385,
+ 10132.90964,
+ 1902.2521,
+ 415,
+ 1010.892138,
+ 19702.05581,
+ 2049.350521,
+ 2536.534925,
+ 20586.69019,
+ 33519.4766,
+ 2664.477257,
+ 4014.238972,
+ 20206.82098,
+ 5852.625497,
+ 1385.896769,
+ 7110.667619,
+ 2117.484526
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 3428038,
+ 8069876,
+ 10199787,
+ 3607000,
+ 8066057,
+ 4444595,
+ 10300707,
+ 5283663,
+ 5134406,
+ 58623428,
+ 82011073,
+ 10502372,
+ 10244684,
+ 271192,
+ 3667233,
+ 57479469,
+ 692651,
+ 15604464,
+ 4405672,
+ 38654957,
+ 10156415,
+ 22562458,
+ 10336594,
+ 5383010,
+ 2011612,
+ 39855442,
+ 8897619,
+ 7193761,
+ 63047647,
+ 58808266
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 72.95,
+ 77.51,
+ 77.53,
+ 73.244,
+ 70.32,
+ 73.68,
+ 74.01,
+ 76.11,
+ 77.13,
+ 78.64,
+ 77.34,
+ 77.869,
+ 71.04,
+ 78.95,
+ 76.122,
+ 78.82,
+ 75.445,
+ 78.03,
+ 78.32,
+ 72.75,
+ 75.97,
+ 69.72,
+ 72.232,
+ 72.71,
+ 75.13,
+ 78.77,
+ 79.39,
+ 79.37,
+ 68.835,
+ 77.218
+ ],
+ "y":[
+ 3193.054604,
+ 29095.92066,
+ 27561.19663,
+ 4766.355904,
+ 5970.38876,
+ 9875.604515,
+ 16048.51424,
+ 29804.34567,
+ 23723.9502,
+ 25889.78487,
+ 27788.88416,
+ 18747.69814,
+ 11712.7768,
+ 28061.09966,
+ 24521.94713,
+ 24675.02446,
+ 6465.613349,
+ 30246.13063,
+ 41283.16433,
+ 10159.58368,
+ 17641.03156,
+ 7346.547557,
+ 7914.320304,
+ 12126.23065,
+ 17161.10735,
+ 20445.29896,
+ 25266.59499,
+ 32135.32301,
+ 6601.429915,
+ 26074.53136
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 29072015,
+ 9875024,
+ 6066080,
+ 1536536,
+ 10352843,
+ 6121610,
+ 14195809,
+ 3696513,
+ 7562011,
+ 527982,
+ 47798986,
+ 2800947,
+ 14625967,
+ 417908,
+ 66134291,
+ 439971,
+ 4058319,
+ 59861301,
+ 1126189,
+ 1235767,
+ 18418288,
+ 8048834,
+ 1193708,
+ 28263827,
+ 1982823,
+ 2200725,
+ 4759670,
+ 14165114,
+ 10419991,
+ 9384984,
+ 2444741,
+ 1149818,
+ 28529501,
+ 16603334,
+ 1774766,
+ 9666252,
+ 106207839,
+ 684810,
+ 7212583,
+ 145608,
+ 9535314,
+ 4578212,
+ 6633514,
+ 42835005,
+ 32160729,
+ 1054486,
+ 30686889,
+ 4320890,
+ 9231669,
+ 21210254,
+ 9417789,
+ 11404948
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 69.152,
+ 40.963,
+ 54.777,
+ 52.556,
+ 50.324,
+ 45.326,
+ 52.199,
+ 46.066,
+ 51.573,
+ 60.66,
+ 42.587,
+ 52.962,
+ 47.991,
+ 53.157,
+ 67.217,
+ 48.245,
+ 53.378,
+ 49.402,
+ 60.461,
+ 55.861,
+ 58.556,
+ 51.455,
+ 44.873,
+ 54.407,
+ 55.558,
+ 42.221,
+ 71.555,
+ 54.978,
+ 47.495,
+ 49.903,
+ 60.43,
+ 70.736,
+ 67.66,
+ 46.344,
+ 58.909,
+ 51.313,
+ 47.464,
+ 74.772,
+ 36.087,
+ 63.306,
+ 60.187,
+ 39.897,
+ 43.795,
+ 60.236,
+ 55.373,
+ 54.289,
+ 48.466,
+ 58.39,
+ 71.973,
+ 44.578,
+ 40.238,
+ 46.809
+ ],
+ "y":[
+ 4797.295051,
+ 2277.140884,
+ 1232.975292,
+ 8647.142313,
+ 946.2949618,
+ 463.1151478,
+ 1694.337469,
+ 740.5063317,
+ 1004.961353,
+ 1173.618235,
+ 312.188423,
+ 3484.164376,
+ 1786.265407,
+ 1895.016984,
+ 4173.181797,
+ 2814.480755,
+ 913.47079,
+ 515.8894013,
+ 14722.84188,
+ 653.7301704,
+ 1005.245812,
+ 869.4497668,
+ 796.6644681,
+ 1360.485021,
+ 1186.147994,
+ 609.1739508,
+ 9467.446056,
+ 986.2958956,
+ 692.2758103,
+ 790.2579846,
+ 1483.136136,
+ 7425.705295,
+ 2982.101858,
+ 472.3460771,
+ 3899.52426,
+ 580.3052092,
+ 1624.941275,
+ 6071.941411,
+ 589.9445051,
+ 1339.076036,
+ 1392.368347,
+ 574.6481576,
+ 930.5964284,
+ 7479.188244,
+ 1632.210764,
+ 3876.76846,
+ 789.1862231,
+ 982.2869243,
+ 4876.798614,
+ 816.559081,
+ 1071.353818,
+ 792.4499603
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 36203463,
+ 7693188,
+ 168546719,
+ 30305843,
+ 14599929,
+ 37657830,
+ 3518107,
+ 10983007,
+ 7992357,
+ 11911819,
+ 5783439,
+ 9803875,
+ 6913545,
+ 5867957,
+ 2531311,
+ 95895146,
+ 4609572,
+ 2734531,
+ 5154123,
+ 24748122,
+ 3759430,
+ 1138101,
+ 272911760,
+ 3262838,
+ 22374398
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 73.275,
+ 62.05,
+ 69.388,
+ 78.61,
+ 75.816,
+ 70.313,
+ 77.26,
+ 76.151,
+ 69.957,
+ 72.312,
+ 69.535,
+ 66.322,
+ 56.671,
+ 67.659,
+ 72.262,
+ 73.67,
+ 68.426,
+ 73.738,
+ 69.4,
+ 68.386,
+ 74.917,
+ 69.465,
+ 76.81,
+ 74.223,
+ 72.146
+ ],
+ "y":[
+ 10967.28195,
+ 3326.143191,
+ 7957.980824,
+ 28954.92589,
+ 10118.05318,
+ 6117.361746,
+ 6677.045314,
+ 5431.990415,
+ 3614.101285,
+ 7429.455877,
+ 5154.825496,
+ 4684.313807,
+ 1341.726931,
+ 3160.454906,
+ 7121.924704,
+ 9767.29753,
+ 2253.023004,
+ 7113.692252,
+ 4247.400261,
+ 5838.347657,
+ 16999.4333,
+ 8792.573126,
+ 35767.43303,
+ 9230.240708,
+ 10165.49518
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 18565243,
+ 3676187
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 78.83,
+ 77.55
+ ],
+ "y":[
+ 26997.93657,
+ 21050.41377
+ ]
+ }
+ ],
+ "name":"1997"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 25268405,
+ 656397,
+ 135656790,
+ 12926707,
+ 1280400000,
+ 6762476,
+ 1034172547,
+ 211060000,
+ 66907826,
+ 24001816,
+ 6029529,
+ 127065841,
+ 5307470,
+ 22215365,
+ 47969150,
+ 2111561,
+ 3677780,
+ 22662365,
+ 2674234,
+ 45598081,
+ 25873917,
+ 2713462,
+ 153403524,
+ 82995088,
+ 24501530,
+ 4197776,
+ 19576783,
+ 17155814,
+ 22454239,
+ 62806748,
+ 80908147,
+ 3389578,
+ 18701257
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 42.129,
+ 74.795,
+ 62.013,
+ 56.752,
+ 72.028,
+ 81.495,
+ 62.879,
+ 68.588,
+ 69.451,
+ 57.046,
+ 79.696,
+ 82,
+ 71.263,
+ 66.662,
+ 77.045,
+ 76.904,
+ 71.028,
+ 73.044,
+ 65.033,
+ 59.908,
+ 61.34,
+ 74.193,
+ 63.61,
+ 70.303,
+ 71.626,
+ 78.77,
+ 70.815,
+ 73.053,
+ 76.99,
+ 68.564,
+ 73.017,
+ 72.37,
+ 60.308
+ ],
+ "y":[
+ 726.7340548,
+ 23403.55927,
+ 1136.39043,
+ 896.2260153,
+ 3119.280896,
+ 30209.01516,
+ 1746.769454,
+ 2873.91287,
+ 9240.761975,
+ 4390.717312,
+ 21905.59514,
+ 28604.5919,
+ 3844.917194,
+ 1646.758151,
+ 19233.98818,
+ 35110.10566,
+ 9313.93883,
+ 10206.97794,
+ 2140.739323,
+ 611,
+ 1057.206311,
+ 19774.83687,
+ 2092.712441,
+ 2650.921068,
+ 19014.54118,
+ 36023.1054,
+ 3015.378833,
+ 4090.925331,
+ 23235.42329,
+ 5913.187529,
+ 1764.456677,
+ 4515.487575,
+ 2234.820827
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 3508512,
+ 8148312,
+ 10311970,
+ 4165416,
+ 7661799,
+ 4481020,
+ 10256295,
+ 5374693,
+ 5193039,
+ 59925035,
+ 82350671,
+ 10603863,
+ 10083313,
+ 288030,
+ 3879155,
+ 57926999,
+ 720230,
+ 16122830,
+ 4535591,
+ 38625976,
+ 10433867,
+ 22404337,
+ 10111559,
+ 5410052,
+ 2011497,
+ 40152517,
+ 8954175,
+ 7361757,
+ 67308928,
+ 59912431
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 75.651,
+ 78.98,
+ 78.32,
+ 74.09,
+ 72.14,
+ 74.876,
+ 75.51,
+ 77.18,
+ 78.37,
+ 79.59,
+ 78.67,
+ 78.256,
+ 72.59,
+ 80.5,
+ 77.783,
+ 80.24,
+ 73.981,
+ 78.53,
+ 79.05,
+ 74.67,
+ 77.29,
+ 71.322,
+ 73.213,
+ 73.8,
+ 76.66,
+ 79.78,
+ 80.04,
+ 80.62,
+ 70.845,
+ 78.471
+ ],
+ "y":[
+ 4604.211737,
+ 32417.60769,
+ 30485.88375,
+ 6018.975239,
+ 7696.777725,
+ 11628.38895,
+ 17596.21022,
+ 32166.50006,
+ 28204.59057,
+ 28926.03234,
+ 30035.80198,
+ 22514.2548,
+ 14843.93556,
+ 31163.20196,
+ 34077.04939,
+ 27968.09817,
+ 6557.194282,
+ 33724.75778,
+ 44683.97525,
+ 12002.23908,
+ 19970.90787,
+ 7885.360081,
+ 7236.075251,
+ 13638.77837,
+ 20660.01936,
+ 24835.47166,
+ 29341.63093,
+ 34480.95771,
+ 6508.085718,
+ 29478.99919
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 31287142,
+ 10866106,
+ 7026113,
+ 1630347,
+ 12251209,
+ 7021078,
+ 15929988,
+ 4048013,
+ 8835739,
+ 614382,
+ 55379852,
+ 3328795,
+ 16252726,
+ 447416,
+ 73312559,
+ 495627,
+ 4414865,
+ 67946797,
+ 1299304,
+ 1457766,
+ 20550751,
+ 8807818,
+ 1332459,
+ 31386842,
+ 2046772,
+ 2814651,
+ 5368585,
+ 16473477,
+ 11824495,
+ 10580176,
+ 2828858,
+ 1200206,
+ 31167783,
+ 18473780,
+ 1972153,
+ 11140655,
+ 119901274,
+ 743981,
+ 7852401,
+ 170372,
+ 10870037,
+ 5359092,
+ 7753310,
+ 44433622,
+ 37090298,
+ 1130269,
+ 34593779,
+ 4977378,
+ 9770575,
+ 24739869,
+ 10595811,
+ 11926563
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 70.994,
+ 41.003,
+ 54.406,
+ 46.634,
+ 50.65,
+ 47.36,
+ 49.856,
+ 43.308,
+ 50.525,
+ 62.974,
+ 44.966,
+ 52.97,
+ 46.832,
+ 53.373,
+ 69.806,
+ 49.348,
+ 55.24,
+ 50.725,
+ 56.761,
+ 58.041,
+ 58.453,
+ 53.676,
+ 45.504,
+ 50.992,
+ 44.593,
+ 43.753,
+ 72.737,
+ 57.286,
+ 45.009,
+ 51.818,
+ 62.247,
+ 71.954,
+ 69.615,
+ 44.026,
+ 51.479,
+ 54.496,
+ 46.608,
+ 75.744,
+ 43.413,
+ 64.337,
+ 61.6,
+ 41.012,
+ 45.936,
+ 53.365,
+ 56.369,
+ 43.869,
+ 49.651,
+ 57.561,
+ 73.042,
+ 47.813,
+ 39.193,
+ 39.989
+ ],
+ "y":[
+ 5288.040382,
+ 2773.287312,
+ 1372.877931,
+ 11003.60508,
+ 1037.645221,
+ 446.4035126,
+ 1934.011449,
+ 738.6906068,
+ 1156.18186,
+ 1075.811558,
+ 241.1658765,
+ 3484.06197,
+ 1648.800823,
+ 1908.260867,
+ 4754.604414,
+ 7703.4959,
+ 765.3500015,
+ 530.0535319,
+ 12521.71392,
+ 660.5855997,
+ 1111.984578,
+ 945.5835837,
+ 575.7047176,
+ 1287.514732,
+ 1275.184575,
+ 531.4823679,
+ 9534.677467,
+ 894.6370822,
+ 665.4231186,
+ 951.4097518,
+ 1579.019543,
+ 9021.815894,
+ 3258.495584,
+ 633.6179466,
+ 4072.324751,
+ 601.0745012,
+ 1615.286395,
+ 6316.1652,
+ 785.6537648,
+ 1353.09239,
+ 1519.635262,
+ 699.489713,
+ 882.0818218,
+ 7710.946444,
+ 1993.398314,
+ 4128.116943,
+ 899.0742111,
+ 886.2205765,
+ 5722.895655,
+ 927.7210018,
+ 1071.613938,
+ 672.0386227
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 38331121,
+ 8445134,
+ 179914212,
+ 31902268,
+ 15497046,
+ 41008227,
+ 3834934,
+ 11226999,
+ 8650322,
+ 12921234,
+ 6353681,
+ 11178650,
+ 7607651,
+ 6677328,
+ 2664659,
+ 102479927,
+ 5146848,
+ 2990875,
+ 5884491,
+ 26769436,
+ 3859606,
+ 1101832,
+ 287675526,
+ 3363085,
+ 24287670
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 74.34,
+ 63.883,
+ 71.006,
+ 79.77,
+ 77.86,
+ 71.682,
+ 78.123,
+ 77.158,
+ 70.847,
+ 74.173,
+ 70.734,
+ 68.978,
+ 58.137,
+ 68.565,
+ 72.047,
+ 74.902,
+ 70.836,
+ 74.712,
+ 70.755,
+ 69.906,
+ 77.778,
+ 68.976,
+ 77.31,
+ 75.307,
+ 72.766
+ ],
+ "y":[
+ 8797.640716,
+ 3413.26269,
+ 8131.212843,
+ 33328.96507,
+ 10778.78385,
+ 5755.259962,
+ 7723.447195,
+ 6340.646683,
+ 4563.808154,
+ 5773.044512,
+ 5351.568666,
+ 4858.347495,
+ 1270.364932,
+ 3099.72866,
+ 6994.774861,
+ 10742.44053,
+ 2474.548819,
+ 7356.031934,
+ 3783.674243,
+ 5909.020073,
+ 18855.60618,
+ 11460.60023,
+ 39097.09955,
+ 7727.002004,
+ 8605.047831
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 19546792,
+ 3908037
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 80.37,
+ 79.11
+ ],
+ "y":[
+ 30687.75473,
+ 23189.80135
+ ]
+ }
+ ],
+ "name":"2002"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 31889923,
+ 708573,
+ 150448339,
+ 14131858,
+ 1318683096,
+ 6980412,
+ 1110396331,
+ 223547000,
+ 69453570,
+ 27499638,
+ 6426679,
+ 127467972,
+ 6053193,
+ 23301725,
+ 49044790,
+ 2505559,
+ 3921278,
+ 24821286,
+ 2874127,
+ 47761980,
+ 28901790,
+ 3204897,
+ 169270617,
+ 91077287,
+ 27601038,
+ 4553009,
+ 20378239,
+ 19314747,
+ 23174294,
+ 65068149,
+ 85262356,
+ 4018332,
+ 22211743
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 43.828,
+ 75.635,
+ 64.062,
+ 59.723,
+ 72.961,
+ 82.208,
+ 64.698,
+ 70.65,
+ 70.964,
+ 59.545,
+ 80.745,
+ 82.603,
+ 72.535,
+ 67.297,
+ 78.623,
+ 77.588,
+ 71.993,
+ 74.241,
+ 66.803,
+ 62.069,
+ 63.785,
+ 75.64,
+ 65.483,
+ 71.688,
+ 72.777,
+ 79.972,
+ 72.396,
+ 74.143,
+ 78.4,
+ 70.616,
+ 74.249,
+ 73.422,
+ 62.698
+ ],
+ "y":[
+ 974.5803384,
+ 29796.04834,
+ 1391.253792,
+ 1713.778686,
+ 4959.114854,
+ 39724.97867,
+ 2452.210407,
+ 3540.651564,
+ 11605.71449,
+ 4471.061906,
+ 25523.2771,
+ 31656.06806,
+ 4519.461171,
+ 1593.06548,
+ 23348.13973,
+ 47306.98978,
+ 10461.05868,
+ 12451.6558,
+ 3095.772271,
+ 944,
+ 1091.359778,
+ 22316.19287,
+ 2605.94758,
+ 3190.481016,
+ 21654.83194,
+ 47143.17964,
+ 3970.095407,
+ 4184.548089,
+ 28718.27684,
+ 7458.396327,
+ 2441.576404,
+ 3025.349798,
+ 2280.769906
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 3600523,
+ 8199783,
+ 10392226,
+ 4552198,
+ 7322858,
+ 4493312,
+ 10228744,
+ 5468120,
+ 5238460,
+ 61083916,
+ 82400996,
+ 10706290,
+ 9956108,
+ 301931,
+ 4109086,
+ 58147733,
+ 684736,
+ 16570613,
+ 4627926,
+ 38518241,
+ 10642836,
+ 22276056,
+ 10150265,
+ 5447502,
+ 2009245,
+ 40448191,
+ 9031088,
+ 7554661,
+ 71158647,
+ 60776238
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 76.423,
+ 79.829,
+ 79.441,
+ 74.852,
+ 73.005,
+ 75.748,
+ 76.486,
+ 78.332,
+ 79.313,
+ 80.657,
+ 79.406,
+ 79.483,
+ 73.338,
+ 81.757,
+ 78.885,
+ 80.546,
+ 74.543,
+ 79.762,
+ 80.196,
+ 75.563,
+ 78.098,
+ 72.476,
+ 74.002,
+ 74.663,
+ 77.926,
+ 80.941,
+ 80.884,
+ 81.701,
+ 71.777,
+ 79.425
+ ],
+ "y":[
+ 5937.029526,
+ 36126.4927,
+ 33692.60508,
+ 7446.298803,
+ 10680.79282,
+ 14619.22272,
+ 22833.30851,
+ 35278.41874,
+ 33207.0844,
+ 30470.0167,
+ 32170.37442,
+ 27538.41188,
+ 18008.94444,
+ 36180.78919,
+ 40675.99635,
+ 28569.7197,
+ 9253.896111,
+ 36797.93332,
+ 49357.19017,
+ 15389.92468,
+ 20509.64777,
+ 10808.47561,
+ 9786.534714,
+ 18678.31435,
+ 25768.25759,
+ 28821.0637,
+ 33859.74835,
+ 37506.41907,
+ 8458.276384,
+ 33203.26128
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 33333216,
+ 12420476,
+ 8078314,
+ 1639131,
+ 14326203,
+ 8390505,
+ 17696293,
+ 4369038,
+ 10238807,
+ 710960,
+ 64606759,
+ 3800610,
+ 18013409,
+ 496374,
+ 80264543,
+ 551201,
+ 4906585,
+ 76511887,
+ 1454867,
+ 1688359,
+ 22873338,
+ 9947814,
+ 1472041,
+ 35610177,
+ 2012649,
+ 3193942,
+ 6036914,
+ 19167654,
+ 13327079,
+ 12031795,
+ 3270065,
+ 1250882,
+ 33757175,
+ 19951656,
+ 2055080,
+ 12894865,
+ 135031164,
+ 798094,
+ 8860588,
+ 199579,
+ 12267493,
+ 6144562,
+ 9118773,
+ 43997828,
+ 42292929,
+ 1133066,
+ 38139640,
+ 5701579,
+ 10276158,
+ 29170398,
+ 11746035,
+ 12311143
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 72.301,
+ 42.731,
+ 56.728,
+ 50.728,
+ 52.295,
+ 49.58,
+ 50.43,
+ 44.741,
+ 50.651,
+ 65.152,
+ 46.462,
+ 55.322,
+ 48.328,
+ 54.791,
+ 71.338,
+ 51.579,
+ 58.04,
+ 52.947,
+ 56.735,
+ 59.448,
+ 60.022,
+ 56.007,
+ 46.388,
+ 54.11,
+ 42.592,
+ 45.678,
+ 73.952,
+ 59.443,
+ 48.303,
+ 54.467,
+ 64.164,
+ 72.801,
+ 71.164,
+ 42.082,
+ 52.906,
+ 56.867,
+ 46.859,
+ 76.442,
+ 46.242,
+ 65.528,
+ 63.062,
+ 42.568,
+ 48.159,
+ 49.339,
+ 58.556,
+ 39.613,
+ 52.517,
+ 58.42,
+ 73.923,
+ 51.542,
+ 42.384,
+ 43.487
+ ],
+ "y":[
+ 6223.367465,
+ 4797.231267,
+ 1441.284873,
+ 12569.85177,
+ 1217.032994,
+ 430.0706916,
+ 2042.09524,
+ 706.016537,
+ 1704.063724,
+ 986.1478792,
+ 277.5518587,
+ 3632.557798,
+ 1544.750112,
+ 2082.481567,
+ 5581.180998,
+ 12154.08975,
+ 641.3695236,
+ 690.8055759,
+ 13206.48452,
+ 752.7497265,
+ 1327.60891,
+ 942.6542111,
+ 579.231743,
+ 1463.249282,
+ 1569.331442,
+ 414.5073415,
+ 12057.49928,
+ 1044.770126,
+ 759.3499101,
+ 1042.581557,
+ 1803.151496,
+ 10956.99112,
+ 3820.17523,
+ 823.6856205,
+ 4811.060429,
+ 619.6768924,
+ 2013.977305,
+ 7670.122558,
+ 863.0884639,
+ 1598.435089,
+ 1712.472136,
+ 862.5407561,
+ 926.1410683,
+ 9269.657808,
+ 2602.394995,
+ 4513.480643,
+ 1107.482182,
+ 882.9699438,
+ 7092.923025,
+ 1056.380121,
+ 1271.211593,
+ 469.7092981
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 40301927,
+ 9119152,
+ 190010647,
+ 33390141,
+ 16284741,
+ 44227550,
+ 4133884,
+ 11416987,
+ 9319622,
+ 13755680,
+ 6939688,
+ 12572928,
+ 8502814,
+ 7483763,
+ 2780132,
+ 108700891,
+ 5675356,
+ 3242173,
+ 6667147,
+ 28674757,
+ 3942491,
+ 1056608,
+ 301139947,
+ 3447496,
+ 26084662
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 75.32,
+ 65.554,
+ 72.39,
+ 80.653,
+ 78.553,
+ 72.889,
+ 78.782,
+ 78.273,
+ 72.235,
+ 74.994,
+ 71.878,
+ 70.259,
+ 60.916,
+ 70.198,
+ 72.567,
+ 76.195,
+ 72.899,
+ 75.537,
+ 71.752,
+ 71.421,
+ 78.746,
+ 69.819,
+ 78.242,
+ 76.384,
+ 73.747
+ ],
+ "y":[
+ 12779.37964,
+ 3822.137084,
+ 9065.800825,
+ 36319.23501,
+ 13171.63885,
+ 7006.580419,
+ 9645.06142,
+ 8948.102923,
+ 6025.374752,
+ 6873.262326,
+ 5728.353514,
+ 5186.050003,
+ 1201.637154,
+ 3548.330846,
+ 7320.880262,
+ 11977.57496,
+ 2749.320965,
+ 9809.185636,
+ 4172.838464,
+ 7408.905561,
+ 19328.70901,
+ 18008.50924,
+ 42951.65309,
+ 10611.46299,
+ 11415.80569
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 20434176,
+ 4115771
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 81.235,
+ 80.204
+ ],
+ "y":[
+ 34435.36744,
+ 25185.00911
+ ]
+ }
+ ],
+ "name":"2007"
+ }
+ ],
+ "layout":{
+ "xaxis":{
+ "title":"Life Expectancy",
+ "range":[
+ 30,
+ 85
+ ]
+ },
+ "yaxis":{
+ "title":"GDP per Capita",
+ "type":"log"
+ },
+ "hovermode":"closest",
+ "slider":{
+ "visible":true,
+ "plotlycommand":"animate",
+ "args":[
+ "slider.value",
+ {
+ "duration":400,
+ "ease":"cubic-in-out"
+ }
+ ],
+ "initialValue":"1952",
+ "values":[
+ "1952",
+ "1957",
+ "1962",
+ "1967",
+ "1972",
+ "1977",
+ "1982",
+ "1987",
+ "1992",
+ "1997",
+ "2002",
+ "2007"
+ ]
+ },
+ "updatemenus": [{
+ "x": 0.1,
+ "y": 0,
+ "yanchor": "top",
+ "xanchor": "right",
+ "showactive": false,
+ "direction": "left",
+ "type": "buttons",
+ "pad": {"t": 87, "r": 10},
+ "buttons": [{
+ "method": "animate",
+ "args": [null, {
+ "fromcurrent": true,
+ "transition": {
+ "duration": 300,
+ "easing": "quadratic-in-out"
+ },
+ "frame": {
+ "duration": 500,
+ "redraw": false
+ }
+ }],
+ "label": "Play"
+ }, {
+ "method": "animate",
+ "args": [
+ [null],
+ {
+ "mode": "immediate",
+ "transition": {
+ "duration": 0
+ },
+ "frame": {
+ "duration": 0,
+ "redraw": false
+ }
+ }
+ ],
+ "label": "Pause"
+ }]
+ }],
+ "sliders": [{
+ "active": 0,
+ "steps": [{
+ "label": "1952",
+ "method": "animate",
+ "args": [["1952"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1957",
+ "method": "animate",
+ "args": [["1957"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1962",
+ "method": "animate",
+ "args": [["1962"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1967",
+ "method": "animate",
+ "args": [["1967"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1972",
+ "method": "animate",
+ "args": [["1972"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1977",
+ "method": "animate",
+ "args": [["1977"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1982",
+ "method": "animate",
+ "args": [["1982"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1987",
+ "method": "animate",
+ "args": [["1987"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1992",
+ "method": "animate",
+ "args": [["1992"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1997",
+ "method": "animate",
+ "args": [["1997"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "2002",
+ "method": "animate",
+ "args": [["2002"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "2007",
+ "method": "animate",
+ "args": [["2007"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }],
+ "x": 0.1,
+ "len": 0.9,
+ "xanchor": "left",
+ "y": 0,
+ "yanchor": "top",
+ "pad": {"t": 50, "b": 10},
+ "currentvalue": {
+ "visible": true,
+ "prefix": "Year:",
+ "xanchor": "right",
+ "font": {
+ "size": 20,
+ "color": "#666"
+ }
+ },
+ "transition": {
+ "duration": 300,
+ "easing": "cubic-in-out"
+ }
+ }]
+ },
+ "config": {
+ "scrollzoom": true
+ }
+}
diff --git a/content/plotly_js/animations/animations/2016-09-15-animations-animating-many-frames-quickly.html b/content/plotly_js/animations/animations/2016-09-15-animations-animating-many-frames-quickly.html
new file mode 100644
index 00000000000..cbc5bc9f0c9
--- /dev/null
+++ b/content/plotly_js/animations/animations/2016-09-15-animations-animating-many-frames-quickly.html
@@ -0,0 +1,72 @@
+---
+name: Animating Many Frames Quickly
+plot_url: https://codepen.io/plotly/embed/NRNJpv/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: animations
+order: 5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ By default and to ensure any properties that cannot be animated are applied to the plot, a full redraw occurs after each transition. This is generally desirable, but hurts performance when you wish to animate frames as quickly as possible. The example below performs a live simulation of the Lorenz attractor and greatly improves the performance by eliminating the redraw with `redraw: false`.
+---
+var n = 100;
+var x = [], y = [], z = [];
+var dt = 0.015;
+
+for (i = 0; i < n; i++) {
+ x[i] = Math.random() * 2 - 1;
+ y[i] = Math.random() * 2 - 1;
+ z[i] = 30 + Math.random() * 10;
+}
+
+Plotly.newPlot('myDiv', [{
+ x: x,
+ y: z,
+ mode: 'markers'
+}], {
+ xaxis: {range: [-40, 40]},
+ yaxis: {range: [0, 60]}
+})
+
+function compute () {
+ var s = 10, b = 8/3, r = 28;
+ var dx, dy, dz;
+ var xh, yh, zh;
+ for (var i = 0; i < n; i++) {
+ dx = s * (y[i] - x[i]);
+ dy = x[i] * (r - z[i]) - y[i];
+ dz = x[i] * y[i] - b * z[i];
+
+ xh = x[i] + dx * dt * 0.5;
+ yh = y[i] + dy * dt * 0.5;
+ zh = z[i] + dz * dt * 0.5;
+
+ dx = s * (yh - xh);
+ dy = xh * (r - zh) - yh;
+ dz = xh * yh - b * zh;
+
+ x[i] += dx * dt;
+ y[i] += dy * dt;
+ z[i] += dz * dt;
+ }
+}
+
+function update () {
+ compute();
+
+ Plotly.animate('myDiv', {
+ data: [{x: x, y: z}]
+ }, {
+ transition: {
+ duration: 0
+ },
+ frame: {
+ duration: 0,
+ redraw: false
+ }
+ });
+
+ requestAnimationFrame(update);
+}
+
+requestAnimationFrame(update);
diff --git a/content/plotly_js/animations/animations/2016-09-15-animations-animating-sequences-of-frames.html b/content/plotly_js/animations/animations/2016-09-15-animations-animating-sequences-of-frames.html
new file mode 100644
index 00000000000..84eb2840151
--- /dev/null
+++ b/content/plotly_js/animations/animations/2016-09-15-animations-animating-sequences-of-frames.html
@@ -0,0 +1,44 @@
+---
+name: Animating Sequences of Frames
+plot_url: https://codepen.io/plotly/embed/qakvRz/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: animations
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The above examples have used one frame at a time. Whether passing objects as frames or referring to frames by name, you may pass multiple frames together in an array. If `null` or `undefined` is passed as the second argument (i.e. `Plotly.animate('myDiv')`), then all defined frames will be animated in sequence.
+
+ The third argument of `Plotly.animate` contains animation options. The transition duration defines the amount of time spent interpolating a trace from one state to another (currently limited to scatter traces), while the frame duration defines the total time spent in that state, including time spent transitioning. The example below has two frames, each with their own transition and frame timing.
+---
+Plotly.newPlot('myDiv', [{
+ x: [0, 0],
+ y: [-1, 1],
+}], {
+ xaxis: {range: [-Math.PI, Math.PI]},
+ yaxis: {range: [-1.3, 1.3]}
+}).then(function () {
+ Plotly.addFrames('myDiv', [
+ {
+ data: [{x: [1, -1], y: [0, 0]}],
+ name: 'frame1'
+ }, {
+ data: [{x: [0, 0], y: [-1, 1]}],
+ name: 'frame2'
+ }
+ ]);
+})
+
+function startAnimation() {
+ Plotly.animate('myDiv', ['frame1', 'frame2'], {
+ frame: [
+ {duration: 1500},
+ {duration: 500},
+ ],
+ transition: [
+ {duration: 800, easing: 'elastic-in'},
+ {duration: 100, easing: 'cubic-in'},
+ ],
+ mode: 'afterall'
+ })
+}
diff --git a/content/plotly_js/animations/animations/2016-09-15-animations-animating-the-data.html b/content/plotly_js/animations/animations/2016-09-15-animations-animating-the-data.html
new file mode 100644
index 00000000000..a65733ec553
--- /dev/null
+++ b/content/plotly_js/animations/animations/2016-09-15-animations-animating-the-data.html
@@ -0,0 +1,34 @@
+---
+name: Animating the Data
+plot_url: https://codepen.io/plotly/embed/ZpWPpj/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: animations
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The animate command lets you add dynamic behavior to Plotly graphs in a number of different ways. At its core, `Plotly.animate` transitions traces to a new state or sequence of states. When you tell Plotly to animate, it merges the properties you've supplied into the current state of the plot. Therefore to animate a trace, *you must first plot the trace you wish to animate*.
+
+ The example below transitions to new y-values each time the button is pressed. Since the transition animation occurs within a frame, `frame.duration` must be set at least as long as `transition.duration`. Note that to prevent artifacts while animating, the default line simplification algorithm is explicitly disabled. Currently, only scatter traces may be smoothly transitioned from one state to the next. Other traces are compatible with frames and animations but will be updated instantaneously.
+---
+Plotly.newPlot('myDiv', [{
+ x: [1, 2, 3],
+ y: [0, 0.5, 1],
+ line: {simplify: false},
+}]);
+
+function randomize() {
+ Plotly.animate('myDiv', {
+ data: [{y: [Math.random(), Math.random(), Math.random()]}],
+ traces: [0],
+ layout: {}
+ }, {
+ transition: {
+ duration: 500,
+ easing: 'cubic-in-out'
+ },
+ frame: {
+ duration: 500
+ }
+ })
+}
diff --git a/content/plotly_js/animations/animations/2016-09-15-animations-animating-the-layout.html b/content/plotly_js/animations/animations/2016-09-15-animations-animating-the-layout.html
new file mode 100644
index 00000000000..19074620127
--- /dev/null
+++ b/content/plotly_js/animations/animations/2016-09-15-animations-animating-the-layout.html
@@ -0,0 +1,42 @@
+---
+name: Animating the Layout
+plot_url: https://codepen.io/plotly/embed/GjkZNk/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: animations
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The example below transitions to a new axis range each time the button is pressed. A present limitation of the animate API is that only one of either data or layout may be smoothly transitioned at a time. If both are provided, the data will be updated instantaneously after the layout is transitioned.
+---
+var n = 500;
+var x = [], y = [];
+for (var i = 0; i < n; i++) {
+ x[i] = i / (n - 1);
+ y[i] = x[i] + 0.2 * (Math.random() - 0.5);
+}
+
+Plotly.newPlot('myDiv', [{
+ x: x,
+ y: y,
+ mode: 'markers'
+}], {
+ xaxis: {range: [0, 1]},
+ yaxis: {range: [0, 1]}
+});
+
+function zoom() {
+ var min = 0.45 * Math.random();
+ var max = 0.55 + 0.45 * Math.random();
+ Plotly.animate('myDiv', {
+ layout: {
+ xaxis: {range: [min, max]},
+ yaxis: {range: [min, max]}
+ }
+ }, {
+ transition: {
+ duration: 500,
+ easing: 'cubic-in-out'
+ }
+ })
+}
diff --git a/content/plotly_js/animations/animations/2016-09-15-animations-defining-named-frames.html b/content/plotly_js/animations/animations/2016-09-15-animations-defining-named-frames.html
new file mode 100644
index 00000000000..029360171f4
--- /dev/null
+++ b/content/plotly_js/animations/animations/2016-09-15-animations-defining-named-frames.html
@@ -0,0 +1,55 @@
+---
+name: Defining Named Frames with Plotly.addFrames
+plot_url: https://codepen.io/plotly/embed/wzGOgd/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: animations
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The above examples pass the data itself through the Plotly.animate command. You may instead predefine named frames through the Plotly.addFrames command. Then, instead of passing frames through `Plotly.animate`, you may simply refer to a frame by name.
+
+ Similar to traces, frames are assigned a serial index as they are added. Frames may be updated by passing an array of frame indices. For example, the command to update the frame with index 2 would be `Plotly.addFrames('myDiv', [{...}], [2])`. Frames can be similarly deleted with, for example, `Plotly.deleteFrames('myDiv', [2])`.
+
+ The following example uses frames together with an `updatemenu` for interactive transitions.
+---
+var frames = [
+ {name: 'sine', data: [{x: [], y: []}]},
+ {name: 'cosine', data: [{x: [], y: []}]},
+ {name: 'circle', data: [{x: [], y: []}]},
+];
+
+var n = 100;
+for (var i = 0; i < n; i++) {
+ var t = i / (n - 1) * 2 - 1;
+
+ // A sine wave:
+ frames[0].data[0].x[i] = t * Math.PI;
+ frames[0].data[0].y[i] = Math.sin(t * Math.PI);
+
+ // A cosine wave:
+ frames[1].data[0].x[i] = t * Math.PI;
+ frames[1].data[0].y[i] = Math.cos(t * Math.PI);
+
+ // A circle:
+ frames[2].data[0].x[i] = Math.sin(t * Math.PI);
+ frames[2].data[0].y[i] = Math.cos(t * Math.PI);
+}
+
+Plotly.newPlot('myDiv', [{
+ x: frames[0].data[0].x,
+ y: frames[0].data[0].y,
+ line: {simplify: false},
+}], {
+ xaxis: {range: [-Math.PI, Math.PI]},
+ yaxis: {range: [-1.2, 1.2]},
+ updatemenus: [{
+ buttons: [
+ {method: 'animate', args: [['sine']], label: 'sine'},
+ {method: 'animate', args: [['cosine']], label: 'cosine'},
+ {method: 'animate', args: [['circle']], label: 'circle'}
+ ]
+ }]
+}).then(function() {
+ Plotly.addFrames('myDiv', frames);
+});
diff --git a/content/plotly_js/animations/animations/2016-09-15-animations-frame-groups-and-animation-modes.html b/content/plotly_js/animations/animations/2016-09-15-animations-frame-groups-and-animation-modes.html
new file mode 100644
index 00000000000..2297f29b98d
--- /dev/null
+++ b/content/plotly_js/animations/animations/2016-09-15-animations-frame-groups-and-animation-modes.html
@@ -0,0 +1,94 @@
+---
+name: Frame Groups and Animation Modes
+plot_url: https://codepen.io/plotly/embed/rrZRmA/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: animations
+order: 7
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The following example combines many of these concepts to draw a glass filling with water.
+
+ The first row of buttons animates a different set of predefined frames by changing the second argument of `Plotly.animate`. Passing `null` or `undefined` animates all defined frames in sequence, while passing an array of strings (here, the frames in reverse) animates a specific sequence of frames. By passing a plain string (here, `lower` or `upper`), it filters the animated frames to those with a `group` property equal to that name. The stop button is accomplished by interrupting the current animation with an empty list of frames, therefore simply stopping the animation at the end of the current frame.
+
+ The second row of buttons animates all frames with different animation modes. The `mode` option defines whether an animation either interrupts or follows the current animation. `immediate` mode discards all queued frames and begins a new sequence immediately. The `next` mode is very similar but doesn't begin the new animation until the *end* of the current frame. Finally, `afterall` queues the new frames so that the new animation begins only after all previous animations have completed.
+---
+var i, j, t, x, y, name;
+var frames = [];
+var nFrames = 10;
+var n = 80;
+var reverseFrames = [];
+
+for (i = 0; i < nFrames; i++) {
+ var fill = 0.1 + 0.9 * i / (nFrames - 1);
+ x = [-1];
+ y = [0];
+
+ // A wave across the top:
+ for (j = 0; j < n; j++) {
+ t = j / (n - 1);
+ x.push(-1 - fill + (2 + 2 * fill) * t);
+ y.push(fill + 0.05 * Math.sin(t * Math.PI * 2 * i));
+ }
+
+ // Close the loop to draw the water:
+ x.push(1, -1);
+ y.push(0, 0);
+
+ // Choose a name:
+ name = 'frame' + i;
+
+ // Store it in an array so we can animate in reverse order:
+ reverseFrames.unshift(name);
+
+ // Create the frame:
+ frames.push({
+ name: name,
+ data: [{x: x, y: y}],
+ group: i < nFrames / 2 ? 'lower' : 'upper'
+ })
+}
+
+Plotly.newPlot('myDiv', [{
+ // Set up the initial water:
+ x: frames[0].data[0].x,
+ y: frames[0].data[0].y,
+ mode: 'lines',
+ fill: 'toself',
+ showlegend: false,
+ line: {simplify: false}
+}, {
+ // Draw a glass:
+ x: [-1, 1, 2.1, -2.1, -1],
+ y: [0, 0, 1.1, 1.1, 0],
+ mode: 'lines',
+ fill: 'toself',
+ showlegend: false,
+ fillcolor: 'rgba(0, 0, 0, 0.1)',
+ line: {color: 'rgba(100,100,100,0.2)'}
+}], {
+ xaxis: {range: [-3, 3]},
+ yaxis: {range: [-0.1, 1.5]}
+}).then(function() {
+ // Add the frames so we can animate them:
+ Plotly.addFrames('myDiv', frames);
+});
+
+// Stop the animation by animating to an empty set of frames:
+function stopAnimation () {
+ Plotly.animate('myDiv', [], {mode: 'next'});
+}
+
+function startAnimation (groupOrFrames, mode) {
+ Plotly.animate('myDiv', groupOrFrames, {
+ transition: {
+ duration: 500,
+ easing: 'linear'
+ },
+ frame: {
+ duration: 500,
+ redraw: false,
+ },
+ mode: mode
+ });
+}
diff --git a/content/plotly_js/animations/animations/2016-09-15-animations-object-constancy.html b/content/plotly_js/animations/animations/2016-09-15-animations-object-constancy.html
new file mode 100644
index 00000000000..68aeb0c8797
--- /dev/null
+++ b/content/plotly_js/animations/animations/2016-09-15-animations-object-constancy.html
@@ -0,0 +1,41 @@
+---
+name: Object Constancy
+plot_url: https://codepen.io/plotly/embed/LRNaWw/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: animations
+order: 6
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ For scatter traces, you may wish to retain a marker's identity as it is updated. If you include an array of string ids with the trace, the marker identity will be retained. By shuffling the ids, the example below shuffles the markers each time the button is pressed.
+---
+function shuffleInPlace(array) {
+ for (var i = array.length - 1; i > 0; i--) {
+ var j = Math.floor(Math.random() * (i + 1));
+ var temp = array[i];
+ array[i] = array[j];
+ array[j] = temp;
+ }
+}
+
+var ids = ['1', '2', '3', '4', '5', '6'];
+
+Plotly.newPlot('myDiv', [{
+ x: [1, 0.5, -0.5, -1, -0.5, 0.5],
+ y: [0, 0.866, 0.866, 0, -0.866, -0.866],
+ marker:{size:14,
+ color:['#631357', '#880E4F', '#AD1457',
+ '#F06292', '#F48FB1']},
+ ids: ids,
+ mode: 'markers'
+}], {
+ xaxis: {range: [-3, 3]},
+ yaxis: {range: [-2, 2]}
+});
+
+function animateShuffle() {
+ shuffleInPlace(ids);
+ Plotly.animate('myDiv', [{
+ data: [{ids: ids}]
+ }]);
+}
diff --git a/content/plotly_js/animations/animations/2016-11-14-animations-gapminder.html b/content/plotly_js/animations/animations/2016-11-14-animations-gapminder.html
new file mode 100644
index 00000000000..9248dd7b7bf
--- /dev/null
+++ b/content/plotly_js/animations/animations/2016-11-14-animations-gapminder.html
@@ -0,0 +1,10 @@
+---
+name: Animating with a Slider
+language: plotly_js
+suite: animations
+order: 8
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ See [Adding Sliders to Animations](https://plotly.com/javascript/gapminder-example/).
+---
diff --git a/content/plotly_js/animations/animations/gapminder-with-frames.json b/content/plotly_js/animations/animations/gapminder-with-frames.json
new file mode 100644
index 00000000000..843dc88bad5
--- /dev/null
+++ b/content/plotly_js/animations/animations/gapminder-with-frames.json
@@ -0,0 +1,8705 @@
+{
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 8425333,
+ 120447,
+ 46886859,
+ 4693836,
+ 556263527.999989,
+ 2125900,
+ 372000000,
+ 82052000,
+ 17272000,
+ 5441766,
+ 1620914,
+ 86459025,
+ 607914,
+ 8865488,
+ 20947571,
+ 160000,
+ 1439529,
+ 6748378,
+ 800663,
+ 20092996,
+ 9182536,
+ 507833,
+ 41346560,
+ 22438691,
+ 4005677,
+ 1127000,
+ 7982342,
+ 3661549,
+ 8550362,
+ 21289402,
+ 26246839,
+ 1030585,
+ 4963829
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 28.801,
+ 50.939,
+ 37.484,
+ 39.417,
+ 44,
+ 60.96,
+ 37.373,
+ 37.468,
+ 44.869,
+ 45.32,
+ 65.39,
+ 63.03,
+ 43.158,
+ 50.056,
+ 47.453,
+ 55.565,
+ 55.928,
+ 48.463,
+ 42.244,
+ 36.319,
+ 36.157,
+ 37.578,
+ 43.436,
+ 47.752,
+ 39.875,
+ 60.396,
+ 57.593,
+ 45.883,
+ 58.5,
+ 50.848,
+ 40.412,
+ 43.16,
+ 32.548
+ ],
+ "y":[
+ 779.4453145,
+ 9867.084765,
+ 684.2441716,
+ 368.4692856,
+ 400.448610699994,
+ 3054.421209,
+ 546.5657493,
+ 749.6816546,
+ 3035.326002,
+ 4129.766056,
+ 4086.522128,
+ 3216.956347,
+ 1546.907807,
+ 1088.277758,
+ 1030.592226,
+ 108382.3529,
+ 4834.804067,
+ 1831.132894,
+ 786.5668575,
+ 331,
+ 545.8657229,
+ 1828.230307,
+ 684.5971438,
+ 1272.880995,
+ 6459.554823,
+ 2315.138227,
+ 1083.53203,
+ 1643.485354,
+ 1206.947913,
+ 757.7974177,
+ 605.0664917,
+ 1515.592329,
+ 781.7175761
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 1282697,
+ 6927772,
+ 8730405,
+ 2791000,
+ 7274900,
+ 3882229,
+ 9125183,
+ 4334000,
+ 4090500,
+ 42459667,
+ 69145952,
+ 7733250,
+ 9504000,
+ 147962,
+ 2952156,
+ 47666000,
+ 413834,
+ 10381988,
+ 3327728,
+ 25730551,
+ 8526050,
+ 16630000,
+ 6860147,
+ 3558137,
+ 1489518,
+ 28549870,
+ 7124673,
+ 4815000,
+ 22235677,
+ 50430000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 55.23,
+ 66.8,
+ 68,
+ 53.82,
+ 59.6,
+ 61.21,
+ 66.87,
+ 70.78,
+ 66.55,
+ 67.41,
+ 67.5,
+ 65.86,
+ 64.03,
+ 72.49,
+ 66.91,
+ 65.94,
+ 59.164,
+ 72.13,
+ 72.67,
+ 61.31,
+ 59.82,
+ 61.05,
+ 57.996,
+ 64.36,
+ 65.57,
+ 64.94,
+ 71.86,
+ 69.62,
+ 43.585,
+ 69.18
+ ],
+ "y":[
+ 1601.056136,
+ 6137.076492,
+ 8343.105127,
+ 973.5331948,
+ 2444.286648,
+ 3119.23652,
+ 6876.14025,
+ 9692.385245,
+ 6424.519071,
+ 7029.809327,
+ 7144.114393,
+ 3530.690067,
+ 5263.673816,
+ 7267.688428,
+ 5210.280328,
+ 4931.404155,
+ 2647.585601,
+ 8941.571858,
+ 10095.42172,
+ 4029.329699,
+ 3068.319867,
+ 3144.613186,
+ 3581.459448,
+ 5074.659104,
+ 4215.041741,
+ 3834.034742,
+ 8527.844662,
+ 14734.23275,
+ 1969.10098,
+ 9979.508487
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 9279525,
+ 4232095,
+ 1738315,
+ 442308,
+ 4469979,
+ 2445618,
+ 5009067,
+ 1291695,
+ 2682462,
+ 153936,
+ 14100005,
+ 854885,
+ 2977019,
+ 63149,
+ 22223309,
+ 216964,
+ 1438760,
+ 20860941,
+ 420702,
+ 284320,
+ 5581001,
+ 2664249,
+ 580653,
+ 6464046,
+ 748747,
+ 863308,
+ 1019729,
+ 4762912,
+ 2917802,
+ 3838168,
+ 1022556,
+ 516556,
+ 9939217,
+ 6446316,
+ 485831,
+ 3379468,
+ 33119096,
+ 257700,
+ 2534927,
+ 60011,
+ 2755589,
+ 2143249,
+ 2526994,
+ 14264935,
+ 8504667,
+ 290243,
+ 8322925,
+ 1219113,
+ 3647735,
+ 5824797,
+ 2672000,
+ 3080907
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 43.077,
+ 30.015,
+ 38.223,
+ 47.622,
+ 31.975,
+ 39.031,
+ 38.523,
+ 35.463,
+ 38.092,
+ 40.715,
+ 39.143,
+ 42.111,
+ 40.477,
+ 34.812,
+ 41.893,
+ 34.482,
+ 35.928,
+ 34.078,
+ 37.003,
+ 30,
+ 43.149,
+ 33.609,
+ 32.5,
+ 42.27,
+ 42.138,
+ 38.48,
+ 42.723,
+ 36.681,
+ 36.256,
+ 33.685,
+ 40.543,
+ 50.986,
+ 42.873,
+ 31.286,
+ 41.725,
+ 37.444,
+ 36.324,
+ 52.724,
+ 40,
+ 46.471,
+ 37.278,
+ 30.331,
+ 32.978,
+ 45.009,
+ 38.635,
+ 41.407,
+ 41.215,
+ 38.596,
+ 44.6,
+ 39.978,
+ 42.038,
+ 48.451
+ ],
+ "y":[
+ 2449.008185,
+ 3520.610273,
+ 1062.7522,
+ 851.2411407,
+ 543.2552413,
+ 339.2964587,
+ 1172.667655,
+ 1071.310713,
+ 1178.665927,
+ 1102.990936,
+ 780.5423257,
+ 2125.621418,
+ 1388.594732,
+ 2669.529475,
+ 1418.822445,
+ 375.6431231,
+ 328.9405571,
+ 362.1462796,
+ 4293.476475,
+ 485.2306591,
+ 911.2989371,
+ 510.1964923,
+ 299.850319,
+ 853.540919,
+ 298.8462121,
+ 575.5729961,
+ 2387.54806,
+ 1443.011715,
+ 369.1650802,
+ 452.3369807,
+ 743.1159097,
+ 1967.955707,
+ 1688.20357,
+ 468.5260381,
+ 2423.780443,
+ 761.879376,
+ 1077.281856,
+ 2718.885295,
+ 493.3238752,
+ 879.5835855,
+ 1450.356983,
+ 879.7877358,
+ 1135.749842,
+ 4725.295531,
+ 1615.991129,
+ 1148.376626,
+ 716.6500721,
+ 859.8086567,
+ 1468.475631,
+ 734.753484,
+ 1147.388831,
+ 406.8841148
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 17876956,
+ 2883315,
+ 56602560,
+ 14785584,
+ 6377619,
+ 12350771,
+ 926317,
+ 6007797,
+ 2491346,
+ 3548753,
+ 2042865,
+ 3146381,
+ 3201488,
+ 1517453,
+ 1426095,
+ 30144317,
+ 1165790,
+ 940080,
+ 1555876,
+ 8025700,
+ 2227000,
+ 662850,
+ 157553000,
+ 2252965,
+ 5439568
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 62.485,
+ 40.414,
+ 50.917,
+ 68.75,
+ 54.745,
+ 50.643,
+ 57.206,
+ 59.421,
+ 45.928,
+ 48.357,
+ 45.262,
+ 42.023,
+ 37.579,
+ 41.912,
+ 58.53,
+ 50.789,
+ 42.314,
+ 55.191,
+ 62.649,
+ 43.902,
+ 64.28,
+ 59.1,
+ 68.44,
+ 66.071,
+ 55.088
+ ],
+ "y":[
+ 5911.315053,
+ 2677.326347,
+ 2108.944355,
+ 11367.16112,
+ 3939.978789,
+ 2144.115096,
+ 2627.009471,
+ 5586.53878,
+ 1397.717137,
+ 3522.110717,
+ 3048.3029,
+ 2428.237769,
+ 1840.366939,
+ 2194.926204,
+ 2898.530881,
+ 3478.125529,
+ 3112.363948,
+ 2480.380334,
+ 1952.308701,
+ 3758.523437,
+ 3081.959785,
+ 3023.271928,
+ 13990.48208,
+ 5716.766744,
+ 7689.799761
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 8691212,
+ 1994794
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 69.12,
+ 69.39
+ ],
+ "y":[
+ 10039.59564,
+ 10556.57566
+ ]
+ }
+ ],
+ "frames":[
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 8425333,
+ 120447,
+ 46886859,
+ 4693836,
+ 556263527.999989,
+ 2125900,
+ 372000000,
+ 82052000,
+ 17272000,
+ 5441766,
+ 1620914,
+ 86459025,
+ 607914,
+ 8865488,
+ 20947571,
+ 160000,
+ 1439529,
+ 6748378,
+ 800663,
+ 20092996,
+ 9182536,
+ 507833,
+ 41346560,
+ 22438691,
+ 4005677,
+ 1127000,
+ 7982342,
+ 3661549,
+ 8550362,
+ 21289402,
+ 26246839,
+ 1030585,
+ 4963829
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 28.801,
+ 50.939,
+ 37.484,
+ 39.417,
+ 44,
+ 60.96,
+ 37.373,
+ 37.468,
+ 44.869,
+ 45.32,
+ 65.39,
+ 63.03,
+ 43.158,
+ 50.056,
+ 47.453,
+ 55.565,
+ 55.928,
+ 48.463,
+ 42.244,
+ 36.319,
+ 36.157,
+ 37.578,
+ 43.436,
+ 47.752,
+ 39.875,
+ 60.396,
+ 57.593,
+ 45.883,
+ 58.5,
+ 50.848,
+ 40.412,
+ 43.16,
+ 32.548
+ ],
+ "y":[
+ 779.4453145,
+ 9867.084765,
+ 684.2441716,
+ 368.4692856,
+ 400.448610699994,
+ 3054.421209,
+ 546.5657493,
+ 749.6816546,
+ 3035.326002,
+ 4129.766056,
+ 4086.522128,
+ 3216.956347,
+ 1546.907807,
+ 1088.277758,
+ 1030.592226,
+ 108382.3529,
+ 4834.804067,
+ 1831.132894,
+ 786.5668575,
+ 331,
+ 545.8657229,
+ 1828.230307,
+ 684.5971438,
+ 1272.880995,
+ 6459.554823,
+ 2315.138227,
+ 1083.53203,
+ 1643.485354,
+ 1206.947913,
+ 757.7974177,
+ 605.0664917,
+ 1515.592329,
+ 781.7175761
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 1282697,
+ 6927772,
+ 8730405,
+ 2791000,
+ 7274900,
+ 3882229,
+ 9125183,
+ 4334000,
+ 4090500,
+ 42459667,
+ 69145952,
+ 7733250,
+ 9504000,
+ 147962,
+ 2952156,
+ 47666000,
+ 413834,
+ 10381988,
+ 3327728,
+ 25730551,
+ 8526050,
+ 16630000,
+ 6860147,
+ 3558137,
+ 1489518,
+ 28549870,
+ 7124673,
+ 4815000,
+ 22235677,
+ 50430000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 55.23,
+ 66.8,
+ 68,
+ 53.82,
+ 59.6,
+ 61.21,
+ 66.87,
+ 70.78,
+ 66.55,
+ 67.41,
+ 67.5,
+ 65.86,
+ 64.03,
+ 72.49,
+ 66.91,
+ 65.94,
+ 59.164,
+ 72.13,
+ 72.67,
+ 61.31,
+ 59.82,
+ 61.05,
+ 57.996,
+ 64.36,
+ 65.57,
+ 64.94,
+ 71.86,
+ 69.62,
+ 43.585,
+ 69.18
+ ],
+ "y":[
+ 1601.056136,
+ 6137.076492,
+ 8343.105127,
+ 973.5331948,
+ 2444.286648,
+ 3119.23652,
+ 6876.14025,
+ 9692.385245,
+ 6424.519071,
+ 7029.809327,
+ 7144.114393,
+ 3530.690067,
+ 5263.673816,
+ 7267.688428,
+ 5210.280328,
+ 4931.404155,
+ 2647.585601,
+ 8941.571858,
+ 10095.42172,
+ 4029.329699,
+ 3068.319867,
+ 3144.613186,
+ 3581.459448,
+ 5074.659104,
+ 4215.041741,
+ 3834.034742,
+ 8527.844662,
+ 14734.23275,
+ 1969.10098,
+ 9979.508487
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 9279525,
+ 4232095,
+ 1738315,
+ 442308,
+ 4469979,
+ 2445618,
+ 5009067,
+ 1291695,
+ 2682462,
+ 153936,
+ 14100005,
+ 854885,
+ 2977019,
+ 63149,
+ 22223309,
+ 216964,
+ 1438760,
+ 20860941,
+ 420702,
+ 284320,
+ 5581001,
+ 2664249,
+ 580653,
+ 6464046,
+ 748747,
+ 863308,
+ 1019729,
+ 4762912,
+ 2917802,
+ 3838168,
+ 1022556,
+ 516556,
+ 9939217,
+ 6446316,
+ 485831,
+ 3379468,
+ 33119096,
+ 257700,
+ 2534927,
+ 60011,
+ 2755589,
+ 2143249,
+ 2526994,
+ 14264935,
+ 8504667,
+ 290243,
+ 8322925,
+ 1219113,
+ 3647735,
+ 5824797,
+ 2672000,
+ 3080907
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 43.077,
+ 30.015,
+ 38.223,
+ 47.622,
+ 31.975,
+ 39.031,
+ 38.523,
+ 35.463,
+ 38.092,
+ 40.715,
+ 39.143,
+ 42.111,
+ 40.477,
+ 34.812,
+ 41.893,
+ 34.482,
+ 35.928,
+ 34.078,
+ 37.003,
+ 30,
+ 43.149,
+ 33.609,
+ 32.5,
+ 42.27,
+ 42.138,
+ 38.48,
+ 42.723,
+ 36.681,
+ 36.256,
+ 33.685,
+ 40.543,
+ 50.986,
+ 42.873,
+ 31.286,
+ 41.725,
+ 37.444,
+ 36.324,
+ 52.724,
+ 40,
+ 46.471,
+ 37.278,
+ 30.331,
+ 32.978,
+ 45.009,
+ 38.635,
+ 41.407,
+ 41.215,
+ 38.596,
+ 44.6,
+ 39.978,
+ 42.038,
+ 48.451
+ ],
+ "y":[
+ 2449.008185,
+ 3520.610273,
+ 1062.7522,
+ 851.2411407,
+ 543.2552413,
+ 339.2964587,
+ 1172.667655,
+ 1071.310713,
+ 1178.665927,
+ 1102.990936,
+ 780.5423257,
+ 2125.621418,
+ 1388.594732,
+ 2669.529475,
+ 1418.822445,
+ 375.6431231,
+ 328.9405571,
+ 362.1462796,
+ 4293.476475,
+ 485.2306591,
+ 911.2989371,
+ 510.1964923,
+ 299.850319,
+ 853.540919,
+ 298.8462121,
+ 575.5729961,
+ 2387.54806,
+ 1443.011715,
+ 369.1650802,
+ 452.3369807,
+ 743.1159097,
+ 1967.955707,
+ 1688.20357,
+ 468.5260381,
+ 2423.780443,
+ 761.879376,
+ 1077.281856,
+ 2718.885295,
+ 493.3238752,
+ 879.5835855,
+ 1450.356983,
+ 879.7877358,
+ 1135.749842,
+ 4725.295531,
+ 1615.991129,
+ 1148.376626,
+ 716.6500721,
+ 859.8086567,
+ 1468.475631,
+ 734.753484,
+ 1147.388831,
+ 406.8841148
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 17876956,
+ 2883315,
+ 56602560,
+ 14785584,
+ 6377619,
+ 12350771,
+ 926317,
+ 6007797,
+ 2491346,
+ 3548753,
+ 2042865,
+ 3146381,
+ 3201488,
+ 1517453,
+ 1426095,
+ 30144317,
+ 1165790,
+ 940080,
+ 1555876,
+ 8025700,
+ 2227000,
+ 662850,
+ 157553000,
+ 2252965,
+ 5439568
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 62.485,
+ 40.414,
+ 50.917,
+ 68.75,
+ 54.745,
+ 50.643,
+ 57.206,
+ 59.421,
+ 45.928,
+ 48.357,
+ 45.262,
+ 42.023,
+ 37.579,
+ 41.912,
+ 58.53,
+ 50.789,
+ 42.314,
+ 55.191,
+ 62.649,
+ 43.902,
+ 64.28,
+ 59.1,
+ 68.44,
+ 66.071,
+ 55.088
+ ],
+ "y":[
+ 5911.315053,
+ 2677.326347,
+ 2108.944355,
+ 11367.16112,
+ 3939.978789,
+ 2144.115096,
+ 2627.009471,
+ 5586.53878,
+ 1397.717137,
+ 3522.110717,
+ 3048.3029,
+ 2428.237769,
+ 1840.366939,
+ 2194.926204,
+ 2898.530881,
+ 3478.125529,
+ 3112.363948,
+ 2480.380334,
+ 1952.308701,
+ 3758.523437,
+ 3081.959785,
+ 3023.271928,
+ 13990.48208,
+ 5716.766744,
+ 7689.799761
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 8691212,
+ 1994794
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 69.12,
+ 69.39
+ ],
+ "y":[
+ 10039.59564,
+ 10556.57566
+ ]
+ }
+ ],
+ "name":"1952"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 9240934,
+ 138655,
+ 51365468,
+ 5322536,
+ 637408000,
+ 2736300,
+ 409000000,
+ 90124000,
+ 19792000,
+ 6248643,
+ 1944401,
+ 91563009,
+ 746559,
+ 9411381,
+ 22611552,
+ 212846,
+ 1647412,
+ 7739235,
+ 882134,
+ 21731844,
+ 9682338,
+ 561977,
+ 46679944,
+ 26072194,
+ 4419650,
+ 1445929,
+ 9128546,
+ 4149908,
+ 10164215,
+ 25041917,
+ 28998543,
+ 1070439,
+ 5498090
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 30.332,
+ 53.832,
+ 39.348,
+ 41.366,
+ 50.54896,
+ 64.75,
+ 40.249,
+ 39.918,
+ 47.181,
+ 48.437,
+ 67.84,
+ 65.5,
+ 45.669,
+ 54.081,
+ 52.681,
+ 58.033,
+ 59.489,
+ 52.102,
+ 45.248,
+ 41.905,
+ 37.686,
+ 40.08,
+ 45.557,
+ 51.334,
+ 42.868,
+ 63.179,
+ 61.456,
+ 48.284,
+ 62.4,
+ 53.63,
+ 42.887,
+ 45.671,
+ 33.97
+ ],
+ "y":[
+ 820.8530296,
+ 11635.79945,
+ 661.6374577,
+ 434.0383364,
+ 575.9870009,
+ 3629.076457,
+ 590.061996,
+ 858.9002707,
+ 3290.257643,
+ 6229.333562,
+ 5385.278451,
+ 4317.694365,
+ 1886.080591,
+ 1571.134655,
+ 1487.593537,
+ 113523.1329,
+ 6089.786934,
+ 1810.066992,
+ 912.6626085,
+ 350,
+ 597.9363558,
+ 2242.746551,
+ 747.0835292,
+ 1547.944844,
+ 8157.591248,
+ 2843.104409,
+ 1072.546602,
+ 2117.234893,
+ 1507.86129,
+ 793.5774148,
+ 676.2854478,
+ 1827.067742,
+ 804.8304547
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 1476505,
+ 6965860,
+ 8989111,
+ 3076000,
+ 7651254,
+ 3991242,
+ 9513758,
+ 4487831,
+ 4324000,
+ 44310863,
+ 71019069,
+ 8096218,
+ 9839000,
+ 165110,
+ 2878220,
+ 49182000,
+ 442829,
+ 11026383,
+ 3491938,
+ 28235346,
+ 8817650,
+ 17829327,
+ 7271135,
+ 3844277,
+ 1533070,
+ 29841614,
+ 7363802,
+ 5126000,
+ 25670939,
+ 51430000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 59.28,
+ 67.48,
+ 69.24,
+ 58.45,
+ 66.61,
+ 64.77,
+ 69.03,
+ 71.81,
+ 67.49,
+ 68.93,
+ 69.1,
+ 67.86,
+ 66.41,
+ 73.47,
+ 68.9,
+ 67.81,
+ 61.448,
+ 72.99,
+ 73.44,
+ 65.77,
+ 61.51,
+ 64.1,
+ 61.685,
+ 67.45,
+ 67.85,
+ 66.66,
+ 72.49,
+ 70.56,
+ 48.079,
+ 70.42
+ ],
+ "y":[
+ 1942.284244,
+ 8842.59803,
+ 9714.960623,
+ 1353.989176,
+ 3008.670727,
+ 4338.231617,
+ 8256.343918,
+ 11099.65935,
+ 7545.415386,
+ 8662.834898,
+ 10187.82665,
+ 4916.299889,
+ 6040.180011,
+ 9244.001412,
+ 5599.077872,
+ 6248.656232,
+ 3682.259903,
+ 11276.19344,
+ 11653.97304,
+ 4734.253019,
+ 3774.571743,
+ 3943.370225,
+ 4981.090891,
+ 6093.26298,
+ 5862.276629,
+ 4564.80241,
+ 9911.878226,
+ 17909.48973,
+ 2218.754257,
+ 11283.17795
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 10270856,
+ 4561361,
+ 1925173,
+ 474639,
+ 4713416,
+ 2667518,
+ 5359923,
+ 1392284,
+ 2894855,
+ 170928,
+ 15577932,
+ 940458,
+ 3300000,
+ 71851,
+ 25009741,
+ 232922,
+ 1542611,
+ 22815614,
+ 434904,
+ 323150,
+ 6391288,
+ 2876726,
+ 601095,
+ 7454779,
+ 813338,
+ 975950,
+ 1201578,
+ 5181679,
+ 3221238,
+ 4241884,
+ 1076852,
+ 609816,
+ 11406350,
+ 7038035,
+ 548080,
+ 3692184,
+ 37173340,
+ 308700,
+ 2822082,
+ 61325,
+ 3054547,
+ 2295678,
+ 2780415,
+ 16151549,
+ 9753392,
+ 326741,
+ 9452826,
+ 1357445,
+ 3950849,
+ 6675501,
+ 3016000,
+ 3646340
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 45.685,
+ 31.999,
+ 40.358,
+ 49.618,
+ 34.906,
+ 40.533,
+ 40.428,
+ 37.464,
+ 39.881,
+ 42.46,
+ 40.652,
+ 45.053,
+ 42.469,
+ 37.328,
+ 44.444,
+ 35.983,
+ 38.047,
+ 36.667,
+ 38.999,
+ 32.065,
+ 44.779,
+ 34.558,
+ 33.489,
+ 44.686,
+ 45.047,
+ 39.486,
+ 45.289,
+ 38.865,
+ 37.207,
+ 35.307,
+ 42.338,
+ 58.089,
+ 45.423,
+ 33.779,
+ 45.226,
+ 38.598,
+ 37.802,
+ 55.09,
+ 41.5,
+ 48.945,
+ 39.329,
+ 31.57,
+ 34.977,
+ 47.985,
+ 39.624,
+ 43.424,
+ 42.974,
+ 41.208,
+ 47.1,
+ 42.571,
+ 44.077,
+ 50.469
+ ],
+ "y":[
+ 3013.976023,
+ 3827.940465,
+ 959.6010805,
+ 918.2325349,
+ 617.1834648,
+ 379.5646281,
+ 1313.048099,
+ 1190.844328,
+ 1308.495577,
+ 1211.148548,
+ 905.8602303,
+ 2315.056572,
+ 1500.895925,
+ 2864.969076,
+ 1458.915272,
+ 426.0964081,
+ 344.1618859,
+ 378.9041632,
+ 4976.198099,
+ 520.9267111,
+ 1043.561537,
+ 576.2670245,
+ 431.7904566,
+ 944.4383152,
+ 335.9971151,
+ 620.9699901,
+ 3448.284395,
+ 1589.20275,
+ 416.3698064,
+ 490.3821867,
+ 846.1202613,
+ 2034.037981,
+ 1642.002314,
+ 495.5868333,
+ 2621.448058,
+ 835.5234025,
+ 1100.592563,
+ 2769.451844,
+ 540.2893983,
+ 860.7369026,
+ 1567.653006,
+ 1004.484437,
+ 1258.147413,
+ 5487.104219,
+ 1770.337074,
+ 1244.708364,
+ 698.5356073,
+ 925.9083202,
+ 1395.232468,
+ 774.3710692,
+ 1311.956766,
+ 518.7642681
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 19610538,
+ 3211738,
+ 65551171,
+ 17010154,
+ 7048426,
+ 14485993,
+ 1112300,
+ 6640752,
+ 2923186,
+ 4058385,
+ 2355805,
+ 3640876,
+ 3507701,
+ 1770390,
+ 1535090,
+ 35015548,
+ 1358828,
+ 1063506,
+ 1770902,
+ 9146100,
+ 2260000,
+ 764900,
+ 171984000,
+ 2424959,
+ 6702668
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 64.399,
+ 41.89,
+ 53.285,
+ 69.96,
+ 56.074,
+ 55.118,
+ 60.026,
+ 62.325,
+ 49.828,
+ 51.356,
+ 48.57,
+ 44.142,
+ 40.696,
+ 44.665,
+ 62.61,
+ 55.19,
+ 45.432,
+ 59.201,
+ 63.196,
+ 46.263,
+ 68.54,
+ 61.8,
+ 69.49,
+ 67.044,
+ 57.907
+ ],
+ "y":[
+ 6856.856212,
+ 2127.686326,
+ 2487.365989,
+ 12489.95006,
+ 4315.622723,
+ 2323.805581,
+ 2990.010802,
+ 6092.174359,
+ 1544.402995,
+ 3780.546651,
+ 3421.523218,
+ 2617.155967,
+ 1726.887882,
+ 2220.487682,
+ 4756.525781,
+ 4131.546641,
+ 3457.415947,
+ 2961.800905,
+ 2046.154706,
+ 4245.256698,
+ 3907.156189,
+ 4100.3934,
+ 14847.12712,
+ 6150.772969,
+ 9802.466526
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 9712569,
+ 2229407
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 70.33,
+ 70.26
+ ],
+ "y":[
+ 10949.64959,
+ 12247.39532
+ ]
+ }
+ ],
+ "name":"1957"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 10267083,
+ 171863,
+ 56839289,
+ 6083619,
+ 665770000,
+ 3305200,
+ 454000000,
+ 99028000,
+ 22874000,
+ 7240260,
+ 2310904,
+ 95831757,
+ 933559,
+ 10917494,
+ 26420307,
+ 358266,
+ 1886848,
+ 8906385,
+ 1010280,
+ 23634436,
+ 10332057,
+ 628164,
+ 53100671,
+ 30325264,
+ 4943029,
+ 1750200,
+ 10421936,
+ 4834621,
+ 11918938,
+ 29263397,
+ 33796140,
+ 1133134,
+ 6120081
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 31.997,
+ 56.923,
+ 41.216,
+ 43.415,
+ 44.50136,
+ 67.65,
+ 43.605,
+ 42.518,
+ 49.325,
+ 51.457,
+ 69.39,
+ 68.73,
+ 48.126,
+ 56.656,
+ 55.292,
+ 60.47,
+ 62.094,
+ 55.737,
+ 48.251,
+ 45.108,
+ 39.393,
+ 43.165,
+ 47.67,
+ 54.757,
+ 45.914,
+ 65.798,
+ 62.192,
+ 50.305,
+ 65.2,
+ 56.061,
+ 45.363,
+ 48.127,
+ 35.18
+ ],
+ "y":[
+ 853.10071,
+ 12753.27514,
+ 686.3415538,
+ 496.9136476,
+ 487.6740183,
+ 4692.648272,
+ 658.3471509,
+ 849.2897701,
+ 4187.329802,
+ 8341.737815,
+ 7105.630706,
+ 6576.649461,
+ 2348.009158,
+ 1621.693598,
+ 1536.344387,
+ 95458.11176,
+ 5714.560611,
+ 2036.884944,
+ 1056.353958,
+ 388,
+ 652.3968593,
+ 2924.638113,
+ 803.3427418,
+ 1649.552153,
+ 11626.41975,
+ 3674.735572,
+ 1074.47196,
+ 2193.037133,
+ 1822.879028,
+ 1002.199172,
+ 772.0491602,
+ 2198.956312,
+ 825.6232006
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 1728137,
+ 7129864,
+ 9218400,
+ 3349000,
+ 8012946,
+ 4076557,
+ 9620282,
+ 4646899,
+ 4491443,
+ 47124000,
+ 73739117,
+ 8448233,
+ 10063000,
+ 182053,
+ 2830000,
+ 50843200,
+ 474528,
+ 11805689,
+ 3638919,
+ 30329617,
+ 9019800,
+ 18680721,
+ 7616060,
+ 4237384,
+ 1582962,
+ 31158061,
+ 7561588,
+ 5666000,
+ 29788695,
+ 53292000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 64.82,
+ 69.54,
+ 70.25,
+ 61.93,
+ 69.51,
+ 67.13,
+ 69.9,
+ 72.35,
+ 68.75,
+ 70.51,
+ 70.3,
+ 69.51,
+ 67.96,
+ 73.68,
+ 70.29,
+ 69.24,
+ 63.728,
+ 73.23,
+ 73.47,
+ 67.64,
+ 64.39,
+ 66.8,
+ 64.531,
+ 70.33,
+ 69.15,
+ 69.69,
+ 73.37,
+ 71.32,
+ 52.098,
+ 70.76
+ ],
+ "y":[
+ 2312.888958,
+ 10750.72111,
+ 10991.20676,
+ 1709.683679,
+ 4254.337839,
+ 5477.890018,
+ 10136.86713,
+ 13583.31351,
+ 9371.842561,
+ 10560.48553,
+ 12902.46291,
+ 6017.190733,
+ 7550.359877,
+ 10350.15906,
+ 6631.597314,
+ 8243.58234,
+ 4649.593785,
+ 12790.84956,
+ 13450.40151,
+ 5338.752143,
+ 4727.954889,
+ 4734.997586,
+ 6289.629157,
+ 7481.107598,
+ 7402.303395,
+ 5693.843879,
+ 12329.44192,
+ 20431.0927,
+ 2322.869908,
+ 12477.17707
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 11000948,
+ 4826015,
+ 2151895,
+ 512764,
+ 4919632,
+ 2961915,
+ 5793633,
+ 1523478,
+ 3150417,
+ 191689,
+ 17486434,
+ 1047924,
+ 3832408,
+ 89898,
+ 28173309,
+ 249220,
+ 1666618,
+ 25145372,
+ 455661,
+ 374020,
+ 7355248,
+ 3140003,
+ 627820,
+ 8678557,
+ 893143,
+ 1112796,
+ 1441863,
+ 5703324,
+ 3628608,
+ 4690372,
+ 1146757,
+ 701016,
+ 13056604,
+ 7788944,
+ 621392,
+ 4076008,
+ 41871351,
+ 358900,
+ 3051242,
+ 65345,
+ 3430243,
+ 2467895,
+ 3080153,
+ 18356657,
+ 11183227,
+ 370006,
+ 10863958,
+ 1528098,
+ 4286552,
+ 7688797,
+ 3421000,
+ 4277736
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 48.303,
+ 34,
+ 42.618,
+ 51.52,
+ 37.814,
+ 42.045,
+ 42.643,
+ 39.475,
+ 41.716,
+ 44.467,
+ 42.122,
+ 48.435,
+ 44.93,
+ 39.693,
+ 46.992,
+ 37.485,
+ 40.158,
+ 40.059,
+ 40.489,
+ 33.896,
+ 46.452,
+ 35.753,
+ 34.488,
+ 47.949,
+ 47.747,
+ 40.502,
+ 47.808,
+ 40.848,
+ 38.41,
+ 36.936,
+ 44.248,
+ 60.246,
+ 47.924,
+ 36.161,
+ 48.386,
+ 39.487,
+ 39.36,
+ 57.666,
+ 43,
+ 51.893,
+ 41.454,
+ 32.767,
+ 36.981,
+ 49.951,
+ 40.87,
+ 44.992,
+ 44.246,
+ 43.922,
+ 49.579,
+ 45.344,
+ 46.023,
+ 52.358
+ ],
+ "y":[
+ 2550.81688,
+ 4269.276742,
+ 949.4990641,
+ 983.6539764,
+ 722.5120206,
+ 355.2032273,
+ 1399.607441,
+ 1193.068753,
+ 1389.817618,
+ 1406.648278,
+ 896.3146335,
+ 2464.783157,
+ 1728.869428,
+ 3020.989263,
+ 1693.335853,
+ 582.8419714,
+ 380.9958433,
+ 419.4564161,
+ 6631.459222,
+ 599.650276,
+ 1190.041118,
+ 686.3736739,
+ 522.0343725,
+ 896.9663732,
+ 411.8006266,
+ 634.1951625,
+ 6757.030816,
+ 1643.38711,
+ 427.9010856,
+ 496.1743428,
+ 1055.896036,
+ 2529.067487,
+ 1566.353493,
+ 556.6863539,
+ 3173.215595,
+ 997.7661127,
+ 1150.927478,
+ 3173.72334,
+ 597.4730727,
+ 1071.551119,
+ 1654.988723,
+ 1116.639877,
+ 1369.488336,
+ 5768.729717,
+ 1959.593767,
+ 1856.182125,
+ 722.0038073,
+ 1067.53481,
+ 1660.30321,
+ 767.2717398,
+ 1452.725766,
+ 527.2721818
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 21283783,
+ 3593918,
+ 76039390,
+ 18985849,
+ 7961258,
+ 17009885,
+ 1345187,
+ 7254373,
+ 3453434,
+ 4681707,
+ 2747687,
+ 4208858,
+ 3880130,
+ 2090162,
+ 1665128,
+ 41121485,
+ 1590597,
+ 1215725,
+ 2009813,
+ 10516500,
+ 2448046,
+ 887498,
+ 186538000,
+ 2598466,
+ 8143375
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 65.142,
+ 43.428,
+ 55.665,
+ 71.3,
+ 57.924,
+ 57.863,
+ 62.842,
+ 65.246,
+ 53.459,
+ 54.64,
+ 52.307,
+ 46.954,
+ 43.59,
+ 48.041,
+ 65.61,
+ 58.299,
+ 48.632,
+ 61.817,
+ 64.361,
+ 49.096,
+ 69.62,
+ 64.9,
+ 70.21,
+ 68.253,
+ 60.77
+ ],
+ "y":[
+ 7133.166023,
+ 2180.972546,
+ 3336.585802,
+ 13462.48555,
+ 4519.094331,
+ 2492.351109,
+ 3460.937025,
+ 5180.75591,
+ 1662.137359,
+ 4086.114078,
+ 3776.803627,
+ 2750.364446,
+ 1796.589032,
+ 2291.156835,
+ 5246.107524,
+ 4581.609385,
+ 3634.364406,
+ 3536.540301,
+ 2148.027146,
+ 4957.037982,
+ 5108.34463,
+ 4997.523971,
+ 16173.14586,
+ 5603.357717,
+ 8422.974165
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 10794968,
+ 2488550
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 70.93,
+ 71.24
+ ],
+ "y":[
+ 12217.22686,
+ 13175.678
+ ]
+ }
+ ],
+ "name":"1962"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 11537966,
+ 202182,
+ 62821884,
+ 6960067,
+ 754550000,
+ 3722800,
+ 506000000,
+ 109343000,
+ 26538000,
+ 8519282,
+ 2693585,
+ 100825279,
+ 1255058,
+ 12617009,
+ 30131000,
+ 575003,
+ 2186894,
+ 10154878,
+ 1149500,
+ 25870271,
+ 11261690,
+ 714775,
+ 60641899,
+ 35356600,
+ 5618198,
+ 1977600,
+ 11737396,
+ 5680812,
+ 13648692,
+ 34024249,
+ 39463910,
+ 1142636,
+ 6740785
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 34.02,
+ 59.923,
+ 43.453,
+ 45.415,
+ 58.38112,
+ 70,
+ 47.193,
+ 45.964,
+ 52.469,
+ 54.459,
+ 70.75,
+ 71.43,
+ 51.629,
+ 59.942,
+ 57.716,
+ 64.624,
+ 63.87,
+ 59.371,
+ 51.253,
+ 49.379,
+ 41.472,
+ 46.988,
+ 49.8,
+ 56.393,
+ 49.901,
+ 67.946,
+ 64.266,
+ 53.655,
+ 67.5,
+ 58.285,
+ 47.838,
+ 51.631,
+ 36.984
+ ],
+ "y":[
+ 836.1971382,
+ 14804.6727,
+ 721.1860862,
+ 523.4323142,
+ 612.7056934,
+ 6197.962814,
+ 700.7706107,
+ 762.4317721,
+ 5906.731805,
+ 8931.459811,
+ 8393.741404,
+ 9847.788607,
+ 2741.796252,
+ 2143.540609,
+ 2029.228142,
+ 80894.88326,
+ 6006.983042,
+ 2277.742396,
+ 1226.04113,
+ 349,
+ 676.4422254,
+ 4720.942687,
+ 942.4082588,
+ 1814.12743,
+ 16903.04886,
+ 4977.41854,
+ 1135.514326,
+ 1881.923632,
+ 2643.858681,
+ 1295.46066,
+ 637.1232887,
+ 2649.715007,
+ 862.4421463
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 1984060,
+ 7376998,
+ 9556500,
+ 3585000,
+ 8310226,
+ 4174366,
+ 9835109,
+ 4838800,
+ 4605744,
+ 49569000,
+ 76368453,
+ 8716441,
+ 10223422,
+ 198676,
+ 2900100,
+ 52667100,
+ 501035,
+ 12596822,
+ 3786019,
+ 31785378,
+ 9103000,
+ 19284814,
+ 7971222,
+ 4442238,
+ 1646912,
+ 32850275,
+ 7867931,
+ 6063000,
+ 33411317,
+ 54959000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 66.22,
+ 70.14,
+ 70.94,
+ 64.79,
+ 70.42,
+ 68.5,
+ 70.38,
+ 72.96,
+ 69.83,
+ 71.55,
+ 70.8,
+ 71,
+ 69.5,
+ 73.73,
+ 71.08,
+ 71.06,
+ 67.178,
+ 73.82,
+ 74.08,
+ 69.61,
+ 66.6,
+ 66.8,
+ 66.914,
+ 70.98,
+ 69.18,
+ 71.44,
+ 74.16,
+ 72.77,
+ 54.336,
+ 71.36
+ ],
+ "y":[
+ 2760.196931,
+ 12834.6024,
+ 13149.04119,
+ 2172.352423,
+ 5577.0028,
+ 6960.297861,
+ 11399.44489,
+ 15937.21123,
+ 10921.63626,
+ 12999.91766,
+ 14745.62561,
+ 8513.097016,
+ 9326.64467,
+ 13319.89568,
+ 7655.568963,
+ 10022.40131,
+ 5907.850937,
+ 15363.25136,
+ 16361.87647,
+ 6557.152776,
+ 6361.517993,
+ 6470.866545,
+ 7991.707066,
+ 8412.902397,
+ 9405.489397,
+ 7993.512294,
+ 15258.29697,
+ 22966.14432,
+ 2826.356387,
+ 14142.85089
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 12760499,
+ 5247469,
+ 2427334,
+ 553541,
+ 5127935,
+ 3330989,
+ 6335506,
+ 1733638,
+ 3495967,
+ 217378,
+ 19941073,
+ 1179760,
+ 4744870,
+ 127617,
+ 31681188,
+ 259864,
+ 1820319,
+ 27860297,
+ 489004,
+ 439593,
+ 8490213,
+ 3451418,
+ 601287,
+ 10191512,
+ 996380,
+ 1279406,
+ 1759224,
+ 6334556,
+ 4147252,
+ 5212416,
+ 1230542,
+ 789309,
+ 14770296,
+ 8680909,
+ 706640,
+ 4534062,
+ 47287752,
+ 414024,
+ 3451079,
+ 70787,
+ 3965841,
+ 2662190,
+ 3428839,
+ 20997321,
+ 12716129,
+ 420690,
+ 12607312,
+ 1735550,
+ 4786986,
+ 8900294,
+ 3900000,
+ 4995432
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 51.407,
+ 35.985,
+ 44.885,
+ 53.298,
+ 40.697,
+ 43.548,
+ 44.799,
+ 41.478,
+ 43.601,
+ 46.472,
+ 44.056,
+ 52.04,
+ 47.35,
+ 42.074,
+ 49.293,
+ 38.987,
+ 42.189,
+ 42.115,
+ 44.598,
+ 35.857,
+ 48.072,
+ 37.197,
+ 35.492,
+ 50.654,
+ 48.492,
+ 41.536,
+ 50.227,
+ 42.881,
+ 39.487,
+ 38.487,
+ 46.289,
+ 61.557,
+ 50.335,
+ 38.113,
+ 51.159,
+ 40.118,
+ 41.04,
+ 60.542,
+ 44.1,
+ 54.425,
+ 43.563,
+ 34.113,
+ 38.977,
+ 51.927,
+ 42.858,
+ 46.633,
+ 45.757,
+ 46.769,
+ 52.053,
+ 48.051,
+ 47.768,
+ 53.995
+ ],
+ "y":[
+ 3246.991771,
+ 5522.776375,
+ 1035.831411,
+ 1214.709294,
+ 794.8265597,
+ 412.9775136,
+ 1508.453148,
+ 1136.056615,
+ 1196.810565,
+ 1876.029643,
+ 861.5932424,
+ 2677.939642,
+ 2052.050473,
+ 3020.050513,
+ 1814.880728,
+ 915.5960025,
+ 468.7949699,
+ 516.1186438,
+ 8358.761987,
+ 734.7829124,
+ 1125.69716,
+ 708.7595409,
+ 715.5806402,
+ 1056.736457,
+ 498.6390265,
+ 713.6036483,
+ 18772.75169,
+ 1634.047282,
+ 495.5147806,
+ 545.0098873,
+ 1421.145193,
+ 2475.387562,
+ 1711.04477,
+ 566.6691539,
+ 3793.694753,
+ 1054.384891,
+ 1014.514104,
+ 4021.175739,
+ 510.9637142,
+ 1384.840593,
+ 1612.404632,
+ 1206.043465,
+ 1284.73318,
+ 7114.477971,
+ 1687.997641,
+ 2613.101665,
+ 848.2186575,
+ 1477.59676,
+ 1932.360167,
+ 908.9185217,
+ 1777.077318,
+ 569.7950712
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 22934225,
+ 4040665,
+ 88049823,
+ 20819767,
+ 8858908,
+ 19764027,
+ 1588717,
+ 8139332,
+ 4049146,
+ 5432424,
+ 3232927,
+ 4690773,
+ 4318137,
+ 2500689,
+ 1861096,
+ 47995559,
+ 1865490,
+ 1405486,
+ 2287985,
+ 12132200,
+ 2648961,
+ 960155,
+ 198712000,
+ 2748579,
+ 9709552
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 65.634,
+ 45.032,
+ 57.632,
+ 72.13,
+ 60.523,
+ 59.963,
+ 65.424,
+ 68.29,
+ 56.751,
+ 56.678,
+ 55.855,
+ 50.016,
+ 46.243,
+ 50.924,
+ 67.51,
+ 60.11,
+ 51.884,
+ 64.071,
+ 64.951,
+ 51.445,
+ 71.1,
+ 65.4,
+ 70.76,
+ 68.468,
+ 63.479
+ ],
+ "y":[
+ 8052.953021,
+ 2586.886053,
+ 3429.864357,
+ 16076.58803,
+ 5106.654313,
+ 2678.729839,
+ 4161.727834,
+ 5690.268015,
+ 1653.723003,
+ 4579.074215,
+ 4358.595393,
+ 3242.531147,
+ 1452.057666,
+ 2538.269358,
+ 6124.703451,
+ 5754.733883,
+ 4643.393534,
+ 4421.009084,
+ 2299.376311,
+ 5788.09333,
+ 6929.277714,
+ 5621.368472,
+ 19530.36557,
+ 5444.61962,
+ 9541.474188
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 11872264,
+ 2728150
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 71.1,
+ 71.52
+ ],
+ "y":[
+ 14526.12465,
+ 14463.91893
+ ]
+ }
+ ],
+ "name":"1967"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 13079460,
+ 230800,
+ 70759295,
+ 7450606,
+ 862030000,
+ 4115700,
+ 567000000,
+ 121282000,
+ 30614000,
+ 10061506,
+ 3095893,
+ 107188273,
+ 1613551,
+ 14781241,
+ 33505000,
+ 841934,
+ 2680018,
+ 11441462,
+ 1320500,
+ 28466390,
+ 12412593,
+ 829050,
+ 69325921,
+ 40850141,
+ 6472756,
+ 2152400,
+ 13016733,
+ 6701172,
+ 15226039,
+ 39276153,
+ 44655014,
+ 1089572,
+ 7407075
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 36.088,
+ 63.3,
+ 45.252,
+ 40.317,
+ 63.11888,
+ 72,
+ 50.651,
+ 49.203,
+ 55.234,
+ 56.95,
+ 71.63,
+ 73.42,
+ 56.528,
+ 63.983,
+ 62.612,
+ 67.712,
+ 65.421,
+ 63.01,
+ 53.754,
+ 53.07,
+ 43.971,
+ 52.143,
+ 51.929,
+ 58.065,
+ 53.886,
+ 69.521,
+ 65.042,
+ 57.296,
+ 69.39,
+ 60.405,
+ 50.254,
+ 56.532,
+ 39.848
+ ],
+ "y":[
+ 739.9811058,
+ 18268.65839,
+ 630.2336265,
+ 421.6240257,
+ 676.9000921,
+ 8315.928145,
+ 724.032527,
+ 1111.107907,
+ 9613.818607,
+ 9576.037596,
+ 12786.93223,
+ 14778.78636,
+ 2110.856309,
+ 3701.621503,
+ 3030.87665,
+ 109347.867,
+ 7486.384341,
+ 2849.09478,
+ 1421.741975,
+ 357,
+ 674.7881296,
+ 10618.03855,
+ 1049.938981,
+ 1989.37407,
+ 24837.42865,
+ 8597.756202,
+ 1213.39553,
+ 2571.423014,
+ 4062.523897,
+ 1524.358936,
+ 699.5016441,
+ 3133.409277,
+ 1265.047031
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 2263554,
+ 7544201,
+ 9709100,
+ 3819000,
+ 8576200,
+ 4225310,
+ 9862158,
+ 4991596,
+ 4639657,
+ 51732000,
+ 78717088,
+ 8888628,
+ 10394091,
+ 209275,
+ 3024400,
+ 54365564,
+ 527678,
+ 13329874,
+ 3933004,
+ 33039545,
+ 8970450,
+ 20662648,
+ 8313288,
+ 4593433,
+ 1694510,
+ 34513161,
+ 8122293,
+ 6401400,
+ 37492953,
+ 56079000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 67.69,
+ 70.63,
+ 71.44,
+ 67.45,
+ 70.9,
+ 69.61,
+ 70.29,
+ 73.47,
+ 70.87,
+ 72.38,
+ 71,
+ 72.34,
+ 69.76,
+ 74.46,
+ 71.28,
+ 72.19,
+ 70.636,
+ 73.75,
+ 74.34,
+ 70.85,
+ 69.26,
+ 69.21,
+ 68.7,
+ 70.35,
+ 69.82,
+ 73.06,
+ 74.72,
+ 73.78,
+ 57.005,
+ 72.01
+ ],
+ "y":[
+ 3313.422188,
+ 16661.6256,
+ 16672.14356,
+ 2860.16975,
+ 6597.494398,
+ 9164.090127,
+ 13108.4536,
+ 18866.20721,
+ 14358.8759,
+ 16107.19171,
+ 18016.18027,
+ 12724.82957,
+ 10168.65611,
+ 15798.06362,
+ 9530.772896,
+ 12269.27378,
+ 7778.414017,
+ 18794.74567,
+ 18965.05551,
+ 8006.506993,
+ 9022.247417,
+ 8011.414402,
+ 10522.06749,
+ 9674.167626,
+ 12383.4862,
+ 10638.75131,
+ 17832.02464,
+ 27195.11304,
+ 3450.69638,
+ 15895.11641
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 14760787,
+ 5894858,
+ 2761407,
+ 619351,
+ 5433886,
+ 3529983,
+ 7021028,
+ 1927260,
+ 3899068,
+ 250027,
+ 23007669,
+ 1340458,
+ 6071696,
+ 178848,
+ 34807417,
+ 277603,
+ 2260187,
+ 30770372,
+ 537977,
+ 517101,
+ 9354120,
+ 3811387,
+ 625361,
+ 12044785,
+ 1116779,
+ 1482628,
+ 2183877,
+ 7082430,
+ 4730997,
+ 5828158,
+ 1332786,
+ 851334,
+ 16660670,
+ 9809596,
+ 821782,
+ 5060262,
+ 53740085,
+ 461633,
+ 3992121,
+ 76595,
+ 4588696,
+ 2879013,
+ 3840161,
+ 23935810,
+ 14597019,
+ 480105,
+ 14706593,
+ 2056351,
+ 5303507,
+ 10190285,
+ 4506497,
+ 5861135
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 54.518,
+ 37.928,
+ 47.014,
+ 56.024,
+ 43.591,
+ 44.057,
+ 47.049,
+ 43.457,
+ 45.569,
+ 48.944,
+ 45.989,
+ 54.907,
+ 49.801,
+ 44.366,
+ 51.137,
+ 40.516,
+ 44.142,
+ 43.515,
+ 48.69,
+ 38.308,
+ 49.875,
+ 38.842,
+ 36.486,
+ 53.559,
+ 49.767,
+ 42.614,
+ 52.773,
+ 44.851,
+ 41.766,
+ 39.977,
+ 48.437,
+ 62.944,
+ 52.862,
+ 40.328,
+ 53.867,
+ 40.546,
+ 42.821,
+ 64.274,
+ 44.6,
+ 56.48,
+ 45.815,
+ 35.4,
+ 40.973,
+ 53.696,
+ 45.083,
+ 49.552,
+ 47.62,
+ 49.759,
+ 55.602,
+ 51.016,
+ 50.107,
+ 55.635
+ ],
+ "y":[
+ 4182.663766,
+ 5473.288005,
+ 1085.796879,
+ 2263.611114,
+ 854.7359763,
+ 464.0995039,
+ 1684.146528,
+ 1070.013275,
+ 1104.103987,
+ 1937.577675,
+ 904.8960685,
+ 3213.152683,
+ 2378.201111,
+ 3694.212352,
+ 2024.008147,
+ 672.4122571,
+ 514.3242082,
+ 566.2439442,
+ 11401.94841,
+ 756.0868363,
+ 1178.223708,
+ 741.6662307,
+ 820.2245876,
+ 1222.359968,
+ 496.5815922,
+ 803.0054535,
+ 21011.49721,
+ 1748.562982,
+ 584.6219709,
+ 581.3688761,
+ 1586.851781,
+ 2575.484158,
+ 1930.194975,
+ 724.9178037,
+ 3746.080948,
+ 954.2092363,
+ 1698.388838,
+ 5047.658563,
+ 590.5806638,
+ 1532.985254,
+ 1597.712056,
+ 1353.759762,
+ 1254.576127,
+ 7765.962636,
+ 1659.652775,
+ 3364.836625,
+ 915.9850592,
+ 1649.660188,
+ 2753.285994,
+ 950.735869,
+ 1773.498265,
+ 799.3621758
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 24779799,
+ 4565872,
+ 100840058,
+ 22284500,
+ 9717524,
+ 22542890,
+ 1834796,
+ 8831348,
+ 4671329,
+ 6298651,
+ 3790903,
+ 5149581,
+ 4698301,
+ 2965146,
+ 1997616,
+ 55984294,
+ 2182908,
+ 1616384,
+ 2614104,
+ 13954700,
+ 2847132,
+ 975199,
+ 209896000,
+ 2829526,
+ 11515649
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 67.065,
+ 46.714,
+ 59.504,
+ 72.88,
+ 63.441,
+ 61.623,
+ 67.849,
+ 70.723,
+ 59.631,
+ 58.796,
+ 58.207,
+ 53.738,
+ 48.042,
+ 53.884,
+ 69,
+ 62.361,
+ 55.151,
+ 66.216,
+ 65.815,
+ 55.448,
+ 72.16,
+ 65.9,
+ 71.34,
+ 68.673,
+ 65.712
+ ],
+ "y":[
+ 9443.038526,
+ 2980.331339,
+ 4985.711467,
+ 18970.57086,
+ 5494.024437,
+ 3264.660041,
+ 5118.146939,
+ 5305.445256,
+ 2189.874499,
+ 5280.99471,
+ 4520.246008,
+ 4031.408271,
+ 1654.456946,
+ 2529.842345,
+ 7433.889293,
+ 6809.40669,
+ 4688.593267,
+ 5364.249663,
+ 2523.337977,
+ 5937.827283,
+ 9123.041742,
+ 6619.551419,
+ 21806.03594,
+ 5703.408898,
+ 10505.25966
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 13177000,
+ 2929100
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 71.93,
+ 71.89
+ ],
+ "y":[
+ 16788.62948,
+ 16046.03728
+ ]
+ }
+ ],
+ "name":"1972"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 14880372,
+ 297410,
+ 80428306,
+ 6978607,
+ 943455000,
+ 4583700,
+ 634000000,
+ 136725000,
+ 35480679,
+ 11882916,
+ 3495918,
+ 113872473,
+ 1937652,
+ 16325320,
+ 36436000,
+ 1140357,
+ 3115787,
+ 12845381,
+ 1528000,
+ 31528087,
+ 13933198,
+ 1004533,
+ 78152686,
+ 46850962,
+ 8128505,
+ 2325300,
+ 14116836,
+ 7932503,
+ 16785196,
+ 44148285,
+ 50533506,
+ 1261091,
+ 8403990
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 38.438,
+ 65.593,
+ 46.923,
+ 31.22,
+ 63.96736,
+ 73.6,
+ 54.208,
+ 52.702,
+ 57.702,
+ 60.413,
+ 73.06,
+ 75.38,
+ 61.134,
+ 67.159,
+ 64.766,
+ 69.343,
+ 66.099,
+ 65.256,
+ 55.491,
+ 56.059,
+ 46.748,
+ 57.367,
+ 54.043,
+ 60.06,
+ 58.69,
+ 70.795,
+ 65.949,
+ 61.195,
+ 70.59,
+ 62.494,
+ 55.764,
+ 60.765,
+ 44.175
+ ],
+ "y":[
+ 786.11336,
+ 19340.10196,
+ 659.8772322,
+ 524.9721832,
+ 741.2374699,
+ 11186.14125,
+ 813.337323,
+ 1382.702056,
+ 11888.59508,
+ 14688.23507,
+ 13306.61921,
+ 16610.37701,
+ 2852.351568,
+ 4106.301249,
+ 4657.22102,
+ 59265.47714,
+ 8659.696836,
+ 3827.921571,
+ 1647.511665,
+ 371,
+ 694.1124398,
+ 11848.34392,
+ 1175.921193,
+ 2373.204287,
+ 34167.7626,
+ 11210.08948,
+ 1348.775651,
+ 3195.484582,
+ 5596.519826,
+ 1961.224635,
+ 713.5371196,
+ 3682.831494,
+ 1829.765177
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 2509048,
+ 7568430,
+ 9821800,
+ 4086000,
+ 8797022,
+ 4318673,
+ 10161915,
+ 5088419,
+ 4738902,
+ 53165019,
+ 78160773,
+ 9308479,
+ 10637171,
+ 221823,
+ 3271900,
+ 56059245,
+ 560073,
+ 13852989,
+ 4043205,
+ 34621254,
+ 9662600,
+ 21658597,
+ 8686367,
+ 4827803,
+ 1746919,
+ 36439000,
+ 8251648,
+ 6316424,
+ 42404033,
+ 56179000
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 68.93,
+ 72.17,
+ 72.8,
+ 69.86,
+ 70.81,
+ 70.64,
+ 70.71,
+ 74.69,
+ 72.52,
+ 73.83,
+ 72.5,
+ 73.68,
+ 69.95,
+ 76.11,
+ 72.03,
+ 73.48,
+ 73.066,
+ 75.24,
+ 75.37,
+ 70.67,
+ 70.41,
+ 69.46,
+ 70.3,
+ 70.45,
+ 70.97,
+ 74.39,
+ 75.44,
+ 75.39,
+ 59.507,
+ 72.76
+ ],
+ "y":[
+ 3533.00391,
+ 19749.4223,
+ 19117.97448,
+ 3528.481305,
+ 7612.240438,
+ 11305.38517,
+ 14800.16062,
+ 20422.9015,
+ 15605.42283,
+ 18292.63514,
+ 20512.92123,
+ 14195.52428,
+ 11674.83737,
+ 19654.96247,
+ 11150.98113,
+ 14255.98475,
+ 9595.929905,
+ 21209.0592,
+ 23311.34939,
+ 9508.141454,
+ 10172.48572,
+ 9356.39724,
+ 12980.66956,
+ 10922.66404,
+ 15277.03017,
+ 13236.92117,
+ 18855.72521,
+ 26982.29052,
+ 4269.122326,
+ 17428.74846
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 17152804,
+ 6162675,
+ 3168267,
+ 781472,
+ 5889574,
+ 3834415,
+ 7959865,
+ 2167533,
+ 4388260,
+ 304739,
+ 26480870,
+ 1536769,
+ 7459574,
+ 228694,
+ 38783863,
+ 192675,
+ 2512642,
+ 34617799,
+ 706367,
+ 608274,
+ 10538093,
+ 4227026,
+ 745228,
+ 14500404,
+ 1251524,
+ 1703617,
+ 2721783,
+ 8007166,
+ 5637246,
+ 6491649,
+ 1456688,
+ 913025,
+ 18396941,
+ 11127868,
+ 977026,
+ 5682086,
+ 62209173,
+ 492095,
+ 4657072,
+ 86796,
+ 5260855,
+ 3140897,
+ 4353666,
+ 27129932,
+ 17104986,
+ 551425,
+ 17129565,
+ 2308582,
+ 6005061,
+ 11457758,
+ 5216550,
+ 6642107
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 58.014,
+ 39.483,
+ 49.19,
+ 59.319,
+ 46.137,
+ 45.91,
+ 49.355,
+ 46.775,
+ 47.383,
+ 50.939,
+ 47.804,
+ 55.625,
+ 52.374,
+ 46.519,
+ 53.319,
+ 42.024,
+ 44.535,
+ 44.51,
+ 52.79,
+ 41.842,
+ 51.756,
+ 40.762,
+ 37.465,
+ 56.155,
+ 52.208,
+ 43.764,
+ 57.442,
+ 46.881,
+ 43.767,
+ 41.714,
+ 50.852,
+ 64.93,
+ 55.73,
+ 42.495,
+ 56.437,
+ 41.291,
+ 44.514,
+ 67.064,
+ 45,
+ 58.55,
+ 48.879,
+ 36.788,
+ 41.974,
+ 55.527,
+ 47.8,
+ 52.537,
+ 49.919,
+ 52.887,
+ 59.837,
+ 50.35,
+ 51.386,
+ 57.674
+ ],
+ "y":[
+ 4910.416756,
+ 3008.647355,
+ 1029.161251,
+ 3214.857818,
+ 743.3870368,
+ 556.1032651,
+ 1783.432873,
+ 1109.374338,
+ 1133.98495,
+ 1172.603047,
+ 795.757282,
+ 3259.178978,
+ 2517.736547,
+ 3081.761022,
+ 2785.493582,
+ 958.5668124,
+ 505.7538077,
+ 556.8083834,
+ 21745.57328,
+ 884.7552507,
+ 993.2239571,
+ 874.6858643,
+ 764.7259628,
+ 1267.613204,
+ 745.3695408,
+ 640.3224383,
+ 21951.21176,
+ 1544.228586,
+ 663.2236766,
+ 686.3952693,
+ 1497.492223,
+ 3710.982963,
+ 2370.619976,
+ 502.3197334,
+ 3876.485958,
+ 808.8970728,
+ 1981.951806,
+ 4319.804067,
+ 670.0806011,
+ 1737.561657,
+ 1561.769116,
+ 1348.285159,
+ 1450.992513,
+ 8028.651439,
+ 2202.988423,
+ 3781.410618,
+ 962.4922932,
+ 1532.776998,
+ 3120.876811,
+ 843.7331372,
+ 1588.688299,
+ 685.5876821
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 26983828,
+ 5079716,
+ 114313951,
+ 23796400,
+ 10599793,
+ 25094412,
+ 2108457,
+ 9537988,
+ 5302800,
+ 7278866,
+ 4282586,
+ 5703430,
+ 4908554,
+ 3055235,
+ 2156814,
+ 63759976,
+ 2554598,
+ 1839782,
+ 2984494,
+ 15990099,
+ 3080828,
+ 1039009,
+ 220239000,
+ 2873520,
+ 13503563
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 68.481,
+ 50.023,
+ 61.489,
+ 74.21,
+ 67.052,
+ 63.837,
+ 70.75,
+ 72.649,
+ 61.788,
+ 61.31,
+ 56.696,
+ 56.029,
+ 49.923,
+ 57.402,
+ 70.11,
+ 65.032,
+ 57.47,
+ 68.681,
+ 66.353,
+ 58.447,
+ 73.44,
+ 68.3,
+ 73.38,
+ 69.481,
+ 67.456
+ ],
+ "y":[
+ 10079.02674,
+ 3548.097832,
+ 6660.118654,
+ 22090.88306,
+ 4756.763836,
+ 3815.80787,
+ 5926.876967,
+ 6380.494966,
+ 2681.9889,
+ 6679.62326,
+ 5138.922374,
+ 4879.992748,
+ 1874.298931,
+ 3203.208066,
+ 6650.195573,
+ 7674.929108,
+ 5486.371089,
+ 5351.912144,
+ 3248.373311,
+ 6281.290855,
+ 9770.524921,
+ 7899.554209,
+ 24072.63213,
+ 6504.339663,
+ 13143.95095
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 14074100,
+ 3164900
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 73.49,
+ 72.22
+ ],
+ "y":[
+ 18334.19751,
+ 16233.7177
+ ]
+ }
+ ],
+ "name":"1977"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 12881816,
+ 377967,
+ 93074406,
+ 7272485,
+ 1000281000,
+ 5264500,
+ 708000000,
+ 153343000,
+ 43072751,
+ 14173318,
+ 3858421,
+ 118454974,
+ 2347031,
+ 17647518,
+ 39326000,
+ 1497494,
+ 3086876,
+ 14441916,
+ 1756032,
+ 34680442,
+ 15796314,
+ 1301048,
+ 91462088,
+ 53456774,
+ 11254672,
+ 2651869,
+ 15410151,
+ 9410494,
+ 18501390,
+ 48827160,
+ 56142181,
+ 1425876,
+ 9657618
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 39.854,
+ 69.052,
+ 50.009,
+ 50.957,
+ 65.525,
+ 75.45,
+ 56.596,
+ 56.159,
+ 59.62,
+ 62.038,
+ 74.45,
+ 77.11,
+ 63.739,
+ 69.1,
+ 67.123,
+ 71.309,
+ 66.983,
+ 68,
+ 57.489,
+ 58.056,
+ 49.594,
+ 62.728,
+ 56.158,
+ 62.082,
+ 63.012,
+ 71.76,
+ 68.757,
+ 64.59,
+ 72.16,
+ 64.597,
+ 58.816,
+ 64.406,
+ 49.113
+ ],
+ "y":[
+ 978.0114388,
+ 19211.14731,
+ 676.9818656,
+ 624.4754784,
+ 962.4213805,
+ 14560.53051,
+ 855.7235377,
+ 1516.872988,
+ 7608.334602,
+ 14517.90711,
+ 15367.0292,
+ 19384.10571,
+ 4161.415959,
+ 4106.525293,
+ 5622.942464,
+ 31354.03573,
+ 7640.519521,
+ 4920.355951,
+ 2000.603139,
+ 424,
+ 718.3730947,
+ 12954.79101,
+ 1443.429832,
+ 2603.273765,
+ 33693.17525,
+ 15169.16112,
+ 1648.079789,
+ 3761.837715,
+ 7426.354774,
+ 2393.219781,
+ 707.2357863,
+ 4336.032082,
+ 1977.55701
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 2780097,
+ 7574613,
+ 9856303,
+ 4172693,
+ 8892098,
+ 4413368,
+ 10303704,
+ 5117810,
+ 4826933,
+ 54433565,
+ 78335266,
+ 9786480,
+ 10705535,
+ 233997,
+ 3480000,
+ 56535636,
+ 562548,
+ 14310401,
+ 4114787,
+ 36227381,
+ 9859650,
+ 22356726,
+ 9032824,
+ 5048043,
+ 1861252,
+ 37983310,
+ 8325260,
+ 6468126,
+ 47328791,
+ 56339704
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 70.42,
+ 73.18,
+ 73.93,
+ 70.69,
+ 71.08,
+ 70.46,
+ 70.96,
+ 74.63,
+ 74.55,
+ 74.89,
+ 73.8,
+ 75.24,
+ 69.39,
+ 76.99,
+ 73.1,
+ 74.98,
+ 74.101,
+ 76.05,
+ 75.97,
+ 71.32,
+ 72.77,
+ 69.66,
+ 70.162,
+ 70.8,
+ 71.063,
+ 76.3,
+ 76.42,
+ 76.21,
+ 61.036,
+ 74.04
+ ],
+ "y":[
+ 3630.880722,
+ 21597.08362,
+ 20979.84589,
+ 4126.613157,
+ 8224.191647,
+ 13221.82184,
+ 15377.22855,
+ 21688.04048,
+ 18533.15761,
+ 20293.89746,
+ 22031.53274,
+ 15268.42089,
+ 12545.99066,
+ 23269.6075,
+ 12618.32141,
+ 16537.4835,
+ 11222.58762,
+ 21399.46046,
+ 26298.63531,
+ 8451.531004,
+ 11753.84291,
+ 9605.314053,
+ 15181.0927,
+ 11348.54585,
+ 17866.72175,
+ 13926.16997,
+ 20667.38125,
+ 28397.71512,
+ 4241.356344,
+ 18232.42452
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 20033753,
+ 7016384,
+ 3641603,
+ 970347,
+ 6634596,
+ 4580410,
+ 9250831,
+ 2476971,
+ 4875118,
+ 348643,
+ 30646495,
+ 1774735,
+ 9025951,
+ 305991,
+ 45681811,
+ 285483,
+ 2637297,
+ 38111756,
+ 753874,
+ 715523,
+ 11400338,
+ 4710497,
+ 825987,
+ 17661452,
+ 1411807,
+ 1956875,
+ 3344074,
+ 9171477,
+ 6502825,
+ 6998256,
+ 1622136,
+ 992040,
+ 20198730,
+ 12587223,
+ 1099010,
+ 6437188,
+ 73039376,
+ 517810,
+ 5507565,
+ 98593,
+ 6147783,
+ 3464522,
+ 5828892,
+ 31140029,
+ 20367053,
+ 649901,
+ 19844382,
+ 2644765,
+ 6734098,
+ 12939400,
+ 6100407,
+ 7636524
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 61.368,
+ 39.942,
+ 50.904,
+ 61.484,
+ 48.122,
+ 47.471,
+ 52.961,
+ 48.295,
+ 49.517,
+ 52.933,
+ 47.784,
+ 56.695,
+ 53.983,
+ 48.812,
+ 56.006,
+ 43.662,
+ 43.89,
+ 44.916,
+ 56.564,
+ 45.58,
+ 53.744,
+ 42.891,
+ 39.327,
+ 58.766,
+ 55.078,
+ 44.852,
+ 62.155,
+ 48.969,
+ 45.642,
+ 43.916,
+ 53.599,
+ 66.711,
+ 59.65,
+ 42.795,
+ 58.968,
+ 42.598,
+ 45.826,
+ 69.885,
+ 46.218,
+ 60.351,
+ 52.379,
+ 38.445,
+ 42.955,
+ 58.161,
+ 50.338,
+ 55.561,
+ 50.608,
+ 55.471,
+ 64.048,
+ 49.849,
+ 51.821,
+ 60.363
+ ],
+ "y":[
+ 5745.160213,
+ 2756.953672,
+ 1277.897616,
+ 4551.14215,
+ 807.1985855,
+ 559.603231,
+ 2367.983282,
+ 956.7529907,
+ 797.9081006,
+ 1267.100083,
+ 673.7478181,
+ 4879.507522,
+ 2602.710169,
+ 2879.468067,
+ 3503.729636,
+ 927.8253427,
+ 524.8758493,
+ 577.8607471,
+ 15113.36194,
+ 835.8096108,
+ 876.032569,
+ 857.2503577,
+ 838.1239671,
+ 1348.225791,
+ 797.2631074,
+ 572.1995694,
+ 17364.27538,
+ 1302.878658,
+ 632.8039209,
+ 618.0140641,
+ 1481.150189,
+ 3688.037739,
+ 2702.620356,
+ 462.2114149,
+ 4191.100511,
+ 909.7221354,
+ 1576.97375,
+ 5267.219353,
+ 881.5706467,
+ 1890.218117,
+ 1518.479984,
+ 1465.010784,
+ 1176.807031,
+ 8568.266228,
+ 1895.544073,
+ 3895.384018,
+ 874.2426069,
+ 1344.577953,
+ 3560.233174,
+ 682.2662268,
+ 1408.678565,
+ 788.8550411
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 29341374,
+ 5642224,
+ 128962939,
+ 25201900,
+ 11487112,
+ 27764644,
+ 2424367,
+ 9789224,
+ 5968349,
+ 8365850,
+ 4474873,
+ 6395630,
+ 5198399,
+ 3669448,
+ 2298309,
+ 71640904,
+ 2979423,
+ 2036305,
+ 3366439,
+ 18125129,
+ 3279001,
+ 1116479,
+ 232187835,
+ 2953997,
+ 15620766
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 69.942,
+ 53.859,
+ 63.336,
+ 75.76,
+ 70.565,
+ 66.653,
+ 73.45,
+ 73.717,
+ 63.727,
+ 64.342,
+ 56.604,
+ 58.137,
+ 51.461,
+ 60.909,
+ 71.21,
+ 67.405,
+ 59.298,
+ 70.472,
+ 66.874,
+ 61.406,
+ 73.75,
+ 68.832,
+ 74.65,
+ 70.805,
+ 68.557
+ ],
+ "y":[
+ 8997.897412,
+ 3156.510452,
+ 7030.835878,
+ 22898.79214,
+ 5095.665738,
+ 4397.575659,
+ 5262.734751,
+ 7316.918107,
+ 2861.092386,
+ 7213.791267,
+ 4098.344175,
+ 4820.49479,
+ 2011.159549,
+ 3121.760794,
+ 6068.05135,
+ 9611.147541,
+ 3470.338156,
+ 7009.601598,
+ 4258.503604,
+ 6434.501797,
+ 10330.98915,
+ 9119.528607,
+ 25009.55914,
+ 6920.223051,
+ 11152.41011
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 15184200,
+ 3210650
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 74.74,
+ 73.84
+ ],
+ "y":[
+ 19477.00928,
+ 17632.4104
+ ]
+ }
+ ],
+ "name":"1982"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 13867957,
+ 454612,
+ 103764241,
+ 8371791,
+ 1084035000,
+ 5584510,
+ 788000000,
+ 169276000,
+ 51889696,
+ 16543189,
+ 4203148,
+ 122091325,
+ 2820042,
+ 19067554,
+ 41622000,
+ 1891487,
+ 3089353,
+ 16331785,
+ 2015133,
+ 38028578,
+ 17917180,
+ 1593882,
+ 105186881,
+ 60017788,
+ 14619745,
+ 2794552,
+ 16495304,
+ 11242847,
+ 19757799,
+ 52910342,
+ 62826491,
+ 1691210,
+ 11219340
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 40.822,
+ 70.75,
+ 52.819,
+ 53.914,
+ 67.274,
+ 76.2,
+ 58.553,
+ 60.137,
+ 63.04,
+ 65.044,
+ 75.6,
+ 78.67,
+ 65.869,
+ 70.647,
+ 69.81,
+ 74.174,
+ 67.926,
+ 69.5,
+ 60.222,
+ 58.339,
+ 52.537,
+ 67.734,
+ 58.245,
+ 64.151,
+ 66.295,
+ 73.56,
+ 69.011,
+ 66.974,
+ 73.4,
+ 66.084,
+ 62.82,
+ 67.046,
+ 52.922
+ ],
+ "y":[
+ 852.3959448,
+ 18524.02406,
+ 751.9794035,
+ 683.8955732,
+ 1378.904018,
+ 20038.47269,
+ 976.5126756,
+ 1748.356961,
+ 6642.881371,
+ 11643.57268,
+ 17122.47986,
+ 22375.94189,
+ 4448.679912,
+ 4106.492315,
+ 8533.088805,
+ 28118.42998,
+ 5377.091329,
+ 5249.802653,
+ 2338.008304,
+ 385,
+ 775.6324501,
+ 18115.22313,
+ 1704.686583,
+ 2189.634995,
+ 21198.26136,
+ 18861.53081,
+ 1876.766827,
+ 3116.774285,
+ 11054.56175,
+ 2982.653773,
+ 820.7994449,
+ 5107.197384,
+ 1971.741538
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 3075321,
+ 7578903,
+ 9870200,
+ 4338977,
+ 8971958,
+ 4484310,
+ 10311597,
+ 5127024,
+ 4931729,
+ 55630100,
+ 77718298,
+ 9974490,
+ 10612740,
+ 244676,
+ 3539900,
+ 56729703,
+ 569473,
+ 14665278,
+ 4186147,
+ 37740710,
+ 9915289,
+ 22686371,
+ 9230783,
+ 5199318,
+ 1945870,
+ 38880702,
+ 8421403,
+ 6649942,
+ 52881328,
+ 56981620
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 72,
+ 74.94,
+ 75.35,
+ 71.14,
+ 71.34,
+ 71.52,
+ 71.58,
+ 74.8,
+ 74.83,
+ 76.34,
+ 74.847,
+ 76.67,
+ 69.58,
+ 77.23,
+ 74.36,
+ 76.42,
+ 74.865,
+ 76.83,
+ 75.89,
+ 70.98,
+ 74.06,
+ 69.53,
+ 71.218,
+ 71.08,
+ 72.25,
+ 76.9,
+ 77.19,
+ 77.41,
+ 63.108,
+ 75.007
+ ],
+ "y":[
+ 3738.932735,
+ 23687.82607,
+ 22525.56308,
+ 4314.114757,
+ 8239.854824,
+ 13822.58394,
+ 16310.4434,
+ 25116.17581,
+ 21141.01223,
+ 22066.44214,
+ 24639.18566,
+ 16120.52839,
+ 12986.47998,
+ 26923.20628,
+ 13872.86652,
+ 19207.23482,
+ 11732.51017,
+ 23651.32361,
+ 31540.9748,
+ 9082.351172,
+ 13039.30876,
+ 9696.273295,
+ 15870.87851,
+ 12037.26758,
+ 18678.53492,
+ 15764.98313,
+ 23586.92927,
+ 30281.70459,
+ 5089.043686,
+ 21664.78767
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 23254956,
+ 7874230,
+ 4243788,
+ 1151184,
+ 7586551,
+ 5126023,
+ 10780667,
+ 2840009,
+ 5498955,
+ 395114,
+ 35481645,
+ 2064095,
+ 10761098,
+ 311025,
+ 52799062,
+ 341244,
+ 2915959,
+ 42999530,
+ 880397,
+ 848406,
+ 14168101,
+ 5650262,
+ 927524,
+ 21198082,
+ 1599200,
+ 2269414,
+ 3799845,
+ 10568642,
+ 7824747,
+ 7634008,
+ 1841240,
+ 1042663,
+ 22987397,
+ 12891952,
+ 1278184,
+ 7332638,
+ 81551520,
+ 562035,
+ 6349365,
+ 110812,
+ 7171347,
+ 3868905,
+ 6921858,
+ 35933379,
+ 24725960,
+ 779348,
+ 23040630,
+ 3154264,
+ 7724976,
+ 15283050,
+ 7272406,
+ 9216418
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 65.799,
+ 39.906,
+ 52.337,
+ 63.622,
+ 49.557,
+ 48.211,
+ 54.985,
+ 50.485,
+ 51.051,
+ 54.926,
+ 47.412,
+ 57.47,
+ 54.655,
+ 50.04,
+ 59.797,
+ 45.664,
+ 46.453,
+ 46.684,
+ 60.19,
+ 49.265,
+ 55.729,
+ 45.552,
+ 41.245,
+ 59.339,
+ 57.18,
+ 46.027,
+ 66.234,
+ 49.35,
+ 47.457,
+ 46.364,
+ 56.145,
+ 68.74,
+ 62.677,
+ 42.861,
+ 60.835,
+ 44.555,
+ 46.886,
+ 71.913,
+ 44.02,
+ 61.728,
+ 55.769,
+ 40.006,
+ 44.501,
+ 60.834,
+ 51.744,
+ 57.678,
+ 51.535,
+ 56.941,
+ 66.894,
+ 51.509,
+ 50.821,
+ 62.351
+ ],
+ "y":[
+ 5681.358539,
+ 2430.208311,
+ 1225.85601,
+ 6205.88385,
+ 912.0631417,
+ 621.8188189,
+ 2602.664206,
+ 844.8763504,
+ 952.386129,
+ 1315.980812,
+ 672.774812,
+ 4201.194937,
+ 2156.956069,
+ 2880.102568,
+ 3885.46071,
+ 966.8968149,
+ 521.1341333,
+ 573.7413142,
+ 11864.40844,
+ 611.6588611,
+ 847.0061135,
+ 805.5724718,
+ 736.4153921,
+ 1361.936856,
+ 773.9932141,
+ 506.1138573,
+ 11770.5898,
+ 1155.441948,
+ 635.5173634,
+ 684.1715576,
+ 1421.603576,
+ 4783.586903,
+ 2755.046991,
+ 389.8761846,
+ 3693.731337,
+ 668.3000228,
+ 1385.029563,
+ 5303.377488,
+ 847.991217,
+ 1516.525457,
+ 1441.72072,
+ 1294.447788,
+ 1093.244963,
+ 7825.823398,
+ 1507.819159,
+ 3984.839812,
+ 831.8220794,
+ 1202.201361,
+ 3810.419296,
+ 617.7244065,
+ 1213.315116,
+ 706.1573059
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 31620918,
+ 6156369,
+ 142938076,
+ 26549700,
+ 12463354,
+ 30964245,
+ 2799811,
+ 10239839,
+ 6655297,
+ 9545158,
+ 4842194,
+ 7326406,
+ 5756203,
+ 4372203,
+ 2326606,
+ 80122492,
+ 3344353,
+ 2253639,
+ 3886512,
+ 20195924,
+ 3444468,
+ 1191336,
+ 242803533,
+ 3045153,
+ 17910182
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 70.774,
+ 57.251,
+ 65.205,
+ 76.86,
+ 72.492,
+ 67.768,
+ 74.752,
+ 74.174,
+ 66.046,
+ 67.231,
+ 63.154,
+ 60.782,
+ 53.636,
+ 64.492,
+ 71.77,
+ 69.498,
+ 62.008,
+ 71.523,
+ 67.378,
+ 64.134,
+ 74.63,
+ 69.582,
+ 75.02,
+ 71.918,
+ 70.19
+ ],
+ "y":[
+ 9139.671389,
+ 2753.69149,
+ 7807.095818,
+ 26626.51503,
+ 5547.063754,
+ 4903.2191,
+ 5629.915318,
+ 7532.924763,
+ 2899.842175,
+ 6481.776993,
+ 4140.442097,
+ 4246.485974,
+ 1823.015995,
+ 3023.096699,
+ 6351.237495,
+ 8688.156003,
+ 2955.984375,
+ 7034.779161,
+ 3998.875695,
+ 6360.943444,
+ 12281.34191,
+ 7388.597823,
+ 29884.35041,
+ 7452.398969,
+ 9883.584648
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 16257249,
+ 3317166
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 76.32,
+ 74.32
+ ],
+ "y":[
+ 21888.88903,
+ 19007.19129
+ ]
+ }
+ ],
+ "name":"1987"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 16317921,
+ 529491,
+ 113704579,
+ 10150094,
+ 1164970000,
+ 5829696,
+ 872000000,
+ 184816000,
+ 60397973,
+ 17861905,
+ 4936550,
+ 124329269,
+ 3867409,
+ 20711375,
+ 43805450,
+ 1418095,
+ 3219994,
+ 18319502,
+ 2312802,
+ 40546538,
+ 20326209,
+ 1915208,
+ 120065004,
+ 67185766,
+ 16945857,
+ 3235865,
+ 17587060,
+ 13219062,
+ 20686918,
+ 56667095,
+ 69940728,
+ 2104779,
+ 13367997
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 41.674,
+ 72.601,
+ 56.018,
+ 55.803,
+ 68.69,
+ 77.601,
+ 60.223,
+ 62.681,
+ 65.742,
+ 59.461,
+ 76.93,
+ 79.36,
+ 68.015,
+ 69.978,
+ 72.244,
+ 75.19,
+ 69.292,
+ 70.693,
+ 61.271,
+ 59.32,
+ 55.727,
+ 71.197,
+ 60.838,
+ 66.458,
+ 68.768,
+ 75.788,
+ 70.379,
+ 69.249,
+ 74.26,
+ 67.298,
+ 67.662,
+ 69.718,
+ 55.599
+ ],
+ "y":[
+ 649.3413952,
+ 19035.57917,
+ 837.8101643,
+ 682.3031755,
+ 1655.784158,
+ 24757.60301,
+ 1164.406809,
+ 2383.140898,
+ 7235.653188,
+ 3745.640687,
+ 18051.52254,
+ 26824.89511,
+ 3431.593647,
+ 3726.063507,
+ 12104.27872,
+ 34932.91959,
+ 6890.806854,
+ 7277.912802,
+ 1785.402016,
+ 347,
+ 897.7403604,
+ 18616.70691,
+ 1971.829464,
+ 2279.324017,
+ 24841.61777,
+ 24769.8912,
+ 2153.739222,
+ 3340.542768,
+ 15215.6579,
+ 4616.896545,
+ 989.0231487,
+ 6017.654756,
+ 1879.496673
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 3326498,
+ 7914969,
+ 10045622,
+ 4256013,
+ 8658506,
+ 4494013,
+ 10315702,
+ 5171393,
+ 5041039,
+ 57374179,
+ 80597764,
+ 10325429,
+ 10348684,
+ 259012,
+ 3557761,
+ 56840847,
+ 621621,
+ 15174244,
+ 4286357,
+ 38370697,
+ 9927680,
+ 22797027,
+ 9826397,
+ 5302888,
+ 1999210,
+ 39549438,
+ 8718867,
+ 6995447,
+ 58179144,
+ 57866349
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 71.581,
+ 76.04,
+ 76.46,
+ 72.178,
+ 71.19,
+ 72.527,
+ 72.4,
+ 75.33,
+ 75.7,
+ 77.46,
+ 76.07,
+ 77.03,
+ 69.17,
+ 78.77,
+ 75.467,
+ 77.44,
+ 75.435,
+ 77.42,
+ 77.32,
+ 70.99,
+ 74.86,
+ 69.36,
+ 71.659,
+ 71.38,
+ 73.64,
+ 77.57,
+ 78.16,
+ 78.03,
+ 66.146,
+ 76.42
+ ],
+ "y":[
+ 2497.437901,
+ 27042.01868,
+ 25575.57069,
+ 2546.781445,
+ 6302.623438,
+ 8447.794873,
+ 14297.02122,
+ 26406.73985,
+ 20647.16499,
+ 24703.79615,
+ 26505.30317,
+ 17541.49634,
+ 10535.62855,
+ 25144.39201,
+ 17558.81555,
+ 22013.64486,
+ 7003.339037,
+ 26790.94961,
+ 33965.66115,
+ 7738.881247,
+ 16207.26663,
+ 6598.409903,
+ 9325.068238,
+ 9498.467723,
+ 14214.71681,
+ 18603.06452,
+ 23880.01683,
+ 31871.5303,
+ 5678.348271,
+ 22705.09254
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 26298373,
+ 8735988,
+ 4981671,
+ 1342614,
+ 8878303,
+ 5809236,
+ 12467171,
+ 3265124,
+ 6429417,
+ 454429,
+ 41672143,
+ 2409073,
+ 12772596,
+ 384156,
+ 59402198,
+ 387838,
+ 3668440,
+ 52088559,
+ 985739,
+ 1025384,
+ 16278738,
+ 6990574,
+ 1050938,
+ 25020539,
+ 1803195,
+ 1912974,
+ 4364501,
+ 12210395,
+ 10014249,
+ 8416215,
+ 2119465,
+ 1096202,
+ 25798239,
+ 13160731,
+ 1554253,
+ 8392818,
+ 93364244,
+ 622191,
+ 7290203,
+ 125911,
+ 8307920,
+ 4260884,
+ 6099799,
+ 39964159,
+ 28227588,
+ 962344,
+ 26605473,
+ 3747553,
+ 8523077,
+ 18252190,
+ 8381163,
+ 10704340
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 67.744,
+ 40.647,
+ 53.919,
+ 62.745,
+ 50.26,
+ 44.736,
+ 54.314,
+ 49.396,
+ 51.724,
+ 57.939,
+ 45.548,
+ 56.433,
+ 52.044,
+ 51.604,
+ 63.674,
+ 47.545,
+ 49.991,
+ 48.091,
+ 61.366,
+ 52.644,
+ 57.501,
+ 48.576,
+ 43.266,
+ 59.285,
+ 59.685,
+ 40.802,
+ 68.755,
+ 52.214,
+ 49.42,
+ 48.388,
+ 58.333,
+ 69.745,
+ 65.393,
+ 44.284,
+ 61.999,
+ 47.391,
+ 47.472,
+ 73.615,
+ 23.599,
+ 62.742,
+ 58.196,
+ 38.333,
+ 39.658,
+ 61.888,
+ 53.556,
+ 58.474,
+ 50.44,
+ 58.061,
+ 70.001,
+ 48.825,
+ 46.1,
+ 60.377
+ ],
+ "y":[
+ 5023.216647,
+ 2627.845685,
+ 1191.207681,
+ 7954.111645,
+ 931.7527731,
+ 631.6998778,
+ 1793.163278,
+ 747.9055252,
+ 1058.0643,
+ 1246.90737,
+ 457.7191807,
+ 4016.239529,
+ 1648.073791,
+ 2377.156192,
+ 3794.755195,
+ 1132.055034,
+ 582.8585102,
+ 421.3534653,
+ 13522.15752,
+ 665.6244126,
+ 925.060154,
+ 794.3484384,
+ 745.5398706,
+ 1341.921721,
+ 977.4862725,
+ 636.6229191,
+ 9640.138501,
+ 1040.67619,
+ 563.2000145,
+ 739.014375,
+ 1361.369784,
+ 6058.253846,
+ 2948.047252,
+ 410.8968239,
+ 3804.537999,
+ 581.182725,
+ 1619.848217,
+ 6101.255823,
+ 737.0685949,
+ 1428.777814,
+ 1367.899369,
+ 1068.696278,
+ 926.9602964,
+ 7225.069258,
+ 1492.197043,
+ 3553.0224,
+ 825.682454,
+ 1034.298904,
+ 4332.720164,
+ 644.1707969,
+ 1210.884633,
+ 693.4207856
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 33958947,
+ 6893451,
+ 155975974,
+ 28523502,
+ 13572994,
+ 34202721,
+ 3173216,
+ 10723260,
+ 7351181,
+ 10748394,
+ 5274649,
+ 8486949,
+ 6326682,
+ 5077347,
+ 2378618,
+ 88111030,
+ 4017939,
+ 2484997,
+ 4483945,
+ 22430449,
+ 3585176,
+ 1183669,
+ 256894189,
+ 3149262,
+ 20265563
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 71.868,
+ 59.957,
+ 67.057,
+ 77.95,
+ 74.126,
+ 68.421,
+ 75.713,
+ 74.414,
+ 68.457,
+ 69.613,
+ 66.798,
+ 63.373,
+ 55.089,
+ 66.399,
+ 71.766,
+ 71.455,
+ 65.843,
+ 72.462,
+ 68.225,
+ 66.458,
+ 73.911,
+ 69.862,
+ 76.09,
+ 72.752,
+ 71.15
+ ],
+ "y":[
+ 9308.41871,
+ 2961.699694,
+ 6950.283021,
+ 26342.88426,
+ 7596.125964,
+ 5444.648617,
+ 6160.416317,
+ 5592.843963,
+ 3044.214214,
+ 7103.702595,
+ 4444.2317,
+ 4439.45084,
+ 1456.309517,
+ 3081.694603,
+ 7404.923685,
+ 9472.384295,
+ 2170.151724,
+ 6618.74305,
+ 4196.411078,
+ 4446.380924,
+ 14641.58711,
+ 7370.990932,
+ 32003.93224,
+ 8137.004775,
+ 10733.92631
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 17481977,
+ 3437674
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 77.56,
+ 76.33
+ ],
+ "y":[
+ 23424.76683,
+ 18363.32494
+ ]
+ }
+ ],
+ "name":"1992"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 22227415,
+ 598561,
+ 123315288,
+ 11782962,
+ 1230075000,
+ 6495918,
+ 959000000,
+ 199278000,
+ 63327987,
+ 20775703,
+ 5531387,
+ 125956499,
+ 4526235,
+ 21585105,
+ 46173816,
+ 1765345,
+ 3430388,
+ 20476091,
+ 2494803,
+ 43247867,
+ 23001113,
+ 2283635,
+ 135564834,
+ 75012988,
+ 21229759,
+ 3802309,
+ 18698655,
+ 15081016,
+ 21628605,
+ 60216677,
+ 76048996,
+ 2826046,
+ 15826497
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 41.763,
+ 73.925,
+ 59.412,
+ 56.534,
+ 70.426,
+ 80,
+ 61.765,
+ 66.041,
+ 68.042,
+ 58.811,
+ 78.269,
+ 80.69,
+ 69.772,
+ 67.727,
+ 74.647,
+ 76.156,
+ 70.265,
+ 71.938,
+ 63.625,
+ 60.328,
+ 59.426,
+ 72.499,
+ 61.818,
+ 68.564,
+ 70.533,
+ 77.158,
+ 70.457,
+ 71.527,
+ 75.25,
+ 67.521,
+ 70.672,
+ 71.096,
+ 58.02
+ ],
+ "y":[
+ 635.341351,
+ 20292.01679,
+ 972.7700352,
+ 734.28517,
+ 2289.234136,
+ 28377.63219,
+ 1458.817442,
+ 3119.335603,
+ 8263.590301,
+ 3076.239795,
+ 20896.60924,
+ 28816.58499,
+ 3645.379572,
+ 1690.756814,
+ 15993.52796,
+ 40300.61996,
+ 8754.96385,
+ 10132.90964,
+ 1902.2521,
+ 415,
+ 1010.892138,
+ 19702.05581,
+ 2049.350521,
+ 2536.534925,
+ 20586.69019,
+ 33519.4766,
+ 2664.477257,
+ 4014.238972,
+ 20206.82098,
+ 5852.625497,
+ 1385.896769,
+ 7110.667619,
+ 2117.484526
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 3428038,
+ 8069876,
+ 10199787,
+ 3607000,
+ 8066057,
+ 4444595,
+ 10300707,
+ 5283663,
+ 5134406,
+ 58623428,
+ 82011073,
+ 10502372,
+ 10244684,
+ 271192,
+ 3667233,
+ 57479469,
+ 692651,
+ 15604464,
+ 4405672,
+ 38654957,
+ 10156415,
+ 22562458,
+ 10336594,
+ 5383010,
+ 2011612,
+ 39855442,
+ 8897619,
+ 7193761,
+ 63047647,
+ 58808266
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 72.95,
+ 77.51,
+ 77.53,
+ 73.244,
+ 70.32,
+ 73.68,
+ 74.01,
+ 76.11,
+ 77.13,
+ 78.64,
+ 77.34,
+ 77.869,
+ 71.04,
+ 78.95,
+ 76.122,
+ 78.82,
+ 75.445,
+ 78.03,
+ 78.32,
+ 72.75,
+ 75.97,
+ 69.72,
+ 72.232,
+ 72.71,
+ 75.13,
+ 78.77,
+ 79.39,
+ 79.37,
+ 68.835,
+ 77.218
+ ],
+ "y":[
+ 3193.054604,
+ 29095.92066,
+ 27561.19663,
+ 4766.355904,
+ 5970.38876,
+ 9875.604515,
+ 16048.51424,
+ 29804.34567,
+ 23723.9502,
+ 25889.78487,
+ 27788.88416,
+ 18747.69814,
+ 11712.7768,
+ 28061.09966,
+ 24521.94713,
+ 24675.02446,
+ 6465.613349,
+ 30246.13063,
+ 41283.16433,
+ 10159.58368,
+ 17641.03156,
+ 7346.547557,
+ 7914.320304,
+ 12126.23065,
+ 17161.10735,
+ 20445.29896,
+ 25266.59499,
+ 32135.32301,
+ 6601.429915,
+ 26074.53136
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 29072015,
+ 9875024,
+ 6066080,
+ 1536536,
+ 10352843,
+ 6121610,
+ 14195809,
+ 3696513,
+ 7562011,
+ 527982,
+ 47798986,
+ 2800947,
+ 14625967,
+ 417908,
+ 66134291,
+ 439971,
+ 4058319,
+ 59861301,
+ 1126189,
+ 1235767,
+ 18418288,
+ 8048834,
+ 1193708,
+ 28263827,
+ 1982823,
+ 2200725,
+ 4759670,
+ 14165114,
+ 10419991,
+ 9384984,
+ 2444741,
+ 1149818,
+ 28529501,
+ 16603334,
+ 1774766,
+ 9666252,
+ 106207839,
+ 684810,
+ 7212583,
+ 145608,
+ 9535314,
+ 4578212,
+ 6633514,
+ 42835005,
+ 32160729,
+ 1054486,
+ 30686889,
+ 4320890,
+ 9231669,
+ 21210254,
+ 9417789,
+ 11404948
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 69.152,
+ 40.963,
+ 54.777,
+ 52.556,
+ 50.324,
+ 45.326,
+ 52.199,
+ 46.066,
+ 51.573,
+ 60.66,
+ 42.587,
+ 52.962,
+ 47.991,
+ 53.157,
+ 67.217,
+ 48.245,
+ 53.378,
+ 49.402,
+ 60.461,
+ 55.861,
+ 58.556,
+ 51.455,
+ 44.873,
+ 54.407,
+ 55.558,
+ 42.221,
+ 71.555,
+ 54.978,
+ 47.495,
+ 49.903,
+ 60.43,
+ 70.736,
+ 67.66,
+ 46.344,
+ 58.909,
+ 51.313,
+ 47.464,
+ 74.772,
+ 36.087,
+ 63.306,
+ 60.187,
+ 39.897,
+ 43.795,
+ 60.236,
+ 55.373,
+ 54.289,
+ 48.466,
+ 58.39,
+ 71.973,
+ 44.578,
+ 40.238,
+ 46.809
+ ],
+ "y":[
+ 4797.295051,
+ 2277.140884,
+ 1232.975292,
+ 8647.142313,
+ 946.2949618,
+ 463.1151478,
+ 1694.337469,
+ 740.5063317,
+ 1004.961353,
+ 1173.618235,
+ 312.188423,
+ 3484.164376,
+ 1786.265407,
+ 1895.016984,
+ 4173.181797,
+ 2814.480755,
+ 913.47079,
+ 515.8894013,
+ 14722.84188,
+ 653.7301704,
+ 1005.245812,
+ 869.4497668,
+ 796.6644681,
+ 1360.485021,
+ 1186.147994,
+ 609.1739508,
+ 9467.446056,
+ 986.2958956,
+ 692.2758103,
+ 790.2579846,
+ 1483.136136,
+ 7425.705295,
+ 2982.101858,
+ 472.3460771,
+ 3899.52426,
+ 580.3052092,
+ 1624.941275,
+ 6071.941411,
+ 589.9445051,
+ 1339.076036,
+ 1392.368347,
+ 574.6481576,
+ 930.5964284,
+ 7479.188244,
+ 1632.210764,
+ 3876.76846,
+ 789.1862231,
+ 982.2869243,
+ 4876.798614,
+ 816.559081,
+ 1071.353818,
+ 792.4499603
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 36203463,
+ 7693188,
+ 168546719,
+ 30305843,
+ 14599929,
+ 37657830,
+ 3518107,
+ 10983007,
+ 7992357,
+ 11911819,
+ 5783439,
+ 9803875,
+ 6913545,
+ 5867957,
+ 2531311,
+ 95895146,
+ 4609572,
+ 2734531,
+ 5154123,
+ 24748122,
+ 3759430,
+ 1138101,
+ 272911760,
+ 3262838,
+ 22374398
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 73.275,
+ 62.05,
+ 69.388,
+ 78.61,
+ 75.816,
+ 70.313,
+ 77.26,
+ 76.151,
+ 69.957,
+ 72.312,
+ 69.535,
+ 66.322,
+ 56.671,
+ 67.659,
+ 72.262,
+ 73.67,
+ 68.426,
+ 73.738,
+ 69.4,
+ 68.386,
+ 74.917,
+ 69.465,
+ 76.81,
+ 74.223,
+ 72.146
+ ],
+ "y":[
+ 10967.28195,
+ 3326.143191,
+ 7957.980824,
+ 28954.92589,
+ 10118.05318,
+ 6117.361746,
+ 6677.045314,
+ 5431.990415,
+ 3614.101285,
+ 7429.455877,
+ 5154.825496,
+ 4684.313807,
+ 1341.726931,
+ 3160.454906,
+ 7121.924704,
+ 9767.29753,
+ 2253.023004,
+ 7113.692252,
+ 4247.400261,
+ 5838.347657,
+ 16999.4333,
+ 8792.573126,
+ 35767.43303,
+ 9230.240708,
+ 10165.49518
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 18565243,
+ 3676187
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 78.83,
+ 77.55
+ ],
+ "y":[
+ 26997.93657,
+ 21050.41377
+ ]
+ }
+ ],
+ "name":"1997"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 25268405,
+ 656397,
+ 135656790,
+ 12926707,
+ 1280400000,
+ 6762476,
+ 1034172547,
+ 211060000,
+ 66907826,
+ 24001816,
+ 6029529,
+ 127065841,
+ 5307470,
+ 22215365,
+ 47969150,
+ 2111561,
+ 3677780,
+ 22662365,
+ 2674234,
+ 45598081,
+ 25873917,
+ 2713462,
+ 153403524,
+ 82995088,
+ 24501530,
+ 4197776,
+ 19576783,
+ 17155814,
+ 22454239,
+ 62806748,
+ 80908147,
+ 3389578,
+ 18701257
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 42.129,
+ 74.795,
+ 62.013,
+ 56.752,
+ 72.028,
+ 81.495,
+ 62.879,
+ 68.588,
+ 69.451,
+ 57.046,
+ 79.696,
+ 82,
+ 71.263,
+ 66.662,
+ 77.045,
+ 76.904,
+ 71.028,
+ 73.044,
+ 65.033,
+ 59.908,
+ 61.34,
+ 74.193,
+ 63.61,
+ 70.303,
+ 71.626,
+ 78.77,
+ 70.815,
+ 73.053,
+ 76.99,
+ 68.564,
+ 73.017,
+ 72.37,
+ 60.308
+ ],
+ "y":[
+ 726.7340548,
+ 23403.55927,
+ 1136.39043,
+ 896.2260153,
+ 3119.280896,
+ 30209.01516,
+ 1746.769454,
+ 2873.91287,
+ 9240.761975,
+ 4390.717312,
+ 21905.59514,
+ 28604.5919,
+ 3844.917194,
+ 1646.758151,
+ 19233.98818,
+ 35110.10566,
+ 9313.93883,
+ 10206.97794,
+ 2140.739323,
+ 611,
+ 1057.206311,
+ 19774.83687,
+ 2092.712441,
+ 2650.921068,
+ 19014.54118,
+ 36023.1054,
+ 3015.378833,
+ 4090.925331,
+ 23235.42329,
+ 5913.187529,
+ 1764.456677,
+ 4515.487575,
+ 2234.820827
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 3508512,
+ 8148312,
+ 10311970,
+ 4165416,
+ 7661799,
+ 4481020,
+ 10256295,
+ 5374693,
+ 5193039,
+ 59925035,
+ 82350671,
+ 10603863,
+ 10083313,
+ 288030,
+ 3879155,
+ 57926999,
+ 720230,
+ 16122830,
+ 4535591,
+ 38625976,
+ 10433867,
+ 22404337,
+ 10111559,
+ 5410052,
+ 2011497,
+ 40152517,
+ 8954175,
+ 7361757,
+ 67308928,
+ 59912431
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 75.651,
+ 78.98,
+ 78.32,
+ 74.09,
+ 72.14,
+ 74.876,
+ 75.51,
+ 77.18,
+ 78.37,
+ 79.59,
+ 78.67,
+ 78.256,
+ 72.59,
+ 80.5,
+ 77.783,
+ 80.24,
+ 73.981,
+ 78.53,
+ 79.05,
+ 74.67,
+ 77.29,
+ 71.322,
+ 73.213,
+ 73.8,
+ 76.66,
+ 79.78,
+ 80.04,
+ 80.62,
+ 70.845,
+ 78.471
+ ],
+ "y":[
+ 4604.211737,
+ 32417.60769,
+ 30485.88375,
+ 6018.975239,
+ 7696.777725,
+ 11628.38895,
+ 17596.21022,
+ 32166.50006,
+ 28204.59057,
+ 28926.03234,
+ 30035.80198,
+ 22514.2548,
+ 14843.93556,
+ 31163.20196,
+ 34077.04939,
+ 27968.09817,
+ 6557.194282,
+ 33724.75778,
+ 44683.97525,
+ 12002.23908,
+ 19970.90787,
+ 7885.360081,
+ 7236.075251,
+ 13638.77837,
+ 20660.01936,
+ 24835.47166,
+ 29341.63093,
+ 34480.95771,
+ 6508.085718,
+ 29478.99919
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 31287142,
+ 10866106,
+ 7026113,
+ 1630347,
+ 12251209,
+ 7021078,
+ 15929988,
+ 4048013,
+ 8835739,
+ 614382,
+ 55379852,
+ 3328795,
+ 16252726,
+ 447416,
+ 73312559,
+ 495627,
+ 4414865,
+ 67946797,
+ 1299304,
+ 1457766,
+ 20550751,
+ 8807818,
+ 1332459,
+ 31386842,
+ 2046772,
+ 2814651,
+ 5368585,
+ 16473477,
+ 11824495,
+ 10580176,
+ 2828858,
+ 1200206,
+ 31167783,
+ 18473780,
+ 1972153,
+ 11140655,
+ 119901274,
+ 743981,
+ 7852401,
+ 170372,
+ 10870037,
+ 5359092,
+ 7753310,
+ 44433622,
+ 37090298,
+ 1130269,
+ 34593779,
+ 4977378,
+ 9770575,
+ 24739869,
+ 10595811,
+ 11926563
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 70.994,
+ 41.003,
+ 54.406,
+ 46.634,
+ 50.65,
+ 47.36,
+ 49.856,
+ 43.308,
+ 50.525,
+ 62.974,
+ 44.966,
+ 52.97,
+ 46.832,
+ 53.373,
+ 69.806,
+ 49.348,
+ 55.24,
+ 50.725,
+ 56.761,
+ 58.041,
+ 58.453,
+ 53.676,
+ 45.504,
+ 50.992,
+ 44.593,
+ 43.753,
+ 72.737,
+ 57.286,
+ 45.009,
+ 51.818,
+ 62.247,
+ 71.954,
+ 69.615,
+ 44.026,
+ 51.479,
+ 54.496,
+ 46.608,
+ 75.744,
+ 43.413,
+ 64.337,
+ 61.6,
+ 41.012,
+ 45.936,
+ 53.365,
+ 56.369,
+ 43.869,
+ 49.651,
+ 57.561,
+ 73.042,
+ 47.813,
+ 39.193,
+ 39.989
+ ],
+ "y":[
+ 5288.040382,
+ 2773.287312,
+ 1372.877931,
+ 11003.60508,
+ 1037.645221,
+ 446.4035126,
+ 1934.011449,
+ 738.6906068,
+ 1156.18186,
+ 1075.811558,
+ 241.1658765,
+ 3484.06197,
+ 1648.800823,
+ 1908.260867,
+ 4754.604414,
+ 7703.4959,
+ 765.3500015,
+ 530.0535319,
+ 12521.71392,
+ 660.5855997,
+ 1111.984578,
+ 945.5835837,
+ 575.7047176,
+ 1287.514732,
+ 1275.184575,
+ 531.4823679,
+ 9534.677467,
+ 894.6370822,
+ 665.4231186,
+ 951.4097518,
+ 1579.019543,
+ 9021.815894,
+ 3258.495584,
+ 633.6179466,
+ 4072.324751,
+ 601.0745012,
+ 1615.286395,
+ 6316.1652,
+ 785.6537648,
+ 1353.09239,
+ 1519.635262,
+ 699.489713,
+ 882.0818218,
+ 7710.946444,
+ 1993.398314,
+ 4128.116943,
+ 899.0742111,
+ 886.2205765,
+ 5722.895655,
+ 927.7210018,
+ 1071.613938,
+ 672.0386227
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 38331121,
+ 8445134,
+ 179914212,
+ 31902268,
+ 15497046,
+ 41008227,
+ 3834934,
+ 11226999,
+ 8650322,
+ 12921234,
+ 6353681,
+ 11178650,
+ 7607651,
+ 6677328,
+ 2664659,
+ 102479927,
+ 5146848,
+ 2990875,
+ 5884491,
+ 26769436,
+ 3859606,
+ 1101832,
+ 287675526,
+ 3363085,
+ 24287670
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 74.34,
+ 63.883,
+ 71.006,
+ 79.77,
+ 77.86,
+ 71.682,
+ 78.123,
+ 77.158,
+ 70.847,
+ 74.173,
+ 70.734,
+ 68.978,
+ 58.137,
+ 68.565,
+ 72.047,
+ 74.902,
+ 70.836,
+ 74.712,
+ 70.755,
+ 69.906,
+ 77.778,
+ 68.976,
+ 77.31,
+ 75.307,
+ 72.766
+ ],
+ "y":[
+ 8797.640716,
+ 3413.26269,
+ 8131.212843,
+ 33328.96507,
+ 10778.78385,
+ 5755.259962,
+ 7723.447195,
+ 6340.646683,
+ 4563.808154,
+ 5773.044512,
+ 5351.568666,
+ 4858.347495,
+ 1270.364932,
+ 3099.72866,
+ 6994.774861,
+ 10742.44053,
+ 2474.548819,
+ 7356.031934,
+ 3783.674243,
+ 5909.020073,
+ 18855.60618,
+ 11460.60023,
+ 39097.09955,
+ 7727.002004,
+ 8605.047831
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 19546792,
+ 3908037
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 80.37,
+ 79.11
+ ],
+ "y":[
+ 30687.75473,
+ 23189.80135
+ ]
+ }
+ ],
+ "name":"2002"
+ },
+ {
+ "data":[
+ {
+ "name":"Asia",
+ "text":[
+ "Afghanistan",
+ "Bahrain",
+ "Bangladesh",
+ "Cambodia",
+ "China",
+ "Hong Kong, China",
+ "India",
+ "Indonesia",
+ "Iran",
+ "Iraq",
+ "Israel",
+ "Japan",
+ "Jordan",
+ "Korea, Dem. Rep.",
+ "Korea, Rep.",
+ "Kuwait",
+ "Lebanon",
+ "Malaysia",
+ "Mongolia",
+ "Myanmar",
+ "Nepal",
+ "Oman",
+ "Pakistan",
+ "Philippines",
+ "Saudi Arabia",
+ "Singapore",
+ "Sri Lanka",
+ "Syria",
+ "Taiwan",
+ "Thailand",
+ "Vietnam",
+ "West Bank and Gaza",
+ "Yemen, Rep."
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 31889923,
+ 708573,
+ 150448339,
+ 14131858,
+ 1318683096,
+ 6980412,
+ 1110396331,
+ 223547000,
+ 69453570,
+ 27499638,
+ 6426679,
+ 127467972,
+ 6053193,
+ 23301725,
+ 49044790,
+ 2505559,
+ 3921278,
+ 24821286,
+ 2874127,
+ 47761980,
+ 28901790,
+ 3204897,
+ 169270617,
+ 91077287,
+ 27601038,
+ 4553009,
+ 20378239,
+ 19314747,
+ 23174294,
+ 65068149,
+ 85262356,
+ 4018332,
+ 22211743
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 43.828,
+ 75.635,
+ 64.062,
+ 59.723,
+ 72.961,
+ 82.208,
+ 64.698,
+ 70.65,
+ 70.964,
+ 59.545,
+ 80.745,
+ 82.603,
+ 72.535,
+ 67.297,
+ 78.623,
+ 77.588,
+ 71.993,
+ 74.241,
+ 66.803,
+ 62.069,
+ 63.785,
+ 75.64,
+ 65.483,
+ 71.688,
+ 72.777,
+ 79.972,
+ 72.396,
+ 74.143,
+ 78.4,
+ 70.616,
+ 74.249,
+ 73.422,
+ 62.698
+ ],
+ "y":[
+ 974.5803384,
+ 29796.04834,
+ 1391.253792,
+ 1713.778686,
+ 4959.114854,
+ 39724.97867,
+ 2452.210407,
+ 3540.651564,
+ 11605.71449,
+ 4471.061906,
+ 25523.2771,
+ 31656.06806,
+ 4519.461171,
+ 1593.06548,
+ 23348.13973,
+ 47306.98978,
+ 10461.05868,
+ 12451.6558,
+ 3095.772271,
+ 944,
+ 1091.359778,
+ 22316.19287,
+ 2605.94758,
+ 3190.481016,
+ 21654.83194,
+ 47143.17964,
+ 3970.095407,
+ 4184.548089,
+ 28718.27684,
+ 7458.396327,
+ 2441.576404,
+ 3025.349798,
+ 2280.769906
+ ]
+ },
+ {
+ "name":"Europe",
+ "text":[
+ "Albania",
+ "Austria",
+ "Belgium",
+ "Bosnia and Herzegovina",
+ "Bulgaria",
+ "Croatia",
+ "Czech Republic",
+ "Denmark",
+ "Finland",
+ "France",
+ "Germany",
+ "Greece",
+ "Hungary",
+ "Iceland",
+ "Ireland",
+ "Italy",
+ "Montenegro",
+ "Netherlands",
+ "Norway",
+ "Poland",
+ "Portugal",
+ "Romania",
+ "Serbia",
+ "Slovak Republic",
+ "Slovenia",
+ "Spain",
+ "Sweden",
+ "Switzerland",
+ "Turkey",
+ "United Kingdom"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 3600523,
+ 8199783,
+ 10392226,
+ 4552198,
+ 7322858,
+ 4493312,
+ 10228744,
+ 5468120,
+ 5238460,
+ 61083916,
+ 82400996,
+ 10706290,
+ 9956108,
+ 301931,
+ 4109086,
+ 58147733,
+ 684736,
+ 16570613,
+ 4627926,
+ 38518241,
+ 10642836,
+ 22276056,
+ 10150265,
+ 5447502,
+ 2009245,
+ 40448191,
+ 9031088,
+ 7554661,
+ 71158647,
+ 60776238
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 76.423,
+ 79.829,
+ 79.441,
+ 74.852,
+ 73.005,
+ 75.748,
+ 76.486,
+ 78.332,
+ 79.313,
+ 80.657,
+ 79.406,
+ 79.483,
+ 73.338,
+ 81.757,
+ 78.885,
+ 80.546,
+ 74.543,
+ 79.762,
+ 80.196,
+ 75.563,
+ 78.098,
+ 72.476,
+ 74.002,
+ 74.663,
+ 77.926,
+ 80.941,
+ 80.884,
+ 81.701,
+ 71.777,
+ 79.425
+ ],
+ "y":[
+ 5937.029526,
+ 36126.4927,
+ 33692.60508,
+ 7446.298803,
+ 10680.79282,
+ 14619.22272,
+ 22833.30851,
+ 35278.41874,
+ 33207.0844,
+ 30470.0167,
+ 32170.37442,
+ 27538.41188,
+ 18008.94444,
+ 36180.78919,
+ 40675.99635,
+ 28569.7197,
+ 9253.896111,
+ 36797.93332,
+ 49357.19017,
+ 15389.92468,
+ 20509.64777,
+ 10808.47561,
+ 9786.534714,
+ 18678.31435,
+ 25768.25759,
+ 28821.0637,
+ 33859.74835,
+ 37506.41907,
+ 8458.276384,
+ 33203.26128
+ ]
+ },
+ {
+ "name":"Africa",
+ "text":[
+ "Algeria",
+ "Angola",
+ "Benin",
+ "Botswana",
+ "Burkina Faso",
+ "Burundi",
+ "Cameroon",
+ "Central African Republic",
+ "Chad",
+ "Comoros",
+ "Congo, Dem. Rep.",
+ "Congo, Rep.",
+ "Cote d'Ivoire",
+ "Djibouti",
+ "Egypt",
+ "Equatorial Guinea",
+ "Eritrea",
+ "Ethiopia",
+ "Gabon",
+ "Gambia",
+ "Ghana",
+ "Guinea",
+ "Guinea-Bissau",
+ "Kenya",
+ "Lesotho",
+ "Liberia",
+ "Libya",
+ "Madagascar",
+ "Malawi",
+ "Mali",
+ "Mauritania",
+ "Mauritius",
+ "Morocco",
+ "Mozambique",
+ "Namibia",
+ "Niger",
+ "Nigeria",
+ "Reunion",
+ "Rwanda",
+ "Sao Tome and Principe",
+ "Senegal",
+ "Sierra Leone",
+ "Somalia",
+ "South Africa",
+ "Sudan",
+ "Swaziland",
+ "Tanzania",
+ "Togo",
+ "Tunisia",
+ "Uganda",
+ "Zambia",
+ "Zimbabwe"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 33333216,
+ 12420476,
+ 8078314,
+ 1639131,
+ 14326203,
+ 8390505,
+ 17696293,
+ 4369038,
+ 10238807,
+ 710960,
+ 64606759,
+ 3800610,
+ 18013409,
+ 496374,
+ 80264543,
+ 551201,
+ 4906585,
+ 76511887,
+ 1454867,
+ 1688359,
+ 22873338,
+ 9947814,
+ 1472041,
+ 35610177,
+ 2012649,
+ 3193942,
+ 6036914,
+ 19167654,
+ 13327079,
+ 12031795,
+ 3270065,
+ 1250882,
+ 33757175,
+ 19951656,
+ 2055080,
+ 12894865,
+ 135031164,
+ 798094,
+ 8860588,
+ 199579,
+ 12267493,
+ 6144562,
+ 9118773,
+ 43997828,
+ 42292929,
+ 1133066,
+ 38139640,
+ 5701579,
+ 10276158,
+ 29170398,
+ 11746035,
+ 12311143
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 72.301,
+ 42.731,
+ 56.728,
+ 50.728,
+ 52.295,
+ 49.58,
+ 50.43,
+ 44.741,
+ 50.651,
+ 65.152,
+ 46.462,
+ 55.322,
+ 48.328,
+ 54.791,
+ 71.338,
+ 51.579,
+ 58.04,
+ 52.947,
+ 56.735,
+ 59.448,
+ 60.022,
+ 56.007,
+ 46.388,
+ 54.11,
+ 42.592,
+ 45.678,
+ 73.952,
+ 59.443,
+ 48.303,
+ 54.467,
+ 64.164,
+ 72.801,
+ 71.164,
+ 42.082,
+ 52.906,
+ 56.867,
+ 46.859,
+ 76.442,
+ 46.242,
+ 65.528,
+ 63.062,
+ 42.568,
+ 48.159,
+ 49.339,
+ 58.556,
+ 39.613,
+ 52.517,
+ 58.42,
+ 73.923,
+ 51.542,
+ 42.384,
+ 43.487
+ ],
+ "y":[
+ 6223.367465,
+ 4797.231267,
+ 1441.284873,
+ 12569.85177,
+ 1217.032994,
+ 430.0706916,
+ 2042.09524,
+ 706.016537,
+ 1704.063724,
+ 986.1478792,
+ 277.5518587,
+ 3632.557798,
+ 1544.750112,
+ 2082.481567,
+ 5581.180998,
+ 12154.08975,
+ 641.3695236,
+ 690.8055759,
+ 13206.48452,
+ 752.7497265,
+ 1327.60891,
+ 942.6542111,
+ 579.231743,
+ 1463.249282,
+ 1569.331442,
+ 414.5073415,
+ 12057.49928,
+ 1044.770126,
+ 759.3499101,
+ 1042.581557,
+ 1803.151496,
+ 10956.99112,
+ 3820.17523,
+ 823.6856205,
+ 4811.060429,
+ 619.6768924,
+ 2013.977305,
+ 7670.122558,
+ 863.0884639,
+ 1598.435089,
+ 1712.472136,
+ 862.5407561,
+ 926.1410683,
+ 9269.657808,
+ 2602.394995,
+ 4513.480643,
+ 1107.482182,
+ 882.9699438,
+ 7092.923025,
+ 1056.380121,
+ 1271.211593,
+ 469.7092981
+ ]
+ },
+ {
+ "name":"Americas",
+ "text":[
+ "Argentina",
+ "Bolivia",
+ "Brazil",
+ "Canada",
+ "Chile",
+ "Colombia",
+ "Costa Rica",
+ "Cuba",
+ "Dominican Republic",
+ "Ecuador",
+ "El Salvador",
+ "Guatemala",
+ "Haiti",
+ "Honduras",
+ "Jamaica",
+ "Mexico",
+ "Nicaragua",
+ "Panama",
+ "Paraguay",
+ "Peru",
+ "Puerto Rico",
+ "Trinidad and Tobago",
+ "United States",
+ "Uruguay",
+ "Venezuela"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 40301927,
+ 9119152,
+ 190010647,
+ 33390141,
+ 16284741,
+ 44227550,
+ 4133884,
+ 11416987,
+ 9319622,
+ 13755680,
+ 6939688,
+ 12572928,
+ 8502814,
+ 7483763,
+ 2780132,
+ 108700891,
+ 5675356,
+ 3242173,
+ 6667147,
+ 28674757,
+ 3942491,
+ 1056608,
+ 301139947,
+ 3447496,
+ 26084662
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 75.32,
+ 65.554,
+ 72.39,
+ 80.653,
+ 78.553,
+ 72.889,
+ 78.782,
+ 78.273,
+ 72.235,
+ 74.994,
+ 71.878,
+ 70.259,
+ 60.916,
+ 70.198,
+ 72.567,
+ 76.195,
+ 72.899,
+ 75.537,
+ 71.752,
+ 71.421,
+ 78.746,
+ 69.819,
+ 78.242,
+ 76.384,
+ 73.747
+ ],
+ "y":[
+ 12779.37964,
+ 3822.137084,
+ 9065.800825,
+ 36319.23501,
+ 13171.63885,
+ 7006.580419,
+ 9645.06142,
+ 8948.102923,
+ 6025.374752,
+ 6873.262326,
+ 5728.353514,
+ 5186.050003,
+ 1201.637154,
+ 3548.330846,
+ 7320.880262,
+ 11977.57496,
+ 2749.320965,
+ 9809.185636,
+ 4172.838464,
+ 7408.905561,
+ 19328.70901,
+ 18008.50924,
+ 42951.65309,
+ 10611.46299,
+ 11415.80569
+ ]
+ },
+ {
+ "name":"Oceania",
+ "text":[
+ "Australia",
+ "New Zealand"
+ ],
+ "marker":{
+ "sizemode":"area",
+ "sizeref":200000,
+ "size":[
+ 20434176,
+ 4115771
+ ]
+ },
+ "mode":"markers",
+ "x":[
+ 81.235,
+ 80.204
+ ],
+ "y":[
+ 34435.36744,
+ 25185.00911
+ ]
+ }
+ ],
+ "name":"2007"
+ }
+ ],
+ "layout":{
+ "xaxis":{
+ "title":"Life Expectancy",
+ "range":[
+ 30,
+ 85
+ ]
+ },
+ "yaxis":{
+ "title":"GDP per Capita",
+ "type":"log"
+ },
+ "hovermode":"closest",
+ "slider":{
+ "visible":true,
+ "plotlycommand":"animate",
+ "args":[
+ "slider.value",
+ {
+ "duration":400,
+ "ease":"cubic-in-out"
+ }
+ ],
+ "initialValue":"1952",
+ "values":[
+ "1952",
+ "1957",
+ "1962",
+ "1967",
+ "1972",
+ "1977",
+ "1982",
+ "1987",
+ "1992",
+ "1997",
+ "2002",
+ "2007"
+ ]
+ },
+ "updatemenus": [{
+ "x": 0.1,
+ "y": 0,
+ "yanchor": "top",
+ "xanchor": "right",
+ "showactive": false,
+ "direction": "left",
+ "type": "buttons",
+ "pad": {"t": 87, "r": 10},
+ "buttons": [{
+ "method": "animate",
+ "args": [null, {
+ "fromcurrent": true,
+ "transition": {
+ "duration": 300,
+ "easing": "quadratic-in-out"
+ },
+ "frame": {
+ "duration": 500,
+ "redraw": false
+ }
+ }],
+ "label": "Play"
+ }, {
+ "method": "animate",
+ "args": [
+ [null],
+ {
+ "mode": "immediate",
+ "transition": {
+ "duration": 0
+ },
+ "frame": {
+ "duration": 0,
+ "redraw": false
+ }
+ }
+ ],
+ "label": "Pause"
+ }]
+ }],
+ "sliders": [{
+ "active": 0,
+ "steps": [{
+ "label": "1952",
+ "method": "animate",
+ "args": [["1952"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1957",
+ "method": "animate",
+ "args": [["1957"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1962",
+ "method": "animate",
+ "args": [["1962"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1967",
+ "method": "animate",
+ "args": [["1967"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1972",
+ "method": "animate",
+ "args": [["1972"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1977",
+ "method": "animate",
+ "args": [["1977"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1982",
+ "method": "animate",
+ "args": [["1982"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1987",
+ "method": "animate",
+ "args": [["1987"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1992",
+ "method": "animate",
+ "args": [["1992"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "1997",
+ "method": "animate",
+ "args": [["1997"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "2002",
+ "method": "animate",
+ "args": [["2002"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }, {
+ "label": "2007",
+ "method": "animate",
+ "args": [["2007"], {
+ "mode": "immediate",
+ "transition": {"duration": 300},
+ "frame": {"duration": 300, "redraw": false}
+ }
+ ]
+ }],
+ "x": 0.1,
+ "len": 0.9,
+ "xanchor": "left",
+ "y": 0,
+ "yanchor": "top",
+ "pad": {"t": 50, "b": 10},
+ "currentvalue": {
+ "visible": true,
+ "prefix": "Year:",
+ "xanchor": "right",
+ "font": {
+ "size": 20,
+ "color": "#666"
+ }
+ },
+ "transition": {
+ "duration": 300,
+ "easing": "cubic-in-out"
+ }
+ }]
+ },
+ "config": {
+ "scrollzoom": true
+ }
+}
diff --git a/content/plotly_js/animations/filled-area-animations/2017-08-22-filled-area-animations.html b/content/plotly_js/animations/filled-area-animations/2017-08-22-filled-area-animations.html
new file mode 100644
index 00000000000..7b085e4b219
--- /dev/null
+++ b/content/plotly_js/animations/filled-area-animations/2017-08-22-filled-area-animations.html
@@ -0,0 +1,96 @@
+---
+name: Filled-Area-Animation
+plot_url: https://codepen.io/bcd/embed/ayVXvY/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: filled-area-animations
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/2014_apple_stock.csv", function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+}
+
+ var frames = []
+ var x = unpack(rows, 'AAPL_x')
+ var y = unpack(rows, 'AAPL_y')
+
+ var n = 100;
+ for (var i = 0; i < n; i++) {
+ frames[i] = {data: [{x: [], y: []}]}
+ frames[i].data[0].x = x.slice(0, i+1);
+ frames[i].data[0].y = y.slice(0, i+1);
+ }
+
+ Plotly.newPlot('myDiv', [{
+ x: frames[1].data[0].x,
+ y: frames[1].data[0].y,
+ fill: 'tozeroy',
+ type: 'scatter',
+ mode: 'lines',
+ line: {color: 'green'}
+ }], {
+ title: {
+ text: "Filled-Area Animation"
+ },
+ xaxis: {
+ type: 'date',
+ range: [
+ frames[99].data[0].x[0],
+ frames[99].data[0].x[99]
+ ]
+ },
+ yaxis: {
+ range: [
+ 0,
+ 90
+ ]
+ },
+ updatemenus: [{
+ x: 0.1,
+ y: 0,
+ yanchor: "top",
+ xanchor: "right",
+ showactive: false,
+ direction: "left",
+ type: "buttons",
+ pad: {"t": 87, "r": 10},
+ buttons: [{
+ method: "animate",
+ args: [null, {
+ fromcurrent: true,
+ transition: {
+ duration: 0,
+ },
+ frame: {
+ duration: 40,
+ redraw: false
+ }
+ }],
+ label: "Play"
+ }, {
+ method: "animate",
+ args: [
+ [null],
+ {
+ mode: "immediate",
+ transition: {
+ duration: 0
+ },
+ frame: {
+ duration: 0,
+ redraw: false
+ }
+ }
+ ],
+ label: "Pause"
+ }]
+ }]
+ }).then(function() {
+ Plotly.addFrames('myDiv', frames);
+ });
+
+})
diff --git a/content/plotly_js/animations/filled-area-animations/2017-08-22-multiple-filled-area-animations.html b/content/plotly_js/animations/filled-area-animations/2017-08-22-multiple-filled-area-animations.html
new file mode 100644
index 00000000000..848164df064
--- /dev/null
+++ b/content/plotly_js/animations/filled-area-animations/2017-08-22-multiple-filled-area-animations.html
@@ -0,0 +1,116 @@
+---
+name: Multiple Trace Filled-Area
+plot_url: https://codepen.io/bcd/embed/BdJXpP/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: filled-area-animations
+order: 2
+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 frames = []
+ var x = unpack(rows, 'Date')
+ var y = unpack(rows, 'AAPL.High')
+ var x2 = unpack(rows, 'Date')
+ var y2 = unpack(rows, 'AAPL.Low')
+
+ var n = 100;
+ for (var i = 0; i < n; i++) {
+ frames[i] = {data: [{x: [], y: []}, {x: [], y: []}]}
+ frames[i].data[1].x = x.slice(0, i+1);
+ frames[i].data[1].y = y.slice(0, i+1);
+ frames[i].data[0].x = x2.slice(0, i+1);
+ frames[i].data[0].y = y2.slice(0, i+1);
+ }
+
+ var trace2 = {
+ type: "scatter",
+ mode: "lines",
+ name: 'AAPL High',
+ fill: 'tonexty',
+ x: frames[5].data[1].x,
+ y: frames[5].data[1].y,
+ line: {color: 'grey'}
+ }
+
+ var trace1 = {
+ type: "scatter",
+ mode: "lines",
+ name: 'AAPL Low',
+ x: frames[5].data[0].x,
+ y: frames[5].data[0].y,
+ line: {color: 'lightgrey'}
+ }
+
+ var data = [trace1,trace2];
+
+ var layout = {
+ title: {
+ text: 'Multiple Trace Filled-Area Animation'
+ },
+ xaxis: {
+ range: [frames[99].data[0].x[0], frames[99].data[0].x[99]],
+ showgrid: false
+ },
+ yaxis: {
+ range: [120, 140],
+ showgrid: false
+ },
+ legend: {
+ orientation: 'h',
+ x: 0.5,
+ y: 1.2,
+ xanchor: 'center'
+ },
+ updatemenus: [{
+ x: 0.5,
+ y: 0,
+ yanchor: "top",
+ xanchor: "center",
+ showactive: false,
+ direction: "left",
+ type: "buttons",
+ pad: {"t": 87, "r": 10},
+ buttons: [{
+ method: "animate",
+ args: [null, {
+ fromcurrent: true,
+ transition: {
+ duration: 0,
+ },
+ frame: {
+ duration: 40,
+ redraw: false
+ }
+ }],
+ label: "Play"
+ }, {
+ method: "animate",
+ args: [
+ [null],
+ {
+ mode: "immediate",
+ transition: {
+ duration: 0
+ },
+ frame: {
+ duration: 0,
+ redraw: false
+ }
+ }
+ ],
+ label: "Pause"
+ }]
+ }]
+ };
+
+ Plotly.newPlot('myDiv', data, layout).then(function() {
+ Plotly.addFrames('myDiv', frames);
+ });
+})
diff --git a/content/plotly_js/animations/map-animations/2017-08-22-choropleth-animation.html b/content/plotly_js/animations/map-animations/2017-08-22-choropleth-animation.html
new file mode 100644
index 00000000000..552dff20a5b
--- /dev/null
+++ b/content/plotly_js/animations/map-animations/2017-08-22-choropleth-animation.html
@@ -0,0 +1,130 @@
+---
+name: Map Animations
+language: plotly_js
+suite: map-animations
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder_with_codes.csv", function(err, rows){
+
+ function filter_and_unpack(rows, key, year) {
+ return rows.filter(row => row['year'] == year).map(row => row[key])
+ }
+
+ var frames = []
+ var slider_steps = []
+
+ var n = 11;
+ var num = 1952;
+ for (var i = 0; i <= n; i++) {
+ var z = filter_and_unpack(rows, 'lifeExp', num)
+ var locations = filter_and_unpack(rows, 'iso_alpha', num)
+ frames[i] = {data: [{z: z, locations: locations, text: locations}], name: num}
+ slider_steps.push ({
+ label: num.toString(),
+ method: "animate",
+ args: [[num], {
+ mode: "immediate",
+ transition: {duration: 300},
+ frame: {duration: 300}
+ }
+ ]
+ })
+ num = num + 5
+ }
+
+var data = [{
+ type: 'choropleth',
+ locationmode: 'world',
+ locations: frames[0].data[0].locations,
+ z: frames[0].data[0].z,
+ text: frames[0].data[0].locations,
+ zauto: false,
+ zmin: 30,
+ zmax: 90
+
+}];
+var layout = {
+ title: {
+ text: 'World Life Expectency
+
+
+
+
+
+
Plotly.js Basic Charts
+
{{page.description}}
+ {% include layouts/dashplug.html %}
+
+
+
+
+ {% 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/WebGL/2018-08-07-webgl_100000-points.html b/content/plotly_js/basic/WebGL/2018-08-07-webgl_100000-points.html
new file mode 100644
index 00000000000..d3056fa53db
--- /dev/null
+++ b/content/plotly_js/basic/WebGL/2018-08-07-webgl_100000-points.html
@@ -0,0 +1,40 @@
+---
+name: WebGL with 100,000 points
+language: plotly_js
+suite: webgl-vs-svg
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+function gaussianRand() {
+ var rand = 0;
+ for (var i = 0; i < 6; i += 1) {
+ rand += Math.random();
+ }
+ return (rand / 6)-0.5;
+}
+
+var X = [],
+ Y = [],
+ n = 100000,
+ i;
+
+for (i = 0; i < n; i += 1) {
+ X.push(gaussianRand());
+ Y.push(gaussianRand());
+}
+
+var data = [{
+ type: "scattergl",
+ mode: "markers",
+ marker: {
+ line: {
+ width: 1,
+ color: '#404040'}
+ },
+ x: X,
+ y: Y
+}]
+
+Plotly.newPlot('myDiv', data)
diff --git a/content/plotly_js/basic/WebGL/2018-08-07-webgl_1mill-points.html b/content/plotly_js/basic/WebGL/2018-08-07-webgl_1mill-points.html
new file mode 100644
index 00000000000..a28a12268fa
--- /dev/null
+++ b/content/plotly_js/basic/WebGL/2018-08-07-webgl_1mill-points.html
@@ -0,0 +1,41 @@
+---
+name: WebGL with 1 Million points
+language: plotly_js
+suite: webgl-vs-svg
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+function gaussianRand() {
+ var rand = 0;
+ for (var i = 0; i < 6; i += 1) {
+ rand += Math.random();
+ }
+ return (rand / 6)-0.5;
+}
+
+var X = [],
+ Y = [],
+ n = 1000000,
+ i;
+
+for (i = 0; i < n; i += 1) {
+ X.push(gaussianRand());
+ Y.push(gaussianRand());
+}
+
+var data = [{
+ type: "scattergl",
+ mode: "markers",
+ marker: {
+ color : 'rgb(152, 0, 0)',
+ line: {
+ width: 1,
+ color: 'rgb(0,0,0)'}
+ },
+ x: X,
+ y: Y
+}]
+
+Plotly.newPlot('myDiv', data)
diff --git a/content/plotly_js/basic/WebGL/2018-08-07-webgl_many-traces.html b/content/plotly_js/basic/WebGL/2018-08-07-webgl_many-traces.html
new file mode 100644
index 00000000000..74f908f827a
--- /dev/null
+++ b/content/plotly_js/basic/WebGL/2018-08-07-webgl_many-traces.html
@@ -0,0 +1,42 @@
+---
+name: WebGL with many traces
+language: plotly_js
+suite: webgl-vs-svg
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+function gaussianRand() {
+ var rand = 0;
+ for (var i = 0; i < 6; i += 1) {
+ rand += Math.random();
+ }
+ return (rand / 6)-0.5;
+}
+
+
+var start_value = 0,
+ stop_value = 1,
+ point_num = 5000,
+ trace_num = 10;
+var curr_value = start_value;
+var step = (stop_value - start_value) / (point_num - 1);
+
+var data = [];
+for (var j = 0; j < trace_num; j++) {
+ var X = [],
+ Y = [];
+ for (var i = 0; i < point_num; i++) {
+ X.push(curr_value + (step * i));
+ Y.push((gaussianRand()*8)+(j*5));
+ }
+ data.push({
+ type: "scattergl",
+ mode: "line",
+ x: X,
+ y: Y
+ })
+}
+var layout = {showlegend: false}
+Plotly.newPlot('myDiv', data = data, layout = layout)
diff --git a/content/plotly_js/basic/WebGL/2018-08-07-webgl_plotlyjs_index.html b/content/plotly_js/basic/WebGL/2018-08-07-webgl_plotlyjs_index.html
new file mode 100644
index 00000000000..2b4d888e251
--- /dev/null
+++ b/content/plotly_js/basic/WebGL/2018-08-07-webgl_plotlyjs_index.html
@@ -0,0 +1,30 @@
+---
+description: Implement WebGL for increased speed, improved interactivity, and the
+ ability to plot even more data!
+display_as: basic
+language: plotly_js
+layout: base
+name: WebGL vs SVG
+order: 14
+permalink: javascript/webgl-vs-svg/
+thumbnail: thumbnail/webgl.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","webgl-vs-svg"| sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
+
+
+ Multiple WebGL Contexts
+
+
+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:
+
<script src="https://unpkg.com/virtual-webgl@1.0.6/src/virtual-webgl.js"></script>
+
+
points or fill '
+ },
+ xaxis: {
+ range: [0,5]
+ },
+ yaxis: {
+ range: [0,3]
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout)
diff --git a/content/plotly_js/basic/area/2015-04-09-stacked-area.html b/content/plotly_js/basic/area/2015-04-09-stacked-area.html
new file mode 100644
index 00000000000..22b2470ff47
--- /dev/null
+++ b/content/plotly_js/basic/area/2015-04-09-stacked-area.html
@@ -0,0 +1,16 @@
+---
+name: Stacked Area Chart
+language: plotly_js
+suite: area
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+var plotDiv = document.getElementById('plot');
+var traces = [
+ {x: [1,2,3], y: [2,1,4], stackgroup: 'one'},
+ {x: [1,2,3], y: [1,1,2], stackgroup: 'one'},
+ {x: [1,2,3], y: [3,0,2], stackgroup: 'one'}
+];
+
+Plotly.newPlot('myDiv', traces, {title: {text: 'stacked and filled line chart'}});
diff --git a/content/plotly_js/basic/area/2015-08-10-overlaid-area-char-without-boundary-lines.html b/content/plotly_js/basic/area/2015-08-10-overlaid-area-char-without-boundary-lines.html
new file mode 100644
index 00000000000..4a6ed4a5a02
--- /dev/null
+++ b/content/plotly_js/basic/area/2015-08-10-overlaid-area-char-without-boundary-lines.html
@@ -0,0 +1,34 @@
+---
+name: Overlaid Area Chart Without Boundary Lines
+language: plotly_js
+suite: area
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [1, 2, 3, 4],
+ y: [0, 2, 3, 5],
+ fill: 'tozeroy',
+ type: 'scatter',
+ mode: 'none'
+};
+
+var trace2 = {
+ x: [1, 2, 3, 4],
+ y: [3, 5, 1, 7],
+ fill: 'tonexty',
+ type: 'scatter',
+ mode: 'none'
+};
+
+var layout = {
+ title: {
+ text: 'Overlaid Chart Without Boundary Lines'
+ }
+};
+
+var data = [trace1, trace2];
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/basic/area/2017-08-22-filled-area-plotlyjs_index.html b/content/plotly_js/basic/area/2017-08-22-filled-area-plotlyjs_index.html
new file mode 100644
index 00000000000..0698468240a
--- /dev/null
+++ b/content/plotly_js/basic/area/2017-08-22-filled-area-plotlyjs_index.html
@@ -0,0 +1,13 @@
+---
+name: Filled-Area Animation
+permalink: javascript/filled-area-animation/
+description: How to make an animated filled-area plot with Plotly JS
+layout: base
+thumbnail: thumbnail/apple_stock_animation.gif
+language: plotly_js
+page_type: example_index
+display_as: animations
+order: 3
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","filled-area-animations" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
diff --git a/content/plotly_js/basic/area/2018-09-18-normalized-stacked-area.html b/content/plotly_js/basic/area/2018-09-18-normalized-stacked-area.html
new file mode 100644
index 00000000000..7f221d8d290
--- /dev/null
+++ b/content/plotly_js/basic/area/2018-09-18-normalized-stacked-area.html
@@ -0,0 +1,17 @@
+---
+name: Normalized Stacked Area Chart
+language: plotly_js
+suite: area
+order: 2.1
+sitemap: false
+arrangement: horizontal
+---
+var plotDiv = document.getElementById('plot');
+var traces = [
+ {x: [1,2,3], y: [2,1,4], stackgroup: 'one', groupnorm:'percent'},
+ {x: [1,2,3], y: [1,1,2], stackgroup: 'one'},
+ {x: [1,2,3], y: [3,0,2], stackgroup: 'one'}
+];
+
+Plotly.newPlot('myDiv', traces, {title: {text: 'Normalized stacked and filled line chart'}});
+
diff --git a/content/plotly_js/basic/bar/2015-04-09-bar-marker-array.html b/content/plotly_js/basic/bar/2015-04-09-bar-marker-array.html
new file mode 100644
index 00000000000..bf7b6bced0f
--- /dev/null
+++ b/content/plotly_js/basic/bar/2015-04-09-bar-marker-array.html
@@ -0,0 +1,26 @@
+---
+name: Customizing Individual Bar Colors
+language: plotly_js
+suite: bar
+order: 7
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: ['Feature A', 'Feature B', 'Feature C', 'Feature D', 'Feature E'],
+ y: [20, 14, 23, 25, 22],
+ marker:{
+ color: ['rgba(204,204,204,1)', 'rgba(222,45,38,0.8)', 'rgba(204,204,204,1)', 'rgba(204,204,204,1)', 'rgba(204,204,204,1)']
+ },
+ type: 'bar'
+};
+
+var data = [trace1];
+
+var layout = {
+ title: {
+ text: 'Least Used Feature'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/basic/bar/2015-04-09-bar_plotly_js_index.html b/content/plotly_js/basic/bar/2015-04-09-bar_plotly_js_index.html
new file mode 100644
index 00000000000..80fa221364e
--- /dev/null
+++ b/content/plotly_js/basic/bar/2015-04-09-bar_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+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
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","bar" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/basic/bar/2015-04-09-basic-bar.html b/content/plotly_js/basic/bar/2015-04-09-basic-bar.html
new file mode 100644
index 00000000000..061b1c03d95
--- /dev/null
+++ b/content/plotly_js/basic/bar/2015-04-09-basic-bar.html
@@ -0,0 +1,17 @@
+---
+name: Basic Bar Chart
+language: plotly_js
+suite: bar
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: ['giraffes', 'orangutans', 'monkeys'],
+ y: [20, 14, 23],
+ type: 'bar'
+ }
+];
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/basic/bar/2015-04-09-grouped-bar.html b/content/plotly_js/basic/bar/2015-04-09-grouped-bar.html
new file mode 100644
index 00000000000..c9a5d164d82
--- /dev/null
+++ b/content/plotly_js/basic/bar/2015-04-09-grouped-bar.html
@@ -0,0 +1,27 @@
+---
+name: Grouped Bar Chart
+language: plotly_js
+suite: bar
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: ['giraffes', 'orangutans', 'monkeys'],
+ y: [20, 14, 23],
+ name: 'SF Zoo',
+ type: 'bar'
+};
+
+var trace2 = {
+ x: ['giraffes', 'orangutans', 'monkeys'],
+ y: [12, 18, 29],
+ name: 'LA Zoo',
+ type: 'bar'
+};
+
+var data = [trace1, trace2];
+
+var layout = {barmode: 'group'};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/basic/bar/2015-04-09-stacked-bar.html b/content/plotly_js/basic/bar/2015-04-09-stacked-bar.html
new file mode 100644
index 00000000000..a3d1fafcad2
--- /dev/null
+++ b/content/plotly_js/basic/bar/2015-04-09-stacked-bar.html
@@ -0,0 +1,27 @@
+---
+name: Stacked Bar Chart
+language: plotly_js
+suite: bar
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: ['giraffes', 'orangutans', 'monkeys'],
+ y: [20, 14, 23],
+ name: 'SF Zoo',
+ type: 'bar'
+};
+
+var trace2 = {
+ x: ['giraffes', 'orangutans', 'monkeys'],
+ y: [12, 18, 29],
+ name: 'LA Zoo',
+ type: 'bar'
+};
+
+var data = [trace1, trace2];
+
+var layout = {barmode: 'stack'};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/basic/bar/2015-07-08-colored-and-styled-bar-chart.html b/content/plotly_js/basic/bar/2015-07-08-colored-and-styled-bar-chart.html
new file mode 100644
index 00000000000..6cf80fb4b10
--- /dev/null
+++ b/content/plotly_js/basic/bar/2015-07-08-colored-and-styled-bar-chart.html
@@ -0,0 +1,60 @@
+---
+name: Colored and Styled Bar Chart
+language: plotly_js
+suite: bar
+order: 9
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
+ y: [219, 146, 112, 127, 124, 180, 236, 207, 236, 263, 350, 430, 474, 526, 488, 537, 500, 439],
+ name: 'Rest of world',
+ marker: {color: 'rgb(55, 83, 109)'},
+ type: 'bar'
+};
+
+var trace2 = {
+ x: [1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
+ y: [16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270, 299, 340, 403, 549, 499],
+ name: 'China',
+ marker: {color: 'rgb(26, 118, 255)'},
+ type: 'bar'
+};
+
+var data = [trace1, trace2];
+
+var layout = {
+ title: {
+ text: 'US Export of Plastic Scrap'
+ },
+ xaxis: {tickfont: {
+ size: 14,
+ color: 'rgb(107, 107, 107)'
+ }},
+ yaxis: {
+ title: {
+ text: 'USD (millions)',
+ font: {
+ size: 16,
+ color: 'rgb(107, 107, 107)'
+ }
+ },
+ tickfont: {
+ size: 14,
+ color: 'rgb(107, 107, 107)'
+ }
+ },
+ legend: {
+ x: 0,
+ y: 1.0,
+ bgcolor: 'rgba(255, 255, 255, 0)',
+ bordercolor: 'rgba(255, 255, 255, 0)'
+ },
+ barmode: 'group',
+ bargap: 0.15,
+ bargroupgap: 0.1
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/basic/bar/2015-08-07-Rotated-bar-chart-labels.html b/content/plotly_js/basic/bar/2015-08-07-Rotated-bar-chart-labels.html
new file mode 100644
index 00000000000..29b7a059420
--- /dev/null
+++ b/content/plotly_js/basic/bar/2015-08-07-Rotated-bar-chart-labels.html
@@ -0,0 +1,44 @@
+---
+name: Bar Chart with Rotated Labels
+language: plotly_js
+suite: bar
+order: 6
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+ y: [20, 14, 25, 16, 18, 22, 19, 15, 12, 16, 14, 17],
+ type: 'bar',
+ name: 'Primary Product',
+ marker: {
+ color: 'rgb(49,130,189)',
+ opacity: 0.7,
+ }
+};
+
+var trace2 = {
+ x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+ y: [19, 14, 22, 14, 16, 19, 15, 14, 10, 12, 12, 16],
+ type: 'bar',
+ name: 'Secondary Product',
+ marker: {
+ color: 'rgb(204,204,204)',
+ opacity: 0.5
+ }
+};
+
+var data = [trace1, trace2];
+
+var layout = {
+ title: {
+ text: '2013 Sales Report'
+ },
+ xaxis: {
+ tickangle: -45
+ },
+ barmode: 'group'
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/basic/bar/2015-08-07-bar-chart-with-hover-text.html b/content/plotly_js/basic/bar/2015-08-07-bar-chart-with-hover-text.html
new file mode 100644
index 00000000000..454b4930915
--- /dev/null
+++ b/content/plotly_js/basic/bar/2015-08-07-bar-chart-with-hover-text.html
@@ -0,0 +1,40 @@
+---
+name: Bar Chart with Hover Text
+language: plotly_js
+suite: bar
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: ['Liam', 'Sophie', 'Jacob', 'Mia', 'William', 'Olivia'],
+ y: [8.0, 8.0, 12.0, 12.0, 13.0, 20.0],
+ type: 'bar',
+ text: ['4.17 below the mean', '4.17 below the mean', '0.17 below the mean', '0.17 below the mean', '0.83 above the mean', '7.83 above the mean'],
+ marker: {
+ color: 'rgb(142,124,195)'
+ }
+};
+
+var data = [trace1];
+
+var layout = {
+ title: {
+ text: 'Number of Graphs Made this Week'
+ },
+ font:{
+ family: 'Raleway, sans-serif'
+ },
+ showlegend: false,
+ xaxis: {
+ tickangle: -45
+ },
+ yaxis: {
+ zeroline: false,
+ gridwidth: 2
+ },
+ bargap :0.05
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/basic/bar/2015-08-07-barchart-direct-labels.html b/content/plotly_js/basic/bar/2015-08-07-barchart-direct-labels.html
new file mode 100644
index 00000000000..adf00fe5ae3
--- /dev/null
+++ b/content/plotly_js/basic/bar/2015-08-07-barchart-direct-labels.html
@@ -0,0 +1,40 @@
+---
+name: Bar Chart with Direct Labels
+language: plotly_js
+suite: bar
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+var xValue = ['Product A', 'Product B', 'Product C'];
+
+var yValue = [20, 14, 23];
+
+var trace1 = {
+ x: xValue,
+ y: yValue,
+ type: 'bar',
+ text: yValue.map(String),
+ textposition: 'auto',
+ hoverinfo: 'none',
+ marker: {
+ color: 'rgb(158,202,225)',
+ opacity: 0.6,
+ line: {
+ color: 'rgb(8,48,107)',
+ width: 1.5
+ }
+ }
+};
+
+var data = [trace1];
+
+var layout = {
+ title: {
+ text: 'January 2013 Sales Report'
+ },
+ barmode: 'stack'
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/basic/bar/2015-08-07-waterfall-bar-chart.html b/content/plotly_js/basic/bar/2015-08-07-waterfall-bar-chart.html
new file mode 100644
index 00000000000..886a9c4dc90
--- /dev/null
+++ b/content/plotly_js/basic/bar/2015-08-07-waterfall-bar-chart.html
@@ -0,0 +1,107 @@
+---
+name: Waterfall Bar Chart
+language: plotly_js
+suite: bar
+order: 10
+sitemap: false
+arrangement: horizontal
+---
+
+// Base
+
+var xData = ['ProductMike Bostock "
+ },
+ width: 1118,
+ height: 772,
+ font: {
+ size: 10
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout)
+});
diff --git a/content/plotly_js/basic/sankey/2017-05-22-add_nodes.html b/content/plotly_js/basic/sankey/2017-05-22-add_nodes.html
new file mode 100644
index 00000000000..2f88e09df3d
--- /dev/null
+++ b/content/plotly_js/basic/sankey/2017-05-22-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 2050Mike Bostock "
+ },
+ width: 1118,
+ height: 772,
+ font: {
+ size: 10
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout)
+
+});
diff --git a/content/plotly_js/basic/sankey/2017-05-22-basic.html b/content/plotly_js/basic/sankey/2017-05-22-basic.html
new file mode 100644
index 00000000000..25c79ff0077
--- /dev/null
+++ b/content/plotly_js/basic/sankey/2017-05-22-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 2050Mike Bostock "
+ },
+ width: 1118,
+ height: 772,
+ font: {
+ size: 10
+ }
+}
diff --git a/content/plotly_js/basic/sankey/2017-05-22-sankey_index.html b/content/plotly_js/basic/sankey/2017-05-22-sankey_index.html
new file mode 100644
index 00000000000..b39b8a3227a
--- /dev/null
+++ b/content/plotly_js/basic/sankey/2017-05-22-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/2017-05-22-style_sankey.html b/content/plotly_js/basic/sankey/2017-05-22-style_sankey.html
new file mode 100644
index 00000000000..eaf7e3fd7c9
--- /dev/null
+++ b/content/plotly_js/basic/sankey/2017-05-22-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 2050Mike 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/sankey/2018-03-13-basic-example.html b/content/plotly_js/basic/sankey/2018-03-13-basic-example.html
new file mode 100644
index 00000000000..85bce263878
--- /dev/null
+++ b/content/plotly_js/basic/sankey/2018-03-13-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/2019-11-20-nodes-position.html b/content/plotly_js/basic/sankey/2019-11-20-nodes-position.html
new file mode 100644
index 00000000000..15f4544f276
--- /dev/null
+++ b/content/plotly_js/basic/sankey/2019-11-20-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/2024-01-05-align-example.html b/content/plotly_js/basic/sankey/2024-01-05-align-example.html
new file mode 100644
index 00000000000..2dd8c887ed1
--- /dev/null
+++ b/content/plotly_js/basic/sankey/2024-01-05-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/sunburst/2019-04-11-basic-area.html b/content/plotly_js/basic/sunburst/2019-04-11-basic-area.html
new file mode 100644
index 00000000000..5e61f50fab5
--- /dev/null
+++ b/content/plotly_js/basic/sunburst/2019-04-11-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/2019-04-11-large-number-of-slices.html b/content/plotly_js/basic/sunburst/2019-04-11-large-number-of-slices.html
new file mode 100644
index 00000000000..4f547131c56
--- /dev/null
+++ b/content/plotly_js/basic/sunburst/2019-04-11-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/2019-04-11-repeated-labels.html b/content/plotly_js/basic/sunburst/2019-04-11-repeated-labels.html
new file mode 100644
index 00000000000..260daf4bbf2
--- /dev/null
+++ b/content/plotly_js/basic/sunburst/2019-04-11-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: [
+ "Northhttps://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/sunburst/2019-06-13-basic-branchvalues-total.html b/content/plotly_js/basic/sunburst/2019-06-13-basic-branchvalues-total.html
new file mode 100644
index 00000000000..79dd390f4ef
--- /dev/null
+++ b/content/plotly_js/basic/sunburst/2019-06-13-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)).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/2017-11-01-basic-example.html b/content/plotly_js/basic/table/2017-11-01-basic-example.html
new file mode 100644
index 00000000000..5a736e181a2
--- /dev/null
+++ b/content/plotly_js/basic/table/2017-11-01-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/2017-11-01-from-a-csv.html b/content/plotly_js/basic/table/2017-11-01-from-a-csv.html
new file mode 100644
index 00000000000..674ebe81256
--- /dev/null
+++ b/content/plotly_js/basic/table/2017-11-01-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/2017-11-01-sizing-rows-columns.html b/content/plotly_js/basic/table/2017-11-01-sizing-rows-columns.html
new file mode 100644
index 00000000000..af3cd8e02b9
--- /dev/null
+++ b/content/plotly_js/basic/table/2017-11-01-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 '],
+ ["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 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/2017-11-01-styled-example.html b/content/plotly_js/basic/table/2017-11-01-styled-example.html
new file mode 100644
index 00000000000..14e24ad39e6
--- /dev/null
+++ b/content/plotly_js/basic/table/2017-11-01-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/2017-11-01-table-subplot.html b/content/plotly_js/basic/table/2017-11-01-table-subplot.html
new file mode 100644
index 00000000000..47b3b4ef3ad
--- /dev/null
+++ b/content/plotly_js/basic/table/2017-11-01-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/2017-11-01-tables-plotly_js_index.html b/content/plotly_js/basic/table/2017-11-01-tables-plotly_js_index.html
new file mode 100644
index 00000000000..0a6c56f6738
--- /dev/null
+++ b/content/plotly_js/basic/table/2017-11-01-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/2019-10-15-basic-treemap.html b/content/plotly_js/basic/treemap/2019-10-15-basic-treemap.html
new file mode 100644
index 00000000000..8eade33f0c8
--- /dev/null
+++ b/content/plotly_js/basic/treemap/2019-10-15-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/2019-10-15-nested-layers-treemap.html b/content/plotly_js/basic/treemap/2019-10-15-nested-layers-treemap.html
new file mode 100644
index 00000000000..ab8561039d3
--- /dev/null
+++ b/content/plotly_js/basic/treemap/2019-10-15-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/2019-10-15-set-colorscale-treemap.html b/content/plotly_js/basic/treemap/2019-10-15-set-colorscale-treemap.html
new file mode 100644
index 00000000000..c5937b115a5
--- /dev/null
+++ b/content/plotly_js/basic/treemap/2019-10-15-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/2019-10-15-set-colorway-treemap.html b/content/plotly_js/basic/treemap/2019-10-15-set-colorway-treemap.html
new file mode 100644
index 00000000000..a8f67b46a67
--- /dev/null
+++ b/content/plotly_js/basic/treemap/2019-10-15-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/2019-10-15-set-marker-color-treemap.html b/content/plotly_js/basic/treemap/2019-10-15-set-marker-color-treemap.html
new file mode 100644
index 00000000000..50c5f7b2538
--- /dev/null
+++ b/content/plotly_js/basic/treemap/2019-10-15-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/2019-10-15-treemap_attributes.html b/content/plotly_js/basic/treemap/2019-10-15-treemap_attributes.html
new file mode 100644
index 00000000000..494ea0dad9d
--- /dev/null
+++ b/content/plotly_js/basic/treemap/2019-10-15-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/2019-10-15-treemap_plotly_js_index.html b/content/plotly_js/basic/treemap/2019-10-15-treemap_plotly_js_index.html
new file mode 100644
index 00000000000..2b9b034cb3b
--- /dev/null
+++ b/content/plotly_js/basic/treemap/2019-10-15-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/2019-09-12-plotly_js-chart-events-index.html b/content/plotly_js/chart-events/2019-09-12-plotly_js-chart-events-index.html
new file mode 100644
index 00000000000..309c524f1c3
--- /dev/null
+++ b/content/plotly_js/chart-events/2019-09-12-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
+---
+
+
+
+
+
+
+
+
+
Plotly.js Chart Events
+
{{page.description}}
+ {% include layouts/dashplug.html %}
+
+
+
+
+ {% assign languagelist = site.posts | where:"language","plotly_js" | where:"display_as","chart_events" | where: "layout","base" | sort: "order" %}
+ {% include posts/documentation_eg.html %}
diff --git a/content/plotly_js/chart-events/callbacks-click/2015-04-09-click-annotation.html b/content/plotly_js/chart-events/callbacks-click/2015-04-09-click-annotation.html
new file mode 100644
index 00000000000..f37cc608913
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-click/2015-04-09-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/2015-04-09-click.html b/content/plotly_js/chart-events/callbacks-click/2015-04-09-click.html
new file mode 100644
index 00000000000..750302195f7
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-click/2015-04-09-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/2015-04-09-click_index.html b/content/plotly_js/chart-events/callbacks-click/2015-04-09-click_index.html
new file mode 100644
index 00000000000..832148489a1
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-click/2015-04-09-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-click/2016-10-13-click-event-data.html b/content/plotly_js/chart-events/callbacks-click/2016-10-13-click-event-data.html
new file mode 100644
index 00000000000..5a3f3d6dc32
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-click/2016-10-13-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-hover/2015-04-09-hover-bind.html b/content/plotly_js/chart-events/callbacks-hover/2015-04-09-hover-bind.html
new file mode 100644
index 00000000000..9d655212e9e
--- /dev/null
+++ b/content/plotly_js/chart-events/callbacks-hover/2015-04-09-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('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}
+
+
+
+
+
+
Add Custom Controls
+
{{page.description}}
+ {% include layouts/dashplug.html %}
+
+
+
+
+ {% assign languagelist = site.posts | where:"language","plotly_js" | where:"display_as","controls" | where: "layout","base" | sort: "order" %}
+ {% include posts/documentation_eg.html %}
diff --git a/content/plotly_js/controls/callbacks-buttons/2015-04-09-buttons_index.html b/content/plotly_js/controls/callbacks-buttons/2015-04-09-buttons_index.html
new file mode 100644
index 00000000000..5d8a1ed9542
--- /dev/null
+++ b/content/plotly_js/controls/callbacks-buttons/2015-04-09-buttons_index.html
@@ -0,0 +1,14 @@
+---
+name: Button Events
+permalink: javascript/custom-buttons/
+description: How to bind callback functions to custom buttons in D3.js-based JavaScript charts.
+layout: base
+thumbnail: thumbnail/custom-buttons.jpg
+language: plotly_js
+page_type: example_index
+display_as: controls
+order: 2
+redirect_from: javascript-graphing-library/custom-buttons/
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","button-events" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
diff --git a/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-animate.html b/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-animate.html
new file mode 100644
index 00000000000..f5ff4a67111
--- /dev/null
+++ b/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-animate.html
@@ -0,0 +1,10 @@
+---
+name: Animate Button
+language: plotly_js
+suite: button-events
+sitemap: false
+order: 5
+arrangement: horizontal
+markdown_content: |
+ Refer to our animation docs: [https://plotly.com/javascript/#animations](https://plotly.com/javascript/#animations) for examples on how to use the animate method with Plotly buttons.
+---
diff --git a/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-relayout.html b/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-relayout.html
new file mode 100644
index 00000000000..f4ebf25c82e
--- /dev/null
+++ b/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-relayout.html
@@ -0,0 +1,121 @@
+---
+name: Relayout Button
+plot_url: https://codepen.io/plotly/embed/mzXQPQ/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: button-events
+sitemap: false
+order: 3
+arrangement: horizontal
+markdown_content: |
+ The `relayout` method should be used when modifying the layout attributes of the graph.
+ **Update One Layout Attribute**
+ This example demonstrates how to update a layout attribute: chart type with the `relayout` method.
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/normal-clusters.csv', function(err, rows){
+function unpack(rows, key) {
+ return rows.map(function(row) { return parseFloat(row[key]); });
+}
+
+var button_layer_height = 1.2
+var x0 = unpack(rows,'x0')
+var x1 = unpack(rows,'x1')
+var x2 = unpack(rows,'x2')
+var y0 = unpack(rows,'y0')
+var y1 = unpack(rows,'y1')
+var y2 = unpack(rows,'y2')
+
+var data = [{
+ x: x0,
+ y: y0,
+ mode: 'markers',
+ marker: {color: '#835AF1'}
+ },
+ {
+ x: x1,
+ y: y1,
+ mode: 'markers',
+ marker: {color: '#7FA6EE'}
+ },
+ {
+ x: x2,
+ y: y2,
+ mode: 'markers',
+ marker: {color: '#B8F7D4'}
+ },
+
+]
+
+var cluster0 = {type: 'circle',
+ xref: 'x', yref: 'y',
+ x0: Math.min(...x0), y0: Math.min(...y0),
+ x1: Math.max(...x0), y1: Math.max(...y0),
+ opacity: 0.25,
+ line: {color: '#835AF1'},
+ fillcolor: '#835AF1'}
+
+var cluster1 = {type: 'circle',
+ xref: 'x', yref: 'y',
+ x0: Math.min(...x1), y0: Math.min(...y1),
+ x1: Math.max(...x1), y1: Math.max(...y1),
+ opacity: 0.25,
+ line: {color: '#7FA6EE'},
+ fillcolor: '#7FA6EE'}
+
+var cluster2 = {type: 'circle',
+ xref: 'x', yref: 'y',
+ x0: Math.min(...x2), y0: Math.min(...y2),
+ x1: Math.max(...x2), y1: Math.max(...y2),
+ opacity: 0.25,
+ line: {color: '#B8F7D4'},
+ fillcolor: '#B8F7D4'}
+
+var updatemenus=[
+ {
+ buttons: [
+ {
+ args: ['shapes', []],
+ label: 'None',
+ method: 'relayout'
+ },
+ {
+ args: ['shapes', [cluster0]],
+ label: 'Cluster 0',
+ method: 'relayout'
+ },
+ {
+ args: ['shapes', [cluster1]],
+ label: 'Cluster 1',
+ method: 'relayout'
+ },
+ {
+ args: ['shapes', [cluster2]],
+ label: 'Cluster 2',
+ method: 'relayout'
+ },
+ {
+ args: ['shapes', [cluster0, cluster1, cluster2]],
+ label: 'All',
+ method: 'relayout'
+ },
+ ],
+ direction: 'left',
+ pad: {'r': 10, 't': 10},
+ showactive: true,
+ type: 'buttons',
+ x: 0.1,
+ xanchor: 'left',
+ y: button_layer_height,
+ yanchor: 'top'
+ },
+
+]
+
+var layout = {
+ updatemenus: updatemenus,
+ showlegend: false
+}
+
+
+Plotly.newPlot("myDiv", data, layout);
+
+});
diff --git a/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-restyle-multiple.html b/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-restyle-multiple.html
new file mode 100644
index 00000000000..2b5baaba72b
--- /dev/null
+++ b/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-restyle-multiple.html
@@ -0,0 +1,216 @@
+---
+name: Restyle Button Multiple Attributes
+plot_url: https://codepen.io/plotly/embed/oaEymG/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: button-events
+sitemap: false
+order: 2
+arrangement: horizontal
+markdown_content: |
+ This example demonstrates how to use a restyle button to update single attributes by passing a two element array
+ to a button's `args` attribute or update multiple attributes at the same time by passing an array containing an object.
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows){
+function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+}
+
+var button_layer_1_height = 1.12
+var button_layer_2_height = 1.0
+var annotation_offset = 0.04
+
+var z_data=[ ]
+for(i=0;i<24;i++)
+{
+ z_data.push(unpack(rows,i));
+}
+
+var data = [{
+ z: z_data,
+ type:'surface',
+ colorscale:'Viridis'
+}]
+
+var updatemenus=[
+ {
+ buttons: [
+ {
+ args: ['type', 'surface'],
+ label: '3D Surface',
+ method: 'restyle'
+ },
+ {
+ args: ['type', 'heatmap'],
+ label:'Heatmap',
+ method:'restyle'
+ },
+ {
+ args: ['type', 'contour'],
+ label:'Contour',
+ method:'restyle'
+ }
+ ],
+ direction: 'left',
+ pad: {'r': 10, 't': 10},
+ showactive: true,
+ type: 'buttons',
+ x: 0.15,
+ xanchor: 'left',
+ y: button_layer_2_height,
+ yanchor: 'top'
+ },
+ {
+ buttons: [
+ {
+ args: ['reversescale', true],
+ label: 'Reverse',
+ method: 'restyle'
+ },
+ {
+ args: ['reversescale', false],
+ label:'Undo Reverse',
+ method:'restyle'
+ }
+ ],
+ direction: 'down',
+ pad: {'r': 10, 't': 10},
+ showactive: true,
+ type: 'dropdown',
+ x: 0.56,
+ xanchor: 'left',
+ y: button_layer_2_height,
+ yanchor: 'top'
+ },
+ {
+ buttons: [
+ {
+ args: [{'contours.showlines':false, 'type':'contour'}],
+ label: 'Hide lines',
+ method: 'restyle'
+ },
+ {
+ args: [{'contours.showlines':true, 'type':'contour'}],
+ label:'Show lines',
+ method:'restyle'
+ }
+ ],
+ direction: 'down',
+ pad: {'r': 10, 't': 10},
+ showactive: true,
+ type: 'dropdown',
+ x: 0.78,
+ xanchor: 'left',
+ y: button_layer_2_height,
+ yanchor: 'top'
+ },
+ {
+ buttons: [
+ {
+ args: ['colorscale', 'Viridis'],
+ label: 'Viridis',
+ method: 'restyle'
+ },
+ {
+ args: ['colorscale', 'Electric'],
+ label:'Electric',
+ method:'restyle'
+ },
+ {
+ args: ['colorscale', 'Earth'],
+ label:'Earth',
+ method:'restyle'
+ },
+ {
+ args: ['colorscale', 'Hot'],
+ label:'Hot',
+ method:'restyle'
+ },
+ {
+ args: ['colorscale', 'Jet'],
+ label:'Jet',
+ method:'restyle'
+ },
+ {
+ args: ['colorscale', 'Portland'],
+ label:'Portland',
+ method:'restyle'
+ },
+ {
+ args: ['colorscale', 'Rainbow'],
+ label:'Rainbow',
+ method:'restyle'
+ },
+ {
+ args: ['colorscale', 'Blackbody'],
+ label:'Blackbody',
+ method:'restyle'
+ },
+
+ {
+ args: ['colorscale', 'Cividis'],
+ label:'Cividis',
+ method:'restyle'
+ }
+ ],
+ direction: 'left',
+ pad: {'r': 10, 't': 10},
+ showactive: true,
+ type: 'buttons',
+ x: 0.15,
+ xanchor: 'left',
+ y: button_layer_1_height,
+ yanchor: 'top'
+ },
+]
+
+var annotations = [
+ {
+ text: 'Trace type:',
+ x: 0,
+ y: button_layer_2_height - annotation_offset,
+ yref: 'paper',
+ align: 'left',
+ showarrow: false
+ },
+ {
+ text: 'Colorscale:',
+ x: 0,
+ y: button_layer_1_height - annotation_offset,
+ yref: 'paper',
+ align: 'left',
+ showarrow: false
+ },
+]
+
+var layout = {
+ margin: {t: 0, b: 0, l: 0, r: 0},
+ updatemenus: updatemenus,
+ annotations: annotations,
+ scene: {
+ xaxis:{
+ gridcolor: 'rgb(255, 255, 255)',
+ zerolinecolor: 'rgb(255, 255, 255)',
+ showbackground: true,
+ backgroundcolor:'rgb(230, 230,230)'
+ },
+ yaxis: {
+ gridcolor: 'rgb(255, 255, 255)',
+ zerolinecolor: 'rgb(255, 255, 255)',
+ showbackground: true,
+ backgroundcolor: 'rgb(230, 230, 230)'
+ },
+ zaxis: {
+ gridcolor: 'rgb(255, 255, 255)',
+ zerolinecolor: 'rgb(255, 255, 255)',
+ showbackground: true,
+ backgroundcolor: 'rgb(230, 230,230)'
+ },
+ aspectratio: {x: 1, y: 1, z: 0.7},
+ aspectmode: 'manual'
+ }
+}
+
+
+Plotly.newPlot("myDiv", data, layout);
+
+});
diff --git a/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-restyle-simple.html b/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-restyle-simple.html
new file mode 100644
index 00000000000..286b646bb5b
--- /dev/null
+++ b/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-restyle-simple.html
@@ -0,0 +1,99 @@
+---
+name: Restyle Button Single Attribute
+plot_url: https://codepen.io/plotly/embed/MPQGaQ/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: button-events
+sitemap: false
+order: 1
+arrangement: horizontal
+markdown_content: |
+ The `restyle` method should be used when modifying the data and data attributes of the graph
+ This example demonstrates how to update a single data attribute: chart type with the `restyle` method.
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows){
+function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+}
+var z_data=[ ]
+for(i=0;i<24;i++)
+{
+ z_data.push(unpack(rows,i));
+}
+
+var data = [{
+ z: z_data,
+ type:'surface',
+ colorscale:'Viridis'
+}]
+
+var updatemenus=[
+ {
+ buttons: [
+ {
+ args: ['type', 'surface'],
+ label: '3D Surface',
+ method: 'restyle'
+ },
+ {
+ args: ['type', 'heatmap'],
+ label:'Heatmap',
+ method:'restyle'
+ }
+ ],
+ direction: 'left',
+ pad: {'r': 10, 't': 10},
+ showactive: true,
+ type: 'buttons',
+ x: 0.1,
+ xanchor: 'left',
+ y: 1.1,
+ yanchor: 'top'
+ }
+]
+
+var annotations = [
+ {
+ text: 'Trace type:',
+ x: 0,
+ y: 1.085,
+ yref: 'paper',
+ align: 'left',
+ showarrow: false
+ }
+]
+
+var layout = {
+ width: 800,
+ height: 900,
+ autosize: false,
+ margin: {t: 0, b: 0, l: 0, r: 0},
+ updatemenus: updatemenus,
+ annotations: annotations,
+ scene: {
+ xaxis:{
+ gridcolor: 'rgb(255, 255, 255)',
+ zerolinecolor: 'rgb(255, 255, 255)',
+ showbackground: true,
+ backgroundcolor:'rgb(230, 230,230)'
+ },
+ yaxis: {
+ gridcolor: 'rgb(255, 255, 255)',
+ zerolinecolor: 'rgb(255, 255, 255)',
+ showbackground: true,
+ backgroundcolor: 'rgb(230, 230, 230)'
+ },
+ zaxis: {
+ gridcolor: 'rgb(255, 255, 255)',
+ zerolinecolor: 'rgb(255, 255, 255)',
+ showbackground: true,
+ backgroundcolor: 'rgb(230, 230,230)'
+ },
+ aspectratio: {x: 1, y: 1, z: 0.7},
+ aspectmode: 'manual'
+ }
+}
+
+
+Plotly.newPlot("myDiv", data, layout);
+
+});
diff --git a/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-update.html b/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-update.html
new file mode 100644
index 00000000000..462f8e2fadd
--- /dev/null
+++ b/content/plotly_js/controls/callbacks-buttons/2018-10-16-button-update.html
@@ -0,0 +1,154 @@
+---
+name: Update Button
+plot_url: https://codepen.io/plotly/embed/BqYMqq/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: button-events
+sitemap: false
+order: 4
+arrangement: horizontal
+markdown_content: |
+ The `update` method should be used when modifying the data and layout sections of the graph.
+ This example demonstrates how to update which traces are displayed while simulaneously updating
+ layout attributes such as the chart title and annotations.
+---
+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]; });
+}
+
+const arrAvg = arr => arr.reduce((a,b) => a + b, 0) / arr.length
+
+var button_layer_2_height = 1.2
+var high = unpack(rows, 'AAPL.High').map(x => parseFloat(x))
+var low = unpack(rows, 'AAPL.Low').map(x => parseFloat(x))
+var date = unpack(rows, 'Date')
+
+
+var high_ave = arrAvg(high)
+var high_max = Math.max(...high)
+var low_ave = arrAvg(low)
+var low_min = Math.min(...low)
+
+var data = [{
+ x: date,
+ y: high,
+ mode: 'lines',
+ name: 'High',
+ marker: {color: '#33CFA5'}
+ },
+ {
+ x: date,
+ y: date.map(a => high_ave),
+ mode: 'lines',
+ name: 'Low Average',
+ line: {color: '#33CFA5', dash: 'dash'},
+ visible: false
+ },
+ {
+ x: date,
+ y: low,
+ name: 'Low',
+ mode: 'lines',
+ marker: {color: '#F06A6A'}
+ },
+ {
+ x: date,
+ y: date.map(a => low_ave),
+ mode: 'lines',
+ name: 'High Average',
+ visible: false,
+ line: {color: '#F06A6A', dash: 'dash'}
+ },
+
+]
+
+var high_annotations = [
+ {
+ text: 'High Average:
+
+
+
+
+
+
Plotly.js Financial Charts
+
{{page.description}}
+ {% include layouts/dashplug.html %}
+
+
+
+
+ {% assign languagelist = site.posts | where:"language","plotly_js" | where:"display_as","financial" | where: "layout","base" | sort: "order" %}
+ {% include posts/documentation_eg.html %}
diff --git a/content/plotly_js/financial/bullet/2015-12-20-bullet-charts_plotly_js_index.html b/content/plotly_js/financial/bullet/2015-12-20-bullet-charts_plotly_js_index.html
new file mode 100644
index 00000000000..ca46a364036
--- /dev/null
+++ b/content/plotly_js/financial/bullet/2015-12-20-bullet-charts_plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to make a D3.js-based bullet chart in javascript.
+display_as: financial
+language: plotly_js
+layout: base
+name: Bullet Charts
+order: 8
+permalink: javascript/bullet-charts/
+redirect_from: javascript-graphing-library/bullet-charts
+thumbnail: thumbnail/bullet.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","bullet-charts" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/financial/bullet/2019-07-30-advance-bullet.html b/content/plotly_js/financial/bullet/2019-07-30-advance-bullet.html
new file mode 100644
index 00000000000..f813f29dbf3
--- /dev/null
+++ b/content/plotly_js/financial/bullet/2019-07-30-advance-bullet.html
@@ -0,0 +1,41 @@
+---
+name: Add Steps, and Threshold
+language: plotly_js
+suite: bullet-charts
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ Below is the same example using "steps" attribute, which is shown as shading, and "threshold" to determine boundaries that visually alert you if the value cross a defined threshold.
+---
+var data = [
+ {
+ type: "indicator",
+ mode: "number+gauge+delta",
+ value: 220,
+ domain: { x: [0, 1], y: [0, 1] },
+ title: {
+ text: "Profit "
+ },
+ delta: { reference: 200 },
+ gauge: {
+ shape: "bullet",
+ axis: { range: [null, 300] },
+ threshold: {
+ line: { color: "red", width: 2 },
+ thickness: 0.75,
+ value: 280
+ },
+ steps: [
+ { range: [0, 150], color: "lightgray" },
+ { range: [150, 250], color: "gray" }
+ ]
+ }
+ }
+];
+
+var layout = { width: 600, height: 250 };
+var config = { responsive: true };
+
+Plotly.newPlot('myDiv', data, layout, config);
diff --git a/content/plotly_js/financial/bullet/2019-07-30-basic-bullet.html b/content/plotly_js/financial/bullet/2019-07-30-basic-bullet.html
new file mode 100644
index 00000000000..7bf96d302cd
--- /dev/null
+++ b/content/plotly_js/financial/bullet/2019-07-30-basic-bullet.html
@@ -0,0 +1,26 @@
+---
+name: Basic Bullet Charts
+language: plotly_js
+suite: bullet-charts
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ Stephen Few's Bullet Chart was invented to replace dashboard [gauges](https://plotly.com/javascript/gauge-charts/) and meters, combining both types of charts into simple bar charts with qualitative bars (steps), quantitative bar (bar) and performance line (threshold); all into one simple layout.
+ Steps typically are broken into several values, which are defined with an array. The bar represent the actual value that a particular variable reached, and the threshold usually indicate a goal point relative to the value achieved by the bar. See [indicator page](https://plotly.com/javascript/gauge-charts/) for more detail.
+---
+var data = [
+ {
+ type: "indicator",
+ mode: "number+gauge+delta",
+ gauge: { shape: "bullet" },
+ delta: { reference: 300 },
+ value: 220,
+ domain: { x: [0, 1], y: [0, 1] },
+ title: { text: "Profit" }
+ }
+];
+
+var layout = { width: 600, height: 250 };
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/financial/bullet/2019-07-30-custom-bullet.html b/content/plotly_js/financial/bullet/2019-07-30-custom-bullet.html
new file mode 100644
index 00000000000..338f577e7ed
--- /dev/null
+++ b/content/plotly_js/financial/bullet/2019-07-30-custom-bullet.html
@@ -0,0 +1,42 @@
+---
+name: Custom Bullet Chart
+language: plotly_js
+suite: bullet-charts
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ The following example shows how to customize your charts. For more information about all possible options check our [reference page](https://plotly.com/javascript/reference/indicator/).
+---
+var data = [
+ {
+ type: "indicator",
+ mode: "number+gauge+delta",
+ value: 220,
+ domain: { x: [0, 1], y: [0, 1] },
+ delta: { reference: 280, position: "top" },
+ title: {
+ text:
+ "Profit U.S. $ ",
+ font: { size: 14 }
+ },
+ gauge: {
+ shape: "bullet",
+ axis: { range: [null, 300] },
+ threshold: {
+ line: { color: "red", width: 2, gradient: { yanchor: "vertical" } },
+ thickness: 0.75,
+ value: 270
+ },
+ bgcolor: "white",
+ steps: [{ range: [0, 150], color: "cyan" }],
+ bar: { color: "darkblue" }
+ }
+ }
+];
+
+var layout = { width: 400, height: 230 };
+var config = { responsive: true };
+
+Plotly.newPlot('myDiv', data, layout, config);
diff --git a/content/plotly_js/financial/bullet/2019-07-30-multi-bullet.html b/content/plotly_js/financial/bullet/2019-07-30-multi-bullet.html
new file mode 100644
index 00000000000..29d3abf7fa1
--- /dev/null
+++ b/content/plotly_js/financial/bullet/2019-07-30-multi-bullet.html
@@ -0,0 +1,88 @@
+---
+name: Multi Bullet
+language: plotly_js
+suite: bullet-charts
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ Bullet charts can be stacked for comparing several values at once as illustrated below:
+---
+var data = [
+ {
+ type: "indicator",
+ mode: "number+gauge+delta",
+ value: 180,
+ delta: { reference: 200 },
+ domain: { x: [0.25, 1], y: [0.08, 0.25] },
+ title: { text: "Revenue" },
+ gauge: {
+ shape: "bullet",
+ axis: { range: [null, 300] },
+ threshold: {
+ line: { color: "black", width: 2 },
+ thickness: 0.75,
+ value: 170
+ },
+ steps: [
+ { range: [0, 150], color: "gray" },
+ {
+ range: [150, 250],
+ color: "lightgray"
+ }
+ ],
+ bar: { color: "black" }
+ }
+ },
+ {
+ type: "indicator",
+ mode: "number+gauge+delta",
+ value: 35,
+ delta: { reference: 200 },
+ domain: { x: [0.25, 1], y: [0.4, 0.6] },
+ title: { text: "Profit" },
+ gauge: {
+ shape: "bullet",
+ axis: { range: [null, 100] },
+ threshold: {
+ line: { color: "black", width: 2 },
+ thickness: 0.75,
+ value: 50
+ },
+ steps: [
+ { range: [0, 25], color: "gray" },
+ { range: [25, 75], color: "lightgray" }
+ ],
+ bar: { color: "black" }
+ }
+ },
+ {
+ type: "indicator",
+ mode: "number+gauge+delta",
+ value: 220,
+ delta: { reference: 200 },
+ domain: { x: [0.25, 1], y: [0.7, 0.9] },
+ title: { text: "Satisfaction" },
+ gauge: {
+ shape: "bullet",
+ axis: { range: [null, 300] },
+ threshold: {
+ line: { color: "black", width: 2 },
+ thickness: 0.75,
+ value: 210
+ },
+ steps: [
+ { range: [0, 150], color: "gray" },
+ { range: [150, 250], color: "lightgray" }
+ ],
+ bar: { color: "black" }
+ }
+ }
+];
+
+var layout = {
+ width: 600, height: 250,
+ margin: { t: 10, r: 25, l: 25, b: 10 }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/financial/candlestick-charts/2015-08-15-basic-candlestick-chart.html b/content/plotly_js/financial/candlestick-charts/2015-08-15-basic-candlestick-chart.html
new file mode 100644
index 00000000000..38279d91322
--- /dev/null
+++ b/content/plotly_js/financial/candlestick-charts/2015-08-15-basic-candlestick-chart.html
@@ -0,0 +1,62 @@
+---
+name: Simple Candlestick Chart
+language: plotly_js
+suite: candlestick
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+
+ x: ['2017-01-04', '2017-01-05', '2017-01-06', '2017-01-09', '2017-01-10', '2017-01-11', '2017-01-12', '2017-01-13', '2017-01-17', '2017-01-18', '2017-01-19', '2017-01-20', '2017-01-23', '2017-01-24', '2017-01-25', '2017-01-26', '2017-01-27', '2017-01-30', '2017-01-31', '2017-02-01', '2017-02-02', '2017-02-03', '2017-02-06', '2017-02-07', '2017-02-08', '2017-02-09', '2017-02-10', '2017-02-13', '2017-02-14', '2017-02-15'],
+
+ close: [116.019997, 116.610001, 117.910004, 118.989998, 119.110001, 119.75, 119.25, 119.040001, 120, 119.989998, 119.779999, 120, 120.080002, 119.970001, 121.879997, 121.940002, 121.949997, 121.629997, 121.349998, 128.75, 128.529999, 129.080002, 130.289993, 131.529999, 132.039993, 132.419998, 132.119995, 133.289993, 135.020004, 135.509995],
+
+ decreasing: {line: {color: '#7F7F7F'}},
+
+ high: [116.510002, 116.860001, 118.160004, 119.43, 119.379997, 119.93, 119.300003, 119.620003, 120.239998, 120.5, 120.089996, 120.449997, 120.809998, 120.099998, 122.099998, 122.440002, 122.349998, 121.629997, 121.389999, 130.490005, 129.389999, 129.190002, 130.5, 132.089996, 132.220001, 132.449997, 132.940002, 133.820007, 135.089996, 136.270004],
+
+ increasing: {line: {color: '#17BECF'}},
+
+ line: {color: 'rgba(31,119,180,1)'},
+
+ low: [115.75, 115.809998, 116.470001, 117.940002, 118.300003, 118.599998, 118.209999, 118.809998, 118.220001, 119.709999, 119.370003, 119.730003, 119.769997, 119.5, 120.279999, 121.599998, 121.599998, 120.660004, 120.620003, 127.010002, 127.779999, 128.160004, 128.899994, 130.449997, 131.220001, 131.119995, 132.050003, 132.75, 133.25, 134.619995],
+
+ open: [115.849998, 115.919998, 116.779999, 117.949997, 118.769997, 118.739998, 118.900002, 119.110001, 118.339996, 120, 119.400002, 120.449997, 120, 119.550003, 120.419998, 121.669998, 122.139999, 120.93, 121.150002, 127.029999, 127.980003, 128.309998, 129.130005, 130.539993, 131.350006, 131.649994, 132.460007, 133.080002, 133.470001, 135.520004],
+
+ type: 'candlestick',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var data = [trace1];
+
+var layout = {
+ dragmode: 'zoom',
+ margin: {
+ r: 10,
+ t: 25,
+ b: 40,
+ l: 60
+ },
+ showlegend: false,
+ xaxis: {
+ autorange: true,
+ domain: [0, 1],
+ range: ['2017-01-03 12:00', '2017-02-15 12:00'],
+ rangeslider: {range: ['2017-01-03 12:00', '2017-02-15 12:00']},
+ title: {
+ text: 'Date'
+ },
+ type: 'date'
+ },
+ yaxis: {
+ autorange: true,
+ domain: [0, 1],
+ range: [114.609999778, 137.410004222],
+ type: 'linear'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/financial/candlestick-charts/2015-08-15-candlestick-colors.html b/content/plotly_js/financial/candlestick-charts/2015-08-15-candlestick-colors.html
new file mode 100644
index 00000000000..69e8e7b5357
--- /dev/null
+++ b/content/plotly_js/financial/candlestick-charts/2015-08-15-candlestick-colors.html
@@ -0,0 +1,51 @@
+---
+name: Customizing Candlestick Chart Colors
+language: plotly_js
+suite: candlestick
+order: 3
+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 trace = {
+ x: unpack(rows, 'Date'),
+ close: unpack(rows, 'AAPL.Close'),
+ high: unpack(rows, 'AAPL.High'),
+ low: unpack(rows, 'AAPL.Low'),
+ open: unpack(rows, 'AAPL.Open'),
+
+ // cutomise colors
+ increasing: {line: {color: 'black'}},
+ decreasing: {line: {color: 'red'}},
+
+ type: 'candlestick',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var data = [trace];
+
+var layout = {
+ dragmode: 'zoom',
+ showlegend: false,
+ xaxis: {
+ title: {
+ text: 'Date'
+ },
+ range: ['2016-06-01 12:00', '2017-01-01 12:00']
+ },
+ yaxis: {
+ autorange: true,
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/financial/candlestick-charts/2015-08-15-candlestick-rangeselector.html b/content/plotly_js/financial/candlestick-charts/2015-08-15-candlestick-rangeselector.html
new file mode 100644
index 00000000000..98edcc99ab8
--- /dev/null
+++ b/content/plotly_js/financial/candlestick-charts/2015-08-15-candlestick-rangeselector.html
@@ -0,0 +1,71 @@
+---
+name: Add Rangeselector
+language: plotly_js
+suite: candlestick
+order: 4
+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 trace = {
+ x: unpack(rows, 'Date'),
+ close: unpack(rows, 'AAPL.Close'),
+ high: unpack(rows, 'AAPL.High'),
+ low: unpack(rows, 'AAPL.Low'),
+ open: unpack(rows, 'AAPL.Open'),
+
+ // cutomise colors
+ increasing: {line: {color: 'black'}},
+ decreasing: {line: {color: 'red'}},
+
+ type: 'candlestick',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var data = [trace];
+
+var layout = {
+ dragmode: 'zoom',
+ showlegend: false,
+ xaxis: {
+ autorange: true,
+ title: {
+ text: 'Date'
+ },
+ rangeselector: {
+ x: 0,
+ y: 1.2,
+ xanchor: 'left',
+ font: {size:8},
+ buttons: [{
+ step: 'month',
+ stepmode: 'backward',
+ count: 1,
+ label: '1 month'
+ }, {
+ step: 'month',
+ stepmode: 'backward',
+ count: 6,
+ label: '6 months'
+ }, {
+ step: 'all',
+ label: 'All dates'
+ }]
+ }
+ },
+ yaxis: {
+ autorange: true,
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/financial/candlestick-charts/2015-08-15-candlestick-rangeslider.html b/content/plotly_js/financial/candlestick-charts/2015-08-15-candlestick-rangeslider.html
new file mode 100644
index 00000000000..d871e646f85
--- /dev/null
+++ b/content/plotly_js/financial/candlestick-charts/2015-08-15-candlestick-rangeslider.html
@@ -0,0 +1,47 @@
+---
+name: Candlestick Chart without Rangeslider
+language: plotly_js
+suite: candlestick
+order: 1.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 trace = {
+ x: unpack(rows, 'Date'),
+ close: unpack(rows, 'AAPL.Close'),
+ high: unpack(rows, 'AAPL.High'),
+ low: unpack(rows, 'AAPL.Low'),
+ open: unpack(rows, 'AAPL.Open'),
+
+ // cutomise colors
+ increasing: {line: {color: 'black'}},
+ decreasing: {line: {color: 'red'}},
+
+ type: 'candlestick',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var data = [trace];
+
+var layout = {
+ dragmode: 'zoom',
+ showlegend: false,
+ xaxis: {
+ rangeslider: {
+ visible: false
+ }
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/financial/candlestick-charts/2015-08-15-candlestick_index.html b/content/plotly_js/financial/candlestick-charts/2015-08-15-candlestick_index.html
new file mode 100644
index 00000000000..47acac812cb
--- /dev/null
+++ b/content/plotly_js/financial/candlestick-charts/2015-08-15-candlestick_index.html
@@ -0,0 +1,15 @@
+---
+description: How to graph D3.js-based candlestick charts in javascript. Examples of
+ candlestick charts.
+display_as: financial
+language: plotly_js
+layout: base
+name: Candlestick Charts
+order: 3
+page_type: example_index
+permalink: javascript/candlestick-charts/
+thumbnail: thumbnail/candlestick.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","candlestick" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/financial/candlestick-charts/2015-08-15-customizing-candlestick-chart.html b/content/plotly_js/financial/candlestick-charts/2015-08-15-customizing-candlestick-chart.html
new file mode 100644
index 00000000000..2fb6b58e660
--- /dev/null
+++ b/content/plotly_js/financial/candlestick-charts/2015-08-15-customizing-candlestick-chart.html
@@ -0,0 +1,90 @@
+---
+name: Customise Candlestick Chart with Shapes and Annotations
+language: plotly_js
+suite: candlestick
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+
+ x: ['2017-01-17', '2017-01-18', '2017-01-19', '2017-01-20', '2017-01-23', '2017-01-24', '2017-01-25', '2017-01-26', '2017-01-27', '2017-01-30', '2017-01-31', '2017-02-01', '2017-02-02', '2017-02-03', '2017-02-06', '2017-02-07', '2017-02-08', '2017-02-09', '2017-02-10'],
+
+ close: [120, 119.989998, 119.779999, 120, 120.080002, 119.970001, 121.879997, 121.940002, 121.949997, 121.629997, 121.349998, 128.75, 128.529999, 129.080002, 130.289993, 131.529999, 132.039993, 132.419998, 132.119995],
+
+ decreasing: {line: {color: '#7F7F7F'}},
+
+ high: [120.239998, 120.5, 120.089996, 120.449997, 120.809998, 120.099998, 122.099998, 122.440002, 122.349998, 121.629997, 121.389999, 130.490005, 129.389999, 129.190002, 130.5, 132.089996, 132.220001, 132.449997, 132.940002],
+
+ increasing: {line: {color: '#17BECF'}},
+
+ line: {color: 'rgba(31,119,180,1)'},
+
+ low: [118.220001, 119.709999, 119.370003, 119.730003, 119.769997, 119.5, 120.279999, 121.599998, 121.599998, 120.660004, 120.620003, 127.010002, 127.779999, 128.160004, 128.899994, 130.449997, 131.220001, 131.119995, 132.050003],
+
+ open: [118.339996, 120, 119.400002, 120.449997, 120, 119.550003, 120.419998, 121.669998, 122.139999, 120.93, 121.150002, 127.029999, 127.980003, 128.309998, 129.130005, 130.539993, 131.350006, 131.649994, 132.460007],
+
+ type: 'candlestick',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var data = [trace1];
+
+var layout = {
+ dragmode: 'zoom',
+ margin: {
+ r: 10,
+ t: 25,
+ b: 40,
+ l: 60
+ },
+ showlegend: false,
+ xaxis: {
+ autorange: true,
+ rangeslider: {range: ['2017-01-17 12:00', '2017-02-10 12:00']},
+ title: {
+ text: 'Date'
+ },
+ type: 'date'
+ },
+ yaxis: {
+ autorange: true,
+ type: 'linear'
+ },
+
+ annotations: [
+ {
+ x: '2017-01-31',
+ y: 0.9,
+ xref: 'x',
+ yref: 'paper',
+ text: 'largest movement',
+ font: {color: 'magenta'},
+ showarrow: true,
+ xanchor: 'right',
+ ax: -20,
+ ay: 0
+ }
+ ],
+
+ shapes: [
+ {
+ type: 'rect',
+ xref: 'x',
+ yref: 'paper',
+ x0: '2017-01-31',
+ y0: 0,
+ x1: '2017-02-01',
+ y1: 1,
+ fillcolor: '#d3d3d3',
+ opacity: 0.2,
+ line: {
+ width: 0
+ }
+ }
+ ]
+};
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/financial/funnel/2019-06-27-funnel_plotly_js_index.html b/content/plotly_js/financial/funnel/2019-06-27-funnel_plotly_js_index.html
new file mode 100644
index 00000000000..8930eb05e07
--- /dev/null
+++ b/content/plotly_js/financial/funnel/2019-06-27-funnel_plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to make a D3.js-based funnel chart in javascript.
+display_as: financial
+language: plotly_js
+layout: base
+name: Funnel and Funnelarea Charts
+order: 4
+page_type: example_index
+permalink: javascript/funnel-charts/
+thumbnail: thumbnail/funnel.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","funnel" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/financial/funnel/2019-06-27-funnelarea.html b/content/plotly_js/financial/funnel/2019-06-27-funnelarea.html
new file mode 100644
index 00000000000..fd5d4c05975
--- /dev/null
+++ b/content/plotly_js/financial/funnel/2019-06-27-funnelarea.html
@@ -0,0 +1,17 @@
+---
+name: Funnelarea Plot
+language: plotly_js
+suite: funnel
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+var gd = document.getElementById('myDiv');
+var data = [{type: 'funnelarea', values: [5, 4, 3, 2, 1], text: ["The 1st", "The 2nd", "The 3rd", "The 4th", "The 5th"],
+ marker: {colors: ["59D4E8", "DDB6C6", "A696C8", "67EACA", "94D2E6"],
+ line: {color: ["3E4E88", "606470", "3E4E88", "606470", "3E4E88"], width: [2, 1, 5, 0, 3]}},
+ textfont: {family: "Old Standard TT", size: 13, color: "black"}, opacity: 0.65}];
+
+var layout = {margin: {l: 200 , r: 200}, funnelmode: "stack", showlegend: 'True'}
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/financial/funnel/2019-06-27-multi-funnelarea.html b/content/plotly_js/financial/funnel/2019-06-27-multi-funnelarea.html
new file mode 100644
index 00000000000..e17d19b76e5
--- /dev/null
+++ b/content/plotly_js/financial/funnel/2019-06-27-multi-funnelarea.html
@@ -0,0 +1,32 @@
+---
+name: Multi Funnelarea
+language: plotly_js
+suite: funnel
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+var gd = document.getElementById('myDiv');
+var data = [{type: 'funnelarea', scalegroup: "first", values: [500, 450, 340, 230, 220, 110],
+ textinfo: "value", title: {position: "top center", text: "Sales for Sale Person A in U.S."},
+ domain: {x: [0, 0.5], y: [0, 0.5]}},
+{
+ type: 'funnelarea', scalegroup: "first", values: [600, 500, 400, 300, 200, 100], textinfo: "value",
+ title: {position: "top center", text: "Sales of Sale Person B in Canada"},
+ domain: {x: [0, 0.5], y: [0.55, 1]}},
+{
+ type:'funnelarea', scalegroup: "second", values: [510, 480, 440, 330, 220, 100], textinfo: "value",
+ title: {position: "top left", text: "Sales of Sale Person A in Canada"},
+ domain: {x: [0.55, 1], y: [0, 0.5]}},
+{
+ type: 'funnelarea', scalegroup: "second", values: [360, 250, 240, 130, 120, 60],
+ textinfo: "value", title: {position: "top left", text: "Sales of Sale Person B in U.S."},
+ domain: {x: [0.55, 1], y: [0.55, 1]}}];
+
+var layout = {width: 600,shapes: [
+ {x0: 0, x1: 0.5, y0: 0, y1: 0.5},
+ {x0: 0, x1: 0.5, y0: 0.55, y1: 1},
+ {x0: 0.55, x1: 1, y0: 0, y1: 0.5},
+ {x0: 0.55, x1: 1, y0: 0.55, y1: 1}]}
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/financial/funnel/2019-06-27-part-of-previous-funnel.html b/content/plotly_js/financial/funnel/2019-06-27-part-of-previous-funnel.html
new file mode 100644
index 00000000000..d25a0b2c751
--- /dev/null
+++ b/content/plotly_js/financial/funnel/2019-06-27-part-of-previous-funnel.html
@@ -0,0 +1,14 @@
+---
+name: Basic Funnel Plot
+language: plotly_js
+suite: funnel
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var gd = document.getElementById('myDiv');
+var data = [{type: 'funnel', y: ["Website visit", "Downloads", "Potential customers", "Invoice sent", "Closed delas"], x: [13873, 10533, 5443, 2703, 908], hoverinfo: 'x+percent previous+percent initial'}];
+
+var layout = {margin: {l: 150}, width:600, height: 500}
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/financial/funnel/2019-06-27-part-of-whole-funnel.html b/content/plotly_js/financial/funnel/2019-06-27-part-of-whole-funnel.html
new file mode 100644
index 00000000000..eab16fd2c93
--- /dev/null
+++ b/content/plotly_js/financial/funnel/2019-06-27-part-of-whole-funnel.html
@@ -0,0 +1,20 @@
+---
+name: Setting Marker Size and Color
+language: plotly_js
+suite: funnel
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+var gd = document.getElementById('myDiv');
+
+var data = [{type: 'funnel',
+ y: ["Sales person A", "Sales person B", "Sales person C", "Sales person D", "Sales person E"],
+ x: [1200, 909.4, 600.6, 300, 80], textposition: "inside", textinfo: "value+percent initial",
+ hoverinfo: 'percent total+x', opacity: 0.65, marker: {color: ["59D4E8", "DDB6C6", "A696C8", "67EACA", "94D2E6"],
+ line: {"width": [4, 2, 2, 3, 1, 1], color: ["3E4E88", "606470", "3E4E88", "606470", "3E4E88"]}},
+ connector: {line: {color: "royalblue", dash: "dot", width: 3}}}];
+
+var layout = {margin: {l: 100}, width: 600, height: 500}
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/financial/funnel/2019-06-27-stacked-funnel.html b/content/plotly_js/financial/funnel/2019-06-27-stacked-funnel.html
new file mode 100644
index 00000000000..2dda1b7ee23
--- /dev/null
+++ b/content/plotly_js/financial/funnel/2019-06-27-stacked-funnel.html
@@ -0,0 +1,25 @@
+---
+name: Stacked Funnel
+language: plotly_js
+suite: funnel
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+var gd = document.getElementById('myDiv');
+var data = [{type: 'funnel', name: 'Montreal',
+ y: ["Website visit", "Downloads", "Potential customers", "Requested price"],
+ x: [120, 60, 30, 20],
+ textinfo: "value+percent initial"},
+ {
+ type: 'funnel',name: 'Toronto',
+ y: ["Website visit", "Downloads", "Potential customers", "Requested price", "invoice sent"],
+ x: [100, 60, 40, 30, 20], textposition: "inside", textinfo: "value+percent previous"},
+ {
+ type: 'funnel',name: 'Vancouver',
+ y: ["Website visit", "Downloads", "Potential customers", "Requested price", "invoice sent", "closed deals"],
+ x: [90, 70, 50, 30, 10, 5], textposition: "outside", textinfo: "value+percent total"}];
+
+var layout = {margin: {l: 130, r: 0}, width: 600, funnelmode: "stack", showlegend: 'true'}
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/financial/gauge/2015-12-20-gauge-charts_plotly_js_index.html b/content/plotly_js/financial/gauge/2015-12-20-gauge-charts_plotly_js_index.html
new file mode 100644
index 00000000000..615b97019dd
--- /dev/null
+++ b/content/plotly_js/financial/gauge/2015-12-20-gauge-charts_plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to make a D3.js-based gauge chart in javascript.
+display_as: financial
+language: plotly_js
+layout: base
+name: Gauge Charts
+order: 7
+permalink: javascript/gauge-charts/
+redirect_from: javascript-graphing-library/gauge-charts
+thumbnail: thumbnail/gauge.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","gauge-charts" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/financial/gauge/2019-07-30-advance-gauge.html b/content/plotly_js/financial/gauge/2019-07-30-advance-gauge.html
new file mode 100644
index 00000000000..6cc9cb0d8b9
--- /dev/null
+++ b/content/plotly_js/financial/gauge/2019-07-30-advance-gauge.html
@@ -0,0 +1,37 @@
+---
+name: Add Steps, Threshold, and Delta
+language: plotly_js
+suite: gauge-charts
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ The following examples include "steps" attribute shown as shading inside the radial arc, "delta" which is the
+ difference of the value and goal (reference - value), and "threshold" to determine boundaries that visually alert you if the value cross a defined threshold.
+---
+var data = [
+ {
+ domain: { x: [0, 1], y: [0, 1] },
+ value: 450,
+ title: { text: "Speed" },
+ type: "indicator",
+ mode: "gauge+number+delta",
+ delta: { reference: 380 },
+ gauge: {
+ axis: { range: [null, 500] },
+ steps: [
+ { range: [0, 250], color: "lightgray" },
+ { range: [250, 400], color: "gray" }
+ ],
+ threshold: {
+ line: { color: "red", width: 4 },
+ thickness: 0.75,
+ value: 490
+ }
+ }
+ }
+];
+
+var layout = { width: 600, height: 450, margin: { t: 0, b: 0 } };
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/financial/gauge/2019-07-30-basic-gauge.html b/content/plotly_js/financial/gauge/2019-07-30-basic-gauge.html
new file mode 100644
index 00000000000..3d58d769eef
--- /dev/null
+++ b/content/plotly_js/financial/gauge/2019-07-30-basic-gauge.html
@@ -0,0 +1,27 @@
+---
+name: Basic Gauge
+language: plotly_js
+suite: gauge-charts
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ A radial gauge chart has a circular arc, which displays a single value to estimate progress toward a goal.
+ The bar shows the target value, and the shading represents the progress toward that goal. Gauge charts, known as
+ speedometer charts as well. This chart type is usually used to illustrate key business indicators.
+
+ The example below displays a basic gauge chart with default attributes. For more information about different added attributes check [indicator](https://plotly.com/javascript/indicator/) tutorial.
+---
+var data = [
+ {
+ domain: { x: [0, 1], y: [0, 1] },
+ value: 270,
+ title: { text: "Speed" },
+ type: "indicator",
+ mode: "gauge+number"
+ }
+];
+
+var layout = { width: 600, height: 500, margin: { t: 0, b: 0 } };
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/financial/gauge/2019-07-30-custom-gauge.html b/content/plotly_js/financial/gauge/2019-07-30-custom-gauge.html
new file mode 100644
index 00000000000..23bf3ead505
--- /dev/null
+++ b/content/plotly_js/financial/gauge/2019-07-30-custom-gauge.html
@@ -0,0 +1,46 @@
+---
+name: Custom Gauge Chart
+language: plotly_js
+suite: gauge-charts
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ The following example shows how to style your gauge charts. For more information about all possible options check our [reference page](https://plotly.com/javascript/reference/indicator/).
+---
+var data = [
+ {
+ type: "indicator",
+ mode: "gauge+number+delta",
+ value: 420,
+ title: { text: "Speed", font: { size: 24 } },
+ delta: { reference: 400, increasing: { color: "RebeccaPurple" } },
+ gauge: {
+ axis: { range: [null, 500], tickwidth: 1, tickcolor: "darkblue" },
+ bar: { color: "darkblue" },
+ bgcolor: "white",
+ borderwidth: 2,
+ bordercolor: "gray",
+ steps: [
+ { range: [0, 250], color: "cyan" },
+ { range: [250, 400], color: "royalblue" }
+ ],
+ threshold: {
+ line: { color: "red", width: 4 },
+ thickness: 0.75,
+ value: 490
+ }
+ }
+ }
+];
+
+var layout = {
+ width: 500,
+ height: 400,
+ margin: { t: 25, r: 25, l: 25, b: 25 },
+ paper_bgcolor: "lavender",
+ font: { color: "darkblue", family: "Arial" }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/financial/indicator1/2015-12-20-indicator_plotly_js_index.html b/content/plotly_js/financial/indicator1/2015-12-20-indicator_plotly_js_index.html
new file mode 100644
index 00000000000..cedfee0520f
--- /dev/null
+++ b/content/plotly_js/financial/indicator1/2015-12-20-indicator_plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to make a D3.js-based gauge chart in javascript.
+display_as: financial
+language: plotly_js
+layout: base
+name: Indicators
+order: 2
+page_type: example_index
+permalink: javascript/indicator/
+thumbnail: thumbnail/indicator.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","indicator" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/financial/indicator1/2019-07-29-above-other-traces.html b/content/plotly_js/financial/indicator1/2019-07-29-above-other-traces.html
new file mode 100644
index 00000000000..12b238a974c
--- /dev/null
+++ b/content/plotly_js/financial/indicator1/2019-07-29-above-other-traces.html
@@ -0,0 +1,27 @@
+---
+name: Showing Information above Your Chart
+language: plotly_js
+suite: indicator
+order: 4
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ Another interesting feature is that indicator trace sits above the other traces (even the 3d ones). This way, it can be easily used as an overlay as demonstrated below:
+---
+var data = [
+ {
+ type: "indicator",
+ mode: "number+delta",
+ value: 492,
+ delta: { reference: 512, valueformat: ".0f" },
+ domain: { y: [0, 1], x: [0.25, 0.75] },
+ title: { text: "Users online" }
+ },
+ {
+ y: [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492]
+ }
+];
+
+var layout = { width: 600, height: 450, xaxis: { range: [0, 62] } };
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/financial/indicator1/2019-07-29-angular-gauge.html b/content/plotly_js/financial/indicator1/2019-07-29-angular-gauge.html
new file mode 100644
index 00000000000..b911af13af5
--- /dev/null
+++ b/content/plotly_js/financial/indicator1/2019-07-29-angular-gauge.html
@@ -0,0 +1,23 @@
+---
+name: A Single Angular Gauge Chart
+language: plotly_js
+suite: indicator
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+---
+var data = [
+ {
+ domain: { x: [0, 1], y: [0, 1] },
+ value: 450,
+ title: { text: "Speed" },
+ type: "indicator",
+ mode: "gauge+number",
+ delta: { reference: 400 },
+ gauge: { axis: { range: [null, 500] } }
+ }
+];
+
+var layout = { width: 600, height: 400 };
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/financial/indicator1/2019-07-29-basic-data-card.html b/content/plotly_js/financial/indicator1/2019-07-29-basic-data-card.html
new file mode 100644
index 00000000000..59aa78b224f
--- /dev/null
+++ b/content/plotly_js/financial/indicator1/2019-07-29-basic-data-card.html
@@ -0,0 +1,31 @@
+---
+name: Data Cards / Big Numbers
+language: plotly_js
+suite: indicator
+order: 4.1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ Data card helps to display more contextual information about the data. Sometimes one number is all you want to see in a report, such as total sales, annual revenue, etc. This example shows how to visualize these big numbers:
+---
+var data = [
+ {
+ type: "indicator",
+ mode: "number+delta",
+ value: 400,
+ number: { prefix: "$" },
+ delta: { position: "top", reference: 320 },
+ domain: { x: [0, 1], y: [0, 1] }
+ }
+];
+
+var layout = {
+ paper_bgcolor: "lightgray",
+ width: 600,
+ height: 200,
+ margin: { t: 0, b: 0, l: 0, r: 0 }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+
diff --git a/content/plotly_js/financial/indicator1/2019-07-29-bullet.html b/content/plotly_js/financial/indicator1/2019-07-29-bullet.html
new file mode 100644
index 00000000000..110225c26c4
--- /dev/null
+++ b/content/plotly_js/financial/indicator1/2019-07-29-bullet.html
@@ -0,0 +1,27 @@
+---
+name: Bullet Gauge
+language: plotly_js
+suite: indicator
+order: 3
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ The equivalent of above "angular gauge":
+
+---
+var data = [
+ {
+ type: "indicator",
+ mode: "number+gauge+delta",
+ gauge: { shape: "bullet" },
+ delta: { reference: 300 },
+ value: 220,
+ domain: { x: [0, 1], y: [0, 1] },
+ title: { text: "Profit" }
+ }
+];
+
+var layout = { width: 600, height: 250 };
+Plotly.newPlot('myDiv', data, layout);
+
diff --git a/content/plotly_js/financial/indicator1/2019-07-29-overview.html b/content/plotly_js/financial/indicator1/2019-07-29-overview.html
new file mode 100644
index 00000000000..0a411b3a89b
--- /dev/null
+++ b/content/plotly_js/financial/indicator1/2019-07-29-overview.html
@@ -0,0 +1,88 @@
+---
+name: Overview
+language: plotly_js
+suite: indicator
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ In this tutorial we introduce a new trace named "Indicator". The purpose of "indicator" is to visualize a single value specified by the "value" attribute.
+ Three distinct visual elements are available to represent that value: number, delta and gauge. Any combination of them can be specified via the "mode" attribute.
+ Top-level attributes are:
+
+ value: the value to visualize
+ mode: which visual elements to draw
+ align: how to align number and delta (left, center, right)
+ domain: the extent of the figure
+
+
+ Then we can configure the 3 different visual elements via their respective container:
+
+ number is simply a representation of the number in text. It has attributes:
+ valueformat: to format the number
+ prefix: a string before the number
+ suffix: a string after the number
+ font.(family|size): to control the font
+
+ "delta" simply displays the difference between the value with respect to a reference. It has attributes:
+
+ reference: the number to compare the value with
+ relative: whether that difference is absolute or relative
+ valueformat: to format the delta
+ (increasing|decreasing).color: color to be used for positive or decreasing delta
+ (increasing|decreasing).symbol: symbol displayed on the left of the delta
+ font.(family|size): to control the font
+ position: position relative to `number` (either top, left, bottom, right)
+
+ Finally, we can have a simple title for the indicator via `title` with 'text' attribute which is a string, and 'align' which can be set to left, center, and right.
+ There are two gauge types: [angular](https://plotly.com/javascript/gauge-charts/) and [bullet](https://plotly.com/javascript/bullet-charts/). Here is a combination of both shapes (angular, bullet), and different modes (guage, delta, and value):
+---
+var data = [
+ {
+ type: "indicator",
+ value: 200,
+ delta: { reference: 160 },
+ gauge: { axis: { visible: false, range: [0, 250] } },
+ domain: { row: 0, column: 0 }
+ },
+ {
+ type: "indicator",
+ value: 120,
+ gauge: {
+ shape: "bullet",
+ axis: {
+ visible: false,
+ range: [-200, 200]
+ }
+ },
+ domain: { x: [0.1, 0.5], y: [0.15, 0.35] }
+ },
+ {
+ type: "indicator",
+ mode: "number+delta",
+ value: 300,
+ domain: { row: 0, column: 1 }
+ },
+ { type: "indicator", mode: "delta", value: 40, domain: { row: 1, column: 1 } }
+];
+
+var layout = {
+ width: 600,
+ height: 400,
+ margin: { t: 25, b: 25, l: 25, r: 25 },
+ grid: { rows: 2, columns: 2, pattern: "independent" },
+ template: {
+ data: {
+ indicator: [
+ {
+ title: { text: "Speed" },
+ mode: "number+delta+gauge",
+ delta: { reference: 90 }
+ }
+ ]
+ }
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/financial/indicator1/2019-07-29-several-big-numbers.html b/content/plotly_js/financial/indicator1/2019-07-29-several-big-numbers.html
new file mode 100644
index 00000000000..c67d03e5141
--- /dev/null
+++ b/content/plotly_js/financial/indicator1/2019-07-29-several-big-numbers.html
@@ -0,0 +1,47 @@
+---
+name:
+language: plotly_js
+suite: indicator
+order: 7
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ It's possible to display several numbers
+---
+var data = [
+ {
+ type: "indicator",
+ mode: "number+delta",
+ value: 200,
+ domain: { x: [0, 0.5], y: [0, 0.5] },
+ delta: { reference: 400, relative: true, position: "top" }
+ },
+ {
+ type: "indicator",
+ mode: "number+delta",
+ value: 350,
+ delta: { reference: 400, relative: true },
+ domain: { x: [0, 0.5], y: [0.5, 1] }
+ },
+ {
+ type: "indicator",
+ mode: "number+delta",
+ value: 450,
+ title: {
+ text:
+ "AccountsSubtitle Subsubtitle "
+ },
+ delta: { reference: 400, relative: true },
+ domain: { x: [0.6, 1], y: [0, 1] }
+ }
+];
+
+var layout = {
+ width: 600,
+ height: 400,
+ margin: { t: 25, r: 25, l: 25, b: 25 }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+
diff --git a/content/plotly_js/financial/ohlc/2015-08-15-customise-colors.html b/content/plotly_js/financial/ohlc/2015-08-15-customise-colors.html
new file mode 100644
index 00000000000..af36f3ec069
--- /dev/null
+++ b/content/plotly_js/financial/ohlc/2015-08-15-customise-colors.html
@@ -0,0 +1,51 @@
+---
+name: Customise OHLC Chart Colors
+language: plotly_js
+suite: ohlc
+order: 3
+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 trace = {
+ x: unpack(rows, 'Date'),
+ close: unpack(rows, 'AAPL.Close'),
+ high: unpack(rows, 'AAPL.High'),
+ low: unpack(rows, 'AAPL.Low'),
+ open: unpack(rows, 'AAPL.Open'),
+
+ // cutomise colors
+ increasing: {line: {color: 'black'}},
+ decreasing: {line: {color: 'red'}},
+
+ type: 'ohlc',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var data = [trace];
+
+var layout = {
+ dragmode: 'zoom',
+ showlegend: false,
+ xaxis: {
+ autorange: true,
+ title: {
+ text: 'Date'
+ },
+ },
+ yaxis: {
+ autorange: true,
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/financial/ohlc/2015-08-15-ohlc-with-rangeselector.html b/content/plotly_js/financial/ohlc/2015-08-15-ohlc-with-rangeselector.html
new file mode 100644
index 00000000000..a8e35c40fb1
--- /dev/null
+++ b/content/plotly_js/financial/ohlc/2015-08-15-ohlc-with-rangeselector.html
@@ -0,0 +1,71 @@
+---
+name: Add Rangeselector
+language: plotly_js
+suite: ohlc
+order: 4
+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 trace = {
+ x: unpack(rows, 'Date'),
+ close: unpack(rows, 'AAPL.Close'),
+ high: unpack(rows, 'AAPL.High'),
+ low: unpack(rows, 'AAPL.Low'),
+ open: unpack(rows, 'AAPL.Open'),
+
+ // cutomise colors
+ increasing: {line: {color: 'black'}},
+ decreasing: {line: {color: 'red'}},
+
+ type: 'ohlc',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var data = [trace];
+
+var layout = {
+ dragmode: 'zoom',
+ showlegend: false,
+ xaxis: {
+ autorange: true,
+ title: {
+ text: 'Date'
+ },
+ rangeselector: {
+ x: 0,
+ y: 1.2,
+ xanchor: 'left',
+ font: {size:8},
+ buttons: [{
+ step: 'month',
+ stepmode: 'backward',
+ count: 1,
+ label: '1 month'
+ }, {
+ step: 'month',
+ stepmode: 'backward',
+ count: 6,
+ label: '6 months'
+ }, {
+ step: 'all',
+ label: 'All dates'
+ }]
+ }
+ },
+ yaxis: {
+ autorange: true,
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/financial/ohlc/2015-08-15-ohlc_index.html b/content/plotly_js/financial/ohlc/2015-08-15-ohlc_index.html
new file mode 100644
index 00000000000..6bc9c6ecc4d
--- /dev/null
+++ b/content/plotly_js/financial/ohlc/2015-08-15-ohlc_index.html
@@ -0,0 +1,14 @@
+---
+description: How to graph D3.js-based OHLC charts in javascript. Examples of OHCL
+ charts.
+display_as: financial
+language: plotly_js
+layout: base
+name: OHLC Charts
+order: 6
+permalink: javascript/ohlc-charts/
+thumbnail: thumbnail/ohlc.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","ohlc" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/financial/ohlc/2015-08-21-customizing-ohlc-figure-with-annotations.html b/content/plotly_js/financial/ohlc/2015-08-21-customizing-ohlc-figure-with-annotations.html
new file mode 100644
index 00000000000..a90bf0d03c9
--- /dev/null
+++ b/content/plotly_js/financial/ohlc/2015-08-21-customizing-ohlc-figure-with-annotations.html
@@ -0,0 +1,91 @@
+---
+name: Customizing the Figure with Shapes and Annotations
+language: plotly_js
+suite: ohlc
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+
+ x: ['2017-01-17', '2017-01-18', '2017-01-19', '2017-01-20', '2017-01-23', '2017-01-24', '2017-01-25', '2017-01-26', '2017-01-27', '2017-01-30', '2017-01-31', '2017-02-01', '2017-02-02', '2017-02-03', '2017-02-06', '2017-02-07', '2017-02-08', '2017-02-09', '2017-02-10'],
+
+ close: [120, 119.989998, 119.779999, 120, 120.080002, 119.970001, 121.879997, 121.940002, 121.949997, 121.629997, 121.349998, 128.75, 128.529999, 129.080002, 130.289993, 131.529999, 132.039993, 132.419998, 132.119995],
+
+ decreasing: {line: {color: '#7F7F7F'}},
+
+ high: [120.239998, 120.5, 120.089996, 120.449997, 120.809998, 120.099998, 122.099998, 122.440002, 122.349998, 121.629997, 121.389999, 130.490005, 129.389999, 129.190002, 130.5, 132.089996, 132.220001, 132.449997, 132.940002],
+
+ increasing: {line: {color: '#17BECF'}},
+
+ line: {color: 'rgba(31,119,180,1)'},
+
+ low: [118.220001, 119.709999, 119.370003, 119.730003, 119.769997, 119.5, 120.279999, 121.599998, 121.599998, 120.660004, 120.620003, 127.010002,
+ 127.779999, 128.160004, 128.899994, 130.449997, 131.220001, 131.119995, 132.050003],
+
+ open: [118.339996, 120, 119.400002, 120.449997, 120, 119.550003, 120.419998, 121.669998, 122.139999, 120.93, 121.150002, 127.029999, 127.980003, 128.309998, 129.130005, 130.539993, 131.350006, 131.649994, 132.460007],
+
+ type: 'ohlc',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var data = [trace1];
+
+var layout = {
+ dragmode: 'zoom',
+ margin: {
+ r: 10,
+ t: 25,
+ b: 40,
+ l: 60
+ },
+ showlegend: false,
+ xaxis: {
+ autorange: true,
+ rangeslider: {range: ['2017-01-17 12:00', '2017-02-10 12:00']},
+ title: {
+ text: 'Date'
+ },
+ type: 'date'
+ },
+ yaxis: {
+ autorange: true,
+ type: 'linear'
+ },
+
+ annotations: [
+ {
+ x: '2017-01-31',
+ y: 0.9,
+ xref: 'x',
+ yref: 'paper',
+ text: 'largest movement',
+ font: {color: 'magenta'},
+ showarrow: true,
+ xanchor: 'right',
+ ax: -20,
+ ay: 0
+ }
+ ],
+
+ shapes: [
+ {
+ type: 'rect',
+ xref: 'x',
+ yref: 'paper',
+ x0: '2017-01-31',
+ y0: 0,
+ x1: '2017-02-01',
+ y1: 1,
+ fillcolor: '#d3d3d3',
+ opacity: 0.2,
+ line: {
+ width: 0
+ }
+ }
+ ]
+};
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/financial/ohlc/2015-08-21-ohlc-chart-rangeslider.html b/content/plotly_js/financial/ohlc/2015-08-21-ohlc-chart-rangeslider.html
new file mode 100644
index 00000000000..53b621207c7
--- /dev/null
+++ b/content/plotly_js/financial/ohlc/2015-08-21-ohlc-chart-rangeslider.html
@@ -0,0 +1,47 @@
+---
+name: OHLC Chart without Rangeslider
+language: plotly_js
+suite: ohlc
+order: 1.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 trace = {
+ x: unpack(rows, 'Date'),
+ close: unpack(rows, 'AAPL.Close'),
+ high: unpack(rows, 'AAPL.High'),
+ low: unpack(rows, 'AAPL.Low'),
+ open: unpack(rows, 'AAPL.Open'),
+
+ // cutomise colors
+ increasing: {line: {color: 'black'}},
+ decreasing: {line: {color: 'red'}},
+
+ type: 'ohlc',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var data = [trace];
+
+var layout = {
+ dragmode: 'zoom',
+ showlegend: false,
+ xaxis: {
+ rangeslider: {
+ visible: false
+ }
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/financial/ohlc/2015-08-21-simple-ohlc-chart.html b/content/plotly_js/financial/ohlc/2015-08-21-simple-ohlc-chart.html
new file mode 100644
index 00000000000..29a146ced54
--- /dev/null
+++ b/content/plotly_js/financial/ohlc/2015-08-21-simple-ohlc-chart.html
@@ -0,0 +1,57 @@
+---
+name: Simple OHLC Chart
+language: plotly_js
+suite: ohlc
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+
+ x: ['2017-01-17', '2017-01-18', '2017-01-19', '2017-01-20', '2017-01-23', '2017-01-24', '2017-01-25', '2017-01-26', '2017-01-27', '2017-01-30', '2017-01-31', '2017-02-01', '2017-02-02', '2017-02-03', '2017-02-06', '2017-02-07', '2017-02-08', '2017-02-09', '2017-02-10'],
+
+ close: [120, 119.989998, 119.779999, 120, 120.080002, 119.970001, 121.879997, 121.940002, 121.949997, 121.629997, 121.349998, 128.75, 128.529999, 129.080002, 130.289993, 131.529999, 132.039993, 132.419998, 132.119995],
+
+ decreasing: {line: {color: '#7F7F7F'}},
+
+ high: [120.239998, 120.5, 120.089996, 120.449997, 120.809998, 120.099998, 122.099998, 122.440002, 122.349998, 121.629997, 121.389999, 130.490005, 129.389999, 129.190002, 130.5, 132.089996, 132.220001, 132.449997, 132.940002],
+
+ increasing: {line: {color: '#17BECF'}},
+
+ line: {color: 'rgba(31,119,180,1)'},
+
+ low: [118.220001, 119.709999, 119.370003, 119.730003, 119.769997, 119.5, 120.279999, 121.599998, 121.599998, 120.660004, 120.620003, 127.010002, 127.779999, 128.160004, 128.899994, 130.449997, 131.220001, 131.119995, 132.050003],
+ open: [118.339996, 120, 119.400002, 120.449997, 120, 119.550003, 120.419998, 121.669998, 122.139999, 120.93, 121.150002, 127.029999, 127.980003, 128.309998, 129.130005, 130.539993, 131.350006, 131.649994, 132.460007],
+
+ type: 'ohlc',
+ xaxis: 'x',
+ yaxis: 'y'
+};
+
+var data = [trace1];
+
+var layout = {
+ dragmode: 'zoom',
+ margin: {
+ r: 10,
+ t: 25,
+ b: 40,
+ l: 60
+ },
+ showlegend: false,
+ xaxis: {
+ autorange: true,
+ rangeslider: {range: ['2017-01-17 12:00', '2017-02-10 12:00']},
+ title: {
+ text: 'Date'
+ },
+ type: 'date'
+ },
+ yaxis: {
+ autorange: true,
+ type: 'linear'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/financial/time-series/2015-04-09-date-axes.html b/content/plotly_js/financial/time-series/2015-04-09-date-axes.html
new file mode 100644
index 00000000000..e289bdcdd4a
--- /dev/null
+++ b/content/plotly_js/financial/time-series/2015-04-09-date-axes.html
@@ -0,0 +1,17 @@
+---
+name: Date Strings
+language: plotly_js
+suite: time-series
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: ['2013-10-04 22:23:00', '2013-11-04 22:23:00', '2013-12-04 22:23:00'],
+ y: [1, 3, 6],
+ type: 'scatter'
+ }
+];
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/financial/time-series/2015-04-09-time-series_plotly_js_index.html b/content/plotly_js/financial/time-series/2015-04-09-time-series_plotly_js_index.html
new file mode 100644
index 00000000000..8ca70e0fb1c
--- /dev/null
+++ b/content/plotly_js/financial/time-series/2015-04-09-time-series_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to plot D3.js-based date and time in Plotly.js. An example of a time-series
+ plot.
+display_as: financial
+language: plotly_js
+layout: base
+name: Time Series
+order: 5
+page_type: example_index
+permalink: javascript/time-series/
+redirect_from: javascript-graphing-library/time-series/
+thumbnail: thumbnail/time-series.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","time-series" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/financial/time-series/2017-08-14-basic-time-series.html b/content/plotly_js/financial/time-series/2017-08-14-basic-time-series.html
new file mode 100644
index 00000000000..5ee487d4c74
--- /dev/null
+++ b/content/plotly_js/financial/time-series/2017-08-14-basic-time-series.html
@@ -0,0 +1,44 @@
+---
+name: Basic Time Series
+language: plotly_js
+suite: time-series
+order: 2
+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: 'Date'
+ },
+};
+
+Plotly.newPlot('myDiv', data, layout);
+})
diff --git a/content/plotly_js/financial/time-series/2017-08-14-time-series-range.html b/content/plotly_js/financial/time-series/2017-08-14-time-series-range.html
new file mode 100644
index 00000000000..38af14dd70a
--- /dev/null
+++ b/content/plotly_js/financial/time-series/2017-08-14-time-series-range.html
@@ -0,0 +1,51 @@
+---
+name: Manually Set Range
+language: plotly_js
+suite: time-series
+order: 3
+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",
+ x: unpack(rows, 'Date'),
+ y: unpack(rows, 'AAPL.High'),
+ line: {color: '#17BECF'}
+}
+
+var trace2 = {
+ type: "scatter",
+ mode: "lines",
+ x: unpack(rows, 'Date'),
+ y: unpack(rows, 'AAPL.Low'),
+ line: {color: '#7F7F7F'}
+}
+
+var data = [trace1,trace2];
+
+var layout = {
+ title: {
+ text: 'Custom Range'
+ },
+ xaxis: {
+ range: ['2016-07-01', '2016-12-31'],
+ type: 'date'
+ },
+ yaxis: {
+ autorange: true,
+ range: [86.8700008333, 138.870004167],
+ type: 'linear'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+})
diff --git a/content/plotly_js/financial/time-series/2017-08-14-time-series-rangeslider.html b/content/plotly_js/financial/time-series/2017-08-14-time-series-rangeslider.html
new file mode 100644
index 00000000000..114aaeeffa4
--- /dev/null
+++ b/content/plotly_js/financial/time-series/2017-08-14-time-series-rangeslider.html
@@ -0,0 +1,68 @@
+---
+name: Time Series with Rangeslider
+language: plotly_js
+suite: time-series
+order: 4
+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 Rangeslider'},
+ xaxis: {
+ autorange: true,
+ range: ['2015-02-17', '2017-02-16'],
+ rangeselector: {buttons: [
+ {
+ count: 1,
+ label: '1m',
+ step: 'month',
+ stepmode: 'backward'
+ },
+ {
+ count: 6,
+ label: '6m',
+ step: 'month',
+ stepmode: 'backward'
+ },
+ {step: 'all'}
+ ]},
+ rangeslider: {range: ['2015-02-17', '2017-02-16']},
+ type: 'date'
+ },
+ yaxis: {
+ autorange: true,
+ range: [86.8700008333, 138.870004167],
+ type: 'linear'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+})
diff --git a/content/plotly_js/financial/waterfall/2015-04-09-bar_plotly_js_index.html b/content/plotly_js/financial/waterfall/2015-04-09-bar_plotly_js_index.html
new file mode 100644
index 00000000000..eea090249bf
--- /dev/null
+++ b/content/plotly_js/financial/waterfall/2015-04-09-bar_plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to make a D3.js-based waterfall chart in javascript.
+display_as: financial
+language: plotly_js
+layout: base
+name: Waterfall Charts
+order: 1
+page_type: example_index
+permalink: javascript/waterfall-charts/
+thumbnail: thumbnail/waterfall-charts.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","waterfall" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/financial/waterfall/2015-04-09-basic-bar.html b/content/plotly_js/financial/waterfall/2015-04-09-basic-bar.html
new file mode 100644
index 00000000000..8ea9029f493
--- /dev/null
+++ b/content/plotly_js/financial/waterfall/2015-04-09-basic-bar.html
@@ -0,0 +1,67 @@
+---
+name: Basic Waterfall Chart
+language: plotly_js
+suite: waterfall
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ name: "2018",
+ type: "waterfall",
+ orientation: "v",
+ measure: [
+ "relative",
+ "relative",
+ "total",
+ "relative",
+ "relative",
+ "total"
+ ],
+ x: [
+ "Sales",
+ "Consulting",
+ "Net revenue",
+ "Purchases",
+ "Other expenses",
+ "Profit before tax"
+ ],
+ textposition: "outside",
+ text: [
+ "+60",
+ "+80",
+ "",
+ "-40",
+ "-20",
+ "Total"
+ ],
+ y: [
+ 60,
+ 80,
+ 0,
+ -40,
+ -20,
+ 0
+ ],
+ connector: {
+ line: {
+ color: "rgb(63, 63, 63)"
+ }
+ },
+ }
+ ];
+ layout = {
+ title: {
+ text: "Profit and loss statement 2018"
+ },
+ xaxis: {
+ type: "category"
+ },
+ yaxis: {
+ type: "linear"
+ },
+ autosize: true,
+ showlegend: true
+ };
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/financial/waterfall/2015-04-09-horizontal-waterfall-chart.html b/content/plotly_js/financial/waterfall/2015-04-09-horizontal-waterfall-chart.html
new file mode 100644
index 00000000000..94f6312f466
--- /dev/null
+++ b/content/plotly_js/financial/waterfall/2015-04-09-horizontal-waterfall-chart.html
@@ -0,0 +1,93 @@
+---
+name: Horizontal Waterfall Chart
+language: plotly_js
+suite: waterfall
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+var gd = document.getElementById('myDiv');
+var data = [
+ {
+ name: "2018",
+ type: "waterfall",
+ orientation: "h",
+ measure: [
+ "relative",
+ "relative",
+ "relative",
+ "relative",
+ "total",
+ "relative",
+ "relative",
+ "relative",
+ "relative",
+ "total",
+ "relative",
+ "relative",
+ "total",
+ "relative",
+ "total"
+ ],
+ y: [
+ "Sales",
+ "Consulting",
+ "Maintenance",
+ "Other revenue",
+ "Net revenue",
+ "Purchases",
+ "Material expenses",
+ "Personnel expenses",
+ "Other expenses",
+ "Operating profit",
+ "Investment income",
+ "Financial income",
+ "Profit before tax",
+ "Income tax (15%)",
+ "Profit after tax"
+ ],
+ x: [
+ 375,
+ 128,
+ 78,
+ 27,
+ null,
+ -327,
+ -12,
+ -78,
+ -12,
+ null,
+ 32,
+ 89,
+ null,
+ -45,
+ null
+ ],
+ connector: {
+ mode: "between",
+ line: {
+ width: 4,
+ color: "rgb(0, 0, 0)",
+ dash: 0
+ }
+ }
+ }
+ ];
+var layout = {title: {
+ text: "Profit and loss statement 2018
+
+
+
+
+
+
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/3d-axes/2015-08-12-3d_axes_fixed_ratio_axes.html b/content/plotly_js/fundamentals/3d-axes/2015-08-12-3d_axes_fixed_ratio_axes.html
new file mode 100644
index 00000000000..b68e8d2be9d
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-axes/2015-08-12-3d_axes_fixed_ratio_axes.html
@@ -0,0 +1,65 @@
+---
+name: Fixed Ratio Axes
+language: plotly_js
+suite: 3d-axes
+order: 1.1
+sitemap: false
+arrangement: horizontal
+---
+
+function getrandom(num , mul)
+ {
+ var value = [ ]
+ var i;
+ for(i=0;i<=num;i++)
+ {
+ rand = Math.random() * mul;
+ value.push(rand);
+ }
+ return value;
+ }
+
+var i;
+traces = [];
+names = ['cube', 'data', 'auto', 'manual'];
+for (i=1; i<5; i++){
+ traces.push({
+ x: getrandom(20, 4),
+ y: getrandom(20, 3),
+ z: getrandom(20, 5),
+ opacity:0.5,
+ mode: "markers",
+ type: "mesh3d",
+ scene: "scene" + i,
+ name: names[i-1]
+ }
+ )
+}
+
+var layout = {
+ scene:{
+ aspectmode:'cube',
+ domain:{row:0, column:0}
+ },
+ scene2:{
+ aspectmode:'data',
+ domain:{row:1, column:0}
+ },
+ scene3:{
+ aspectmode:'auto',
+ domain:{row:0, column:1}
+ },
+ scene4:{
+ aspectmode:'manual',
+ aspectratio: {x:1, y:1, z:2},
+ domain: {row:1, column:1}
+ },
+ grid:{
+ pattern: 'independent',
+ rows:2,
+ columns:2
+ },
+
+};
+
+Plotly.newPlot('myDiv', traces, layout);
diff --git a/content/plotly_js/fundamentals/3d-axes/2015-08-12-3d_axes_plotly_js_index.html b/content/plotly_js/fundamentals/3d-axes/2015-08-12-3d_axes_plotly_js_index.html
new file mode 100644
index 00000000000..b7bb4d01627
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-axes/2015-08-12-3d_axes_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to format axes for 3d charts.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: 3D Axes
+order: 12
+page_type: u-guide
+permalink: javascript/3d-axes/
+redirect_from: javascript-graphing-library/3d-axes/
+thumbnail: thumbnail/theming-and-templates.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3d-axes" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/3d-axes/2015-08-12-3d_axes_range.html b/content/plotly_js/fundamentals/3d-axes/2015-08-12-3d_axes_range.html
new file mode 100644
index 00000000000..6b70e894d98
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-axes/2015-08-12-3d_axes_range.html
@@ -0,0 +1,65 @@
+---
+name: Range of Axes
+language: plotly_js
+suite: 3d-axes
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+function getrandom(num , mul)
+ {
+ var value = [ ];
+ for(i=0;i<=num;i++)
+ {
+ var rand = Math.random() * mul;
+ value.push(rand);
+ }
+ return value;
+ }
+
+
+var data=[
+ {
+ opacity:0.4,
+ type: 'scatter3d',
+ x: getrandom(50 , -75),
+ y: getrandom(50 , -75),
+ z: getrandom(50 , -75),
+ },
+ {
+ opacity:0.5,
+ type: 'scatter3d',
+ x: getrandom(50 , -75),
+ y: getrandom(50 , 75),
+ z: getrandom(50 , 75),
+ },
+ {
+ opacity:0.5,
+ type: 'scatter3d',
+ x: getrandom(50 , 100),
+ y: getrandom(50 , 100),
+ z: getrandom(50 , 100),
+ }
+];
+var layout = {
+ scene:{
+ aspectmode: "manual",
+ aspectratio: {
+ x: 1, y: 0.7, z: 1,
+ },
+ xaxis: {
+ nticks: 9,
+ range: [-200, 100],
+ },
+ yaxis: {
+ nticks: 7,
+ range: [-100, 100],
+ },
+ zaxis: {
+ nticks: 10,
+ range: [-150, 100],
+ }},
+};
+Plotly.newPlot('myDiv', data, layout);
+
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/3d-axes/2015-08-12-3d_format_ticks.html b/content/plotly_js/fundamentals/3d-axes/2015-08-12-3d_format_ticks.html
new file mode 100644
index 00000000000..77d58e9a186
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-axes/2015-08-12-3d_format_ticks.html
@@ -0,0 +1,52 @@
+---
+name: Ticks Formatting
+language: plotly_js
+suite: 3d-axes
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+function getrandom(num , mul)
+ {
+ var value = [ ];
+ for(i=0;i<=num;i++)
+ {
+ var rand = Math.random() * mul;
+ value.push(rand);
+ }
+ return value;
+ }
+
+
+var data=[
+ {
+ opacity:0.4,
+ type: 'scatter3d',
+ x: getrandom(50 , -75),
+ y: getrandom(50 , -75),
+ z: getrandom(50 , -75),
+ },
+];
+var layout = {
+ scene:{
+ xaxis: {
+ ticktext:['H20','C02','O2'],
+ tickvals:[-30, -45, -65, -10]
+ },
+ yaxis: {
+ nticks: 5,
+ tickfont:
+ {
+ color:'green',
+ family:'Old Standard TT, serif',
+ size: 14
+ },
+ ticksuffix:'$'
+ },
+ zaxis: {
+ ticks: 'outside',
+ tick0: 0,
+ tickwidth: 4}},
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/3d-axes/2015-08-12-axes_background.html b/content/plotly_js/fundamentals/3d-axes/2015-08-12-axes_background.html
new file mode 100644
index 00000000000..f2116de2ac4
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-axes/2015-08-12-axes_background.html
@@ -0,0 +1,66 @@
+---
+name: Axes Background Color
+language: plotly_js
+suite: 3d-axes
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+function getrandom(num , mul)
+ {
+ var value = [ ];
+ for(i=0;i<=num;i++)
+ {
+ var rand = Math.random() * mul;
+ value.push(rand);
+ }
+ return value;
+ }
+
+var data=[
+ {
+ opacity:0.4,type: 'scatter3d',
+ x: getrandom(50 , 75),
+ y: getrandom(50 , 75),
+ z: getrandom(50 , 75),
+ mode:'markers'
+ },
+ {
+ opacity: 0.5,
+ type: 'scatter3d',
+ x: getrandom(75 , 75),
+ y: getrandom(75 , 75),
+ z: getrandom(75 , 75),
+ mode:'markers'
+ },
+ {
+ opacity: 0.5,
+ type: 'scatter3d',
+ x: getrandom(75 , 100),
+ y: getrandom(75 , 100),
+ z: getrandom(75 , 100),
+ mode:'markers'
+ }
+];
+var layout = {
+ scene:{
+ xaxis: {
+ backgroundcolor: "rgb(200, 200, 230)",
+ gridcolor: "rgb(255, 255, 255)",
+ showbackground: true,
+ zerolinecolor: "rgb(255, 255, 255)",
+ },
+ yaxis: {
+ backgroundcolor: "rgb(230, 200,230)",
+ gridcolor: "rgb(255, 255, 255)",
+ showbackground: true,
+ zerolinecolor: "rgb(255, 255, 255)"
+ },
+ zaxis: {
+ backgroundcolor: "rgb(230, 230,200)",
+ gridcolor: "rgb(255, 255, 255)",
+ showbackground: true,
+ zerolinecolor: "rgb(255, 255, 255)"
+ }}
+};
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/3d-axes/2015-08-12-camera.html b/content/plotly_js/fundamentals/3d-axes/2015-08-12-camera.html
new file mode 100644
index 00000000000..71d5262e391
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-axes/2015-08-12-camera.html
@@ -0,0 +1,143 @@
+---
+name: Camera Controls
+language: plotly_js
+suite: 3d-axes
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+function getrandom(num , mul)
+ {
+ var value = [ ];
+ for(i=0;i<=num;i++)
+ {
+ var rand = Math.random() * mul;
+ value.push(rand);
+ }
+ return value;
+ }
+var data = [
+ {
+ x: getrandom(20, 4),
+ y: getrandom(20, 3),
+ z: getrandom(20, 5),
+ opacity:0.5,
+ mode: "markers",
+ type: "scatter3d",
+ scene: "scene1",
+ name: "Lower the view point"
+ },
+ {
+ x:getrandom(20, 4),
+ y:getrandom(20, 3),
+ z:getrandom(20, 5),
+ opacity:0.5,
+ mode: "markers",
+ type: "scatter3d",
+ scene: "scene2",
+ name: "x-z plane"
+ },
+ {
+ x:getrandom(20, 4),
+ y:getrandom(20, 3),
+ z:getrandom(20, 5),
+ opacity:0.5,
+ mode: "markers",
+ type: "scatter3d",
+ scene: "scene3",
+ name: "y-z plane"
+ },
+ {
+ x:getrandom(10, 4),
+ y:getrandom(10, 3),
+ z:getrandom(10, 5),
+ opacity:0.5,
+ mode: "markers",
+ type: "scatter3d",
+ scene: "scene4",
+ name: "View from above"
+ },
+ {
+ x:getrandom(20, 4),
+ y:getrandom(20, 3),
+ z:getrandom(20, 5),
+ opacity:0.5,
+ mode: "markers",
+ type: "scatter3d",
+ scene: "scene5",
+ name: "Zooming in"
+ },
+];
+var layout = {
+ scene1: {
+ domain: {
+ x: [0.00, 0.33],
+ y: [0.5, 1]
+ },
+ camera: {
+ center: {
+ x: 0, y: 0, z: 0 },
+ eye: {
+ x: 2, y: 2, z: 0.1 },
+ up: {
+ x: 0, y: 0, z: 1 }
+ },},
+
+ scene2: {
+ domain: {
+ x: [0.33, 0.66],
+ y: [0.5, 1.0]
+ },
+ camera: {
+ center: {
+ x: 0, y: 0, z: 0},
+ eye: {
+ x:0.1, y:2.5, z:0.1},
+ up: {
+ x: 0, y: 0, z: 1}
+ },},
+
+ scene3: {
+ domain: {
+ x: [0.66, 0.99],
+ y: [0.5, 1]
+ },
+ camera: {
+ center: {
+ x: 0, y: 0, z: 0},
+ eye: {
+ x:2.5, y:0.1, z:0.1},
+ up: {
+ x: 0, y: 0, z: 1}
+ },},
+
+ scene4: {
+ domain: {
+ x: [0.15, 0.5],
+ y: [-0.25, 0.4]
+ },
+ camera: {
+ center: {
+ x: 0, y: 0, z: 0},
+ eye: {
+ x:0.1, y:0.1, z:2.5},
+ up: {
+ x: 0, y: 0, z: 1}
+ },},
+
+ scene5: {
+ domain: {
+ x: [0.62, 0.7],
+ y: [-0.2, 0.4]
+ },
+ camera: {
+ center: {
+ x: 0, y: 0, z: 0},
+ eye: {
+ x:0.1, y:0.1, z:1},
+ up: {
+ x: 0, y: 0, z: 1}
+ },},
+};
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/3d-axes/2015-08-12-title.html b/content/plotly_js/fundamentals/3d-axes/2015-08-12-title.html
new file mode 100644
index 00000000000..bf2ac988af9
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-axes/2015-08-12-title.html
@@ -0,0 +1,58 @@
+---
+name: Set Axes Title
+language: plotly_js
+suite: 3d-axes
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+function getrandom(num , mul) {
+ var value = [ ];
+ for(i=0;i<=num;i++)
+ {
+ var rand = Math.random() * mul;
+ value.push(rand);
+ }
+ return value;}
+
+var trace1 = {
+ type:'mesh3d',
+ x: getrandom(1000,200), y: getrandom(1000,300), z: getrandom(1000,150),
+ color: 'lightblue',};
+
+var trace2 = {
+ type:'mesh3d',
+ x: getrandom(1000,200), y: getrandom(1000,300), z: getrandom(1000,150),
+ color: 'pink'};
+
+var layout = {
+ scene: {
+ xaxis: {
+ title: {
+ text: 'X AXIS TITLE'
+ }
+ },
+ yaxis: {
+ title: {
+ text: 'Y AXIS TITLE'
+ }
+ },
+ zaxis: {
+ title: {
+ text: 'Z AXIS TITLE'
+ }
+ }
+ },
+ autosize: false,
+ width: 550,
+ height: 500,
+ margin: {
+ l: 0,
+ r: 0,
+ b: 50,
+ t: 50,
+ pad: 4
+ },
+}
+
+Plotly.newPlot('myDiv', [trace1,trace2], layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/3d-hover-options/2015-08-12-3d_hover_spike_settings.html b/content/plotly_js/fundamentals/3d-hover-options/2015-08-12-3d_hover_spike_settings.html
new file mode 100644
index 00000000000..e96aeb49fdc
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-hover-options/2015-08-12-3d_hover_spike_settings.html
@@ -0,0 +1,54 @@
+---
+name: Customize Hover for Spikelines
+language: plotly_js
+suite: 3d-hover
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ By default, Plotly's 3D plots display lines called "spikelines" while hovering over a point.
+ These lines project from the hover point to each of the three axes' normal planes and
+ then extend from those projection data points to the planes' wall boundaries.
+---
+
+function getrandom(num , mul)
+ {
+ var value = [ ];
+ for(i=0;i<=num;i++)
+ {
+ var rand = Math.random() * mul;
+ value.push(rand);
+ }
+ return value;
+ }
+
+
+var data=[
+ {
+ opacity:0.4,
+ type: 'scatter3d',
+ x: getrandom(50 , -75),
+ y: getrandom(50 , -75),
+ z: getrandom(50 , -75),
+ },
+];
+var layout = {
+ scene:{
+ xaxis: {
+ spikecolor: '#1fe5bd',
+ spikesides: false,
+ spikethickness: 6
+ },
+ yaxis: {
+ spikecolor: '#1fe5bd',
+ spikesides: false,
+ spikethickness: 6
+ },
+ zaxis: {
+ spikecolor: '#1fe5bd',
+ spikethickness: 6
+ }
+ },
+};
+Plotly.newPlot('myDiv', data, layout);
+
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/3d-hover-options/2015-08-12-3d_hover_surface_contour.html b/content/plotly_js/fundamentals/3d-hover-options/2015-08-12-3d_hover_surface_contour.html
new file mode 100644
index 00000000000..f15a19f4cb7
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-hover-options/2015-08-12-3d_hover_surface_contour.html
@@ -0,0 +1,46 @@
+---
+name: Customize Hover for Surface Contours
+language: plotly_js
+suite: 3d-hover
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ In addition to spikelines, Plotly 3D Surface plots also display surface contours on hover by default.
+ These are customized by styling the [`contours`](https://plotly.com/javascript/reference/surface/#surface-contours)
+ attribute in the surface trace.
+---
+
+x = [10,20,30,40]
+y = [0,1,2,3]
+z = [
+ [2,2,2,3],
+ [1,1,1,1],
+ [1,1,0,0],
+ [0,0,0,0]
+];
+
+var data=[
+ {
+ opacity:0.9,
+ type: 'surface',
+ x:x, y:y, z:z,
+ contours: {
+ x: {
+ highlight: true,
+ highlightcolor: "#41a7b3"
+ },
+ y: { highlight: false },
+ z: { highlight: false}
+ }
+ },
+];
+var layout = {
+ scene:{
+ xaxis: { showspikes: false },
+ yaxis: { showspikes: false },
+ zaxis: { showspikes: false }
+ },
+};
+Plotly.newPlot('myDiv', data, layout);
+
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/3d-hover-options/2018-10-11-3d_hover_options_plotly_js_index.html b/content/plotly_js/fundamentals/3d-hover-options/2018-10-11-3d_hover_options_plotly_js_index.html
new file mode 100644
index 00000000000..4ebc04080ee
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-hover-options/2018-10-11-3d_hover_options_plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to customize hover options for 3d charts.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: 3D Hover Options
+order: 13
+page_type: u-guide
+permalink: javascript/3d-hover/
+thumbnail: thumbnail/subplots.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3d-hover" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-21-3d_surface_lighting_plotly_js_index.html b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-21-3d_surface_lighting_plotly_js_index.html
new file mode 100644
index 00000000000..22a841fd315
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-21-3d_surface_lighting_plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to customize lighting for 3D surface charts.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: 3D Surface Lighting
+order: 14
+page_type: u-guide
+permalink: javascript/3d-surface-lighting/
+thumbnail: thumbnail/3d-surface.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3d-surface-lighting" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_ambient_lighting.html b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_ambient_lighting.html
new file mode 100644
index 00000000000..11a5640904c
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_ambient_lighting.html
@@ -0,0 +1,55 @@
+---
+name: Ambient Lighting
+language: plotly_js
+suite: 3d-surface-lighting
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
+function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+}
+
+var z_data = [ ];
+for(i=0;i<100;i++)
+{
+ z_data.push(unpack(rows,i));
+}
+
+var data = [{
+ z: z_data,
+ type: 'surface',
+ colorscale: 'Viridis',
+ lighting: {ambient: 0.9}
+ },
+ {
+ z: z_data,
+ type: 'surface',
+ scene: 'scene2',
+ colorscale:'Viridis',
+ lighting: {ambient: 0.2}
+ }
+];
+
+var layout = {
+ title: {
+ text: 'Ambient Lighting'
+ },
+ grid: {
+ rows: 1,
+ columns: 2,
+ pattern: 'independent',
+ },
+ scene:{
+ aspectmode:'cube',
+ domain:{row:0, column:0}
+ },
+ scene2:{
+ aspectmode:'cube',
+ domain:{row:0, column:1}
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_diffuse_reflection.html b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_diffuse_reflection.html
new file mode 100644
index 00000000000..99ba9023df8
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_diffuse_reflection.html
@@ -0,0 +1,55 @@
+---
+name: Diffuse
+language: plotly_js
+suite: 3d-surface-lighting
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
+function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+}
+
+var z_data = []
+for(i=0;i<100;i++)
+{
+ z_data.push(unpack(rows,i));
+}
+
+var data = [{
+ z: z_data,
+ type: 'surface',
+ colorscale:'Viridis',
+ lighting: {diffuse: 0.9}
+ },
+ {
+ z: z_data,
+ type: 'surface',
+ scene: 'scene2',
+ colorscale:'Viridis',
+ lighting: {diffuse: 0.1}
+ }
+];
+
+var layout = {
+ title: {
+ text: 'Diffuse Reflection'
+ },
+ grid: {
+ rows: 1,
+ columns: 2,
+ pattern: 'independent',
+ },
+ scene:{
+ aspectmode:'cube',
+ domain:{row:0, column:0}
+ },
+ scene2:{
+ aspectmode:'cube',
+ domain:{row:0, column:1}
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_fresnel.html b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_fresnel.html
new file mode 100644
index 00000000000..93f3aeb511c
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_fresnel.html
@@ -0,0 +1,55 @@
+---
+name: Fresnel
+language: plotly_js
+suite: 3d-surface-lighting
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
+function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+}
+
+var z_data = [];
+for(i=0;i<100;i++)
+{
+ z_data.push(unpack(rows,i));
+}
+
+var data = [{
+ z: z_data,
+ type: 'surface',
+ colorscale:'Viridis',
+ lighting: {fresnel: 0.1}
+ },
+ {
+ z: z_data,
+ type: 'surface',
+ scene: 'scene2',
+ colorscale:'Viridis',
+ lighting: {fresnel: 5}
+ }
+];
+
+var layout = {
+ title: {
+ text: 'Fresnel'
+ },
+ grid: {
+ rows: 1,
+ columns: 2,
+ pattern: 'independent',
+ },
+ scene:{
+ aspectmode:'cube',
+ domain:{row:0, column:0}
+ },
+ scene2:{
+ aspectmode:'cube',
+ domain:{row:0, column:1}
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_reference.html b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_reference.html
new file mode 100644
index 00000000000..68d3da19b36
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_reference.html
@@ -0,0 +1,10 @@
+---
+name: Reference
+language: plotly_js
+suite: 3d-surface-lighting
+order: 10
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ See [https://plotly.com/javascript/reference/surface/#surface-lighting](https://plotly.com/javascript/reference/surface/#surface-lighting) for more information!
+---
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_roughness.html b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_roughness.html
new file mode 100644
index 00000000000..62f4523e098
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_roughness.html
@@ -0,0 +1,55 @@
+---
+name: Roughness
+language: plotly_js
+suite: 3d-surface-lighting
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
+function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+}
+
+var z_data = [];
+for(i=0;i<100;i++)
+{
+ z_data.push(unpack(rows,i));
+}
+
+var data = [{
+ z: z_data,
+ type: 'surface',
+ colorscale:'Viridis',
+ lighting: {roughness: 0.9}
+ },
+ {
+ z: z_data,
+ type: 'surface',
+ scene: 'scene2',
+ colorscale:'Viridis',
+ lighting: {roughness: 0.2}
+ }
+];
+
+var layout = {
+ title: {
+ text: 'Roughness'
+ },
+ grid: {
+ rows: 1,
+ columns: 2,
+ pattern: 'independent',
+ },
+ scene:{
+ aspectmode:'cube',
+ domain:{row:0, column:0}
+ },
+ scene2:{
+ aspectmode:'cube',
+ domain:{row:0, column:1}
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_specular_reflection.html b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_specular_reflection.html
new file mode 100644
index 00000000000..226e77e46ff
--- /dev/null
+++ b/content/plotly_js/fundamentals/3d-surface-lighting/2018-11-22-surface_specular_reflection.html
@@ -0,0 +1,55 @@
+---
+name: Specular
+language: plotly_js
+suite: 3d-surface-lighting
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/michaelbabyn/plot_data/master/sin_saddle.csv', function(err, rows){
+function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+}
+
+var z_data = [];
+for(i=0;i<100;i++)
+{
+ z_data.push(unpack(rows,i));
+}
+
+var data = [{
+ z: z_data,
+ type: 'surface',
+ colorscale:'Viridis',
+ lighting: {specular: 0.1}
+ },
+ {
+ z: z_data,
+ type: 'surface',
+ scene: 'scene2',
+ colorscale:'Viridis',
+ lighting: {specular: 2}
+ }
+];
+
+var layout = {
+ title: {
+ text: 'Specular Reflection'
+ },
+ grid: {
+ rows: 1,
+ columns: 2,
+ pattern: 'independent',
+ },
+ scene:{
+ aspectmode:'cube',
+ domain:{row:0, column:0}
+ },
+ scene2:{
+ aspectmode:'cube',
+ domain:{row:0, column:1}
+ },
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/ajax-call/2015-08-10-ajax_call_plotly_js_index.html b/content/plotly_js/fundamentals/ajax-call/2015-08-10-ajax_call_plotly_js_index.html
new file mode 100644
index 00000000000..946a1bb5215
--- /dev/null
+++ b/content/plotly_js/fundamentals/ajax-call/2015-08-10-ajax_call_plotly_js_index.html
@@ -0,0 +1,13 @@
+---
+name: Read CSV Data from an Ajax Call
+permalink: javascript/ajax-call/
+description: How to make Ajax calls in javascript for Plotlyjs.
+layout: base
+thumbnail: thumbnail/line-plots.jpg
+language: plotly_js
+page_type: example_index
+display_as: tutorials
+redirect_from: javascript-graphing-library/ajax-call/
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","ajax" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
diff --git a/content/plotly_js/fundamentals/ajax-call/2015-08-12-plotting-csv-data-from-ajax.html b/content/plotly_js/fundamentals/ajax-call/2015-08-12-plotting-csv-data-from-ajax.html
new file mode 100644
index 00000000000..6d37a2e7393
--- /dev/null
+++ b/content/plotly_js/fundamentals/ajax-call/2015-08-12-plotting-csv-data-from-ajax.html
@@ -0,0 +1,42 @@
+---
+name: Plotting CSV Data from Ajax Call
+plot_url: https://codepen.io/plotly/embed/9a091a6dd0486ff8de95982bc23a3467/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: ajax
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+function makeplot() {
+ d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/2014_apple_stock.csv", function(data){ processData(data) } );
+
+};
+
+function processData(allRows) {
+
+ console.log(allRows);
+ var x = [], y = [], standard_deviation = [];
+
+ for (var i=0; iFormatting Annotations Series Identification ' + Year '+(point.data.name) + 'Point Identification Month '+ (months[point.pointNumber]) +
+ 'Point Values A '+(point.x).toPrecision(4) +
+ 'B '+(point.y).toPrecision(4)
+
+ },
+ divid = document.getElementById('myDiv'),
+ newIndex = (divid.layout.annotations || []).length;
+ console.log(point.pointNumber)
+ // delete instead if clicked twice
+ if(newIndex) {
+ var foundCopy = false;
+ divid.layout.annotations.forEach(function(ann, sameIndex) {
+ if(ann.text === newAnnotation.text ) {
+ Plotly.relayout('myDiv', 'annotations[' + sameIndex + ']', 'remove');
+ foundCopy = true;
+ }
+ });
+ if(foundCopy) return;
+ }
+ Plotly.relayout('myDiv', 'annotations[' + newIndex + ']', newAnnotation);
+ })
+ .on('plotly_clickannotation', function(event, data) {
+ Plotly.relayout('myDiv', 'annotations[' + data.index + ']', 'remove');
+ });
diff --git a/content/plotly_js/fundamentals/annotations/2016-02-29-paper-referenced-annotations.html b/content/plotly_js/fundamentals/annotations/2016-02-29-paper-referenced-annotations.html
new file mode 100644
index 00000000000..191e2f0a597
--- /dev/null
+++ b/content/plotly_js/fundamentals/annotations/2016-02-29-paper-referenced-annotations.html
@@ -0,0 +1,34 @@
+---
+name: Paper Referenced Annotations
+language: plotly_js
+suite: annotations
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+Plotly.newPlot('myDiv', [{
+ x: [1,2,3],
+ y: [2,1,2]
+}], {
+ annotations: [{
+ xref: 'paper',
+ yref: 'paper',
+ x: 0,
+ xanchor: 'right',
+ y: 1,
+ yanchor: 'bottom',
+ text: 'X axis label',
+ showarrow: false
+ }, {
+ xref: 'paper',
+ yref: 'paper',
+ x: 1,
+ xanchor: 'left',
+ y: 0,
+ yanchor: 'top',
+ text: 'Y axis label',
+ showarrow: false
+ }]
+
+})
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/annotations/2017-02-03-subplot-annotations.html b/content/plotly_js/fundamentals/annotations/2017-02-03-subplot-annotations.html
new file mode 100644
index 00000000000..6e2e5495b26
--- /dev/null
+++ b/content/plotly_js/fundamentals/annotations/2017-02-03-subplot-annotations.html
@@ -0,0 +1,59 @@
+---
+name: Subplot Annotations
+language: plotly_js
+suite: annotations
+order: 4.5
+sitemap: false
+arrangement: horizontal
+---
+
+var trace0 = {
+ x: [1, 2, 3],
+ y: [4, 5, 6],
+ type: 'scatter'
+};
+
+var trace1 = {
+ x: [20, 30, 40],
+ y: [50, 60, 70],
+ xaxis: 'x2',
+ yaxis: 'y2',
+ type: 'scatter'
+};
+
+var data = [trace0, trace1];
+
+var layout = {
+ title: {
+ text: 'Subplot Annotations'
+ },
+ xaxis: {domain: [0, 0.45]},
+ yaxis2: {anchor: 'x2'},
+ xaxis2: {domain: [0.55, 1]},
+ annotations: [
+ {
+ x: 2,
+ y: 5,
+ xref: 'x',
+ yref: 'y',
+ text: 'Annotation A',
+ showarrow: true,
+ arrowhead: 3,
+ ax: -30,
+ ay: -40
+ },
+ {
+ x: 30,
+ y: 60,
+ xref: 'x2',
+ yref: 'y2',
+ text: 'Annotation B',
+ showarrow: true,
+ arrowhead: 2,
+ ax: -25,
+ ay: -40
+ }
+ ]
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/annotations/2017-07-24-3d-annotations.html b/content/plotly_js/fundamentals/annotations/2017-07-24-3d-annotations.html
new file mode 100644
index 00000000000..f7f65f135e0
--- /dev/null
+++ b/content/plotly_js/fundamentals/annotations/2017-07-24-3d-annotations.html
@@ -0,0 +1,81 @@
+---
+name: 3D Annotations
+language: plotly_js
+suite: annotations
+order: 4.75
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [{
+ type: "scatter3d",
+ x: ["2017-01-01", "2017-02-10", "2017-03-20"],
+ y: ["A", "B", "C"],
+ z: [1, 1e3, 1e5]
+ }]
+
+var layout = {
+ scene: {
+ camera: {
+ eye: {x: 2.1, y: 0.1, z: 0.9}
+ },
+ xaxis: {
+ title: {
+ text: ""
+ }
+ },
+ yaxis: {
+ title: {
+ text: ""
+ }
+ },
+ zaxis: {
+ type: "log",
+ title: {
+ text: ""
+ }
+ },
+ annotations: [{
+ showarrow: false,
+ x: "2017-01-01",
+ y: "A",
+ z: 0,
+ text: "Point 1",
+ font: {
+ color: "black",
+ size: 12
+ },
+ xanchor: "left",
+ xshift: 10,
+ opacity: 0.7
+ }, {
+ x: "2017-02-10",
+ y: "B",
+ z: 4,
+ text: "Point 2",
+ textangle: 0,
+ ax: 0,
+ ay: -75,
+ font: {
+ color: "black",
+ size: 12
+ },
+ arrowcolor: "black",
+ arrowsize: 3,
+ arrowwidth: 1,
+ arrowhead: 1
+ }, {
+ x: "2017-03-20",
+ y: "C",
+ z: 5,
+ ax: 50,
+ ay: 0,
+ text: "Point 3",
+ arrowhead: 1,
+ xanchor: "left",
+ yanchor: "bottom"
+ }]
+}
+}
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/annotations/2018-08-10-webgl-text-and-annotations.html b/content/plotly_js/fundamentals/annotations/2018-08-10-webgl-text-and-annotations.html
new file mode 100644
index 00000000000..83b65281ef8
--- /dev/null
+++ b/content/plotly_js/fundamentals/annotations/2018-08-10-webgl-text-and-annotations.html
@@ -0,0 +1,77 @@
+---
+name: WebGL Text and Annotations
+language: plotly_js
+suite: annotations
+order: 8
+sitemap: false
+arrangement: horizontal
+---
+
+var n = 250;
+var t = 12;
+var x = [];
+var y = [];
+var z = [];
+var text = [];
+var arr = ["A","T","G", "C"];
+
+for (var j = 0; j < t; j++){
+ ztemp = [];
+ for (var i = 0; i < n; i++) {
+ x.push(i);
+ y.push(j);
+ ztemp.push(Math.floor(Math.random() * 10));
+ text.push(arr[Math.floor(Math.random() * 4)])
+ }
+ z.push(ztemp)
+}
+
+var steps = [];
+for (var e = 0; e < n-30; e++){
+ steps.push({
+ label: e,
+ value: e,
+ method: 'relayout',
+ args: ['xaxis', {range: [-0.5 + e, 30.5 + e]}]
+ })
+}
+
+data1 = {
+ x: x,
+ y: y,
+ mode: "text",
+ text: text,
+ type: "scattergl",
+ textfont: {
+ size: 20
+ }
+ }
+
+data2 = {
+ z: z,
+ type: "heatmap"
+ }
+
+sliders = [{
+ active: 0,
+ steps: steps
+ }]
+
+layout = {
+ sliders: sliders,
+ xaxis: {
+ range: [-0.5, 30.5],
+ showline: false,
+ zeroline: false,
+ showgrid: false
+ },
+ yaxis: {
+ showline: false,
+ zeroline: false,
+ showgrid: false
+ }
+ }
+
+data = [data1, data2]
+Plotly.newPlot('myDiv', {data:data,
+ layout:layout});
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/annotations/2024-02-01-annotation-log-axis.html b/content/plotly_js/fundamentals/annotations/2024-02-01-annotation-log-axis.html
new file mode 100644
index 00000000000..48208798df1
--- /dev/null
+++ b/content/plotly_js/fundamentals/annotations/2024-02-01-annotation-log-axis.html
@@ -0,0 +1,46 @@
+---
+name: Annotations with Log Axes
+language: plotly_js
+suite: annotations
+order: 3.5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ If the `x` or `y` positions of an annotation reference a log axis, you need to provide that position as a `log10` value when adding the annotation. In this example, the `yaxis` is a log axis so we pass the `log10` value of `1000` to the annotation's `y` position.
+---
+var dates = [
+ "2024-01-01",
+ "2024-01-02",
+ "2024-01-03",
+ "2024-01-04",
+ "2024-01-05",
+ "2024-01-06",
+];
+
+var y_values = [1, 30, 70, 100, 1000, 10000000];
+
+var trace1 = {
+ x: dates,
+ y: y_values,
+ mode: 'lines+markers',
+ type: 'scatter'
+};
+
+var layout = {
+ yaxis: {
+ type: 'log',
+ },
+ annotations: [
+ {
+ x: '2024-01-05',
+ y: Math.log10(1000),
+ text: 'Log axis annotation',
+ showarrow: true,
+ xanchor: 'right',
+ }
+ ]
+};
+
+var data = [trace1];
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/axes/2015-04-09-axes-booleans.html b/content/plotly_js/fundamentals/axes/2015-04-09-axes-booleans.html
new file mode 100644
index 00000000000..2f6aa16cdf0
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2015-04-09-axes-booleans.html
@@ -0,0 +1,40 @@
+---
+name: Toggling Axes Lines, Ticks, Labels, and Autorange
+language: plotly_js
+suite: axes
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {
+ xaxis: {
+ autorange: true,
+ showgrid: false,
+ zeroline: false,
+ showline: false,
+ autotick: true,
+ ticks: '',
+ showticklabels: false
+ },
+ yaxis: {
+ autorange: true,
+ showgrid: false,
+ zeroline: false,
+ showline: false,
+ autotick: true,
+ ticks: '',
+ showticklabels: false
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/axes/2015-04-09-axes-labels.html b/content/plotly_js/fundamentals/axes/2015-04-09-axes-labels.html
new file mode 100644
index 00000000000..e3ba4cc0b4d
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2015-04-09-axes-labels.html
@@ -0,0 +1,75 @@
+---
+name: Set and Style Axes Title Labels and Ticks
+language: plotly_js
+suite: axes
+order: 0
+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 x = unpack(rows, 'Date')
+ var y = unpack(rows, 'AAPL.Volume')
+
+ var trace = {
+ type: "scatter",
+ mode: "lines",
+ name: 'AAPL Volume',
+ x: x,
+ y: y,
+ line: {color: 'grey'}
+ }
+
+ var data = [trace];
+
+var layout = {
+ title: {text: 'Volume of Apple Shares Traded'},
+ xaxis: {
+ title: {
+ text: 'AXIS TITLE',
+ font: {
+ family: 'Arial, sans-serif',
+ size: 18,
+ color: 'lightgrey'
+ }
+ },
+ showticklabels: true,
+ tickangle: 'auto',
+ tickfont: {
+ family: 'Old Standard TT, serif',
+ size: 14,
+ color: 'black'
+ },
+ exponentformat: 'e',
+ showexponent: 'all'
+ },
+ yaxis: {
+ title: {
+ text: 'AXIS TITLE',
+ font: {
+ family: 'Arial, sans-serif',
+ size: 18,
+ color: 'lightgrey'
+ }
+ },
+ showticklabels: true,
+ tickangle: 45,
+ tickfont: {
+ family: 'Old Standard TT, serif',
+ size: 14,
+ color: 'black'
+ },
+ exponentformat: 'e',
+ showexponent: 'all'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+})
diff --git a/content/plotly_js/fundamentals/axes/2015-04-09-axes-lines.html b/content/plotly_js/fundamentals/axes/2015-04-09-axes-lines.html
new file mode 100644
index 00000000000..be57d7421c8
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2015-04-09-axes-lines.html
@@ -0,0 +1,46 @@
+---
+name: Styling and Coloring Axes and the Zero-Line
+language: plotly_js
+suite: axes
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {
+ xaxis: {
+ showgrid: true,
+ zeroline: true,
+ showline: true,
+ mirror: 'ticks',
+ gridcolor: '#bdbdbd',
+ gridwidth: 2,
+ zerolinecolor: '#969696',
+ zerolinewidth: 4,
+ linecolor: '#636363',
+ linewidth: 6
+ },
+ yaxis: {
+ showgrid: true,
+ zeroline: true,
+ showline: true,
+ mirror: 'ticks',
+ gridcolor: '#bdbdbd',
+ gridwidth: 2,
+ zerolinecolor: '#969696',
+ zerolinewidth: 4,
+ linecolor: '#636363',
+ linewidth: 6
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/axes/2015-04-09-axes-range-manual.html b/content/plotly_js/fundamentals/axes/2015-04-09-axes-range-manual.html
new file mode 100644
index 00000000000..0b13c60c393
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2015-04-09-axes-range-manual.html
@@ -0,0 +1,24 @@
+---
+name: Setting the Range of Axes Manually
+language: plotly_js
+suite: axes
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {
+ xaxis: {range: [2, 5]},
+ yaxis: {range: [2, 5]}
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/axes/2015-04-09-axes-range-mode.html b/content/plotly_js/fundamentals/axes/2015-04-09-axes-range-mode.html
new file mode 100644
index 00000000000..186a85a1845
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2015-04-09-axes-range-mode.html
@@ -0,0 +1,27 @@
+---
+name: nonnegative, tozero, and normal Rangemode
+language: plotly_js
+suite: axes
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: [2, 4, 6],
+ y: [-3, 0, 3],
+ type: 'scatter'
+ }
+];
+var layout = {
+ showlegend: false,
+ xaxis: {
+ rangemode: 'tozero',
+ autorange: true
+ },
+ yaxis: {
+ rangemode: 'nonnegative',
+ autorange: true
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/axes/2015-04-09-axes-range-type.html b/content/plotly_js/fundamentals/axes/2015-04-09-axes-range-type.html
new file mode 100644
index 00000000000..0a8c782b78b
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2015-04-09-axes-range-type.html
@@ -0,0 +1,30 @@
+---
+name: Logarithmic Axes
+language: plotly_js
+suite: axes
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {
+ xaxis: {
+ type: 'log',
+ autorange: true
+ },
+ yaxis: {
+ type: 'log',
+ autorange: true
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/axes/2015-04-09-axes-reversed.html b/content/plotly_js/fundamentals/axes/2015-04-09-axes-reversed.html
new file mode 100644
index 00000000000..c1925f99037
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2015-04-09-axes-reversed.html
@@ -0,0 +1,17 @@
+---
+name: Reversed Axes
+language: plotly_js
+suite: axes
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: [1, 2],
+ y: [1, 2],
+ type: 'scatter'
+ }
+];
+var layout = {xaxis: {autorange: 'reversed'}};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/axes/2015-04-09-axes-ticks.html b/content/plotly_js/fundamentals/axes/2015-04-09-axes-ticks.html
new file mode 100644
index 00000000000..3a0241c8ab7
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2015-04-09-axes-ticks.html
@@ -0,0 +1,40 @@
+---
+name: Tick Placement, Color, and Style
+language: plotly_js
+suite: axes
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
+ type: 'scatter'
+};
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+var layout = {
+ xaxis: {
+ tickmode: 'linear',
+ ticks: 'outside',
+ tick0: 0,
+ dtick: 0.25,
+ ticklen: 8,
+ tickwidth: 4,
+ tickcolor: '#000'
+ },
+ yaxis: {
+ tickmode: 'linear',
+ ticks: 'outside',
+ tick0: 0,
+ dtick: 0.25,
+ ticklen: 8,
+ tickwidth: 4,
+ tickcolor: '#000'
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/axes/2015-04-09-axes_plotly_js_index.html b/content/plotly_js/fundamentals/axes/2015-04-09-axes_plotly_js_index.html
new file mode 100644
index 00000000000..2b2c96adb86
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2015-04-09-axes_plotly_js_index.html
@@ -0,0 +1,17 @@
+---
+description: How to adjust axes properties in D3.js-based javascript charts. Seven
+ examples of linear and logarithmic axes, axes titles, and styling and coloring axes
+ and grid lines.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Axes
+order: 15
+page_type: u-guide
+permalink: javascript/axes/
+redirect_from: javascript-graphing-library/axes/
+thumbnail: thumbnail/axes.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","axes" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/axes/2015-09-18-axes-categories.html b/content/plotly_js/fundamentals/axes/2015-09-18-axes-categories.html
new file mode 100644
index 00000000000..1e6f1c56bcc
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2015-09-18-axes-categories.html
@@ -0,0 +1,36 @@
+---
+name: Categorical Axes
+language: plotly_js
+suite: axes
+order: 7
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: ['A12', 'BC2', 109, '12F', 215, 304],
+ y: [1, 6, 3, 5, 1, 4],
+ mode: 'markers',
+ type: 'bar',
+ name: 'Team A',
+ text: ['Apples', 'Pears', 'Peaches', 'Bananas', 'Pineapples', 'Cherries'],
+};
+
+var data = [ trace1 ];
+
+var layout = {
+ xaxis: {
+ type: 'category',
+ title: {
+ text: 'Product Code'
+ }
+ },
+ yaxis: {
+ range: [0, 7],
+ title: {
+ text: 'Number of Items in Stock'
+ }
+ },
+ title: {text: 'Inventory'}
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/axes/2015-09-18-axes-dates.html b/content/plotly_js/fundamentals/axes/2015-09-18-axes-dates.html
new file mode 100644
index 00000000000..56a08016e72
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2015-09-18-axes-dates.html
@@ -0,0 +1,36 @@
+---
+name: Using Dates on the X-Axis
+language: plotly_js
+suite: axes
+order: 8
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: ['2000-01-01', '2000-01-02', '2000-01-03', '2000-01-04', '2000-01-05', '2000-01-06', '2000-01-07', '2000-01-08', '2000-01-09', '2000-01-10', '2000-01-11', '2000-01-12', '2000-01-13', '2000-01-14', '2000-01-15', '2000-01-16', '2000-01-17', '2000-01-18', '2000-01-19', '2000-01-20', '2000-01-21', '2000-01-22', '2000-01-23', '2000-01-24', '2000-01-25', '2000-01-26', '2000-01-27', '2000-01-28', '2000-01-29', '2000-01-30', '2000-01-31'],
+ y: [4.3, 8.2, 4.1, 5.6, -3, -0.2, 0.3, 0.4, 4.1, 5, 4.6, -0.2, -8.5, -9.1, -2.7, -2.7, -17, -11.3, -5.5, -6.5, -16.9, -12, -6.1, -6.6, -7.9, -10.8, -14.8, -11, -4.4, -1.3, -1.1],
+ mode: 'lines',
+ type: 'scatter',
+ name: '2000'
+};
+
+var data = [ trace1 ];
+
+var layout = {
+ xaxis: {
+ type: 'date',
+ title: {
+ text: 'January Weather'
+ }
+ },
+ yaxis: {
+ title: {
+ text: 'Daily Mean Temperature'
+ }
+ },
+ title: {
+ text: '2000 Toronto January Weather'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/axes/2016-03-05-axes-reversed-with-min-max.html b/content/plotly_js/fundamentals/axes/2016-03-05-axes-reversed-with-min-max.html
new file mode 100644
index 00000000000..73601c47bf2
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2016-03-05-axes-reversed-with-min-max.html
@@ -0,0 +1,25 @@
+---
+name: Reversed Axes with Range ( Min/Max ) Specified
+language: plotly_js
+suite: axes
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [
+ {
+ x: [0.0, 0.1, 0.2, 0.3, 0.4, 0.51, 0.61, 0.71, 0.81, 0.91, 1.01, 1.11, 1.21, 1.31, 1.41, 1.52, 1.62, 1.72, 1.82, 1.92, 2.02, 2.12, 2.22, 2.32, 2.42, 2.53, 2.63, 2.73, 2.83, 2.93, 3.03, 3.13, 3.23, 3.33, 3.43, 3.54, 3.64, 3.74, 3.84, 3.94, 4.04, 4.14, 4.24, 4.34, 4.44, 4.55, 4.65, 4.75, 4.85, 4.95, 5.05, 5.15, 5.25, 5.35, 5.45, 5.56, 5.66, 5.76, 5.86, 5.96, 6.06, 6.16, 6.26, 6.36, 6.46, 6.57, 6.67, 6.77, 6.87, 6.97, 7.07, 7.17, 7.27, 7.37, 7.47, 7.58, 7.68, 7.78, 7.88, 7.98, 8.08, 8.18, 8.28, 8.38, 8.48, 8.59, 8.69, 8.79, 8.89, 8.99, 9.09, 9.19, 9.29, 9.39, 9.49, 9.6, 9.7, 9.8, 9.9, 10.0],
+ y: [63, 65, 78, 92, 12, 50, 17, 31, 1, 25, 76, 66, 83, 38, 95, 23, 20, 88, 31, 26, 39, 74, 11, 84, 7, 13, 30, 85, 80, 47, 12, 89, 12, 35, 99, 78, 77, 56, 26, 13, 96, 55, 19, 88, 31, 1, 42, 39, 99, 62, 68, 61, 45, 44, 10, 25, 89, 82, 28, 2, 24, 1, 32, 16, 29, 40, 55, 75, 20, 41, 67, 33, 92, 14, 16, 22, 86, 55, 37, 42, 42, 85, 60, 11, 54, 3, 34, 29, 59, 28, 25, 67, 90, 10, 29, 16, 51, 17, 2, 34],
+ mode: "markers"
+ }
+];
+var layout = {
+ title: {
+ text: "Reversed Axis with Min/Max"
+ },
+ xaxis: {
+ range: [10, 0]
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/axes/2016-05-05-enumerated-ticks-with-tickvals-and-ticktext.html b/content/plotly_js/fundamentals/axes/2016-05-05-enumerated-ticks-with-tickvals-and-ticktext.html
new file mode 100644
index 00000000000..32020def0e2
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2016-05-05-enumerated-ticks-with-tickvals-and-ticktext.html
@@ -0,0 +1,38 @@
+---
+name: Enumerated Ticks with Tickvals and Ticktext
+language: plotly_js
+suite: axes
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/stockdata.csv', function(err, rows){
+function unpack(rows, key) {
+ return rows.map(function(row)
+ { return row[key]; });}
+
+var trace1 = {
+ x:unpack(rows, 'Date'),
+ y: unpack(rows, 'IBM'),
+ mode: 'markers',
+ marker: {
+ size: 7,
+ line: {
+ width: 0.5},
+ opacity: 0.8},
+ type: 'scatter'
+};
+
+var layout = {
+ title: {
+ text: 'IBM Stock Data: Jan 2007 - Mar 2016'
+ },
+ xaxis: {
+ tickvals: ['2007-01-01', '2007-09-01', '2008-01-01', '2008-09-01', '2009-01-01', '2010-01-01', '2011-01-01', '2011-02-14', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01', '2016-01-01'],
+ ticktext: ['2007', 'Financial Crisis Starts', '2008', 'Financial Crisis Ends', '2009', '2010', '2011', 'IBM wins Jeopardy!', '2012', '2013', '2014', '2015', '2016']
+ }
+};
+
+var data = [trace1];
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/axes/2017-05-25-aspectratio.html b/content/plotly_js/fundamentals/axes/2017-05-25-aspectratio.html
new file mode 100644
index 00000000000..72333aebd70
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2017-05-25-aspectratio.html
@@ -0,0 +1,91 @@
+---
+name: Fixed-Ratio Axes
+language: plotly_js
+suite: axes
+order: 9
+sitemap: false
+arrangement: horizontal
+---
+
+var trace0 = {
+ x: [0,1,1,0,0,1,1,2,2,3,3,2,2,3],
+ y: [0,0,1,1,3,3,2,2,3,3,1,1,0,0]
+}
+
+var trace1 = {
+ x: [0,1,2,3],
+ y: [1,2,4,8],
+ yaxis:"y2"
+}
+
+var trace2 = {
+ x: [1,10,100,10,1],
+ y: [0,1,2,3,4],
+ xaxis: "x2",
+ yaxis:"y3",
+}
+
+var trace3 = {
+ x: [1,100,30,80,1],
+ y: [1,1.5,2,2.5,3],
+ xaxis:"x2",
+ yaxis:"y4"
+}
+
+var data = [trace0,trace1,trace2,trace3]
+
+var layout = {
+ width: 800,
+ height: 500,
+ title: {
+ text: "fixed-ratio axes"
+ },
+ xaxis: {
+ nticks: 10,
+ domain: [0, 0.45],
+ title: {
+ text: "shared X axis"
+ }
+ },
+ yaxis: {
+ scaleanchor: "x",
+ domain: [0, 0.45],
+ title: {
+ text: "1:1"
+ }
+ },
+ yaxis2: {
+ scaleanchor: "x",
+ scaleratio: 0.2,
+ domain: [0.55, 1],
+ title: {
+ text: "1:5"
+ }
+ },
+ xaxis2: {
+ type: "log",
+ domain: [0.55, 1],
+ anchor: "y3",
+ title: {
+ text: "unconstrained log X"
+ }
+ },
+ yaxis3: {
+ domain: [0, 0.45],
+ anchor: "x2",
+ title: {
+ text: "Scale matches ->"
+ }
+ },
+ yaxis4: {
+ scaleanchor: "y3",
+ domain: [0.55, 1],
+ anchor: "x2",
+ title: {
+ text: "Scale matches <-"
+ }
+ },
+ showlegend: false
+}
+
+Plotly.newPlot('myDiv', data, layout)
diff --git a/content/plotly_js/fundamentals/axes/2017-10-03-axes-multi-categories.html b/content/plotly_js/fundamentals/axes/2017-10-03-axes-multi-categories.html
new file mode 100644
index 00000000000..d894d728219
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2017-10-03-axes-multi-categories.html
@@ -0,0 +1,42 @@
+---
+name: Multi-Category Axes
+language: plotly_js
+suite: axes
+order: 7.4
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [
+ ['SF Zoo','SF Zoo','SF Zoo'],
+ ['giraffes', 'orangutans', 'monkeys']
+ ],
+ y: [20, 14, 23],
+ name: 'SF Zoo',
+ type: 'bar'
+};
+
+var trace2 = {
+ x: [
+ ['LA Zoo','LA Zoo','LA Zoo'],
+ ['giraffes', 'orangutans', 'monkeys']
+ ],
+ y: [12, 18, 29],
+ name: 'LA Zoo',
+ type: 'bar'
+};
+
+var data = [trace1, trace2];
+var layout = {
+ showlegend: false,
+ xaxis: {
+ tickson: "boundaries",
+ ticklen: 15,
+ showdividers: true,
+ dividercolor: 'grey',
+ dividerwidth: 2
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/axes/2019-11-04-title_standoff.html b/content/plotly_js/fundamentals/axes/2019-11-04-title_standoff.html
new file mode 100644
index 00000000000..7670557034f
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2019-11-04-title_standoff.html
@@ -0,0 +1,36 @@
+---
+name: Set Axis Title Position
+language: plotly_js
+suite: axes
+order: 3.5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ This example sets `standoff` attribute to cartesian axes to determine the distance between the tick labels and the axis title.
+ Note that the axis title position is always constrained within the margins, so the actual standoff distance is always less than the set or default value.
+ By setting standoff and turning [automargin](https://plotly.com/javascript/setting-graph-size/#automatically-adjust-margins) on, plotly.js will push the margins to fit the axis title at given standoff distance.
+---
+var data = [{
+ mode: "lines+markers",
+ x:["December", "January", "February"],
+ y:[4,1,3]
+ }]
+
+ var layout = {
+ margin: {t:0,r:0,b:0,l:20},
+ xaxis: {
+ automargin: true,
+ tickangle: 90,
+ title: {
+ text: "Month",
+ standoff: 20
+ }},
+ yaxis: {
+ automargin: true,
+ tickangle: 90,
+ title: {
+ text: "Temperature",
+ standoff: 40
+ }}}
+
+Plotly.newPlot('myDiv', data, layout)
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/axes/2023-03-15-axes-label-aliases.html b/content/plotly_js/fundamentals/axes/2023-03-15-axes-label-aliases.html
new file mode 100644
index 00000000000..1487550d7ee
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2023-03-15-axes-label-aliases.html
@@ -0,0 +1,29 @@
+---
+name: Specifying Label Aliases
+language: plotly_js
+suite: axes
+order: 10
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ This example uses `labelalias` to update the text displayed for the x-axis values.
+---
+var trace1 = {
+ x: ['UK', 'US', 'Germany', 'France'],
+ y: [8, 3, 10, 3],
+ type: 'bar',
+};
+
+var data = [trace1];
+
+var layout = {
+xaxis: {
+ labelalias: {
+ UK: '🇬🇧 United Kingdom',
+ US: '🇺🇸 United States',
+ Germany: '🇩🇪 Germany',
+ France: '🇫🇷 France'}
+ },
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/axes/2024-01-18-b64-arrays.html b/content/plotly_js/fundamentals/axes/2024-01-18-b64-arrays.html
new file mode 100644
index 00000000000..2357720a2d1
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2024-01-18-b64-arrays.html
@@ -0,0 +1,34 @@
+---
+name: Use Base64-Encoded Typed Arrays
+language: plotly_js
+suite: axes
+order: 11
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Plotly.js 2.28.0 and later supports using base64-encoded typed arrays. To use a base64-encoded typed array, pass an object with the keys `bdata` (a base64-encoded string or the ArrayBuffer of an integer or float typed array) and `dtype` (the data type of the array, where the supported types are `float64`, `float32`, `int32`, `uint32`, `int16`, `uint16`, `int8`, `uint8`, and `uint8c`). You can also specify `shape` for multidimensional arrays. For example, `'4,10'` would be a 2D array with 4 rows and 10 columns.
+---
+var x = 'VVVVVVVV1b8AAAAAAAAAAFVVVVVVVdU/'
+var y = 'q6qqPquqqr4='
+var z = 'AABkAMgALAGQAfQB'
+
+var trace1 = {
+ x: {
+ bdata: x,
+ dtype: 'f8'
+ },
+ y: {
+ bdata: y,
+ dtype: 'f4'
+ },
+ z: {
+ bdata: z,
+ dtype: 'u2',
+ shape: '2,3'
+ },
+ type: 'surface'
+};
+
+var data = [trace1];
+
+Plotly.newPlot('myDiv', data);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/axes/2025-06-29-zeroline.html b/content/plotly_js/fundamentals/axes/2025-06-29-zeroline.html
new file mode 100644
index 00000000000..3c7d8a25072
--- /dev/null
+++ b/content/plotly_js/fundamentals/axes/2025-06-29-zeroline.html
@@ -0,0 +1,30 @@
+---
+name: Zero Line Layer
+language: plotly_js
+suite: axes
+order: 12
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ *New in 3.1*
+
+ By default, zero lines are displayed below traces. Set `zerolinelayer="above traces"` on an axis to display its zero line above traces.
+---
+var trace1 = {
+ x: ['A', 'B', 'C', 'D', 'A'],
+ y: [2, 0, 4, -3, 2],
+ fill: 'toself',
+ mode: 'none',
+ fillcolor: 'lightpink',
+ type: 'scatter'
+};
+
+var data = [trace1];
+
+var layout = {
+ yaxis: {
+ zerolinelayer: "above traces" // Change to "below traces" to see the difference
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-Blackbody-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-Blackbody-heatmap.html
new file mode 100644
index 00000000000..793cf150233
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-Blackbody-heatmap.html
@@ -0,0 +1,22 @@
+---
+name: Blackbody Colorscale
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'Blackbody',
+ type: 'heatmap'
+ }
+];
+var layout = {
+ title: {
+ text: 'Blackbody'
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-Bluered-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-Bluered-heatmap.html
new file mode 100644
index 00000000000..e754a1eca40
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-Bluered-heatmap.html
@@ -0,0 +1,16 @@
+---
+name: Bluered Colorscale
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'Bluered',
+ type: 'heatmap'
+}];
+Plotly.newPlot('myDiv', data);
+ });
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-Earth-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-Earth-heatmap.html
new file mode 100644
index 00000000000..424fd581878
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-Earth-heatmap.html
@@ -0,0 +1,17 @@
+---
+name: Earth Colorscale
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'Earth',
+ type: 'heatmap'
+}];
+Plotly.newPlot('myDiv', data);
+ });
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-Electric-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-Electric-heatmap.html
new file mode 100644
index 00000000000..5a316c6ae31
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-Electric-heatmap.html
@@ -0,0 +1,16 @@
+---
+name: Electric Colorscale
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'Electric',
+ type: 'heatmap'
+}];
+Plotly.newPlot('myDiv', data);
+ });
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-Greens-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-Greens-heatmap.html
new file mode 100644
index 00000000000..b5ff8f2f913
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-Greens-heatmap.html
@@ -0,0 +1,22 @@
+---
+name: Greens Colorscale
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'Greens',
+ type: 'heatmap'
+ }
+];
+var layout = {
+ title: {
+ text: 'Greens'
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-Greys-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-Greys-heatmap.html
new file mode 100644
index 00000000000..4470c4bc2d6
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-Greys-heatmap.html
@@ -0,0 +1,22 @@
+---
+name: Greys Colorscale
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'Greys',
+ type: 'heatmap'
+ }
+];
+var layout = {
+ title: {
+ text: 'Greys'
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-Hot-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-Hot-heatmap.html
new file mode 100644
index 00000000000..671a98ee711
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-Hot-heatmap.html
@@ -0,0 +1,17 @@
+---
+name: Hot Colorscale
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'Hot',
+ type: 'heatmap'
+}];
+Plotly.newPlot('myDiv', data);
+ });
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-Jet-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-Jet-heatmap.html
new file mode 100644
index 00000000000..f5cf906376a
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-Jet-heatmap.html
@@ -0,0 +1,23 @@
+---
+name: Jet Colorscale
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'Jet',
+ type: 'heatmap'
+ }
+];
+var layout = {
+ title: {
+ text: 'Jet'
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-Picnic-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-Picnic-heatmap.html
new file mode 100644
index 00000000000..e4721eafc31
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-Picnic-heatmap.html
@@ -0,0 +1,22 @@
+---
+name: Picnic Colorscale
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'Picnic',
+ type: 'heatmap'
+ }
+];
+var layout = {
+ title: {
+ text: 'Picnic'
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-Portland-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-Portland-heatmap.html
new file mode 100644
index 00000000000..f402d7a600a
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-Portland-heatmap.html
@@ -0,0 +1,23 @@
+---
+name: Portland Heatmap
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'Portland',
+ type: 'heatmap'
+ }
+];
+var layout = {
+ title: {
+ text: 'Portland'
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-RdBu-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-RdBu-heatmap.html
new file mode 100644
index 00000000000..6fd7583f0a2
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-RdBu-heatmap.html
@@ -0,0 +1,23 @@
+---
+name: RdBu Colorscale
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'RdBu',
+ type: 'heatmap'
+ }
+];
+var layout = {
+ title: {
+ text: 'RdBu'
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-YIGnBu-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-YIGnBu-heatmap.html
new file mode 100644
index 00000000000..7f720e6e1ab
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-YIGnBu-heatmap.html
@@ -0,0 +1,22 @@
+---
+name: YlGnBu Colorscale
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'YlGnBu',
+ type: 'heatmap'
+ }
+];
+var layout = {
+ title: {
+ text: 'YlGnBu'
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-YIOrRd-heatmap.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-YIOrRd-heatmap.html
new file mode 100644
index 00000000000..ba580ee85c9
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-YIOrRd-heatmap.html
@@ -0,0 +1,23 @@
+---
+name: YlOrRd Heatmap
+language: plotly_js
+suite: colorscales
+order: 16
+sitemap: false
+arrangement: horizontal
+---
+
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: 'YlOrRd',
+ type: 'heatmap'
+ }
+];
+var layout = {
+ title: {
+ text: 'YlOrRd'
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/fundamentals/colorscales/2015-04-09-custom-colorscale.html b/content/plotly_js/fundamentals/colorscales/2015-04-09-custom-colorscale.html
new file mode 100644
index 00000000000..ef7920aa280
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-04-09-custom-colorscale.html
@@ -0,0 +1,27 @@
+---
+name: Custom Colorscale
+language: plotly_js
+suite: colorscales
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+d3.json('https://raw.githubusercontent.com/plotly/datasets/master/custom_heatmap_colorscale.json', function(figure) {
+var data = [{
+ z: figure.z,
+ colorscale: [
+ ['0.0', 'rgb(165,0,38)'],
+ ['0.111111111111', 'rgb(215,48,39)'],
+ ['0.222222222222', 'rgb(244,109,67)'],
+ ['0.333333333333', 'rgb(253,174,97)'],
+ ['0.444444444444', 'rgb(254,224,144)'],
+ ['0.555555555556', 'rgb(224,243,248)'],
+ ['0.666666666667', 'rgb(171,217,233)'],
+ ['0.777777777778', 'rgb(116,173,209)'],
+ ['0.888888888889', 'rgb(69,117,180)'],
+ ['1.0', 'rgb(49,54,149)']
+ ],
+ type: 'heatmap'
+}];
+Plotly.newPlot('myDiv', data);
+ });
diff --git a/content/plotly_js/fundamentals/colorscales/2015-08-10-colorscale-for-contour-plot.html b/content/plotly_js/fundamentals/colorscales/2015-08-10-colorscale-for-contour-plot.html
new file mode 100644
index 00000000000..7dce3955707
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-08-10-colorscale-for-contour-plot.html
@@ -0,0 +1,27 @@
+---
+name: Colorscale for Contour Plot
+language: plotly_js
+suite: colorscales
+order: 20
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [ {
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5., 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour',
+ colorscale: 'Jet'
+}
+];
+
+var layout = {
+ title: {
+ text: 'Colorscale for Contour Plot'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/colorscales/2015-08-10-custom-colorscale-for-contour-plot.html b/content/plotly_js/fundamentals/colorscales/2015-08-10-custom-colorscale-for-contour-plot.html
new file mode 100644
index 00000000000..ade05d99c7c
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-08-10-custom-colorscale-for-contour-plot.html
@@ -0,0 +1,26 @@
+---
+name: Custom Colorscale for Contour Plot
+language: plotly_js
+suite: colorscales
+order: 21
+sitemap: false
+arrangement: horizontal
+---
+var data = [ {
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5., 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour',
+ colorscale: [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']]
+}
+];
+
+var layout = {
+ title: {
+ text: 'Custom Contour Plot Colorscale'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/colorscales/2015-08-10-discretized-heatmap-colorscale.html b/content/plotly_js/fundamentals/colorscales/2015-08-10-discretized-heatmap-colorscale.html
new file mode 100644
index 00000000000..183fcfc4577
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2015-08-10-discretized-heatmap-colorscale.html
@@ -0,0 +1,68 @@
+---
+name: Custom Discretized Heatmap Colorscale
+language: plotly_js
+suite: colorscales
+order: 22
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [
+ {
+ z: [[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]],
+ colorscale: [
+
+// Let first 10% (0.1) of the values have color rgb(0, 0, 0)
+
+ [0, 'rgb(0, 0, 0)'],
+ [0.1, 'rgb(0, 0, 0)'],
+
+// Let values between 10-20% of the min and max of z
+// have color rgb(20, 20, 20)
+
+ [0.1, 'rgb(20, 20, 20)'],
+ [0.2, 'rgb(20, 20, 20)'],
+
+// Values between 20-30% of the min and max of z
+//have color rgb(40, 40, 40)
+
+ [0.2, 'rgb(40, 40, 40)'],
+ [0.3, 'rgb(40, 40, 40)'],
+
+ [0.3, 'rgb(60, 60, 60)'],
+ [0.4, 'rgb(60, 60, 60)'],
+
+ [0.4, 'rgb(80, 80, 80)'],
+ [0.5, 'rgb(80, 80, 80)'],
+
+ [0.5, 'rgb(100, 100, 100)'],
+ [0.6, 'rgb(100, 100, 100)'],
+
+ [0.6, 'rgb(120, 120, 120)'],
+ [0.7, 'rgb(120, 120, 120)'],
+
+ [0.7, 'rgb(140, 140, 140)'],
+ [0.8, 'rgb(140, 140, 140)'],
+
+ [0.8, 'rgb(160, 160, 160)'],
+ [0.9, 'rgb(160, 160, 160)'],
+
+ [0.9, 'rgb(180, 180, 180)'],
+ [1.0, 'rgb(180, 180, 180)']
+ ],
+ type: 'heatmap',
+ colorbar:{
+ tickmode: 'linear',
+ tick0: 0,
+ dtick: 1
+ }
+ }
+];
+
+var layout = {
+ title: {
+ text: 'CUSTOM DISCRETIZED HEATMAP COLORSCALE'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/colorscales/2017-08-21-colorscales_new_plotlyjs_index.html b/content/plotly_js/fundamentals/colorscales/2017-08-21-colorscales_new_plotlyjs_index.html
new file mode 100644
index 00000000000..8d026dfe310
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorscales/2017-08-21-colorscales_new_plotlyjs_index.html
@@ -0,0 +1,16 @@
+---
+description: How to set colorscales and heatmap colorscales in D3.js-based JavaScript
+ charts in Plotly.js. Divergent, sequential, and qualitative colorscales.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Colorscales
+order: 6
+page_type: u-guide
+permalink: javascript/colorscales/
+redirect_from: javascript-graphing-library/heatmap-and-contour-colorscales/
+thumbnail: thumbnail/heatmap_colorscale.jpg
+---
+
+{% assign examples = site.posts | where:'language','plotly_js' | where:'suite','colorscales' | sort: 'order' %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/colorway/2018-10-03-colorway.html b/content/plotly_js/fundamentals/colorway/2018-10-03-colorway.html
new file mode 100644
index 00000000000..506f5b94e80
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorway/2018-10-03-colorway.html
@@ -0,0 +1,34 @@
+---
+name: Set Default Trace Colors with colorway
+language: plotly_js
+suite: colorway
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+function linspace(a,b,n) {
+ return d3.range(n).map(function(i){return a+i*(b-a)/(n-1);});
+}
+
+const parabolaGen = (a, b) =>
+ x => x*x*a + b;
+
+var as = linspace(1, 3, 7);
+var bs = linspace(2, 14, 7);
+var x = linspace(-1, 3, 50);
+var data = [];
+
+for (i=0; i< as.length; i++ ){
+ data.push({
+ type: "scatter",
+ mode: "lines",
+ x: x,
+ y: x.map(parabolaGen(as[i],bs[i]))
+ })
+}
+
+var layout = {
+ colorway : ['#f3cec9', '#e7a4b6', '#cd7eaf', '#a262a9', '#6f4d96', '#3d3b72', '#182844']
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/colorway/2018-10-03-colorway_plotlyjs_index.html b/content/plotly_js/fundamentals/colorway/2018-10-03-colorway_plotlyjs_index.html
new file mode 100644
index 00000000000..f2fe2bceffb
--- /dev/null
+++ b/content/plotly_js/fundamentals/colorway/2018-10-03-colorway_plotlyjs_index.html
@@ -0,0 +1,14 @@
+---
+description: How to use colorway to set default trace colors in JavaScript with Plotly.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Colorway
+order: 7
+page_type: u-guide
+permalink: javascript/colorway/
+thumbnail: thumbnail/colorway.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","colorway" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/config-options/2015-09-24-config-locale.html b/content/plotly_js/fundamentals/config-options/2015-09-24-config-locale.html
new file mode 100644
index 00000000000..d6eb1ace4dd
--- /dev/null
+++ b/content/plotly_js/fundamentals/config-options/2015-09-24-config-locale.html
@@ -0,0 +1,40 @@
+---
+name: Change the Default Locale
+language: plotly_js
+suite: configuration
+order: 7.5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Load and register a non-default locale by adding ``
+ to your HTML after the plotly.js tag and then reference the locale in the `config`. For Example, the codepen example below has
+ `` in its HTML. For more information and a list of available locales, see
+ [https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-include-localization](https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-include-localization)
+---
+var trace1 = {
+ type: "scatter",
+ mode: "lines",
+ x: ['2018-01-01', '2018-08-31'],
+ y: [10, 5],
+ line: {color: '#17BECF'}
+};
+
+var trace2 = {
+ type: "scatter",
+ mode: "lines",
+ x: ['2018-01-01', '2018-08-31'],
+ y: [3,7],
+ line: {color: '#7F7F7F'}
+};
+
+var data = [trace1,trace2];
+
+var layout = {
+ title: {
+ text: 'Custom Locale'
+ }
+};
+
+var config = {locale: 'fr'};
+
+Plotly.newPlot('myDiv', data, layout, config);
\ No newline at end of file
diff --git a/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-displaylogo.html b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-displaylogo.html
new file mode 100644
index 00000000000..c725877df12
--- /dev/null
+++ b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-displaylogo.html
@@ -0,0 +1,25 @@
+---
+name: Hide the Plotly Logo on the Modebar
+language: plotly_js
+suite: configuration
+order: 8
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x:['trees', 'flowers', 'hedges'],
+ y: [90, 130, 40],
+ type: 'bar'
+};
+
+var data = [trace1];
+
+var layout = {
+ title: {
+ text: 'Hide the Plotly Logo on the Modebar'
+ },
+ showlegend: false
+};
+
+Plotly.newPlot('myDiv', data, layout, {displaylogo: false});
diff --git a/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html
new file mode 100644
index 00000000000..5fdc97667e2
--- /dev/null
+++ b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html
@@ -0,0 +1,36 @@
+---
+name: Never Display The Modebar
+language: plotly_js
+suite: configuration
+order: 5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ When users hover over a figure generated with `plotly.js`, a `modebar` appears in the top-right of the figure. This presents users with several options for interacting with the figure.
+
+ By default, the `modebar` is only visible while the user is hovering over the chart. If you would like the `modebar` to never be visible, then set the `displayModeBar` attribute in the `config` of your figure to `false`.
+---
+var trace1 = {
+ x:['Zebras', 'Lions', 'Pelicans'],
+ y: [90, 40, 60],
+ type: 'bar',
+ name: 'New York Zoo'
+};
+
+var trace2 = {
+ x:['Zebras', 'Lions', 'Pelicans'],
+ y: [10, 80, 45],
+ type: 'bar',
+ name: 'San Francisco Zoo'
+};
+
+var data = [trace1, trace2];
+
+var layout = {
+ title: {
+ text: 'Hide the Modebar'
+ },
+ showlegend: true
+};
+
+Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});
diff --git a/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html
new file mode 100644
index 00000000000..e3f409e76c5
--- /dev/null
+++ b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html
@@ -0,0 +1,27 @@
+---
+name: Customize The `Edit Chart` Link Text
+language: plotly_js
+suite: configuration
+order: 7
+sitemap: false
+arrangement: horizontal
+---
+var data = [{
+ z: [[0, 1, 2, 3, 4, 5, 6],
+ [1, 9, 4, 7, 5, 2, 4],
+ [2, 4, 2, 1, 6, 9, 3]],
+ type: 'heatmap'}]
+
+var layout = {
+ title: {
+ text: 'Customize The Edit Chart Link Text'
+ }
+};
+
+var config = {
+ showLink: true,
+ plotlyServerURL: "https://chart-studio.plotly.com",
+ linkText: 'This text is custom!'
+};
+
+Plotly.newPlot('myDiv', data, layout, config)
diff --git a/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-scrollzoom.html b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-scrollzoom.html
new file mode 100644
index 00000000000..6833d22484a
--- /dev/null
+++ b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-scrollzoom.html
@@ -0,0 +1,26 @@
+---
+name: Scroll and Zoom
+language: plotly_js
+suite: configuration
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+// mousewheel or two-finger scroll zooms the plot
+
+var trace1 = {
+ x:['2020-10-04', '2021-11-04', '2023-12-04'],
+ y: [90, 40, 60],
+ type: 'scatter'
+};
+
+var data = [trace1];
+
+var layout = {
+ title: {
+ text: 'Scroll and Zoom'
+ },
+ showlegend: false
+};
+
+Plotly.newPlot('myDiv', data, layout, {scrollZoom: true});
diff --git a/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-showlink.html b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-showlink.html
new file mode 100644
index 00000000000..b75ab5859c4
--- /dev/null
+++ b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-showlink.html
@@ -0,0 +1,32 @@
+---
+name: Display the `Edit Chart` Link
+language: plotly_js
+suite: configuration
+order: 6
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Note: showLink now defaults to false.
+---
+
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6],
+ y: [1, 9, 4, 7, 5, 2, 4],
+ mode: 'lines+markers',
+ type: 'scatter'
+};
+
+var data = [trace1];
+
+var layout = {
+ title: {
+ text: 'Display the Edit Chart Link'
+ }
+};
+
+var config = {
+ showLink: true,
+ plotlyServerURL: "https://chart-studio.plotly.com"
+};
+
+Plotly.newPlot('myDiv', data, layout, config);
diff --git a/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-static-plot.html b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-static-plot.html
new file mode 100644
index 00000000000..b47fe67fdab
--- /dev/null
+++ b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-static-plot.html
@@ -0,0 +1,27 @@
+---
+name: Making a Static Chart
+language: plotly_js
+suite: configuration
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6],
+ y: [1, 9, 4, 7, 5, 2, 4],
+ mode: 'markers',
+ marker: {
+ size: [20, 40, 25, 10, 60, 90, 30],
+ }
+};
+
+var data = [trace1];
+
+var layout = {
+ title: {
+ text: 'Create a Static Chart'
+ },
+ showlegend: false
+};
+
+Plotly.newPlot('myDiv', data, layout, {staticPlot: true});
diff --git a/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html
new file mode 100644
index 00000000000..688279133e9
--- /dev/null
+++ b/content/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html
@@ -0,0 +1,37 @@
+---
+name: Customize Download Plot Options
+language: plotly_js
+suite: configuration
+order: 3.1
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6],
+ y: [1, 9, 4, 7, 5, 2, 4],
+ mode: 'markers',
+ marker: {
+ size: [20, 40, 25, 10, 60, 90, 30],
+ }
+};
+
+var data = [trace1];
+
+var layout = {
+ title: {
+ text: 'Download Chart as SVG instead of PNG'
+ },
+ showlegend: false
+};
+
+var config = {
+ toImageButtonOptions: {
+ format: 'svg', // one of png, svg, jpeg, webp
+ filename: 'custom_image',
+ height: 500,
+ width: 700,
+ scale: 1 // Multiply title/legend/axis/canvas sizes by this factor
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout, config);
diff --git a/content/plotly_js/fundamentals/config-options/2015-09-24-config-showSendToCloud.html b/content/plotly_js/fundamentals/config-options/2015-09-24-config-showSendToCloud.html
new file mode 100644
index 00000000000..0a906c6263d
--- /dev/null
+++ b/content/plotly_js/fundamentals/config-options/2015-09-24-config-showSendToCloud.html
@@ -0,0 +1,26 @@
+---
+name: Display Edit in Chart Studio Modebar Button
+language: plotly_js
+suite: configuration
+order: 7.1
+sitemap: false
+arrangement: horizontal
+---
+var data = [{
+ values: [19, 26, 55],
+ labels: ['Residential', 'Non-Residential', 'Utility'],
+ type: 'pie'
+}];
+
+var layout = {
+ title: {
+ text: 'Show Edit in Chart Studio Modebar Button'
+ }
+};
+
+var config = {
+ showEditInChartStudio: true,
+ plotlyServerURL: "https://chart-studio.plotly.com"
+};
+
+Plotly.newPlot('myDiv', data, layout, config);
diff --git a/content/plotly_js/fundamentals/config-options/2015-09-24-config_options_index.html b/content/plotly_js/fundamentals/config-options/2015-09-24-config_options_index.html
new file mode 100644
index 00000000000..ecd0697852c
--- /dev/null
+++ b/content/plotly_js/fundamentals/config-options/2015-09-24-config_options_index.html
@@ -0,0 +1,26 @@
+---
+description: How to set the configuration options for figures in JavaScript.
+display_as: file_settings
+language: plotly_js
+layout: base
+name: Configuration Options
+order: 1
+page_type: example_index
+permalink: javascript/configuration-options/
+thumbnail: thumbnail/modebar-icons.png
+---
+
+
+
+The plotly.js config argument sets properties like the mode bar buttons and the interactivity in the chart.
+It's the last argument in Plotly.newPlot calls.
+
+plotly.js source code on GitHub
+ .
+
+ -'2D', `zoom2d`, `pan2d`, `select2d`, `lasso2d`, `zoomIn2d`, `zoomOut2d`, `autoScale2d`, `resetScale2d`
+ -'3D', `zoom3d`, `pan3d`, `orbitRotation`, `tableRotation`, `handleDrag3d`, `resetCameraDefault3d`, `resetCameraLastSave3d`, `hoverClosest3d`
+ -'Cartesian', `hoverClosestCartesian`, `hoverCompareCartesian`
+ -'Geo', `zoomInGeo`, `zoomOutGeo`, `resetGeo`, `hoverClosestGeo`
+ -'Other', `hoverClosestGl2d`, `hoverClosestPie`, `toggleHover`, `resetViews`, `toImage`, `sendDataToCloud`, `toggleSpikelines`, `resetViewMapbox`
+
+---
+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/config-options/2025-07-29-button-disable-axis.html b/content/plotly_js/fundamentals/config-options/2025-07-29-button-disable-axis.html
new file mode 100644
index 00000000000..185c2fae7ab
--- /dev/null
+++ b/content/plotly_js/fundamentals/config-options/2025-07-29-button-disable-axis.html
@@ -0,0 +1,34 @@
+---
+name: Disabling Buttons for Specific Axes
+language: plotly_js
+suite: configuration
+order: 5.8
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ *New in 3.1*
+
+ Disabling the zoom in, zoom out, and autoscale buttons for specific axes is supported on cartesian axes using the `modebardisable` attribute. In the following example, the zoom in and zoom out buttons are disabled on the `xaxis`, meaning these buttons only zoom in and out on the `yaxis`. Disable the autoscale button using `modebardisable='autoscale'`. You can also disable both autoscaling and zoom buttons using `modebardisable='zoominout+autoscale'`.
+---
+var data = [{
+ type: "scatter",
+ mode: "lines+markers",
+ x: ["2023-01-01", "2023-02-01", "2023-03-01", "2023-04-01", "2023-05-01", "2023-06-01"],
+ y: [150, 160, 155, 170, 165, 180],
+ name: "Google Stock Price"
+}];
+
+var layout = {
+ title: "Google Stock Price Over Time with Mode Bar Disabled",
+ xaxis: {
+ title: "Date",
+ type: "date",
+ // Try zooming in or out using the modebar buttons. These only apply to the yaxis in this example.
+ modebardisable: "zoominout"
+ },
+ yaxis: {
+ title: "Stock Price (USD)"
+ }
+};
+
+Plotly.newPlot("myDiv", data, layout);
diff --git a/content/plotly_js/fundamentals/eula/2015-07-11-eula.html b/content/plotly_js/fundamentals/eula/2015-07-11-eula.html
new file mode 100644
index 00000000000..ba7def0d395
--- /dev/null
+++ b/content/plotly_js/fundamentals/eula/2015-07-11-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
+
+
%{x|%A, %B %d, %Y} '
+ }
+ },
+ yaxis: {
+ title: 'Price (USD)',
+ tickprefix: '$'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/fundamentals/hover/2025-07-29-unified-hover.html b/content/plotly_js/fundamentals/hover/2025-07-29-unified-hover.html
new file mode 100644
index 00000000000..15d90721268
--- /dev/null
+++ b/content/plotly_js/fundamentals/hover/2025-07-29-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/2016-06-21-images_plotly_js_index.html b/content/plotly_js/fundamentals/images/2016-06-21-images_plotly_js_index.html
new file mode 100644
index 00000000000..b4338646f5b
--- /dev/null
+++ b/content/plotly_js/fundamentals/images/2016-06-21-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/2016-06-21-logo.html b/content/plotly_js/fundamentals/images/2016-06-21-logo.html
new file mode 100644
index 00000000000..5bf0d8737ca
--- /dev/null
+++ b/content/plotly_js/fundamentals/images/2016-06-21-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 DownPercentile 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/2016-06-21-multiple_images_example.html b/content/plotly_js/fundamentals/images/2016-06-21-multiple_images_example.html
new file mode 100644
index 00000000000..1b4ccfee5ad
--- /dev/null
+++ b/content/plotly_js/fundamentals/images/2016-06-21-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/2015-04-09-labels_plotly_js_index.html b/content/plotly_js/fundamentals/labels/2015-04-09-labels_plotly_js_index.html
new file mode 100644
index 00000000000..3d15b1610db
--- /dev/null
+++ b/content/plotly_js/fundamentals/labels/2015-04-09-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/2015-04-09-styling-names.html b/content/plotly_js/fundamentals/labels/2015-04-09-styling-names.html
new file mode 100644
index 00000000000..0085f3c7f52
--- /dev/null
+++ b/content/plotly_js/fundamentals/labels/2015-04-09-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/labels/2023-03-17-automargin.html b/content/plotly_js/fundamentals/labels/2023-03-17-automargin.html
new file mode 100644
index 00000000000..5bb80188010
--- /dev/null
+++ b/content/plotly_js/fundamentals/labels/2023-03-17-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/latex/2015-04-09-latex.html b/content/plotly_js/fundamentals/latex/2015-04-09-latex.html
new file mode 100644
index 00000000000..569c1754e4c
--- /dev/null
+++ b/content/plotly_js/fundamentals/latex/2015-04-09-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/2015-04-09-latex_plotly_js_index.html b/content/plotly_js/fundamentals/latex/2015-04-09-latex_plotly_js_index.html
new file mode 100644
index 00000000000..d4f33c035ef
--- /dev/null
+++ b/content/plotly_js/fundamentals/latex/2015-04-09-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/2018-10-18-adding-named-items.html b/content/plotly_js/fundamentals/layout-template/2018-10-18-adding-named-items.html
new file mode 100644
index 00000000000..cfb1e952b0d
--- /dev/null
+++ b/content/plotly_js/fundamentals/layout-template/2018-10-18-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/2018-10-18-default-container.html b/content/plotly_js/fundamentals/layout-template/2018-10-18-default-container.html
new file mode 100644
index 00000000000..4d031fc884d
--- /dev/null
+++ b/content/plotly_js/fundamentals/layout-template/2018-10-18-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/2018-10-18-labels_plotly_js_index.html b/content/plotly_js/fundamentals/layout-template/2018-10-18-labels_plotly_js_index.html
new file mode 100644
index 00000000000..21ec61837d7
--- /dev/null
+++ b/content/plotly_js/fundamentals/layout-template/2018-10-18-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/2018-10-18-matching-named-items.html b/content/plotly_js/fundamentals/layout-template/2018-10-18-matching-named-items.html
new file mode 100644
index 00000000000..af04a1b0c8c
--- /dev/null
+++ b/content/plotly_js/fundamentals/layout-template/2018-10-18-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/2018-10-18-template-attribute.html b/content/plotly_js/fundamentals/layout-template/2018-10-18-template-attribute.html
new file mode 100644
index 00000000000..df5d51321eb
--- /dev/null
+++ b/content/plotly_js/fundamentals/layout-template/2018-10-18-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/2015-04-09-legend-inside.html b/content/plotly_js/fundamentals/legends/2015-04-09-legend-inside.html
new file mode 100644
index 00000000000..962e4559627
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/2015-04-09-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/2015-04-09-legend-labels.html b/content/plotly_js/fundamentals/legends/2015-04-09-legend-labels.html
new file mode 100644
index 00000000000..1fa4bbfa522
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/2015-04-09-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/2015-04-09-legend-outside.html b/content/plotly_js/fundamentals/legends/2015-04-09-legend-outside.html
new file mode 100644
index 00000000000..88f4259f1b4
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/2015-04-09-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/2015-04-09-legend-style.html b/content/plotly_js/fundamentals/legends/2015-04-09-legend-style.html
new file mode 100644
index 00000000000..88d6fc6e2df
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/2015-04-09-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/2015-04-09-legend-visibility.html b/content/plotly_js/fundamentals/legends/2015-04-09-legend-visibility.html
new file mode 100644
index 00000000000..4856f0f56ef
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/2015-04-09-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/2015-04-09-legends_plotly_js_index.html b/content/plotly_js/fundamentals/legends/2015-04-09-legends_plotly_js_index.html
new file mode 100644
index 00000000000..e897633f1f9
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/2015-04-09-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/2015-04-09-show-legend.html b/content/plotly_js/fundamentals/legends/2015-04-09-show-legend.html
new file mode 100644
index 00000000000..f008f7e4abe
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/2015-04-09-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/2016-05-31-legend-orientation.html b/content/plotly_js/fundamentals/legends/2016-05-31-legend-orientation.html
new file mode 100644
index 00000000000..cf2889c896b
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/2016-05-31-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/2017-06-20-grouped-legend.html b/content/plotly_js/fundamentals/legends/2017-06-20-grouped-legend.html
new file mode 100644
index 00000000000..2ba1e3562c3
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/2017-06-20-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/2017-06-20-subplot-grouped-legend.html b/content/plotly_js/fundamentals/legends/2017-06-20-subplot-grouped-legend.html
new file mode 100644
index 00000000000..70951d11189
--- /dev/null
+++ b/content/plotly_js/fundamentals/legends/2017-06-20-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/2018-03-15-color-opacity.html b/content/plotly_js/fundamentals/marker-style/2018-03-15-color-opacity.html
new file mode 100644
index 00000000000..c971ad39e06
--- /dev/null
+++ b/content/plotly_js/fundamentals/marker-style/2018-03-15-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/2018-03-15-marker-border.html b/content/plotly_js/fundamentals/marker-style/2018-03-15-marker-border.html
new file mode 100644
index 00000000000..b20eff4e06c
--- /dev/null
+++ b/content/plotly_js/fundamentals/marker-style/2018-03-15-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/2018-03-15-marker-opacity.html b/content/plotly_js/fundamentals/marker-style/2018-03-15-marker-opacity.html
new file mode 100644
index 00000000000..5258ff4f61a
--- /dev/null
+++ b/content/plotly_js/fundamentals/marker-style/2018-03-15-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/2018-03-15-marker-opaque.html b/content/plotly_js/fundamentals/marker-style/2018-03-15-marker-opaque.html
new file mode 100644
index 00000000000..261547bfb94
--- /dev/null
+++ b/content/plotly_js/fundamentals/marker-style/2018-03-15-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/2018-03-15-marker-style-plotly-js.html b/content/plotly_js/fundamentals/marker-style/2018-03-15-marker-style-plotly-js.html
new file mode 100644
index 00000000000..beea5f99147
--- /dev/null
+++ b/content/plotly_js/fundamentals/marker-style/2018-03-15-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/2018-03-15-trace-opacity.html b/content/plotly_js/fundamentals/marker-style/2018-03-15-trace-opacity.html
new file mode 100644
index 00000000000..6207d5e112c
--- /dev/null
+++ b/content/plotly_js/fundamentals/marker-style/2018-03-15-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/2024-10-09-plotly-js-3-changes.md b/content/plotly_js/fundamentals/plotly-js-3-changes/2024-10-09-plotly-js-3-changes.md
new file mode 100644
index 00000000000..7beac7958c9
--- /dev/null
+++ b/content/plotly_js/fundamentals/plotly-js-3-changes/2024-10-09-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/react/2018-01-16-advanced.html b/content/plotly_js/fundamentals/react/2018-01-16-advanced.html
new file mode 100644
index 00000000000..14c417125a3
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/2018-01-16-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/2018-01-16-api.html b/content/plotly_js/fundamentals/react/2018-01-16-api.html
new file mode 100644
index 00000000000..b0af54f0fb1
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/2018-01-16-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/2018-01-16-installation.html b/content/plotly_js/fundamentals/react/2018-01-16-installation.html
new file mode 100644
index 00000000000..81fa7618173
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/2018-01-16-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/2018-01-16-introduction.html b/content/plotly_js/fundamentals/react/2018-01-16-introduction.html
new file mode 100644
index 00000000000..9a9c46852a3
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/2018-01-16-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/2018-01-16-plotly-js-chart-and-attributes.html b/content/plotly_js/fundamentals/react/2018-01-16-plotly-js-chart-and-attributes.html
new file mode 100644
index 00000000000..6d2a144b3ca
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/2018-01-16-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/2018-01-16-quick_start.html b/content/plotly_js/fundamentals/react/2018-01-16-quick_start.html
new file mode 100644
index 00000000000..37301c390d1
--- /dev/null
+++ b/content/plotly_js/fundamentals/react/2018-01-16-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 (
+
+
+
+
+
+
+
Plotly.js Maps
+
{{page.description}}
+ {% include layouts/dashplug.html %}
+
+
+
+
+ {% assign languagelist = site.posts | where:"language","plotly_js" | where:"display_as","maps" | where: "layout","base" | sort: "order" %}
+ {% include posts/documentation_eg.html %}
diff --git a/content/plotly_js/maps/bubble-maps/2015-07-11-bubble-map.html b/content/plotly_js/maps/bubble-maps/2015-07-11-bubble-map.html
new file mode 100644
index 00000000000..42144cbe1ab
--- /dev/null
+++ b/content/plotly_js/maps/bubble-maps/2015-07-11-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/2015-07-11-bubble_maps_plotlyjs_index.html b/content/plotly_js/maps/bubble-maps/2015-07-11-bubble_maps_plotlyjs_index.html
new file mode 100644
index 00000000000..2effd407915
--- /dev/null
+++ b/content/plotly_js/maps/bubble-maps/2015-07-11-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/bubble-maps/2015-08-12-USA-bubble-map.html b/content/plotly_js/maps/bubble-maps/2015-08-12-USA-bubble-map.html
new file mode 100644
index 00000000000..3ee9eae6601
--- /dev/null
+++ b/content/plotly_js/maps/bubble-maps/2015-08-12-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/choropleth-mapbox/2019-08-16-US_states.html b/content/plotly_js/maps/choropleth-mapbox/2019-08-16-US_states.html
new file mode 100644
index 00000000000..b87485c7ab3
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-mapbox/2019-08-16-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/2019-08-16-basic-choropleth1.html b/content/plotly_js/maps/choropleth-mapbox/2019-08-16-basic-choropleth1.html
new file mode 100644
index 00000000000..4dd495c25f1
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-mapbox/2019-08-16-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/2019-08-16-choropleth-geojson-object.html b/content/plotly_js/maps/choropleth-mapbox/2019-08-16-choropleth-geojson-object.html
new file mode 100644
index 00000000000..b95fc9463a3
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-mapbox/2019-08-16-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/2019-08-16-choropleth_plotly_js_index.html b/content/plotly_js/maps/choropleth-mapbox/2019-08-16-choropleth_plotly_js_index.html
new file mode 100644
index 00000000000..e759a0652c3
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-mapbox/2019-08-16-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-mapbox/2024-06-29-basic-mapbox.html b/content/plotly_js/maps/choropleth-mapbox/2024-06-29-basic-mapbox.html
new file mode 100644
index 00000000000..0df34d16597
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-mapbox/2024-06-29-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-maps/2015-07-11-choropleth-north-america.html b/content/plotly_js/maps/choropleth-maps/2015-07-11-choropleth-north-america.html
new file mode 100644
index 00000000000..c776d3660f4
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-maps/2015-07-11-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/2015-07-11-choropleth-world-robinson.html b/content/plotly_js/maps/choropleth-maps/2015-07-11-choropleth-world-robinson.html
new file mode 100644
index 00000000000..1035bb8550a
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-maps/2015-07-11-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 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/2015-08-11-US-pop-by-state-choropleth.html b/content/plotly_js/maps/choropleth-maps/2015-08-11-US-pop-by-state-choropleth.html
new file mode 100644
index 00000000000..dc4755bcf4b
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-maps/2015-08-11-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/2016-08-04-florida-counties.html b/content/plotly_js/maps/choropleth-maps/2016-08-04-florida-counties.html
new file mode 100644
index 00000000000..9ea84a72715
--- /dev/null
+++ b/content/plotly_js/maps/choropleth-maps/2016-08-04-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/2019-08-16-basic_density_mapbox.html b/content/plotly_js/maps/density-mapbox/2019-08-16-basic_density_mapbox.html
new file mode 100644
index 00000000000..6c168a37133
--- /dev/null
+++ b/content/plotly_js/maps/density-mapbox/2019-08-16-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/2019-08-16-density_plotly_js_index.html b/content/plotly_js/maps/density-mapbox/2019-08-16-density_plotly_js_index.html
new file mode 100644
index 00000000000..7bc025f8819
--- /dev/null
+++ b/content/plotly_js/maps/density-mapbox/2019-08-16-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/2019-08-16-earthquack_density.html b/content/plotly_js/maps/density-mapbox/2019-08-16-earthquack_density.html
new file mode 100644
index 00000000000..f5aae9ac2b0
--- /dev/null
+++ b/content/plotly_js/maps/density-mapbox/2019-08-16-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/2019-08-16-light-tile-mapbox.html b/content/plotly_js/maps/density-mapbox/2019-08-16-light-tile-mapbox.html
new file mode 100644
index 00000000000..ed0cd357636
--- /dev/null
+++ b/content/plotly_js/maps/density-mapbox/2019-08-16-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/2019-08-16-multi_density-mapbox.html b/content/plotly_js/maps/density-mapbox/2019-08-16-multi_density-mapbox.html
new file mode 100644
index 00000000000..31023bc4249
--- /dev/null
+++ b/content/plotly_js/maps/density-mapbox/2019-08-16-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/2019-09-02-access-token.html b/content/plotly_js/maps/fill-area-on-mapbox/2019-09-02-access-token.html
new file mode 100644
index 00000000000..dd3da713df2
--- /dev/null
+++ b/content/plotly_js/maps/fill-area-on-mapbox/2019-09-02-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/2019-09-02-fill-area_plotly_js_index.html b/content/plotly_js/maps/fill-area-on-mapbox/2019-09-02-fill-area_plotly_js_index.html
new file mode 100644
index 00000000000..2f563f4bf50
--- /dev/null
+++ b/content/plotly_js/maps/fill-area-on-mapbox/2019-09-02-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/2019-09-02-geojson_layers.html b/content/plotly_js/maps/fill-area-on-mapbox/2019-09-02-geojson_layers.html
new file mode 100644
index 00000000000..c29ed77db76
--- /dev/null
+++ b/content/plotly_js/maps/fill-area-on-mapbox/2019-09-02-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/2019-09-02-multi-filled-area.html b/content/plotly_js/maps/fill-area-on-mapbox/2019-09-02-multi-filled-area.html
new file mode 100644
index 00000000000..600fa264ee2
--- /dev/null
+++ b/content/plotly_js/maps/fill-area-on-mapbox/2019-09-02-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/2015-07-11-lines_on_maps_plotly_js_index.html b/content/plotly_js/maps/lines-on-maps/2015-07-11-lines_on_maps_plotly_js_index.html
new file mode 100644
index 00000000000..b22ea5adaa4
--- /dev/null
+++ b/content/plotly_js/maps/lines-on-maps/2015-07-11-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/2015-08-12-flightpath-london-to-nyc.html b/content/plotly_js/maps/lines-on-maps/2015-08-12-flightpath-london-to-nyc.html
new file mode 100644
index 00000000000..7c831309570
--- /dev/null
+++ b/content/plotly_js/maps/lines-on-maps/2015-08-12-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/2015-08-12-us-flight-paths-map.html b/content/plotly_js/maps/lines-on-maps/2015-08-12-us-flight-paths-map.html
new file mode 100644
index 00000000000..153c32d5cd2
--- /dev/null
+++ b/content/plotly_js/maps/lines-on-maps/2015-08-12-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/lines-on-maps/2015-11-07-lines-on-orthographic.html b/content/plotly_js/maps/lines-on-maps/2015-11-07-lines-on-orthographic.html
new file mode 100644
index 00000000000..53767f2a271
--- /dev/null
+++ b/content/plotly_js/maps/lines-on-maps/2015-11-07-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/mapbox-layers/2019-08-16-Open-street-map.html b/content/plotly_js/maps/mapbox-layers/2019-08-16-Open-street-map.html
new file mode 100644
index 00000000000..30569ab159e
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/2019-08-16-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/2019-08-16-access-token.html b/content/plotly_js/maps/mapbox-layers/2019-08-16-access-token.html
new file mode 100644
index 00000000000..aa232bf04fe
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/2019-08-16-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/2019-08-16-dark-tile.html b/content/plotly_js/maps/mapbox-layers/2019-08-16-dark-tile.html
new file mode 100644
index 00000000000..8c9fc5d2505
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/2019-08-16-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/2019-08-16-environment_canada.html b/content/plotly_js/maps/mapbox-layers/2019-08-16-environment_canada.html
new file mode 100644
index 00000000000..9d2086ec376
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/2019-08-16-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/2019-08-16-how-layers-work.html b/content/plotly_js/maps/mapbox-layers/2019-08-16-how-layers-work.html
new file mode 100644
index 00000000000..4c533908be2
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/2019-08-16-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/2019-08-16-specify-a-base-map.html b/content/plotly_js/maps/mapbox-layers/2019-08-16-specify-a-base-map.html
new file mode 100644
index 00000000000..229dfabcc58
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/2019-08-16-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/2019-08-16-white-bg.html b/content/plotly_js/maps/mapbox-layers/2019-08-16-white-bg.html
new file mode 100644
index 00000000000..425781cf1a8
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/2019-08-16-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/mapbox-layers/2019-08-20-mapbox-layers_plotly_js_index.html b/content/plotly_js/maps/mapbox-layers/2019-08-20-mapbox-layers_plotly_js_index.html
new file mode 100644
index 00000000000..3e36160d217
--- /dev/null
+++ b/content/plotly_js/maps/mapbox-layers/2019-08-20-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/maplibre-migration/2024-08-29-migrate-to-maplibre_plotly_js_index.html b/content/plotly_js/maps/maplibre-migration/2024-08-29-migrate-to-maplibre_plotly_js_index.html
new file mode 100644
index 00000000000..8105293a31d
--- /dev/null
+++ b/content/plotly_js/maps/maplibre-migration/2024-08-29-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/scatter-plot-on-maps/2015-07-11-canadian-cities.html b/content/plotly_js/maps/scatter-plot-on-maps/2015-07-11-canadian-cities.html
new file mode 100644
index 00000000000..40535e0c07a
--- /dev/null
+++ b/content/plotly_js/maps/scatter-plot-on-maps/2015-07-11-canadian-cities.html
@@ -0,0 +1,71 @@
+---
+name: Canadian Cities Map
+language: plotly_js
+suite: scatter-plots-on-maps
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var data = [{
+ type: 'scattergeo',
+ mode: 'markers+text',
+ text: [
+ 'Montreal', 'Toronto', 'Vancouver', 'Calgary', 'Edmonton',
+ 'Ottawa', 'Halifax', 'Victoria', 'Winnepeg', 'Regina'
+ ],
+ lon: [
+ -73.57, -79.24, -123.06, -114.1, -113.28,
+ -75.43, -63.57, -123.21, -97.13, -104.6
+ ],
+ lat: [
+ 45.5, 43.4, 49.13, 51.1, 53.34, 45.24,
+ 44.64, 48.25, 49.89, 50.45
+ ],
+ marker: {
+ size: 7,
+ color: [
+ '#bebada', '#fdb462', '#fb8072', '#d9d9d9', '#bc80bd',
+ '#b3de69', '#8dd3c7', '#80b1d3', '#fccde5', '#ffffb3'
+ ],
+ line: {
+ width: 1
+ }
+ },
+ name: 'Canadian cities',
+ textposition: [
+ 'top right', 'top left', 'top center', 'bottom right', 'top right',
+ 'top left', 'bottom right', 'bottom left', 'top right', 'top right'
+ ],
+}];
+
+var layout = {
+ title: {
+ text: 'Canadian cities',
+ font: {
+ family: 'Droid Serif, serif',
+ size: 16
+ }
+ },
+ geo: {
+ scope: 'north america',
+ resolution: 50,
+ lonaxis: {
+ 'range': [-130, -55]
+ },
+ lataxis: {
+ 'range': [40, 70]
+ },
+ showrivers: true,
+ rivercolor: '#fff',
+ showlakes: true,
+ lakecolor: '#fff',
+ showland: true,
+ landcolor: '#EAEAAE',
+ countrycolor: '#d3d3d3',
+ countrywidth: 1.5,
+ subunitcolor: '#d3d3d3'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+
diff --git a/content/plotly_js/maps/scatter-plot-on-maps/2015-07-11-scatter_maps_plotly_js_index.html b/content/plotly_js/maps/scatter-plot-on-maps/2015-07-11-scatter_maps_plotly_js_index.html
new file mode 100644
index 00000000000..a155923345b
--- /dev/null
+++ b/content/plotly_js/maps/scatter-plot-on-maps/2015-07-11-scatter_maps_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to make D3.js-based scatter plots on maps in JavaScript. Scatter
+ plots on maps highlight geographic areas and can be colored by value.
+display_as: maps
+language: plotly_js
+layout: base
+name: Scatter Plots on Maps
+order: 7
+permalink: javascript/scatter-plots-on-maps/
+redirect_from: javascript-graphing-library/scatter-plots-on-maps/
+thumbnail: thumbnail/scatter-plot-on-maps.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","scatter-plots-on-maps" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/maps/scatter-plot-on-maps/2015-08-12-US-airport-map.html b/content/plotly_js/maps/scatter-plot-on-maps/2015-08-12-US-airport-map.html
new file mode 100644
index 00000000000..8eca7fd36be
--- /dev/null
+++ b/content/plotly_js/maps/scatter-plot-on-maps/2015-08-12-US-airport-map.html
@@ -0,0 +1,64 @@
+---
+name: US Airports Map
+language: plotly_js
+suite: scatter-plots-on-maps
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_february_us_airport_traffic.csv', function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+ var scl = [[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)']];
+
+ var data = [{
+ type:'scattergeo',
+ locationmode: 'USA-states',
+ lon: unpack(rows, 'long'),
+ lat: unpack(rows, 'lat'),
+ hoverinfor: unpack(rows, 'airport'),
+ text: unpack(rows, 'airport'),
+ mode: 'markers',
+ marker: {
+ size: 8,
+ opacity: 0.8,
+ reversescale: true,
+ autocolorscale: false,
+ symbol: 'square',
+ line: {
+ width: 1,
+ color: 'rgb(102,102,102)'
+ },
+ colorscale: scl,
+ cmin: 0,
+ color: unpack(rows, 'cnt'),
+ colorbar: {
+ title: {text: 'Incoming Flights February 2011'}
+ }
+ }
+ }];
+
+
+ var layout = {
+ title: {text: 'Most Trafficked US airports'},
+ colorbar: true,
+ geo: {
+ scope: 'usa',
+ projection: {
+ type: 'albers usa'
+ },
+ showland: true,
+ landcolor: 'rgb(250,250,250)',
+ subunitcolor: 'rgb(217,217,217)',
+ countrycolor: 'rgb(217,217,217)',
+ countrywidth: 0.5,
+ subunitwidth: 0.5
+ }
+ };
+
+ Plotly.newPlot("myDiv", data, layout, {showLink: false});
+
+});
diff --git a/content/plotly_js/maps/scatter-plot-on-maps/2015-08-15-north-america-percipitation-map.html b/content/plotly_js/maps/scatter-plot-on-maps/2015-08-15-north-america-percipitation-map.html
new file mode 100644
index 00000000000..72305d52738
--- /dev/null
+++ b/content/plotly_js/maps/scatter-plot-on-maps/2015-08-15-north-america-percipitation-map.html
@@ -0,0 +1,83 @@
+---
+name: North America Precipitation Map
+language: plotly_js
+suite: scatter-plots-on-maps
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+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]; });
+ }
+
+ scl = [[0, 'rgb(150,0,90)'],[0.125, 'rgb(0, 0, 200)'],[0.25,'rgb(0, 25, 255)'],[0.375,'rgb(0, 152, 255)'],[0.5,'rgb(44, 255, 150)'],[0.625,'rgb(151, 255, 0)'],[0.75,'rgb(255, 234, 0)'],[0.875,'rgb(255, 111, 0)'],[1,'rgb(255, 0, 0)']];
+
+ var data = [{
+ type: 'scattergeo',
+ mode: 'markers',
+ text: unpack(rows, 'Globvalue'),
+ lon: unpack(rows, 'Lon'),
+ lat: unpack(rows, 'Lat'),
+ marker: {
+ color: unpack(rows, 'Globvalue'),
+ colorscale: scl,
+ cmin: 0,
+ cmax: 1.4,
+ reversescale: true,
+ opacity: 0.2,
+ size: 2,
+ colorbar:{
+ thickness: 10,
+ title: {side:
+ 'right'
+ },
+ outlinecolor: 'rgba(68,68,68,0)',
+ ticks: 'outside',
+ ticklen: 3,
+ shoticksuffix: 'last',
+ ticksuffix: 'inches',
+ dtick: 0.1
+ }
+ },
+ name: 'NA Precipitation'
+ }];
+
+ var layout = {
+ geo:{
+ scope: 'north america',
+ showland: true,
+ landcolor: 'rgb(212,212,212)',
+ subunitcolor: 'rgb(255,255,255)',
+ countrycolor: 'rgb(255,255,255)',
+ showlakes: true,
+ lakecolor: 'rgb(255,255,255)',
+ showsubunits: true,
+ showcountries: true,
+ resolution: 50,
+ projection: {
+ type: 'conic conformal',
+ rotation: {
+ long: -100
+ }
+ },
+ },
+ longaxis: {
+ showgrid: true,
+ gridwidth: 0.5,
+ range: [ -140.0, -55.0 ],
+ dtick: 5
+ },
+ lataxis: {
+ showgrid: true,
+ gridwidth: 0.5,
+ range: [ 20.0, 60.0 ],
+ dtick: 5
+ },
+ title: {text: 'North America Precipitation'},
+ width: 600,
+ height: 600
+ };
+
+ Plotly.newPlot('myDiv', data, layout);
+ });
diff --git a/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_basic-mapbox.html b/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_basic-mapbox.html
new file mode 100644
index 00000000000..b8c3d7243d9
--- /dev/null
+++ b/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_basic-mapbox.html
@@ -0,0 +1,46 @@
+---
+name: Basic Example (Mapbox)
+language: plotly_js
+suite: scatter-tile-maps
+order: 10
+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:'scattermapbox',
+ lat:['45.5017'],
+ lon:['-73.5673'],
+ mode:'markers',
+ marker: {
+ size:14
+ },
+ text:['Montreal']
+}]
+
+var layout = {
+ autosize: true,
+ hovermode:'closest',
+ mapbox: {
+ bearing:0,
+ center: {
+ lat:45,
+ lon:-73
+ },
+ pitch:0,
+ zoom:5
+ },
+}
+
+Plotly.setPlotConfig({
+ mapboxAccessToken: "your access token"
+})
+
+Plotly.newPlot('myDiv', data, layout)
diff --git a/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_basic.html b/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_basic.html
new file mode 100644
index 00000000000..1e49a08baab
--- /dev/null
+++ b/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_basic.html
@@ -0,0 +1,35 @@
+---
+name: Basic Example
+language: plotly_js
+suite: scatter-tile-maps
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [{
+ type:'scattermap',
+ lat:['45.5017'],
+ lon:['-73.5673'],
+ mode:'markers',
+ marker: {
+ size:14
+ },
+ text:['Montreal']
+}]
+
+var layout = {
+ autosize: true,
+ hovermode:'closest',
+ map: {
+ bearing:0,
+ center: {
+ lat:45,
+ lon:-73
+ },
+ pitch:0,
+ zoom:5
+ },
+}
+
+Plotly.newPlot('myDiv', data, layout)
diff --git a/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_colorscale.html b/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_colorscale.html
new file mode 100644
index 00000000000..9696a6a3464
--- /dev/null
+++ b/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_colorscale.html
@@ -0,0 +1,72 @@
+---
+name: Adding Colorscale to Maps
+language: plotly_js
+suite: scatter-tile-maps
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+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]; });
+ }
+
+ scl = [[0, 'rgb(150,0,90)'],[0.125, 'rgb(0, 0, 200)'],[0.25,'rgb(0, 25, 255)'],[0.375,'rgb(0, 152, 255)'],[0.5,'rgb(44, 255, 150)'],[0.625,'rgb(151, 255, 0)'],[0.75,'rgb(255, 234, 0)'],[0.875,'rgb(255, 111, 0)'],[1,'rgb(255, 0, 0)']];
+
+ var data = [{
+ type: 'scattermap',
+ mode: 'markers',
+ text: unpack(rows, 'Globvalue'),
+ lon: unpack(rows, 'Lon'),
+ lat: unpack(rows, 'Lat'),
+ marker: {
+ color: unpack(rows, 'Globvalue'),
+ colorscale: scl,
+ cmin: 0,
+ cmax: 1.4,
+ reversescale: true,
+ opacity: 0.5,
+ size: 3,
+ colorbar:{
+ thickness: 10,
+ title: {side:
+ 'right'
+ },
+ outlinecolor: 'rgba(68,68,68,0)',
+ ticks: 'outside',
+ ticklen: 3,
+ shoticksuffix: 'last',
+ ticksuffix: 'inches',
+ dtick: 0.1
+ }
+ },
+ name: 'NA Precipitation'
+ }];
+
+ layout = {
+ dragmode: 'zoom',
+ map: {
+ center: {
+ lat: 38.03697222,
+ lon: -90.70916722
+ },
+ domain: {
+ x: [0, 1],
+ y: [0, 1]
+ },
+ style: 'light',
+ zoom: 3
+ },
+ margin: {
+ r: 0,
+ t: 0,
+ b: 0,
+ l: 0,
+ pad: 0
+ },
+ showlegend: false
+ };
+
+ Plotly.newPlot('myDiv', data, layout);
+ });
diff --git a/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_lines.html b/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_lines.html
new file mode 100644
index 00000000000..8b4f827d9b6
--- /dev/null
+++ b/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_lines.html
@@ -0,0 +1,71 @@
+---
+name: Adding Lines to Maps
+language: plotly_js
+suite: scatter-tile-maps
+order: 4
+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: 'scattermap',
+ lon: [ startLongitude[i] , endLongitude[i] ],
+ lat: [ startLat[i] , endLat[i] ],
+ mode: 'lines',
+ line: {
+ width: 1,
+ color: 'red'
+ },
+ opacity: opacityValue
+ };
+
+ data.push(result);
+ };
+
+ layout = {
+ dragmode: 'zoom',
+ map: {
+ center: {
+ lat: 38.03697222,
+ lon: -90.70916722
+ },
+ domain: {
+ x: [0, 1],
+ y: [0, 1]
+ },
+ style: 'dark',
+ zoom: 2
+ },
+ margin: {
+ r: 0,
+ t: 0,
+ b: 0,
+ l: 0,
+ pad: 0
+ },
+ paper_bgcolor: '#191A1A',
+ plot_bgcolor: '#191A1A',
+ showlegend: false
+ };
+
+ Plotly.newPlot("myDiv", data, layout, {showLink: false});
+
+});
diff --git a/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_multiple.html b/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_multiple.html
new file mode 100644
index 00000000000..5205be9370e
--- /dev/null
+++ b/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_multiple.html
@@ -0,0 +1,70 @@
+---
+name: Multiple Markers
+language: plotly_js
+suite: scatter-tile-maps
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/bcdunbar/datasets/master/meteorites_subset.csv', function(err, rows){
+
+ var classArray = unpack(rows, 'class');
+ var classes = [...new Set(classArray)];
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+ var data = classes.map(function(classes) {
+ var rowsFiltered = rows.filter(function(row) {
+ return (row.class === classes);
+ });
+ return {
+ type: 'scattermap',
+ name: classes,
+ lat: unpack(rowsFiltered, 'reclat'),
+ lon: unpack(rowsFiltered, 'reclong')
+ };
+ });
+
+ var layout = {
+ title: {text: 'Meteorite Landing Locations'},
+ font: {
+ color: 'white'
+ },
+ dragmode: 'zoom',
+ map: {
+ center: {
+ lat: 38.03697222,
+ lon: -90.70916722
+ },
+ domain: {
+ x: [0, 1],
+ y: [0, 1]
+ },
+ style: 'dark',
+ zoom: 1
+ },
+ margin: {
+ r: 20,
+ t: 40,
+ b: 20,
+ l: 20,
+ pad: 0
+ },
+ paper_bgcolor: '#191A1A',
+ plot_bgcolor: '#191A1A',
+ showlegend: true,
+ annotations: [{
+ x: 0,
+ y: 0,
+ xref: 'paper',
+ yref: 'paper',
+ text: 'Source: NASA ',
+ showarrow: false
+ }]
+ };
+
+ Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_plotly_js_index.html b/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_plotly_js_index.html
new file mode 100644
index 00000000000..efef2c95699
--- /dev/null
+++ b/content/plotly_js/maps/scattermapbox/2017-08-01-scattermapbox_plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to make scatter plots on tile maps in Plotly.JS
+display_as: maps
+language: plotly_js
+layout: base
+name: Scatter Plots on Tile Maps
+order: 8
+permalink: javascript/scatter-tile-maps/
+redirect_from: javascript/scattermapbox/
+thumbnail: thumbnail/scatter-mapbox.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","scatter-tile-maps" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/maps/scattermapbox/2019-09-02-symbols.html b/content/plotly_js/maps/scattermapbox/2019-09-02-symbols.html
new file mode 100644
index 00000000000..a66df21a855
--- /dev/null
+++ b/content/plotly_js/maps/scattermapbox/2019-09-02-symbols.html
@@ -0,0 +1,28 @@
+---
+name: Set Marker Symbols
+language: plotly_js
+suite: scatter-tile-maps
+order: 5
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ This example uses [symbol attribute](https://plotly.com/javascript/reference/scattermap/#scattermap-marker-symbol) to set the marker symbol.
+---
+var data = [
+ {
+ type: "scattermap",
+ mode: "markers+text+lines",
+ lon: [-75, -80, -50],
+ lat: [45, 20, -20],
+ marker: { size: 20, symbol: ["bus", "harbor", "airport"] },
+ text: ["Bus", "Harbor", "Airport"],
+ textposition: "bottom right"
+ }
+];
+
+var layout = {
+ map: { style: "outdoors", zoom: 0.7 },
+ showlegend: false, height: 500, width: 700
+};
+
+Plotly.newPlot("myDiv", data, layout);
diff --git a/content/plotly_js/scientific/2017-02-24-plotly_js-scientific-index.html b/content/plotly_js/scientific/2017-02-24-plotly_js-scientific-index.html
new file mode 100644
index 00000000000..f4d7c6eff2b
--- /dev/null
+++ b/content/plotly_js/scientific/2017-02-24-plotly_js-scientific-index.html
@@ -0,0 +1,27 @@
+---
+permalink: javascript/scientific-charts/
+description: Plotly.js makes interactive, publication-quality graphs online. Examples of how to make scientific graphs such as heatmaps and contour plots.
+name: Scientific Charts
+layout: langindex
+language: plotly_js
+display_as: scientific
+thumbnail: thumbnail/mixed.jpg
+---
+
+
+
+
+
+
+
+
+
Plotly.js Scientific Charts
+
{{page.description}}
+ {% include layouts/dashplug.html %}
+
+
+
+
+ {% assign languagelist = site.posts | where:"language","plotly_js" | where:"display_as","scientific" | where: "layout","base" | sort: "order" %}
+ {% include posts/documentation_eg.html %}
diff --git a/content/plotly_js/scientific/carpet-contour/2017-05-16-add_contours.html b/content/plotly_js/scientific/carpet-contour/2017-05-16-add_contours.html
new file mode 100644
index 00000000000..03876167bcb
--- /dev/null
+++ b/content/plotly_js/scientific/carpet-contour/2017-05-16-add_contours.html
@@ -0,0 +1,69 @@
+---
+name: Add Contours
+language: plotly_js
+suite: contourcarpet
+order: 2
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+var trace1 = {
+ type: 'contourcarpet',
+ a: [0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3],
+ b: [4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6],
+ z: [1, 1.96, 2.56, 3.0625, 4, 5.0625, 1, 7.5625, 9, 12.25, 15.21, 14.0625],
+ autocontour: false,
+ contours: {
+ start: 1,
+ end: 14,
+ size: 1
+ },
+ line: {
+ width: 2,
+ smoothing: 0
+ },
+ colorbar: {
+ len: 0.4,
+ y: 0.25
+ }
+}
+
+var trace2 = {
+ type: 'carpet',
+ a: [0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3],
+ b: [4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6],
+ x: [2, 3, 4, 5, 2.2, 3.1, 4.1, 5.1, 1.5, 2.5, 3.5, 4.5],
+ y: [1, 1.4, 1.6, 1.75, 2, 2.5, 2.7, 2.75, 3, 3.5, 3.7, 3.75],
+ aaxis: {
+ tickprefix: "a = ",
+ smoothing: 0,
+ minorgridcount: 9,
+ type: 'linear'
+},
+ baxis: {
+ tickprefix: "b = ",
+ smoothing: 0,
+ minorgridcount: 9,
+ type: 'linear'
+ }
+}
+
+var layout = {
+ title: {
+ text: "Cheater plot with 1d input"
+ },
+ margin: {
+ t: 40, r: 30, b: 30, l: 30
+ },
+ yaxis: {
+ range: [0.388,4.361]
+ },
+ xaxis: {
+ range: [0.667,5.932]
+ }
+}
+
+var data = [trace1,trace2]
+
+Plotly.newPlot('myDiv', data, layout)
diff --git a/content/plotly_js/scientific/carpet-contour/2017-05-16-basic_contourcarpet.html b/content/plotly_js/scientific/carpet-contour/2017-05-16-basic_contourcarpet.html
new file mode 100644
index 00000000000..1fac3e8c30f
--- /dev/null
+++ b/content/plotly_js/scientific/carpet-contour/2017-05-16-basic_contourcarpet.html
@@ -0,0 +1,48 @@
+---
+name: Basic Carpet Plot
+language: plotly_js
+suite: contourcarpet
+order: 1
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+var trace1 = {
+ type: 'carpet',
+ a: [0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3],
+ b: [4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6],
+ x: [2, 3, 4, 5, 2.2, 3.1, 4.1, 5.1, 1.5, 2.5, 3.5, 4.5],
+ y: [1, 1.4, 1.6, 1.75, 2, 2.5, 2.7, 2.75, 3, 3.5, 3.7, 3.75],
+ aaxis: {
+ tickprefix: "a = ",
+ smoothing: 0,
+ minorgridcount: 9,
+ type: 'linear'
+},
+ baxis: {
+ tickprefix: "b = ",
+ smoothing: 0,
+ minorgridcount: 9,
+ type: 'linear'
+ }
+}
+
+var layout = {
+ title: {
+ text: "Cheater plot with 1d input"
+ },
+ margin: {
+ t: 40, r: 30, b: 30, l: 30
+ },
+ yaxis: {
+ range: [0.388,4.361]
+ },
+ xaxis: {
+ range: [0.667,5.932]
+ }
+}
+
+var data = [trace1]
+
+Plotly.newPlot('myDiv', data, layout)
diff --git a/content/plotly_js/scientific/carpet-contour/2017-05-16-contourcarpet_index.html b/content/plotly_js/scientific/carpet-contour/2017-05-16-contourcarpet_index.html
new file mode 100644
index 00000000000..25d2904f137
--- /dev/null
+++ b/content/plotly_js/scientific/carpet-contour/2017-05-16-contourcarpet_index.html
@@ -0,0 +1,13 @@
+---
+description: How to make D3.js-based carpet contour plots in Plotly.js.
+display_as: scientific
+language: plotly_js
+layout: base
+name: Carpet Contour Plot
+order: 11
+permalink: javascript/carpet-contour/
+thumbnail: thumbnail/contourcarpet.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","contourcarpet" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/scientific/carpet-contour/2017-05-16-mulitple_contourcarpet.html b/content/plotly_js/scientific/carpet-contour/2017-05-16-mulitple_contourcarpet.html
new file mode 100644
index 00000000000..d8c00502812
--- /dev/null
+++ b/content/plotly_js/scientific/carpet-contour/2017-05-16-mulitple_contourcarpet.html
@@ -0,0 +1,189 @@
+---
+name: Add Multiple Traces
+language: plotly_js
+suite: contourcarpet
+order: 3
+sitemap: false
+arrangement: horizontal
+description:
+---
+function Get(url){
+ var Httpreq = new XMLHttpRequest();
+ Httpreq.open("GET",url,false);
+ Httpreq.send(null);
+ return Httpreq.responseText;
+}
+
+var json_obj = JSON.parse(Get("https://raw.githubusercontent.com/bcdunbar/datasets/master/airfoil_data.json"));
+
+var trace1 = {
+ a: json_obj[0].a,
+ b: json_obj[0].b,
+ baxis: {
+ startline: false,
+ endline: false,
+ showticklabels: "none",
+ smoothing: 0,
+ showgrid: false
+ },
+ x: json_obj[0].x,
+ y: json_obj[0].y,
+ type: "carpet",
+ aaxis:{
+ startlinewidth: 2,
+ startline: true,
+ showticklabels: "none",
+ endline: true,
+ showgrid: false,
+ endlinewidth: 2,
+ smoothing: 0
+ }
+ }
+
+ var trace2 = {
+ autocolorscale: false,
+ zmax: 1,
+ name: "Pressure",
+ colorscale: "Viridis",
+ zmin: -8,
+ colorbar: {
+ y: 0,
+ yanchor: "bottom",
+ title: {side:
+ 'right'
+ },
+ len: 0.75,
+ title: {
+ text: "Pressure coefficient, cp "
+ },
+ },
+ contours: {
+ start: -1,
+ size: 0.025,
+ end: 1.000,
+ showlines: false
+ },
+ line: {
+ smoothing: 0
+ },
+ z: json_obj[1].z,
+ type: "contourcarpet",
+ autocontour: false,
+ zauto: false
+ }
+
+ var trace3 = {
+ opacity: 0.300,
+ showlegend: true,
+ name: "Streamlines",
+ autocontour: true,
+ ncontours: 50,
+ contours: {
+ coloring: "none"
+ },
+ line: {
+ color: "white",
+ width: 1
+ },
+ z: json_obj[2].z,
+ type: "contourcarpet"
+ }
+
+ var trace4 = {
+ showlegend: true,
+ name: "PressureCarpet Scatter Plots or to add contours see Carpet Contour Plots
+---
diff --git a/content/plotly_js/scientific/carpet/2017-05-16-set_coordinates.html b/content/plotly_js/scientific/carpet/2017-05-16-set_coordinates.html
new file mode 100644
index 00000000000..65de33a62f9
--- /dev/null
+++ b/content/plotly_js/scientific/carpet/2017-05-16-set_coordinates.html
@@ -0,0 +1,17 @@
+---
+name: Set X and Y Coordinates
+language: plotly_js
+suite: carpet
+order: 1
+sitemap: false
+arrangement: horizontal
+description:
+---
+var data = {
+ type: 'carpet',
+ y: [2, 3.5, 4, 3, 4.5, 5, 5.5, 6.5, 7.5, 8, 8.5, 10]
+}
+
+var data = [data]
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/scientific/carpet/2017-05-16-styled_carpet.html b/content/plotly_js/scientific/carpet/2017-05-16-styled_carpet.html
new file mode 100644
index 00000000000..3f5469d0791
--- /dev/null
+++ b/content/plotly_js/scientific/carpet/2017-05-16-styled_carpet.html
@@ -0,0 +1,41 @@
+---
+name: Style A and B axis
+language: plotly_js
+suite: carpet
+order: 4
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+var trace1 = {
+ type: "carpet",
+ a: [4, 4, 4, 4.5, 4.5, 4.5, 5, 5, 5, 6, 6, 6],
+ b: [1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3],
+ y: [2, 3.5, 4, 3, 4.5, 5, 5.5, 6.5, 7.5, 8, 8.5, 10],
+ aaxis: {
+ tickprefix: 'a = ',
+ ticksuffix: 'm',
+ smoothing: 1,
+ minorgridcount: 9,
+ minorgridcolor: 'white',
+ gridcolor: 'white',
+ color: 'white'
+ },
+ baxis: {
+ tickprefix: 'b = ',
+ ticksuffix: 'pa',
+ smoothing: 1,
+ minorgridcount: 9,
+ minorgridcolor: 'white',
+ gridcolor: 'white',
+ color: 'white'
+ }
+}
+
+var layout = {
+ plot_bgcolor: 'black',
+ paper_bgcolor: 'black'
+}
+
+Plotly.newPlot('myDiv', [trace1], layout)
diff --git a/content/plotly_js/scientific/contour/2015-04-09-contour_plotly_js_index.html b/content/plotly_js/scientific/contour/2015-04-09-contour_plotly_js_index.html
new file mode 100644
index 00000000000..8eb71c59c82
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-04-09-contour_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to make a D3.js-based contour plot in javascript. Examples of contour
+ plots of matrices with subplots, custom color-scales, and smoothing.
+display_as: scientific
+language: plotly_js
+layout: base
+name: Contour Plots
+order: 1
+page_type: example_index
+permalink: javascript/contour-plots/
+redirect_from: javascript-graphing-library/contour-plots/
+thumbnail: thumbnail/contour.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","contour" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/scientific/contour/2015-04-09-simple-contour.html b/content/plotly_js/scientific/contour/2015-04-09-simple-contour.html
new file mode 100644
index 00000000000..848434a750d
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-04-09-simple-contour.html
@@ -0,0 +1,31 @@
+---
+name: Simple Contour Plot
+language: plotly_js
+suite: contour
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var size = 100, x = new Array(size), y = new Array(size), z = new Array(size), i, j;
+
+for(var i = 0; i < size; i++) {
+ x[i] = y[i] = -2 * Math.PI + 4 * Math.PI * i / size;
+ z[i] = new Array(size);
+}
+
+for(var i = 0; i < size; i++) {
+ for(j = 0; j < size; j++) {
+ var r2 = x[i]*x[i] + y[j]*y[j];
+ z[i][j] = Math.sin(x[i]) * Math.cos(y[j]) * Math.sin(r2) / Math.log(r2+1);
+ }
+}
+
+var data = [ {
+ z: z,
+ x: x,
+ y: y,
+ type: 'contour'
+ }
+];
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/scientific/contour/2015-08-10-basic-contour.html b/content/plotly_js/scientific/contour/2015-08-10-basic-contour.html
new file mode 100644
index 00000000000..06ac1a5e057
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-10-basic-contour.html
@@ -0,0 +1,26 @@
+---
+name: Basic Contour Plot
+language: plotly_js
+suite: contour
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [ {
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5.0, 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour'
+ }
+];
+
+var layout = {
+ title: {
+ text: 'Basic Contour Plot'
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2015-08-12-color-bar-size-for-contour-plots.html b/content/plotly_js/scientific/contour/2015-08-12-color-bar-size-for-contour-plots.html
new file mode 100644
index 00000000000..0bc303da534
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-12-color-bar-size-for-contour-plots.html
@@ -0,0 +1,32 @@
+---
+name: Color Bar Size
+language: plotly_js
+suite: contour
+order: 12
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [ {
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5., 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour',
+ colorbar:{
+ thickness: 75,
+ thicknessmode: 'pixels',
+ len: 0.9,
+ lenmode: 'fraction',
+ outlinewidth: 0
+ }
+}];
+
+var layout = {
+ title: {
+ text: 'Colorbar Size for Contour Plots'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2015-08-12-color-bar-title.html b/content/plotly_js/scientific/contour/2015-08-12-color-bar-title.html
new file mode 100644
index 00000000000..0bc69b96e3f
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-12-color-bar-title.html
@@ -0,0 +1,34 @@
+---
+name: Color Bar Title
+language: plotly_js
+suite: contour
+order: 11
+sitemap: false
+arrangement: horizontal
+---
+var data = [ {
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5., 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour',
+ colorbar:{
+ title: {
+ text: 'Color Bar Title',
+ side: 'right',
+ font: {
+ size: 14,
+ family: 'Arial, sans-serif'
+ }
+ }
+ }
+}];
+
+var layout = {
+ title: {
+ text: 'Colorbar with a Title'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2015-08-12-colorscale-for-contour-plot.html b/content/plotly_js/scientific/contour/2015-08-12-colorscale-for-contour-plot.html
new file mode 100644
index 00000000000..c299d2d6fbe
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-12-colorscale-for-contour-plot.html
@@ -0,0 +1,26 @@
+---
+name: Colorscale for Contour Plot
+language: plotly_js
+suite: contour
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [{
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5., 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour',
+ colorscale: 'Jet',
+}];
+
+var layout = {
+ title: {
+ text: 'Colorscale for Contour Plot'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2015-08-12-connect-gaps-in-matrix-contour.html b/content/plotly_js/scientific/contour/2015-08-12-connect-gaps-in-matrix-contour.html
new file mode 100644
index 00000000000..84f86c588e8
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-12-connect-gaps-in-matrix-contour.html
@@ -0,0 +1,93 @@
+---
+name: Connect the Gaps between Null Values in the Z Matrix
+language: plotly_js
+suite: contour
+order: 7
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ z: [[null, null, null, 12, 13, 14, 15, 16],
+ [null, 1, null, 11, null, null, null, 17],
+ [null, 2, 6, 7, null, null, null, 18],
+ [null, 3, null, 8, null, null, null, 19],
+ [5, 4, 10, 9, null, null, null, 20],
+ [null, null, null, 27, null, null, null, 21],
+ [null, null, null, 26, 25, 24, 23, 22]],
+ type: 'contour',
+ showscale: false,
+ xaxis: 'x1',
+ yaxis: 'y1'
+};
+
+var trace2 = {
+ z: [[null, null, null, 12, 13, 14, 15, 16],
+ [null, 1, null, 11, null, null, null, 17],
+ [null, 2, 6, 7, null, null, null, 18],
+ [null, 3, null, 8, null, null, null, 19],
+ [5, 4, 10, 9, null, null, null, 20],
+ [null, null, null, 27, null, null, null, 21],
+ [null, null, null, 26, 25, 24, 23, 22]],
+ connectgaps: true,
+ type: 'contour',
+ showscale: false,
+ xaxis: 'x2',
+ yaxis: 'y2'
+};
+
+var trace3 = {
+ z: [[null, null, null, 12, 13, 14, 15, 16],
+ [null, 1, null, 11, null, null, null, 17],
+ [null, 2, 6, 7, null, null, null, 18],
+ [null, 3, null, 8, null, null, null, 19],
+ [5, 4, 10, 9, null, null, null, 20],
+ [null, null, null, 27, null, null, null, 21],
+ [null, null, null, 26, 25, 24, 23, 22]],
+ zsmooth: 'best',
+ type: 'heatmap',
+ showscale: false,
+ xaxis: 'x3',
+ yaxis: 'y3'
+};
+
+var trace4 = {
+ z: [[null, null, null, 12, 13, 14, 15, 16],
+ [null, 1, null, 11, null, null, null, 17],
+ [null, 2, 6, 7, null, null, null, 18],
+ [null, 3, null, 8, null, null, null, 19],
+ [5, 4, 10, 9, null, null, null, 20],
+ [null, null, null, 27, null, null, null, 21],
+ [null, null, null, 26, 25, 24, 23, 22]],
+ zsmooth: 'best',
+ type: 'heatmap',
+ showscale: false,
+ connectgaps: true,
+ xaxis: 'x4',
+ yaxis: 'y4'
+};
+
+var data = [trace1, trace2, trace3, trace4];
+
+var layout = {
+ title: {
+ text: 'Connect the Gaps Between Null Values in the Z Matrix'
+ },
+ xaxis: {domain: [0, 0.45],
+ anchor: 'y1'},
+ yaxis: {domain: [0.55, 1],
+ anchor: 'x1'},
+ xaxis2: {domain: [0.55, 1],
+ anchor: 'y2'},
+ yaxis2: {domain: [0.55, 1],
+ anchor: 'x2'},
+ xaxis3: {domain: [0, 0.45],
+ anchor: 'y3'},
+ yaxis3: {domain: [0, 0.45],
+ anchor: 'x3'},
+ xaxis4: {domain: [0.55, 1],
+ anchor: 'y4'},
+ yaxis4: {domain: [0, 0.45],
+ anchor: 'x4'}
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2015-08-12-contour-lines.html b/content/plotly_js/scientific/contour/2015-08-12-contour-lines.html
new file mode 100644
index 00000000000..20e3ba0a961
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-12-contour-lines.html
@@ -0,0 +1,28 @@
+---
+name: Contour Lines
+language: plotly_js
+suite: contour
+order: 9
+sitemap: false
+arrangement: horizontal
+---
+var data = [ {
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5., 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour',
+ colorscale: 'Jet',
+ contours:{
+ coloring: 'lines'
+ }
+}];
+
+var layout = {
+ title: {
+ text: 'Contour Lines'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2015-08-12-cumtom-size-and-range-contour.html b/content/plotly_js/scientific/contour/2015-08-12-cumtom-size-and-range-contour.html
new file mode 100644
index 00000000000..086c133901c
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-12-cumtom-size-and-range-contour.html
@@ -0,0 +1,32 @@
+---
+name: Customizing Size and Range of a Contour Plot's Contours
+language: plotly_js
+suite: contour
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [ {
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5., 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour',
+ colorscale: 'Jet',
+ autocontour: false,
+ contours: {
+ start: 0,
+ end: 8,
+ size: 2
+ }
+}];
+
+var layout = {
+ title: {
+ text: 'Customizing Size and Range of Contours'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2015-08-12-custom-colorscale-for-contour-plot.html b/content/plotly_js/scientific/contour/2015-08-12-custom-colorscale-for-contour-plot.html
new file mode 100644
index 00000000000..92dc1e37e53
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-12-custom-colorscale-for-contour-plot.html
@@ -0,0 +1,27 @@
+---
+name: Custom Colorscale for Contour Plot
+language: plotly_js
+suite: contour
+order: 10
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [ {
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5., 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour',
+ colorscale: [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']]
+}
+];
+
+var layout = {
+ title: {
+ text: 'Custom Contour Plot Colorscale'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2015-08-12-customizing-spacing-between-x-and-y-ticks.html b/content/plotly_js/scientific/contour/2015-08-12-customizing-spacing-between-x-and-y-ticks.html
new file mode 100644
index 00000000000..f5ca487b622
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-12-customizing-spacing-between-x-and-y-ticks.html
@@ -0,0 +1,29 @@
+---
+name: Customizing Spacing Between X and Y Ticks
+language: plotly_js
+suite: contour
+order: 6
+sitemap: false
+arrangement: horizontal
+---
+var data = [ {
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5., 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour',
+ colorscale: 'Jet',
+ dx: 10,
+ x0: 5,
+ dy: 10,
+ y0: 10
+}];
+
+var layout = {
+ title: {
+ text: 'Customizing Spacing Between X and Y Axis Ticks'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2015-08-12-setting-xy-coordinates-contour.html b/content/plotly_js/scientific/contour/2015-08-12-setting-xy-coordinates-contour.html
new file mode 100644
index 00000000000..5ec10a793d6
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-12-setting-xy-coordinates-contour.html
@@ -0,0 +1,26 @@
+---
+name: Setting X and Y Coordinates in a Contour Plot
+language: plotly_js
+suite: contour
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+var data = [{
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5., 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ x: [-9, -6, -5 , -3, -1],
+ y: [0, 1, 4, 5, 7],
+ type: 'contour'
+}];
+
+var layout = {
+ title: {
+ text: 'Setting the X and Y Coordinates in a Contour Plot'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2015-08-12-smooth-contour-coloring.html b/content/plotly_js/scientific/contour/2015-08-12-smooth-contour-coloring.html
new file mode 100644
index 00000000000..4edd1f618e8
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-12-smooth-contour-coloring.html
@@ -0,0 +1,27 @@
+---
+name: Smooth Contour Coloring
+language: plotly_js
+suite: contour
+order: 9
+sitemap: false
+arrangement: horizontal
+---
+var data = [ {
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5., 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour',
+ contours: {
+ coloring: 'heatmap'
+ }
+}];
+
+var layout = {
+ title: {
+ text: 'Smooth Contour Coloring'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2015-08-12-smoothing-contour-lines.html b/content/plotly_js/scientific/contour/2015-08-12-smoothing-contour-lines.html
new file mode 100644
index 00000000000..530270c86e9
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-12-smoothing-contour-lines.html
@@ -0,0 +1,55 @@
+---
+name: Smoothing Contour Lines
+language: plotly_js
+suite: contour
+order: 8
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [ {
+ z: [[2, 4, 7, 12, 13, 14, 15, 16],
+ [3, 1, 6, 11, 12, 13, 16, 17],
+ [4, 2, 7, 7, 11, 14, 17, 18],
+ [5, 3, 8, 8, 13, 15, 18, 19],
+ [7, 4, 10, 9, 16, 18, 20, 19],
+ [9, 10, 5, 27, 23, 21, 21, 21],
+ [11, 14, 17, 26, 25, 24, 23, 22]],
+ type: 'contour',
+ line:{
+ smoothing: 0
+ },
+ xaxis: 'x1',
+ yaxis: 'y1'
+},
+{
+ z: [[2, 4, 7, 12, 13, 14, 15, 16],
+ [3, 1, 6, 11, 12, 13, 16, 17],
+ [4, 2, 7, 7, 11, 14, 17, 18],
+ [5, 3, 8, 8, 13, 15, 18, 19],
+ [7, 4, 10, 9, 16, 18, 20, 19],
+ [9, 10, 5, 27, 23, 21, 21, 21],
+ [11, 14, 17, 26, 25, 24, 23, 22]],
+ type: 'contour',
+ line:{
+ smoothing: 0.85
+ },
+ xaxis: 'x2',
+ yaxis: 'y2'
+}];
+
+var layout = {
+ title: {
+ text: 'Smoothing Contour Lines'
+ },
+ xaxis: {domain: [0, 0.45],
+ anchor: 'y1'},
+ yaxis: {domain: [0, 1],
+ anchor: 'x1'},
+ xaxis2: {domain: [0.55, 1],
+ anchor: 'y2'},
+ yaxis2: {domain: [0, 1],
+ anchor: 'x2'}
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2015-08-12-styling-color-bar-ticks-for-contour-plots.html b/content/plotly_js/scientific/contour/2015-08-12-styling-color-bar-ticks-for-contour-plots.html
new file mode 100644
index 00000000000..20fc2ad9254
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2015-08-12-styling-color-bar-ticks-for-contour-plots.html
@@ -0,0 +1,36 @@
+---
+name: Styling Color Bar Ticks for Contour Plots
+language: plotly_js
+suite: contour
+order: 13
+sitemap: false
+arrangement: horizontal
+---
+var data = [ {
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5., 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour',
+ colorbar:{
+ ticks: 'outside',
+ dtick: 1,
+ tickwidth: 2,
+ ticklen: 10,
+ tickcolor: 'grey',
+ showticklabels: true,
+ tickfont: {
+ size: 15
+ },
+ xpad: 50
+ }
+}];
+
+var layout = {
+ title: {
+ text: 'Styling Color Bar Ticks for Contour Plots'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/contour/2017-08-29-contour-line-labels.html b/content/plotly_js/scientific/contour/2017-08-29-contour-line-labels.html
new file mode 100644
index 00000000000..694f68e5097
--- /dev/null
+++ b/content/plotly_js/scientific/contour/2017-08-29-contour-line-labels.html
@@ -0,0 +1,34 @@
+---
+name: Contour Line Labels
+language: plotly_js
+suite: contour
+order: 9.5
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [ {
+ z: [[10, 10.625, 12.5, 15.625, 20],
+ [5.625, 6.25, 8.125, 11.25, 15.625],
+ [2.5, 3.125, 5.0, 8.125, 12.5],
+ [0.625, 1.25, 3.125, 6.25, 10.625],
+ [0, 0.625, 2.5, 5.625, 10]],
+ type: 'contour',
+ contours: {
+ coloring: 'heatmap',
+ showlabels: true,
+ labelfont: {
+ family: 'Raleway',
+ size: 12,
+ color: 'white',
+ }
+ }
+}];
+
+var layout = {
+ title: {
+ text: 'Contour with Labels'
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/heatmap/2015-04-09-basic-heatmap.html b/content/plotly_js/scientific/heatmap/2015-04-09-basic-heatmap.html
new file mode 100644
index 00000000000..9422646bd9a
--- /dev/null
+++ b/content/plotly_js/scientific/heatmap/2015-04-09-basic-heatmap.html
@@ -0,0 +1,16 @@
+---
+name: Basic Heatmap
+language: plotly_js
+suite: heatmap
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
+ type: 'heatmap'
+ }
+];
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/scientific/heatmap/2015-04-09-heatmap_plotly_js_index.html b/content/plotly_js/scientific/heatmap/2015-04-09-heatmap_plotly_js_index.html
new file mode 100644
index 00000000000..358720715db
--- /dev/null
+++ b/content/plotly_js/scientific/heatmap/2015-04-09-heatmap_plotly_js_index.html
@@ -0,0 +1,19 @@
+---
+description: How to make a D3.js-based heatmap in javascript with a matrix. Seven
+ examples of colored and labeled heatmaps with custom colorscales.
+display_as: scientific
+language: plotly_js
+layout: base
+name: Heatmaps
+order: 2
+page_type: example_index
+permalink: javascript/heatmaps/
+redirect_from:
+- javascript-graphing-library/heatmaps/
+- javascript-graphing-library/heatmap-webgl/
+- javascript/heatmap-webgl/
+thumbnail: thumbnail/heatmap.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","heatmap" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/scientific/heatmap/2015-04-09-labelled-heatmap.html b/content/plotly_js/scientific/heatmap/2015-04-09-labelled-heatmap.html
new file mode 100644
index 00000000000..19275880c91
--- /dev/null
+++ b/content/plotly_js/scientific/heatmap/2015-04-09-labelled-heatmap.html
@@ -0,0 +1,22 @@
+---
+name: Heatmap with Categorical Axis Labels
+language: plotly_js
+suite: heatmap
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+
+ In this example we also show how to ignore [hovertext](https://plotly.com/javascript/hover-text-and-formatting/) when we have missing values in the data by setting the [hoverongaps](https://plotly.com/javascript/reference/heatmap/#heatmap-hoverongaps) to False.
+---
+var data = [
+ {
+ z: [[1, null, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
+ x: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
+ y: ['Morning', 'Afternoon', 'Evening'],
+ type: 'heatmap',
+ hoverongaps: false
+ }
+];
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/scientific/heatmap/2015-08-10-annotated-heatmap.html b/content/plotly_js/scientific/heatmap/2015-08-10-annotated-heatmap.html
new file mode 100644
index 00000000000..8f8e2e0a09f
--- /dev/null
+++ b/content/plotly_js/scientific/heatmap/2015-08-10-annotated-heatmap.html
@@ -0,0 +1,80 @@
+---
+name: Annotated Heatmap
+language: plotly_js
+suite: heatmap
+order: 3
+sitemap: false
+arrangement: horizontals
+---
+var xValues = ['A', 'B', 'C', 'D', 'E'];
+
+var yValues = ['W', 'X', 'Y', 'Z'];
+
+var zValues = [
+ [0.00, 0.00, 0.75, 0.75, 0.00],
+ [0.00, 0.00, 0.75, 0.75, 0.00],
+ [0.75, 0.75, 0.75, 0.75, 0.75],
+ [0.00, 0.00, 0.00, 0.75, 0.00]
+];
+
+var colorscaleValue = [
+ [0, '#3D9970'],
+ [1, '#001f3f']
+];
+
+var data = [{
+ x: xValues,
+ y: yValues,
+ z: zValues,
+ type: 'heatmap',
+ colorscale: colorscaleValue,
+ showscale: false
+}];
+
+var layout = {
+ title: {
+ text: 'Annotated Heatmap'
+ },
+ annotations: [],
+ xaxis: {
+ ticks: '',
+ side: 'top'
+ },
+ yaxis: {
+ ticks: '',
+ ticksuffix: ' ',
+ width: 700,
+ height: 700,
+ autosize: false
+ }
+};
+
+for ( var i = 0; i < yValues.length; i++ ) {
+ for ( var j = 0; j < xValues.length; j++ ) {
+ var currentValue = zValues[i][j];
+ if (currentValue != 0.0) {
+ var textColor = 'white';
+ }else{
+ var textColor = 'black';
+ }
+ var result = {
+ xref: 'x1',
+ yref: 'y1',
+ x: xValues[j],
+ y: yValues[i],
+ text: zValues[i][j],
+ font: {
+ family: 'Arial',
+ size: 12,
+ color: 'rgb(50, 171, 96)'
+ },
+ showarrow: false,
+ font: {
+ color: textColor
+ }
+ };
+ layout.annotations.push(result);
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/heatmap/2015-08-12-heatmap-with-unequal-block-sizes.html b/content/plotly_js/scientific/heatmap/2015-08-12-heatmap-with-unequal-block-sizes.html
new file mode 100644
index 00000000000..5392dde5ba6
--- /dev/null
+++ b/content/plotly_js/scientific/heatmap/2015-08-12-heatmap-with-unequal-block-sizes.html
@@ -0,0 +1,113 @@
+---
+name: Heatmap with Unequal Block Sizes
+language: plotly_js
+suite: heatmap
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+function linspace(a,b,n) {
+ return d3.range(n).map(function(i){return a+i*(b-a)/(n-1);});
+}
+//number of spiral loops
+
+var nspiral = 2;
+
+// angle
+
+var th = linspace(((-Math.PI) / 13), (2 * Math.PI * nspiral), 1000);
+
+//Empty Value Containers
+
+var xValues = [];
+var yValues = [];
+var yShift = [];
+var finalX = [];
+var finalY = [];
+
+//spiral
+
+for(var i = 0; i < th.length; i++){
+ var a = 1.120529;
+ var b = 0.306349;
+ var r = a * Math.exp((-b) * th[i]);
+ var xResult = (r * Math.cos(th[i]));
+ var yResult = (r * Math.sin(th[i]));
+ xValues.push(xResult);
+ yValues.push(yResult);
+}
+
+function getMaxOfArray(numArray) {
+ return Math.max.apply(null, numArray);
+};
+
+function getMinOfArray(numArray) {
+ return Math.min.apply(null, numArray);
+};
+
+//Shift spiral north so that it is centered
+
+var yShift = (1.6 - (getMaxOfArray(yValues) - getMinOfArray(yValues))) / 2;
+
+var spiralTrace = {
+ x: xValues.map(function(xi) { return -(xi) + xValues[0]; }),
+ y: yValues.map(function(yi) { return yi - yValues[0] + yShift; }),
+ type: 'scatter',
+ line: {
+ color: 'white',
+ width: 3
+ }
+};
+
+//Build the rectangles as a heatmap and specify the edges of the heatmap squares
+
+var phi = (1 + Math.sqrt(5)) / 2;
+var xe = [0, 1, (1 + (1 / Math.pow(phi,4))), 1 + (1 / Math.pow(phi,3)), phi];
+var ye = [0, (1 / Math.pow(phi,3)), (1 / Math.pow(phi,3)) + (1 / Math.pow(phi,4)), (1 / Math.pow(phi,2)), 1];
+
+var zValues = [
+ [13, 3, 3, 5],
+ [13, 2, 1, 5],
+ [13, 10, 11, 12],
+ [13, 8, 8, 8]
+];
+
+var hm = {
+ x: xe,
+ y: ye.map(function(yi) { return yi + yShift; }),
+ z: zValues,
+ type: 'heatmap',
+ colorscale: 'Viridis'
+};
+
+var axisTemplate = {
+ range: [0, 1.6],
+ autorange: false,
+ showgrid: false,
+ zeroline: false,
+ linecolor: 'black',
+ showticklabels: false,
+ ticks: ''
+};
+
+var data = [spiralTrace, hm];
+
+var layout = {
+ title: {
+ text: 'Heatmap with Unequal Block Sizes'
+ },
+ margin: {
+ t: 200,
+ r: 200,
+ b: 200,
+ l: 200
+ },
+ xaxis: axisTemplate,
+ yaxis: axisTemplate,
+ showlegend: false,
+ width: 700,
+ height: 700,
+ autosize: false
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/log/2015-04-09-log_plotly_js_index.html b/content/plotly_js/scientific/log/2015-04-09-log_plotly_js_index.html
new file mode 100644
index 00000000000..12ea2b6969b
--- /dev/null
+++ b/content/plotly_js/scientific/log/2015-04-09-log_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to make a plot with D3.js-based logarithmic axes in javascript.
+display_as: scientific
+language: plotly_js
+layout: base
+name: Log Plots
+order: 5
+page_type: example_index
+permalink: javascript/log-plot/
+redirect_from: javascript-graphing-library/log-plot/
+thumbnail: thumbnail/log.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","log" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/scientific/log/2015-04-09-plotly-log-axes.html b/content/plotly_js/scientific/log/2015-04-09-plotly-log-axes.html
new file mode 100644
index 00000000000..c2eb1cbaf09
--- /dev/null
+++ b/content/plotly_js/scientific/log/2015-04-09-plotly-log-axes.html
@@ -0,0 +1,34 @@
+---
+name: Logarithmic Axes
+language: plotly_js
+suite: log
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
+ type: 'scatter'
+};
+
+var trace2 = {
+ x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
+ type: 'scatter'
+};
+
+var data = [trace1, trace2];
+
+var layout = {
+ xaxis: {
+ type: 'log',
+ autorange: true
+ },
+ yaxis: {
+ type: 'log',
+ autorange: true
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/parcoords/2017-03-06-adding_dimensions.html b/content/plotly_js/scientific/parcoords/2017-03-06-adding_dimensions.html
new file mode 100644
index 00000000000..f7c7f918c80
--- /dev/null
+++ b/content/plotly_js/scientific/parcoords/2017-03-06-adding_dimensions.html
@@ -0,0 +1,44 @@
+---
+name: Adding Dimensions
+language: plotly_js
+suite: parcoords
+order: 1
+sitemap: false
+arrangement: horizontal
+description:
+markdown_content: |
+ Parallel coordinates are richly interactive by default. Drag the lines along the axes to filter regions and drag the axis names across the plot to rearrange variables: 
+---
+
+var trace = {
+ type: 'parcoords',
+ line: {
+ color: 'blue'
+ },
+
+ dimensions: [{
+ range: [1, 5],
+ constraintrange: [1, 2],
+ label: 'A',
+ values: [1,4]
+ }, {
+ range: [1,5],
+ label: 'B',
+ values: [3,1.5],
+ tickvals: [1.5,3,4.5]
+ }, {
+ range: [1, 5],
+ label: 'C',
+ values: [2,4],
+ tickvals: [1,2,4,5],
+ ticktext: ['text 1','text 2','text 4','text 5']
+ }, {
+ range: [1, 5],
+ label: 'D',
+ values: [4,2]
+ }]
+};
+
+var data = [trace]
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/scientific/parcoords/2017-03-06-advanced_parcoords.html b/content/plotly_js/scientific/parcoords/2017-03-06-advanced_parcoords.html
new file mode 100644
index 00000000000..e2f94d111e8
--- /dev/null
+++ b/content/plotly_js/scientific/parcoords/2017-03-06-advanced_parcoords.html
@@ -0,0 +1,79 @@
+---
+name: Advanced Parallel Coordinates Plot
+language: plotly_js
+suite: parcoords
+order: 3
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+d3.csv('https://raw.githubusercontent.com/bcdunbar/datasets/master/parcoords_data.csv', function(err, rows){
+
+function unpack(rows, key) {
+ return rows.map(function(row) {
+ return row[key];
+ });
+}
+
+var data = [{
+ type: 'parcoords',
+ line: {
+ showscale: true,
+ reversescale: true,
+ colorscale: 'Jet',
+ cmin: -4000,
+ cmax: -100,
+ color: unpack(rows, 'colorVal')
+ },
+
+ dimensions: [{
+ constraintrange: [100000, 150000],
+ range: [32000, 227900],
+ label: 'Block height',
+ values: unpack(rows, 'blockHeight')
+ }, {
+ range: [0, 700000],
+ label: 'Block width',
+ values: unpack(rows, 'blockWidth')
+ }, {
+ label: 'Cylinder material',
+ tickvals: [0, 0.5, 1, 2, 3],
+ ticktext: ['A', 'AB', 'B', 'Y', 'Z'],
+ values: unpack(rows, 'cycMaterial')
+ }, {
+ label: 'Block material',
+ tickvals: [0, 1, 2, 3],
+ range: [-1, 4],
+ values: unpack(rows, 'blockMaterial')
+ }, {
+ range: [134, 3154],
+ label: 'Total weight',
+ visible: true,
+ values: unpack(rows, 'totalWeight')
+ }, {
+ range: [9, 19984],
+ label: 'Assembly penalty weight',
+ values: unpack(rows, 'assemblyPW')
+ }, {
+ range: [49000, 568000],
+ label: 'Height st width',
+ values: unpack(rows, 'HstW')
+ }, {
+ range: [-28000, 196430],
+ label: 'Min height width',
+ values: unpack(rows, 'minHW')
+ }, {
+ range: [98453, 501789],
+ label: 'Min width diameter',
+ values: unpack(rows, 'minWD')
+ }, {
+ range: [1417, 107154],
+ label: 'RF block',
+ values: unpack(rows, 'rfBlock')
+ }]
+}];
+
+Plotly.newPlot('myDiv', data);
+
+});
diff --git a/content/plotly_js/scientific/parcoords/2017-03-06-basic_parcoords.html b/content/plotly_js/scientific/parcoords/2017-03-06-basic_parcoords.html
new file mode 100644
index 00000000000..2658f8da508
--- /dev/null
+++ b/content/plotly_js/scientific/parcoords/2017-03-06-basic_parcoords.html
@@ -0,0 +1,53 @@
+---
+name: Basic Parallel Coordinates Plot
+language: plotly_js
+suite: parcoords
+order: 2
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+d3.csv('https://raw.githubusercontent.com/bcdunbar/datasets/master/iris.csv', function(err, rows){
+
+function unpack(rows, key) {
+ return rows.map(function(row) {
+ return row[key];
+ });
+}
+
+var data = [{
+ type: 'parcoords',
+ pad: [80,80,80,80],
+ line: {
+ color: unpack(rows, 'species_id'),
+ colorscale: [[0, 'red'], [0.5, 'green'], [1, 'blue']]
+ },
+
+ dimensions: [{
+ range: [2, 4.5],
+ label: 'sepal_width',
+ values: unpack(rows, 'sepal_width')
+ }, {
+ constraintrange: [5, 6],
+ range: [4,8],
+ label: 'sepal_length',
+ values: unpack(rows, 'sepal_length')
+ }, {
+ label: 'petal_width',
+ range: [0, 2.5],
+ values: unpack(rows, 'petal_width')
+ }, {
+ label: 'petal_length',
+ range: [1, 7],
+ values: unpack(rows, 'petal_length')
+ }]
+}];
+
+var layout = {
+ width: 800
+};
+
+Plotly.newPlot('myDiv', data, layout);
+
+});
diff --git a/content/plotly_js/scientific/parcoords/2017-03-06-parcoords_index.html b/content/plotly_js/scientific/parcoords/2017-03-06-parcoords_index.html
new file mode 100644
index 00000000000..eafcf6764e5
--- /dev/null
+++ b/content/plotly_js/scientific/parcoords/2017-03-06-parcoords_index.html
@@ -0,0 +1,14 @@
+---
+description: How to make D3.js-based parallel coordinates plots in Plotly.js.
+display_as: scientific
+language: plotly_js
+layout: base
+name: Parallel Coordinates Plot
+order: 4
+page_type: example_index
+permalink: javascript/parallel-coordinates-plot/
+thumbnail: thumbnail/parcoords.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","parcoords" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/scientific/parcoords/2017-09-13-annotated_parcoords.html b/content/plotly_js/scientific/parcoords/2017-09-13-annotated_parcoords.html
new file mode 100644
index 00000000000..6878b28f183
--- /dev/null
+++ b/content/plotly_js/scientific/parcoords/2017-09-13-annotated_parcoords.html
@@ -0,0 +1,61 @@
+---
+name: Annotated Parallel Coordinates Plot
+language: plotly_js
+suite: parcoords
+order: 2.5
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/iris-id.csv', function(err, rows){
+
+function unpack(rows, key) {
+ return rows.map(function(row) {
+ return row[key];
+ });
+}
+
+var data = [{
+ type: 'parcoords',
+ pad: [80,80,80,80],
+ line: {
+ color: unpack(rows, 'species_id'),
+ colorscale: [[0, 'red'], [0.5, 'green'], [1, 'blue']]
+ },
+
+ dimensions: [{
+ range: [2, 4.5],
+ label: 'sepal_width',
+ values: unpack(rows, 'sepal_width')
+ }, {
+ constraintrange: [5, 6],
+ range: [4,8],
+ label: 'sepal_length',
+ values: unpack(rows, 'sepal_length')
+ }, {
+ label: 'petal_width',
+ range: [0, 2.5],
+ values: unpack(rows, 'petal_width')
+ }, {
+ label: 'petal_length',
+ range: [1, 7],
+ values: unpack(rows, 'petal_length')
+ }]
+}];
+
+var layout = {
+ width: 800,
+ annotations: [
+ {showarrow: false,
+ text: 'Higher sepal width',
+ x: 0, y: 1, xref: 'paper', yref: 'paper'},
+ {showarrow: false,
+ text: 'Lower petal width and length',
+ x: 0.9, y: .25, xref: 'paper', yref: 'paper'
+ }]
+};
+
+Plotly.newPlot('myDiv', data, layout);
+
+});
diff --git a/content/plotly_js/scientific/radar/2018-02-23-basic-radar.html b/content/plotly_js/scientific/radar/2018-02-23-basic-radar.html
new file mode 100644
index 00000000000..51f055fbeb9
--- /dev/null
+++ b/content/plotly_js/scientific/radar/2018-02-23-basic-radar.html
@@ -0,0 +1,27 @@
+---
+name: Basic Radar Chart
+language: plotly_js
+suite: radar
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+data = [{
+ type: 'scatterpolar',
+ r: [39, 28, 8, 7, 28, 39],
+ theta: ['A','B','C', 'D', 'E', 'A'],
+ fill: 'toself'
+}]
+
+layout = {
+ polar: {
+ radialaxis: {
+ visible: true,
+ range: [0, 50]
+ }
+ },
+ showlegend: false
+}
+
+Plotly.newPlot("myDiv", data, layout)
diff --git a/content/plotly_js/scientific/radar/2018-02-23-multiple-trace-radar.html b/content/plotly_js/scientific/radar/2018-02-23-multiple-trace-radar.html
new file mode 100644
index 00000000000..71a89ac4256
--- /dev/null
+++ b/content/plotly_js/scientific/radar/2018-02-23-multiple-trace-radar.html
@@ -0,0 +1,36 @@
+---
+name: Multiple Trace Radar Chart
+language: plotly_js
+suite: radar
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+data = [
+ {
+ type: 'scatterpolar',
+ r: [39, 28, 8, 7, 28, 39],
+ theta: ['A','B','C', 'D', 'E', 'A'],
+ fill: 'toself',
+ name: 'Group A'
+ },
+ {
+ type: 'scatterpolar',
+ r: [1.5, 10, 39, 31, 15, 1.5],
+ theta: ['A','B','C', 'D', 'E', 'A'],
+ fill: 'toself',
+ name: 'Group B'
+ }
+]
+
+layout = {
+ polar: {
+ radialaxis: {
+ visible: true,
+ range: [0, 50]
+ }
+ }
+}
+
+Plotly.newPlot("myDiv", data, layout)
diff --git a/content/plotly_js/scientific/radar/2018-02-23-radar-chart-plotlyjs-index.html b/content/plotly_js/scientific/radar/2018-02-23-radar-chart-plotlyjs-index.html
new file mode 100644
index 00000000000..b094187a2b6
--- /dev/null
+++ b/content/plotly_js/scientific/radar/2018-02-23-radar-chart-plotlyjs-index.html
@@ -0,0 +1,13 @@
+---
+description: How to make D3.js-based radar charts in Plotly.js.
+display_as: scientific
+language: plotly_js
+layout: base
+name: Radar Charts
+order: 8
+permalink: javascript/radar-chart/
+thumbnail: thumbnail/radar.gif
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","radar" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/scientific/scatterpolar/2018-02-13-area-polar-chart.html b/content/plotly_js/scientific/scatterpolar/2018-02-13-area-polar-chart.html
new file mode 100644
index 00000000000..4236155ea06
--- /dev/null
+++ b/content/plotly_js/scientific/scatterpolar/2018-02-13-area-polar-chart.html
@@ -0,0 +1,78 @@
+---
+name: Area Polar Chart
+language: plotly_js
+suite: scatterpolar
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+data = [
+ {
+ type: "scatterpolar",
+ mode: "lines",
+ r: [0, 1.5, 1.5, 0, 2.5, 2.5, 0],
+ theta: [0, 10, 25, 0, 205, 215, 0],
+ fill: "toself",
+ fillcolor: '#709BFF',
+ line: {
+ color: 'black'
+ }
+ },
+ {
+ type: "scatterpolar",
+ mode: "lines",
+ r: [0, 3.5, 3.5, 0],
+ theta: [0, 55, 75, 0],
+ fill: "toself",
+ fillcolor: '#E4FF87',
+ line: {
+ color: 'black'
+ }
+ },
+ {
+ type: "scatterpolar",
+ mode: "lines",
+ r: [0, 4.5, 4.5, 0, 4.5, 4.5, 0],
+ theta: [0, 100, 120, 0, 305, 320, 0],
+ fill: "toself",
+ fillcolor: '#FFAA70',
+ line: {
+ color: 'black'
+ }
+ },
+ {
+ type: "scatterpolar",
+ mode: "lines",
+ r: [0, 4, 4, 0],
+ theta: [0, 165, 195, 0],
+ fill: "toself",
+ fillcolor: '#FFDF70',
+ line: {
+ color: 'black'
+ }
+ },
+ {
+ type: "scatterpolar",
+ mode: "lines",
+ r: [0, 3, 3, 0],
+ theta: [0, 262.5, 277.5, 0],
+ fill: "toself",
+ fillcolor: '#B6FFB4',
+ line: {
+ color: 'black'
+ }
+ }
+]
+
+layout = {
+ polar: {
+ radialaxis: {
+ visible: true,
+ range: [0, 5]
+ }
+ },
+ showlegend: false
+}
+
+Plotly.newPlot('myDiv', data, layout)
diff --git a/content/plotly_js/scientific/scatterpolar/2018-02-13-categorical-polar-chart.html b/content/plotly_js/scientific/scatterpolar/2018-02-13-categorical-polar-chart.html
new file mode 100644
index 00000000000..f38ffadd78d
--- /dev/null
+++ b/content/plotly_js/scientific/scatterpolar/2018-02-13-categorical-polar-chart.html
@@ -0,0 +1,104 @@
+---
+name: Categorical Polar Chart
+language: plotly_js
+suite: scatterpolar
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [
+ {
+ type: "scatterpolar",
+ name: "angular categories",
+ r: [5, 4, 2, 4, 5],
+ theta: ["a", "b", "c", "d", "a"],
+ fill: "toself"
+ },
+ {
+ type: "scatterpolar",
+ name: "radial categories",
+ r: ["a", "b", "c", "d", "b", "f", "a"],
+ theta: [1, 4, 2, 1.5, 1.5, 6, 5],
+ thetaunit: "radians",
+ fill: "toself",
+ subplot: "polar2"
+ },
+ {
+ type: "scatterpolar",
+ name: "angular categories (w/ categoryarray)",
+ r: [5, 4, 2, 4, 5],
+ theta: ["a", "b", "c", "d", "a"],
+ fill: "toself",
+ subplot: "polar3"
+ },
+ {
+ type: "scatterpolar",
+ name: "radial categories (w/ category descending)",
+ r: ["a", "b", "c", "d", "b", "f", "a", "a"],
+ theta: [45, 90, 180, 200, 300, 15, 20, 45],
+ fill: "toself",
+ subplot: "polar4"
+ },
+ {
+ type: "scatterpolar",
+ name: "angular categories (w/ extra category)",
+ r: [5, 4, 2, 4, 5, 5],
+ theta: ["b", "c", "d", "e", "a", "b"],
+ fill: "toself"
+ }
+ ]
+
+var layout = {
+ polar: {
+ domain: {
+ x: [0, 0.46],
+ y: [0.56, 1]
+ },
+ radialaxis: {
+ angle: 45
+ },
+ angularaxis: {
+ direction: "clockwise",
+ period: 6
+ }
+ },
+ polar2: {
+ domain: {
+ x: [0, 0.46],
+ y: [0, 0.44]
+ },
+ radialaxis: {
+ angle: 180,
+ tickangle: -180
+ }
+ },
+ polar3: {
+ domain: {
+ x: [0.54, 1],
+ y: [0.56, 1]
+ },
+ sector: [150, 400],
+ radialaxis: {
+ angle: -45
+ },
+ angularaxis: {
+ categoryarray: ["d", "a", "c", "b"]
+ }
+ },
+ polar4: {
+ domain: {
+ x: [0.54, 1],
+ y: [0, 0.44]
+ },
+ radialaxis: {
+ categoryorder: "category descending"
+ },
+ angularaxis: {
+ thetaunit: "radians",
+ dtick: 0.3141592653589793
+ }
+ }
+ }
+
+Plotly.newPlot('myDiv', data, layout)
diff --git a/content/plotly_js/scientific/scatterpolar/2018-02-13-directions-polar-chart.html b/content/plotly_js/scientific/scatterpolar/2018-02-13-directions-polar-chart.html
new file mode 100644
index 00000000000..07412653e7d
--- /dev/null
+++ b/content/plotly_js/scientific/scatterpolar/2018-02-13-directions-polar-chart.html
@@ -0,0 +1,82 @@
+---
+name: Polar Chart Directions
+language: plotly_js
+suite: scatterpolar
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [
+ {
+ type: "scatterpolar",
+ mode: "lines+markers",
+ r: [1,2,3,4,5],
+ theta: [0,90,180,360,0],
+ line: {
+ color: "#ff66ab"
+ },
+ marker: {
+ color: "#8090c7",
+ symbol: "square",
+ size: 8
+ },
+ subplot: "polar"
+ },
+ {
+ type: "scatterpolar",
+ mode: "lines+markers",
+ r: [1,2,3,4,5],
+ theta: [0,90,180,360,0],
+ line: {
+ color: "#ff66ab"
+ },
+ marker: {
+ color: "#8090c7",
+ symbol: "square",
+ size: 8
+ },
+ subplot: "polar2"
+ }
+ ]
+
+var layout = {
+ showlegend: false,
+ polar: {
+ domain: {
+ x: [0,0.4],
+ y: [0,1]
+ },
+ radialaxis: {
+ tickfont: {
+ size: 8
+ }
+ },
+ angularaxis: {
+ tickfont: {
+ size: 8
+ },
+ rotation: 90,
+ direction: "counterclockwise"
+ }
+ },
+ polar2: {
+ domain: {
+ x: [0.6,1],
+ y: [0,1]
+ },
+ radialaxis: {
+ tickfont: {
+ size: 8
+ }
+ },
+ angularaxis: {
+ tickfont: {
+ size: 8
+ },
+ direction: "clockwise"
+ }
+ }
+ }
+
+Plotly.newPlot('myDiv', data, layout)
diff --git a/content/plotly_js/scientific/scatterpolar/2018-02-13-line-polar-chart.html b/content/plotly_js/scientific/scatterpolar/2018-02-13-line-polar-chart.html
new file mode 100644
index 00000000000..bae87b851ef
--- /dev/null
+++ b/content/plotly_js/scientific/scatterpolar/2018-02-13-line-polar-chart.html
@@ -0,0 +1,80 @@
+---
+name: Line Polar Plot
+language: plotly_js
+suite: scatterpolar
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/polar_dataset.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+var trace1 = {
+ r: unpack(rows, 'x1'),
+ theta: unpack(rows, 'y'),
+ mode: 'lines',
+ name: 'Figure8',
+ line: {color: 'peru'},
+ type: 'scatterpolar'
+};
+
+var trace2 = {
+ r: unpack(rows, 'x2'),
+ theta: unpack(rows, 'y'),
+ mode: 'lines',
+ name: 'Cardioid',
+ line: {color: 'darkviolet'},
+ type: 'scatterpolar'
+};
+
+var trace3 = {
+ r: unpack(rows, 'x3'),
+ theta: unpack(rows, 'y'),
+ mode: 'lines',
+ name: 'Hypercardioid',
+ line: {color: 'deepskyblue'},
+ type: 'scatterpolar'
+};
+
+var trace4 = {
+
+ r: unpack(rows, 'x4'),
+ theta: unpack(rows, 'y'),
+ mode: 'lines',
+ name: 'Subcardioid',
+ line: {color: 'orangered'},
+ type: 'scatterpolar'
+};
+
+var trace5 = {
+
+ r: unpack(rows, 'x5'),
+ theta: unpack(rows, 'y'),
+ mode: 'lines',
+ name: 'Supercardioid',
+ marker: {
+ color: 'none',
+ line: {color: 'green'}
+ },
+ type: 'scatterpolar'
+};
+
+var data = [trace1, trace2, trace3, trace4, trace5];
+
+var layout = {
+ title: {
+ text: 'Mic Patterns'
+ },
+ font: {
+ family: 'Arial, sans-serif;',
+ size: 12,
+ color: '#000'
+ },
+ showlegend: true,
+ orientation: -90
+};
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/scientific/scatterpolar/2018-02-13-scatterpolar-plotlyjs-index.html b/content/plotly_js/scientific/scatterpolar/2018-02-13-scatterpolar-plotlyjs-index.html
new file mode 100644
index 00000000000..d576ada0394
--- /dev/null
+++ b/content/plotly_js/scientific/scatterpolar/2018-02-13-scatterpolar-plotlyjs-index.html
@@ -0,0 +1,16 @@
+---
+description: How to make D3.js-based polar charts in Plotly.js.
+display_as: scientific
+language: plotly_js
+layout: base
+name: Polar Charts
+order: 12
+permalink: javascript/polar-chart/
+redirect_from:
+- javascript/legacy-polar-chart/
+- javascript-graphing-library/polar-chart/
+thumbnail: thumbnail/polar.gif
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","scatterpolar" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/scientific/scatterpolar/2018-02-13-sector-polar-chart.html b/content/plotly_js/scientific/scatterpolar/2018-02-13-sector-polar-chart.html
new file mode 100644
index 00000000000..5a81cc807a2
--- /dev/null
+++ b/content/plotly_js/scientific/scatterpolar/2018-02-13-sector-polar-chart.html
@@ -0,0 +1,80 @@
+---
+name: Polar Chart Sector
+language: plotly_js
+suite: scatterpolar
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [
+ {
+ type: "scatterpolar",
+ mode: "lines+markers",
+ r: [1,2,3,4,5],
+ theta: [0,90,180,360,0],
+ line: {
+ color: "#ff66ab"
+ },
+ marker: {
+ color: "#8090c7",
+ symbol: "square",
+ size: 8
+ },
+ subplot: "polar"
+ },
+ {
+ type: "scatterpolar",
+ mode: "lines+markers",
+ r: [1,2,3,4,5],
+ theta: [0,90,180,360,0],
+ line: {
+ color: "#ff66ab"
+ },
+ marker: {
+ color: "#8090c7",
+ symbol: "square",
+ size: 8
+ },
+ subplot: "polar2"
+ }
+ ]
+
+var layout = {
+ showlegend: false,
+ polar: {
+ sector: [145,215],
+ domain: {
+ x: [0,0.4],
+ y: [0,1]
+ },
+ radialaxis: {
+ tickfont: {
+ size: 8
+ }
+ },
+ angularaxis: {
+ tickfont: {
+ size: 8
+ }
+ }
+ },
+ polar2: {
+ domain: {
+ x: [0.6,1],
+ y: [0,1]
+ },
+ radialaxis: {
+ tickfont: {
+ size: 8
+ }
+ },
+ angularaxis: {
+ tickfont: {
+ size: 8
+ }
+ }
+ }
+ }
+
+Plotly.newPlot('myDiv', data, layout)
diff --git a/content/plotly_js/scientific/scatterpolar/2018-02-13-subplots-polar-charts.html b/content/plotly_js/scientific/scatterpolar/2018-02-13-subplots-polar-charts.html
new file mode 100644
index 00000000000..c217fc1c089
--- /dev/null
+++ b/content/plotly_js/scientific/scatterpolar/2018-02-13-subplots-polar-charts.html
@@ -0,0 +1,83 @@
+---
+name: Polar Chart Subplots
+language: plotly_js
+suite: scatterpolar
+order: 6
+sitemap: false
+arrangement: horizontal
+---
+
+var data = [{
+ type: "scatterpolargl",
+ r: [1, 2, 3],
+ theta: [50, 100, 200],
+ marker: {symbol: "square"}
+ }, {
+ type: "scatterpolargl",
+ r: [1, 2, 3],
+ theta: [1, 2, 3],
+ thetaunit: "radians"
+ }, {
+ type: "scatterpolargl",
+ r: ["a", "b", "c", "b"],
+ theta: ["D", "C", "B", "A"],
+ subplot: "polar2"
+ }, {
+ type: "scatterpolargl",
+ r: [50, 300, 900],
+ theta: [0, 90, 180],
+ subplot: "polar3"
+ }, {
+ type: "scatterpolargl",
+ mode: "lines",
+ r: [3, 3, 4, 3],
+ theta: [0, 45, 90, 270],
+ fill: "toself",
+ subplot: "polar4"
+ }]
+
+var layout = {
+ polar: {
+ domain: {
+ x: [0, 0.46],
+ y: [0.56, 1]
+ },
+ radialaxis: {
+ range: [1, 4]
+ },
+ angularaxis: {
+ thetaunit: "radians"
+ }
+ },
+ polar2: {
+ domain: {
+ x: [0, 0.46],
+ y: [0, 0.42]
+ }
+ },
+ polar3: {
+ domain: {
+ x: [0.54, 1],
+ y: [0.56, 1]
+ },
+ radialaxis: {
+ type: "log",
+ tickangle: 45
+ },
+ sector: [0, 180]
+ },
+ polar4: {
+ domain: {
+ x: [0.54, 1],
+ y: [0, 0.44]
+ },
+ radialaxis: {
+ visible: false,
+ range: [0, 6]
+ }
+ },
+ showlegend: false
+ }
+
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/scientific/scatterpolar/2018-02-13-webgl-polar-chart.html b/content/plotly_js/scientific/scatterpolar/2018-02-13-webgl-polar-chart.html
new file mode 100644
index 00000000000..971b8f62c37
--- /dev/null
+++ b/content/plotly_js/scientific/scatterpolar/2018-02-13-webgl-polar-chart.html
@@ -0,0 +1,142 @@
+---
+name: Webgl Polar Chart
+language: plotly_js
+suite: scatterpolar
+order: 7
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/hobbs-pearson-trials.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+var data = [
+ {
+ type: "scatterpolargl",
+ r: unpack(rows, 'trial_1_r'),
+ theta: unpack(rows, 'trial_1_theta'),
+ mode: "markers",
+ name: "Trial 1",
+ marker: {
+ color: "rgb(27,158,119)",
+ size: 15,
+ line: {
+ color: "white"
+ },
+ opacity: 0.7
+ },
+ cliponaxis: false
+ },
+ {
+ type: "scatterpolargl",
+ r: unpack(rows, "trial_2_r"),
+ theta: unpack(rows, "trial_2_theta"),
+ mode: "markers",
+ name: "Trial 2",
+ marker: {
+ color: "rgb(217,95,2)",
+ size: 20,
+ line: {
+ color: "white"
+ },
+ "opacity": 0.7
+ },
+ "cliponaxis": false
+ },
+ {
+ type: "scatterpolargl",
+ r: unpack(rows, "trial_3_r"),
+ theta: unpack(rows, "trial_3_theta"),
+ mode: "markers",
+ name: "Trial 3",
+ marker: {
+ color: "rgb(117,112,179)",
+ size: 12,
+ line: {
+ color: "white"
+ },
+ opacity: 0.7
+ },
+ cliponaxis: false
+ },
+ {
+ type: "scatterpolargl",
+ r: unpack(rows, "trial_4_r"),
+ theta: unpack(rows, "trial_4_theta"),
+ mode: "markers",
+ name: "Trial 4",
+ marker: {
+ color: "rgb(231,41,138)",
+ size: 22,
+ line: {
+ color: "white"
+ },
+ opacity: 0.7
+ },
+ cliponaxis: false
+ },
+ {
+ type: "scatterpolargl",
+ r: unpack(rows, "trial_5_r"),
+ theta: unpack(rows, "trial_5_theta"),
+ mode: "markers",
+ name: "Trial 5",
+ marker: {
+ color: "rgb(102,166,30)",
+ size: 19,
+ line: {
+ color: "white"
+ },
+ opacity: 0.7
+ },
+ cliponaxis: false
+ },
+ {
+ type: "scatterpolargl",
+ r: unpack(rows, "trial_6_r"),
+ theta: unpack(rows, "trial_6_theta"),
+ mode: "markers",
+ name: "Trial 6",
+ marker: {
+ color: "rgb(230,171,2)",
+ size: 10,
+ line: {
+ color: "white"
+ },
+ opacity: 0.7
+ },
+ cliponaxis: false
+ }
+ ]
+
+var layout = {
+ title: {
+ text: "Hobbs-Pearson Trials"
+ },
+ font: {
+ size: 15
+ },
+ showlegend: false,
+ polar: {
+ bgcolor: "rgb(223, 223, 223)",
+ angularaxis: {
+ tickwidth: 2,
+ linewidth: 3,
+ layer: "below traces"
+ },
+ radialaxis: {
+ side: "counterclockwise",
+ showline: true,
+ linewidth: 2,
+ tickwidth: 2,
+ gridcolor: "white",
+ gridwidth: 2
+ }
+ },
+ paper_bgcolor: "rgb(223, 223, 223)",
+ }
+
+Plotly.newPlot('myDiv', data, layout);
+})
diff --git a/content/plotly_js/scientific/ternary-contour/2016-04-13-soil-types-ternary-fill-plot.html b/content/plotly_js/scientific/ternary-contour/2016-04-13-soil-types-ternary-fill-plot.html
new file mode 100644
index 00000000000..1418f5d3bf2
--- /dev/null
+++ b/content/plotly_js/scientific/ternary-contour/2016-04-13-soil-types-ternary-fill-plot.html
@@ -0,0 +1,72 @@
+---
+name: Basic Filled Ternary Plot
+language: plotly_js
+suite: ternary-contour
+order: 1
+sitemap: false
+arrangement: horizontal
+description: Inspired from Daven Quinn's block
+---
+var url = 'https://gist.githubusercontent.com/davenquinn/988167471993bc2ece29/raw/f38d9cb3dd86e315e237fde5d65e185c39c931c2/data.json';
+
+var colors = ['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd','#ccebc5','#ffed6f'];
+
+
+d3.json(url, function(err, rawData) {
+ if(err) throw err;
+
+ plot(rawData);
+});
+
+function plot(rawData) {
+ var data = Object.keys(rawData).map(function(k, i) {
+ var pts = rawData[k];
+ pts = pts.concat(pts[0]);
+
+ return {
+ type: 'scatterternary',
+ mode: 'lines',
+ name: k,
+ a: pts.map(function(d) { return d.clay }),
+ b: pts.map(function(d) { return d.sand }),
+ c: pts.map(function(d) { return d.silt }),
+ line: { color: '#444' },
+ fill: 'toself',
+ fillcolor: colors[i],
+ hoveron:'fills+points'
+ };
+ });
+
+ var layout = {
+ ternary: {
+ sum: 100,
+ aaxis: makeAxis('Clay'),
+ baxis: makeAxis('Sand'),
+ caxis: makeAxis('Silt')
+ },
+ showlegend: false,
+ width: 700,
+ annotations: [{
+ showarrow: false,
+ text: 'Soil Types Fill Plot',
+ x: 0.15,
+ y: 1.1
+ }]
+ };
+
+ Plotly.newPlot('myDiv', data, layout);
+}
+
+function makeAxis(title) {
+ return {
+ title: {
+ text: title
+ },
+ ticksuffix: '%',
+ min: 0.01,
+ linewidth: 2,
+ ticks: 'outside',
+ ticklen: 8,
+ showgrid: true,
+ };
+}
diff --git a/content/plotly_js/scientific/ternary-contour/2016-04-13-ternary-contour-plot_plotly_js_index.html b/content/plotly_js/scientific/ternary-contour/2016-04-13-ternary-contour-plot_plotly_js_index.html
new file mode 100644
index 00000000000..7ea02da88a8
--- /dev/null
+++ b/content/plotly_js/scientific/ternary-contour/2016-04-13-ternary-contour-plot_plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to create D3.js-based ternary contour plots. Examples of Ternary
+ Contour Plots with plotly.
+display_as: scientific
+language: plotly_js
+layout: base
+name: Ternary Contour Plots
+order: 7
+permalink: javascript/ternary-contour/
+thumbnail: thumbnail/ternary-contour.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","ternary-contour" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/scientific/ternary-plots/2016-04-13-basic-ternary-plot.html b/content/plotly_js/scientific/ternary-plots/2016-04-13-basic-ternary-plot.html
new file mode 100644
index 00000000000..1043b2312eb
--- /dev/null
+++ b/content/plotly_js/scientific/ternary-plots/2016-04-13-basic-ternary-plot.html
@@ -0,0 +1,73 @@
+---
+name: Basic Ternary Plot with Markers
+language: plotly_js
+suite: ternary-plot
+order: 1
+sitemap: false
+arrangement: horizontal
+description: Inspired from Tom Pearson's block
+---
+
+var rawData = [
+ {journalist:75,developer:25,designer:0,label:'point 1'},
+ {journalist:70,developer:10,designer:20,label:'point 2'},
+ {journalist:75,developer:20,designer:5,label:'point 3'},
+ {journalist:5,developer:60,designer:35,label:'point 4'},
+ {journalist:10,developer:80,designer:10,label:'point 5'},
+ {journalist:10,developer:90,designer:0,label:'point 6'},
+ {journalist:20,developer:70,designer:10,label:'point 7'},
+ {journalist:10,developer:20,designer:70,label:'point 8'},
+ {journalist:15,developer:5,designer:80,label:'point 9'},
+ {journalist:10,developer:10,designer:80,label:'point 10'},
+ {journalist:20,developer:10,designer:70,label:'point 11'},
+];
+
+Plotly.newPlot('myDiv', [{
+ type: 'scatterternary',
+ mode: 'markers',
+ a: rawData.map(function(d) { return d.journalist; }),
+ b: rawData.map(function(d) { return d.developer; }),
+ c: rawData.map(function(d) { return d.designer; }),
+ text: rawData.map(function(d) { return d.label; }),
+ marker: {
+ symbol: 100,
+ color: '#DB7365',
+ size: 14,
+ line: { width: 2 }
+ },
+}], {
+ ternary: {
+ sum: 100,
+ aaxis: makeAxis('Journalist', 0),
+ baxis: makeAxis('block ',
+ x: 1.0,
+ y: 1.3,
+ font: { size: 15 }
+ }],
+ paper_bgcolor: '#fff1e0',
+});
+
+function makeAxis(title, tickangle) {
+ return {
+ title: {
+ text: title,
+ font: {
+ size: 20
+ }
+ },
+ tickangle: tickangle,
+ tickfont: {
+ size: 15
+ },
+ tickcolor: 'rgba(0,0,0,0)',
+ ticklen: 5,
+ showline: true,
+ showgrid: true
+ };
+}
diff --git a/content/plotly_js/scientific/ternary-plots/2016-04-13-soil-types-ternary-plot.html b/content/plotly_js/scientific/ternary-plots/2016-04-13-soil-types-ternary-plot.html
new file mode 100644
index 00000000000..08292721714
--- /dev/null
+++ b/content/plotly_js/scientific/ternary-plots/2016-04-13-soil-types-ternary-plot.html
@@ -0,0 +1,66 @@
+---
+name: Soil Types Ternary Plot
+language: plotly_js
+suite: ternary-plot
+order: 2
+sitemap: false
+arrangement: horizontal
+description: Inspired from Daven Quinn's block
+---
+
+var url = 'https://gist.githubusercontent.com/davenquinn/988167471993bc2ece29/raw/f38d9cb3dd86e315e237fde5d65e185c39c931c2/data.json';
+
+d3.json(url, function(err, rawData) {
+ if(err) throw err;
+
+ plot(rawData);
+});
+
+function plot(rawData) {
+ var data = Object.keys(rawData).map(function(k) {
+ var pts = rawData[k];
+
+ return {
+ type: 'scatterternary',
+ mode: 'lines',
+ name: k,
+ a: pts.map(function(d) { return d.clay }),
+ b: pts.map(function(d) { return d.sand }),
+ c: pts.map(function(d) { return d.silt }),
+ line: { color: '#c00' }
+ };
+ });
+
+ var layout = {
+ ternary: {
+ sum: 100,
+ aaxis: makeAxis('Clay'),
+ baxis: makeAxis('Sand'),
+ caxis: makeAxis('Silt')
+ },
+ showlegend: false,
+ width: 700,
+ annotations: [{
+ showarrow: false,
+ text: 'Replica of Daven Quinn\'s block ',
+ x: 0.15,
+ y: 1.1
+ }]
+ };
+
+ Plotly.newPlot('myDiv', data, layout);
+}
+
+function makeAxis(title) {
+ return {
+ title: {
+ text: title
+ },
+ ticksuffix: '%',
+ min: 0.01,
+ linewidth: 2,
+ ticks: 'outside',
+ ticklen: 8,
+ showgrid: true,
+ };
+}
diff --git a/content/plotly_js/scientific/ternary-plots/2016-04-13-ternary-plot_plotly_js_index.html b/content/plotly_js/scientific/ternary-plots/2016-04-13-ternary-plot_plotly_js_index.html
new file mode 100644
index 00000000000..20b676f8c97
--- /dev/null
+++ b/content/plotly_js/scientific/ternary-plots/2016-04-13-ternary-plot_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to create D3.js-based ternary plots. Examples of Ternary Plots with
+ plotly.
+display_as: scientific
+language: plotly_js
+layout: base
+name: Ternary Plots
+order: 3
+page_type: example_index
+permalink: javascript/ternary-plots/
+redirect_from: javascript/ternary-plot/
+thumbnail: thumbnail/ternary-plot.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","ternary-plot" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/scientific/wind-rose/2015-04-09-wind-rose-chart.html b/content/plotly_js/scientific/wind-rose/2015-04-09-wind-rose-chart.html
new file mode 100644
index 00000000000..c0c58f1f000
--- /dev/null
+++ b/content/plotly_js/scientific/wind-rose/2015-04-09-wind-rose-chart.html
@@ -0,0 +1,48 @@
+---
+name: Wind Rose Chart
+language: plotly_js
+suite: wind-rose
+sitemap: false
+arrangement: horizontal
+order: 17
+---
+var data = [{
+ r: [77.5, 72.5, 70.0, 45.0, 22.5, 42.5, 40.0, 62.5],
+ theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
+ name: "11-14 m/s",
+ marker: {color: "rgb(106,81,163)"},
+ type: "barpolar"
+ }, {
+ r: [57.5, 50.0, 45.0, 35.0, 20.0, 22.5, 37.5, 55.0],
+ theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
+ name: "8-11 m/s",
+ marker: {color: "rgb(158,154,200)"},
+ type: "barpolar"
+ }, {
+ r: [40.0, 30.0, 30.0, 35.0, 7.5, 7.5, 32.5, 40.0],
+ theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
+ name: "5-8 m/s",
+ marker: {color: "rgb(203,201,226)"},
+ type: "barpolar"
+ }, {
+ r: [20.0, 7.5, 15.0, 22.5, 2.5, 2.5, 12.5, 22.5],
+ theta: ["North", "N-E", "East", "S-E", "South", "S-W", "West", "N-W"],
+ name: "< 5 m/s",
+ marker: {color: "rgb(242,240,247)"},
+ type: "barpolar"
+ }]
+var layout = {
+ title: {
+ text: "Wind Speed Distribution in Laurel, NE"
+ },
+ font: {size: 16},
+ legend: {font: {size: 16}},
+ polar: {
+ barmode: "overlay",
+ bargap: 0,
+ radialaxis: {ticksuffix: "%", angle: 45, dtick: 20},
+ angularaxis: {direction: "clockwise"}
+ }
+ }
+
+Plotly.newPlot("myDiv", data, layout)
\ No newline at end of file
diff --git a/content/plotly_js/scientific/wind-rose/2015-04-09-wind-rose_plotlyjs_index.html b/content/plotly_js/scientific/wind-rose/2015-04-09-wind-rose_plotlyjs_index.html
new file mode 100644
index 00000000000..54eb1fc4374
--- /dev/null
+++ b/content/plotly_js/scientific/wind-rose/2015-04-09-wind-rose_plotlyjs_index.html
@@ -0,0 +1,14 @@
+---
+description: How to graph D3.js-based wind rose charts in plotly.js .
+display_as: scientific
+language: plotly_js
+layout: base
+name: Wind Rose Charts
+order: 6
+permalink: javascript/wind-rose-charts/
+redirect_from: javascript-graphing-library/wind-rose-charts/
+thumbnail: thumbnail/wind-rose.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","wind-rose" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/statistical/2017-02-24-plotly_js-statistical-index.html b/content/plotly_js/statistical/2017-02-24-plotly_js-statistical-index.html
new file mode 100644
index 00000000000..18e9e93b56c
--- /dev/null
+++ b/content/plotly_js/statistical/2017-02-24-plotly_js-statistical-index.html
@@ -0,0 +1,27 @@
+---
+permalink: javascript/statistical-charts/
+description: Plotly.js makes interactive, publication-quality graphs online. Examples of how to make statistical charts such as boxplots and histograms.
+name: Statistical Charts
+layout: langindex
+language: plotly_js
+display_as: statistical
+thumbnail: thumbnail/mixed.jpg
+---
+
+
+
+
+
+
+
+
+
Plotly.js Statistical Charts
+
{{page.description}}
+ {% include layouts/dashplug.html %}
+
+
+
+
+ {% assign languagelist = site.posts | where:"language","plotly_js" | where:"display_as","statistical" | where: "layout","base" | sort: "order" %}
+ {% include posts/documentation_eg.html %}
diff --git a/content/plotly_js/statistical/SPC/2017-09-27-spc-basic-distribution.html b/content/plotly_js/statistical/SPC/2017-09-27-spc-basic-distribution.html
new file mode 100644
index 00000000000..3a88e4314bc
--- /dev/null
+++ b/content/plotly_js/statistical/SPC/2017-09-27-spc-basic-distribution.html
@@ -0,0 +1,114 @@
+---
+name: SPC Control Chart & Distribution
+language: plotly_js
+suite: SPC
+order: 2
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+var Data = {
+ type: 'scatter',
+ x: [1,2,3,4,5,6,7,8,9],
+ y: [4,2,-1,4,-5,-7,0,3,8],
+ mode: 'lines+markers',
+ name: 'Data',
+ showlegend: true,
+ hoverinfo: 'all',
+ line: {
+ color: 'blue',
+ width: 2
+ },
+ marker: {
+ color: 'blue',
+ size: 8,
+ symbol: 'circle'
+ }
+}
+
+var Viol = {
+ type: 'scatter',
+ x: [6,9],
+ y: [-7,8],
+ mode: 'markers',
+ name: 'Violation',
+ showlegend: true,
+ marker: {
+ color: 'rgb(255,65,54)',
+ line: {width: 3},
+ opacity: 0.5,
+ size: 12,
+ symbol: 'circle-open'
+ }
+}
+
+var CL = {
+ type: 'scatter',
+ x: [0.5, 10, null, 0.5, 10],
+ y: [-5, -5, null, 5, 5],
+ mode: 'lines',
+ name: 'LCL/UCL',
+ showlegend: true,
+ line: {
+ color: 'red',
+ width: 2,
+ dash: 'dash'
+ }
+}
+
+var Centre = {
+ type: 'scatter',
+ x: [0.5, 10],
+ y: [0, 0],
+ mode: 'lines',
+ name: 'Centre',
+ showlegend: true,
+ line: {
+ color: 'grey',
+ width: 2
+ }
+}
+
+var histo = {
+ type: 'histogram',
+ x: [1,2,3,4,5,6,7,8,9],
+ y: [4,2,-1,4,-5,-7,0,3,8],
+ name: 'Distribution',
+ orientation: 'h',
+ marker: {
+ color: 'blue',
+ line: {
+ color: 'white',
+ width: 1
+ }
+ },
+ xaxis: 'x2',
+ yaxis: 'y2'
+}
+
+var data = [Data,Viol,CL,Centre,histo]
+
+// layout
+var layout = {
+ title: {
+ text: 'Basic SPC Chart'
+ },
+ xaxis: {
+ domain: [0, 0.7], // 0 to 70% of width
+ zeroline: false
+ },
+ yaxis: {
+ range: [-10,10],
+ zeroline: false
+ },
+ xaxis2: {
+ domain: [0.8, 1] // 70 to 100% of width
+ },
+ yaxis2: {
+ anchor: 'x2',
+ showticklabels: false
+ }
+}
+
+Plotly.newPlot('myDiv', data,layout);
diff --git a/content/plotly_js/statistical/SPC/2017-09-27-spc-basic.html b/content/plotly_js/statistical/SPC/2017-09-27-spc-basic.html
new file mode 100644
index 00000000000..0e9cce56753
--- /dev/null
+++ b/content/plotly_js/statistical/SPC/2017-09-27-spc-basic.html
@@ -0,0 +1,88 @@
+---
+name: Basic SPC Control Chart
+language: plotly_js
+suite: SPC
+order: 1
+sitemap: false
+arrangement: horizontal
+description:
+---
+
+var Data = {
+ type: 'scatter',
+ x: [1,2,3,4,5,6,7,8,9],
+ y: [4,2,-1,4,-5,-7,0,3,8],
+ mode: 'lines+markers',
+ name: 'Data',
+ showlegend: true,
+ hoverinfo: 'all',
+ line: {
+ color: 'blue',
+ width: 2
+ },
+ marker: {
+ color: 'blue',
+ size: 8,
+ symbol: 'circle'
+ }
+}
+
+var Viol = {
+ type: 'scatter',
+ x: [6,9],
+ y: [-7,8],
+ mode: 'markers',
+ name: 'Violation',
+ showlegend: true,
+ marker: {
+ color: 'rgb(255,65,54)',
+ line: {width: 3},
+ opacity: 0.5,
+ size: 12,
+ symbol: 'circle-open'
+ }
+}
+
+var CL = {
+ type: 'scatter',
+ x: [0.5, 10, null, 0.5, 10],
+ y: [-5, -5, null, 5, 5],
+ mode: 'lines',
+ name: 'LCL/UCL',
+ showlegend: true,
+ line: {
+ color: 'red',
+ width: 2,
+ dash: 'dash'
+ }
+}
+
+var Centre = {
+ type: 'scatter',
+ x: [0.5, 10],
+ y: [0, 0],
+ mode: 'lines',
+ name: 'Centre',
+ showlegend: true,
+ line: {
+ color: 'grey',
+ width: 2
+ }
+}
+
+var data = [Data,Viol,CL,Centre]
+
+var layout = {
+ title: {
+ text: 'Basic SPC Chart'
+ },
+ xaxis: {
+ zeroline: false
+ },
+ yaxis: {
+ range: [-10,10],
+ zeroline: false
+ }
+}
+
+Plotly.newPlot('myDiv', data,layout);
diff --git a/content/plotly_js/statistical/SPC/2017-09-27-spc-control-charts_plotly_js_index.html b/content/plotly_js/statistical/SPC/2017-09-27-spc-control-charts_plotly_js_index.html
new file mode 100644
index 00000000000..00a0556da8f
--- /dev/null
+++ b/content/plotly_js/statistical/SPC/2017-09-27-spc-control-charts_plotly_js_index.html
@@ -0,0 +1,13 @@
+---
+description: How to make a D3.js-based SPC Control Charts in javascript.
+display_as: statistical
+language: plotly_js
+layout: base
+name: SPC Control Charts
+order: 7
+permalink: javascript/spc-control-charts/
+thumbnail: thumbnail/SPC.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","SPC" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/statistical/box/2015-04-09-basic-box-plot.html b/content/plotly_js/statistical/box/2015-04-09-basic-box-plot.html
new file mode 100644
index 00000000000..9d8a6acaeb4
--- /dev/null
+++ b/content/plotly_js/statistical/box/2015-04-09-basic-box-plot.html
@@ -0,0 +1,28 @@
+---
+name: Basic Box Plot
+arrangement: horizontal
+language: plotly_js
+suite: box
+order: 1
+sitemap: false
+---
+var y0 = [];
+var y1 = [];
+for (var i = 0; i < 50; i ++) {
+ y0[i] = Math.random();
+ y1[i] = Math.random() + 1;
+}
+
+var trace1 = {
+ y: y0,
+ type: 'box'
+};
+
+var trace2 = {
+ y: y1,
+ type: 'box'
+};
+
+var data = [trace1, trace2];
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/box/2015-04-09-box-grouped.html b/content/plotly_js/statistical/box/2015-04-09-box-grouped.html
new file mode 100644
index 00000000000..2f7805c8ec3
--- /dev/null
+++ b/content/plotly_js/statistical/box/2015-04-09-box-grouped.html
@@ -0,0 +1,48 @@
+---
+name: Grouped Box Plot
+arrangement: horizontal
+language: plotly_js
+suite: box
+order: 4
+sitemap: false
+---
+var x = ['day 1', 'day 1', 'day 1', 'day 1', 'day 1', 'day 1',
+ 'day 2', 'day 2', 'day 2', 'day 2', 'day 2', 'day 2']
+
+var trace1 = {
+ y: [0.2, 0.2, 0.6, 1.0, 0.5, 0.4, 0.2, 0.7, 0.9, 0.1, 0.5, 0.3],
+ x: x,
+ name: 'kale',
+ marker: {color: '#3D9970'},
+ type: 'box'
+};
+
+var trace2 = {
+ y: [0.6, 0.7, 0.3, 0.6, 0.0, 0.5, 0.7, 0.9, 0.5, 0.8, 0.7, 0.2],
+ x: x,
+ name: 'radishes',
+ marker: {color: '#FF4136'},
+ type: 'box'
+};
+
+var trace3 = {
+ y: [0.1, 0.3, 0.1, 0.9, 0.6, 0.6, 0.9, 1.0, 0.3, 0.6, 0.8, 0.5],
+ x: x,
+ name: 'carrots',
+ marker: {color: '#FF851B'},
+ type: 'box'
+};
+
+var data = [trace1, trace2, trace3];
+
+var layout = {
+ yaxis: {
+ title: {
+ text: 'normalized moisture'
+ },
+ zeroline: false
+ },
+ boxmode: 'group'
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/statistical/box/2015-04-09-box-plot-jitter.html b/content/plotly_js/statistical/box/2015-04-09-box-plot-jitter.html
new file mode 100644
index 00000000000..619360e7083
--- /dev/null
+++ b/content/plotly_js/statistical/box/2015-04-09-box-plot-jitter.html
@@ -0,0 +1,19 @@
+---
+name: Box Plot That Displays the Underlying Data
+arrangement: horizontal
+language: plotly_js
+suite: box
+order: 2
+sitemap: false
+---
+var data = [
+ {
+ y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
+ boxpoints: 'all',
+ jitter: 0.3,
+ pointpos: -1.8,
+ type: 'box'
+ }
+];
+
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/box/2015-04-09-box_plotly_js_index.html b/content/plotly_js/statistical/box/2015-04-09-box_plotly_js_index.html
new file mode 100644
index 00000000000..433b986e017
--- /dev/null
+++ b/content/plotly_js/statistical/box/2015-04-09-box_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to make a D3.js-based box plot in javascript. Seven examples of box
+ plots in javascript that are grouped, colored, and display the underlying data distribution.
+display_as: statistical
+language: plotly_js
+layout: base
+name: Box Plots
+order: 2
+page_type: example_index
+permalink: javascript/box-plots/
+redirect_from: javascript-graphing-library/box-plots/
+thumbnail: thumbnail/box.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","box" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/statistical/box/2015-08-11-box-plot-styling-mean-and-sd.html b/content/plotly_js/statistical/box/2015-08-11-box-plot-styling-mean-and-sd.html
new file mode 100644
index 00000000000..dbdbfa37210
--- /dev/null
+++ b/content/plotly_js/statistical/box/2015-08-11-box-plot-styling-mean-and-sd.html
@@ -0,0 +1,39 @@
+---
+name: Box Plot Styling Mean and Standard Deviation
+arrangement: horizontal
+language: plotly_js
+suite: box
+order: 6
+sitemap: false
+---
+
+var trace1 = {
+ y: [2.37, 2.16, 4.82, 1.73, 1.04, 0.23, 1.32, 2.91, 0.11, 4.51, 0.51, 3.75, 1.35, 2.98, 4.50, 0.18, 4.66, 1.30, 2.06, 1.19],
+ type: 'box',
+ name: 'Only Mean',
+ marker: {
+ color: 'rgb(8,81,156)'
+ },
+ boxmean: true
+};
+
+var trace2 = {
+ y: [2.37, 2.16, 4.82, 1.73, 1.04, 0.23, 1.32, 2.91, 0.11, 4.51, 0.51, 3.75, 1.35, 2.98, 4.50, 0.18, 4.66, 1.30, 2.06, 1.19],
+ type: 'box',
+ name: 'Mean and Standard Deviation',
+ marker: {
+ color: 'rgb(10,140,208)'
+ },
+ boxmean: 'sd'
+};
+
+
+var data = [trace1, trace2];
+
+var layout = {
+ title: {
+ text: 'Box Plot Styling Mean and Standard Deviation'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/statistical/box/2015-08-11-box-plot-styling-outliers.html b/content/plotly_js/statistical/box/2015-08-11-box-plot-styling-outliers.html
new file mode 100644
index 00000000000..b420963f2ab
--- /dev/null
+++ b/content/plotly_js/statistical/box/2015-08-11-box-plot-styling-outliers.html
@@ -0,0 +1,67 @@
+---
+name: Box Plot Styling Outliers
+arrangement: horizontal
+language: plotly_js
+suite: box
+order: 5
+sitemap: false
+---
+
+var trace1 = {
+ y: [0.75, 5.25, 5.5, 6, 6.2, 6.6, 6.80, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10, 10.25, 11.5, 12, 16, 20.90, 22.3, 23.25],
+ type: 'box',
+ name: 'All Points',
+ jitter: 0.3,
+ pointpos: -1.8,
+ marker: {
+ color: 'rgb(7,40,89)'
+ },
+ boxpoints: 'all'
+};
+
+var trace2 = {
+ y: [0.75, 5.25, 5.5, 6, 6.2, 6.6, 6.80, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10, 10.25, 11.5, 12, 16, 20.90, 22.3, 23.25],
+ type: 'box',
+ name: 'Only Wiskers',
+ marker: {
+ color: 'rgb(9,56,125)'
+ },
+ boxpoints: false
+};
+
+var trace3 = {
+ y: [0.75, 5.25, 5.5, 6, 6.2, 6.6, 6.80, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10, 10.25, 11.5, 12, 16, 20.90, 22.3, 23.25],
+ type: 'box',
+ name: 'Suspected Outlier',
+ marker: {
+ color: 'rgb(8,81,156)',
+ outliercolor: 'rgba(219, 64, 82, 0.6)',
+ line: {
+ outliercolor: 'rgba(219, 64, 82, 1.0)',
+ outlierwidth: 2
+ }
+ },
+ boxpoints: 'suspectedoutliers'
+};
+
+var trace4 = {
+ y: [0.75, 5.25, 5.5, 6, 6.2, 6.6, 6.80, 7.0, 7.2, 7.5, 7.5, 7.75, 8.15, 8.15, 8.65, 8.93, 9.2, 9.5, 10, 10.25, 11.5, 12, 16, 20.90, 22.3, 23.25],
+ type: 'box',
+ name: 'Wiskers and Outliers',
+ marker: {
+ color: 'rgb(107,174,214)'
+ },
+ boxpoints: 'Outliers'
+};
+
+
+
+var data = [trace1, trace2, trace3, trace4];
+
+var layout = {
+ title: {
+ text: 'Box Plot Styling Outliers'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/statistical/box/2015-08-11-colored-box-plot.html b/content/plotly_js/statistical/box/2015-08-11-colored-box-plot.html
new file mode 100644
index 00000000000..6c4a6b840e0
--- /dev/null
+++ b/content/plotly_js/statistical/box/2015-08-11-colored-box-plot.html
@@ -0,0 +1,36 @@
+---
+name: Colored Box Plot
+arrangement: horizontal
+language: plotly_js
+suite: box
+order: 8
+sitemap: false
+---
+
+var trace1 = {
+ y: [1, 2, 3, 4, 4, 4, 8, 9, 10],
+ type: 'box',
+ name: 'Sample A',
+ marker:{
+ color: 'rgb(214,12,140)'
+ }
+};
+
+var trace2 = {
+ y: [2, 3, 3, 3, 3, 5, 6, 6, 7],
+ type: 'box',
+ name: 'Sample B',
+ marker:{
+ color: 'rgb(0,128,128)'
+ }
+};
+
+var data = [trace1, trace2];
+
+var layout = {
+ title: {
+ text: 'Colored Box Plot'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/statistical/box/2015-08-11-fully-styled-box-plots.html b/content/plotly_js/statistical/box/2015-08-11-fully-styled-box-plots.html
new file mode 100644
index 00000000000..a90b3cdaabd
--- /dev/null
+++ b/content/plotly_js/statistical/box/2015-08-11-fully-styled-box-plots.html
@@ -0,0 +1,84 @@
+---
+name: Fully Styled Box Plot
+arrangement: horizontal
+language: plotly_js
+suite: box
+order: 10
+sitemap: false
+---
+
+var xData = ['CarmeloNotice the hover text!"
+ },
+ yaxis: {
+ title: {
+ text: "Wind speed (m/s)"
+ }
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
\ No newline at end of file
diff --git a/content/plotly_js/statistical/continuous-error-bars/2016-02-15-filled-lines.html b/content/plotly_js/statistical/continuous-error-bars/2016-02-15-filled-lines.html
new file mode 100644
index 00000000000..ab4be94aad5
--- /dev/null
+++ b/content/plotly_js/statistical/continuous-error-bars/2016-02-15-filled-lines.html
@@ -0,0 +1,88 @@
+---
+name: Filled Lines
+arrangement: horizontal
+language: plotly_js
+suite: continuous-error-bar
+order: 1
+sitemap: false
+---
+
+var trace1 = {
+ x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
+ y: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
+ fill: "tozerox",
+ fillcolor: "rgba(0,100,80,0.2)",
+ line: {color: "transparent"},
+ name: "Fair",
+ showlegend: false,
+ type: "scatter"
+};
+var trace2 = {
+ x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
+ y: [5.5, 3, 5.5, 8, 6, 3, 8, 5, 6, 5.5, 4.75, 5, 4, 7, 2, 4, 7, 4.4, 2, 4.5],
+ fill: "tozerox",
+ fillcolor: "rgba(0,176,246,0.2)",
+ line: {color: "transparent"},
+ name: "Premium",
+ showlegend: false,
+ type: "scatter"
+};
+var trace3 = {
+ x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
+ y: [11, 9, 7, 5, 3, 1, 3, 5, 3, 1, -1, 1, 3, 1, -0.5, 1, 3, 5, 7, 9],
+ fill: "tozerox",
+ fillcolor: "rgba(231,107,243,0.2)",
+ line: {color: "transparent"},
+ name: "Ideal",
+ showlegend: false,
+ type: "scatter"
+};
+var trace4 = {
+ x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+ y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+ line: {color: "rgb(0,100,80)"},
+ mode: "lines",
+ name: "Fair",
+ type: "scatter"
+};
+var trace5 = {
+ x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+ y: [5, 2.5, 5, 7.5, 5, 2.5, 7.5, 4.5, 5.5, 5],
+ line: {color: "rgb(0,176,246)"},
+ mode: "lines",
+ name: "Premium",
+ type: "scatter"
+};
+var trace6 = {
+ x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+ y: [10, 8, 6, 4, 2, 0, 2, 4, 2, 0],
+ line: {color: "rgb(231,107,243)"},
+ mode: "lines",
+ name: "Ideal",
+ type: "scatter"
+};
+var data = [trace1, trace2, trace3, trace4, trace5, trace6];
+var layout = {
+ paper_bgcolor: "rgb(255,255,255)",
+ plot_bgcolor: "rgb(229,229,229)",
+ xaxis: {
+ gridcolor: "rgb(255,255,255)",
+ range: [1, 10],
+ showgrid: true,
+ showline: false,
+ showticklabels: true,
+ tickcolor: "rgb(127,127,127)",
+ ticks: "outside",
+ zeroline: false
+ },
+ yaxis: {
+ gridcolor: "rgb(255,255,255)",
+ showgrid: true,
+ showline: false,
+ showticklabels: true,
+ tickcolor: "rgb(127,127,127)",
+ ticks: "outside",
+ zeroline: false
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/statistical/density-plots/2015-04-09-2dhistogram-contour-subplots.html b/content/plotly_js/statistical/density-plots/2015-04-09-2dhistogram-contour-subplots.html
new file mode 100644
index 00000000000..1d9b8ab48da
--- /dev/null
+++ b/content/plotly_js/statistical/density-plots/2015-04-09-2dhistogram-contour-subplots.html
@@ -0,0 +1,105 @@
+---
+name: 2D Histogram Contour Plot postMessage API .
+
+See the code on JSFiddle .
+
+Watch the 5 second video of how it works.
diff --git a/content/plotly_js/statistical/error-bar/2015-04-09-basic-error-bar.html b/content/plotly_js/statistical/error-bar/2015-04-09-basic-error-bar.html
new file mode 100644
index 00000000000..a34fc62a49d
--- /dev/null
+++ b/content/plotly_js/statistical/error-bar/2015-04-09-basic-error-bar.html
@@ -0,0 +1,21 @@
+---
+name: Basic Symmetric Error Bars
+language: plotly_js
+suite: error-bar
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: [0, 1, 2],
+ y: [6, 10, 2],
+ error_y: {
+ type: 'data',
+ array: [1, 2, 3],
+ visible: true
+ },
+ type: 'scatter'
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-asymmetric-array.html b/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-asymmetric-array.html
new file mode 100644
index 00000000000..ab22e4c0ab1
--- /dev/null
+++ b/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-asymmetric-array.html
@@ -0,0 +1,22 @@
+---
+name: Asymmetric Error Bars
+language: plotly_js
+suite: error-bar
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: [1, 2, 3, 4],
+ y: [2, 1, 3, 4],
+ error_y: {
+ type: 'data',
+ symmetric: false,
+ array: [0.1, 0.2, 0.1, 0.1],
+ arrayminus: [0.2, 0.4, 1, 0.2]
+ },
+ type: 'scatter'
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-asymmetric-constant.html b/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-asymmetric-constant.html
new file mode 100644
index 00000000000..8aeabe07ff8
--- /dev/null
+++ b/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-asymmetric-constant.html
@@ -0,0 +1,22 @@
+---
+name: Asymmetric Error Bars with a Constant Offset
+language: plotly_js
+suite: error-bar
+order: 7
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: [1, 2, 3, 4],
+ y: [2, 1, 3, 4],
+ error_y: {
+ type: 'percent',
+ symmetric: false,
+ value: 15,
+ valueminus: 25
+ },
+ type: 'scatter'
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-bar.html b/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-bar.html
new file mode 100644
index 00000000000..1e5bf402b7d
--- /dev/null
+++ b/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-bar.html
@@ -0,0 +1,33 @@
+---
+name: Bar Chart with Error Bars
+language: plotly_js
+suite: error-bar
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: ['Trial 1', 'Trial 2', 'Trial 3'],
+ y: [3, 6, 4],
+ name: 'Control',
+ error_y: {
+ type: 'data',
+ array: [1, 0.5, 1.5],
+ visible: true
+ },
+ type: 'bar'
+};
+var trace2 = {
+ x: ['Trial 1', 'Trial 2', 'Trial 3'],
+ y: [4, 7, 3],
+ name: 'Experimental',
+ error_y: {
+ type: 'data',
+ array: [0.5, 1, 2],
+ visible: true
+ },
+ type: 'bar'
+};
+var data = [trace1, trace2];
+var layout = {barmode: 'group'};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-horizontal.html b/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-horizontal.html
new file mode 100644
index 00000000000..df384de05b3
--- /dev/null
+++ b/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-horizontal.html
@@ -0,0 +1,20 @@
+---
+name: Horizontal Error Bars
+language: plotly_js
+suite: error-bar
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: [1, 2, 3, 4],
+ y: [2, 1, 3, 4],
+ error_x: {
+ type: 'percent',
+ value: 10
+ },
+ type: 'scatter'
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-style.html b/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-style.html
new file mode 100644
index 00000000000..0b76dfce68e
--- /dev/null
+++ b/content/plotly_js/statistical/error-bar/2015-04-09-error-bar-style.html
@@ -0,0 +1,49 @@
+---
+name: Colored and Styled Error Bars
+language: plotly_js
+suite: error-bar
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+function linspace(a,b,n) {
+ return d3.range(n).map(function(i){return a+i*(b-a)/(n-1);});
+}
+x_theo = linspace(-4, 4, 100)
+sincx = Math.sin(x_theo) / x_theo
+var x = [-3.8, -3.03, -1.91, -1.46, -0.89, -0.24, -0.0, 0.41, 0.89, 1.01, 1.91, 2.28, 2.79, 3.56]
+var y = [-0.02, 0.04, -0.01, -0.27, 0.36, 0.75, 1.03, 0.65, 0.28, 0.02, -0.11, 0.16, 0.04, -0.15]
+
+var trace1 = {
+ x: x_theo,
+ y: sincx,
+ name: 'sinc(x)',
+ type: 'scatter'
+};
+var trace2 = {
+ x: x,
+ y: y,
+ mode: 'markers',
+ name: 'measured',
+ error_y: {
+ type: 'constant',
+ value: 0.1,
+ color: '#85144B',
+ thickness: 1.5,
+ width: 3,
+ },
+ error_x: {
+ type: 'constant',
+ value: 0.2,
+ color: '#85144B',
+ thickness: 1.5,
+ width: 3,
+ },
+ marker: {
+ color: '#85144B',
+ size: 8
+ },
+ type: 'scatter'
+};
+var data = [trace1, trace2];
+Plotly.newPlot('myDiv', data, {}, {showSendToCloud: true});
diff --git a/content/plotly_js/statistical/error-bar/2015-04-09-error-bar_plotly_js_index.html b/content/plotly_js/statistical/error-bar/2015-04-09-error-bar_plotly_js_index.html
new file mode 100644
index 00000000000..d54d13508e7
--- /dev/null
+++ b/content/plotly_js/statistical/error-bar/2015-04-09-error-bar_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to add error bars to a D3.js-based line, scatter, or bar chart. Seven
+ examples of symmetric, asymmetric, horizontal, and colored error bars.
+display_as: statistical
+language: plotly_js
+layout: base
+name: Error Bars
+order: 1
+page_type: example_index
+permalink: javascript/error-bars/
+redirect_from: javascript-graphing-library/error-bars/
+thumbnail: thumbnail/error-bar.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","error-bar" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/statistical/error-bar/2015-04-09-percent-error-bar.html b/content/plotly_js/statistical/error-bar/2015-04-09-percent-error-bar.html
new file mode 100644
index 00000000000..659461dea7f
--- /dev/null
+++ b/content/plotly_js/statistical/error-bar/2015-04-09-percent-error-bar.html
@@ -0,0 +1,21 @@
+---
+name: Error Bars as a Percentage of the y-Value
+language: plotly_js
+suite: error-bar
+order: 6
+sitemap: false
+arrangement: horizontal
+---
+var data = [
+ {
+ x: [0, 1, 2],
+ y: [6, 10, 2],
+ error_y: {
+ type: 'percent',
+ value: 50,
+ visible: true
+ },
+ type: 'scatter'
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/histogram/2015-04-09-basic-histogram.html b/content/plotly_js/statistical/histogram/2015-04-09-basic-histogram.html
new file mode 100644
index 00000000000..90706ddb97f
--- /dev/null
+++ b/content/plotly_js/statistical/histogram/2015-04-09-basic-histogram.html
@@ -0,0 +1,19 @@
+---
+name: Basic Histogram
+arrangement: horizontal
+language: plotly_js
+suite: histogram
+order: 4
+sitemap: false
+---
+var x = [];
+for (var i = 0; i < 500; i ++) {
+ x[i] = Math.random();
+}
+
+var trace = {
+ x: x,
+ type: 'histogram',
+ };
+var data = [trace];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/histogram/2015-04-09-histogram_plotly_js_index.html b/content/plotly_js/statistical/histogram/2015-04-09-histogram_plotly_js_index.html
new file mode 100644
index 00000000000..6c55f91273a
--- /dev/null
+++ b/content/plotly_js/statistical/histogram/2015-04-09-histogram_plotly_js_index.html
@@ -0,0 +1,17 @@
+---
+description: How to make a D3.js-based histogram in JavaScript. Seven examples of
+ colored, horizontal, and normal histogram bar charts.
+display_as: statistical
+language: plotly_js
+layout: base
+name: Histograms
+order: 3
+page_type: example_index
+permalink: javascript/histograms/
+plottype: histogram
+redirect_from: javascript-graphing-library/histograms/
+thumbnail: thumbnail/histogram.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","histogram" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/statistical/histogram/2015-04-09-horizontal-histogram.html b/content/plotly_js/statistical/histogram/2015-04-09-horizontal-histogram.html
new file mode 100644
index 00000000000..85984655a42
--- /dev/null
+++ b/content/plotly_js/statistical/histogram/2015-04-09-horizontal-histogram.html
@@ -0,0 +1,23 @@
+---
+name: Horizontal Histogram
+arrangement: horizontal
+language: plotly_js
+suite: histogram
+order: 5
+sitemap: false
+---
+var y = [];
+for (var i = 0; i < 500; i ++) {
+ y[i] = Math.random();
+}
+
+var data = [
+ {
+ y: y,
+ type: 'histogram',
+ marker: {
+ color: 'pink',
+ },
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/histogram/2015-04-09-normalized-histogram.html b/content/plotly_js/statistical/histogram/2015-04-09-normalized-histogram.html
new file mode 100644
index 00000000000..3a877e704c9
--- /dev/null
+++ b/content/plotly_js/statistical/histogram/2015-04-09-normalized-histogram.html
@@ -0,0 +1,24 @@
+---
+name: Normalized Histogram
+arrangement: horizontal
+language: plotly_js
+suite: histogram
+order: 9
+sitemap: false
+---
+var x = [];
+for (var i = 0; i < 500; i ++) {
+ x[i] = Math.random();
+}
+
+var data = [
+ {
+ x: x,
+ type: 'histogram',
+ histnorm: 'probability',
+ marker: {
+ color: 'rgb(255,255,100)',
+ },
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/histogram/2015-04-09-overlaid-histogram.html b/content/plotly_js/statistical/histogram/2015-04-09-overlaid-histogram.html
new file mode 100644
index 00000000000..104da6cbe2f
--- /dev/null
+++ b/content/plotly_js/statistical/histogram/2015-04-09-overlaid-histogram.html
@@ -0,0 +1,36 @@
+---
+name: Overlaid Histogram
+arrangement: horizontal
+language: plotly_js
+suite: histogram
+order: 6
+sitemap: false
+---
+var x1 = [];
+var x2 = [];
+for (var i = 1; i < 500; i++)
+{
+ k = Math.random();
+ x1.push(Math.random() + 1);
+ x2.push(Math.random() + 1.1);
+}
+var trace1 = {
+ x: x1,
+ type: "histogram",
+ opacity: 0.5,
+ marker: {
+ color: 'green',
+ },
+};
+var trace2 = {
+ x: x2,
+ type: "histogram",
+ opacity: 0.6,
+ marker: {
+ color: 'red',
+ },
+};
+
+var data = [trace1, trace2];
+var layout = {barmode: "overlay"};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/statistical/histogram/2015-04-09-stacked-histogram.html b/content/plotly_js/statistical/histogram/2015-04-09-stacked-histogram.html
new file mode 100644
index 00000000000..69e6a5f20a7
--- /dev/null
+++ b/content/plotly_js/statistical/histogram/2015-04-09-stacked-histogram.html
@@ -0,0 +1,26 @@
+---
+name: Stacked Histograms
+arrangement: horizontal
+language: plotly_js
+suite: histogram
+order: 7
+sitemap: false
+---
+var x1 = [];
+var x2 = [];
+for (var i = 0; i < 500; i ++) {
+ x1[i] = Math.random();
+ x2[i] = Math.random();
+}
+
+var trace1 = {
+ x: x1,
+ type: "histogram",
+};
+var trace2 = {
+ x: x2,
+ type: "histogram",
+};
+var data = [trace1, trace2];
+var layout = {barmode: "stack"};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/statistical/histogram/2015-04-09-style-histogram.html b/content/plotly_js/statistical/histogram/2015-04-09-style-histogram.html
new file mode 100644
index 00000000000..bff87ef1a4f
--- /dev/null
+++ b/content/plotly_js/statistical/histogram/2015-04-09-style-histogram.html
@@ -0,0 +1,82 @@
+---
+name: Colored and Styled Histograms
+arrangement: horizontal
+language: plotly_js
+suite: histogram
+order: 8
+sitemap: false
+---
+var x1 = [];
+var x2 = [];
+var y1 = [];
+var y2 = [];
+for (var i = 1; i < 500; i++)
+{
+ k = Math.random();
+ x1.push(k*5);
+ x2.push(k*10);
+ y1.push(k);
+ y2.push(k*2);
+}
+var trace1 = {
+ x: x1,
+ y: y1,
+ name: 'control',
+ autobinx: false,
+ histnorm: "count",
+ marker: {
+ color: "rgba(255, 100, 102, 0.7)",
+ line: {
+ color: "rgba(255, 100, 102, 1)",
+ width: 1
+ }
+ },
+ opacity: 0.5,
+ type: "histogram",
+ xbins: {
+ end: 2.8,
+ size: 0.06,
+ start: .5
+ }
+};
+var trace2 = {
+ x: x2,
+ y: y2,
+ autobinx: false,
+ marker: {
+ color: "rgba(100, 200, 102, 0.7)",
+ line: {
+ color: "rgba(100, 200, 102, 1)",
+ width: 1
+ }
+ },
+ name: "experimental",
+ opacity: 0.75,
+ type: "histogram",
+ xbins: {
+ end: 4,
+ size: 0.06,
+ start: -3.2
+
+ }
+};
+var data = [trace1, trace2];
+var layout = {
+ bargap: 0.05,
+ bargroupgap: 0.2,
+ barmode: "overlay",
+ title: {
+ text: "Sampled Results"
+ },
+ xaxis: {
+ title: {
+ text: "Value"
+ }
+ },
+ yaxis: {
+ title: {
+ text: "Count"
+ }
+ }
+};
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/statistical/histogram/2017-07-07-cumulative-histogram.html b/content/plotly_js/statistical/histogram/2017-07-07-cumulative-histogram.html
new file mode 100644
index 00000000000..27626f36482
--- /dev/null
+++ b/content/plotly_js/statistical/histogram/2017-07-07-cumulative-histogram.html
@@ -0,0 +1,20 @@
+---
+name: Cumulative Histogram
+arrangement: horizontal
+language: plotly_js
+suite: histogram
+order: 9
+sitemap: false
+---
+var x = [];
+for (var i = 0; i < 500; i ++) {
+ x[i] = Math.random();
+}
+
+var trace = {
+ x: x,
+ type: 'histogram',
+ cumulative: {enabled: true}
+ };
+var data = [trace];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/histogram/2018-03-08-histfunc.html b/content/plotly_js/statistical/histogram/2018-03-08-histfunc.html
new file mode 100644
index 00000000000..7e3408bd07c
--- /dev/null
+++ b/content/plotly_js/statistical/histogram/2018-03-08-histfunc.html
@@ -0,0 +1,30 @@
+---
+name: Specify Binning Function
+arrangement: horizontal
+language: plotly_js
+suite: histogram
+order: 10
+sitemap: false
+---
+
+var x = ["Apples","Apples","Apples","Oranges", "Bananas"]
+var y = ["5","10","3","10","5"]
+
+var data = [
+ {
+ histfunc: "count",
+ y: y,
+ x: x,
+ type: "histogram",
+ name: "count"
+ },
+ {
+ histfunc: "sum",
+ y: y,
+ x: x,
+ type: "histogram",
+ name: "sum"
+ }
+]
+
+Plotly.newPlot('myDiv', data)
diff --git a/content/plotly_js/statistical/histogram2d/2015-04-09-2d-histogram-options.html b/content/plotly_js/statistical/histogram2d/2015-04-09-2d-histogram-options.html
new file mode 100644
index 00000000000..70bb4ac3239
--- /dev/null
+++ b/content/plotly_js/statistical/histogram2d/2015-04-09-2d-histogram-options.html
@@ -0,0 +1,37 @@
+---
+name: 2D Histogram Binning and Styling Options
+language: plotly_js
+suite: histogram2d
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+var x = [];
+var y = [];
+for (var i = 0; i < 500; i ++) {
+ x[i] = Math.random();
+ y[i] = Math.random() + 1;
+}
+
+var data = [
+ {
+ x: x,
+ y: y,
+ histnorm: 'probability',
+ autobinx: false,
+ xbins: {
+ start: -3,
+ end: 3,
+ size: 0.1
+ },
+ autobiny: false,
+ ybins: {
+ start: -2.5,
+ end: 4,
+ size: 0.1
+ },
+ colorscale: [['0', 'rgb(12,51,131)'], ['0.25', 'rgb(10,136,186)'], ['0.5', 'rgb(242,211,56)'], ['0.75', 'rgb(242,143,56)'], ['1', 'rgb(217,30,30)']],
+ type: 'histogram2d'
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/histogram2d/2015-04-09-2d-histogram-scatter.html b/content/plotly_js/statistical/histogram2d/2015-04-09-2d-histogram-scatter.html
new file mode 100644
index 00000000000..2fc53fed3a5
--- /dev/null
+++ b/content/plotly_js/statistical/histogram2d/2015-04-09-2d-histogram-scatter.html
@@ -0,0 +1,65 @@
+---
+name: 2D Histogram Overlaid with a Scatter Chart
+language: plotly_js
+suite: histogram2d
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+var x0 = [];
+var y0 = [];
+var x1 = [];
+var y1 = [];
+var x2 = [];
+var y2 = [];
+
+for (var i = 0; i < 500; i ++)
+{
+ x0[i] = Math.random() + 1;
+ y0[i] = Math.random() + 1.5;
+}
+
+for (var i = 0; i < 100; i ++)
+{
+ x1[i] = Math.random();
+ y1[i] = Math.random() + 1;
+}
+
+for (var i = 0; i < 500; i ++)
+{
+ x2[i] = Math.random()*2;
+ y2[i] = Math.random()*3;
+}
+
+var trace1 = {
+ x: x0,
+ y: y0,
+ mode: 'markers',
+ marker: {
+ symbol: 'circle',
+ opacity: 0.7,
+ color:'rgb(200,111,200)',
+ },
+ type: 'scatter',
+};
+var trace2 = {
+ x: x1,
+ y: y1,
+ mode: 'markers',
+ marker: {
+ symbol: 'square',
+ opacity: 0.7,
+ color:'cyan',
+ },
+ type: 'scatter'
+};
+var trace3 = {
+ x: x2,
+ y: y2,
+ type: 'histogram2d',
+ colorscale : [['0' , 'rgb(0,225,100)'],['1', 'rgb(100,0,200)']],
+
+};
+
+var data = [trace1, trace2, trace3];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/histogram2d/2015-04-09-2d-histogram.html b/content/plotly_js/statistical/histogram2d/2015-04-09-2d-histogram.html
new file mode 100644
index 00000000000..4a82ec32f2f
--- /dev/null
+++ b/content/plotly_js/statistical/histogram2d/2015-04-09-2d-histogram.html
@@ -0,0 +1,23 @@
+---
+name: 2D Histogram of a Bivariate Normal Distribution
+language: plotly_js
+suite: histogram2d
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+var x = [];
+var y = [];
+for (var i = 0; i < 500; i ++) {
+ x[i] = Math.random();
+ y[i] = Math.random() + 1;
+}
+
+var data = [
+ {
+ x: x,
+ y: y,
+ type: 'histogram2d'
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/histogram2d/2015-04-09-histogram2d_plotly_js_index.html b/content/plotly_js/statistical/histogram2d/2015-04-09-histogram2d_plotly_js_index.html
new file mode 100644
index 00000000000..859be05212a
--- /dev/null
+++ b/content/plotly_js/statistical/histogram2d/2015-04-09-histogram2d_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to make a D3.js-based 2D histogram in javascript. A 2D histogram
+ is a visualization of a bivariate distribution.
+display_as: statistical
+language: plotly_js
+layout: base
+name: 2D Histograms
+order: 6
+permalink: javascript/2D-Histogram/
+redirect_from: javascript-graphing-library/2D-Histogram/
+thumbnail: thumbnail/histogram2d.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","histogram2d" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/statistical/histogram2dcontour/2018-01-16-basic-hist2dcontour.html b/content/plotly_js/statistical/histogram2dcontour/2018-01-16-basic-hist2dcontour.html
new file mode 100644
index 00000000000..9fb8021ced2
--- /dev/null
+++ b/content/plotly_js/statistical/histogram2dcontour/2018-01-16-basic-hist2dcontour.html
@@ -0,0 +1,24 @@
+---
+name: Basic 2D Histogram Contour
+language: plotly_js
+suite: hist2dcontour
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+var x = [];
+var y = [];
+for (var i = 0; i < 500; i ++) {
+ x[i] = Math.random();
+ y[i] = Math.random() + 1;
+}
+
+var data = [
+ {
+ x: x,
+ y: y,
+ type: 'histogram2dcontour'
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/histogram2dcontour/2018-01-30-colorscale-hist2dcontour.html b/content/plotly_js/statistical/histogram2dcontour/2018-01-30-colorscale-hist2dcontour.html
new file mode 100644
index 00000000000..4bc7f9e29f0
--- /dev/null
+++ b/content/plotly_js/statistical/histogram2dcontour/2018-01-30-colorscale-hist2dcontour.html
@@ -0,0 +1,25 @@
+---
+name: 2D Histogram Contour Colorscale
+language: plotly_js
+suite: hist2dcontour
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+var x = [];
+var y = [];
+for (var i = 0; i < 500; i ++) {
+ x[i] = Math.random();
+ y[i] = Math.random() + 1;
+}
+
+var data = [
+ {
+ x: x,
+ y: y,
+ colorscale: 'Blues',
+ type: 'histogram2dcontour'
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/histogram2dcontour/2018-01-30-hist2dcontour-plotlyjs-index.html b/content/plotly_js/statistical/histogram2dcontour/2018-01-30-hist2dcontour-plotlyjs-index.html
new file mode 100644
index 00000000000..031cc44bbfd
--- /dev/null
+++ b/content/plotly_js/statistical/histogram2dcontour/2018-01-30-hist2dcontour-plotlyjs-index.html
@@ -0,0 +1,13 @@
+---
+description: How to make D3.js-based 2D Histogram Contour plots in Plotly.js.
+display_as: statistical
+language: plotly_js
+layout: base
+name: 2D Histogram Contour
+order: 11
+permalink: javascript/2d-histogram-contour/
+thumbnail: thumbnail/hist2dcontour.png
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","hist2dcontour" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/statistical/histogram2dcontour/2018-01-30-styled-hist2dcontour.html b/content/plotly_js/statistical/histogram2dcontour/2018-01-30-styled-hist2dcontour.html
new file mode 100644
index 00000000000..ecbf306d843
--- /dev/null
+++ b/content/plotly_js/statistical/histogram2dcontour/2018-01-30-styled-hist2dcontour.html
@@ -0,0 +1,40 @@
+---
+name: Styled 2D Histogram Contour
+language: plotly_js
+suite: hist2dcontour
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+var x = [];
+var y = [];
+for (var i = 0; i < 500; i ++) {
+ x[i] = Math.random();
+ y[i] = Math.random() + 1;
+}
+
+var data = [
+ {
+ x: x,
+ y: y,
+ colorscale: 'Blues',
+ type: 'histogram2dcontour',
+ contours: {
+ showlabels: true,
+ labelfont: {
+ family: 'Raleway',
+ color: 'white'
+ }
+ },
+ hoverlabel: {
+ bgcolor: 'white',
+ bordercolor: 'black',
+ font: {
+ family: 'Raleway',
+ color: 'black'
+ }
+ }
+ }
+];
+Plotly.newPlot('myDiv', data);
diff --git a/content/plotly_js/statistical/parcats/2018-09-17-basic-parcats-counts.html b/content/plotly_js/statistical/parcats/2018-09-17-basic-parcats-counts.html
new file mode 100644
index 00000000000..6e6c9cfca3b
--- /dev/null
+++ b/content/plotly_js/statistical/parcats/2018-09-17-basic-parcats-counts.html
@@ -0,0 +1,28 @@
+---
+name: Basic Parallel Categories Diagram with Counts
+arrangement: horizontal
+language: plotly_js
+suite: parcats
+order: 2
+sitemap: false
+markdown_content: |
+ If the frequency of occurrence for each combination of attributes is known in advance, this can be specified using
+ the `counts` property
+---
+var trace1 = {
+ type: 'parcats',
+ dimensions: [
+ {label: 'Hair',
+ values: ['Black', 'Brown', 'Brown', 'Brown', 'Red']},
+ {label: 'Eye',
+ values: ['Brown', 'Brown', 'Brown', 'Blue', 'Blue']},
+ {label: 'Sex',
+ values: ['Female', 'Male', 'Female', 'Male', 'Male']}],
+ counts: [6, 10, 40, 23, 7]
+};
+
+var data = [ trace1 ];
+
+var layout = {width: 600};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/statistical/parcats/2018-09-17-basic-parcats.html b/content/plotly_js/statistical/parcats/2018-09-17-basic-parcats.html
new file mode 100644
index 00000000000..a3b73df997b
--- /dev/null
+++ b/content/plotly_js/statistical/parcats/2018-09-17-basic-parcats.html
@@ -0,0 +1,44 @@
+---
+name: Basic Parallel Categories Diagram
+arrangement: horizontal
+language: plotly_js
+suite: parcats
+order: 1
+sitemap: false
+markdown_content: |
+ The parallel categories diagram is a visualization of multi-dimensional categorical data sets. Each variable in
+ the data set is represented by a column of rectangles, where each rectangle corresponds to a discrete value
+ taken on by that variable. The relative heights of the rectangles reflect the relative frequency of occurrence of
+ the corresponding value.
+
+ Combinations of category rectangles across dimensions are connected by ribbons, where the height of the ribbon
+ corresponds to the relative frequency of occurrence of the combination of categories in the data set.
+
+ In this example, we visualize the hair color, eye color, and sex of a sample of 8 people. Hovering over a
+ category rectangle displays a tooltip with the number of people with that single trait. Hovering over a ribbon
+ in the diagram displays a tooltip with the number of people with a particular combination of the three
+ traits connected by the ribbon.
+
+ The dimension labels can be dragged horizontally to reorder the dimensions and the category rectangles can be
+ dragged vertically to reorder the categories within a dimension.
+---
+var trace1 = {
+ type: 'parcats',
+ dimensions: [
+ {label: 'Hair',
+ values: ['Black', 'Black', 'Black', 'Brown',
+ 'Brown', 'Brown', 'Red', 'Brown']},
+ {label: 'Eye',
+ values: ['Brown', 'Brown', 'Brown', 'Brown',
+ 'Brown', 'Blue', 'Blue', 'Blue']},
+ {label: 'Sex',
+ values: ['Female', 'Female', 'Female', 'Male',
+ 'Female', 'Male', 'Male', 'Male']}]
+};
+
+var data = [ trace1 ];
+
+var layout = {width: 600};
+
+Plotly.newPlot('myDiv', data, layout);
+
diff --git a/content/plotly_js/statistical/parcats/2018-09-17-brushing-parcats.html b/content/plotly_js/statistical/parcats/2018-09-17-brushing-parcats.html
new file mode 100644
index 00000000000..307c71271bc
--- /dev/null
+++ b/content/plotly_js/statistical/parcats/2018-09-17-brushing-parcats.html
@@ -0,0 +1,100 @@
+---
+name: Parallel Categories Linked Brushing
+arrangement: horizontal
+language: plotly_js
+suite: parcats
+order: 4
+sitemap: false
+markdown_content: |
+ This example demonstrates how the `plotly_selected` and `plotly_click` events can be used to implement linked
+ brushing between 3 categorical dimensions displayed with a `parcats` trace and 2 continuous dimensions displayed
+ with a `scatter` trace.
+
+ This example also sets the `line.shape` property to `hspline` to cause the ribbons to curve between categories.
+---
+var gd = document.getElementById("myDiv");
+var categoricalDimensionLabels = [
+ 'body-style',
+ 'drive-wheels',
+ 'fuel-type'
+];
+
+d3.csv(
+ 'https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv',
+ function(carsData) {
+ // Preprocess Data
+ var mpg = carsData.map(function(row) { return row['highway-mpg'] });
+ var horsepower = carsData.map(function(row) { return row['horsepower'] });
+
+ var categoricalDimensions = categoricalDimensionLabels.map(
+ function(dimLabel) {
+ // Extract column
+ var values = carsData.map(function(row) {
+ return row[dimLabel]
+ });
+
+ return {
+ values: values,
+ label: dimLabel
+ };
+ });
+
+ // Colors
+ var color = new Int8Array(carsData.length);
+ var colorscale = [[0, 'gray'], [1, 'firebrick']];
+
+ // Layout
+ var layout = {
+ width: 600,
+ height: 800,
+ xaxis: {title: {text: 'Horsepower'}},
+ yaxis: {domain: [0.6, 1], title: {text: 'MPG'}},
+ dragmode: 'lasso',
+ hovermode: 'closest'
+ };
+
+ // Build Traces
+ var traces = [
+ {type: 'scatter',
+ x: horsepower,
+ y: mpg,
+ marker: {color: 'gray'},
+ mode: 'markers',
+ selected: {'marker': {'color': 'firebrick'}},
+ unselected: {'marker': {'opacity': 0.3}}
+ },
+ {type: 'parcats',
+ domain: {y: [0, 0.4]},
+ dimensions:categoricalDimensions,
+ line: {
+ colorscale: colorscale,
+ cmin: 0,
+ cmax: 1,
+ color: color,
+ shape: 'hspline'},
+ labelfont: {size: 14}
+ }
+ ];
+
+ // Make plot
+ Plotly.newPlot('myDiv', traces, layout);
+
+ // Update color on selection and click
+ var update_color = function(points_data) {
+ var new_color = new Int8Array(carsData.length);
+ var selection = []
+ for(var i = 0; i < points_data.points.length; i++) {
+ new_color[points_data.points[i].pointNumber] = 1;
+ selection.push(points_data.points[i].pointNumber);
+ }
+
+ // Update selected points in scatter plot
+ Plotly.restyle('myDiv', {'selectedpoints': [selection]}, 0)
+
+ // Update color of selected paths in parallel categories diagram
+ Plotly.restyle('myDiv', {'line.color': [new_color]}, 1)
+ };
+
+ gd.on('plotly_selected', update_color);
+ gd.on('plotly_click', update_color);
+ });
diff --git a/content/plotly_js/statistical/parcats/2018-09-17-multi-brushing-parcats.html b/content/plotly_js/statistical/parcats/2018-09-17-multi-brushing-parcats.html
new file mode 100644
index 00000000000..33dd8e58450
--- /dev/null
+++ b/content/plotly_js/statistical/parcats/2018-09-17-multi-brushing-parcats.html
@@ -0,0 +1,109 @@
+---
+name: Parallel Categories with Multi-Color Linked Brushing
+plot_url: https://codepen.io/plotly/embed/EOjmrW/?height=801&theme-id=15263&default-tab=result
+arrangement: horizontal
+language: plotly_js
+suite: parcats
+order: 5
+sitemap: false
+markdown_content: |
+ This example extends the previous example to support brushing with multiple colors. The radio buttons above may
+ be used to select the active color, and this color will be applied when points are selected in the `scatter`
+ trace and when categories or ribbons are clicked in the `parcats` trace.
+---
+var gd = document.getElementById('myDiv');
+var categoricalDimensionLabels = [
+ 'body-style',
+ 'drive-wheels',
+ 'fuel-type'
+];
+
+d3.csv(
+ 'https://raw.githubusercontent.com/plotly/datasets/master/imports-85.csv',
+ function(carsData) {
+ // Preprocess Data
+ var mpg = carsData.map(function(row) { return row['highway-mpg'] });
+ var horsepower = carsData.map(function(row) { return row['horsepower'] });
+
+ var categoricalDimensions = categoricalDimensionLabels.map(
+ function(dimLabel) {
+ // Extract column
+ var values = carsData.map(function(row) {
+ return row[dimLabel]
+ });
+
+ return {
+ values: values,
+ label: dimLabel
+ };
+ }
+ );
+
+ // Colors
+ var color = new Int8Array(carsData.length);
+ var colorscale = [[0, 'gray'], [0.33, 'gray'],
+ [0.33, 'firebrick'], [0.66, 'firebrick'],
+ [0.66, 'blue'], [1.0, 'blue']];
+
+ // Layout
+ var layout = {
+ width: 600,
+ height: 800,
+ xaxis: {title: {text: 'Horsepower'}},
+ yaxis: {domain: [0.6, 1], title: {text: 'MPG'}},
+ dragmode: 'lasso',
+ hovermode: 'closest'
+ };
+
+ // Build Traces
+ var traces = [
+ {type: 'scatter',
+ x: horsepower,
+ y: mpg,
+ marker: {color: color,
+ colorscale: colorscale,
+ cmin: -0.5,
+ cmax: 2.5,
+ showscale: true,
+ colorbar: {tickvals: [0, 1, 2],
+ ticktext: ['None', 'Red', 'Blue']}},
+ mode: 'markers',
+ },
+ {type: 'parcats',
+ domain: {y: [0, 0.4]},
+ dimensions:categoricalDimensions,
+ line: {
+ colorscale: colorscale,
+ cmin: -0.5,
+ cmax: 2.5,
+ color: color,
+ shape: 'hspline'},
+ labelfont: {size: 14}
+ }
+ ];
+
+ // Make plot
+ Plotly.newPlot('myDiv', traces, layout);
+
+ // Update color on selection and click
+ var update_color = function(points_data) {
+ var new_color = color;
+ var color_value = document.querySelector('input[name="rate"]:checked').value;
+ console.log(color_value);
+ var selection = []
+ for(var i = 0; i < points_data.points.length; i++) {
+ new_color[points_data.points[i].pointNumber] = color_value;
+ selection.push(points_data.points[i].pointNumber);
+ }
+
+ // Update selected points in scatter plot
+ Plotly.restyle'myDiv', {'marker.color': [new_color]}, 0)
+
+ // Update color of selected paths in parallel categories diagram
+ Plotly.restyle'myDiv',
+ {'line.color': [new_color]}, 1)
+ };
+
+ gd.on('plotly_selected', update_color);
+ gd.on('plotly_click', update_color);
+ });
diff --git a/content/plotly_js/statistical/parcats/2018-09-17-parcats_plotly_js_index.html b/content/plotly_js/statistical/parcats/2018-09-17-parcats_plotly_js_index.html
new file mode 100644
index 00000000000..31b4e6dff89
--- /dev/null
+++ b/content/plotly_js/statistical/parcats/2018-09-17-parcats_plotly_js_index.html
@@ -0,0 +1,13 @@
+---
+description: How to make parallel categories diagrams in JavaScript
+display_as: statistical
+language: plotly_js
+layout: base
+name: Parallel Categories Diagram
+order: 9
+permalink: javascript/parallel-categories-diagram/
+thumbnail: thumbnail/parcats.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","parcats" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/statistical/parcats/2018-09-17-titanic-parcats.html b/content/plotly_js/statistical/parcats/2018-09-17-titanic-parcats.html
new file mode 100644
index 00000000000..6c36ff11e99
--- /dev/null
+++ b/content/plotly_js/statistical/parcats/2018-09-17-titanic-parcats.html
@@ -0,0 +1,65 @@
+---
+name: Mutli-Color Parallel Categories Diagram
+arrangement: horizontal
+language: plotly_js
+suite: parcats
+order: 3
+sitemap: false
+markdown_content: |
+ The color of the ribbons can be specified with the `line.color` property. Similar to other trace types, this
+ property may be set to an array of numbers, which are then mapped to colors according to the the colorscale
+ specified in the `line.colorscale` property.
+
+ Here is an example of visualizing the survival rate of passengers in the titanic dataset, where the ribbons are
+ colored based on survival outcome.
+
+ By setting the `hoveron` property to `'color'` and the `hoverinfo` property to `'count+probability'` the tooltips
+ now display count and probability information for each color (outcome) per category.
+
+ By setting the `arrangement` property to `'freeform'` it is now possible to drag categories horizontally to
+ reorder dimensions as well as vertically to reorder categories within the dimension.
+---
+var gd = document.getElementById('myDiv');
+
+d3.csv(
+ "https://raw.githubusercontent.com/plotly/datasets/master/titanic.csv",
+ function(titanicData) {
+ var classDim = {
+ values: titanicData.map(function(row) {return row['Pclass']}),
+ categoryorder: 'category ascending',
+ label: "Class"
+ };
+
+ var genderDim = {
+ values: titanicData.map(function(row) {return row['Sex']}),
+ label: "Gender"
+ };
+
+ var survivalDim = {
+ values: titanicData.map(function(row) {return row['Survived']}),
+ label: "Outcome",
+ categoryarray: [0, 1],
+ ticktext: ['perished', 'survived'],
+ };
+
+ var color = survivalDim.values;
+ var colorscale = [[0, 'lightsteelblue'], [1, 'mediumseagreen']];
+
+ // Build Traces
+ var traces = [
+ {type: 'parcats',
+ dimensions: [classDim, genderDim, survivalDim],
+ line: {color: color,
+ colorscale: colorscale},
+ hoveron: 'color',
+ hoverinfo: 'count+probability',
+ labelfont: {size: 14},
+ arrangement: 'freeform'
+ }
+ ];
+
+ var layout = {width: 600};
+
+ // Make plot
+ Plotly.newPlot('myDiv', traces, layout);
+ });
diff --git a/content/plotly_js/statistical/splom/2018-05-23-diabetes.html b/content/plotly_js/statistical/splom/2018-05-23-diabetes.html
new file mode 100644
index 00000000000..6d7011df9f3
--- /dev/null
+++ b/content/plotly_js/statistical/splom/2018-05-23-diabetes.html
@@ -0,0 +1,97 @@
+---
+name: Splom of Diabetes Dataset
+language: plotly_js
+suite: splom
+order: 2
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ Diabetes dataset is downloaded from [kaggle](https://www.kaggle.com/uciml/pima-indians-diabetes-database/data). It is used to predict the onset of diabetes based on 8 diagnostic measures. The diabetes file contains the diagnostic measures for 768 patients, that are labeled as non-diabetic (Outcome=0), respectively diabetic (Outcome=1). The splom associated to the 8 variables can illustrate the strength of the relationship between pairs of measures for diabetic/nondiabetic patients.
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/diabetes.csv', function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+ text = []
+ for (i=0; i < unpack(rows, 'Outcome').length; i++) {
+ if (unpack(rows, 'Outcome')[i] == "0") {
+ text.push("Diabetic")
+ } else {
+ text.push("Non-Diabetic")
+ }
+ }
+
+ var pl_colorscale=[
+ [0.0, '#119dff'],
+ [0.5, '#119dff'],
+ [0.5, '#ef553b'],
+ [1, '#ef553b']
+ ]
+
+ var axis = () => ({
+ showline:false,
+ zeroline:false,
+ gridcolor:'#ffff',
+ ticklen:2,
+ tickfont:{size:10},
+ title:{font:{size:12}}
+ })
+
+ var data = [{
+ type: 'splom',
+ dimensions: [
+ {label:'Pregnancies', values:unpack(rows, 'Pregnancies')},
+ {label:'Glucose', values:unpack(rows, 'Glucose')},
+ {label:'BloodPressure', values:unpack(rows, 'BloodPressure')},
+ {label:'SkinThickness', values:unpack(rows, 'SkinThickness')},
+ {label:'Insulin', values:unpack(rows, 'Insulin')},
+ {label:'BMI', values:unpack(rows, 'BMI')},
+ {label:'DiabPedigreeFun', values:unpack(rows, 'DiabetesPedigreeFunction')},
+ {label:'Age', values:unpack(rows, 'Age')}
+ ],
+ text:text,
+ marker: {
+ color: unpack(rows, 'Outcome'),
+ colorscale:pl_colorscale,
+ size: 5,
+ line: {
+ color: 'white',
+ width: 0.5
+ }
+ }
+ }]
+
+ var layout = {
+ title: {
+ text: "Scatterplot Matrix (SPLOM) for Diabetes Dataset[1] "
+ },
+ height: 1000,
+ width: 1000,
+ autosize: false,
+ hovermode:'closest',
+ dragmode:'select',
+ plot_bgcolor:'rgba(240,240,240, 0.95)',
+ xaxis:axis(),
+ yaxis:axis(),
+ xaxis2:axis(),
+ xaxis3:axis(),
+ xaxis4:axis(),
+ xaxis5:axis(),
+ xaxis6:axis(),
+ xaxis7:axis(),
+ xaxis8:axis(),
+ yaxis2:axis(),
+ yaxis3:axis(),
+ yaxis4:axis(),
+ yaxis5:axis(),
+ yaxis6:axis(),
+ yaxis7:axis(),
+ yaxis8:axis()
+ }
+
+ Plotly.react('myDiv', data, layout);
+
+});
diff --git a/content/plotly_js/statistical/splom/2018-05-23-iris.html b/content/plotly_js/statistical/splom/2018-05-23-iris.html
new file mode 100644
index 00000000000..e59f476cd3e
--- /dev/null
+++ b/content/plotly_js/statistical/splom/2018-05-23-iris.html
@@ -0,0 +1,87 @@
+---
+name: Splom of Iris Dataset
+language: plotly_js
+suite: splom
+order: 1
+sitemap: false
+arrangement: horizontal
+markdown_content: |
+ The Iris dataset contains four data variables, sepal length, sepal width, petal length petal width, for 150 iris flowers. The flowers are labeled as Iris-setosa, Iris-versicolor, Iris-virginica.
+---
+
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/iris-data.csv', function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key.replace('.',' ')]; });
+ }
+
+ colors = []
+ for (i=0; i < unpack(rows, 'class').length; i++) {
+ if (unpack(rows, 'class')[i] == "Iris-setosa") {
+ colors.push(0)
+ } else if (unpack(rows, 'class')[i] == "Iris-versicolor") {
+ colors.push(0.5)
+ } else if (unpack(rows, 'class')[i] == "Iris-virginica") {
+ colors.push(1)
+ }
+ }
+
+ var pl_colorscale=[
+ [0.0, '#19d3f3'],
+ [0.333, '#19d3f3'],
+ [0.333, '#e763fa'],
+ [0.666, '#e763fa'],
+ [0.666, '#636efa'],
+ [1, '#636efa']
+ ]
+
+ var axis = () => ({
+ showline:false,
+ zeroline:false,
+ gridcolor:'#ffff',
+ ticklen:4
+ })
+
+ var data = [{
+ type: 'splom',
+ dimensions: [
+ {label:'sepal length', values:unpack(rows,'sepal length')},
+ {label:'sepal width', values:unpack(rows,'sepal width')},
+ {label:'petal length', values:unpack(rows,'petal length')},
+ {label:'petal width', values:unpack(rows,'petal width')}
+ ],
+ text: unpack(rows, 'class'),
+ marker: {
+ color: colors,
+ colorscale:pl_colorscale,
+ size: 7,
+ line: {
+ color: 'white',
+ width: 0.5
+ }
+ }
+ }]
+
+ var layout = {
+ title: {
+ text: 'Iris Data set'
+ },
+ height: 800,
+ width: 800,
+ autosize: false,
+ hovermode:'closest',
+ dragmode:'select',
+ plot_bgcolor:'rgba(240,240,240, 0.95)',
+ xaxis:axis(),
+ yaxis:axis(),
+ xaxis2:axis(),
+ xaxis3:axis(),
+ xaxis4:axis(),
+ yaxis2:axis(),
+ yaxis3:axis(),
+ yaxis4:axis()
+ }
+
+ Plotly.react('myDiv', data, layout)
+
+});
diff --git a/content/plotly_js/statistical/splom/2018-05-24-splom-plotlyjs-index.html b/content/plotly_js/statistical/splom/2018-05-24-splom-plotlyjs-index.html
new file mode 100644
index 00000000000..76166e8c98e
--- /dev/null
+++ b/content/plotly_js/statistical/splom/2018-05-24-splom-plotlyjs-index.html
@@ -0,0 +1,13 @@
+---
+description: How to make D3.js-based splom in Plotly.js.
+display_as: statistical
+language: plotly_js
+layout: base
+name: Splom
+order: 10
+permalink: javascript/splom/
+thumbnail: thumbnail/splom_image.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","splom" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/statistical/violin/2018-01-16-advanced-violin.html b/content/plotly_js/statistical/violin/2018-01-16-advanced-violin.html
new file mode 100644
index 00000000000..d2b0937d426
--- /dev/null
+++ b/content/plotly_js/statistical/violin/2018-01-16-advanced-violin.html
@@ -0,0 +1,581 @@
+---
+name: Advanced Violin Plot
+language: plotly_js
+suite: violin
+order: 6
+sitemap: false
+arrangement: horizontal
+width: 700
+---
+
+var trace1 = {
+ text: "sample length: 32",
+ hoveron: "points+kde",
+ meanline: {
+ visible: true
+ },
+ legendgroup: "F",
+ scalegroup: "F",
+ points: "all",
+ pointpos: 1,
+ box: {
+ visible: true
+ },
+ jitter: 0,
+ scalemode: "count",
+ marker: {
+ line: {
+ width: 2,
+ color: "#bebada"
+ },
+ symbol: "line-ns"
+ },
+ showlegend: false,
+ side: "positive",
+ type: "violin",
+ name: "F",
+ span: [
+ 0
+ ],
+ line: {
+ color: "#bebada"
+ },
+ y0: "Thursday",
+ x: [
+ 10.07,
+ 34.83,
+ 10.65,
+ 12.43,
+ 24.08,
+ 13.42,
+ 12.48,
+ 29.8,
+ 14.52,
+ 11.38,
+ 20.27,
+ 11.17,
+ 12.26,
+ 18.26,
+ 8.51,
+ 10.33,
+ 14.15,
+ 13.16,
+ 17.47,
+ 27.05,
+ 16.43,
+ 8.35,
+ 18.64,
+ 11.87,
+ 19.81,
+ 43.11,
+ 13.0,
+ 12.74,
+ 13.0,
+ 16.4,
+ 16.47,
+ 18.78
+ ],
+ orientation: "h"
+ }
+
+
+var trace2 = {
+ text: "sample length: 30",
+ hoveron: "points+kde",
+ meanline: {
+ visible: true
+ },
+ legendgroup: "M",
+ scalegroup: "M",
+ points: "all",
+ pointpos: -0.6,
+ box: {
+ visible: true
+ },
+ jitter: 0,
+ scalemode: "count",
+ marker: {
+ line: {
+ width: 2,
+ color: "#8dd3c7"
+ },
+ symbol: "line-ns"
+ },
+ showlegend: false,
+ side: "negative",
+ type: "violin",
+ name: "M",
+ span: [
+ 0
+ ],
+ line: {
+ color: "#8dd3c7"
+ },
+ y0: "Thursday",
+ x: [
+ 27.2,
+ 22.76,
+ 17.29,
+ 19.44,
+ 16.66,
+ 32.68,
+ 15.98,
+ 13.03,
+ 18.28,
+ 24.71,
+ 21.16,
+ 11.69,
+ 14.26,
+ 15.95,
+ 8.52,
+ 22.82,
+ 19.08,
+ 16.0,
+ 34.3,
+ 41.19,
+ 9.78,
+ 7.51,
+ 28.44,
+ 15.48,
+ 16.58,
+ 7.56,
+ 10.34,
+ 13.51,
+ 18.71,
+ 20.53
+ ],
+ orientation: "h"
+ }
+
+var trace3 = {
+ text: "sample length: 9",
+ hoveron: "points+kde",
+ meanline: {
+ visible: true
+ },
+ legendgroup: "F",
+ scalegroup: "F",
+ points: "all",
+ pointpos: 0.4,
+ box: {
+ visible: true
+ },
+ jitter: 0,
+ scalemode: "count",
+ marker: {
+ line: {
+ width: 2,
+ color: "#bebada"
+ },
+ symbol: "line-ns"
+ },
+ showlegend: false,
+ side: "positive",
+ type: "violin",
+ name: "F",
+ span: [
+ 0
+ ],
+ line: {
+ color: "#bebada"
+ },
+ y0: "Friday",
+ x: [
+ 5.75,
+ 16.32,
+ 22.75,
+ 11.35,
+ 15.38,
+ 13.42,
+ 15.98,
+ 16.27,
+ 10.09
+ ],
+ orientation: "h"
+ }
+
+
+var trace4= {
+ text: "sample length: 10",
+ hoveron: "points+kde",
+ meanline: {
+ visible: true
+ },
+ legendgroup: "M",
+ scalegroup: "M",
+ points: "all",
+ pointpos: -0.3,
+ box: {
+ visible: true
+ },
+ jitter: 0,
+ scalemode: "count",
+ marker: {
+ line: {
+ width: 2,
+ color: "#8dd3c7"
+ },
+ symbol: "line-ns"
+ },
+ showlegend: false,
+ side: "negative",
+ type: "violin",
+ name: "M",
+ span: [
+ 0
+ ],
+ line: {
+ color: "#8dd3c7"
+ },
+ y0: "Friday",
+ x: [
+ 28.97,
+ 22.49,
+ 40.17,
+ 27.28,
+ 12.03,
+ 21.01,
+ 12.46,
+ 12.16,
+ 8.58,
+ 13.42
+ ],
+ orientation: "h"
+ }
+
+var trace5 = {
+ text: "sample length: 28",
+ hoveron: "points+kde",
+ meanline: {
+ visible: true
+ },
+ legendgroup: "F",
+ scalegroup: "F",
+ points: "all",
+ pointpos: 0.55,
+ box: {
+ visible: true
+ },
+ jitter: 0,
+ scalemode: "count",
+ marker: {
+ line: {
+ width: 2,
+ color: "#bebada"
+ },
+ symbol: "line-ns"
+ },
+ showlegend: true,
+ side: "positive",
+ type: "violin",
+ name: "F",
+ span: [
+ 0
+ ],
+ line: {
+ color: "#bebada"
+ },
+ y0: "Saturday",
+ x: [
+ 20.29,
+ 15.77,
+ 19.65,
+ 15.06,
+ 20.69,
+ 16.93,
+ 26.41,
+ 16.45,
+ 3.07,
+ 17.07,
+ 26.86,
+ 25.28,
+ 14.73,
+ 44.3,
+ 22.42,
+ 20.92,
+ 14.31,
+ 7.25,
+ 10.59,
+ 10.63,
+ 12.76,
+ 13.27,
+ 28.17,
+ 12.9,
+ 30.14,
+ 22.12,
+ 35.83,
+ 27.18
+ ],
+ orientation: "h"
+ }
+
+var trace4 = {
+ text: "sample length: 59",
+ hoveron: "points+kde",
+ meanline: {
+ visible: true
+ },
+ legendgroup: "M",
+ scalegroup: "M",
+ points: "all",
+ pointpos: -1.1,
+ box: {
+ visible: true
+ },
+ jitter: 0,
+ scalemode: "count",
+ marker: {
+ line: {
+ width: 2,
+ color: "#8dd3c7"
+ },
+ symbol: "line-ns"
+ },
+ showlegend: true,
+ side: "negative",
+ type: "violin",
+ name: "M",
+ span: [
+ 0
+ ],
+ line: {
+ color: "#8dd3c7"
+ },
+ y0: "Saturday",
+ x: [
+ 20.65,
+ 17.92,
+ 39.42,
+ 19.82,
+ 17.81,
+ 13.37,
+ 12.69,
+ 21.7,
+ 9.55,
+ 18.35,
+ 17.78,
+ 24.06,
+ 16.31,
+ 18.69,
+ 31.27,
+ 16.04,
+ 38.01,
+ 11.24,
+ 48.27,
+ 20.29,
+ 13.81,
+ 11.02,
+ 18.29,
+ 17.59,
+ 20.08,
+ 20.23,
+ 15.01,
+ 12.02,
+ 10.51,
+ 17.92,
+ 15.36,
+ 20.49,
+ 25.21,
+ 18.24,
+ 14.0,
+ 50.81,
+ 15.81,
+ 26.59,
+ 38.73,
+ 24.27,
+ 30.06,
+ 25.89,
+ 48.33,
+ 28.15,
+ 11.59,
+ 7.74,
+ 20.45,
+ 13.28,
+ 24.01,
+ 15.69,
+ 11.61,
+ 10.77,
+ 15.53,
+ 10.07,
+ 12.6,
+ 32.83,
+ 29.03,
+ 22.67,
+ 17.82
+ ],
+ orientation: "h"
+ }
+
+var trace6 = {
+ text: "sample length: 18",
+ hoveron: "points+kde",
+ meanline: {
+ visible: true
+ },
+ legendgroup: "F",
+ scalegroup: "F",
+ points: "all",
+ pointpos: 0.45,
+ box: {
+ visible: true
+ },
+ jitter: 0,
+ scalemode: "count",
+ marker: {
+ line: {
+ width: 2,
+ color: "#bebada"
+ },
+ symbol: "line-ns"
+ },
+ showlegend: false,
+ side: "positive",
+ type: "violin",
+ name: "F",
+ span: [
+ 0
+ ],
+ line: {
+ color: "#bebada"
+ },
+ y0: "Sunday",
+ x: [
+ 16.99,
+ 24.59,
+ 35.26,
+ 14.83,
+ 10.33,
+ 16.97,
+ 10.29,
+ 34.81,
+ 25.71,
+ 17.31,
+ 29.85,
+ 25.0,
+ 13.39,
+ 16.21,
+ 17.51,
+ 9.6,
+ 20.9,
+ 18.15
+ ],
+ orientation: "h"
+ }
+
+var trace7 = {
+ text: "sample length: 58",
+ hoveron: "points+kde",
+ meanline: {
+ visible: true
+ },
+ legendgroup: "M",
+ scalegroup: "M",
+ points: "all",
+ pointpos: -0.9,
+ box: {
+ visible: true
+ },
+ jitter: 0,
+ scalemode: "count",
+ marker: {
+ line: {
+ width: 2,
+ color: "#8dd3c7"
+ },
+ symbol: "line-ns"
+ },
+ showlegend: false,
+ side: "negative",
+ type: "violin",
+ name: "M",
+ span: [
+ 0
+ ],
+ line: {
+ color: "#8dd3c7"
+ },
+ y0: "Sunday",
+ x: [
+ 10.34,
+ 21.01,
+ 23.68,
+ 25.29,
+ 8.77,
+ 26.88,
+ 15.04,
+ 14.78,
+ 10.27,
+ 15.42,
+ 18.43,
+ 21.58,
+ 16.29,
+ 17.46,
+ 13.94,
+ 9.68,
+ 30.4,
+ 18.29,
+ 22.23,
+ 32.4,
+ 28.55,
+ 18.04,
+ 12.54,
+ 9.94,
+ 25.56,
+ 19.49,
+ 38.07,
+ 23.95,
+ 29.93,
+ 14.07,
+ 13.13,
+ 17.26,
+ 24.55,
+ 19.77,
+ 48.17,
+ 16.49,
+ 21.5,
+ 12.66,
+ 13.81,
+ 24.52,
+ 20.76,
+ 31.71,
+ 7.25,
+ 31.85,
+ 16.82,
+ 32.9,
+ 17.89,
+ 14.48,
+ 34.63,
+ 34.65,
+ 23.33,
+ 45.35,
+ 23.17,
+ 40.55,
+ 20.69,
+ 30.46,
+ 23.1,
+ 15.69
+ ],
+ orientation: "h"
+ }
+
+var data = [trace1,trace2,trace3,trace4,trace5,trace6,trace7]
+
+var layout = {
+ hovermode: "closest",
+ width: 400,
+ yaxis: {
+ showgrid: true
+ },
+ title: {
+ text: "Total bill distributionscaled by number of bills per gender"
+ },
+ legend: {
+ tracegroupgap: 0
+ },
+ violingap: 0,
+ violingroupgap: 0,
+ violinmode: "overlay",
+ height: 700
+ }
+
+Plotly.newPlot("myDiv", data, layout)
diff --git a/content/plotly_js/statistical/violin/2018-01-16-basic-violin.html b/content/plotly_js/statistical/violin/2018-01-16-basic-violin.html
new file mode 100644
index 00000000000..98d4efb0985
--- /dev/null
+++ b/content/plotly_js/statistical/violin/2018-01-16-basic-violin.html
@@ -0,0 +1,45 @@
+---
+name: Basic Violin Plot
+language: plotly_js
+suite: violin
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv", function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+var data = [{
+ type: 'violin',
+ y: unpack(rows, 'total_bill'),
+ points: 'none',
+ box: {
+ visible: true
+ },
+ boxpoints: false,
+ line: {
+ color: 'black'
+ },
+ fillcolor: '#8dd3c7',
+ opacity: 0.6,
+ meanline: {
+ visible: true
+ },
+ x0: "Total Bill"
+}]
+
+var layout = {
+ title: {
+ text: ""
+ },
+ yaxis: {
+ zeroline: false
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/statistical/violin/2018-01-16-grouped-violin.html b/content/plotly_js/statistical/violin/2018-01-16-grouped-violin.html
new file mode 100644
index 00000000000..8d3e1ddaf6d
--- /dev/null
+++ b/content/plotly_js/statistical/violin/2018-01-16-grouped-violin.html
@@ -0,0 +1,63 @@
+---
+name: Grouped Violin Plot
+language: plotly_js
+suite: violin
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+// need to fix data
+
+d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv", function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+var data = [{
+ type: 'violin',
+ x: unpack(rows, 'day'),
+ y: unpack(rows, 'total_bill'),
+ legendgroup: 'M',
+ scalegroup: 'M',
+ name: 'M',
+ box: {
+ visible: true
+ },
+ line: {
+ color: 'blue',
+ },
+ meanline: {
+ visible: true
+ }
+}, {
+ type: 'violin',
+ x: unpack(rows, 'day'),
+ y: unpack(rows, 'total_bill'),
+ legendgroup: 'F',
+ scalegroup: 'F',
+ name: 'F',
+ box: {
+ visible: true
+ },
+ line: {
+ color: 'pink',
+ },
+ meanline: {
+ visible: true
+ }
+}]
+
+var layout = {
+ title: {
+ text: "Grouped Violin Plot"
+ },
+ yaxis: {
+ zeroline: false
+ },
+ violinmode: 'group'
+}
+
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/statistical/violin/2018-01-16-horizontal-violin.html b/content/plotly_js/statistical/violin/2018-01-16-horizontal-violin.html
new file mode 100644
index 00000000000..7c3e773cb4c
--- /dev/null
+++ b/content/plotly_js/statistical/violin/2018-01-16-horizontal-violin.html
@@ -0,0 +1,45 @@
+---
+name: Horizontal Violin Plot
+language: plotly_js
+suite: violin
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv", function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+var data = [{
+ type: 'violin',
+ x: unpack(rows, 'total_bill'),
+ points: 'none',
+ box: {
+ visible: true
+ },
+ boxpoints: false,
+ line: {
+ color: 'black'
+ },
+ fillcolor: '#8dd3c7',
+ opacity: 0.6,
+ meanline: {
+ visible: true
+ },
+ y0: "Total Bill"
+}]
+
+var layout = {
+ title: {
+ text: "Basic Horizontal Violin Plot"
+ },
+ xaxis: {
+ zeroline: false
+ }
+}
+
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/statistical/violin/2018-01-16-split-violin.html b/content/plotly_js/statistical/violin/2018-01-16-split-violin.html
new file mode 100644
index 00000000000..4867b711320
--- /dev/null
+++ b/content/plotly_js/statistical/violin/2018-01-16-split-violin.html
@@ -0,0 +1,67 @@
+---
+name: Split Violin Plot
+language: plotly_js
+suite: violin
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/violin_data.csv", function(err, rows){
+
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+var data = [{
+ type: 'violin',
+ x: unpack(rows, 'day'),
+ y: unpack(rows, 'total_bill'),
+ legendgroup: 'Yes',
+ scalegroup: 'Yes',
+ name: 'Yes',
+ side: 'negative',
+ box: {
+ visible: true
+ },
+ line: {
+ color: 'blue',
+ width: 2
+ },
+ meanline: {
+ visible: true
+ }
+}, {
+ type: 'violin',
+ x: unpack(rows, 'day'),
+ y: unpack(rows, 'total_bill'),
+ legendgroup: 'No',
+ scalegroup: 'No',
+ name: 'No',
+ side: 'positive',
+ box: {
+ visible: true
+ },
+ line: {
+ color: 'green',
+ width: 2
+ },
+ meanline: {
+ visible: true
+ }
+}]
+
+var layout = {
+ title: {
+ text: "Split Violin Plot"
+ },
+ yaxis: {
+ zeroline: false
+ },
+ violingap: 0,
+ violingroupgap: 0,
+ violinmode: "overlay",
+}
+
+Plotly.newPlot('myDiv', data, layout);
+});
diff --git a/content/plotly_js/statistical/violin/2018-01-16-violin-plotlyjs-index.html b/content/plotly_js/statistical/violin/2018-01-16-violin-plotlyjs-index.html
new file mode 100644
index 00000000000..727b49f0490
--- /dev/null
+++ b/content/plotly_js/statistical/violin/2018-01-16-violin-plotlyjs-index.html
@@ -0,0 +1,13 @@
+---
+description: How to make D3.js-based violin plots in Plotly.js.
+display_as: statistical
+language: plotly_js
+layout: base
+name: Violin Plot
+order: 8
+permalink: javascript/violin/
+thumbnail: thumbnail/violin.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","violin" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/streaming/2017-07-13-basic-example.html b/content/plotly_js/streaming/2017-07-13-basic-example.html
new file mode 100644
index 00000000000..11e0407a40a
--- /dev/null
+++ b/content/plotly_js/streaming/2017-07-13-basic-example.html
@@ -0,0 +1,30 @@
+---
+name: Basic Streaming
+plot_url: https://codepen.io/plotly/embed/dRaawR/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: streaming
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+function rand() {
+ return Math.random();
+}
+
+Plotly.newPlot('myDiv', [{
+ y: [1,2,3].map(rand),
+ mode: 'lines',
+ line: {color: '#80CAF6'}
+}]);
+
+var cnt = 0;
+
+var interval = setInterval(function() {
+
+ Plotly.extendTraces('myDiv', {
+ y: [[rand()]]
+ }, [0])
+
+ if(++cnt === 100) clearInterval(interval);
+}, 300);
diff --git a/content/plotly_js/streaming/2017-07-13-mulitple-trace.html b/content/plotly_js/streaming/2017-07-13-mulitple-trace.html
new file mode 100644
index 00000000000..57f193f9046
--- /dev/null
+++ b/content/plotly_js/streaming/2017-07-13-mulitple-trace.html
@@ -0,0 +1,34 @@
+---
+name: Multiple Traces
+plot_url: https://codepen.io/plotly/embed/jwoEYr/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: streaming
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+function rand() {
+ return Math.random();
+}
+
+Plotly.newPlot('myDiv', [{
+ y: [1,2,3].map(rand),
+ mode: 'lines',
+ line: {color: '#80CAF6'}
+}, {
+ y: [1,2,3].map(rand),
+ mode: 'lines',
+ line: {color: '#DF56F1'}
+}]);
+
+var cnt = 0;
+
+var interval = setInterval(function() {
+
+ Plotly.extendTraces('myDiv', {
+ y: [[rand()], [rand()]]
+ }, [0, 1])
+
+ if(++cnt === 100) clearInterval(interval);
+}, 300);
diff --git a/content/plotly_js/streaming/2017-07-13-streaming-30-points.html b/content/plotly_js/streaming/2017-07-13-streaming-30-points.html
new file mode 100644
index 00000000000..a5a0b4fdfe0
--- /dev/null
+++ b/content/plotly_js/streaming/2017-07-13-streaming-30-points.html
@@ -0,0 +1,40 @@
+---
+name: 30 Points Using Update
+plot_url: https://codepen.io/plotly/embed/xLwQPr/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: streaming
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+var arrayLength = 30
+var newArray = []
+
+for(var i = 0; i < arrayLength; i++) {
+ var y = Math.round(Math.random()*10) + 1
+ newArray[i] = y
+}
+
+Plotly.newPlot('myDiv', [{
+ y: newArray,
+ mode: 'lines',
+ line: {color: '#80CAF6'}
+}]);
+
+var cnt = 0;
+
+var interval = setInterval(function() {
+
+ var y = Math.round(Math.random()*10) + 1
+ newArray = newArray.concat(y)
+ newArray.splice(0, 1)
+
+ var data_update = {
+ y: [newArray]
+ };
+
+ Plotly.update('myDiv', data_update)
+
+ if(++cnt === 100) clearInterval(interval);
+}, 1000);
diff --git a/content/plotly_js/streaming/2017-07-13-streaming-subplots.html b/content/plotly_js/streaming/2017-07-13-streaming-subplots.html
new file mode 100644
index 00000000000..6e36427f82b
--- /dev/null
+++ b/content/plotly_js/streaming/2017-07-13-streaming-subplots.html
@@ -0,0 +1,71 @@
+---
+name: Streaming Subplots
+plot_url: https://codepen.io/plotly/embed/rwPRVe/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: streaming
+order: 6
+sitemap: false
+arrangement: horizontal
+---
+
+function rand() {
+ return Math.random();
+}
+
+var time = new Date();
+
+var trace1 = {
+ x: [],
+ y: [],
+ mode: 'lines',
+ line: {
+ color: '#80CAF6',
+ shape: 'spline'
+ }
+}
+
+var trace2 = {
+ x: [],
+ y: [],
+ xaxis: 'x2',
+ yaxis: 'y2',
+ mode: 'lines',
+ line: {color: '#DF56F1'}
+};
+
+var layout = {
+ xaxis: {
+ type: 'date',
+ domain: [0, 1],
+ showticklabels: false
+ },
+ yaxis: {domain: [0.6,1]},
+ xaxis2: {
+ type: 'date',
+ anchor: 'y2',
+ domain: [0, 1]
+ },
+ yaxis2: {
+ anchor: 'x2',
+ domain: [0, 0.4]},
+}
+
+var data = [trace1,trace2];
+
+Plotly.newPlot('myDiv', data, layout);
+
+var cnt = 0;
+
+var interval = setInterval(function() {
+
+ var time = new Date();
+
+ var update = {
+ x: [[time], [time]],
+ y: [[rand()], [rand()]]
+ }
+
+ Plotly.extendTraces('myDiv', update, [0,1])
+
+ if(++cnt === 100) clearInterval(interval);
+}, 1000);
diff --git a/content/plotly_js/streaming/2017-07-13-streaming-timestamp.html b/content/plotly_js/streaming/2017-07-13-streaming-timestamp.html
new file mode 100644
index 00000000000..96bd88205c7
--- /dev/null
+++ b/content/plotly_js/streaming/2017-07-13-streaming-timestamp.html
@@ -0,0 +1,41 @@
+---
+name: Streaming with Timestamp
+plot_url: https://codepen.io/plotly/embed/YQBBbE/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: streaming
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+
+function rand() {
+ return Math.random();
+}
+
+var time = new Date();
+
+var data = [{
+ x: [time],
+ y: [rand()],
+ mode: 'lines',
+ line: {color: '#80CAF6'}
+}]
+
+
+Plotly.newPlot('myDiv', data);
+
+var cnt = 0;
+
+var interval = setInterval(function() {
+
+ var time = new Date();
+
+ var update = {
+ x: [[time]],
+ y: [[rand()]]
+ }
+
+ Plotly.extendTraces('myDiv', update, [0])
+
+ if(++cnt === 100) clearInterval(interval);
+}, 1000);
diff --git a/content/plotly_js/streaming/2017-07-13-streaming-timestamp_range.html b/content/plotly_js/streaming/2017-07-13-streaming-timestamp_range.html
new file mode 100644
index 00000000000..e5332dcc462
--- /dev/null
+++ b/content/plotly_js/streaming/2017-07-13-streaming-timestamp_range.html
@@ -0,0 +1,51 @@
+---
+name: Extend Traces & Relayout
+plot_url: https://codepen.io/plotly/embed/yXZwBL/?height=500&theme-id=15263&default-tab=result
+language: plotly_js
+suite: streaming
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+
+function rand() {
+ return Math.random();
+}
+
+var time = new Date();
+
+var data = [{
+ x: [time],
+ y: [rand],
+ mode: 'lines',
+ line: {color: '#80CAF6'}
+}]
+
+Plotly.newPlot('myDiv', data);
+
+var cnt = 0;
+
+var interval = setInterval(function() {
+
+ var time = new Date();
+
+ var update = {
+ x: [[time]],
+ y: [[rand()]]
+ }
+
+ var olderTime = time.setMinutes(time.getMinutes() - 1);
+ var futureTime = time.setMinutes(time.getMinutes() + 1);
+
+ var minuteView = {
+ xaxis: {
+ type: 'date',
+ range: [olderTime,futureTime]
+ }
+ };
+
+ Plotly.relayout('myDiv', minuteView);
+ Plotly.extendTraces('myDiv', update, [0])
+
+ if(++cnt === 100) clearInterval(interval);
+}, 1000);
diff --git a/content/plotly_js/streaming/2017-07-13-streaming_index.html b/content/plotly_js/streaming/2017-07-13-streaming_index.html
new file mode 100644
index 00000000000..3b340d8d4a4
--- /dev/null
+++ b/content/plotly_js/streaming/2017-07-13-streaming_index.html
@@ -0,0 +1,14 @@
+---
+name: Streaming
+permalink: javascript/streaming/
+description: How to create D3.js-based streaming plots in Plotly.js.
+layout: base
+thumbnail: thumbnail/streaming-thumb-square.gif
+language: plotly_js
+page_type: example_index
+display_as: streaming
+order: 1
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","streaming" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
diff --git a/content/plotly_js/subplot/2019-09-12-plotly_js-subplots-index.html b/content/plotly_js/subplot/2019-09-12-plotly_js-subplots-index.html
new file mode 100644
index 00000000000..d56cbde1633
--- /dev/null
+++ b/content/plotly_js/subplot/2019-09-12-plotly_js-subplots-index.html
@@ -0,0 +1,27 @@
+---
+permalink: javascript/subplot-charts/
+description: Plotly.js makes interactive, publication-quality graphs online. Examples of how to make subplots, insets, and multiple axes charts.
+name: Subplots
+layout: langindex
+language: plotly_js
+display_as: multiple_axes
+thumbnail: thumbnail/mixed.jpg
+---
+
+
+
+
+
+
+
+
+
Plotly.js Subplots
+
{{page.description}}
+ {% include layouts/dashplug.html %}
+
+
+
+
+ {% assign languagelist = site.posts | where:"language","plotly_js" | where:"display_as","multiple_axes" | where: "layout","base" | sort: "order" %}
+ {% include posts/documentation_eg.html %}
diff --git a/content/plotly_js/subplot/3d-subplots/2015-08-12-subplots.html b/content/plotly_js/subplot/3d-subplots/2015-08-12-subplots.html
new file mode 100644
index 00000000000..048e1ebc464
--- /dev/null
+++ b/content/plotly_js/subplot/3d-subplots/2015-08-12-subplots.html
@@ -0,0 +1,105 @@
+---
+name: Multiple 3D Subplots
+language: plotly_js
+suite: 3d-subplots
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+
+function getrandom(num , mul) {
+ var value = [ ];
+ for ( i=0; i <= num; i++ ) {
+ var rand = Math.random() * mul;
+ value.push(rand);
+ }
+ return value;
+}
+
+var trace1 = {
+ opacity: 0.5,
+ color: 'rgba(255,127,80,0.7)',
+ type: 'mesh3d',
+ x: getrandom(50 , -75),
+ y: getrandom(50 , 75),
+ z: getrandom(50 , 75),
+ scene: "scene1"
+ };
+
+var trace2 = {
+ opacity: 0.5,
+ color: 'pink',
+ type: 'mesh3d',
+ x: getrandom(50 , -75),
+ y: getrandom(50 , 75),
+ z: getrandom(50 , 75),
+ scene: "scene2"
+ };
+
+var trace3 = {
+ opacity:0.4,
+ color:'rgb(033,255,100)',
+ type: 'mesh3d',
+ x: getrandom(50 , -75),
+ y: getrandom(50 , -75),
+ z: getrandom(50 , -75),
+ scene: "scene3",
+ };
+
+var trace4 = {
+ opacity: 0.5,
+ color:'rgb(200,100,200)',
+ type: 'mesh3d',
+ x: getrandom(50 , -75),
+ y: getrandom(50 , 75),
+ z: getrandom(50 , 75),
+ scene: "scene4"
+ };
+
+var trace5 = {
+ opacity: 0.5,
+ color:'rgb(00,150,200)',
+ type: 'mesh3d',
+ x: getrandom(50 , 100),
+ y: getrandom(50 , 100),
+ z: getrandom(50 , 100),
+ scene: "scene5",
+ }
+
+var layout = {
+ scene1: {
+ domain: {
+ x: [0.0, 0.5],
+ y: [0.5, 1.0]
+ },},
+ scene2: {
+ domain: {
+ x: [0.5, 1],
+ y: [0.5, 1.0]
+ }},
+ scene3: {
+ domain: {
+ x: [0.0, 0.33],
+ y: [0, 0.5]
+ },},
+ scene4: {
+ domain: {
+ x: [0.33, 0.66],
+ y: [0, 0.5]
+ }},
+ scene5: {
+ domain: {
+ x: [0.66, 0.99],
+ y: [0, 0.5]
+ },},
+ height: 600,
+ margin: {
+ l: 0,
+ r: 0,
+ b: 0,
+ t: 0,
+ pad: 0
+ },
+}
+
+Plotly.newPlot('myDiv', [trace1,trace2,trace3,trace4,trace5], layout);
\ No newline at end of file
diff --git a/content/plotly_js/subplot/3d-subplots/2015-08-12-subplots_index.html b/content/plotly_js/subplot/3d-subplots/2015-08-12-subplots_index.html
new file mode 100644
index 00000000000..c71596cf83c
--- /dev/null
+++ b/content/plotly_js/subplot/3d-subplots/2015-08-12-subplots_index.html
@@ -0,0 +1,15 @@
+---
+description: How to make 3D Subplots in javascript.
+display_as: multiple_axes
+language: plotly_js
+layout: base
+name: 3D Subplots
+order: 3
+page_type: example_index
+permalink: javascript/3d-subplots/
+redirect_from: javascript-graphing-library/3d-subplots/
+thumbnail: thumbnail/3d-subplots.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3d-subplots" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/subplot/insets/2015-04-09-insets_plotly_js_index.html b/content/plotly_js/subplot/insets/2015-04-09-insets_plotly_js_index.html
new file mode 100644
index 00000000000..467f5d55c14
--- /dev/null
+++ b/content/plotly_js/subplot/insets/2015-04-09-insets_plotly_js_index.html
@@ -0,0 +1,15 @@
+---
+description: How to make an inset graph in D3.js-based javascript charts.
+display_as: multiple_axes
+language: plotly_js
+layout: base
+name: Inset Plots
+order: 2
+page_type: example_index
+permalink: javascript/insets/
+redirect_from: javascript-graphing-library/insets/
+thumbnail: thumbnail/insets.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","insets" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/subplot/insets/2015-04-09-simple-inset.html b/content/plotly_js/subplot/insets/2015-04-09-simple-inset.html
new file mode 100644
index 00000000000..f82e7b786bc
--- /dev/null
+++ b/content/plotly_js/subplot/insets/2015-04-09-simple-inset.html
@@ -0,0 +1,37 @@
+---
+name: Simple Inset Graph
+language: plotly_js
+suite: insets
+order: 1
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [1, 2, 3],
+ y: [4, 3, 2],
+ type: 'scatter'
+};
+
+var trace2 = {
+ x: [20, 30, 40],
+ y: [30, 40, 50],
+ xaxis: 'x2',
+ yaxis: 'y2',
+ type: 'scatter'
+};
+
+var data = [trace1, trace2];
+
+var layout = {
+ yaxis2: {
+ domain: [0.6, 0.95],
+ anchor: 'x2'
+ },
+ xaxis2: {
+ domain: [0.6, 0.95],
+ anchor: 'y2'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/subplot/mixed-subplots/2017-01-20-mixed-subplots-index.html b/content/plotly_js/subplot/mixed-subplots/2017-01-20-mixed-subplots-index.html
new file mode 100644
index 00000000000..1095c2c778b
--- /dev/null
+++ b/content/plotly_js/subplot/mixed-subplots/2017-01-20-mixed-subplots-index.html
@@ -0,0 +1,14 @@
+---
+description: How to make Mixed Subplots in javascript.
+display_as: multiple_axes
+language: plotly_js
+layout: base
+name: Mixed Subplots
+order: 4
+page_type: example_index
+permalink: javascript/mixed-subplots/
+thumbnail: thumbnail/mixed_subplot.JPG
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","mixed-subplots" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/subplot/mixed-subplots/2017-01-20-mixed-subplots.html b/content/plotly_js/subplot/mixed-subplots/2017-01-20-mixed-subplots.html
new file mode 100644
index 00000000000..442b32f5e41
--- /dev/null
+++ b/content/plotly_js/subplot/mixed-subplots/2017-01-20-mixed-subplots.html
@@ -0,0 +1,145 @@
+---
+name: Mixed Subplots
+language: plotly_js
+suite: mixed-subplots
+order: 0
+sitemap: false
+arrangement: horizontal
+---
+d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/volcano_db.csv', function(err, rows){
+ function unpack(rows, key) {
+ return rows.map(function(row) { return row[key]; });
+ }
+
+var trace1 = {
+ x: unpack(rows, 'Status'),
+ y: unpack(rows, 'Type'),
+ z: unpack(rows, 'Elev'),
+ marker: {
+ size: 2,
+ color: unpack(rows, 'Elev'),
+ colorscale: 'Reds',
+ line: {color: 'transparent'}
+ },
+ mode: 'markers',
+ type: 'scatter3d',
+ text: unpack(rows, 'Country'),
+ hoverinfo: 'x+y+z+text',
+ showlegend: false
+};
+
+var x = unpack(rows, 'Elev');
+
+var trace2 = {
+ x: unpack(rows, 'Elev'),
+ type: 'histogram',
+ hoverinfo: 'x+y',
+ showlegend: false,
+ xaxis: 'x2',
+ yaxis: 'y2',
+ marker: {
+ color: 'red'
+ }};
+
+var trace3 = {
+ geo: 'geo3',
+ type:'scattergeo',
+ locationmode: 'world',
+ lon: unpack(rows, 'Longitude'),
+ lat: unpack(rows, 'Latitude'),
+ hoverinfo: 'text',
+ text: unpack(rows, 'Elev'),
+ mode: 'markers',
+ showlegend: false,
+ marker: {
+ size: 4,
+ color: unpack(rows, 'Elev'),
+ colorscale: 'Reds',
+ opacity: 0.8,
+ symbol: 'circle',
+ line: {
+ width: 1
+ }
+ }
+};
+
+var data = [trace1, trace2, trace3];
+
+var layout = {
+ paper_bgcolor: 'black',
+ plot_bgcolor: 'black',
+ title: {text: 'Volcano Database: Elevation'},
+ font: {color: 'white'},
+ colorbar: true,
+ annotations: [{
+ x: 0,
+ y: 0,
+ xref: 'paper',
+ yref: 'paper',
+ text: 'Source: NOAA',
+ showarrow: false
+ }],
+ geo3: {
+ domain: {
+ x: [0, 0.45],
+ y: [0.02, 0.98]
+ },
+ scope: 'world',
+ projection: {
+ type: 'orthographic'
+ },
+ showland: true,
+ showocean: true,
+ showlakes: true,
+ landcolor: 'rgb(250,250,250)',
+ lakecolor: 'rgb(127,205,255)',
+ oceancolor: 'rgb(6,66,115)',
+ subunitcolor: 'rgb(217,217,217)',
+ countrycolor: 'rgb(217,217,217)',
+ countrywidth: 0.5,
+ subunitwidth: 0.5,
+ bgcolor: 'black'
+ },
+ scene: {domain: {
+ x: [0.55, 1],
+ y: [0, 0.6]
+ },
+ xaxis: {
+ title: {
+ text: 'Status'
+ },
+ showticklabels: false,
+ showgrid: true,
+ gridcolor: 'white'
+ },
+ yaxis: {
+ title: {
+ text: 'Type'
+ },
+ showticklabels: false,
+ showgrid: true,
+ gridcolor: 'white'
+ },
+ zaxis: {
+ title: {
+ text: 'Elev'
+ },
+ showgrid: true,
+ gridcolor: 'white'
+ }
+ },
+ yaxis2: {
+ anchor: 'x2',
+ domain: [0.7, 1],
+ showgrid: false
+ },
+ xaxis2: {
+ tickangle: 45,
+ anchor: 'y2',
+ ticksuffix: 'm',
+ domain: [0.6, 1]},
+};
+
+Plotly.newPlot("myDiv", data, layout, {showLink: false});
+
+});
diff --git a/content/plotly_js/subplot/multiple-axes/2015-04-09-multiple-axes-double.html b/content/plotly_js/subplot/multiple-axes/2015-04-09-multiple-axes-double.html
new file mode 100644
index 00000000000..8eed0bc93db
--- /dev/null
+++ b/content/plotly_js/subplot/multiple-axes/2015-04-09-multiple-axes-double.html
@@ -0,0 +1,44 @@
+---
+name: Two Y-Axes
+language: plotly_js
+suite: multiple-axes
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [1, 2, 3],
+ y: [40, 50, 60],
+ name: 'yaxis data',
+ type: 'scatter'
+};
+
+var trace2 = {
+ x: [2, 3, 4],
+ y: [4, 5, 6],
+ name: 'yaxis2 data',
+ yaxis: 'y2',
+ type: 'scatter'
+};
+
+var data = [trace1, trace2];
+
+var layout = {
+ title: {text: 'Double Y Axis Example'},
+ yaxis: {
+ title: {
+ text: 'yaxis title'
+ }
+ },
+ yaxis2: {
+ title: {
+ text: 'yaxis2 title',
+ font: {color: 'rgb(148, 103, 189)'}
+ },
+ tickfont: {color: 'rgb(148, 103, 189)'},
+ overlaying: 'y',
+ side: 'right'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/subplot/multiple-axes/2015-04-09-multiple-axes-multiple.html b/content/plotly_js/subplot/multiple-axes/2015-04-09-multiple-axes-multiple.html
new file mode 100644
index 00000000000..efa3d831854
--- /dev/null
+++ b/content/plotly_js/subplot/multiple-axes/2015-04-09-multiple-axes-multiple.html
@@ -0,0 +1,90 @@
+---
+name: Multiple Y-Axes
+language: plotly_js
+suite: multiple-axes
+order: 6
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [1, 2, 3],
+ y: [4, 5, 6],
+ name: 'yaxis1 data',
+ type: 'scatter'
+};
+
+var trace2 = {
+ x: [2, 3, 4],
+ y: [40, 50, 60],
+ name: 'yaxis2 data',
+ yaxis: 'y2',
+ type: 'scatter'
+};
+
+var trace3 = {
+ x: [4, 5, 6],
+ y: [40000, 50000, 60000],
+ name: 'yaxis3 data',
+ yaxis: 'y3',
+ type: 'scatter'
+};
+
+var trace4 = {
+ x: [5, 6, 7],
+ y: [400000, 500000, 600000],
+ name: 'yaxis4 data',
+ yaxis: 'y4',
+ type: 'scatter'
+};
+
+var data = [trace1, trace2, trace3, trace4];
+
+var layout = {
+ title: {
+ text: 'multiple y-axes example',
+ font: {color: '#1f77b4'}
+ },
+ width: 800,
+ xaxis: {domain: [0.3, 0.7]},
+ yaxis: {
+ title: {
+ text: 'yaxis title',
+ font: {color: '#1f77b4'}
+ },
+ tickfont: {color: '#1f77b4'}
+ },
+ yaxis2: {
+ title: {
+ text: 'yaxis2 title',
+ font: {color: '#ff7f0e'}
+ },
+ tickfont: {color: '#ff7f0e'},
+ anchor: 'free',
+ overlaying: 'y',
+ side: 'left',
+ position: 0.15
+ },
+ yaxis3: {
+ title: {
+ text: 'yaxis4 title',
+ font: {color: '#d62728'}
+ },
+ tickfont: {color: '#d62728'},
+ anchor: 'x',
+ overlaying: 'y',
+ side: 'right'
+ },
+ yaxis4: {
+ title: {
+ text: 'yaxis5 title',
+ font: {color: '#9467bd'}
+ },
+ tickfont: {color: '#9467bd'},
+ anchor: 'free',
+ overlaying: 'y',
+ side: 'right',
+ position: 0.85
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/subplot/multiple-axes/2015-04-09-multiple-axes_plotly_js_index.html b/content/plotly_js/subplot/multiple-axes/2015-04-09-multiple-axes_plotly_js_index.html
new file mode 100644
index 00000000000..f4fcdf1bce2
--- /dev/null
+++ b/content/plotly_js/subplot/multiple-axes/2015-04-09-multiple-axes_plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to make a graph with D3.js-based multiple axes in javascript.
+display_as: multiple_axes
+language: plotly_js
+layout: base
+name: Multiple Axes
+order: 6
+permalink: javascript/multiple-axes/
+redirect_from: javascript-graphing-library/multiple-axes/
+thumbnail: thumbnail/multiple-axes.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","multiple-axes" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/subplot/subplot-table/2017-11-01-table-subplot-plotly_js_index.html b/content/plotly_js/subplot/subplot-table/2017-11-01-table-subplot-plotly_js_index.html
new file mode 100644
index 00000000000..5d676769682
--- /dev/null
+++ b/content/plotly_js/subplot/subplot-table/2017-11-01-table-subplot-plotly_js_index.html
@@ -0,0 +1,14 @@
+---
+description: How to make a D3.js-based table subplots in javascript.
+display_as: multiple_axes
+language: plotly_js
+layout: base
+name: Table Subplots
+order: 5
+page_type: example_index
+permalink: javascript/table-subplots/
+thumbnail: thumbnail/table_subplots.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","subplot_table" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/subplot/subplot-table/2017-11-01-table-subplot.html b/content/plotly_js/subplot/subplot-table/2017-11-01-table-subplot.html
new file mode 100644
index 00000000000..063fc6358b4
--- /dev/null
+++ b/content/plotly_js/subplot/subplot-table/2017-11-01-table-subplot.html
@@ -0,0 +1,125 @@
+---
+name: Table and Chart Subplot
+language: plotly_js
+suite: subplot_table
+order: 1
+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]; });
+ }
+
+ // header values
+ var headerNames = d3.keys(rows[0]);
+ var headerValues = [headerNames[1],headerNames[2],
+ headerNames[3],headerNames[4]];
+
+ // cell values
+ var cellValues = [];
+ for (i = 0; i < headerValues.length; i++) {
+ cellValue = unpack(rows, headerValues[i]);
+ cellValues[i] = cellValue;
+ }
+
+ // clean date
+ for (i = 0; i < cellValues[0].length; i++) {
+ var dateValue = cellValues[0][i].split(' ')[0]
+ cellValues[0][i] = dateValue
+ }
+
+ // create table
+ var table = {
+ type: 'table',
+ columnwidth: [150,200,200,150],
+ columnorder: [0,1,2,3],
+ header: {
+ values: headerValues,
+ align: "center",
+ line: {width: 1, color: 'rgb(50, 50, 50)'},
+ fill: {color: ['rgb(235, 100, 230)']},
+ font: {family: "Arial", size: 11, color: "white"}
+ },
+ cells: {
+ values: cellValues,
+ align: ["center", "center"],
+ line: {color: "black", width: 1},
+ fill: {color: ['rgb(235, 193, 238)', 'rgba(228, 222, 249, 0.65)']},
+ font: {family: "Arial", size: 10, color: ["black"]}
+ },
+ xaxis: 'x',
+ yaxis: 'y',
+ domain: {x: [0,0.4], y: [0,1]}
+ }
+
+ // create 1st plot
+ var trace1 = {
+ x: unpack(rows, 'Date'),
+ y: unpack(rows, 'Hash-rate'),
+ xaxis: 'x1',
+ yaxis: 'y1',
+ mode: 'lines',
+ line: {width: 2, color: '#9748a1'},
+ name: 'hash-rate-TH/s'
+ }
+ // create 2nd plot
+ var trace2 = {
+ x: unpack(rows, 'Date'),
+ y: unpack(rows, 'Mining-revenue-USD'),
+ xaxis: 'x2',
+ yaxis: 'y2',
+ mode: 'lines',
+ line: {width: 2, color: '#b04553'},
+ name: 'Mining-revenue-USD'
+ }
+
+ // create 3rd plot
+ var trace3 = {
+ x: unpack(rows, 'Date'),
+ y: unpack(rows, 'Transaction-fees-BTC'),
+ xaxis: 'x3',
+ yaxis: 'y3',
+ mode: 'lines',
+ line: {width: 2, color: '#af7bbd'},
+ name: 'Transaction-fees-BTC'
+ }
+
+ var data = [table,trace1,trace2,trace3]
+
+ // define subplot axes
+ var axis = {
+ showline: true,
+ zeroline: false,
+ showgrid: true,
+ mirror:true,
+ ticklen: 4,
+ gridcolor: '#ffffff',
+ tickfont: {size: 10},
+ }
+
+ var axis1 = {domain: [0.5, 1], anchor: 'y1', showticklabels: false}
+ var axis2 = {domain: [0.5, 1], anchor: 'y2', showticklabels: false}
+ var axis3 = {domain: [0.5, 1], anchor: 'y3'}
+ var axis4 = {domain: [0.66, 0.98], anchor: 'x1', hoverformat: '.2f'}
+ var axis5 = {domain: [0.34, 0.64], anchor: 'x2', tickprefix: '$', hoverformat: '.2f'}
+ var axis6 = {domain: [0.0, 0.32], anchor: 'x3', tickprefix: '\u20BF', hoverformat: '.2f'}
+
+ // define layout
+ var layout = {
+ title: {text: "Bitcoin mining stats for 180 days"},
+ plot_bgcolor: 'rgba(228, 222, 249, 0.65)',
+ showlegend: false,
+ xaxis1: Object.assign(axis1,axis),
+ xaxis2: Object.assign(axis2,axis),
+ xaxis3: Object.assign(axis3,axis),
+ yaxis1: Object.assign(axis4,axis),
+ yaxis2: Object.assign(axis5,axis),
+ yaxis3: Object.assign(axis6,axis)
+ }
+
+ Plotly.newPlot('myDiv', data, layout);
+
+});
diff --git a/content/plotly_js/subplot/subplots/2015-04-09-custom-size-subplot.html b/content/plotly_js/subplot/subplots/2015-04-09-custom-size-subplot.html
new file mode 100644
index 00000000000..76757e5a618
--- /dev/null
+++ b/content/plotly_js/subplot/subplots/2015-04-09-custom-size-subplot.html
@@ -0,0 +1,31 @@
+---
+name: Custom Sized Subplot
+language: plotly_js
+suite: subplots
+order: 3
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [1, 2, 3],
+ y: [4, 5, 6],
+ type: 'scatter'
+};
+
+var trace2 = {
+ x: [20, 30, 40],
+ y: [50, 60, 70],
+ xaxis: 'x2',
+ yaxis: 'y2',
+ type: 'scatter'
+};
+
+var data = [trace1, trace2];
+
+var layout = {
+ xaxis: {domain: [0, 0.7]},
+ yaxis2: {anchor: 'x2'},
+ xaxis2: {domain: [0.8, 1]}
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/subplot/subplots/2015-04-09-multiple-subplots.html b/content/plotly_js/subplot/subplots/2015-04-09-multiple-subplots.html
new file mode 100644
index 00000000000..1617656afc5
--- /dev/null
+++ b/content/plotly_js/subplot/subplots/2015-04-09-multiple-subplots.html
@@ -0,0 +1,45 @@
+---
+name: Multiple Subplots
+language: plotly_js
+suite: subplots
+order: 4
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [1, 2, 3],
+ y: [4, 5, 6],
+ type: 'scatter'
+};
+
+var trace2 = {
+ x: [20, 30, 40],
+ y: [50, 60, 70],
+ xaxis: 'x2',
+ yaxis: 'y2',
+ type: 'scatter'
+};
+
+var trace3 = {
+ x: [300, 400, 500],
+ y: [600, 700, 800],
+ xaxis: 'x3',
+ yaxis: 'y3',
+ type: 'scatter'
+};
+
+var trace4 = {
+ x: [4000, 5000, 6000],
+ y: [7000, 8000, 9000],
+ xaxis: 'x4',
+ yaxis: 'y4',
+ type: 'scatter'
+};
+
+var data = [trace1, trace2, trace3, trace4];
+
+var layout = {
+ grid: {rows: 2, columns: 2, pattern: 'independent'},
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/subplot/subplots/2015-04-09-shared-axes-subplots.html b/content/plotly_js/subplot/subplots/2015-04-09-shared-axes-subplots.html
new file mode 100644
index 00000000000..c8bb278711d
--- /dev/null
+++ b/content/plotly_js/subplot/subplots/2015-04-09-shared-axes-subplots.html
@@ -0,0 +1,51 @@
+---
+name: Subplots with Shared Axes
+language: plotly_js
+suite: subplots
+order: 5
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [1, 2, 3],
+ y: [2, 3, 4],
+ type: 'scatter'
+};
+
+var trace2 = {
+ x: [20, 30, 40],
+ y: [5, 5, 5],
+ xaxis: 'x2',
+ yaxis: 'y',
+ type: 'scatter'
+};
+
+var trace3 = {
+ x: [2, 3, 4],
+ y: [600, 700, 800],
+ xaxis: 'x',
+ yaxis: 'y3',
+ type: 'scatter'
+};
+
+var trace4 = {
+ x: [4000, 5000, 6000],
+ y: [7000, 8000, 9000],
+ xaxis: 'x4',
+ yaxis: 'y4',
+ type: 'scatter'
+};
+
+var data = [trace1, trace2, trace3, trace4];
+
+var layout = {
+ grid: {
+ rows: 2,
+ columns: 2,
+ subplots:[['xy','x2y'], ['xy3','x4y4']],
+ roworder:'bottom to top'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/subplot/subplots/2015-04-09-simple-subplot.html b/content/plotly_js/subplot/subplots/2015-04-09-simple-subplot.html
new file mode 100644
index 00000000000..2107b76b658
--- /dev/null
+++ b/content/plotly_js/subplot/subplots/2015-04-09-simple-subplot.html
@@ -0,0 +1,30 @@
+---
+name: Simple Subplot
+language: plotly_js
+suite: subplots
+order: 2
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [1, 2, 3],
+ y: [4, 5, 6],
+ type: 'scatter'
+};
+
+var trace2 = {
+ x: [20, 30, 40],
+ y: [50, 60, 70],
+ xaxis: 'x2',
+ yaxis: 'y2',
+ type: 'scatter'
+};
+
+var data = [trace1, trace2];
+
+var layout = {
+ grid: {rows: 1, columns: 2, pattern: 'independent'},
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/subplot/subplots/2015-04-09-stacked-coupled-subplots.html b/content/plotly_js/subplot/subplots/2015-04-09-stacked-coupled-subplots.html
new file mode 100644
index 00000000000..45bbe4f8971
--- /dev/null
+++ b/content/plotly_js/subplot/subplots/2015-04-09-stacked-coupled-subplots.html
@@ -0,0 +1,38 @@
+---
+name: Stacked Subplots with a Shared X-Axis
+language: plotly_js
+suite: subplots
+order: 7
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2],
+ y: [10, 11, 12],
+ type: 'scatter'
+};
+
+var trace2 = {
+ x: [2, 3, 4],
+ y: [100, 110, 120],
+ yaxis: 'y2',
+ type: 'scatter'
+};
+
+var trace3 = {
+ x: [3, 4, 5],
+ y: [1000, 1100, 1200],
+ yaxis: 'y3',
+ type: 'scatter'
+};
+
+var data = [trace1, trace2, trace3];
+
+var layout = {
+ yaxis: {domain: [0, 0.33]},
+ legend: {traceorder: 'reversed'},
+ yaxis2: {domain: [0.33, 0.66]},
+ yaxis3: {domain: [0.66, 1]}
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/subplot/subplots/2015-04-09-stacked-subplots.html b/content/plotly_js/subplot/subplots/2015-04-09-stacked-subplots.html
new file mode 100644
index 00000000000..5727bf8364c
--- /dev/null
+++ b/content/plotly_js/subplot/subplots/2015-04-09-stacked-subplots.html
@@ -0,0 +1,41 @@
+---
+name: Stacked Subplots
+language: plotly_js
+suite: subplots
+order: 6
+sitemap: false
+arrangement: horizontal
+---
+var trace1 = {
+ x: [0, 1, 2],
+ y: [10, 11, 12],
+ type: 'scatter'
+};
+
+var trace2 = {
+ x: [2, 3, 4],
+ y: [100, 110, 120],
+ xaxis: 'x2',
+ yaxis: 'y2',
+ type: 'scatter'
+};
+
+var trace3 = {
+ x: [3, 4, 5],
+ y: [1000, 1100, 1200],
+ xaxis: 'x3',
+ yaxis: 'y3',
+ type: 'scatter'
+};
+
+var data = [trace1, trace2, trace3];
+
+var layout = {
+grid: {
+ rows: 3,
+ columns: 1,
+ pattern: 'independent',
+ roworder: 'bottom to top'}
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/plotly_js/subplot/subplots/2015-04-09-subplots_plotly_js_index.html b/content/plotly_js/subplot/subplots/2015-04-09-subplots_plotly_js_index.html
new file mode 100644
index 00000000000..040868d0a6b
--- /dev/null
+++ b/content/plotly_js/subplot/subplots/2015-04-09-subplots_plotly_js_index.html
@@ -0,0 +1,16 @@
+---
+description: How to make D3.js-based subplots in Plotly.js. Seven examples of stacked,
+ custom-sized, and gridded subplots.
+display_as: multiple_axes
+language: plotly_js
+layout: base
+name: Subplots
+order: 1
+page_type: example_index
+permalink: javascript/subplots/
+redirect_from: javascript-graphing-library/subplots/
+thumbnail: thumbnail/subplots.jpg
+---
+
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","subplots" | sort: "order" %}
+{% include posts/auto_examples.html examples=examples %}
\ No newline at end of file
diff --git a/content/plotly_js/subplot/subplots/2015-08-10-multiple-custom-sized-subplots.html b/content/plotly_js/subplot/subplots/2015-08-10-multiple-custom-sized-subplots.html
new file mode 100644
index 00000000000..6e30b690bf2
--- /dev/null
+++ b/content/plotly_js/subplot/subplots/2015-08-10-multiple-custom-sized-subplots.html
@@ -0,0 +1,82 @@
+---
+name: Multiple Custom Sized Subplots
+language: plotly_js
+suite: subplots
+order: 9
+sitemap: false
+arrangement: horizontal
+---
+
+var trace1 = {
+ x: [1, 2],
+ y: [1, 2],
+ type: 'scatter',
+ name: '(1,1)'
+};
+
+var trace2 = {
+ x: [1, 2],
+ y: [1, 2],
+ type: 'scatter',
+ name: '(1,2)',
+ xaxis: 'x2',
+ yaxis: 'y2'
+};
+
+var trace3 = {
+ x: [1, 2],
+ y: [1, 2],
+ type: 'scatter',
+ name: '(1,2)',
+ xaxis: 'x3',
+ yaxis: 'y3'
+};
+
+var trace4 = {
+ x: [1, 2],
+ y: [1, 2],
+ type: 'scatter',
+ name: '(1,2)',
+ xaxis: 'x4',
+ yaxis: 'y4'
+};
+
+var data = [trace1, trace2, trace3, trace4];
+
+var layout = {
+ title: {text: 'Multiple Custom Sized Subplots'},
+ xaxis: {
+ domain: [0, 0.45],
+ anchor: 'y1'
+ },
+ yaxis: {
+ domain: [0.5, 1],
+ anchor: 'x1'
+ },
+ xaxis2: {
+ domain: [0.55, 1],
+ anchor: 'y2'
+ },
+ yaxis2: {
+ domain: [0.8, 1],
+ anchor: 'x2'
+ },
+ xaxis3: {
+ domain: [0.55, 1],
+ anchor: 'y3'
+ },
+ yaxis3: {
+ domain: [0.5, 0.75],
+ anchor: 'x3'
+ },
+ xaxis4: {
+ domain: [0, 1],
+ anchor: 'y4'
+ },
+ yaxis4: {
+ domain: [0, 0.45],
+ anchor: 'x4'
+ }
+};
+
+Plotly.newPlot('myDiv', data, layout);
diff --git a/content/reference_pages/2015-08-19-plotly_js-reference.html b/content/reference_pages/2015-08-19-plotly_js-reference.html
new file mode 100644
index 00000000000..820661fc921
--- /dev/null
+++ b/content/reference_pages/2015-08-19-plotly_js-reference.html
@@ -0,0 +1,63 @@
+---
+permalink: /javascript/reference/
+layout: langindex
+page_type: reference
+language: plotly_js
+name: Single-Page Reference
+description: Figure attribute reference for Plotly's JavaScript open-source graphing library.
+redirect_from: /javascript-graphing-library/reference/
+---
+JavaScript Figure Reference: Single-Page
+
+
+ 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.title, xaxis, or annotations). Traces are categorized by chart type (e.g. scatter, heatmap).
+ data = [
+ {
+ type: 'scatter', // all "scatter" attributes: https://plotly.com/javascript/reference/#scatter
+ x: [1, 2, 3], // more about "x": #scatter-x
+ y: [3, 1, 6], // #scatter-y
+ marker: { // marker is an object, valid marker keys: #scatter-marker
+ color: 'rgb(16, 32, 77)' // more about "marker.color": #scatter-marker-color
+ }
+ },
+ {
+ type: 'bar', // all "bar" chart attributes: #bar
+ x: [1, 2, 3], // more about "x": #bar-x
+ y: [3, 1, 6], // #bar-y
+ name: 'bar chart example' // #bar-name
+ }
+ ];
+
+ layout = { // all "layout" attributes: #layout
+ title: 'simple example', // more about "layout.title": #layout-title
+ xaxis: { // all "layout.xaxis" attributes: #layout-xaxis
+ title: 'time' // more about "layout.xaxis.title": #layout-xaxis-title
+ },
+ annotations: [ // all "annotation" attributes: #layout-annotations
+ {
+ text: 'simple annotation', // #layout-annotations-text
+ x: 0, // #layout-annotations-x
+ xref: 'paper', // #layout-annotations-xref
+ y: 0, // #layout-annotations-y
+ yref: 'paper' // #layout-annotations-yref
+ }
+ ]
+ }
+
+
+
+
+
+
+
+{% include posts/plotschema-reference.html %}
diff --git a/content/reference_pages/2015-09-06-python-reference.html b/content/reference_pages/2015-09-06-python-reference.html
new file mode 100644
index 00000000000..9f3b6c8d44e
--- /dev/null
+++ b/content/reference_pages/2015-09-06-python-reference.html
@@ -0,0 +1,47 @@
+---
+permalink: /python/reference/
+layout: langindex
+page_type: reference
+language: python
+name: Single-Page Reference
+description: Figure attribute reference for Plotly's Python open-source graphing library.
+---
+Python Figure Reference: Single-Page
+
+ This page is the exhaustive reference for all of the attributes in the core figure data structure
+that the plotly library operates on. It is automatically-generated from the
+ machine-readable Plotly.js schema reference .
+
+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".
+
+JavaScript Figure Reference
+
+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.title, xaxis, or annotations). Traces are categorized by chart type (e.g. scatter, heatmap).
+ data = [
+ {
+ type: 'scatter', // all "scatter" attributes: https://plotly.com/javascript/reference/#scatter
+ x: [1, 2, 3], // more about "x": #scatter-x
+ y: [3, 1, 6], // #scatter-y
+ marker: { // marker is an object, valid marker keys: #scatter-marker
+ color: 'rgb(16, 32, 77)' // more about "marker.color": #scatter-marker-color
+ }
+ },
+ {
+ type: 'bar', // all "bar" chart attributes: #bar
+ x: [1, 2, 3], // more about "x": #bar-x
+ y: [3, 1, 6], // #bar-y
+ name: 'bar chart example' // #bar-name
+ }
+ ];
+
+ layout = { // all "layout" attributes: #layout
+ title: 'simple example', // more about "layout.title": #layout-title
+ xaxis: { // all "layout.xaxis" attributes: #layout-xaxis
+ title: 'time' // more about "layout.xaxis.title": #layout-xaxis-title
+ },
+ annotations: [ // all "annotation" attributes: #layout-annotations
+ {
+ text: 'simple annotation', // #layout-annotations-text
+ x: 0, // #layout-annotations-x
+ xref: 'paper', // #layout-annotations-xref
+ y: 0, // #layout-annotations-y
+ yref: 'paper' // #layout-annotations-yref
+ }
+ ]
+ }
+
+
+
Python Figure Reference
+
+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".
+
+JavaScript Figure Reference: layout.annotations
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="annotations" %}
+
+
+
JavaScript Figure Reference: bar Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="bar" trace_data=site.data.plotschema.traces.bar %}
+
+
+
JavaScript Figure Reference: barpolar Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="barpolar" trace_data=site.data.plotschema.traces.barpolar %}
+
+
+
JavaScript Figure Reference: box Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="box" trace_data=site.data.plotschema.traces.box %}
+
+
+
JavaScript Figure Reference: candlestick Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="candlestick" trace_data=site.data.plotschema.traces.candlestick %}
+
+
+
JavaScript Figure Reference: carpet Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="carpet" trace_data=site.data.plotschema.traces.carpet %}
+
+
+
JavaScript Figure Reference: choropleth Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="choropleth" trace_data=site.data.plotschema.traces.choropleth %}
+
+
+
JavaScript Figure Reference: choroplethmap Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="choroplethmap" trace_data=site.data.plotschema.traces.choroplethmap %}
+
+
+
JavaScript Figure Reference: choroplethmapbox Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="choroplethmapbox" trace_data=site.data.plotschema.traces.choroplethmapbox %}
+
+
+
JavaScript Figure Reference: layout.coloraxis
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="coloraxis" %}
+
+
+
JavaScript Figure Reference: cone Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="cone" trace_data=site.data.plotschema.traces.cone %}
+
+
+
JavaScript Figure Reference: contour Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="contour" trace_data=site.data.plotschema.traces.contour %}
+
+
+
JavaScript Figure Reference: contourcarpet Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="contourcarpet" trace_data=site.data.plotschema.traces.contourcarpet %}
+
+
+
JavaScript Figure Reference: densitymap Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="densitymap" trace_data=site.data.plotschema.traces.densitymap %}
+
+
+
JavaScript Figure Reference: densitymapbox Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="densitymapbox" trace_data=site.data.plotschema.traces.densitymapbox %}
+
+
+
JavaScript Figure Reference: funnel Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="funnel" trace_data=site.data.plotschema.traces.funnel %}
+
+
+
JavaScript Figure Reference: funnelarea Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="funnelarea" trace_data=site.data.plotschema.traces.funnelarea %}
+
+
+
JavaScript Figure Reference: layout.geo
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="geo" %}
+
+
+
JavaScript Figure Reference: layout
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="global" %}
+
+{%- for trace in site.data.plotschema.traces -%}
+{% if trace[1].layoutAttributes %}
+{% assign attribute=trace[1].layoutAttributes %}
+{% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" %}
+{% endif %}
+{%- endfor -%}
+
+
+
JavaScript Figure Reference: heatmap Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="heatmap" trace_data=site.data.plotschema.traces.heatmap %}
+
+
+
JavaScript Figure Reference: histogram Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="histogram" trace_data=site.data.plotschema.traces.histogram %}
+
+
+
JavaScript Figure Reference: histogram2d Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="histogram2d" trace_data=site.data.plotschema.traces.histogram2d %}
+
+
+
JavaScript Figure Reference: histogram2dcontour Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="histogram2dcontour" trace_data=site.data.plotschema.traces.histogram2dcontour %}
+
+
+
JavaScript Figure Reference: icicle Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="icicle" trace_data=site.data.plotschema.traces.icicle %}
+
+
+
JavaScript Figure Reference: image Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="image" trace_data=site.data.plotschema.traces.image %}
+
+
+
JavaScript Figure Reference: layout.images
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="images" %}
+
+
+
JavaScript Figure Reference: indicator Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="indicator" trace_data=site.data.plotschema.traces.indicator %}
+
+
+
JavaScript Figure Reference: isosurface Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="isosurface" trace_data=site.data.plotschema.traces.isosurface %}
+
+
+
JavaScript Figure Reference: layout.mapbox
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="mapbox" %}
+
+
+
JavaScript Figure Reference: mesh3d Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="mesh3d" trace_data=site.data.plotschema.traces.mesh3d %}
+
+
+
JavaScript Figure Reference: ohlc Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="ohlc" trace_data=site.data.plotschema.traces.ohlc %}
+
+
+
JavaScript Figure Reference: parcats Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="parcats" trace_data=site.data.plotschema.traces.parcats %}
+
+
+
JavaScript Figure Reference: parcoords Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="parcoords" trace_data=site.data.plotschema.traces.parcoords %}
+
+
+
JavaScript Figure Reference: pie Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="pie" trace_data=site.data.plotschema.traces.pie %}
+
+
+
JavaScript Figure Reference: layout.polar
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="polar" %}
+
+
+
JavaScript Figure Reference: sankey Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="sankey" trace_data=site.data.plotschema.traces.sankey %}
+
+
+
JavaScript Figure Reference: scatter Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scatter" trace_data=site.data.plotschema.traces.scatter %}
+
+
+
JavaScript Figure Reference: scatter3d Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scatter3d" trace_data=site.data.plotschema.traces.scatter3d %}
+
+
+
JavaScript Figure Reference: scattercarpet Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scattercarpet" trace_data=site.data.plotschema.traces.scattercarpet %}
+
+
+
JavaScript Figure Reference: scattergeo Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scattergeo" trace_data=site.data.plotschema.traces.scattergeo %}
+
+
+
JavaScript Figure Reference: scattergl Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scattergl" trace_data=site.data.plotschema.traces.scattergl %}
+
+
+
JavaScript Figure Reference: scattermap Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scattermap" trace_data=site.data.plotschema.traces.scattermap %}
+
+
+
JavaScript Figure Reference: scattermapbox Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scattermapbox" trace_data=site.data.plotschema.traces.scattermapbox %}
+
+
+
JavaScript Figure Reference: scatterpolar Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scatterpolar" trace_data=site.data.plotschema.traces.scatterpolar %}
+
+
+
JavaScript Figure Reference: scatterpolargl Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scatterpolargl" trace_data=site.data.plotschema.traces.scatterpolargl %}
+
+
+
JavaScript Figure Reference: scattersmith Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scattersmith" trace_data=site.data.plotschema.traces.scattersmith %}
+
+
+
JavaScript Figure Reference: scatterternary Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scatterternary" trace_data=site.data.plotschema.traces.scatterternary %}
+
+
+
JavaScript Figure Reference: layout.scene
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="scene" %}
+
+
+
JavaScript Figure Reference: layout.selections
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="selections" %}
+
+
+
JavaScript Figure Reference: layout.shapes
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="shapes" %}
+
+
+
JavaScript Figure Reference: layout.sliders
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="sliders" %}
+
+
+
JavaScript Figure Reference: layout.smith
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="smith" %}
+
+
+
JavaScript Figure Reference: splom Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="splom" trace_data=site.data.plotschema.traces.splom %}
+
+
+
JavaScript Figure Reference: streamtube Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="streamtube" trace_data=site.data.plotschema.traces.streamtube %}
+
+
+
JavaScript Figure Reference: sunburst Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="sunburst" trace_data=site.data.plotschema.traces.sunburst %}
+
+
+
JavaScript Figure Reference: surface Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="surface" trace_data=site.data.plotschema.traces.surface %}
+
+
+
JavaScript Figure Reference: table Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="table" trace_data=site.data.plotschema.traces.table %}
+
+
+
JavaScript Figure Reference: layout.ternary
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="ternary" %}
+
+
+
JavaScript Figure Reference: treemap Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="treemap" trace_data=site.data.plotschema.traces.treemap %}
+
+
+
JavaScript Figure Reference: layout.updatemenus
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="updatemenus" %}
+
+
+
JavaScript Figure Reference: violin Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="violin" trace_data=site.data.plotschema.traces.violin %}
+
+
+
JavaScript Figure Reference: volume Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="volume" trace_data=site.data.plotschema.traces.volume %}
+
+
+
JavaScript Figure Reference: waterfall Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="waterfall" trace_data=site.data.plotschema.traces.waterfall %}
+
+
+
JavaScript Figure Reference: layout.xaxis
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="xaxis" %}
+
+
+
JavaScript Figure Reference: layout.yaxis
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="yaxis" %}
+
+
+
Python Figure Reference: layout.annotations
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="annotations" %}
+
+
+
Python Figure Reference: bar Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="bar" trace_data=site.data.plotschema.traces.bar %}
+
+
+
Python Figure Reference: barpolar Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="barpolar" trace_data=site.data.plotschema.traces.barpolar %}
+
+
+
Python Figure Reference: box Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="box" trace_data=site.data.plotschema.traces.box %}
+
+
+
Python Figure Reference: candlestick Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="candlestick" trace_data=site.data.plotschema.traces.candlestick %}
+
+
+
Python Figure Reference: carpet Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="carpet" trace_data=site.data.plotschema.traces.carpet %}
+
+
+
Python Figure Reference: choropleth Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="choropleth" trace_data=site.data.plotschema.traces.choropleth %}
+
+
+
Python Figure Reference: choroplethmap Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="choroplethmap" trace_data=site.data.plotschema.traces.choroplethmap %}
+
+
+
Python Figure Reference: choroplethmapbox Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="choroplethmapbox" trace_data=site.data.plotschema.traces.choroplethmapbox %}
+
+
+
Python Figure Reference: layout.coloraxis
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="coloraxis" %}
+
+
+
Python Figure Reference: cone Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="cone" trace_data=site.data.plotschema.traces.cone %}
+
+
+
Python Figure Reference: contour Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="contour" trace_data=site.data.plotschema.traces.contour %}
+
+
+
Python Figure Reference: contourcarpet Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="contourcarpet" trace_data=site.data.plotschema.traces.contourcarpet %}
+
+
+
Python Figure Reference: densitymap Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="densitymap" trace_data=site.data.plotschema.traces.densitymap %}
+
+
+
Python Figure Reference: densitymapbox Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="densitymapbox" trace_data=site.data.plotschema.traces.densitymapbox %}
+
+
+
Python Figure Reference: funnel Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="funnel" trace_data=site.data.plotschema.traces.funnel %}
+
+
+
Python Figure Reference: funnelarea Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="funnelarea" trace_data=site.data.plotschema.traces.funnelarea %}
+
+
+
Python Figure Reference: layout.geo
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="geo" %}
+
+
+
Python Figure Reference: layout
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="global" %}
+
+{%- for trace in site.data.plotschema.traces -%}
+{% if trace[1].layoutAttributes %}
+{% assign attribute=trace[1].layoutAttributes %}
+{% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" %}
+{% endif %}
+{%- endfor -%}
+
+
+
Python Figure Reference: heatmap Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="heatmap" trace_data=site.data.plotschema.traces.heatmap %}
+
+
+
Python Figure Reference: heatmapgl Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="heatmapgl" trace_data=site.data.plotschema.traces.heatmapgl %}
+
+
+
Python Figure Reference: histogram Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="histogram" trace_data=site.data.plotschema.traces.histogram %}
+
+
+
Python Figure Reference: histogram2d Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="histogram2d" trace_data=site.data.plotschema.traces.histogram2d %}
+
+
+
Python Figure Reference: histogram2dcontour Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="histogram2dcontour" trace_data=site.data.plotschema.traces.histogram2dcontour %}
+
+
+
Python Figure Reference: icicle Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="icicle" trace_data=site.data.plotschema.traces.icicle %}
+
+
+
Python Figure Reference: image Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="image" trace_data=site.data.plotschema.traces.image %}
+
+
+
Python Figure Reference: layout.images
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="images" %}
+
+
+
Python Figure Reference: indicator Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="indicator" trace_data=site.data.plotschema.traces.indicator %}
+
+
+
Python Figure Reference: isosurface Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="isosurface" trace_data=site.data.plotschema.traces.isosurface %}
+
+
+
Python Figure Reference: layout.mapbox
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="mapbox" %}
+
+
+
Python Figure Reference: mesh3d Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="mesh3d" trace_data=site.data.plotschema.traces.mesh3d %}
+
+
+
Python Figure Reference: ohlc Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="ohlc" trace_data=site.data.plotschema.traces.ohlc %}
+
+
+
Python Figure Reference: parcats Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="parcats" trace_data=site.data.plotschema.traces.parcats %}
+
+
+
Python Figure Reference: parcoords Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="parcoords" trace_data=site.data.plotschema.traces.parcoords %}
+
+
+
Python Figure Reference: pie Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="pie" trace_data=site.data.plotschema.traces.pie %}
+
+
+
Python Figure Reference: pointcloud Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="pointcloud" trace_data=site.data.plotschema.traces.pointcloud %}
+
+
+
Python Figure Reference: layout.polar
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="polar" %}
+
+
+
Python Figure Reference: sankey Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="sankey" trace_data=site.data.plotschema.traces.sankey %}
+
+
+
Python Figure Reference: scatter Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scatter" trace_data=site.data.plotschema.traces.scatter %}
+
+
+
Python Figure Reference: scatter3d Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scatter3d" trace_data=site.data.plotschema.traces.scatter3d %}
+
+
+
Python Figure Reference: scattercarpet Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scattercarpet" trace_data=site.data.plotschema.traces.scattercarpet %}
+
+
+
Python Figure Reference: scattergeo Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scattergeo" trace_data=site.data.plotschema.traces.scattergeo %}
+
+
+
Python Figure Reference: scattergl Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scattergl" trace_data=site.data.plotschema.traces.scattergl %}
+
+
+
Python Figure Reference: scattermap Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scattermap" trace_data=site.data.plotschema.traces.scattermap %}
+
+
+
Python Figure Reference: scattermapbox Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scattermapbox" trace_data=site.data.plotschema.traces.scattermapbox %}
+
+
+
Python Figure Reference: scatterpolar Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scatterpolar" trace_data=site.data.plotschema.traces.scatterpolar %}
+
+
+
Python Figure Reference: scatterpolargl Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scatterpolargl" trace_data=site.data.plotschema.traces.scatterpolargl %}
+
+
+
Python Figure Reference: scattersmith Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scattersmith" trace_data=site.data.plotschema.traces.scattersmith %}
+
+
+
Python Figure Reference: scatterternary Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="scatterternary" trace_data=site.data.plotschema.traces.scatterternary %}
+
+
+
Python Figure Reference: layout.scene
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="scene" %}
+
+
+
Python Figure Reference: layout.selections
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="selections" %}
+
+
+
Python Figure Reference: layout.shapes
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="shapes" %}
+
+
+
Python Figure Reference: layout.sliders
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="sliders" %}
+
+
+
Python Figure Reference: layout.smith
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="smith" %}
+
+
+
Python Figure Reference: splom Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="splom" trace_data=site.data.plotschema.traces.splom %}
+
+
+
Python Figure Reference: streamtube Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="streamtube" trace_data=site.data.plotschema.traces.streamtube %}
+
+
+
Python Figure Reference: sunburst Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="sunburst" trace_data=site.data.plotschema.traces.sunburst %}
+
+
+
Python Figure Reference: surface Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="surface" trace_data=site.data.plotschema.traces.surface %}
+
+
+
Python Figure Reference: table Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="table" trace_data=site.data.plotschema.traces.table %}
+
+
+
Python Figure Reference: layout.ternary
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="ternary" %}
+
+
+
Python Figure Reference: treemap Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="treemap" trace_data=site.data.plotschema.traces.treemap %}
+
+
+
Python Figure Reference: layout.updatemenus
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="updatemenus" %}
+
+
+
Python Figure Reference: violin Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="violin" trace_data=site.data.plotschema.traces.violin %}
+
+
+
Python Figure Reference: volume Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="volume" trace_data=site.data.plotschema.traces.volume %}
+
+
+
Python Figure Reference: waterfall Traces
+
+
+
+
+ {% include posts/reference-trace.html trace_name="waterfall" trace_data=site.data.plotschema.traces.waterfall %}
+
+
+
Python Figure Reference: layout.xaxis
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="xaxis" %}
+
+
+
Python Figure Reference: layout.yaxis
+
+
+
+
+ {% assign attribute=site.data.plotschema.layout.layoutAttributes %}
+ {% include posts/reference-block.html parentlink="layout" block="layout" parentpath="layout" mustmatch="yaxis" %}
+
+
+
Plotly.js Docs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 404 - Not found
+
+
+
+
+
+
+
+
+
+
+
{/*!
+ * clipboard.js v2.0.11
+ * https://clipboardjs.com/
+ *
+ * Licensed MIT © Zeno Rocha
+ */(function(t,r){typeof Rt=="object"&&typeof Yr=="object"?Yr.exports=r():typeof define=="function"&&define.amd?define([],r):typeof Rt=="object"?Rt.ClipboardJS=r():t.ClipboardJS=r()})(Rt,function(){return(function(){var e={686:(function(o,n,i){"use strict";i.d(n,{default:function(){return Ui}});var a=i(279),s=i.n(a),p=i(370),c=i.n(p),l=i(817),f=i.n(l);function u(D){try{return document.execCommand(D)}catch(A){return!1}}var d=function(A){var M=f()(A);return u("cut"),M},y=d;function L(D){var A=document.documentElement.getAttribute("dir")==="rtl",M=document.createElement("textarea");M.style.fontSize="12pt",M.style.border="0",M.style.padding="0",M.style.margin="0",M.style.position="absolute",M.style[A?"right":"left"]="-9999px";var F=window.pageYOffset||document.documentElement.scrollTop;return M.style.top="".concat(F,"px"),M.setAttribute("readonly",""),M.value=D,M}var X=function(A,M){var F=L(A);M.container.appendChild(F);var V=f()(F);return u("copy"),F.remove(),V},ee=function(A){var M=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{container:document.body},F="";return typeof A=="string"?F=X(A,M):A instanceof HTMLInputElement&&!["text","search","url","tel","password"].includes(A==null?void 0:A.type)?F=X(A.value,M):(F=f()(A),u("copy")),F},J=ee;function k(D){"@babel/helpers - typeof";return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?k=function(M){return typeof M}:k=function(M){return M&&typeof Symbol=="function"&&M.constructor===Symbol&&M!==Symbol.prototype?"symbol":typeof M},k(D)}var ft=function(){var A=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},M=A.action,F=M===void 0?"copy":M,V=A.container,Y=A.target,$e=A.text;if(F!=="copy"&&F!=="cut")throw new Error('Invalid "action" value, use either "copy" or "cut"');if(Y!==void 0)if(Y&&k(Y)==="object"&&Y.nodeType===1){if(F==="copy"&&Y.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if(F==="cut"&&(Y.hasAttribute("readonly")||Y.hasAttribute("disabled")))throw new Error(`Invalid "target" attribute. You can't cut text from elements with "readonly" or "disabled" attributes`)}else throw new Error('Invalid "target" value, use a valid Element');if($e)return J($e,{container:V});if(Y)return F==="cut"?y(Y):J(Y,{container:V})},qe=ft;function Fe(D){"@babel/helpers - typeof";return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?Fe=function(M){return typeof M}:Fe=function(M){return M&&typeof Symbol=="function"&&M.constructor===Symbol&&M!==Symbol.prototype?"symbol":typeof M},Fe(D)}function ki(D,A){if(!(D instanceof A))throw new TypeError("Cannot call a class as a function")}function no(D,A){for(var M=0;M0&&arguments[0]!==void 0?arguments[0]:{};this.action=typeof V.action=="function"?V.action:this.defaultAction,this.target=typeof V.target=="function"?V.target:this.defaultTarget,this.text=typeof V.text=="function"?V.text:this.defaultText,this.container=Fe(V.container)==="object"?V.container:document.body}},{key:"listenClick",value:function(V){var Y=this;this.listener=c()(V,"click",function($e){return Y.onClick($e)})}},{key:"onClick",value:function(V){var Y=V.delegateTarget||V.currentTarget,$e=this.action(Y)||"copy",Wt=qe({action:$e,container:this.container,target:this.target(Y),text:this.text(Y)});this.emit(Wt?"success":"error",{action:$e,text:Wt,trigger:Y,clearSelection:function(){Y&&Y.focus(),window.getSelection().removeAllRanges()}})}},{key:"defaultAction",value:function(V){return vr("action",V)}},{key:"defaultTarget",value:function(V){var Y=vr("target",V);if(Y)return document.querySelector(Y)}},{key:"defaultText",value:function(V){return vr("text",V)}},{key:"destroy",value:function(){this.listener.destroy()}}],[{key:"copy",value:function(V){var Y=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{container:document.body};return J(V,Y)}},{key:"cut",value:function(V){return y(V)}},{key:"isSupported",value:function(){var V=arguments.length>0&&arguments[0]!==void 0?arguments[0]:["copy","cut"],Y=typeof V=="string"?[V]:V,$e=!!document.queryCommandSupported;return Y.forEach(function(Wt){$e=$e&&!!document.queryCommandSupported(Wt)}),$e}}]),M})(s()),Ui=Fi}),828:(function(o){var n=9;if(typeof Element!="undefined"&&!Element.prototype.matches){var i=Element.prototype;i.matches=i.matchesSelector||i.mozMatchesSelector||i.msMatchesSelector||i.oMatchesSelector||i.webkitMatchesSelector}function a(s,p){for(;s&&s.nodeType!==n;){if(typeof s.matches=="function"&&s.matches(p))return s;s=s.parentNode}}o.exports=a}),438:(function(o,n,i){var a=i(828);function s(l,f,u,d,y){var L=c.apply(this,arguments);return l.addEventListener(u,L,y),{destroy:function(){l.removeEventListener(u,L,y)}}}function p(l,f,u,d,y){return typeof l.addEventListener=="function"?s.apply(null,arguments):typeof u=="function"?s.bind(null,document).apply(null,arguments):(typeof l=="string"&&(l=document.querySelectorAll(l)),Array.prototype.map.call(l,function(L){return s(L,f,u,d,y)}))}function c(l,f,u,d){return function(y){y.delegateTarget=a(y.target,f),y.delegateTarget&&d.call(l,y)}}o.exports=p}),879:(function(o,n){n.node=function(i){return i!==void 0&&i instanceof HTMLElement&&i.nodeType===1},n.nodeList=function(i){var a=Object.prototype.toString.call(i);return i!==void 0&&(a==="[object NodeList]"||a==="[object HTMLCollection]")&&"length"in i&&(i.length===0||n.node(i[0]))},n.string=function(i){return typeof i=="string"||i instanceof String},n.fn=function(i){var a=Object.prototype.toString.call(i);return a==="[object Function]"}}),370:(function(o,n,i){var a=i(879),s=i(438);function p(u,d,y){if(!u&&!d&&!y)throw new Error("Missing required arguments");if(!a.string(d))throw new TypeError("Second argument must be a String");if(!a.fn(y))throw new TypeError("Third argument must be a Function");if(a.node(u))return c(u,d,y);if(a.nodeList(u))return l(u,d,y);if(a.string(u))return f(u,d,y);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function c(u,d,y){return u.addEventListener(d,y),{destroy:function(){u.removeEventListener(d,y)}}}function l(u,d,y){return Array.prototype.forEach.call(u,function(L){L.addEventListener(d,y)}),{destroy:function(){Array.prototype.forEach.call(u,function(L){L.removeEventListener(d,y)})}}}function f(u,d,y){return s(document.body,u,d,y)}o.exports=p}),817:(function(o){function n(i){var a;if(i.nodeName==="SELECT")i.focus(),a=i.value;else if(i.nodeName==="INPUT"||i.nodeName==="TEXTAREA"){var s=i.hasAttribute("readonly");s||i.setAttribute("readonly",""),i.select(),i.setSelectionRange(0,i.value.length),s||i.removeAttribute("readonly"),a=i.value}else{i.hasAttribute("contenteditable")&&i.focus();var p=window.getSelection(),c=document.createRange();c.selectNodeContents(i),p.removeAllRanges(),p.addRange(c),a=p.toString()}return a}o.exports=n}),279:(function(o){function n(){}n.prototype={on:function(i,a,s){var p=this.e||(this.e={});return(p[i]||(p[i]=[])).push({fn:a,ctx:s}),this},once:function(i,a,s){var p=this;function c(){p.off(i,c),a.apply(s,arguments)}return c._=a,this.on(i,c,s)},emit:function(i){var a=[].slice.call(arguments,1),s=((this.e||(this.e={}))[i]||[]).slice(),p=0,c=s.length;for(p;p0&&i[i.length-1])&&(c[0]===6||c[0]===2)){r=0;continue}if(c[0]===3&&(!i||c[1]>i[0]&&c[1]=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function z(e,t){var r=typeof Symbol=="function"&&e[Symbol.iterator];if(!r)return e;var o=r.call(e),n,i=[],a;try{for(;(t===void 0||t-- >0)&&!(n=o.next()).done;)i.push(n.value)}catch(s){a={error:s}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(a)throw a.error}}return i}function q(e,t,r){if(r||arguments.length===2)for(var o=0,n=t.length,i;o1||p(d,L)})},y&&(n[d]=y(n[d])))}function p(d,y){try{c(o[d](y))}catch(L){u(i[0][3],L)}}function c(d){d.value instanceof nt?Promise.resolve(d.value.v).then(l,f):u(i[0][2],d)}function l(d){p("next",d)}function f(d){p("throw",d)}function u(d,y){d(y),i.shift(),i.length&&p(i[0][0],i[0][1])}}function uo(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t=e[Symbol.asyncIterator],r;return t?t.call(e):(e=typeof he=="function"?he(e):e[Symbol.iterator](),r={},o("next"),o("throw"),o("return"),r[Symbol.asyncIterator]=function(){return this},r);function o(i){r[i]=e[i]&&function(a){return new Promise(function(s,p){a=e[i](a),n(s,p,a.done,a.value)})}}function n(i,a,s,p){Promise.resolve(p).then(function(c){i({value:c,done:s})},a)}}function H(e){return typeof e=="function"}function ut(e){var t=function(o){Error.call(o),o.stack=new Error().stack},r=e(t);return r.prototype=Object.create(Error.prototype),r.prototype.constructor=r,r}var zt=ut(function(e){return function(r){e(this),this.message=r?r.length+` errors occurred during unsubscription:
+`+r.map(function(o,n){return n+1+") "+o.toString()}).join(`
+ `):"",this.name="UnsubscriptionError",this.errors=r}});function Qe(e,t){if(e){var r=e.indexOf(t);0<=r&&e.splice(r,1)}}var Ue=(function(){function e(t){this.initialTeardown=t,this.closed=!1,this._parentage=null,this._finalizers=null}return e.prototype.unsubscribe=function(){var t,r,o,n,i;if(!this.closed){this.closed=!0;var a=this._parentage;if(a)if(this._parentage=null,Array.isArray(a))try{for(var s=he(a),p=s.next();!p.done;p=s.next()){var c=p.value;c.remove(this)}}catch(L){t={error:L}}finally{try{p&&!p.done&&(r=s.return)&&r.call(s)}finally{if(t)throw t.error}}else a.remove(this);var l=this.initialTeardown;if(H(l))try{l()}catch(L){i=L instanceof zt?L.errors:[L]}var f=this._finalizers;if(f){this._finalizers=null;try{for(var u=he(f),d=u.next();!d.done;d=u.next()){var y=d.value;try{ho(y)}catch(L){i=i!=null?i:[],L instanceof zt?i=q(q([],z(i)),z(L.errors)):i.push(L)}}}catch(L){o={error:L}}finally{try{d&&!d.done&&(n=u.return)&&n.call(u)}finally{if(o)throw o.error}}}if(i)throw new zt(i)}},e.prototype.add=function(t){var r;if(t&&t!==this)if(this.closed)ho(t);else{if(t instanceof e){if(t.closed||t._hasParent(this))return;t._addParent(this)}(this._finalizers=(r=this._finalizers)!==null&&r!==void 0?r:[]).push(t)}},e.prototype._hasParent=function(t){var r=this._parentage;return r===t||Array.isArray(r)&&r.includes(t)},e.prototype._addParent=function(t){var r=this._parentage;this._parentage=Array.isArray(r)?(r.push(t),r):r?[r,t]:t},e.prototype._removeParent=function(t){var r=this._parentage;r===t?this._parentage=null:Array.isArray(r)&&Qe(r,t)},e.prototype.remove=function(t){var r=this._finalizers;r&&Qe(r,t),t instanceof e&&t._removeParent(this)},e.EMPTY=(function(){var t=new e;return t.closed=!0,t})(),e})();var Tr=Ue.EMPTY;function Nt(e){return e instanceof Ue||e&&"closed"in e&&H(e.remove)&&H(e.add)&&H(e.unsubscribe)}function ho(e){H(e)?e():e.unsubscribe()}var Pe={onUnhandledError:null,onStoppedNotification:null,Promise:void 0,useDeprecatedSynchronousErrorHandling:!1,useDeprecatedNextContext:!1};var dt={setTimeout:function(e,t){for(var r=[],o=2;o0},enumerable:!1,configurable:!0}),t.prototype._trySubscribe=function(r){return this._throwIfClosed(),e.prototype._trySubscribe.call(this,r)},t.prototype._subscribe=function(r){return this._throwIfClosed(),this._checkFinalizedStatuses(r),this._innerSubscribe(r)},t.prototype._innerSubscribe=function(r){var o=this,n=this,i=n.hasError,a=n.isStopped,s=n.observers;return i||a?Tr:(this.currentObservers=null,s.push(r),new Ue(function(){o.currentObservers=null,Qe(s,r)}))},t.prototype._checkFinalizedStatuses=function(r){var o=this,n=o.hasError,i=o.thrownError,a=o.isStopped;n?r.error(i):a&&r.complete()},t.prototype.asObservable=function(){var r=new j;return r.source=this,r},t.create=function(r,o){return new To(r,o)},t})(j);var To=(function(e){oe(t,e);function t(r,o){var n=e.call(this)||this;return n.destination=r,n.source=o,n}return t.prototype.next=function(r){var o,n;(n=(o=this.destination)===null||o===void 0?void 0:o.next)===null||n===void 0||n.call(o,r)},t.prototype.error=function(r){var o,n;(n=(o=this.destination)===null||o===void 0?void 0:o.error)===null||n===void 0||n.call(o,r)},t.prototype.complete=function(){var r,o;(o=(r=this.destination)===null||r===void 0?void 0:r.complete)===null||o===void 0||o.call(r)},t.prototype._subscribe=function(r){var o,n;return(n=(o=this.source)===null||o===void 0?void 0:o.subscribe(r))!==null&&n!==void 0?n:Tr},t})(g);var _r=(function(e){oe(t,e);function t(r){var o=e.call(this)||this;return o._value=r,o}return Object.defineProperty(t.prototype,"value",{get:function(){return this.getValue()},enumerable:!1,configurable:!0}),t.prototype._subscribe=function(r){var o=e.prototype._subscribe.call(this,r);return!o.closed&&r.next(this._value),o},t.prototype.getValue=function(){var r=this,o=r.hasError,n=r.thrownError,i=r._value;if(o)throw n;return this._throwIfClosed(),i},t.prototype.next=function(r){e.prototype.next.call(this,this._value=r)},t})(g);var _t={now:function(){return(_t.delegate||Date).now()},delegate:void 0};var At=(function(e){oe(t,e);function t(r,o,n){r===void 0&&(r=1/0),o===void 0&&(o=1/0),n===void 0&&(n=_t);var i=e.call(this)||this;return i._bufferSize=r,i._windowTime=o,i._timestampProvider=n,i._buffer=[],i._infiniteTimeWindow=!0,i._infiniteTimeWindow=o===1/0,i._bufferSize=Math.max(1,r),i._windowTime=Math.max(1,o),i}return t.prototype.next=function(r){var o=this,n=o.isStopped,i=o._buffer,a=o._infiniteTimeWindow,s=o._timestampProvider,p=o._windowTime;n||(i.push(r),!a&&i.push(s.now()+p)),this._trimBuffer(),e.prototype.next.call(this,r)},t.prototype._subscribe=function(r){this._throwIfClosed(),this._trimBuffer();for(var o=this._innerSubscribe(r),n=this,i=n._infiniteTimeWindow,a=n._buffer,s=a.slice(),p=0;p0?e.prototype.schedule.call(this,r,o):(this.delay=o,this.state=r,this.scheduler.flush(this),this)},t.prototype.execute=function(r,o){return o>0||this.closed?e.prototype.execute.call(this,r,o):this._execute(r,o)},t.prototype.requestAsyncId=function(r,o,n){return n===void 0&&(n=0),n!=null&&n>0||n==null&&this.delay>0?e.prototype.requestAsyncId.call(this,r,o,n):(r.flush(this),0)},t})(gt);var Lo=(function(e){oe(t,e);function t(){return e!==null&&e.apply(this,arguments)||this}return t})(yt);var kr=new Lo(Oo);var Mo=(function(e){oe(t,e);function t(r,o){var n=e.call(this,r,o)||this;return n.scheduler=r,n.work=o,n}return t.prototype.requestAsyncId=function(r,o,n){return n===void 0&&(n=0),n!==null&&n>0?e.prototype.requestAsyncId.call(this,r,o,n):(r.actions.push(this),r._scheduled||(r._scheduled=vt.requestAnimationFrame(function(){return r.flush(void 0)})))},t.prototype.recycleAsyncId=function(r,o,n){var i;if(n===void 0&&(n=0),n!=null?n>0:this.delay>0)return e.prototype.recycleAsyncId.call(this,r,o,n);var a=r.actions;o!=null&&o===r._scheduled&&((i=a[a.length-1])===null||i===void 0?void 0:i.id)!==o&&(vt.cancelAnimationFrame(o),r._scheduled=void 0)},t})(gt);var _o=(function(e){oe(t,e);function t(){return e!==null&&e.apply(this,arguments)||this}return t.prototype.flush=function(r){this._active=!0;var o;r?o=r.id:(o=this._scheduled,this._scheduled=void 0);var n=this.actions,i;r=r||n.shift();do if(i=r.execute(r.state,r.delay))break;while((r=n[0])&&r.id===o&&n.shift());if(this._active=!1,i){for(;(r=n[0])&&r.id===o&&n.shift();)r.unsubscribe();throw i}},t})(yt);var me=new _o(Mo);var S=new j(function(e){return e.complete()});function Kt(e){return e&&H(e.schedule)}function Hr(e){return e[e.length-1]}function Xe(e){return H(Hr(e))?e.pop():void 0}function ke(e){return Kt(Hr(e))?e.pop():void 0}function Yt(e,t){return typeof Hr(e)=="number"?e.pop():t}var xt=(function(e){return e&&typeof e.length=="number"&&typeof e!="function"});function Bt(e){return H(e==null?void 0:e.then)}function Gt(e){return H(e[bt])}function Jt(e){return Symbol.asyncIterator&&H(e==null?void 0:e[Symbol.asyncIterator])}function Xt(e){return new TypeError("You provided "+(e!==null&&typeof e=="object"?"an invalid object":"'"+e+"'")+" where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.")}function Zi(){return typeof Symbol!="function"||!Symbol.iterator?"@@iterator":Symbol.iterator}var Zt=Zi();function er(e){return H(e==null?void 0:e[Zt])}function tr(e){return fo(this,arguments,function(){var r,o,n,i;return Dt(this,function(a){switch(a.label){case 0:r=e.getReader(),a.label=1;case 1:a.trys.push([1,,9,10]),a.label=2;case 2:return[4,nt(r.read())];case 3:return o=a.sent(),n=o.value,i=o.done,i?[4,nt(void 0)]:[3,5];case 4:return[2,a.sent()];case 5:return[4,nt(n)];case 6:return[4,a.sent()];case 7:return a.sent(),[3,2];case 8:return[3,10];case 9:return r.releaseLock(),[7];case 10:return[2]}})})}function rr(e){return H(e==null?void 0:e.getReader)}function U(e){if(e instanceof j)return e;if(e!=null){if(Gt(e))return ea(e);if(xt(e))return ta(e);if(Bt(e))return ra(e);if(Jt(e))return Ao(e);if(er(e))return oa(e);if(rr(e))return na(e)}throw Xt(e)}function ea(e){return new j(function(t){var r=e[bt]();if(H(r.subscribe))return r.subscribe(t);throw new TypeError("Provided object does not correctly implement Symbol.observable")})}function ta(e){return new j(function(t){for(var r=0;r=2;return function(o){return o.pipe(e?b(function(n,i){return e(n,i,o)}):le,Te(1),r?Ve(t):Qo(function(){return new nr}))}}function jr(e){return e<=0?function(){return S}:E(function(t,r){var o=[];t.subscribe(T(r,function(n){o.push(n),e=2,!0))}function pe(e){e===void 0&&(e={});var t=e.connector,r=t===void 0?function(){return new g}:t,o=e.resetOnError,n=o===void 0?!0:o,i=e.resetOnComplete,a=i===void 0?!0:i,s=e.resetOnRefCountZero,p=s===void 0?!0:s;return function(c){var l,f,u,d=0,y=!1,L=!1,X=function(){f==null||f.unsubscribe(),f=void 0},ee=function(){X(),l=u=void 0,y=L=!1},J=function(){var k=l;ee(),k==null||k.unsubscribe()};return E(function(k,ft){d++,!L&&!y&&X();var qe=u=u!=null?u:r();ft.add(function(){d--,d===0&&!L&&!y&&(f=Ur(J,p))}),qe.subscribe(ft),!l&&d>0&&(l=new at({next:function(Fe){return qe.next(Fe)},error:function(Fe){L=!0,X(),f=Ur(ee,n,Fe),qe.error(Fe)},complete:function(){y=!0,X(),f=Ur(ee,a),qe.complete()}}),U(k).subscribe(l))})(c)}}function Ur(e,t){for(var r=[],o=2;oe.next(document)),e}function P(e,t=document){return Array.from(t.querySelectorAll(e))}function R(e,t=document){let r=fe(e,t);if(typeof r=="undefined")throw new ReferenceError(`Missing element: expected "${e}" to be present`);return r}function fe(e,t=document){return t.querySelector(e)||void 0}function Ie(){var e,t,r,o;return(o=(r=(t=(e=document.activeElement)==null?void 0:e.shadowRoot)==null?void 0:t.activeElement)!=null?r:document.activeElement)!=null?o:void 0}var wa=O(h(document.body,"focusin"),h(document.body,"focusout")).pipe(_e(1),Q(void 0),m(()=>Ie()||document.body),G(1));function et(e){return wa.pipe(m(t=>e.contains(t)),K())}function Ht(e,t){return C(()=>O(h(e,"mouseenter").pipe(m(()=>!0)),h(e,"mouseleave").pipe(m(()=>!1))).pipe(t?kt(r=>Le(+!r*t)):le,Q(e.matches(":hover"))))}function Jo(e,t){if(typeof t=="string"||typeof t=="number")e.innerHTML+=t.toString();else if(t instanceof Node)e.appendChild(t);else if(Array.isArray(t))for(let r of t)Jo(e,r)}function x(e,t,...r){let o=document.createElement(e);if(t)for(let n of Object.keys(t))typeof t[n]!="undefined"&&(typeof t[n]!="boolean"?o.setAttribute(n,t[n]):o.setAttribute(n,""));for(let n of r)Jo(o,n);return o}function sr(e){if(e>999){let t=+((e-950)%1e3>99);return`${((e+1e-6)/1e3).toFixed(t)}k`}else return e.toString()}function wt(e){let t=x("script",{src:e});return C(()=>(document.head.appendChild(t),O(h(t,"load"),h(t,"error").pipe(v(()=>$r(()=>new ReferenceError(`Invalid script: ${e}`))))).pipe(m(()=>{}),_(()=>document.head.removeChild(t)),Te(1))))}var Xo=new g,Ta=C(()=>typeof ResizeObserver=="undefined"?wt("https://unpkg.com/resize-observer-polyfill"):I(void 0)).pipe(m(()=>new ResizeObserver(e=>e.forEach(t=>Xo.next(t)))),v(e=>O(Ye,I(e)).pipe(_(()=>e.disconnect()))),G(1));function ce(e){return{width:e.offsetWidth,height:e.offsetHeight}}function ge(e){let t=e;for(;t.clientWidth===0&&t.parentElement;)t=t.parentElement;return Ta.pipe(w(r=>r.observe(t)),v(r=>Xo.pipe(b(o=>o.target===t),_(()=>r.unobserve(t)))),m(()=>ce(e)),Q(ce(e)))}function Tt(e){return{width:e.scrollWidth,height:e.scrollHeight}}function cr(e){let t=e.parentElement;for(;t&&(e.scrollWidth<=t.scrollWidth&&e.scrollHeight<=t.scrollHeight);)t=(e=t).parentElement;return t?e:void 0}function Zo(e){let t=[],r=e.parentElement;for(;r;)(e.clientWidth>r.clientWidth||e.clientHeight>r.clientHeight)&&t.push(r),r=(e=r).parentElement;return t.length===0&&t.push(document.documentElement),t}function De(e){return{x:e.offsetLeft,y:e.offsetTop}}function en(e){let t=e.getBoundingClientRect();return{x:t.x+window.scrollX,y:t.y+window.scrollY}}function tn(e){return O(h(window,"load"),h(window,"resize")).pipe(Me(0,me),m(()=>De(e)),Q(De(e)))}function pr(e){return{x:e.scrollLeft,y:e.scrollTop}}function ze(e){return O(h(e,"scroll"),h(window,"scroll"),h(window,"resize")).pipe(Me(0,me),m(()=>pr(e)),Q(pr(e)))}var rn=new g,Sa=C(()=>I(new IntersectionObserver(e=>{for(let t of e)rn.next(t)},{threshold:0}))).pipe(v(e=>O(Ye,I(e)).pipe(_(()=>e.disconnect()))),G(1));function tt(e){return Sa.pipe(w(t=>t.observe(e)),v(t=>rn.pipe(b(({target:r})=>r===e),_(()=>t.unobserve(e)),m(({isIntersecting:r})=>r))))}function on(e,t=16){return ze(e).pipe(m(({y:r})=>{let o=ce(e),n=Tt(e);return r>=n.height-o.height-t}),K())}var lr={drawer:R("[data-md-toggle=drawer]"),search:R("[data-md-toggle=search]")};function nn(e){return lr[e].checked}function Je(e,t){lr[e].checked!==t&&lr[e].click()}function Ne(e){let t=lr[e];return h(t,"change").pipe(m(()=>t.checked),Q(t.checked))}function Oa(e,t){switch(e.constructor){case HTMLInputElement:return e.type==="radio"?/^Arrow/.test(t):!0;case HTMLSelectElement:case HTMLTextAreaElement:return!0;default:return e.isContentEditable}}function La(){return O(h(window,"compositionstart").pipe(m(()=>!0)),h(window,"compositionend").pipe(m(()=>!1))).pipe(Q(!1))}function an(){let e=h(window,"keydown").pipe(b(t=>!(t.metaKey||t.ctrlKey)),m(t=>({mode:nn("search")?"search":"global",type:t.key,claim(){t.preventDefault(),t.stopPropagation()}})),b(({mode:t,type:r})=>{if(t==="global"){let o=Ie();if(typeof o!="undefined")return!Oa(o,r)}return!0}),pe());return La().pipe(v(t=>t?S:e))}function ye(){return new URL(location.href)}function lt(e,t=!1){if(B("navigation.instant")&&!t){let r=x("a",{href:e.href});document.body.appendChild(r),r.click(),r.remove()}else location.href=e.href}function sn(){return new g}function cn(){return location.hash.slice(1)}function pn(e){let t=x("a",{href:e});t.addEventListener("click",r=>r.stopPropagation()),t.click()}function Ma(e){return O(h(window,"hashchange"),e).pipe(m(cn),Q(cn()),b(t=>t.length>0),G(1))}function ln(e){return Ma(e).pipe(m(t=>fe(`[id="${t}"]`)),b(t=>typeof t!="undefined"))}function $t(e){let t=matchMedia(e);return ir(r=>t.addListener(()=>r(t.matches))).pipe(Q(t.matches))}function mn(){let e=matchMedia("print");return O(h(window,"beforeprint").pipe(m(()=>!0)),h(window,"afterprint").pipe(m(()=>!1))).pipe(Q(e.matches))}function zr(e,t){return e.pipe(v(r=>r?t():S))}function Nr(e,t){return new j(r=>{let o=new XMLHttpRequest;return o.open("GET",`${e}`),o.responseType="blob",o.addEventListener("load",()=>{o.status>=200&&o.status<300?(r.next(o.response),r.complete()):r.error(new Error(o.statusText))}),o.addEventListener("error",()=>{r.error(new Error("Network error"))}),o.addEventListener("abort",()=>{r.complete()}),typeof(t==null?void 0:t.progress$)!="undefined"&&(o.addEventListener("progress",n=>{var i;if(n.lengthComputable)t.progress$.next(n.loaded/n.total*100);else{let a=(i=o.getResponseHeader("Content-Length"))!=null?i:0;t.progress$.next(n.loaded/+a*100)}}),t.progress$.next(5)),o.send(),()=>o.abort()})}function je(e,t){return Nr(e,t).pipe(v(r=>r.text()),m(r=>JSON.parse(r)),G(1))}function fn(e,t){let r=new DOMParser;return Nr(e,t).pipe(v(o=>o.text()),m(o=>r.parseFromString(o,"text/html")),G(1))}function un(e,t){let r=new DOMParser;return Nr(e,t).pipe(v(o=>o.text()),m(o=>r.parseFromString(o,"text/xml")),G(1))}function dn(){return{x:Math.max(0,scrollX),y:Math.max(0,scrollY)}}function hn(){return O(h(window,"scroll",{passive:!0}),h(window,"resize",{passive:!0})).pipe(m(dn),Q(dn()))}function bn(){return{width:innerWidth,height:innerHeight}}function vn(){return h(window,"resize",{passive:!0}).pipe(m(bn),Q(bn()))}function gn(){return N([hn(),vn()]).pipe(m(([e,t])=>({offset:e,size:t})),G(1))}function mr(e,{viewport$:t,header$:r}){let o=t.pipe(te("size")),n=N([o,r]).pipe(m(()=>De(e)));return N([r,t,n]).pipe(m(([{height:i},{offset:a,size:s},{x:p,y:c}])=>({offset:{x:a.x-p,y:a.y-c+i},size:s})))}function _a(e){return h(e,"message",t=>t.data)}function Aa(e){let t=new g;return t.subscribe(r=>e.postMessage(r)),t}function yn(e,t=new Worker(e)){let r=_a(t),o=Aa(t),n=new g;n.subscribe(o);let i=o.pipe(Z(),ie(!0));return n.pipe(Z(),Re(r.pipe(W(i))),pe())}var Ca=R("#__config"),St=JSON.parse(Ca.textContent);St.base=`${new URL(St.base,ye())}`;function xe(){return St}function B(e){return St.features.includes(e)}function Ee(e,t){return typeof t!="undefined"?St.translations[e].replace("#",t.toString()):St.translations[e]}function Se(e,t=document){return R(`[data-md-component=${e}]`,t)}function ae(e,t=document){return P(`[data-md-component=${e}]`,t)}function ka(e){let t=R(".md-typeset > :first-child",e);return h(t,"click",{once:!0}).pipe(m(()=>R(".md-typeset",e)),m(r=>({hash:__md_hash(r.innerHTML)})))}function xn(e){if(!B("announce.dismiss")||!e.childElementCount)return S;if(!e.hidden){let t=R(".md-typeset",e);__md_hash(t.innerHTML)===__md_get("__announce")&&(e.hidden=!0)}return C(()=>{let t=new g;return t.subscribe(({hash:r})=>{e.hidden=!0,__md_set("__announce",r)}),ka(e).pipe(w(r=>t.next(r)),_(()=>t.complete()),m(r=>$({ref:e},r)))})}function Ha(e,{target$:t}){return t.pipe(m(r=>({hidden:r!==e})))}function En(e,t){let r=new g;return r.subscribe(({hidden:o})=>{e.hidden=o}),Ha(e,t).pipe(w(o=>r.next(o)),_(()=>r.complete()),m(o=>$({ref:e},o)))}function Pt(e,t){return t==="inline"?x("div",{class:"md-tooltip md-tooltip--inline",id:e,role:"tooltip"},x("div",{class:"md-tooltip__inner md-typeset"})):x("div",{class:"md-tooltip",id:e,role:"tooltip"},x("div",{class:"md-tooltip__inner md-typeset"}))}function wn(...e){return x("div",{class:"md-tooltip2",role:"tooltip"},x("div",{class:"md-tooltip2__inner md-typeset"},e))}function Tn(e,t){if(t=t?`${t}_annotation_${e}`:void 0,t){let r=t?`#${t}`:void 0;return x("aside",{class:"md-annotation",tabIndex:0},Pt(t),x("a",{href:r,class:"md-annotation__index",tabIndex:-1},x("span",{"data-md-annotation-id":e})))}else return x("aside",{class:"md-annotation",tabIndex:0},Pt(t),x("span",{class:"md-annotation__index",tabIndex:-1},x("span",{"data-md-annotation-id":e})))}function Sn(e){return x("button",{class:"md-clipboard md-icon",title:Ee("clipboard.copy"),"data-clipboard-target":`#${e} > code`})}var Ln=Lt(qr());function Qr(e,t){let r=t&2,o=t&1,n=Object.keys(e.terms).filter(p=>!e.terms[p]).reduce((p,c)=>[...p,x("del",null,(0,Ln.default)(c))," "],[]).slice(0,-1),i=xe(),a=new URL(e.location,i.base);B("search.highlight")&&a.searchParams.set("h",Object.entries(e.terms).filter(([,p])=>p).reduce((p,[c])=>`${p} ${c}`.trim(),""));let{tags:s}=xe();return x("a",{href:`${a}`,class:"md-search-result__link",tabIndex:-1},x("article",{class:"md-search-result__article md-typeset","data-md-score":e.score.toFixed(2)},r>0&&x("div",{class:"md-search-result__icon md-icon"}),r>0&&x("h1",null,e.title),r<=0&&x("h2",null,e.title),o>0&&e.text.length>0&&e.text,e.tags&&x("nav",{class:"md-tags"},e.tags.map(p=>{let c=s?p in s?`md-tag-icon md-tag--${s[p]}`:"md-tag-icon":"";return x("span",{class:`md-tag ${c}`},p)})),o>0&&n.length>0&&x("p",{class:"md-search-result__terms"},Ee("search.result.term.missing"),": ",...n)))}function Mn(e){let t=e[0].score,r=[...e],o=xe(),n=r.findIndex(l=>!`${new URL(l.location,o.base)}`.includes("#")),[i]=r.splice(n,1),a=r.findIndex(l=>l.scoreQr(l,1)),...p.length?[x("details",{class:"md-search-result__more"},x("summary",{tabIndex:-1},x("div",null,p.length>0&&p.length===1?Ee("search.result.more.one"):Ee("search.result.more.other",p.length))),...p.map(l=>Qr(l,1)))]:[]];return x("li",{class:"md-search-result__item"},c)}function _n(e){return x("ul",{class:"md-source__facts"},Object.entries(e).map(([t,r])=>x("li",{class:`md-source__fact md-source__fact--${t}`},typeof r=="number"?sr(r):r)))}function Kr(e){let t=`tabbed-control tabbed-control--${e}`;return x("div",{class:t,hidden:!0},x("button",{class:"tabbed-button",tabIndex:-1,"aria-hidden":"true"}))}function An(e){return x("div",{class:"md-typeset__scrollwrap"},x("div",{class:"md-typeset__table"},e))}function Ra(e){var o;let t=xe(),r=new URL(`../${e.version}/`,t.base);return x("li",{class:"md-version__item"},x("a",{href:`${r}`,class:"md-version__link"},e.title,((o=t.version)==null?void 0:o.alias)&&e.aliases.length>0&&x("span",{class:"md-version__alias"},e.aliases[0])))}function Cn(e,t){var o;let r=xe();return e=e.filter(n=>{var i;return!((i=n.properties)!=null&&i.hidden)}),x("div",{class:"md-version"},x("button",{class:"md-version__current","aria-label":Ee("select.version")},t.title,((o=r.version)==null?void 0:o.alias)&&t.aliases.length>0&&x("span",{class:"md-version__alias"},t.aliases[0])),x("ul",{class:"md-version__list"},e.map(Ra)))}var Ia=0;function ja(e){let t=N([et(e),Ht(e)]).pipe(m(([o,n])=>o||n),K()),r=C(()=>Zo(e)).pipe(ne(ze),pt(1),He(t),m(()=>en(e)));return t.pipe(Ae(o=>o),v(()=>N([t,r])),m(([o,n])=>({active:o,offset:n})),pe())}function Fa(e,t){let{content$:r,viewport$:o}=t,n=`__tooltip2_${Ia++}`;return C(()=>{let i=new g,a=new _r(!1);i.pipe(Z(),ie(!1)).subscribe(a);let s=a.pipe(kt(c=>Le(+!c*250,kr)),K(),v(c=>c?r:S),w(c=>c.id=n),pe());N([i.pipe(m(({active:c})=>c)),s.pipe(v(c=>Ht(c,250)),Q(!1))]).pipe(m(c=>c.some(l=>l))).subscribe(a);let p=a.pipe(b(c=>c),re(s,o),m(([c,l,{size:f}])=>{let u=e.getBoundingClientRect(),d=u.width/2;if(l.role==="tooltip")return{x:d,y:8+u.height};if(u.y>=f.height/2){let{height:y}=ce(l);return{x:d,y:-16-y}}else return{x:d,y:16+u.height}}));return N([s,i,p]).subscribe(([c,{offset:l},f])=>{c.style.setProperty("--md-tooltip-host-x",`${l.x}px`),c.style.setProperty("--md-tooltip-host-y",`${l.y}px`),c.style.setProperty("--md-tooltip-x",`${f.x}px`),c.style.setProperty("--md-tooltip-y",`${f.y}px`),c.classList.toggle("md-tooltip2--top",f.y<0),c.classList.toggle("md-tooltip2--bottom",f.y>=0)}),a.pipe(b(c=>c),re(s,(c,l)=>l),b(c=>c.role==="tooltip")).subscribe(c=>{let l=ce(R(":scope > *",c));c.style.setProperty("--md-tooltip-width",`${l.width}px`),c.style.setProperty("--md-tooltip-tail","0px")}),a.pipe(K(),ve(me),re(s)).subscribe(([c,l])=>{l.classList.toggle("md-tooltip2--active",c)}),N([a.pipe(b(c=>c)),s]).subscribe(([c,l])=>{l.role==="dialog"?(e.setAttribute("aria-controls",n),e.setAttribute("aria-haspopup","dialog")):e.setAttribute("aria-describedby",n)}),a.pipe(b(c=>!c)).subscribe(()=>{e.removeAttribute("aria-controls"),e.removeAttribute("aria-describedby"),e.removeAttribute("aria-haspopup")}),ja(e).pipe(w(c=>i.next(c)),_(()=>i.complete()),m(c=>$({ref:e},c)))})}function mt(e,{viewport$:t},r=document.body){return Fa(e,{content$:new j(o=>{let n=e.title,i=wn(n);return o.next(i),e.removeAttribute("title"),r.append(i),()=>{i.remove(),e.setAttribute("title",n)}}),viewport$:t})}function Ua(e,t){let r=C(()=>N([tn(e),ze(t)])).pipe(m(([{x:o,y:n},i])=>{let{width:a,height:s}=ce(e);return{x:o-i.x+a/2,y:n-i.y+s/2}}));return et(e).pipe(v(o=>r.pipe(m(n=>({active:o,offset:n})),Te(+!o||1/0))))}function kn(e,t,{target$:r}){let[o,n]=Array.from(e.children);return C(()=>{let i=new g,a=i.pipe(Z(),ie(!0));return i.subscribe({next({offset:s}){e.style.setProperty("--md-tooltip-x",`${s.x}px`),e.style.setProperty("--md-tooltip-y",`${s.y}px`)},complete(){e.style.removeProperty("--md-tooltip-x"),e.style.removeProperty("--md-tooltip-y")}}),tt(e).pipe(W(a)).subscribe(s=>{e.toggleAttribute("data-md-visible",s)}),O(i.pipe(b(({active:s})=>s)),i.pipe(_e(250),b(({active:s})=>!s))).subscribe({next({active:s}){s?e.prepend(o):o.remove()},complete(){e.prepend(o)}}),i.pipe(Me(16,me)).subscribe(({active:s})=>{o.classList.toggle("md-tooltip--active",s)}),i.pipe(pt(125,me),b(()=>!!e.offsetParent),m(()=>e.offsetParent.getBoundingClientRect()),m(({x:s})=>s)).subscribe({next(s){s?e.style.setProperty("--md-tooltip-0",`${-s}px`):e.style.removeProperty("--md-tooltip-0")},complete(){e.style.removeProperty("--md-tooltip-0")}}),h(n,"click").pipe(W(a),b(s=>!(s.metaKey||s.ctrlKey))).subscribe(s=>{s.stopPropagation(),s.preventDefault()}),h(n,"mousedown").pipe(W(a),re(i)).subscribe(([s,{active:p}])=>{var c;if(s.button!==0||s.metaKey||s.ctrlKey)s.preventDefault();else if(p){s.preventDefault();let l=e.parentElement.closest(".md-annotation");l instanceof HTMLElement?l.focus():(c=Ie())==null||c.blur()}}),r.pipe(W(a),b(s=>s===o),Ge(125)).subscribe(()=>e.focus()),Ua(e,t).pipe(w(s=>i.next(s)),_(()=>i.complete()),m(s=>$({ref:e},s)))})}function Wa(e){return e.tagName==="CODE"?P(".c, .c1, .cm",e):[e]}function Va(e){let t=[];for(let r of Wa(e)){let o=[],n=document.createNodeIterator(r,NodeFilter.SHOW_TEXT);for(let i=n.nextNode();i;i=n.nextNode())o.push(i);for(let i of o){let a;for(;a=/(\(\d+\))(!)?/.exec(i.textContent);){let[,s,p]=a;if(typeof p=="undefined"){let c=i.splitText(a.index);i=c.splitText(s.length),t.push(c)}else{i.textContent=s,t.push(i);break}}}}return t}function Hn(e,t){t.append(...Array.from(e.childNodes))}function fr(e,t,{target$:r,print$:o}){let n=t.closest("[id]"),i=n==null?void 0:n.id,a=new Map;for(let s of Va(t)){let[,p]=s.textContent.match(/\((\d+)\)/);fe(`:scope > li:nth-child(${p})`,e)&&(a.set(p,Tn(p,i)),s.replaceWith(a.get(p)))}return a.size===0?S:C(()=>{let s=new g,p=s.pipe(Z(),ie(!0)),c=[];for(let[l,f]of a)c.push([R(".md-typeset",f),R(`:scope > li:nth-child(${l})`,e)]);return o.pipe(W(p)).subscribe(l=>{e.hidden=!l,e.classList.toggle("md-annotation-list",l);for(let[f,u]of c)l?Hn(f,u):Hn(u,f)}),O(...[...a].map(([,l])=>kn(l,t,{target$:r}))).pipe(_(()=>s.complete()),pe())})}function $n(e){if(e.nextElementSibling){let t=e.nextElementSibling;if(t.tagName==="OL")return t;if(t.tagName==="P"&&!t.children.length)return $n(t)}}function Pn(e,t){return C(()=>{let r=$n(e);return typeof r!="undefined"?fr(r,e,t):S})}var Rn=Lt(Br());var Da=0;function In(e){if(e.nextElementSibling){let t=e.nextElementSibling;if(t.tagName==="OL")return t;if(t.tagName==="P"&&!t.children.length)return In(t)}}function za(e){return ge(e).pipe(m(({width:t})=>({scrollable:Tt(e).width>t})),te("scrollable"))}function jn(e,t){let{matches:r}=matchMedia("(hover)"),o=C(()=>{let n=new g,i=n.pipe(jr(1));n.subscribe(({scrollable:c})=>{c&&r?e.setAttribute("tabindex","0"):e.removeAttribute("tabindex")});let a=[];if(Rn.default.isSupported()&&(e.closest(".copy")||B("content.code.copy")&&!e.closest(".no-copy"))){let c=e.closest("pre");c.id=`__code_${Da++}`;let l=Sn(c.id);c.insertBefore(l,e),B("content.tooltips")&&a.push(mt(l,{viewport$}))}let s=e.closest(".highlight");if(s instanceof HTMLElement){let c=In(s);if(typeof c!="undefined"&&(s.classList.contains("annotate")||B("content.code.annotate"))){let l=fr(c,e,t);a.push(ge(s).pipe(W(i),m(({width:f,height:u})=>f&&u),K(),v(f=>f?l:S)))}}return P(":scope > span[id]",e).length&&e.classList.add("md-code__content"),za(e).pipe(w(c=>n.next(c)),_(()=>n.complete()),m(c=>$({ref:e},c)),Re(...a))});return B("content.lazy")?tt(e).pipe(b(n=>n),Te(1),v(()=>o)):o}function Na(e,{target$:t,print$:r}){let o=!0;return O(t.pipe(m(n=>n.closest("details:not([open])")),b(n=>e===n),m(()=>({action:"open",reveal:!0}))),r.pipe(b(n=>n||!o),w(()=>o=e.open),m(n=>({action:n?"open":"close"}))))}function Fn(e,t){return C(()=>{let r=new g;return r.subscribe(({action:o,reveal:n})=>{e.toggleAttribute("open",o==="open"),n&&e.scrollIntoView()}),Na(e,t).pipe(w(o=>r.next(o)),_(()=>r.complete()),m(o=>$({ref:e},o)))})}var Un=".node circle,.node ellipse,.node path,.node polygon,.node rect{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}marker{fill:var(--md-mermaid-edge-color)!important}.edgeLabel .label rect{fill:#0000}.flowchartTitleText{fill:var(--md-mermaid-label-fg-color)}.label{color:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.label foreignObject{line-height:normal;overflow:visible}.label div .edgeLabel{color:var(--md-mermaid-label-fg-color)}.edgeLabel,.edgeLabel p,.label div .edgeLabel{background-color:var(--md-mermaid-label-bg-color)}.edgeLabel,.edgeLabel p{fill:var(--md-mermaid-label-bg-color);color:var(--md-mermaid-edge-color)}.edgePath .path,.flowchart-link{stroke:var(--md-mermaid-edge-color)}.edgePath .arrowheadPath{fill:var(--md-mermaid-edge-color);stroke:none}.cluster rect{fill:var(--md-default-fg-color--lightest);stroke:var(--md-default-fg-color--lighter)}.cluster span{color:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}g #flowchart-circleEnd,g #flowchart-circleStart,g #flowchart-crossEnd,g #flowchart-crossStart,g #flowchart-pointEnd,g #flowchart-pointStart{stroke:none}.classDiagramTitleText{fill:var(--md-mermaid-label-fg-color)}g.classGroup line,g.classGroup rect{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}g.classGroup text{fill:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.classLabel .box{fill:var(--md-mermaid-label-bg-color);background-color:var(--md-mermaid-label-bg-color);opacity:1}.classLabel .label{fill:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.node .divider{stroke:var(--md-mermaid-node-fg-color)}.relation{stroke:var(--md-mermaid-edge-color)}.cardinality{fill:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.cardinality text{fill:inherit!important}defs marker.marker.composition.class path,defs marker.marker.dependency.class path,defs marker.marker.extension.class path{fill:var(--md-mermaid-edge-color)!important;stroke:var(--md-mermaid-edge-color)!important}defs marker.marker.aggregation.class path{fill:var(--md-mermaid-label-bg-color)!important;stroke:var(--md-mermaid-edge-color)!important}.statediagramTitleText{fill:var(--md-mermaid-label-fg-color)}g.stateGroup rect{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}g.stateGroup .state-title{fill:var(--md-mermaid-label-fg-color)!important;font-family:var(--md-mermaid-font-family)}g.stateGroup .composit{fill:var(--md-mermaid-label-bg-color)}.nodeLabel,.nodeLabel p{color:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}a .nodeLabel{text-decoration:underline}.node circle.state-end,.node circle.state-start,.start-state{fill:var(--md-mermaid-edge-color);stroke:none}.end-state-inner,.end-state-outer{fill:var(--md-mermaid-edge-color)}.end-state-inner,.node circle.state-end{stroke:var(--md-mermaid-label-bg-color)}.transition{stroke:var(--md-mermaid-edge-color)}[id^=state-fork] rect,[id^=state-join] rect{fill:var(--md-mermaid-edge-color)!important;stroke:none!important}.statediagram-cluster.statediagram-cluster .inner{fill:var(--md-default-bg-color)}.statediagram-cluster rect{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}.statediagram-state rect.divider{fill:var(--md-default-fg-color--lightest);stroke:var(--md-default-fg-color--lighter)}defs #statediagram-barbEnd{stroke:var(--md-mermaid-edge-color)}[id^=entity] path,[id^=entity] rect{fill:var(--md-default-bg-color)}.relationshipLine{stroke:var(--md-mermaid-edge-color)}defs .marker.oneOrMore.er *,defs .marker.onlyOne.er *,defs .marker.zeroOrMore.er *,defs .marker.zeroOrOne.er *{stroke:var(--md-mermaid-edge-color)!important}text:not([class]):last-child{fill:var(--md-mermaid-label-fg-color)}.actor{fill:var(--md-mermaid-sequence-actor-bg-color);stroke:var(--md-mermaid-sequence-actor-border-color)}text.actor>tspan{fill:var(--md-mermaid-sequence-actor-fg-color);font-family:var(--md-mermaid-font-family)}line{stroke:var(--md-mermaid-sequence-actor-line-color)}.actor-man circle,.actor-man line{fill:var(--md-mermaid-sequence-actorman-bg-color);stroke:var(--md-mermaid-sequence-actorman-line-color)}.messageLine0,.messageLine1{stroke:var(--md-mermaid-sequence-message-line-color)}.note{fill:var(--md-mermaid-sequence-note-bg-color);stroke:var(--md-mermaid-sequence-note-border-color)}.loopText,.loopText>tspan,.messageText,.noteText>tspan{stroke:none;font-family:var(--md-mermaid-font-family)!important}.messageText{fill:var(--md-mermaid-sequence-message-fg-color)}.loopText,.loopText>tspan{fill:var(--md-mermaid-sequence-loop-fg-color)}.noteText>tspan{fill:var(--md-mermaid-sequence-note-fg-color)}#arrowhead path{fill:var(--md-mermaid-sequence-message-line-color);stroke:none}.loopLine{fill:var(--md-mermaid-sequence-loop-bg-color);stroke:var(--md-mermaid-sequence-loop-border-color)}.labelBox{fill:var(--md-mermaid-sequence-label-bg-color);stroke:none}.labelText,.labelText>span{fill:var(--md-mermaid-sequence-label-fg-color);font-family:var(--md-mermaid-font-family)}.sequenceNumber{fill:var(--md-mermaid-sequence-number-fg-color)}rect.rect{fill:var(--md-mermaid-sequence-box-bg-color);stroke:none}rect.rect+text.text{fill:var(--md-mermaid-sequence-box-fg-color)}defs #sequencenumber{fill:var(--md-mermaid-sequence-number-bg-color)!important}";var Gr,Qa=0;function Ka(){return typeof mermaid=="undefined"||mermaid instanceof Element?wt("https://unpkg.com/mermaid@11/dist/mermaid.min.js"):I(void 0)}function Wn(e){return e.classList.remove("mermaid"),Gr||(Gr=Ka().pipe(w(()=>mermaid.initialize({startOnLoad:!1,themeCSS:Un,sequence:{actorFontSize:"16px",messageFontSize:"16px",noteFontSize:"16px"}})),m(()=>{}),G(1))),Gr.subscribe(()=>co(null,null,function*(){e.classList.add("mermaid");let t=`__mermaid_${Qa++}`,r=x("div",{class:"mermaid"}),o=e.textContent,{svg:n,fn:i}=yield mermaid.render(t,o),a=r.attachShadow({mode:"closed"});a.innerHTML=n,e.replaceWith(r),i==null||i(a)})),Gr.pipe(m(()=>({ref:e})))}var Vn=x("table");function Dn(e){return e.replaceWith(Vn),Vn.replaceWith(An(e)),I({ref:e})}function Ya(e){let t=e.find(r=>r.checked)||e[0];return O(...e.map(r=>h(r,"change").pipe(m(()=>R(`label[for="${r.id}"]`))))).pipe(Q(R(`label[for="${t.id}"]`)),m(r=>({active:r})))}function zn(e,{viewport$:t,target$:r}){let o=R(".tabbed-labels",e),n=P(":scope > input",e),i=Kr("prev");e.append(i);let a=Kr("next");return e.append(a),C(()=>{let s=new g,p=s.pipe(Z(),ie(!0));N([s,ge(e),tt(e)]).pipe(W(p),Me(1,me)).subscribe({next([{active:c},l]){let f=De(c),{width:u}=ce(c);e.style.setProperty("--md-indicator-x",`${f.x}px`),e.style.setProperty("--md-indicator-width",`${u}px`);let d=pr(o);(f.xd.x+l.width)&&o.scrollTo({left:Math.max(0,f.x-16),behavior:"smooth"})},complete(){e.style.removeProperty("--md-indicator-x"),e.style.removeProperty("--md-indicator-width")}}),N([ze(o),ge(o)]).pipe(W(p)).subscribe(([c,l])=>{let f=Tt(o);i.hidden=c.x<16,a.hidden=c.x>f.width-l.width-16}),O(h(i,"click").pipe(m(()=>-1)),h(a,"click").pipe(m(()=>1))).pipe(W(p)).subscribe(c=>{let{width:l}=ce(o);o.scrollBy({left:l*c,behavior:"smooth"})}),r.pipe(W(p),b(c=>n.includes(c))).subscribe(c=>c.click()),o.classList.add("tabbed-labels--linked");for(let c of n){let l=R(`label[for="${c.id}"]`);l.replaceChildren(x("a",{href:`#${l.htmlFor}`,tabIndex:-1},...Array.from(l.childNodes))),h(l.firstElementChild,"click").pipe(W(p),b(f=>!(f.metaKey||f.ctrlKey)),w(f=>{f.preventDefault(),f.stopPropagation()})).subscribe(()=>{history.replaceState({},"",`#${l.htmlFor}`),l.click()})}return B("content.tabs.link")&&s.pipe(Ce(1),re(t)).subscribe(([{active:c},{offset:l}])=>{let f=c.innerText.trim();if(c.hasAttribute("data-md-switching"))c.removeAttribute("data-md-switching");else{let u=e.offsetTop-l.y;for(let y of P("[data-tabs]"))for(let L of P(":scope > input",y)){let X=R(`label[for="${L.id}"]`);if(X!==c&&X.innerText.trim()===f){X.setAttribute("data-md-switching",""),L.click();break}}window.scrollTo({top:e.offsetTop-u});let d=__md_get("__tabs")||[];__md_set("__tabs",[...new Set([f,...d])])}}),s.pipe(W(p)).subscribe(()=>{for(let c of P("audio, video",e))c.offsetWidth&&c.autoplay?c.play().catch(()=>{}):c.pause()}),Ya(n).pipe(w(c=>s.next(c)),_(()=>s.complete()),m(c=>$({ref:e},c)))}).pipe(Ke(se))}function Nn(e,{viewport$:t,target$:r,print$:o}){return O(...P(".annotate:not(.highlight)",e).map(n=>Pn(n,{target$:r,print$:o})),...P("pre:not(.mermaid) > code",e).map(n=>jn(n,{target$:r,print$:o})),...P("pre.mermaid",e).map(n=>Wn(n)),...P("table:not([class])",e).map(n=>Dn(n)),...P("details",e).map(n=>Fn(n,{target$:r,print$:o})),...P("[data-tabs]",e).map(n=>zn(n,{viewport$:t,target$:r})),...P("[title]",e).filter(()=>B("content.tooltips")).map(n=>mt(n,{viewport$:t})))}function Ba(e,{alert$:t}){return t.pipe(v(r=>O(I(!0),I(!1).pipe(Ge(2e3))).pipe(m(o=>({message:r,active:o})))))}function qn(e,t){let r=R(".md-typeset",e);return C(()=>{let o=new g;return o.subscribe(({message:n,active:i})=>{e.classList.toggle("md-dialog--active",i),r.textContent=n}),Ba(e,t).pipe(w(n=>o.next(n)),_(()=>o.complete()),m(n=>$({ref:e},n)))})}var Ga=0;function Ja(e,t){document.body.append(e);let{width:r}=ce(e);e.style.setProperty("--md-tooltip-width",`${r}px`),e.remove();let o=cr(t),n=typeof o!="undefined"?ze(o):I({x:0,y:0}),i=O(et(t),Ht(t)).pipe(K());return N([i,n]).pipe(m(([a,s])=>{let{x:p,y:c}=De(t),l=ce(t),f=t.closest("table");return f&&t.parentElement&&(p+=f.offsetLeft+t.parentElement.offsetLeft,c+=f.offsetTop+t.parentElement.offsetTop),{active:a,offset:{x:p-s.x+l.width/2-r/2,y:c-s.y+l.height+8}}}))}function Qn(e){let t=e.title;if(!t.length)return S;let r=`__tooltip_${Ga++}`,o=Pt(r,"inline"),n=R(".md-typeset",o);return n.innerHTML=t,C(()=>{let i=new g;return i.subscribe({next({offset:a}){o.style.setProperty("--md-tooltip-x",`${a.x}px`),o.style.setProperty("--md-tooltip-y",`${a.y}px`)},complete(){o.style.removeProperty("--md-tooltip-x"),o.style.removeProperty("--md-tooltip-y")}}),O(i.pipe(b(({active:a})=>a)),i.pipe(_e(250),b(({active:a})=>!a))).subscribe({next({active:a}){a?(e.insertAdjacentElement("afterend",o),e.setAttribute("aria-describedby",r),e.removeAttribute("title")):(o.remove(),e.removeAttribute("aria-describedby"),e.setAttribute("title",t))},complete(){o.remove(),e.removeAttribute("aria-describedby"),e.setAttribute("title",t)}}),i.pipe(Me(16,me)).subscribe(({active:a})=>{o.classList.toggle("md-tooltip--active",a)}),i.pipe(pt(125,me),b(()=>!!e.offsetParent),m(()=>e.offsetParent.getBoundingClientRect()),m(({x:a})=>a)).subscribe({next(a){a?o.style.setProperty("--md-tooltip-0",`${-a}px`):o.style.removeProperty("--md-tooltip-0")},complete(){o.style.removeProperty("--md-tooltip-0")}}),Ja(o,e).pipe(w(a=>i.next(a)),_(()=>i.complete()),m(a=>$({ref:e},a)))}).pipe(Ke(se))}function Xa({viewport$:e}){if(!B("header.autohide"))return I(!1);let t=e.pipe(m(({offset:{y:n}})=>n),Be(2,1),m(([n,i])=>[nMath.abs(i-n.y)>100),m(([,[n]])=>n),K()),o=Ne("search");return N([e,o]).pipe(m(([{offset:n},i])=>n.y>400&&!i),K(),v(n=>n?r:I(!1)),Q(!1))}function Kn(e,t){return C(()=>N([ge(e),Xa(t)])).pipe(m(([{height:r},o])=>({height:r,hidden:o})),K((r,o)=>r.height===o.height&&r.hidden===o.hidden),G(1))}function Yn(e,{header$:t,main$:r}){return C(()=>{let o=new g,n=o.pipe(Z(),ie(!0));o.pipe(te("active"),He(t)).subscribe(([{active:a},{hidden:s}])=>{e.classList.toggle("md-header--shadow",a&&!s),e.hidden=s});let i=ue(P("[title]",e)).pipe(b(()=>B("content.tooltips")),ne(a=>Qn(a)));return r.subscribe(o),t.pipe(W(n),m(a=>$({ref:e},a)),Re(i.pipe(W(n))))})}function Za(e,{viewport$:t,header$:r}){return mr(e,{viewport$:t,header$:r}).pipe(m(({offset:{y:o}})=>{let{height:n}=ce(e);return{active:n>0&&o>=n}}),te("active"))}function Bn(e,t){return C(()=>{let r=new g;r.subscribe({next({active:n}){e.classList.toggle("md-header__title--active",n)},complete(){e.classList.remove("md-header__title--active")}});let o=fe(".md-content h1");return typeof o=="undefined"?S:Za(o,t).pipe(w(n=>r.next(n)),_(()=>r.complete()),m(n=>$({ref:e},n)))})}function Gn(e,{viewport$:t,header$:r}){let o=r.pipe(m(({height:i})=>i),K()),n=o.pipe(v(()=>ge(e).pipe(m(({height:i})=>({top:e.offsetTop,bottom:e.offsetTop+i})),te("bottom"))));return N([o,n,t]).pipe(m(([i,{top:a,bottom:s},{offset:{y:p},size:{height:c}}])=>(c=Math.max(0,c-Math.max(0,a-p,i)-Math.max(0,c+p-s)),{offset:a-i,height:c,active:a-i<=p})),K((i,a)=>i.offset===a.offset&&i.height===a.height&&i.active===a.active))}function es(e){let t=__md_get("__palette")||{index:e.findIndex(o=>matchMedia(o.getAttribute("data-md-color-media")).matches)},r=Math.max(0,Math.min(t.index,e.length-1));return I(...e).pipe(ne(o=>h(o,"change").pipe(m(()=>o))),Q(e[r]),m(o=>({index:e.indexOf(o),color:{media:o.getAttribute("data-md-color-media"),scheme:o.getAttribute("data-md-color-scheme"),primary:o.getAttribute("data-md-color-primary"),accent:o.getAttribute("data-md-color-accent")}})),G(1))}function Jn(e){let t=P("input",e),r=x("meta",{name:"theme-color"});document.head.appendChild(r);let o=x("meta",{name:"color-scheme"});document.head.appendChild(o);let n=$t("(prefers-color-scheme: light)");return C(()=>{let i=new g;return i.subscribe(a=>{if(document.body.setAttribute("data-md-color-switching",""),a.color.media==="(prefers-color-scheme)"){let s=matchMedia("(prefers-color-scheme: light)"),p=document.querySelector(s.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");a.color.scheme=p.getAttribute("data-md-color-scheme"),a.color.primary=p.getAttribute("data-md-color-primary"),a.color.accent=p.getAttribute("data-md-color-accent")}for(let[s,p]of Object.entries(a.color))document.body.setAttribute(`data-md-color-${s}`,p);for(let s=0;sa.key==="Enter"),re(i,(a,s)=>s)).subscribe(({index:a})=>{a=(a+1)%t.length,t[a].click(),t[a].focus()}),i.pipe(m(()=>{let a=Se("header"),s=window.getComputedStyle(a);return o.content=s.colorScheme,s.backgroundColor.match(/\d+/g).map(p=>(+p).toString(16).padStart(2,"0")).join("")})).subscribe(a=>r.content=`#${a}`),i.pipe(ve(se)).subscribe(()=>{document.body.removeAttribute("data-md-color-switching")}),es(t).pipe(W(n.pipe(Ce(1))),ct(),w(a=>i.next(a)),_(()=>i.complete()),m(a=>$({ref:e},a)))})}function Xn(e,{progress$:t}){return C(()=>{let r=new g;return r.subscribe(({value:o})=>{e.style.setProperty("--md-progress-value",`${o}`)}),t.pipe(w(o=>r.next({value:o})),_(()=>r.complete()),m(o=>({ref:e,value:o})))})}var Jr=Lt(Br());function ts(e){e.setAttribute("data-md-copying","");let t=e.closest("[data-copy]"),r=t?t.getAttribute("data-copy"):e.innerText;return e.removeAttribute("data-md-copying"),r.trimEnd()}function Zn({alert$:e}){Jr.default.isSupported()&&new j(t=>{new Jr.default("[data-clipboard-target], [data-clipboard-text]",{text:r=>r.getAttribute("data-clipboard-text")||ts(R(r.getAttribute("data-clipboard-target")))}).on("success",r=>t.next(r))}).pipe(w(t=>{t.trigger.focus()}),m(()=>Ee("clipboard.copied"))).subscribe(e)}function ei(e,t){return e.protocol=t.protocol,e.hostname=t.hostname,e}function rs(e,t){let r=new Map;for(let o of P("url",e)){let n=R("loc",o),i=[ei(new URL(n.textContent),t)];r.set(`${i[0]}`,i);for(let a of P("[rel=alternate]",o)){let s=a.getAttribute("href");s!=null&&i.push(ei(new URL(s),t))}}return r}function ur(e){return un(new URL("sitemap.xml",e)).pipe(m(t=>rs(t,new URL(e))),de(()=>I(new Map)))}function os(e,t){if(!(e.target instanceof Element))return S;let r=e.target.closest("a");if(r===null)return S;if(r.target||e.metaKey||e.ctrlKey)return S;let o=new URL(r.href);return o.search=o.hash="",t.has(`${o}`)?(e.preventDefault(),I(new URL(r.href))):S}function ti(e){let t=new Map;for(let r of P(":scope > *",e.head))t.set(r.outerHTML,r);return t}function ri(e){for(let t of P("[href], [src]",e))for(let r of["href","src"]){let o=t.getAttribute(r);if(o&&!/^(?:[a-z]+:)?\/\//i.test(o)){t[r]=t[r];break}}return I(e)}function ns(e){for(let o of["[data-md-component=announce]","[data-md-component=container]","[data-md-component=header-topic]","[data-md-component=outdated]","[data-md-component=logo]","[data-md-component=skip]",...B("navigation.tabs.sticky")?["[data-md-component=tabs]"]:[]]){let n=fe(o),i=fe(o,e);typeof n!="undefined"&&typeof i!="undefined"&&n.replaceWith(i)}let t=ti(document);for(let[o,n]of ti(e))t.has(o)?t.delete(o):document.head.appendChild(n);for(let o of t.values()){let n=o.getAttribute("name");n!=="theme-color"&&n!=="color-scheme"&&o.remove()}let r=Se("container");return We(P("script",r)).pipe(v(o=>{let n=e.createElement("script");if(o.src){for(let i of o.getAttributeNames())n.setAttribute(i,o.getAttribute(i));return o.replaceWith(n),new j(i=>{n.onload=()=>i.complete()})}else return n.textContent=o.textContent,o.replaceWith(n),S}),Z(),ie(document))}function oi({location$:e,viewport$:t,progress$:r}){let o=xe();if(location.protocol==="file:")return S;let n=ur(o.base);I(document).subscribe(ri);let i=h(document.body,"click").pipe(He(n),v(([p,c])=>os(p,c)),pe()),a=h(window,"popstate").pipe(m(ye),pe());i.pipe(re(t)).subscribe(([p,{offset:c}])=>{history.replaceState(c,""),history.pushState(null,"",p)}),O(i,a).subscribe(e);let s=e.pipe(te("pathname"),v(p=>fn(p,{progress$:r}).pipe(de(()=>(lt(p,!0),S)))),v(ri),v(ns),pe());return O(s.pipe(re(e,(p,c)=>c)),s.pipe(v(()=>e),te("hash")),e.pipe(K((p,c)=>p.pathname===c.pathname&&p.hash===c.hash),v(()=>i),w(()=>history.back()))).subscribe(p=>{var c,l;history.state!==null||!p.hash?window.scrollTo(0,(l=(c=history.state)==null?void 0:c.y)!=null?l:0):(history.scrollRestoration="auto",pn(p.hash),history.scrollRestoration="manual")}),e.subscribe(()=>{history.scrollRestoration="manual"}),h(window,"beforeunload").subscribe(()=>{history.scrollRestoration="auto"}),t.pipe(te("offset"),_e(100)).subscribe(({offset:p})=>{history.replaceState(p,"")}),s}var ni=Lt(qr());function ii(e){let t=e.separator.split("|").map(n=>n.replace(/(\(\?[!=<][^)]+\))/g,"").length===0?"\uFFFD":n).join("|"),r=new RegExp(t,"img"),o=(n,i,a)=>`${i}${a} `;return n=>{n=n.replace(/[\s*+\-:~^]+/g," ").replace(/&/g,"&").trim();let i=new RegExp(`(^|${e.separator}|)(${n.replace(/[|\\{}()[\]^$+*?.-]/g,"\\$&").replace(r,"|")})`,"img");return a=>(0,ni.default)(a).replace(i,o).replace(/<\/mark>(\s+)]*>/img,"$1")}}function It(e){return e.type===1}function dr(e){return e.type===3}function ai(e,t){let r=yn(e);return O(I(location.protocol!=="file:"),Ne("search")).pipe(Ae(o=>o),v(()=>t)).subscribe(({config:o,docs:n})=>r.next({type:0,data:{config:o,docs:n,options:{suggest:B("search.suggest")}}})),r}function si(e){var l;let{selectedVersionSitemap:t,selectedVersionBaseURL:r,currentLocation:o,currentBaseURL:n}=e,i=(l=Xr(n))==null?void 0:l.pathname;if(i===void 0)return;let a=ss(o.pathname,i);if(a===void 0)return;let s=ps(t.keys());if(!t.has(s))return;let p=Xr(a,s);if(!p||!t.has(p.href))return;let c=Xr(a,r);if(c)return c.hash=o.hash,c.search=o.search,c}function Xr(e,t){try{return new URL(e,t)}catch(r){return}}function ss(e,t){if(e.startsWith(t))return e.slice(t.length)}function cs(e,t){let r=Math.min(e.length,t.length),o;for(o=0;oS)),o=r.pipe(m(n=>{let[,i]=t.base.match(/([^/]+)\/?$/);return n.find(({version:a,aliases:s})=>a===i||s.includes(i))||n[0]}));r.pipe(m(n=>new Map(n.map(i=>[`${new URL(`../${i.version}/`,t.base)}`,i]))),v(n=>h(document.body,"click").pipe(b(i=>!i.metaKey&&!i.ctrlKey),re(o),v(([i,a])=>{if(i.target instanceof Element){let s=i.target.closest("a");if(s&&!s.target&&n.has(s.href)){let p=s.href;return!i.target.closest(".md-version")&&n.get(p)===a?S:(i.preventDefault(),I(new URL(p)))}}return S}),v(i=>ur(i).pipe(m(a=>{var s;return(s=si({selectedVersionSitemap:a,selectedVersionBaseURL:i,currentLocation:ye(),currentBaseURL:t.base}))!=null?s:i})))))).subscribe(n=>lt(n,!0)),N([r,o]).subscribe(([n,i])=>{R(".md-header__topic").appendChild(Cn(n,i))}),e.pipe(v(()=>o)).subscribe(n=>{var s;let i=new URL(t.base),a=__md_get("__outdated",sessionStorage,i);if(a===null){a=!0;let p=((s=t.version)==null?void 0:s.default)||"latest";Array.isArray(p)||(p=[p]);e:for(let c of p)for(let l of n.aliases.concat(n.version))if(new RegExp(c,"i").test(l)){a=!1;break e}__md_set("__outdated",a,sessionStorage,i)}if(a)for(let p of ae("outdated"))p.hidden=!1})}function ls(e,{worker$:t}){let{searchParams:r}=ye();r.has("q")&&(Je("search",!0),e.value=r.get("q"),e.focus(),Ne("search").pipe(Ae(i=>!i)).subscribe(()=>{let i=ye();i.searchParams.delete("q"),history.replaceState({},"",`${i}`)}));let o=et(e),n=O(t.pipe(Ae(It)),h(e,"keyup"),o).pipe(m(()=>e.value),K());return N([n,o]).pipe(m(([i,a])=>({value:i,focus:a})),G(1))}function pi(e,{worker$:t}){let r=new g,o=r.pipe(Z(),ie(!0));N([t.pipe(Ae(It)),r],(i,a)=>a).pipe(te("value")).subscribe(({value:i})=>t.next({type:2,data:i})),r.pipe(te("focus")).subscribe(({focus:i})=>{i&&Je("search",i)}),h(e.form,"reset").pipe(W(o)).subscribe(()=>e.focus());let n=R("header [for=__search]");return h(n,"click").subscribe(()=>e.focus()),ls(e,{worker$:t}).pipe(w(i=>r.next(i)),_(()=>r.complete()),m(i=>$({ref:e},i)),G(1))}function li(e,{worker$:t,query$:r}){let o=new g,n=on(e.parentElement).pipe(b(Boolean)),i=e.parentElement,a=R(":scope > :first-child",e),s=R(":scope > :last-child",e);Ne("search").subscribe(l=>{s.setAttribute("role",l?"list":"presentation"),s.hidden=!l}),o.pipe(re(r),Wr(t.pipe(Ae(It)))).subscribe(([{items:l},{value:f}])=>{switch(l.length){case 0:a.textContent=f.length?Ee("search.result.none"):Ee("search.result.placeholder");break;case 1:a.textContent=Ee("search.result.one");break;default:let u=sr(l.length);a.textContent=Ee("search.result.other",u)}});let p=o.pipe(w(()=>s.innerHTML=""),v(({items:l})=>O(I(...l.slice(0,10)),I(...l.slice(10)).pipe(Be(4),Dr(n),v(([f])=>f)))),m(Mn),pe());return p.subscribe(l=>s.appendChild(l)),p.pipe(ne(l=>{let f=fe("details",l);return typeof f=="undefined"?S:h(f,"toggle").pipe(W(o),m(()=>f))})).subscribe(l=>{l.open===!1&&l.offsetTop<=i.scrollTop&&i.scrollTo({top:l.offsetTop})}),t.pipe(b(dr),m(({data:l})=>l)).pipe(w(l=>o.next(l)),_(()=>o.complete()),m(l=>$({ref:e},l)))}function ms(e,{query$:t}){return t.pipe(m(({value:r})=>{let o=ye();return o.hash="",r=r.replace(/\s+/g,"+").replace(/&/g,"%26").replace(/=/g,"%3D"),o.search=`q=${r}`,{url:o}}))}function mi(e,t){let r=new g,o=r.pipe(Z(),ie(!0));return r.subscribe(({url:n})=>{e.setAttribute("data-clipboard-text",e.href),e.href=`${n}`}),h(e,"click").pipe(W(o)).subscribe(n=>n.preventDefault()),ms(e,t).pipe(w(n=>r.next(n)),_(()=>r.complete()),m(n=>$({ref:e},n)))}function fi(e,{worker$:t,keyboard$:r}){let o=new g,n=Se("search-query"),i=O(h(n,"keydown"),h(n,"focus")).pipe(ve(se),m(()=>n.value),K());return o.pipe(He(i),m(([{suggest:s},p])=>{let c=p.split(/([\s-]+)/);if(s!=null&&s.length&&c[c.length-1]){let l=s[s.length-1];l.startsWith(c[c.length-1])&&(c[c.length-1]=l)}else c.length=0;return c})).subscribe(s=>e.innerHTML=s.join("").replace(/\s/g," ")),r.pipe(b(({mode:s})=>s==="search")).subscribe(s=>{switch(s.type){case"ArrowRight":e.innerText.length&&n.selectionStart===n.value.length&&(n.value=e.innerText);break}}),t.pipe(b(dr),m(({data:s})=>s)).pipe(w(s=>o.next(s)),_(()=>o.complete()),m(()=>({ref:e})))}function ui(e,{index$:t,keyboard$:r}){let o=xe();try{let n=ai(o.search,t),i=Se("search-query",e),a=Se("search-result",e);h(e,"click").pipe(b(({target:p})=>p instanceof Element&&!!p.closest("a"))).subscribe(()=>Je("search",!1)),r.pipe(b(({mode:p})=>p==="search")).subscribe(p=>{let c=Ie();switch(p.type){case"Enter":if(c===i){let l=new Map;for(let f of P(":first-child [href]",a)){let u=f.firstElementChild;l.set(f,parseFloat(u.getAttribute("data-md-score")))}if(l.size){let[[f]]=[...l].sort(([,u],[,d])=>d-u);f.click()}p.claim()}break;case"Escape":case"Tab":Je("search",!1),i.blur();break;case"ArrowUp":case"ArrowDown":if(typeof c=="undefined")i.focus();else{let l=[i,...P(":not(details) > [href], summary, details[open] [href]",a)],f=Math.max(0,(Math.max(0,l.indexOf(c))+l.length+(p.type==="ArrowUp"?-1:1))%l.length);l[f].focus()}p.claim();break;default:i!==Ie()&&i.focus()}}),r.pipe(b(({mode:p})=>p==="global")).subscribe(p=>{switch(p.type){case"f":case"s":case"/":i.focus(),i.select(),p.claim();break}});let s=pi(i,{worker$:n});return O(s,li(a,{worker$:n,query$:s})).pipe(Re(...ae("search-share",e).map(p=>mi(p,{query$:s})),...ae("search-suggest",e).map(p=>fi(p,{worker$:n,keyboard$:r}))))}catch(n){return e.hidden=!0,Ye}}function di(e,{index$:t,location$:r}){return N([t,r.pipe(Q(ye()),b(o=>!!o.searchParams.get("h")))]).pipe(m(([o,n])=>ii(o.config)(n.searchParams.get("h"))),m(o=>{var a;let n=new Map,i=document.createNodeIterator(e,NodeFilter.SHOW_TEXT);for(let s=i.nextNode();s;s=i.nextNode())if((a=s.parentElement)!=null&&a.offsetHeight){let p=s.textContent,c=o(p);c.length>p.length&&n.set(s,c)}for(let[s,p]of n){let{childNodes:c}=x("span",null,p);s.replaceWith(...Array.from(c))}return{ref:e,nodes:n}}))}function fs(e,{viewport$:t,main$:r}){let o=e.closest(".md-grid"),n=o.offsetTop-o.parentElement.offsetTop;return N([r,t]).pipe(m(([{offset:i,height:a},{offset:{y:s}}])=>(a=a+Math.min(n,Math.max(0,s-i))-n,{height:a,locked:s>=i+n})),K((i,a)=>i.height===a.height&&i.locked===a.locked))}function Zr(e,o){var n=o,{header$:t}=n,r=so(n,["header$"]);let i=R(".md-sidebar__scrollwrap",e),{y:a}=De(i);return C(()=>{let s=new g,p=s.pipe(Z(),ie(!0)),c=s.pipe(Me(0,me));return c.pipe(re(t)).subscribe({next([{height:l},{height:f}]){i.style.height=`${l-2*a}px`,e.style.top=`${f}px`},complete(){i.style.height="",e.style.top=""}}),c.pipe(Ae()).subscribe(()=>{for(let l of P(".md-nav__link--active[href]",e)){if(!l.clientHeight)continue;let f=l.closest(".md-sidebar__scrollwrap");if(typeof f!="undefined"){let u=l.offsetTop-f.offsetTop,{height:d}=ce(f);f.scrollTo({top:u-d/2})}}}),ue(P("label[tabindex]",e)).pipe(ne(l=>h(l,"click").pipe(ve(se),m(()=>l),W(p)))).subscribe(l=>{let f=R(`[id="${l.htmlFor}"]`);R(`[aria-labelledby="${l.id}"]`).setAttribute("aria-expanded",`${f.checked}`)}),fs(e,r).pipe(w(l=>s.next(l)),_(()=>s.complete()),m(l=>$({ref:e},l)))})}function hi(e,t){if(typeof t!="undefined"){let r=`https://api.github.com/repos/${e}/${t}`;return st(je(`${r}/releases/latest`).pipe(de(()=>S),m(o=>({version:o.tag_name})),Ve({})),je(r).pipe(de(()=>S),m(o=>({stars:o.stargazers_count,forks:o.forks_count})),Ve({}))).pipe(m(([o,n])=>$($({},o),n)))}else{let r=`https://api.github.com/users/${e}`;return je(r).pipe(m(o=>({repositories:o.public_repos})),Ve({}))}}function bi(e,t){let r=`https://${e}/api/v4/projects/${encodeURIComponent(t)}`;return st(je(`${r}/releases/permalink/latest`).pipe(de(()=>S),m(({tag_name:o})=>({version:o})),Ve({})),je(r).pipe(de(()=>S),m(({star_count:o,forks_count:n})=>({stars:o,forks:n})),Ve({}))).pipe(m(([o,n])=>$($({},o),n)))}function vi(e){let t=e.match(/^.+github\.com\/([^/]+)\/?([^/]+)?/i);if(t){let[,r,o]=t;return hi(r,o)}if(t=e.match(/^.+?([^/]*gitlab[^/]+)\/(.+?)\/?$/i),t){let[,r,o]=t;return bi(r,o)}return S}var us;function ds(e){return us||(us=C(()=>{let t=__md_get("__source",sessionStorage);if(t)return I(t);if(ae("consent").length){let o=__md_get("__consent");if(!(o&&o.github))return S}return vi(e.href).pipe(w(o=>__md_set("__source",o,sessionStorage)))}).pipe(de(()=>S),b(t=>Object.keys(t).length>0),m(t=>({facts:t})),G(1)))}function gi(e){let t=R(":scope > :last-child",e);return C(()=>{let r=new g;return r.subscribe(({facts:o})=>{t.appendChild(_n(o)),t.classList.add("md-source__repository--active")}),ds(e).pipe(w(o=>r.next(o)),_(()=>r.complete()),m(o=>$({ref:e},o)))})}function hs(e,{viewport$:t,header$:r}){return ge(document.body).pipe(v(()=>mr(e,{header$:r,viewport$:t})),m(({offset:{y:o}})=>({hidden:o>=10})),te("hidden"))}function yi(e,t){return C(()=>{let r=new g;return r.subscribe({next({hidden:o}){e.hidden=o},complete(){e.hidden=!1}}),(B("navigation.tabs.sticky")?I({hidden:!1}):hs(e,t)).pipe(w(o=>r.next(o)),_(()=>r.complete()),m(o=>$({ref:e},o)))})}function bs(e,{viewport$:t,header$:r}){let o=new Map,n=P(".md-nav__link",e);for(let s of n){let p=decodeURIComponent(s.hash.substring(1)),c=fe(`[id="${p}"]`);typeof c!="undefined"&&o.set(s,c)}let i=r.pipe(te("height"),m(({height:s})=>{let p=Se("main"),c=R(":scope > :first-child",p);return s+.8*(c.offsetTop-p.offsetTop)}),pe());return ge(document.body).pipe(te("height"),v(s=>C(()=>{let p=[];return I([...o].reduce((c,[l,f])=>{for(;p.length&&o.get(p[p.length-1]).tagName>=f.tagName;)p.pop();let u=f.offsetTop;for(;!u&&f.parentElement;)f=f.parentElement,u=f.offsetTop;let d=f.offsetParent;for(;d;d=d.offsetParent)u+=d.offsetTop;return c.set([...p=[...p,l]].reverse(),u)},new Map))}).pipe(m(p=>new Map([...p].sort(([,c],[,l])=>c-l))),He(i),v(([p,c])=>t.pipe(Fr(([l,f],{offset:{y:u},size:d})=>{let y=u+d.height>=Math.floor(s.height);for(;f.length;){let[,L]=f[0];if(L-c=u&&!y)f=[l.pop(),...f];else break}return[l,f]},[[],[...p]]),K((l,f)=>l[0]===f[0]&&l[1]===f[1])))))).pipe(m(([s,p])=>({prev:s.map(([c])=>c),next:p.map(([c])=>c)})),Q({prev:[],next:[]}),Be(2,1),m(([s,p])=>s.prev.length{let i=new g,a=i.pipe(Z(),ie(!0));if(i.subscribe(({prev:s,next:p})=>{for(let[c]of p)c.classList.remove("md-nav__link--passed"),c.classList.remove("md-nav__link--active");for(let[c,[l]]of s.entries())l.classList.add("md-nav__link--passed"),l.classList.toggle("md-nav__link--active",c===s.length-1)}),B("toc.follow")){let s=O(t.pipe(_e(1),m(()=>{})),t.pipe(_e(250),m(()=>"smooth")));i.pipe(b(({prev:p})=>p.length>0),He(o.pipe(ve(se))),re(s)).subscribe(([[{prev:p}],c])=>{let[l]=p[p.length-1];if(l.offsetHeight){let f=cr(l);if(typeof f!="undefined"){let u=l.offsetTop-f.offsetTop,{height:d}=ce(f);f.scrollTo({top:u-d/2,behavior:c})}}})}return B("navigation.tracking")&&t.pipe(W(a),te("offset"),_e(250),Ce(1),W(n.pipe(Ce(1))),ct({delay:250}),re(i)).subscribe(([,{prev:s}])=>{let p=ye(),c=s[s.length-1];if(c&&c.length){let[l]=c,{hash:f}=new URL(l.href);p.hash!==f&&(p.hash=f,history.replaceState({},"",`${p}`))}else p.hash="",history.replaceState({},"",`${p}`)}),bs(e,{viewport$:t,header$:r}).pipe(w(s=>i.next(s)),_(()=>i.complete()),m(s=>$({ref:e},s)))})}function vs(e,{viewport$:t,main$:r,target$:o}){let n=t.pipe(m(({offset:{y:a}})=>a),Be(2,1),m(([a,s])=>a>s&&s>0),K()),i=r.pipe(m(({active:a})=>a));return N([i,n]).pipe(m(([a,s])=>!(a&&s)),K(),W(o.pipe(Ce(1))),ie(!0),ct({delay:250}),m(a=>({hidden:a})))}function Ei(e,{viewport$:t,header$:r,main$:o,target$:n}){let i=new g,a=i.pipe(Z(),ie(!0));return i.subscribe({next({hidden:s}){e.hidden=s,s?(e.setAttribute("tabindex","-1"),e.blur()):e.removeAttribute("tabindex")},complete(){e.style.top="",e.hidden=!0,e.removeAttribute("tabindex")}}),r.pipe(W(a),te("height")).subscribe(({height:s})=>{e.style.top=`${s+16}px`}),h(e,"click").subscribe(s=>{s.preventDefault(),window.scrollTo({top:0})}),vs(e,{viewport$:t,main$:o,target$:n}).pipe(w(s=>i.next(s)),_(()=>i.complete()),m(s=>$({ref:e},s)))}function wi({document$:e,viewport$:t}){e.pipe(v(()=>P(".md-ellipsis")),ne(r=>tt(r).pipe(W(e.pipe(Ce(1))),b(o=>o),m(()=>r),Te(1))),b(r=>r.offsetWidth{let o=r.innerText,n=r.closest("a")||r;return n.title=o,B("content.tooltips")?mt(n,{viewport$:t}).pipe(W(e.pipe(Ce(1))),_(()=>n.removeAttribute("title"))):S})).subscribe(),B("content.tooltips")&&e.pipe(v(()=>P(".md-status")),ne(r=>mt(r,{viewport$:t}))).subscribe()}function Ti({document$:e,tablet$:t}){e.pipe(v(()=>P(".md-toggle--indeterminate")),w(r=>{r.indeterminate=!0,r.checked=!1}),ne(r=>h(r,"change").pipe(Vr(()=>r.classList.contains("md-toggle--indeterminate")),m(()=>r))),re(t)).subscribe(([r,o])=>{r.classList.remove("md-toggle--indeterminate"),o&&(r.checked=!1)})}function gs(){return/(iPad|iPhone|iPod)/.test(navigator.userAgent)}function Si({document$:e}){e.pipe(v(()=>P("[data-md-scrollfix]")),w(t=>t.removeAttribute("data-md-scrollfix")),b(gs),ne(t=>h(t,"touchstart").pipe(m(()=>t)))).subscribe(t=>{let r=t.scrollTop;r===0?t.scrollTop=1:r+t.offsetHeight===t.scrollHeight&&(t.scrollTop=r-1)})}function Oi({viewport$:e,tablet$:t}){N([Ne("search"),t]).pipe(m(([r,o])=>r&&!o),v(r=>I(r).pipe(Ge(r?400:100))),re(e)).subscribe(([r,{offset:{y:o}}])=>{if(r)document.body.setAttribute("data-md-scrolllock",""),document.body.style.top=`-${o}px`;else{let n=-1*parseInt(document.body.style.top,10);document.body.removeAttribute("data-md-scrolllock"),document.body.style.top="",n&&window.scrollTo(0,n)}})}Object.entries||(Object.entries=function(e){let t=[];for(let r of Object.keys(e))t.push([r,e[r]]);return t});Object.values||(Object.values=function(e){let t=[];for(let r of Object.keys(e))t.push(e[r]);return t});typeof Element!="undefined"&&(Element.prototype.scrollTo||(Element.prototype.scrollTo=function(e,t){typeof e=="object"?(this.scrollLeft=e.left,this.scrollTop=e.top):(this.scrollLeft=e,this.scrollTop=t)}),Element.prototype.replaceWith||(Element.prototype.replaceWith=function(...e){let t=this.parentNode;if(t){e.length===0&&t.removeChild(this);for(let r=e.length-1;r>=0;r--){let o=e[r];typeof o=="string"?o=document.createTextNode(o):o.parentNode&&o.parentNode.removeChild(o),r?t.insertBefore(this.previousSibling,o):t.replaceChild(o,this)}}}));function ys(){return location.protocol==="file:"?wt(`${new URL("search/search_index.js",eo.base)}`).pipe(m(()=>__index),G(1)):je(new URL("search/search_index.json",eo.base))}document.documentElement.classList.remove("no-js");document.documentElement.classList.add("js");var ot=Go(),Ft=sn(),Ot=ln(Ft),to=an(),Oe=gn(),hr=$t("(min-width: 60em)"),Mi=$t("(min-width: 76.25em)"),_i=mn(),eo=xe(),Ai=document.forms.namedItem("search")?ys():Ye,ro=new g;Zn({alert$:ro});var oo=new g;B("navigation.instant")&&oi({location$:Ft,viewport$:Oe,progress$:oo}).subscribe(ot);var Li;((Li=eo.version)==null?void 0:Li.provider)==="mike"&&ci({document$:ot});O(Ft,Ot).pipe(Ge(125)).subscribe(()=>{Je("drawer",!1),Je("search",!1)});to.pipe(b(({mode:e})=>e==="global")).subscribe(e=>{switch(e.type){case"p":case",":let t=fe("link[rel=prev]");typeof t!="undefined"&<(t);break;case"n":case".":let r=fe("link[rel=next]");typeof r!="undefined"&<(r);break;case"Enter":let o=Ie();o instanceof HTMLLabelElement&&o.click()}});wi({viewport$:Oe,document$:ot});Ti({document$:ot,tablet$:hr});Si({document$:ot});Oi({viewport$:Oe,tablet$:hr});var rt=Kn(Se("header"),{viewport$:Oe}),jt=ot.pipe(m(()=>Se("main")),v(e=>Gn(e,{viewport$:Oe,header$:rt})),G(1)),xs=O(...ae("consent").map(e=>En(e,{target$:Ot})),...ae("dialog").map(e=>qn(e,{alert$:ro})),...ae("palette").map(e=>Jn(e)),...ae("progress").map(e=>Xn(e,{progress$:oo})),...ae("search").map(e=>ui(e,{index$:Ai,keyboard$:to})),...ae("source").map(e=>gi(e))),Es=C(()=>O(...ae("announce").map(e=>xn(e)),...ae("content").map(e=>Nn(e,{viewport$:Oe,target$:Ot,print$:_i})),...ae("content").map(e=>B("search.highlight")?di(e,{index$:Ai,location$:Ft}):S),...ae("header").map(e=>Yn(e,{viewport$:Oe,header$:rt,main$:jt})),...ae("header-title").map(e=>Bn(e,{viewport$:Oe,header$:rt})),...ae("sidebar").map(e=>e.getAttribute("data-md-type")==="navigation"?zr(Mi,()=>Zr(e,{viewport$:Oe,header$:rt,main$:jt})):zr(hr,()=>Zr(e,{viewport$:Oe,header$:rt,main$:jt}))),...ae("tabs").map(e=>yi(e,{viewport$:Oe,header$:rt})),...ae("toc").map(e=>xi(e,{viewport$:Oe,header$:rt,main$:jt,target$:Ot})),...ae("top").map(e=>Ei(e,{viewport$:Oe,header$:rt,main$:jt,target$:Ot})))),Ci=ot.pipe(v(()=>Es),Re(xs),G(1));Ci.subscribe();window.document$=ot;window.location$=Ft;window.target$=Ot;window.keyboard$=to;window.viewport$=Oe;window.tablet$=hr;window.screen$=Mi;window.print$=_i;window.alert$=ro;window.progress$=oo;window.component$=Ci;})();
+//# sourceMappingURL=bundle.f55a23d4.min.js.map
+
diff --git a/docs/assets/javascripts/bundle.f55a23d4.min.js.map b/docs/assets/javascripts/bundle.f55a23d4.min.js.map
new file mode 100644
index 00000000000..e3de73ff9da
--- /dev/null
+++ b/docs/assets/javascripts/bundle.f55a23d4.min.js.map
@@ -0,0 +1,7 @@
+{
+ "version": 3,
+ "sources": ["node_modules/focus-visible/dist/focus-visible.js", "node_modules/escape-html/index.js", "node_modules/clipboard/dist/clipboard.js", "src/templates/assets/javascripts/bundle.ts", "node_modules/tslib/tslib.es6.mjs", "node_modules/rxjs/src/internal/util/isFunction.ts", "node_modules/rxjs/src/internal/util/createErrorClass.ts", "node_modules/rxjs/src/internal/util/UnsubscriptionError.ts", "node_modules/rxjs/src/internal/util/arrRemove.ts", "node_modules/rxjs/src/internal/Subscription.ts", "node_modules/rxjs/src/internal/config.ts", "node_modules/rxjs/src/internal/scheduler/timeoutProvider.ts", "node_modules/rxjs/src/internal/util/reportUnhandledError.ts", "node_modules/rxjs/src/internal/util/noop.ts", "node_modules/rxjs/src/internal/NotificationFactories.ts", "node_modules/rxjs/src/internal/util/errorContext.ts", "node_modules/rxjs/src/internal/Subscriber.ts", "node_modules/rxjs/src/internal/symbol/observable.ts", "node_modules/rxjs/src/internal/util/identity.ts", "node_modules/rxjs/src/internal/util/pipe.ts", "node_modules/rxjs/src/internal/Observable.ts", "node_modules/rxjs/src/internal/util/lift.ts", "node_modules/rxjs/src/internal/operators/OperatorSubscriber.ts", "node_modules/rxjs/src/internal/scheduler/animationFrameProvider.ts", "node_modules/rxjs/src/internal/util/ObjectUnsubscribedError.ts", "node_modules/rxjs/src/internal/Subject.ts", "node_modules/rxjs/src/internal/BehaviorSubject.ts", "node_modules/rxjs/src/internal/scheduler/dateTimestampProvider.ts", "node_modules/rxjs/src/internal/ReplaySubject.ts", "node_modules/rxjs/src/internal/scheduler/Action.ts", "node_modules/rxjs/src/internal/scheduler/intervalProvider.ts", "node_modules/rxjs/src/internal/scheduler/AsyncAction.ts", "node_modules/rxjs/src/internal/Scheduler.ts", "node_modules/rxjs/src/internal/scheduler/AsyncScheduler.ts", "node_modules/rxjs/src/internal/scheduler/async.ts", "node_modules/rxjs/src/internal/scheduler/QueueAction.ts", "node_modules/rxjs/src/internal/scheduler/QueueScheduler.ts", "node_modules/rxjs/src/internal/scheduler/queue.ts", "node_modules/rxjs/src/internal/scheduler/AnimationFrameAction.ts", "node_modules/rxjs/src/internal/scheduler/AnimationFrameScheduler.ts", "node_modules/rxjs/src/internal/scheduler/animationFrame.ts", "node_modules/rxjs/src/internal/observable/empty.ts", "node_modules/rxjs/src/internal/util/isScheduler.ts", "node_modules/rxjs/src/internal/util/args.ts", "node_modules/rxjs/src/internal/util/isArrayLike.ts", "node_modules/rxjs/src/internal/util/isPromise.ts", "node_modules/rxjs/src/internal/util/isInteropObservable.ts", "node_modules/rxjs/src/internal/util/isAsyncIterable.ts", "node_modules/rxjs/src/internal/util/throwUnobservableError.ts", "node_modules/rxjs/src/internal/symbol/iterator.ts", "node_modules/rxjs/src/internal/util/isIterable.ts", "node_modules/rxjs/src/internal/util/isReadableStreamLike.ts", "node_modules/rxjs/src/internal/observable/innerFrom.ts", "node_modules/rxjs/src/internal/util/executeSchedule.ts", "node_modules/rxjs/src/internal/operators/observeOn.ts", "node_modules/rxjs/src/internal/operators/subscribeOn.ts", "node_modules/rxjs/src/internal/scheduled/scheduleObservable.ts", "node_modules/rxjs/src/internal/scheduled/schedulePromise.ts", "node_modules/rxjs/src/internal/scheduled/scheduleArray.ts", "node_modules/rxjs/src/internal/scheduled/scheduleIterable.ts", "node_modules/rxjs/src/internal/scheduled/scheduleAsyncIterable.ts", "node_modules/rxjs/src/internal/scheduled/scheduleReadableStreamLike.ts", "node_modules/rxjs/src/internal/scheduled/scheduled.ts", "node_modules/rxjs/src/internal/observable/from.ts", "node_modules/rxjs/src/internal/observable/of.ts", "node_modules/rxjs/src/internal/observable/throwError.ts", "node_modules/rxjs/src/internal/util/EmptyError.ts", "node_modules/rxjs/src/internal/util/isDate.ts", "node_modules/rxjs/src/internal/operators/map.ts", "node_modules/rxjs/src/internal/util/mapOneOrManyArgs.ts", "node_modules/rxjs/src/internal/util/argsArgArrayOrObject.ts", "node_modules/rxjs/src/internal/util/createObject.ts", "node_modules/rxjs/src/internal/observable/combineLatest.ts", "node_modules/rxjs/src/internal/operators/mergeInternals.ts", "node_modules/rxjs/src/internal/operators/mergeMap.ts", "node_modules/rxjs/src/internal/operators/mergeAll.ts", "node_modules/rxjs/src/internal/operators/concatAll.ts", "node_modules/rxjs/src/internal/observable/concat.ts", "node_modules/rxjs/src/internal/observable/defer.ts", "node_modules/rxjs/src/internal/observable/fromEvent.ts", "node_modules/rxjs/src/internal/observable/fromEventPattern.ts", "node_modules/rxjs/src/internal/observable/timer.ts", "node_modules/rxjs/src/internal/observable/merge.ts", "node_modules/rxjs/src/internal/observable/never.ts", "node_modules/rxjs/src/internal/util/argsOrArgArray.ts", "node_modules/rxjs/src/internal/operators/filter.ts", "node_modules/rxjs/src/internal/observable/zip.ts", "node_modules/rxjs/src/internal/operators/audit.ts", "node_modules/rxjs/src/internal/operators/auditTime.ts", "node_modules/rxjs/src/internal/operators/bufferCount.ts", "node_modules/rxjs/src/internal/operators/catchError.ts", "node_modules/rxjs/src/internal/operators/scanInternals.ts", "node_modules/rxjs/src/internal/operators/combineLatest.ts", "node_modules/rxjs/src/internal/operators/combineLatestWith.ts", "node_modules/rxjs/src/internal/operators/debounce.ts", "node_modules/rxjs/src/internal/operators/debounceTime.ts", "node_modules/rxjs/src/internal/operators/defaultIfEmpty.ts", "node_modules/rxjs/src/internal/operators/take.ts", "node_modules/rxjs/src/internal/operators/ignoreElements.ts", "node_modules/rxjs/src/internal/operators/mapTo.ts", "node_modules/rxjs/src/internal/operators/delayWhen.ts", "node_modules/rxjs/src/internal/operators/delay.ts", "node_modules/rxjs/src/internal/operators/distinctUntilChanged.ts", "node_modules/rxjs/src/internal/operators/distinctUntilKeyChanged.ts", "node_modules/rxjs/src/internal/operators/throwIfEmpty.ts", "node_modules/rxjs/src/internal/operators/endWith.ts", "node_modules/rxjs/src/internal/operators/finalize.ts", "node_modules/rxjs/src/internal/operators/first.ts", "node_modules/rxjs/src/internal/operators/takeLast.ts", "node_modules/rxjs/src/internal/operators/merge.ts", "node_modules/rxjs/src/internal/operators/mergeWith.ts", "node_modules/rxjs/src/internal/operators/repeat.ts", "node_modules/rxjs/src/internal/operators/scan.ts", "node_modules/rxjs/src/internal/operators/share.ts", "node_modules/rxjs/src/internal/operators/shareReplay.ts", "node_modules/rxjs/src/internal/operators/skip.ts", "node_modules/rxjs/src/internal/operators/skipUntil.ts", "node_modules/rxjs/src/internal/operators/startWith.ts", "node_modules/rxjs/src/internal/operators/switchMap.ts", "node_modules/rxjs/src/internal/operators/takeUntil.ts", "node_modules/rxjs/src/internal/operators/takeWhile.ts", "node_modules/rxjs/src/internal/operators/tap.ts", "node_modules/rxjs/src/internal/operators/throttle.ts", "node_modules/rxjs/src/internal/operators/throttleTime.ts", "node_modules/rxjs/src/internal/operators/withLatestFrom.ts", "node_modules/rxjs/src/internal/operators/zip.ts", "node_modules/rxjs/src/internal/operators/zipWith.ts", "src/templates/assets/javascripts/browser/document/index.ts", "src/templates/assets/javascripts/browser/element/_/index.ts", "src/templates/assets/javascripts/browser/element/focus/index.ts", "src/templates/assets/javascripts/browser/element/hover/index.ts", "src/templates/assets/javascripts/utilities/h/index.ts", "src/templates/assets/javascripts/utilities/round/index.ts", "src/templates/assets/javascripts/browser/script/index.ts", "src/templates/assets/javascripts/browser/element/size/_/index.ts", "src/templates/assets/javascripts/browser/element/size/content/index.ts", "src/templates/assets/javascripts/browser/element/offset/_/index.ts", "src/templates/assets/javascripts/browser/element/offset/content/index.ts", "src/templates/assets/javascripts/browser/element/visibility/index.ts", "src/templates/assets/javascripts/browser/toggle/index.ts", "src/templates/assets/javascripts/browser/keyboard/index.ts", "src/templates/assets/javascripts/browser/location/_/index.ts", "src/templates/assets/javascripts/browser/location/hash/index.ts", "src/templates/assets/javascripts/browser/media/index.ts", "src/templates/assets/javascripts/browser/request/index.ts", "src/templates/assets/javascripts/browser/viewport/offset/index.ts", "src/templates/assets/javascripts/browser/viewport/size/index.ts", "src/templates/assets/javascripts/browser/viewport/_/index.ts", "src/templates/assets/javascripts/browser/viewport/at/index.ts", "src/templates/assets/javascripts/browser/worker/index.ts", "src/templates/assets/javascripts/_/index.ts", "src/templates/assets/javascripts/components/_/index.ts", "src/templates/assets/javascripts/components/announce/index.ts", "src/templates/assets/javascripts/components/consent/index.ts", "src/templates/assets/javascripts/templates/tooltip/index.tsx", "src/templates/assets/javascripts/templates/annotation/index.tsx", "src/templates/assets/javascripts/templates/clipboard/index.tsx", "src/templates/assets/javascripts/templates/search/index.tsx", "src/templates/assets/javascripts/templates/source/index.tsx", "src/templates/assets/javascripts/templates/tabbed/index.tsx", "src/templates/assets/javascripts/templates/table/index.tsx", "src/templates/assets/javascripts/templates/version/index.tsx", "src/templates/assets/javascripts/components/tooltip2/index.ts", "src/templates/assets/javascripts/components/content/annotation/_/index.ts", "src/templates/assets/javascripts/components/content/annotation/list/index.ts", "src/templates/assets/javascripts/components/content/annotation/block/index.ts", "src/templates/assets/javascripts/components/content/code/_/index.ts", "src/templates/assets/javascripts/components/content/details/index.ts", "src/templates/assets/javascripts/components/content/mermaid/index.css", "src/templates/assets/javascripts/components/content/mermaid/index.ts", "src/templates/assets/javascripts/components/content/table/index.ts", "src/templates/assets/javascripts/components/content/tabs/index.ts", "src/templates/assets/javascripts/components/content/_/index.ts", "src/templates/assets/javascripts/components/dialog/index.ts", "src/templates/assets/javascripts/components/tooltip/index.ts", "src/templates/assets/javascripts/components/header/_/index.ts", "src/templates/assets/javascripts/components/header/title/index.ts", "src/templates/assets/javascripts/components/main/index.ts", "src/templates/assets/javascripts/components/palette/index.ts", "src/templates/assets/javascripts/components/progress/index.ts", "src/templates/assets/javascripts/integrations/clipboard/index.ts", "src/templates/assets/javascripts/integrations/sitemap/index.ts", "src/templates/assets/javascripts/integrations/instant/index.ts", "src/templates/assets/javascripts/integrations/search/highlighter/index.ts", "src/templates/assets/javascripts/integrations/search/worker/message/index.ts", "src/templates/assets/javascripts/integrations/search/worker/_/index.ts", "src/templates/assets/javascripts/integrations/version/findurl/index.ts", "src/templates/assets/javascripts/integrations/version/index.ts", "src/templates/assets/javascripts/components/search/query/index.ts", "src/templates/assets/javascripts/components/search/result/index.ts", "src/templates/assets/javascripts/components/search/share/index.ts", "src/templates/assets/javascripts/components/search/suggest/index.ts", "src/templates/assets/javascripts/components/search/_/index.ts", "src/templates/assets/javascripts/components/search/highlight/index.ts", "src/templates/assets/javascripts/components/sidebar/index.ts", "src/templates/assets/javascripts/components/source/facts/github/index.ts", "src/templates/assets/javascripts/components/source/facts/gitlab/index.ts", "src/templates/assets/javascripts/components/source/facts/_/index.ts", "src/templates/assets/javascripts/components/source/_/index.ts", "src/templates/assets/javascripts/components/tabs/index.ts", "src/templates/assets/javascripts/components/toc/index.ts", "src/templates/assets/javascripts/components/top/index.ts", "src/templates/assets/javascripts/patches/ellipsis/index.ts", "src/templates/assets/javascripts/patches/indeterminate/index.ts", "src/templates/assets/javascripts/patches/scrollfix/index.ts", "src/templates/assets/javascripts/patches/scrolllock/index.ts", "src/templates/assets/javascripts/polyfills/index.ts"],
+ "sourcesContent": ["(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? factory() :\n typeof define === 'function' && define.amd ? define(factory) :\n (factory());\n}(this, (function () { 'use strict';\n\n /**\n * Applies the :focus-visible polyfill at the given scope.\n * A scope in this case is either the top-level Document or a Shadow Root.\n *\n * @param {(Document|ShadowRoot)} scope\n * @see https://github.com/WICG/focus-visible\n */\n function applyFocusVisiblePolyfill(scope) {\n var hadKeyboardEvent = true;\n var hadFocusVisibleRecently = false;\n var hadFocusVisibleRecentlyTimeout = null;\n\n var inputTypesAllowlist = {\n text: true,\n search: true,\n url: true,\n tel: true,\n email: true,\n password: true,\n number: true,\n date: true,\n month: true,\n week: true,\n time: true,\n datetime: true,\n 'datetime-local': true\n };\n\n /**\n * Helper function for legacy browsers and iframes which sometimes focus\n * elements like document, body, and non-interactive SVG.\n * @param {Element} el\n */\n function isValidFocusTarget(el) {\n if (\n el &&\n el !== document &&\n el.nodeName !== 'HTML' &&\n el.nodeName !== 'BODY' &&\n 'classList' in el &&\n 'contains' in el.classList\n ) {\n return true;\n }\n return false;\n }\n\n /**\n * Computes whether the given element should automatically trigger the\n * `focus-visible` class being added, i.e. whether it should always match\n * `:focus-visible` when focused.\n * @param {Element} el\n * @return {boolean}\n */\n function focusTriggersKeyboardModality(el) {\n var type = el.type;\n var tagName = el.tagName;\n\n if (tagName === 'INPUT' && inputTypesAllowlist[type] && !el.readOnly) {\n return true;\n }\n\n if (tagName === 'TEXTAREA' && !el.readOnly) {\n return true;\n }\n\n if (el.isContentEditable) {\n return true;\n }\n\n return false;\n }\n\n /**\n * Add the `focus-visible` class to the given element if it was not added by\n * the author.\n * @param {Element} el\n */\n function addFocusVisibleClass(el) {\n if (el.classList.contains('focus-visible')) {\n return;\n }\n el.classList.add('focus-visible');\n el.setAttribute('data-focus-visible-added', '');\n }\n\n /**\n * Remove the `focus-visible` class from the given element if it was not\n * originally added by the author.\n * @param {Element} el\n */\n function removeFocusVisibleClass(el) {\n if (!el.hasAttribute('data-focus-visible-added')) {\n return;\n }\n el.classList.remove('focus-visible');\n el.removeAttribute('data-focus-visible-added');\n }\n\n /**\n * If the most recent user interaction was via the keyboard;\n * and the key press did not include a meta, alt/option, or control key;\n * then the modality is keyboard. Otherwise, the modality is not keyboard.\n * Apply `focus-visible` to any current active element and keep track\n * of our keyboard modality state with `hadKeyboardEvent`.\n * @param {KeyboardEvent} e\n */\n function onKeyDown(e) {\n if (e.metaKey || e.altKey || e.ctrlKey) {\n return;\n }\n\n if (isValidFocusTarget(scope.activeElement)) {\n addFocusVisibleClass(scope.activeElement);\n }\n\n hadKeyboardEvent = true;\n }\n\n /**\n * If at any point a user clicks with a pointing device, ensure that we change\n * the modality away from keyboard.\n * This avoids the situation where a user presses a key on an already focused\n * element, and then clicks on a different element, focusing it with a\n * pointing device, while we still think we're in keyboard modality.\n * @param {Event} e\n */\n function onPointerDown(e) {\n hadKeyboardEvent = false;\n }\n\n /**\n * On `focus`, add the `focus-visible` class to the target if:\n * - the target received focus as a result of keyboard navigation, or\n * - the event target is an element that will likely require interaction\n * via the keyboard (e.g. a text box)\n * @param {Event} e\n */\n function onFocus(e) {\n // Prevent IE from focusing the document or HTML element.\n if (!isValidFocusTarget(e.target)) {\n return;\n }\n\n if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {\n addFocusVisibleClass(e.target);\n }\n }\n\n /**\n * On `blur`, remove the `focus-visible` class from the target.\n * @param {Event} e\n */\n function onBlur(e) {\n if (!isValidFocusTarget(e.target)) {\n return;\n }\n\n if (\n e.target.classList.contains('focus-visible') ||\n e.target.hasAttribute('data-focus-visible-added')\n ) {\n // To detect a tab/window switch, we look for a blur event followed\n // rapidly by a visibility change.\n // If we don't see a visibility change within 100ms, it's probably a\n // regular focus change.\n hadFocusVisibleRecently = true;\n window.clearTimeout(hadFocusVisibleRecentlyTimeout);\n hadFocusVisibleRecentlyTimeout = window.setTimeout(function() {\n hadFocusVisibleRecently = false;\n }, 100);\n removeFocusVisibleClass(e.target);\n }\n }\n\n /**\n * If the user changes tabs, keep track of whether or not the previously\n * focused element had .focus-visible.\n * @param {Event} e\n */\n function onVisibilityChange(e) {\n if (document.visibilityState === 'hidden') {\n // If the tab becomes active again, the browser will handle calling focus\n // on the element (Safari actually calls it twice).\n // If this tab change caused a blur on an element with focus-visible,\n // re-apply the class when the user switches back to the tab.\n if (hadFocusVisibleRecently) {\n hadKeyboardEvent = true;\n }\n addInitialPointerMoveListeners();\n }\n }\n\n /**\n * Add a group of listeners to detect usage of any pointing devices.\n * These listeners will be added when the polyfill first loads, and anytime\n * the window is blurred, so that they are active when the window regains\n * focus.\n */\n function addInitialPointerMoveListeners() {\n document.addEventListener('mousemove', onInitialPointerMove);\n document.addEventListener('mousedown', onInitialPointerMove);\n document.addEventListener('mouseup', onInitialPointerMove);\n document.addEventListener('pointermove', onInitialPointerMove);\n document.addEventListener('pointerdown', onInitialPointerMove);\n document.addEventListener('pointerup', onInitialPointerMove);\n document.addEventListener('touchmove', onInitialPointerMove);\n document.addEventListener('touchstart', onInitialPointerMove);\n document.addEventListener('touchend', onInitialPointerMove);\n }\n\n function removeInitialPointerMoveListeners() {\n document.removeEventListener('mousemove', onInitialPointerMove);\n document.removeEventListener('mousedown', onInitialPointerMove);\n document.removeEventListener('mouseup', onInitialPointerMove);\n document.removeEventListener('pointermove', onInitialPointerMove);\n document.removeEventListener('pointerdown', onInitialPointerMove);\n document.removeEventListener('pointerup', onInitialPointerMove);\n document.removeEventListener('touchmove', onInitialPointerMove);\n document.removeEventListener('touchstart', onInitialPointerMove);\n document.removeEventListener('touchend', onInitialPointerMove);\n }\n\n /**\n * When the polfyill first loads, assume the user is in keyboard modality.\n * If any event is received from a pointing device (e.g. mouse, pointer,\n * touch), turn off keyboard modality.\n * This accounts for situations where focus enters the page from the URL bar.\n * @param {Event} e\n */\n function onInitialPointerMove(e) {\n // Work around a Safari quirk that fires a mousemove on whenever the\n // window blurs, even if you're tabbing out of the page. \u00AF\\_(\u30C4)_/\u00AF\n if (e.target.nodeName && e.target.nodeName.toLowerCase() === 'html') {\n return;\n }\n\n hadKeyboardEvent = false;\n removeInitialPointerMoveListeners();\n }\n\n // For some kinds of state, we are interested in changes at the global scope\n // only. For example, global pointer input, global key presses and global\n // visibility change should affect the state at every scope:\n document.addEventListener('keydown', onKeyDown, true);\n document.addEventListener('mousedown', onPointerDown, true);\n document.addEventListener('pointerdown', onPointerDown, true);\n document.addEventListener('touchstart', onPointerDown, true);\n document.addEventListener('visibilitychange', onVisibilityChange, true);\n\n addInitialPointerMoveListeners();\n\n // For focus and blur, we specifically care about state changes in the local\n // scope. This is because focus / blur events that originate from within a\n // shadow root are not re-dispatched from the host element if it was already\n // the active element in its own scope:\n scope.addEventListener('focus', onFocus, true);\n scope.addEventListener('blur', onBlur, true);\n\n // We detect that a node is a ShadowRoot by ensuring that it is a\n // DocumentFragment and also has a host property. This check covers native\n // implementation and polyfill implementation transparently. If we only cared\n // about the native implementation, we could just check if the scope was\n // an instance of a ShadowRoot.\n if (scope.nodeType === Node.DOCUMENT_FRAGMENT_NODE && scope.host) {\n // Since a ShadowRoot is a special kind of DocumentFragment, it does not\n // have a root element to add a class to. So, we add this attribute to the\n // host element instead:\n scope.host.setAttribute('data-js-focus-visible', '');\n } else if (scope.nodeType === Node.DOCUMENT_NODE) {\n document.documentElement.classList.add('js-focus-visible');\n document.documentElement.setAttribute('data-js-focus-visible', '');\n }\n }\n\n // It is important to wrap all references to global window and document in\n // these checks to support server-side rendering use cases\n // @see https://github.com/WICG/focus-visible/issues/199\n if (typeof window !== 'undefined' && typeof document !== 'undefined') {\n // Make the polyfill helper globally available. This can be used as a signal\n // to interested libraries that wish to coordinate with the polyfill for e.g.,\n // applying the polyfill to a shadow root:\n window.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;\n\n // Notify interested libraries of the polyfill's presence, in case the\n // polyfill was loaded lazily:\n var event;\n\n try {\n event = new CustomEvent('focus-visible-polyfill-ready');\n } catch (error) {\n // IE11 does not support using CustomEvent as a constructor directly:\n event = document.createEvent('CustomEvent');\n event.initCustomEvent('focus-visible-polyfill-ready', false, false, {});\n }\n\n window.dispatchEvent(event);\n }\n\n if (typeof document !== 'undefined') {\n // Apply the polyfill to the global document, so that no JavaScript\n // coordination is required to use the polyfill in the top-level document:\n applyFocusVisiblePolyfill(document);\n }\n\n})));\n", "/*!\n * escape-html\n * Copyright(c) 2012-2013 TJ Holowaychuk\n * Copyright(c) 2015 Andreas Lubbe\n * Copyright(c) 2015 Tiancheng \"Timothy\" Gu\n * MIT Licensed\n */\n\n'use strict';\n\n/**\n * Module variables.\n * @private\n */\n\nvar matchHtmlRegExp = /[\"'&<>]/;\n\n/**\n * Module exports.\n * @public\n */\n\nmodule.exports = escapeHtml;\n\n/**\n * Escape special characters in the given string of html.\n *\n * @param {string} string The string to escape for inserting into HTML\n * @return {string}\n * @public\n */\n\nfunction escapeHtml(string) {\n var str = '' + string;\n var match = matchHtmlRegExp.exec(str);\n\n if (!match) {\n return str;\n }\n\n var escape;\n var html = '';\n var index = 0;\n var lastIndex = 0;\n\n for (index = match.index; index < str.length; index++) {\n switch (str.charCodeAt(index)) {\n case 34: // \"\n escape = '"';\n break;\n case 38: // &\n escape = '&';\n break;\n case 39: // '\n escape = ''';\n break;\n case 60: // <\n escape = '<';\n break;\n case 62: // >\n escape = '>';\n break;\n default:\n continue;\n }\n\n if (lastIndex !== index) {\n html += str.substring(lastIndex, index);\n }\n\n lastIndex = index + 1;\n html += escape;\n }\n\n return lastIndex !== index\n ? html + str.substring(lastIndex, index)\n : html;\n}\n", "/*!\n * clipboard.js v2.0.11\n * https://clipboardjs.com/\n *\n * Licensed MIT \u00A9 Zeno Rocha\n */\n(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ClipboardJS\"] = factory();\n\telse\n\t\troot[\"ClipboardJS\"] = factory();\n})(this, function() {\nreturn /******/ (function() { // webpackBootstrap\n/******/ \tvar __webpack_modules__ = ({\n\n/***/ 686:\n/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n\n// EXPORTS\n__webpack_require__.d(__webpack_exports__, {\n \"default\": function() { return /* binding */ clipboard; }\n});\n\n// EXTERNAL MODULE: ./node_modules/tiny-emitter/index.js\nvar tiny_emitter = __webpack_require__(279);\nvar tiny_emitter_default = /*#__PURE__*/__webpack_require__.n(tiny_emitter);\n// EXTERNAL MODULE: ./node_modules/good-listener/src/listen.js\nvar listen = __webpack_require__(370);\nvar listen_default = /*#__PURE__*/__webpack_require__.n(listen);\n// EXTERNAL MODULE: ./node_modules/select/src/select.js\nvar src_select = __webpack_require__(817);\nvar select_default = /*#__PURE__*/__webpack_require__.n(src_select);\n;// CONCATENATED MODULE: ./src/common/command.js\n/**\n * Executes a given operation type.\n * @param {String} type\n * @return {Boolean}\n */\nfunction command(type) {\n try {\n return document.execCommand(type);\n } catch (err) {\n return false;\n }\n}\n;// CONCATENATED MODULE: ./src/actions/cut.js\n\n\n/**\n * Cut action wrapper.\n * @param {String|HTMLElement} target\n * @return {String}\n */\n\nvar ClipboardActionCut = function ClipboardActionCut(target) {\n var selectedText = select_default()(target);\n command('cut');\n return selectedText;\n};\n\n/* harmony default export */ var actions_cut = (ClipboardActionCut);\n;// CONCATENATED MODULE: ./src/common/create-fake-element.js\n/**\n * Creates a fake textarea element with a value.\n * @param {String} value\n * @return {HTMLElement}\n */\nfunction createFakeElement(value) {\n var isRTL = document.documentElement.getAttribute('dir') === 'rtl';\n var fakeElement = document.createElement('textarea'); // Prevent zooming on iOS\n\n fakeElement.style.fontSize = '12pt'; // Reset box model\n\n fakeElement.style.border = '0';\n fakeElement.style.padding = '0';\n fakeElement.style.margin = '0'; // Move element out of screen horizontally\n\n fakeElement.style.position = 'absolute';\n fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px'; // Move element to the same position vertically\n\n var yPosition = window.pageYOffset || document.documentElement.scrollTop;\n fakeElement.style.top = \"\".concat(yPosition, \"px\");\n fakeElement.setAttribute('readonly', '');\n fakeElement.value = value;\n return fakeElement;\n}\n;// CONCATENATED MODULE: ./src/actions/copy.js\n\n\n\n/**\n * Create fake copy action wrapper using a fake element.\n * @param {String} target\n * @param {Object} options\n * @return {String}\n */\n\nvar fakeCopyAction = function fakeCopyAction(value, options) {\n var fakeElement = createFakeElement(value);\n options.container.appendChild(fakeElement);\n var selectedText = select_default()(fakeElement);\n command('copy');\n fakeElement.remove();\n return selectedText;\n};\n/**\n * Copy action wrapper.\n * @param {String|HTMLElement} target\n * @param {Object} options\n * @return {String}\n */\n\n\nvar ClipboardActionCopy = function ClipboardActionCopy(target) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {\n container: document.body\n };\n var selectedText = '';\n\n if (typeof target === 'string') {\n selectedText = fakeCopyAction(target, options);\n } else if (target instanceof HTMLInputElement && !['text', 'search', 'url', 'tel', 'password'].includes(target === null || target === void 0 ? void 0 : target.type)) {\n // If input type doesn't support `setSelectionRange`. Simulate it. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange\n selectedText = fakeCopyAction(target.value, options);\n } else {\n selectedText = select_default()(target);\n command('copy');\n }\n\n return selectedText;\n};\n\n/* harmony default export */ var actions_copy = (ClipboardActionCopy);\n;// CONCATENATED MODULE: ./src/actions/default.js\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n\n\n/**\n * Inner function which performs selection from either `text` or `target`\n * properties and then executes copy or cut operations.\n * @param {Object} options\n */\n\nvar ClipboardActionDefault = function ClipboardActionDefault() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n // Defines base properties passed from constructor.\n var _options$action = options.action,\n action = _options$action === void 0 ? 'copy' : _options$action,\n container = options.container,\n target = options.target,\n text = options.text; // Sets the `action` to be performed which can be either 'copy' or 'cut'.\n\n if (action !== 'copy' && action !== 'cut') {\n throw new Error('Invalid \"action\" value, use either \"copy\" or \"cut\"');\n } // Sets the `target` property using an element that will be have its content copied.\n\n\n if (target !== undefined) {\n if (target && _typeof(target) === 'object' && target.nodeType === 1) {\n if (action === 'copy' && target.hasAttribute('disabled')) {\n throw new Error('Invalid \"target\" attribute. Please use \"readonly\" instead of \"disabled\" attribute');\n }\n\n if (action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {\n throw new Error('Invalid \"target\" attribute. You can\\'t cut text from elements with \"readonly\" or \"disabled\" attributes');\n }\n } else {\n throw new Error('Invalid \"target\" value, use a valid Element');\n }\n } // Define selection strategy based on `text` property.\n\n\n if (text) {\n return actions_copy(text, {\n container: container\n });\n } // Defines which selection strategy based on `target` property.\n\n\n if (target) {\n return action === 'cut' ? actions_cut(target) : actions_copy(target, {\n container: container\n });\n }\n};\n\n/* harmony default export */ var actions_default = (ClipboardActionDefault);\n;// CONCATENATED MODULE: ./src/clipboard.js\nfunction clipboard_typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { clipboard_typeof = function _typeof(obj) { return typeof obj; }; } else { clipboard_typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return clipboard_typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (clipboard_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n\n\n\n\n/**\n * Helper function to retrieve attribute value.\n * @param {String} suffix\n * @param {Element} element\n */\n\nfunction getAttributeValue(suffix, element) {\n var attribute = \"data-clipboard-\".concat(suffix);\n\n if (!element.hasAttribute(attribute)) {\n return;\n }\n\n return element.getAttribute(attribute);\n}\n/**\n * Base class which takes one or more elements, adds event listeners to them,\n * and instantiates a new `ClipboardAction` on each click.\n */\n\n\nvar Clipboard = /*#__PURE__*/function (_Emitter) {\n _inherits(Clipboard, _Emitter);\n\n var _super = _createSuper(Clipboard);\n\n /**\n * @param {String|HTMLElement|HTMLCollection|NodeList} trigger\n * @param {Object} options\n */\n function Clipboard(trigger, options) {\n var _this;\n\n _classCallCheck(this, Clipboard);\n\n _this = _super.call(this);\n\n _this.resolveOptions(options);\n\n _this.listenClick(trigger);\n\n return _this;\n }\n /**\n * Defines if attributes would be resolved using internal setter functions\n * or custom functions that were passed in the constructor.\n * @param {Object} options\n */\n\n\n _createClass(Clipboard, [{\n key: \"resolveOptions\",\n value: function resolveOptions() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n this.action = typeof options.action === 'function' ? options.action : this.defaultAction;\n this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;\n this.text = typeof options.text === 'function' ? options.text : this.defaultText;\n this.container = clipboard_typeof(options.container) === 'object' ? options.container : document.body;\n }\n /**\n * Adds a click event listener to the passed trigger.\n * @param {String|HTMLElement|HTMLCollection|NodeList} trigger\n */\n\n }, {\n key: \"listenClick\",\n value: function listenClick(trigger) {\n var _this2 = this;\n\n this.listener = listen_default()(trigger, 'click', function (e) {\n return _this2.onClick(e);\n });\n }\n /**\n * Defines a new `ClipboardAction` on each click event.\n * @param {Event} e\n */\n\n }, {\n key: \"onClick\",\n value: function onClick(e) {\n var trigger = e.delegateTarget || e.currentTarget;\n var action = this.action(trigger) || 'copy';\n var text = actions_default({\n action: action,\n container: this.container,\n target: this.target(trigger),\n text: this.text(trigger)\n }); // Fires an event based on the copy operation result.\n\n this.emit(text ? 'success' : 'error', {\n action: action,\n text: text,\n trigger: trigger,\n clearSelection: function clearSelection() {\n if (trigger) {\n trigger.focus();\n }\n\n window.getSelection().removeAllRanges();\n }\n });\n }\n /**\n * Default `action` lookup function.\n * @param {Element} trigger\n */\n\n }, {\n key: \"defaultAction\",\n value: function defaultAction(trigger) {\n return getAttributeValue('action', trigger);\n }\n /**\n * Default `target` lookup function.\n * @param {Element} trigger\n */\n\n }, {\n key: \"defaultTarget\",\n value: function defaultTarget(trigger) {\n var selector = getAttributeValue('target', trigger);\n\n if (selector) {\n return document.querySelector(selector);\n }\n }\n /**\n * Allow fire programmatically a copy action\n * @param {String|HTMLElement} target\n * @param {Object} options\n * @returns Text copied.\n */\n\n }, {\n key: \"defaultText\",\n\n /**\n * Default `text` lookup function.\n * @param {Element} trigger\n */\n value: function defaultText(trigger) {\n return getAttributeValue('text', trigger);\n }\n /**\n * Destroy lifecycle.\n */\n\n }, {\n key: \"destroy\",\n value: function destroy() {\n this.listener.destroy();\n }\n }], [{\n key: \"copy\",\n value: function copy(target) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {\n container: document.body\n };\n return actions_copy(target, options);\n }\n /**\n * Allow fire programmatically a cut action\n * @param {String|HTMLElement} target\n * @returns Text cutted.\n */\n\n }, {\n key: \"cut\",\n value: function cut(target) {\n return actions_cut(target);\n }\n /**\n * Returns the support of the given action, or all actions if no action is\n * given.\n * @param {String} [action]\n */\n\n }, {\n key: \"isSupported\",\n value: function isSupported() {\n var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['copy', 'cut'];\n var actions = typeof action === 'string' ? [action] : action;\n var support = !!document.queryCommandSupported;\n actions.forEach(function (action) {\n support = support && !!document.queryCommandSupported(action);\n });\n return support;\n }\n }]);\n\n return Clipboard;\n}((tiny_emitter_default()));\n\n/* harmony default export */ var clipboard = (Clipboard);\n\n/***/ }),\n\n/***/ 828:\n/***/ (function(module) {\n\nvar DOCUMENT_NODE_TYPE = 9;\n\n/**\n * A polyfill for Element.matches()\n */\nif (typeof Element !== 'undefined' && !Element.prototype.matches) {\n var proto = Element.prototype;\n\n proto.matches = proto.matchesSelector ||\n proto.mozMatchesSelector ||\n proto.msMatchesSelector ||\n proto.oMatchesSelector ||\n proto.webkitMatchesSelector;\n}\n\n/**\n * Finds the closest parent that matches a selector.\n *\n * @param {Element} element\n * @param {String} selector\n * @return {Function}\n */\nfunction closest (element, selector) {\n while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {\n if (typeof element.matches === 'function' &&\n element.matches(selector)) {\n return element;\n }\n element = element.parentNode;\n }\n}\n\nmodule.exports = closest;\n\n\n/***/ }),\n\n/***/ 438:\n/***/ (function(module, __unused_webpack_exports, __webpack_require__) {\n\nvar closest = __webpack_require__(828);\n\n/**\n * Delegates event to a selector.\n *\n * @param {Element} element\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @param {Boolean} useCapture\n * @return {Object}\n */\nfunction _delegate(element, selector, type, callback, useCapture) {\n var listenerFn = listener.apply(this, arguments);\n\n element.addEventListener(type, listenerFn, useCapture);\n\n return {\n destroy: function() {\n element.removeEventListener(type, listenerFn, useCapture);\n }\n }\n}\n\n/**\n * Delegates event to a selector.\n *\n * @param {Element|String|Array} [elements]\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @param {Boolean} useCapture\n * @return {Object}\n */\nfunction delegate(elements, selector, type, callback, useCapture) {\n // Handle the regular Element usage\n if (typeof elements.addEventListener === 'function') {\n return _delegate.apply(null, arguments);\n }\n\n // Handle Element-less usage, it defaults to global delegation\n if (typeof type === 'function') {\n // Use `document` as the first parameter, then apply arguments\n // This is a short way to .unshift `arguments` without running into deoptimizations\n return _delegate.bind(null, document).apply(null, arguments);\n }\n\n // Handle Selector-based usage\n if (typeof elements === 'string') {\n elements = document.querySelectorAll(elements);\n }\n\n // Handle Array-like based usage\n return Array.prototype.map.call(elements, function (element) {\n return _delegate(element, selector, type, callback, useCapture);\n });\n}\n\n/**\n * Finds closest match and invokes callback.\n *\n * @param {Element} element\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @return {Function}\n */\nfunction listener(element, selector, type, callback) {\n return function(e) {\n e.delegateTarget = closest(e.target, selector);\n\n if (e.delegateTarget) {\n callback.call(element, e);\n }\n }\n}\n\nmodule.exports = delegate;\n\n\n/***/ }),\n\n/***/ 879:\n/***/ (function(__unused_webpack_module, exports) {\n\n/**\n * Check if argument is a HTML element.\n *\n * @param {Object} value\n * @return {Boolean}\n */\nexports.node = function(value) {\n return value !== undefined\n && value instanceof HTMLElement\n && value.nodeType === 1;\n};\n\n/**\n * Check if argument is a list of HTML elements.\n *\n * @param {Object} value\n * @return {Boolean}\n */\nexports.nodeList = function(value) {\n var type = Object.prototype.toString.call(value);\n\n return value !== undefined\n && (type === '[object NodeList]' || type === '[object HTMLCollection]')\n && ('length' in value)\n && (value.length === 0 || exports.node(value[0]));\n};\n\n/**\n * Check if argument is a string.\n *\n * @param {Object} value\n * @return {Boolean}\n */\nexports.string = function(value) {\n return typeof value === 'string'\n || value instanceof String;\n};\n\n/**\n * Check if argument is a function.\n *\n * @param {Object} value\n * @return {Boolean}\n */\nexports.fn = function(value) {\n var type = Object.prototype.toString.call(value);\n\n return type === '[object Function]';\n};\n\n\n/***/ }),\n\n/***/ 370:\n/***/ (function(module, __unused_webpack_exports, __webpack_require__) {\n\nvar is = __webpack_require__(879);\nvar delegate = __webpack_require__(438);\n\n/**\n * Validates all params and calls the right\n * listener function based on its target type.\n *\n * @param {String|HTMLElement|HTMLCollection|NodeList} target\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\nfunction listen(target, type, callback) {\n if (!target && !type && !callback) {\n throw new Error('Missing required arguments');\n }\n\n if (!is.string(type)) {\n throw new TypeError('Second argument must be a String');\n }\n\n if (!is.fn(callback)) {\n throw new TypeError('Third argument must be a Function');\n }\n\n if (is.node(target)) {\n return listenNode(target, type, callback);\n }\n else if (is.nodeList(target)) {\n return listenNodeList(target, type, callback);\n }\n else if (is.string(target)) {\n return listenSelector(target, type, callback);\n }\n else {\n throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');\n }\n}\n\n/**\n * Adds an event listener to a HTML element\n * and returns a remove listener function.\n *\n * @param {HTMLElement} node\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\nfunction listenNode(node, type, callback) {\n node.addEventListener(type, callback);\n\n return {\n destroy: function() {\n node.removeEventListener(type, callback);\n }\n }\n}\n\n/**\n * Add an event listener to a list of HTML elements\n * and returns a remove listener function.\n *\n * @param {NodeList|HTMLCollection} nodeList\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\nfunction listenNodeList(nodeList, type, callback) {\n Array.prototype.forEach.call(nodeList, function(node) {\n node.addEventListener(type, callback);\n });\n\n return {\n destroy: function() {\n Array.prototype.forEach.call(nodeList, function(node) {\n node.removeEventListener(type, callback);\n });\n }\n }\n}\n\n/**\n * Add an event listener to a selector\n * and returns a remove listener function.\n *\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\nfunction listenSelector(selector, type, callback) {\n return delegate(document.body, selector, type, callback);\n}\n\nmodule.exports = listen;\n\n\n/***/ }),\n\n/***/ 817:\n/***/ (function(module) {\n\nfunction select(element) {\n var selectedText;\n\n if (element.nodeName === 'SELECT') {\n element.focus();\n\n selectedText = element.value;\n }\n else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {\n var isReadOnly = element.hasAttribute('readonly');\n\n if (!isReadOnly) {\n element.setAttribute('readonly', '');\n }\n\n element.select();\n element.setSelectionRange(0, element.value.length);\n\n if (!isReadOnly) {\n element.removeAttribute('readonly');\n }\n\n selectedText = element.value;\n }\n else {\n if (element.hasAttribute('contenteditable')) {\n element.focus();\n }\n\n var selection = window.getSelection();\n var range = document.createRange();\n\n range.selectNodeContents(element);\n selection.removeAllRanges();\n selection.addRange(range);\n\n selectedText = selection.toString();\n }\n\n return selectedText;\n}\n\nmodule.exports = select;\n\n\n/***/ }),\n\n/***/ 279:\n/***/ (function(module) {\n\nfunction E () {\n // Keep this empty so it's easier to inherit from\n // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)\n}\n\nE.prototype = {\n on: function (name, callback, ctx) {\n var e = this.e || (this.e = {});\n\n (e[name] || (e[name] = [])).push({\n fn: callback,\n ctx: ctx\n });\n\n return this;\n },\n\n once: function (name, callback, ctx) {\n var self = this;\n function listener () {\n self.off(name, listener);\n callback.apply(ctx, arguments);\n };\n\n listener._ = callback\n return this.on(name, listener, ctx);\n },\n\n emit: function (name) {\n var data = [].slice.call(arguments, 1);\n var evtArr = ((this.e || (this.e = {}))[name] || []).slice();\n var i = 0;\n var len = evtArr.length;\n\n for (i; i < len; i++) {\n evtArr[i].fn.apply(evtArr[i].ctx, data);\n }\n\n return this;\n },\n\n off: function (name, callback) {\n var e = this.e || (this.e = {});\n var evts = e[name];\n var liveEvents = [];\n\n if (evts && callback) {\n for (var i = 0, len = evts.length; i < len; i++) {\n if (evts[i].fn !== callback && evts[i].fn._ !== callback)\n liveEvents.push(evts[i]);\n }\n }\n\n // Remove event from queue to prevent memory leak\n // Suggested by https://github.com/lazd\n // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910\n\n (liveEvents.length)\n ? e[name] = liveEvents\n : delete e[name];\n\n return this;\n }\n};\n\nmodule.exports = E;\nmodule.exports.TinyEmitter = E;\n\n\n/***/ })\n\n/******/ \t});\n/************************************************************************/\n/******/ \t// The module cache\n/******/ \tvar __webpack_module_cache__ = {};\n/******/ \t\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(__webpack_module_cache__[moduleId]) {\n/******/ \t\t\treturn __webpack_module_cache__[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = __webpack_module_cache__[moduleId] = {\n/******/ \t\t\t// no module.id needed\n/******/ \t\t\t// no module.loaded needed\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/ \t\n/******/ \t\t// Execute the module function\n/******/ \t\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n/******/ \t\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/ \t\n/************************************************************************/\n/******/ \t/* webpack/runtime/compat get default export */\n/******/ \t!function() {\n/******/ \t\t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t\t__webpack_require__.n = function(module) {\n/******/ \t\t\tvar getter = module && module.__esModule ?\n/******/ \t\t\t\tfunction() { return module['default']; } :\n/******/ \t\t\t\tfunction() { return module; };\n/******/ \t\t\t__webpack_require__.d(getter, { a: getter });\n/******/ \t\t\treturn getter;\n/******/ \t\t};\n/******/ \t}();\n/******/ \t\n/******/ \t/* webpack/runtime/define property getters */\n/******/ \t!function() {\n/******/ \t\t// define getter functions for harmony exports\n/******/ \t\t__webpack_require__.d = function(exports, definition) {\n/******/ \t\t\tfor(var key in definition) {\n/******/ \t\t\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n/******/ \t\t\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/ \t\t};\n/******/ \t}();\n/******/ \t\n/******/ \t/* webpack/runtime/hasOwnProperty shorthand */\n/******/ \t!function() {\n/******/ \t\t__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }\n/******/ \t}();\n/******/ \t\n/************************************************************************/\n/******/ \t// module exports must be returned from runtime so entry inlining is disabled\n/******/ \t// startup\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(686);\n/******/ })()\n.default;\n});", "/*\n * Copyright (c) 2016-2025 Martin Donath \n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to\n * deal in the Software without restriction, including without limitation the\n * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or\n * sell copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS\n * IN THE SOFTWARE.\n */\n\nimport \"focus-visible\"\n\nimport {\n EMPTY,\n NEVER,\n Observable,\n Subject,\n defer,\n delay,\n filter,\n map,\n merge,\n mergeWith,\n shareReplay,\n switchMap\n} from \"rxjs\"\n\nimport { configuration, feature } from \"./_\"\nimport {\n at,\n getActiveElement,\n getOptionalElement,\n requestJSON,\n setLocation,\n setToggle,\n watchDocument,\n watchKeyboard,\n watchLocation,\n watchLocationTarget,\n watchMedia,\n watchPrint,\n watchScript,\n watchViewport\n} from \"./browser\"\nimport {\n getComponentElement,\n getComponentElements,\n mountAnnounce,\n mountBackToTop,\n mountConsent,\n mountContent,\n mountDialog,\n mountHeader,\n mountHeaderTitle,\n mountPalette,\n mountProgress,\n mountSearch,\n mountSearchHiglight,\n mountSidebar,\n mountSource,\n mountTableOfContents,\n mountTabs,\n watchHeader,\n watchMain\n} from \"./components\"\nimport {\n SearchIndex,\n setupClipboardJS,\n setupInstantNavigation,\n setupVersionSelector\n} from \"./integrations\"\nimport {\n patchEllipsis,\n patchIndeterminate,\n patchScrollfix,\n patchScrolllock\n} from \"./patches\"\nimport \"./polyfills\"\n\n/* ----------------------------------------------------------------------------\n * Functions - @todo refactor\n * ------------------------------------------------------------------------- */\n\n/**\n * Fetch search index\n *\n * @returns Search index observable\n */\nfunction fetchSearchIndex(): Observable {\n if (location.protocol === \"file:\") {\n return watchScript(\n `${new URL(\"search/search_index.js\", config.base)}`\n )\n .pipe(\n // @ts-ignore - @todo fix typings\n map(() => __index),\n shareReplay(1)\n )\n } else {\n return requestJSON(\n new URL(\"search/search_index.json\", config.base)\n )\n }\n}\n\n/* ----------------------------------------------------------------------------\n * Application\n * ------------------------------------------------------------------------- */\n\n/* Yay, JavaScript is available */\ndocument.documentElement.classList.remove(\"no-js\")\ndocument.documentElement.classList.add(\"js\")\n\n/* Set up navigation observables and subjects */\nconst document$ = watchDocument()\nconst location$ = watchLocation()\nconst target$ = watchLocationTarget(location$)\nconst keyboard$ = watchKeyboard()\n\n/* Set up media observables */\nconst viewport$ = watchViewport()\nconst tablet$ = watchMedia(\"(min-width: 60em)\")\nconst screen$ = watchMedia(\"(min-width: 76.25em)\")\nconst print$ = watchPrint()\n\n/* Retrieve search index, if search is enabled */\nconst config = configuration()\nconst index$ = document.forms.namedItem(\"search\")\n ? fetchSearchIndex()\n : NEVER\n\n/* Set up Clipboard.js integration */\nconst alert$ = new Subject()\nsetupClipboardJS({ alert$ })\n\n/* Set up progress indicator */\nconst progress$ = new Subject()\n\n/* Set up instant navigation, if enabled */\nif (feature(\"navigation.instant\"))\n setupInstantNavigation({ location$, viewport$, progress$ })\n .subscribe(document$)\n\n/* Set up version selector */\nif (config.version?.provider === \"mike\")\n setupVersionSelector({ document$ })\n\n/* Always close drawer and search on navigation */\nmerge(location$, target$)\n .pipe(\n delay(125)\n )\n .subscribe(() => {\n setToggle(\"drawer\", false)\n setToggle(\"search\", false)\n })\n\n/* Set up global keyboard handlers */\nkeyboard$\n .pipe(\n filter(({ mode }) => mode === \"global\")\n )\n .subscribe(key => {\n switch (key.type) {\n\n /* Go to previous page */\n case \"p\":\n case \",\":\n const prev = getOptionalElement(\"link[rel=prev]\")\n if (typeof prev !== \"undefined\")\n setLocation(prev)\n break\n\n /* Go to next page */\n case \"n\":\n case \".\":\n const next = getOptionalElement(\"link[rel=next]\")\n if (typeof next !== \"undefined\")\n setLocation(next)\n break\n\n /* Expand navigation, see https://bit.ly/3ZjG5io */\n case \"Enter\":\n const active = getActiveElement()\n if (active instanceof HTMLLabelElement)\n active.click()\n }\n })\n\n/* Set up patches */\npatchEllipsis({ viewport$, document$ })\npatchIndeterminate({ document$, tablet$ })\npatchScrollfix({ document$ })\npatchScrolllock({ viewport$, tablet$ })\n\n/* Set up header and main area observable */\nconst header$ = watchHeader(getComponentElement(\"header\"), { viewport$ })\nconst main$ = document$\n .pipe(\n map(() => getComponentElement(\"main\")),\n switchMap(el => watchMain(el, { viewport$, header$ })),\n shareReplay(1)\n )\n\n/* Set up control component observables */\nconst control$ = merge(\n\n /* Consent */\n ...getComponentElements(\"consent\")\n .map(el => mountConsent(el, { target$ })),\n\n /* Dialog */\n ...getComponentElements(\"dialog\")\n .map(el => mountDialog(el, { alert$ })),\n\n /* Color palette */\n ...getComponentElements(\"palette\")\n .map(el => mountPalette(el)),\n\n /* Progress bar */\n ...getComponentElements(\"progress\")\n .map(el => mountProgress(el, { progress$ })),\n\n /* Search */\n ...getComponentElements(\"search\")\n .map(el => mountSearch(el, { index$, keyboard$ })),\n\n /* Repository information */\n ...getComponentElements(\"source\")\n .map(el => mountSource(el))\n)\n\n/* Set up content component observables */\nconst content$ = defer(() => merge(\n\n /* Announcement bar */\n ...getComponentElements(\"announce\")\n .map(el => mountAnnounce(el)),\n\n /* Content */\n ...getComponentElements(\"content\")\n .map(el => mountContent(el, { viewport$, target$, print$ })),\n\n /* Search highlighting */\n ...getComponentElements(\"content\")\n .map(el => feature(\"search.highlight\")\n ? mountSearchHiglight(el, { index$, location$ })\n : EMPTY\n ),\n\n /* Header */\n ...getComponentElements(\"header\")\n .map(el => mountHeader(el, { viewport$, header$, main$ })),\n\n /* Header title */\n ...getComponentElements(\"header-title\")\n .map(el => mountHeaderTitle(el, { viewport$, header$ })),\n\n /* Sidebar */\n ...getComponentElements(\"sidebar\")\n .map(el => el.getAttribute(\"data-md-type\") === \"navigation\"\n ? at(screen$, () => mountSidebar(el, { viewport$, header$, main$ }))\n : at(tablet$, () => mountSidebar(el, { viewport$, header$, main$ }))\n ),\n\n /* Navigation tabs */\n ...getComponentElements(\"tabs\")\n .map(el => mountTabs(el, { viewport$, header$ })),\n\n /* Table of contents */\n ...getComponentElements(\"toc\")\n .map(el => mountTableOfContents(el, {\n viewport$, header$, main$, target$\n })),\n\n /* Back-to-top button */\n ...getComponentElements(\"top\")\n .map(el => mountBackToTop(el, { viewport$, header$, main$, target$ }))\n))\n\n/* Set up component observables */\nconst component$ = document$\n .pipe(\n switchMap(() => content$),\n mergeWith(control$),\n shareReplay(1)\n )\n\n/* Subscribe to all components */\ncomponent$.subscribe()\n\n/* ----------------------------------------------------------------------------\n * Exports\n * ------------------------------------------------------------------------- */\n\nwindow.document$ = document$ /* Document observable */\nwindow.location$ = location$ /* Location subject */\nwindow.target$ = target$ /* Location target observable */\nwindow.keyboard$ = keyboard$ /* Keyboard observable */\nwindow.viewport$ = viewport$ /* Viewport observable */\nwindow.tablet$ = tablet$ /* Media tablet observable */\nwindow.screen$ = screen$ /* Media screen observable */\nwindow.print$ = print$ /* Media print observable */\nwindow.alert$ = alert$ /* Alert subject */\nwindow.progress$ = progress$ /* Progress indicator subject */\nwindow.component$ = component$ /* Component observable */\n", "/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n var r, s = 0;\n function next() {\n while (r = env.stack.pop()) {\n try {\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\n if (r.dispose) {\n var result = r.dispose.call(r.value);\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n else s |= 1;\n }\n catch (e) {\n fail(e);\n }\n }\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n};\n", "/**\n * Returns true if the object is a function.\n * @param value The value to check\n */\nexport function isFunction(value: any): value is (...args: any[]) => any {\n return typeof value === 'function';\n}\n", "/**\n * Used to create Error subclasses until the community moves away from ES5.\n *\n * This is because compiling from TypeScript down to ES5 has issues with subclassing Errors\n * as well as other built-in types: https://github.com/Microsoft/TypeScript/issues/12123\n *\n * @param createImpl A factory function to create the actual constructor implementation. The returned\n * function should be a named function that calls `_super` internally.\n */\nexport function createErrorClass(createImpl: (_super: any) => any): T {\n const _super = (instance: any) => {\n Error.call(instance);\n instance.stack = new Error().stack;\n };\n\n const ctorFunc = createImpl(_super);\n ctorFunc.prototype = Object.create(Error.prototype);\n ctorFunc.prototype.constructor = ctorFunc;\n return ctorFunc;\n}\n", "import { createErrorClass } from './createErrorClass';\n\nexport interface UnsubscriptionError extends Error {\n readonly errors: any[];\n}\n\nexport interface UnsubscriptionErrorCtor {\n /**\n * @deprecated Internal implementation detail. Do not construct error instances.\n * Cannot be tagged as internal: https://github.com/ReactiveX/rxjs/issues/6269\n */\n new (errors: any[]): UnsubscriptionError;\n}\n\n/**\n * An error thrown when one or more errors have occurred during the\n * `unsubscribe` of a {@link Subscription}.\n */\nexport const UnsubscriptionError: UnsubscriptionErrorCtor = createErrorClass(\n (_super) =>\n function UnsubscriptionErrorImpl(this: any, errors: (Error | string)[]) {\n _super(this);\n this.message = errors\n ? `${errors.length} errors occurred during unsubscription:\n${errors.map((err, i) => `${i + 1}) ${err.toString()}`).join('\\n ')}`\n : '';\n this.name = 'UnsubscriptionError';\n this.errors = errors;\n }\n);\n", "/**\n * Removes an item from an array, mutating it.\n * @param arr The array to remove the item from\n * @param item The item to remove\n */\nexport function arrRemove(arr: T[] | undefined | null, item: T) {\n if (arr) {\n const index = arr.indexOf(item);\n 0 <= index && arr.splice(index, 1);\n }\n}\n", "import { isFunction } from './util/isFunction';\nimport { UnsubscriptionError } from './util/UnsubscriptionError';\nimport { SubscriptionLike, TeardownLogic, Unsubscribable } from './types';\nimport { arrRemove } from './util/arrRemove';\n\n/**\n * Represents a disposable resource, such as the execution of an Observable. A\n * Subscription has one important method, `unsubscribe`, that takes no argument\n * and just disposes the resource held by the subscription.\n *\n * Additionally, subscriptions may be grouped together through the `add()`\n * method, which will attach a child Subscription to the current Subscription.\n * When a Subscription is unsubscribed, all its children (and its grandchildren)\n * will be unsubscribed as well.\n */\nexport class Subscription implements SubscriptionLike {\n public static EMPTY = (() => {\n const empty = new Subscription();\n empty.closed = true;\n return empty;\n })();\n\n /**\n * A flag to indicate whether this Subscription has already been unsubscribed.\n */\n public closed = false;\n\n private _parentage: Subscription[] | Subscription | null = null;\n\n /**\n * The list of registered finalizers to execute upon unsubscription. Adding and removing from this\n * list occurs in the {@link #add} and {@link #remove} methods.\n */\n private _finalizers: Exclude[] | null = null;\n\n /**\n * @param initialTeardown A function executed first as part of the finalization\n * process that is kicked off when {@link #unsubscribe} is called.\n */\n constructor(private initialTeardown?: () => void) {}\n\n /**\n * Disposes the resources held by the subscription. May, for instance, cancel\n * an ongoing Observable execution or cancel any other type of work that\n * started when the Subscription was created.\n */\n unsubscribe(): void {\n let errors: any[] | undefined;\n\n if (!this.closed) {\n this.closed = true;\n\n // Remove this from it's parents.\n const { _parentage } = this;\n if (_parentage) {\n this._parentage = null;\n if (Array.isArray(_parentage)) {\n for (const parent of _parentage) {\n parent.remove(this);\n }\n } else {\n _parentage.remove(this);\n }\n }\n\n const { initialTeardown: initialFinalizer } = this;\n if (isFunction(initialFinalizer)) {\n try {\n initialFinalizer();\n } catch (e) {\n errors = e instanceof UnsubscriptionError ? e.errors : [e];\n }\n }\n\n const { _finalizers } = this;\n if (_finalizers) {\n this._finalizers = null;\n for (const finalizer of _finalizers) {\n try {\n execFinalizer(finalizer);\n } catch (err) {\n errors = errors ?? [];\n if (err instanceof UnsubscriptionError) {\n errors = [...errors, ...err.errors];\n } else {\n errors.push(err);\n }\n }\n }\n }\n\n if (errors) {\n throw new UnsubscriptionError(errors);\n }\n }\n }\n\n /**\n * Adds a finalizer to this subscription, so that finalization will be unsubscribed/called\n * when this subscription is unsubscribed. If this subscription is already {@link #closed},\n * because it has already been unsubscribed, then whatever finalizer is passed to it\n * will automatically be executed (unless the finalizer itself is also a closed subscription).\n *\n * Closed Subscriptions cannot be added as finalizers to any subscription. Adding a closed\n * subscription to a any subscription will result in no operation. (A noop).\n *\n * Adding a subscription to itself, or adding `null` or `undefined` will not perform any\n * operation at all. (A noop).\n *\n * `Subscription` instances that are added to this instance will automatically remove themselves\n * if they are unsubscribed. Functions and {@link Unsubscribable} objects that you wish to remove\n * will need to be removed manually with {@link #remove}\n *\n * @param teardown The finalization logic to add to this subscription.\n */\n add(teardown: TeardownLogic): void {\n // Only add the finalizer if it's not undefined\n // and don't add a subscription to itself.\n if (teardown && teardown !== this) {\n if (this.closed) {\n // If this subscription is already closed,\n // execute whatever finalizer is handed to it automatically.\n execFinalizer(teardown);\n } else {\n if (teardown instanceof Subscription) {\n // We don't add closed subscriptions, and we don't add the same subscription\n // twice. Subscription unsubscribe is idempotent.\n if (teardown.closed || teardown._hasParent(this)) {\n return;\n }\n teardown._addParent(this);\n }\n (this._finalizers = this._finalizers ?? []).push(teardown);\n }\n }\n }\n\n /**\n * Checks to see if a this subscription already has a particular parent.\n * This will signal that this subscription has already been added to the parent in question.\n * @param parent the parent to check for\n */\n private _hasParent(parent: Subscription) {\n const { _parentage } = this;\n return _parentage === parent || (Array.isArray(_parentage) && _parentage.includes(parent));\n }\n\n /**\n * Adds a parent to this subscription so it can be removed from the parent if it\n * unsubscribes on it's own.\n *\n * NOTE: THIS ASSUMES THAT {@link _hasParent} HAS ALREADY BEEN CHECKED.\n * @param parent The parent subscription to add\n */\n private _addParent(parent: Subscription) {\n const { _parentage } = this;\n this._parentage = Array.isArray(_parentage) ? (_parentage.push(parent), _parentage) : _parentage ? [_parentage, parent] : parent;\n }\n\n /**\n * Called on a child when it is removed via {@link #remove}.\n * @param parent The parent to remove\n */\n private _removeParent(parent: Subscription) {\n const { _parentage } = this;\n if (_parentage === parent) {\n this._parentage = null;\n } else if (Array.isArray(_parentage)) {\n arrRemove(_parentage, parent);\n }\n }\n\n /**\n * Removes a finalizer from this subscription that was previously added with the {@link #add} method.\n *\n * Note that `Subscription` instances, when unsubscribed, will automatically remove themselves\n * from every other `Subscription` they have been added to. This means that using the `remove` method\n * is not a common thing and should be used thoughtfully.\n *\n * If you add the same finalizer instance of a function or an unsubscribable object to a `Subscription` instance\n * more than once, you will need to call `remove` the same number of times to remove all instances.\n *\n * All finalizer instances are removed to free up memory upon unsubscription.\n *\n * @param teardown The finalizer to remove from this subscription\n */\n remove(teardown: Exclude): void {\n const { _finalizers } = this;\n _finalizers && arrRemove(_finalizers, teardown);\n\n if (teardown instanceof Subscription) {\n teardown._removeParent(this);\n }\n }\n}\n\nexport const EMPTY_SUBSCRIPTION = Subscription.EMPTY;\n\nexport function isSubscription(value: any): value is Subscription {\n return (\n value instanceof Subscription ||\n (value && 'closed' in value && isFunction(value.remove) && isFunction(value.add) && isFunction(value.unsubscribe))\n );\n}\n\nfunction execFinalizer(finalizer: Unsubscribable | (() => void)) {\n if (isFunction(finalizer)) {\n finalizer();\n } else {\n finalizer.unsubscribe();\n }\n}\n", "import { Subscriber } from './Subscriber';\nimport { ObservableNotification } from './types';\n\n/**\n * The {@link GlobalConfig} object for RxJS. It is used to configure things\n * like how to react on unhandled errors.\n */\nexport const config: GlobalConfig = {\n onUnhandledError: null,\n onStoppedNotification: null,\n Promise: undefined,\n useDeprecatedSynchronousErrorHandling: false,\n useDeprecatedNextContext: false,\n};\n\n/**\n * The global configuration object for RxJS, used to configure things\n * like how to react on unhandled errors. Accessible via {@link config}\n * object.\n */\nexport interface GlobalConfig {\n /**\n * A registration point for unhandled errors from RxJS. These are errors that\n * cannot were not handled by consuming code in the usual subscription path. For\n * example, if you have this configured, and you subscribe to an observable without\n * providing an error handler, errors from that subscription will end up here. This\n * will _always_ be called asynchronously on another job in the runtime. This is because\n * we do not want errors thrown in this user-configured handler to interfere with the\n * behavior of the library.\n */\n onUnhandledError: ((err: any) => void) | null;\n\n /**\n * A registration point for notifications that cannot be sent to subscribers because they\n * have completed, errored or have been explicitly unsubscribed. By default, next, complete\n * and error notifications sent to stopped subscribers are noops. However, sometimes callers\n * might want a different behavior. For example, with sources that attempt to report errors\n * to stopped subscribers, a caller can configure RxJS to throw an unhandled error instead.\n * This will _always_ be called asynchronously on another job in the runtime. This is because\n * we do not want errors thrown in this user-configured handler to interfere with the\n * behavior of the library.\n */\n onStoppedNotification: ((notification: ObservableNotification, subscriber: Subscriber) => void) | null;\n\n /**\n * The promise constructor used by default for {@link Observable#toPromise toPromise} and {@link Observable#forEach forEach}\n * methods.\n *\n * @deprecated As of version 8, RxJS will no longer support this sort of injection of a\n * Promise constructor. If you need a Promise implementation other than native promises,\n * please polyfill/patch Promise as you see appropriate. Will be removed in v8.\n */\n Promise?: PromiseConstructorLike;\n\n /**\n * If true, turns on synchronous error rethrowing, which is a deprecated behavior\n * in v6 and higher. This behavior enables bad patterns like wrapping a subscribe\n * call in a try/catch block. It also enables producer interference, a nasty bug\n * where a multicast can be broken for all observers by a downstream consumer with\n * an unhandled error. DO NOT USE THIS FLAG UNLESS IT'S NEEDED TO BUY TIME\n * FOR MIGRATION REASONS.\n *\n * @deprecated As of version 8, RxJS will no longer support synchronous throwing\n * of unhandled errors. All errors will be thrown on a separate call stack to prevent bad\n * behaviors described above. Will be removed in v8.\n */\n useDeprecatedSynchronousErrorHandling: boolean;\n\n /**\n * If true, enables an as-of-yet undocumented feature from v5: The ability to access\n * `unsubscribe()` via `this` context in `next` functions created in observers passed\n * to `subscribe`.\n *\n * This is being removed because the performance was severely problematic, and it could also cause\n * issues when types other than POJOs are passed to subscribe as subscribers, as they will likely have\n * their `this` context overwritten.\n *\n * @deprecated As of version 8, RxJS will no longer support altering the\n * context of next functions provided as part of an observer to Subscribe. Instead,\n * you will have access to a subscription or a signal or token that will allow you to do things like\n * unsubscribe and test closed status. Will be removed in v8.\n */\n useDeprecatedNextContext: boolean;\n}\n", "import type { TimerHandle } from './timerHandle';\ntype SetTimeoutFunction = (handler: () => void, timeout?: number, ...args: any[]) => TimerHandle;\ntype ClearTimeoutFunction = (handle: TimerHandle) => void;\n\ninterface TimeoutProvider {\n setTimeout: SetTimeoutFunction;\n clearTimeout: ClearTimeoutFunction;\n delegate:\n | {\n setTimeout: SetTimeoutFunction;\n clearTimeout: ClearTimeoutFunction;\n }\n | undefined;\n}\n\nexport const timeoutProvider: TimeoutProvider = {\n // When accessing the delegate, use the variable rather than `this` so that\n // the functions can be called without being bound to the provider.\n setTimeout(handler: () => void, timeout?: number, ...args) {\n const { delegate } = timeoutProvider;\n if (delegate?.setTimeout) {\n return delegate.setTimeout(handler, timeout, ...args);\n }\n return setTimeout(handler, timeout, ...args);\n },\n clearTimeout(handle) {\n const { delegate } = timeoutProvider;\n return (delegate?.clearTimeout || clearTimeout)(handle as any);\n },\n delegate: undefined,\n};\n", "import { config } from '../config';\nimport { timeoutProvider } from '../scheduler/timeoutProvider';\n\n/**\n * Handles an error on another job either with the user-configured {@link onUnhandledError},\n * or by throwing it on that new job so it can be picked up by `window.onerror`, `process.on('error')`, etc.\n *\n * This should be called whenever there is an error that is out-of-band with the subscription\n * or when an error hits a terminal boundary of the subscription and no error handler was provided.\n *\n * @param err the error to report\n */\nexport function reportUnhandledError(err: any) {\n timeoutProvider.setTimeout(() => {\n const { onUnhandledError } = config;\n if (onUnhandledError) {\n // Execute the user-configured error handler.\n onUnhandledError(err);\n } else {\n // Throw so it is picked up by the runtime's uncaught error mechanism.\n throw err;\n }\n });\n}\n", "/* tslint:disable:no-empty */\nexport function noop() { }\n", "import { CompleteNotification, NextNotification, ErrorNotification } from './types';\n\n/**\n * A completion object optimized for memory use and created to be the\n * same \"shape\" as other notifications in v8.\n * @internal\n */\nexport const COMPLETE_NOTIFICATION = (() => createNotification('C', undefined, undefined) as CompleteNotification)();\n\n/**\n * Internal use only. Creates an optimized error notification that is the same \"shape\"\n * as other notifications.\n * @internal\n */\nexport function errorNotification(error: any): ErrorNotification {\n return createNotification('E', undefined, error) as any;\n}\n\n/**\n * Internal use only. Creates an optimized next notification that is the same \"shape\"\n * as other notifications.\n * @internal\n */\nexport function nextNotification(value: T) {\n return createNotification('N', value, undefined) as NextNotification;\n}\n\n/**\n * Ensures that all notifications created internally have the same \"shape\" in v8.\n *\n * TODO: This is only exported to support a crazy legacy test in `groupBy`.\n * @internal\n */\nexport function createNotification(kind: 'N' | 'E' | 'C', value: any, error: any) {\n return {\n kind,\n value,\n error,\n };\n}\n", "import { config } from '../config';\n\nlet context: { errorThrown: boolean; error: any } | null = null;\n\n/**\n * Handles dealing with errors for super-gross mode. Creates a context, in which\n * any synchronously thrown errors will be passed to {@link captureError}. Which\n * will record the error such that it will be rethrown after the call back is complete.\n * TODO: Remove in v8\n * @param cb An immediately executed function.\n */\nexport function errorContext(cb: () => void) {\n if (config.useDeprecatedSynchronousErrorHandling) {\n const isRoot = !context;\n if (isRoot) {\n context = { errorThrown: false, error: null };\n }\n cb();\n if (isRoot) {\n const { errorThrown, error } = context!;\n context = null;\n if (errorThrown) {\n throw error;\n }\n }\n } else {\n // This is the general non-deprecated path for everyone that\n // isn't crazy enough to use super-gross mode (useDeprecatedSynchronousErrorHandling)\n cb();\n }\n}\n\n/**\n * Captures errors only in super-gross mode.\n * @param err the error to capture\n */\nexport function captureError(err: any) {\n if (config.useDeprecatedSynchronousErrorHandling && context) {\n context.errorThrown = true;\n context.error = err;\n }\n}\n", "import { isFunction } from './util/isFunction';\nimport { Observer, ObservableNotification } from './types';\nimport { isSubscription, Subscription } from './Subscription';\nimport { config } from './config';\nimport { reportUnhandledError } from './util/reportUnhandledError';\nimport { noop } from './util/noop';\nimport { nextNotification, errorNotification, COMPLETE_NOTIFICATION } from './NotificationFactories';\nimport { timeoutProvider } from './scheduler/timeoutProvider';\nimport { captureError } from './util/errorContext';\n\n/**\n * Implements the {@link Observer} interface and extends the\n * {@link Subscription} class. While the {@link Observer} is the public API for\n * consuming the values of an {@link Observable}, all Observers get converted to\n * a Subscriber, in order to provide Subscription-like capabilities such as\n * `unsubscribe`. Subscriber is a common type in RxJS, and crucial for\n * implementing operators, but it is rarely used as a public API.\n */\nexport class Subscriber extends Subscription implements Observer {\n /**\n * A static factory for a Subscriber, given a (potentially partial) definition\n * of an Observer.\n * @param next The `next` callback of an Observer.\n * @param error The `error` callback of an\n * Observer.\n * @param complete The `complete` callback of an\n * Observer.\n * @return A Subscriber wrapping the (partially defined)\n * Observer represented by the given arguments.\n * @deprecated Do not use. Will be removed in v8. There is no replacement for this\n * method, and there is no reason to be creating instances of `Subscriber` directly.\n * If you have a specific use case, please file an issue.\n */\n static create(next?: (x?: T) => void, error?: (e?: any) => void, complete?: () => void): Subscriber {\n return new SafeSubscriber(next, error, complete);\n }\n\n /** @deprecated Internal implementation detail, do not use directly. Will be made internal in v8. */\n protected isStopped: boolean = false;\n /** @deprecated Internal implementation detail, do not use directly. Will be made internal in v8. */\n protected destination: Subscriber | Observer; // this `any` is the escape hatch to erase extra type param (e.g. R)\n\n /**\n * @deprecated Internal implementation detail, do not use directly. Will be made internal in v8.\n * There is no reason to directly create an instance of Subscriber. This type is exported for typings reasons.\n */\n constructor(destination?: Subscriber | Observer) {\n super();\n if (destination) {\n this.destination = destination;\n // Automatically chain subscriptions together here.\n // if destination is a Subscription, then it is a Subscriber.\n if (isSubscription(destination)) {\n destination.add(this);\n }\n } else {\n this.destination = EMPTY_OBSERVER;\n }\n }\n\n /**\n * The {@link Observer} callback to receive notifications of type `next` from\n * the Observable, with a value. The Observable may call this method 0 or more\n * times.\n * @param value The `next` value.\n */\n next(value: T): void {\n if (this.isStopped) {\n handleStoppedNotification(nextNotification(value), this);\n } else {\n this._next(value!);\n }\n }\n\n /**\n * The {@link Observer} callback to receive notifications of type `error` from\n * the Observable, with an attached `Error`. Notifies the Observer that\n * the Observable has experienced an error condition.\n * @param err The `error` exception.\n */\n error(err?: any): void {\n if (this.isStopped) {\n handleStoppedNotification(errorNotification(err), this);\n } else {\n this.isStopped = true;\n this._error(err);\n }\n }\n\n /**\n * The {@link Observer} callback to receive a valueless notification of type\n * `complete` from the Observable. Notifies the Observer that the Observable\n * has finished sending push-based notifications.\n */\n complete(): void {\n if (this.isStopped) {\n handleStoppedNotification(COMPLETE_NOTIFICATION, this);\n } else {\n this.isStopped = true;\n this._complete();\n }\n }\n\n unsubscribe(): void {\n if (!this.closed) {\n this.isStopped = true;\n super.unsubscribe();\n this.destination = null!;\n }\n }\n\n protected _next(value: T): void {\n this.destination.next(value);\n }\n\n protected _error(err: any): void {\n try {\n this.destination.error(err);\n } finally {\n this.unsubscribe();\n }\n }\n\n protected _complete(): void {\n try {\n this.destination.complete();\n } finally {\n this.unsubscribe();\n }\n }\n}\n\n/**\n * This bind is captured here because we want to be able to have\n * compatibility with monoid libraries that tend to use a method named\n * `bind`. In particular, a library called Monio requires this.\n */\nconst _bind = Function.prototype.bind;\n\nfunction bind any>(fn: Fn, thisArg: any): Fn {\n return _bind.call(fn, thisArg);\n}\n\n/**\n * Internal optimization only, DO NOT EXPOSE.\n * @internal\n */\nclass ConsumerObserver implements Observer {\n constructor(private partialObserver: Partial>) {}\n\n next(value: T): void {\n const { partialObserver } = this;\n if (partialObserver.next) {\n try {\n partialObserver.next(value);\n } catch (error) {\n handleUnhandledError(error);\n }\n }\n }\n\n error(err: any): void {\n const { partialObserver } = this;\n if (partialObserver.error) {\n try {\n partialObserver.error(err);\n } catch (error) {\n handleUnhandledError(error);\n }\n } else {\n handleUnhandledError(err);\n }\n }\n\n complete(): void {\n const { partialObserver } = this;\n if (partialObserver.complete) {\n try {\n partialObserver.complete();\n } catch (error) {\n handleUnhandledError(error);\n }\n }\n }\n}\n\nexport class SafeSubscriber extends Subscriber {\n constructor(\n observerOrNext?: Partial> | ((value: T) => void) | null,\n error?: ((e?: any) => void) | null,\n complete?: (() => void) | null\n ) {\n super();\n\n let partialObserver: Partial>;\n if (isFunction(observerOrNext) || !observerOrNext) {\n // The first argument is a function, not an observer. The next\n // two arguments *could* be observers, or they could be empty.\n partialObserver = {\n next: (observerOrNext ?? undefined) as ((value: T) => void) | undefined,\n error: error ?? undefined,\n complete: complete ?? undefined,\n };\n } else {\n // The first argument is a partial observer.\n let context: any;\n if (this && config.useDeprecatedNextContext) {\n // This is a deprecated path that made `this.unsubscribe()` available in\n // next handler functions passed to subscribe. This only exists behind a flag\n // now, as it is *very* slow.\n context = Object.create(observerOrNext);\n context.unsubscribe = () => this.unsubscribe();\n partialObserver = {\n next: observerOrNext.next && bind(observerOrNext.next, context),\n error: observerOrNext.error && bind(observerOrNext.error, context),\n complete: observerOrNext.complete && bind(observerOrNext.complete, context),\n };\n } else {\n // The \"normal\" path. Just use the partial observer directly.\n partialObserver = observerOrNext;\n }\n }\n\n // Wrap the partial observer to ensure it's a full observer, and\n // make sure proper error handling is accounted for.\n this.destination = new ConsumerObserver(partialObserver);\n }\n}\n\nfunction handleUnhandledError(error: any) {\n if (config.useDeprecatedSynchronousErrorHandling) {\n captureError(error);\n } else {\n // Ideal path, we report this as an unhandled error,\n // which is thrown on a new call stack.\n reportUnhandledError(error);\n }\n}\n\n/**\n * An error handler used when no error handler was supplied\n * to the SafeSubscriber -- meaning no error handler was supplied\n * do the `subscribe` call on our observable.\n * @param err The error to handle\n */\nfunction defaultErrorHandler(err: any) {\n throw err;\n}\n\n/**\n * A handler for notifications that cannot be sent to a stopped subscriber.\n * @param notification The notification being sent.\n * @param subscriber The stopped subscriber.\n */\nfunction handleStoppedNotification(notification: ObservableNotification, subscriber: Subscriber) {\n const { onStoppedNotification } = config;\n onStoppedNotification && timeoutProvider.setTimeout(() => onStoppedNotification(notification, subscriber));\n}\n\n/**\n * The observer used as a stub for subscriptions where the user did not\n * pass any arguments to `subscribe`. Comes with the default error handling\n * behavior.\n */\nexport const EMPTY_OBSERVER: Readonly> & { closed: true } = {\n closed: true,\n next: noop,\n error: defaultErrorHandler,\n complete: noop,\n};\n", "/**\n * Symbol.observable or a string \"@@observable\". Used for interop\n *\n * @deprecated We will no longer be exporting this symbol in upcoming versions of RxJS.\n * Instead polyfill and use Symbol.observable directly *or* use https://www.npmjs.com/package/symbol-observable\n */\nexport const observable: string | symbol = (() => (typeof Symbol === 'function' && Symbol.observable) || '@@observable')();\n", "/**\n * This function takes one parameter and just returns it. Simply put,\n * this is like `(x: T): T => x`.\n *\n * ## Examples\n *\n * This is useful in some cases when using things like `mergeMap`\n *\n * ```ts\n * import { interval, take, map, range, mergeMap, identity } from 'rxjs';\n *\n * const source$ = interval(1000).pipe(take(5));\n *\n * const result$ = source$.pipe(\n * map(i => range(i)),\n * mergeMap(identity) // same as mergeMap(x => x)\n * );\n *\n * result$.subscribe({\n * next: console.log\n * });\n * ```\n *\n * Or when you want to selectively apply an operator\n *\n * ```ts\n * import { interval, take, identity } from 'rxjs';\n *\n * const shouldLimit = () => Math.random() < 0.5;\n *\n * const source$ = interval(1000);\n *\n * const result$ = source$.pipe(shouldLimit() ? take(5) : identity);\n *\n * result$.subscribe({\n * next: console.log\n * });\n * ```\n *\n * @param x Any value that is returned by this function\n * @returns The value passed as the first parameter to this function\n */\nexport function identity(x: T): T {\n return x;\n}\n", "import { identity } from './identity';\nimport { UnaryFunction } from '../types';\n\nexport function pipe(): typeof identity;\nexport function pipe(fn1: UnaryFunction): UnaryFunction;\nexport function pipe(fn1: UnaryFunction, fn2: UnaryFunction): UnaryFunction;\nexport function pipe(fn1: UnaryFunction, fn2: UnaryFunction, fn3: UnaryFunction): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction\n): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction,\n fn5: UnaryFunction\n): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction,\n fn5: UnaryFunction,\n fn6: UnaryFunction\n): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction,\n fn5: UnaryFunction,\n fn6: UnaryFunction,\n fn7: UnaryFunction\n): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction,\n fn5: UnaryFunction,\n fn6: UnaryFunction,\n fn7: UnaryFunction,\n fn8: UnaryFunction\n): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction,\n fn5: UnaryFunction,\n fn6: UnaryFunction,\n fn7: UnaryFunction,\n fn8: UnaryFunction,\n fn9: UnaryFunction\n): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction,\n fn5: UnaryFunction,\n fn6: UnaryFunction,\n fn7: UnaryFunction,\n fn8: UnaryFunction,\n fn9: UnaryFunction,\n ...fns: UnaryFunction[]\n): UnaryFunction;\n\n/**\n * pipe() can be called on one or more functions, each of which can take one argument (\"UnaryFunction\")\n * and uses it to return a value.\n * It returns a function that takes one argument, passes it to the first UnaryFunction, and then\n * passes the result to the next one, passes that result to the next one, and so on. \n */\nexport function pipe(...fns: Array>): UnaryFunction {\n return pipeFromArray(fns);\n}\n\n/** @internal */\nexport function pipeFromArray(fns: Array>): UnaryFunction {\n if (fns.length === 0) {\n return identity as UnaryFunction;\n }\n\n if (fns.length === 1) {\n return fns[0];\n }\n\n return function piped(input: T): R {\n return fns.reduce((prev: any, fn: UnaryFunction) => fn(prev), input as any);\n };\n}\n", "import { Operator } from './Operator';\nimport { SafeSubscriber, Subscriber } from './Subscriber';\nimport { isSubscription, Subscription } from './Subscription';\nimport { TeardownLogic, OperatorFunction, Subscribable, Observer } from './types';\nimport { observable as Symbol_observable } from './symbol/observable';\nimport { pipeFromArray } from './util/pipe';\nimport { config } from './config';\nimport { isFunction } from './util/isFunction';\nimport { errorContext } from './util/errorContext';\n\n/**\n * A representation of any set of values over any amount of time. This is the most basic building block\n * of RxJS.\n */\nexport class Observable implements Subscribable {\n /**\n * @deprecated Internal implementation detail, do not use directly. Will be made internal in v8.\n */\n source: Observable | undefined;\n\n /**\n * @deprecated Internal implementation detail, do not use directly. Will be made internal in v8.\n */\n operator: Operator | undefined;\n\n /**\n * @param subscribe The function that is called when the Observable is\n * initially subscribed to. This function is given a Subscriber, to which new values\n * can be `next`ed, or an `error` method can be called to raise an error, or\n * `complete` can be called to notify of a successful completion.\n */\n constructor(subscribe?: (this: Observable, subscriber: Subscriber) => TeardownLogic) {\n if (subscribe) {\n this._subscribe = subscribe;\n }\n }\n\n // HACK: Since TypeScript inherits static properties too, we have to\n // fight against TypeScript here so Subject can have a different static create signature\n /**\n * Creates a new Observable by calling the Observable constructor\n * @param subscribe the subscriber function to be passed to the Observable constructor\n * @return A new observable.\n * @deprecated Use `new Observable()` instead. Will be removed in v8.\n */\n static create: (...args: any[]) => any = (subscribe?: (subscriber: Subscriber) => TeardownLogic) => {\n return new Observable(subscribe);\n };\n\n /**\n * Creates a new Observable, with this Observable instance as the source, and the passed\n * operator defined as the new observable's operator.\n * @param operator the operator defining the operation to take on the observable\n * @return A new observable with the Operator applied.\n * @deprecated Internal implementation detail, do not use directly. Will be made internal in v8.\n * If you have implemented an operator using `lift`, it is recommended that you create an\n * operator by simply returning `new Observable()` directly. See \"Creating new operators from\n * scratch\" section here: https://rxjs.dev/guide/operators\n */\n lift(operator?: Operator): Observable {\n const observable = new Observable();\n observable.source = this;\n observable.operator = operator;\n return observable;\n }\n\n subscribe(observerOrNext?: Partial> | ((value: T) => void)): Subscription;\n /** @deprecated Instead of passing separate callback arguments, use an observer argument. Signatures taking separate callback arguments will be removed in v8. Details: https://rxjs.dev/deprecations/subscribe-arguments */\n subscribe(next?: ((value: T) => void) | null, error?: ((error: any) => void) | null, complete?: (() => void) | null): Subscription;\n /**\n * Invokes an execution of an Observable and registers Observer handlers for notifications it will emit.\n *\n * Use it when you have all these Observables, but still nothing is happening. \n *\n * `subscribe` is not a regular operator, but a method that calls Observable's internal `subscribe` function. It\n * might be for example a function that you passed to Observable's constructor, but most of the time it is\n * a library implementation, which defines what will be emitted by an Observable, and when it be will emitted. This means\n * that calling `subscribe` is actually the moment when Observable starts its work, not when it is created, as it is often\n * the thought.\n *\n * Apart from starting the execution of an Observable, this method allows you to listen for values\n * that an Observable emits, as well as for when it completes or errors. You can achieve this in two\n * of the following ways.\n *\n * The first way is creating an object that implements {@link Observer} interface. It should have methods\n * defined by that interface, but note that it should be just a regular JavaScript object, which you can create\n * yourself in any way you want (ES6 class, classic function constructor, object literal etc.). In particular, do\n * not attempt to use any RxJS implementation details to create Observers - you don't need them. Remember also\n * that your object does not have to implement all methods. If you find yourself creating a method that doesn't\n * do anything, you can simply omit it. Note however, if the `error` method is not provided and an error happens,\n * it will be thrown asynchronously. Errors thrown asynchronously cannot be caught using `try`/`catch`. Instead,\n * use the {@link onUnhandledError} configuration option or use a runtime handler (like `window.onerror` or\n * `process.on('error)`) to be notified of unhandled errors. Because of this, it's recommended that you provide\n * an `error` method to avoid missing thrown errors.\n *\n * The second way is to give up on Observer object altogether and simply provide callback functions in place of its methods.\n * This means you can provide three functions as arguments to `subscribe`, where the first function is equivalent\n * of a `next` method, the second of an `error` method and the third of a `complete` method. Just as in case of an Observer,\n * if you do not need to listen for something, you can omit a function by passing `undefined` or `null`,\n * since `subscribe` recognizes these functions by where they were placed in function call. When it comes\n * to the `error` function, as with an Observer, if not provided, errors emitted by an Observable will be thrown asynchronously.\n *\n * You can, however, subscribe with no parameters at all. This may be the case where you're not interested in terminal events\n * and you also handled emissions internally by using operators (e.g. using `tap`).\n *\n * Whichever style of calling `subscribe` you use, in both cases it returns a Subscription object.\n * This object allows you to call `unsubscribe` on it, which in turn will stop the work that an Observable does and will clean\n * up all resources that an Observable used. Note that cancelling a subscription will not call `complete` callback\n * provided to `subscribe` function, which is reserved for a regular completion signal that comes from an Observable.\n *\n * Remember that callbacks provided to `subscribe` are not guaranteed to be called asynchronously.\n * It is an Observable itself that decides when these functions will be called. For example {@link of}\n * by default emits all its values synchronously. Always check documentation for how given Observable\n * will behave when subscribed and if its default behavior can be modified with a `scheduler`.\n *\n * #### Examples\n *\n * Subscribe with an {@link guide/observer Observer}\n *\n * ```ts\n * import { of } from 'rxjs';\n *\n * const sumObserver = {\n * sum: 0,\n * next(value) {\n * console.log('Adding: ' + value);\n * this.sum = this.sum + value;\n * },\n * error() {\n * // We actually could just remove this method,\n * // since we do not really care about errors right now.\n * },\n * complete() {\n * console.log('Sum equals: ' + this.sum);\n * }\n * };\n *\n * of(1, 2, 3) // Synchronously emits 1, 2, 3 and then completes.\n * .subscribe(sumObserver);\n *\n * // Logs:\n * // 'Adding: 1'\n * // 'Adding: 2'\n * // 'Adding: 3'\n * // 'Sum equals: 6'\n * ```\n *\n * Subscribe with functions ({@link deprecations/subscribe-arguments deprecated})\n *\n * ```ts\n * import { of } from 'rxjs'\n *\n * let sum = 0;\n *\n * of(1, 2, 3).subscribe(\n * value => {\n * console.log('Adding: ' + value);\n * sum = sum + value;\n * },\n * undefined,\n * () => console.log('Sum equals: ' + sum)\n * );\n *\n * // Logs:\n * // 'Adding: 1'\n * // 'Adding: 2'\n * // 'Adding: 3'\n * // 'Sum equals: 6'\n * ```\n *\n * Cancel a subscription\n *\n * ```ts\n * import { interval } from 'rxjs';\n *\n * const subscription = interval(1000).subscribe({\n * next(num) {\n * console.log(num)\n * },\n * complete() {\n * // Will not be called, even when cancelling subscription.\n * console.log('completed!');\n * }\n * });\n *\n * setTimeout(() => {\n * subscription.unsubscribe();\n * console.log('unsubscribed!');\n * }, 2500);\n *\n * // Logs:\n * // 0 after 1s\n * // 1 after 2s\n * // 'unsubscribed!' after 2.5s\n * ```\n *\n * @param observerOrNext Either an {@link Observer} with some or all callback methods,\n * or the `next` handler that is called for each value emitted from the subscribed Observable.\n * @param error A handler for a terminal event resulting from an error. If no error handler is provided,\n * the error will be thrown asynchronously as unhandled.\n * @param complete A handler for a terminal event resulting from successful completion.\n * @return A subscription reference to the registered handlers.\n */\n subscribe(\n observerOrNext?: Partial> | ((value: T) => void) | null,\n error?: ((error: any) => void) | null,\n complete?: (() => void) | null\n ): Subscription {\n const subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);\n\n errorContext(() => {\n const { operator, source } = this;\n subscriber.add(\n operator\n ? // We're dealing with a subscription in the\n // operator chain to one of our lifted operators.\n operator.call(subscriber, source)\n : source\n ? // If `source` has a value, but `operator` does not, something that\n // had intimate knowledge of our API, like our `Subject`, must have\n // set it. We're going to just call `_subscribe` directly.\n this._subscribe(subscriber)\n : // In all other cases, we're likely wrapping a user-provided initializer\n // function, so we need to catch errors and handle them appropriately.\n this._trySubscribe(subscriber)\n );\n });\n\n return subscriber;\n }\n\n /** @internal */\n protected _trySubscribe(sink: Subscriber): TeardownLogic {\n try {\n return this._subscribe(sink);\n } catch (err) {\n // We don't need to return anything in this case,\n // because it's just going to try to `add()` to a subscription\n // above.\n sink.error(err);\n }\n }\n\n /**\n * Used as a NON-CANCELLABLE means of subscribing to an observable, for use with\n * APIs that expect promises, like `async/await`. You cannot unsubscribe from this.\n *\n * **WARNING**: Only use this with observables you *know* will complete. If the source\n * observable does not complete, you will end up with a promise that is hung up, and\n * potentially all of the state of an async function hanging out in memory. To avoid\n * this situation, look into adding something like {@link timeout}, {@link take},\n * {@link takeWhile}, or {@link takeUntil} amongst others.\n *\n * #### Example\n *\n * ```ts\n * import { interval, take } from 'rxjs';\n *\n * const source$ = interval(1000).pipe(take(4));\n *\n * async function getTotal() {\n * let total = 0;\n *\n * await source$.forEach(value => {\n * total += value;\n * console.log('observable -> ' + value);\n * });\n *\n * return total;\n * }\n *\n * getTotal().then(\n * total => console.log('Total: ' + total)\n * );\n *\n * // Expected:\n * // 'observable -> 0'\n * // 'observable -> 1'\n * // 'observable -> 2'\n * // 'observable -> 3'\n * // 'Total: 6'\n * ```\n *\n * @param next A handler for each value emitted by the observable.\n * @return A promise that either resolves on observable completion or\n * rejects with the handled error.\n */\n forEach(next: (value: T) => void): Promise;\n\n /**\n * @param next a handler for each value emitted by the observable\n * @param promiseCtor a constructor function used to instantiate the Promise\n * @return a promise that either resolves on observable completion or\n * rejects with the handled error\n * @deprecated Passing a Promise constructor will no longer be available\n * in upcoming versions of RxJS. This is because it adds weight to the library, for very\n * little benefit. If you need this functionality, it is recommended that you either\n * polyfill Promise, or you create an adapter to convert the returned native promise\n * to whatever promise implementation you wanted. Will be removed in v8.\n */\n forEach(next: (value: T) => void, promiseCtor: PromiseConstructorLike): Promise;\n\n forEach(next: (value: T) => void, promiseCtor?: PromiseConstructorLike): Promise {\n promiseCtor = getPromiseCtor(promiseCtor);\n\n return new promiseCtor((resolve, reject) => {\n const subscriber = new SafeSubscriber({\n next: (value) => {\n try {\n next(value);\n } catch (err) {\n reject(err);\n subscriber.unsubscribe();\n }\n },\n error: reject,\n complete: resolve,\n });\n this.subscribe(subscriber);\n }) as Promise;\n }\n\n /** @internal */\n protected _subscribe(subscriber: Subscriber): TeardownLogic {\n return this.source?.subscribe(subscriber);\n }\n\n /**\n * An interop point defined by the es7-observable spec https://github.com/zenparsing/es-observable\n * @return This instance of the observable.\n */\n [Symbol_observable]() {\n return this;\n }\n\n /* tslint:disable:max-line-length */\n pipe(): Observable;\n pipe(op1: OperatorFunction): Observable;\n pipe(op1: OperatorFunction, op2: OperatorFunction): Observable;\n pipe(op1: OperatorFunction, op2: OperatorFunction, op3: OperatorFunction): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction\n ): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction,\n op5: OperatorFunction\n ): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction,\n op5: OperatorFunction,\n op6: OperatorFunction\n ): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction,\n op5: OperatorFunction,\n op6: OperatorFunction,\n op7: OperatorFunction\n ): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction,\n op5: OperatorFunction,\n op6: OperatorFunction,\n op7: OperatorFunction,\n op8: OperatorFunction\n ): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction,\n op5: OperatorFunction,\n op6: OperatorFunction,\n op7: OperatorFunction,\n op8: OperatorFunction,\n op9: OperatorFunction\n ): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction,\n op5: OperatorFunction,\n op6: OperatorFunction,\n op7: OperatorFunction,\n op8: OperatorFunction,\n op9: OperatorFunction,\n ...operations: OperatorFunction[]\n ): Observable;\n /* tslint:enable:max-line-length */\n\n /**\n * Used to stitch together functional operators into a chain.\n *\n * ## Example\n *\n * ```ts\n * import { interval, filter, map, scan } from 'rxjs';\n *\n * interval(1000)\n * .pipe(\n * filter(x => x % 2 === 0),\n * map(x => x + x),\n * scan((acc, x) => acc + x)\n * )\n * .subscribe(x => console.log(x));\n * ```\n *\n * @return The Observable result of all the operators having been called\n * in the order they were passed in.\n */\n pipe(...operations: OperatorFunction[]): Observable {\n return pipeFromArray(operations)(this);\n }\n\n /* tslint:disable:max-line-length */\n /** @deprecated Replaced with {@link firstValueFrom} and {@link lastValueFrom}. Will be removed in v8. Details: https://rxjs.dev/deprecations/to-promise */\n toPromise(): Promise;\n /** @deprecated Replaced with {@link firstValueFrom} and {@link lastValueFrom}. Will be removed in v8. Details: https://rxjs.dev/deprecations/to-promise */\n toPromise(PromiseCtor: typeof Promise): Promise;\n /** @deprecated Replaced with {@link firstValueFrom} and {@link lastValueFrom}. Will be removed in v8. Details: https://rxjs.dev/deprecations/to-promise */\n toPromise(PromiseCtor: PromiseConstructorLike): Promise;\n /* tslint:enable:max-line-length */\n\n /**\n * Subscribe to this Observable and get a Promise resolving on\n * `complete` with the last emission (if any).\n *\n * **WARNING**: Only use this with observables you *know* will complete. If the source\n * observable does not complete, you will end up with a promise that is hung up, and\n * potentially all of the state of an async function hanging out in memory. To avoid\n * this situation, look into adding something like {@link timeout}, {@link take},\n * {@link takeWhile}, or {@link takeUntil} amongst others.\n *\n * @param [promiseCtor] a constructor function used to instantiate\n * the Promise\n * @return A Promise that resolves with the last value emit, or\n * rejects on an error. If there were no emissions, Promise\n * resolves with undefined.\n * @deprecated Replaced with {@link firstValueFrom} and {@link lastValueFrom}. Will be removed in v8. Details: https://rxjs.dev/deprecations/to-promise\n */\n toPromise(promiseCtor?: PromiseConstructorLike): Promise {\n promiseCtor = getPromiseCtor(promiseCtor);\n\n return new promiseCtor((resolve, reject) => {\n let value: T | undefined;\n this.subscribe(\n (x: T) => (value = x),\n (err: any) => reject(err),\n () => resolve(value)\n );\n }) as Promise;\n }\n}\n\n/**\n * Decides between a passed promise constructor from consuming code,\n * A default configured promise constructor, and the native promise\n * constructor and returns it. If nothing can be found, it will throw\n * an error.\n * @param promiseCtor The optional promise constructor to passed by consuming code\n */\nfunction getPromiseCtor(promiseCtor: PromiseConstructorLike | undefined) {\n return promiseCtor ?? config.Promise ?? Promise;\n}\n\nfunction isObserver(value: any): value is Observer {\n return value && isFunction(value.next) && isFunction(value.error) && isFunction(value.complete);\n}\n\nfunction isSubscriber(value: any): value is Subscriber {\n return (value && value instanceof Subscriber) || (isObserver(value) && isSubscription(value));\n}\n", "import { Observable } from '../Observable';\nimport { Subscriber } from '../Subscriber';\nimport { OperatorFunction } from '../types';\nimport { isFunction } from './isFunction';\n\n/**\n * Used to determine if an object is an Observable with a lift function.\n */\nexport function hasLift(source: any): source is { lift: InstanceType['lift'] } {\n return isFunction(source?.lift);\n}\n\n/**\n * Creates an `OperatorFunction`. Used to define operators throughout the library in a concise way.\n * @param init The logic to connect the liftedSource to the subscriber at the moment of subscription.\n */\nexport function operate 
+ + ++
+ 
+ + ++
+ 
+ 
+ + ++
+ 
+ 
+ 
+