diff --git a/_includes/layouts/side-bar.html b/_includes/layouts/side-bar.html index 2a95a54a6..b6a125c05 100644 --- a/_includes/layouts/side-bar.html +++ b/_includes/layouts/side-bar.html @@ -47,8 +47,6 @@ {% assign advanced_charts = true %} {% elsif page.display_as == "multiple_axes" %} {% assign multiple_axes = true %} -{% elsif page.display_as == "transforms" %} -{% assign transforms = true %} {% elsif page.display_as == "controls" %} {% assign controls = true %} {% elsif page.display_as == "animations" %} diff --git a/_includes/posts/documentation_eg.html b/_includes/posts/documentation_eg.html index 6147523d4..7a831ae1e 100644 --- a/_includes/posts/documentation_eg.html +++ b/_includes/posts/documentation_eg.html @@ -24,8 +24,6 @@ {% assign 3d_charts = true %} {% elsif page.display_as == "multiple_axes" %} {% assign multiple_axes = true %} -{% elsif page.display_as == "transforms" %} -{% assign transforms = true %} {% elsif page.display_as == "controls" %} {% assign controls = true %} {% elsif page.display_as == "animations" %} @@ -382,26 +380,6 @@ {% endif %} -{% if transforms %} -
-
Transforms -
-
- -
-
-{% endif %} - {% if controls %}
Add Custom Controls diff --git a/_includes/posts/mainlang_documentation_eg.html b/_includes/posts/mainlang_documentation_eg.html index d8d827a30..0443c98b7 100644 --- a/_includes/posts/mainlang_documentation_eg.html +++ b/_includes/posts/mainlang_documentation_eg.html @@ -27,8 +27,6 @@ {% assign 3d_charts = true %} {% elsif page.display_as == "multiple_axes" %} {% assign multiple_axes = true %} - {% elsif page.display_as == "transforms" %} - {% assign transforms = true %} {% elsif page.display_as == "controls" %} {% assign controls = true %} {% elsif page.display_as == "animations" %} @@ -485,39 +483,6 @@
{% endif %} -{% if transforms %} -
-
- Transforms - - {% assign forloop_idx = 0 %} - {%- for page in languagelist -%} - {% if page.display_as == "transforms" and page.layout != "langindex" %} - {% assign forloop_idx = forloop_idx | plus:1 %} - {% endif %} - {%- endfor -%} - - {% if forloop_idx >= num_examples %} - More Transforms » - {% endif %} -
-
- -
-
-{% endif %} - {% if controls %}
diff --git a/_posts/plotly_js/basic/WebGL/2018-08-07-webgl_plotlyjs_index.html b/_posts/plotly_js/basic/WebGL/2018-08-07-webgl_plotlyjs_index.html index d157f426a..2b4d888e2 100644 --- a/_posts/plotly_js/basic/WebGL/2018-08-07-webgl_plotlyjs_index.html +++ b/_posts/plotly_js/basic/WebGL/2018-08-07-webgl_plotlyjs_index.html @@ -5,7 +5,7 @@ language: plotly_js layout: base name: WebGL vs SVG -order: 15 +order: 14 permalink: javascript/webgl-vs-svg/ thumbnail: thumbnail/webgl.jpg --- diff --git a/_posts/plotly_js/basic/mixed/2015-04-09-mixed_plotly_js_index.html b/_posts/plotly_js/basic/mixed/2015-04-09-mixed_plotly_js_index.html index 396c880b6..355319ad1 100755 --- a/_posts/plotly_js/basic/mixed/2015-04-09-mixed_plotly_js_index.html +++ b/_posts/plotly_js/basic/mixed/2015-04-09-mixed_plotly_js_index.html @@ -5,7 +5,7 @@ language: plotly_js layout: base name: Multiple Chart Types -order: 14 +order: 13 permalink: javascript/graphing-multiple-chart-types/ redirect_from: javascript-graphing-library/graphing-multiple-chart-types/ thumbnail: thumbnail/mixed2.jpg diff --git a/_posts/plotly_js/basic/pointcloud/2017-06-15-advanced-pointcloud.html b/_posts/plotly_js/basic/pointcloud/2017-06-15-advanced-pointcloud.html deleted file mode 100644 index c67052a2f..000000000 --- a/_posts/plotly_js/basic/pointcloud/2017-06-15-advanced-pointcloud.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -name: Advanced Point Cloud -plot_url: https://codepen.io/plotly/embed/MoJWNm/?height=500&theme-id=15263&default-tab=result -language: plotly_js -suite: pointcloud -order: 3 -sitemap: false -arrangement: horizontal ---- -var graphDiv = document.getElementById("myDiv") -var canvas = document.getElementById("canvas") -var ctx = canvas.getContext("2d") - -var pointCount = 1e6 -var scaleX = 2000 -var scaleY = 1000 -var speed = 0.3 - -// some non-uniform distribution -function pseudogaussian() {return (Math.random() + Math.random() + Math.random() + Math.random() + Math.random() + Math.random()) - 3} - -// dataset xy array generator -function gaussian(sd) { - var result = new Float32Array(2 * pointCount) - var f = 20 / 360 * 2 * Math.PI - var sin = Math.sin(f) - var cos = Math.cos(f) - var i, x, y - for(i = 0; i < pointCount; i++) { - x = scaleX * pseudogaussian() * sd - y = scaleY * pseudogaussian() * sd * 0.75 - result[i * 2] = x * cos - y * sin + scaleX * 0.5 - result[i * 2 + 1] = x * sin + y * cos + scaleY * 0.5 - } - - return result -} - -// generate initial dataset -var geom = gaussian(1/5) - -var plotData = { - data: [ - { - type: 'pointcloud', - marker: { - sizemin: 0.05, - sizemax: 30, - color: 'darkblue', - opacity: 1, - blend: true - }, - opacity: 1, - xy: geom, // instead of separate x and y arrays - indices: new Int32Array(pointCount).map(function(d, i) {return i;}), - xbounds: [0, scaleX], - ybounds: [0, scaleY] - } - ], - layout: { - title: { - text: 'Point Cloud - updating 1 million points in every single frame' - }, - autosize: false, - width: 1000, - height: 600, - hovermode: false, - dragmode: "pan" - } -} - -function reds (imageData) { - // uses the red channel for simplicity - var result = [] - var data = imageData.data - var width = imageData.width - var height = imageData.height - var i, j - for(j =0; j < height; j++) - for(i = 0; i < width; i++) - if(data[4 * (i + width * j)]) - result.push([i, j]) - return result -} - -function fillGeom(pixels, width, height) { - var result = new Float32Array(2 * pointCount) - var i - var pixel - var pixLength = pixels.length - for(i = 0; i < pointCount; i++) { - pixel = pixels[i % pixLength] // recycling and jittering points - result[2 * i] = scaleX * (pixel[0] + Math.random()) / width - result[2 * i + 1] = scaleY * (1 - (pixel[1] + Math.random()) / height) - } - return result -} - -function recurrenceRelationGeom(target, geom, speed, maxVelo, fraction) { - // non-one fraction is for glitch effects - var i, ii, diff - var geomPointCount = geom.length - var changedCount = Math.round(geomPointCount * fraction) - var from = Math.floor(Math.random() * geomPointCount) - var to = from + changedCount - for(ii = from; ii < to; ii++) { - i = ii % geomPointCount - diff = speed * (target[i] - geom[i]) - geom[i] += Math.min(maxVelo, diff) // capping for glitch effect - } -} - -function clearCanvas(ctx, width, height) { - ctx.fillStyle = "black" - ctx.fillRect(0, 0, width, height) - ctx.fillStyle = "red" -} - -function plotlyTextGeom(ctx, width, height) { - - clearCanvas(ctx, width, height) - ctx.font = "bold 260px 'Open sans',verdana,arial,sans-serif" - ctx.textAlign = "center" - ctx.textBaseline = "middle" - ctx.fillText("Plotly", width / 2, height / 2) - var imageData = ctx.getImageData(0, 0, width, height) - var filledPixels = reds(imageData) - - return fillGeom(filledPixels, width, height) -} - -function pointcloudTextGeom(ctx, width, height) { - - clearCanvas(ctx, width, height) - ctx.font = "bold 240px 'Open sans',verdana,arial,sans-serif" - ctx.textAlign = "center" - ctx.textBaseline = "alphabetic" - ctx.fillText("Point", width / 2, height / 2) - ctx.textBaseline = "hanging" - ctx.fillText("Cloud", width / 2, height / 2) - var imageData = ctx.getImageData(0, 0, width, height) - var filledPixels = reds(imageData) - - return fillGeom(filledPixels, width, height) -} - -function oneMillionTextGeom(ctx, width, height) { - - clearCanvas(ctx, width, height) - ctx.font = "bold 144px 'Open sans',verdana,arial,sans-serif" - ctx.textAlign = "center" - ctx.textBaseline = "bottom" - ctx.fillText("1 million", width / 2, height / 2) - ctx.textBaseline = "top" - ctx.fillText("live points", width / 2, height / 2) - var imageData = ctx.getImageData(0, 0, width, height) - var filledPixels = reds(imageData) - - return fillGeom(filledPixels, width, height) -} - -function initializeCanvas(plotArea) { - canvas.style.left = plotArea.left + "px" - canvas.style.top = plotArea.top + "px" - canvas.setAttribute("width", plotArea.width) - canvas.setAttribute("height", plotArea.height) -} - - -// 'Open sans',verdana,arial,sans-serif -Plotly.newPlot('myDiv', plotData.data, plotData.layout).then(function() { - - var plotArea = document.querySelector('.gl-container div').getBoundingClientRect() - - var width = plotArea.width - var height = plotArea.height - - initializeCanvas(plotArea) - - var targetPlotly = { - geom: plotlyTextGeom(ctx, width, height), - color: "blue", - speed: 2 - speed, - maxVelo: Infinity, - fraction: 1 - } - var targetPointcloud = { - geom: pointcloudTextGeom(ctx, width, height), - color: "darkgreen", - speed: speed, - maxVelo: 100, - fraction: 0.6 - } - var targetOneMillion = { - geom: oneMillionTextGeom(ctx, width, height), - color: "darkpurple", - speed: speed, - maxVelo: 200, - fraction: 0.6 - } - var targetGaussian = { - geom: gaussian(1/5), - color: "darkblue", - speed: 5 * speed, - maxVelo: 50, - fraction: 1 - } - var targetGaussian2 = { - geom: gaussian(100), - color: "darkblue", - speed: 0.2 * speed, - maxVelo: 1000, - fraction: 1 - } - - var currentIndex = 0 - var targets = [targetPlotly, targetPointcloud, targetOneMillion, targetGaussian, targetGaussian2] - - window.setInterval(function() { - currentIndex = (currentIndex + 1) % targets.length - }, 3000) - - function getIndex() { - return currentIndex - } - - window.requestAnimationFrame(function refresh() { - var target = targets[getIndex()] - recurrenceRelationGeom(target.geom, geom, target.speed, target.maxVelo, target.fraction) - Plotly.restyle('myDiv', {marker:{color: target.color}/*,xy: geom*/}, 0) // /*no need to include xy: geom*/ - window.requestAnimationFrame(refresh) - }) -}) diff --git a/_posts/plotly_js/basic/pointcloud/2017-06-15-basic-pointcloud.html b/_posts/plotly_js/basic/pointcloud/2017-06-15-basic-pointcloud.html deleted file mode 100644 index be6ad162f..000000000 --- a/_posts/plotly_js/basic/pointcloud/2017-06-15-basic-pointcloud.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -name: Basic Point Cloud -language: plotly_js -suite: pointcloud -order: 1 -sitemap: false -arrangement: horizontal ---- - -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); diff --git a/_posts/plotly_js/basic/pointcloud/2017-06-15-plotlyjs-pointcloud-index.html b/_posts/plotly_js/basic/pointcloud/2017-06-15-plotlyjs-pointcloud-index.html deleted file mode 100755 index aef19a800..000000000 --- a/_posts/plotly_js/basic/pointcloud/2017-06-15-plotlyjs-pointcloud-index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -description: How to make D3.js-based Point Cloud plots in Plotly.js. -display_as: basic -language: plotly_js -layout: base -name: Point Cloud -order: 11 -permalink: javascript/pointcloud/ -thumbnail: thumbnail/pointcloud.jpg ---- - -{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","pointcloud" | sort: "order" %} -{% include posts/auto_examples.html examples=examples %} \ No newline at end of file diff --git a/_posts/plotly_js/basic/pointcloud/2017-06-15-styled-pointcloud.html b/_posts/plotly_js/basic/pointcloud/2017-06-15-styled-pointcloud.html deleted file mode 100644 index a49b2501e..000000000 --- a/_posts/plotly_js/basic/pointcloud/2017-06-15-styled-pointcloud.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -name: Styled Point Cloud -language: plotly_js -suite: pointcloud -order: 2 -sitemap: false -arrangement: horizontal ---- - -var trace1 = { - type: "pointcloud", - mode: "markers", - marker: { - sizemin: 0.5, - sizemax: 100, - arearatio: 0, - color: "rgba(255, 0, 0, 0.6)" - }, - x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - y: [9, 8, 7, 6, 5, 4, 3, 2, 1, 0] -} - -var trace2 = { - type: "pointcloud", - mode: "markers", - marker: { - sizemin: 0.5, - sizemax: 100, - arearatio: 0, - color: "rgba(0, 0, 255, 0.9)", - opacity: 0.8, - blend: true - }, - opacity: 0.7, - x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9], - y: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] -} - -var trace3 = { - type: "pointcloud", - mode: "markers", - marker: { - sizemin: 0.5, - sizemax: 100, - border: { - color: "rgb(0, 0, 0)", - arearatio: 0.7071 - }, - color: "green", - opacity: 0.8, - blend: true - }, - opacity: 0.7, - x: [3, 4.5, 6], - y: [9, 9, 9] -} - -var data = [trace1, trace2,trace3]; - -var layout = { - title: { - text: "Basic Point Cloud" - }, - xaxis: { - type: "linear", - range: [ - -2.501411175139456, - 43.340777299865266], - autorange: true - }, - yaxis: { - type: "linear", - range: [4,6], - autorange: true - }, - height: 598, - width: 1080, - autosize: true, - showlegend: false -} - -Plotly.newPlot('myDiv', data, layout); diff --git a/_posts/plotly_js/basic/table/2017-11-01-tables-plotly_js_index.html b/_posts/plotly_js/basic/table/2017-11-01-tables-plotly_js_index.html index 0f458701e..0a6c56f67 100755 --- a/_posts/plotly_js/basic/table/2017-11-01-tables-plotly_js_index.html +++ b/_posts/plotly_js/basic/table/2017-11-01-tables-plotly_js_index.html @@ -4,7 +4,7 @@ language: plotly_js layout: base name: Tables -order: 13 +order: 12 permalink: javascript/table/ thumbnail: thumbnail/table.gif --- diff --git a/_posts/plotly_js/basic/treemap/2019-10-15-treemap_plotly_js_index.html b/_posts/plotly_js/basic/treemap/2019-10-15-treemap_plotly_js_index.html index 7286f05fa..2b9b034cb 100755 --- a/_posts/plotly_js/basic/treemap/2019-10-15-treemap_plotly_js_index.html +++ b/_posts/plotly_js/basic/treemap/2019-10-15-treemap_plotly_js_index.html @@ -5,7 +5,7 @@ language: plotly_js layout: base name: Treemaps -order: 12 +order: 11 permalink: javascript/treemaps/ thumbnail: thumbnail/treemap.png --- diff --git a/_posts/plotly_js/chart-events/events/2017-01-01-order1_using_events.html b/_posts/plotly_js/chart-events/events/2017-01-01-order1_using_events.html index 4a33b2c4b..6251316c1 100644 --- a/_posts/plotly_js/chart-events/events/2017-01-01-order1_using_events.html +++ b/_posts/plotly_js/chart-events/events/2017-01-01-order1_using_events.html @@ -7,7 +7,7 @@ sitemap: false arrangement: horizontal markdown_content: | - Plotly graphs emit events prefixed with plotly_ (i.e. `'plotly_click'`, `'plotly_hover'`, `'plotly_relayout'`) when interacted with (clicked, hovered, zoomed). Event handlers can be bound to events using the `.on` method that is exposed by the plot div object. Please note: it is possible to use jQuery events, but plotly.js no longer bundles jQuery, so we recommend using the plotly.js implementation. + Plotly graphs emit events prefixed with plotly_ (i.e. `'plotly_click'`, `'plotly_hover'`, `'plotly_relayout'`) when interacted with (clicked, hovered, zoomed). Event handlers can be bound to events using the `.on` method that is exposed by the plot div object. In addition to the event handler, some events emit additional information about the point(s) or plot interacted with. The following documentation organizes Plotly events based on the accessible information emitted with the event: [event data](), [update data](), or [no additional data](). The following page provides a description and example of each Plotly event as well as the structure of the data or update returned with the event. --- diff --git a/_posts/plotly_js/chart-events/hover/2019-05-15-advanced-hovertemplate.html b/_posts/plotly_js/chart-events/hover/2019-05-15-advanced-hovertemplate.html deleted file mode 100644 index 9179c6457..000000000 --- a/_posts/plotly_js/chart-events/hover/2019-05-15-advanced-hovertemplate.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -name: Advanced Hovertemplate -language: plotly_js -suite: hover -order: 4 -sitemap: false -arrangement: horizontal ---- - -d3.csv( - "https://raw.githubusercontent.com/plotly/datasets/master/job-automation-probability.csv", - function(rows) { - var x = [], - y = [], - s = [], - c = [], - t = []; - - for (var i = 0; i < rows.length; i++) { - row = rows[i]; - y.push(row["Average annual wage"]); - x.push(row["prob"]); - s.push(row["numbEmployed"]); - c.push(row["education"]); - t.push(row["short occupation"]); - } - - Plotly.newPlot('myDiv', { - data: [ - { - type: "scatter", - mode: "markers", - x: x, - y: y, - text: t, - marker: { size: s, sizeref: 4000, sizemode: "area" }, - transforms: [{ type: "groupby", groups: c }], - hovertemplate: - "%{text}

" + - "%{yaxis.title.text}: %{y:$,.0f}
" + - "%{xaxis.title.text}: %{x:.0%}
" + - "Number Employed: %{marker.size:,}" + - "" - } - ], - layout: { - title: { - text: "Higher Risk of Job Automation in Lower Paying Jobs" - }, - hovermode: "closest", - hoverlabel: { bgcolor: "#FFF" }, - legend: { orientation: 'h', y: -0.3 }, - xaxis: { - tickformat: ".0%", - title: { - text: "Automation Probability" - }, - zeroline: false - }, - yaxis: { - title: { - text: "Income" - }, - zeroline: false - } - }, - config: { responsive: true } - }); - } -); diff --git a/_posts/plotly_js/fundamentals/plotly-js-3-changes/2024-10-09-plotly-js-3-changes.md b/_posts/plotly_js/fundamentals/plotly-js-3-changes/2024-10-09-plotly-js-3-changes.md new file mode 100644 index 000000000..7beac7958 --- /dev/null +++ b/_posts/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/_posts/plotly_js/statistical/violin/2018-01-16-multiple-traces-violin.html b/_posts/plotly_js/statistical/violin/2018-01-16-multiple-traces-violin.html deleted file mode 100644 index a7c9e6105..000000000 --- a/_posts/plotly_js/statistical/violin/2018-01-16-multiple-traces-violin.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -name: Multiple Traces Violin Plot -language: plotly_js -suite: violin -order: 2 -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'), - points: 'none', - box: { - visible: true - }, - line: { - color: 'green', - }, - meanline: { - visible: true - }, - transforms: [{ - type: 'groupby', - groups: unpack(rows, 'day'), - styles: [ - {target: 'Sun', value: {line: {color: 'blue'}}}, - {target: 'Sat', value: {line: {color: 'orange'}}}, - {target: 'Thur', value: {line: {color: 'green'}}}, - {target: 'Fri', value: {line: {color: 'red'}}} - ] - }] -}] - -var layout = { - title: { - text: "Multiple Traces Violin Plot" - }, - yaxis: { - zeroline: false - } -} - -Plotly.newPlot('myDiv', data, layout); -}); diff --git a/_posts/plotly_js/transforms/aggregates/2017-10-24-aggregate-functions.html b/_posts/plotly_js/transforms/aggregates/2017-10-24-aggregate-functions.html deleted file mode 100644 index e769a97db..000000000 --- a/_posts/plotly_js/transforms/aggregates/2017-10-24-aggregate-functions.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -name: Aggregate Functions -language: plotly_js -suite: aggregates -order: 3 -sitemap: false -arrangement: horizontal ---- - -var subject = ['Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly'] -var score = [1,6,2,8,2,9,4,5,1,5,2,8] - -var data = [{ - type: 'scatter', - x: subject, - y: score, - mode: 'markers', - transforms: [{ - type: 'aggregate', - groups: subject, - aggregations: [ - {target: 'y', func: 'avg', enabled: true}, - ] - }] -}] -layout = { - title: { - text: 'Plotly Aggregations
use dropdown to change aggregation' - }, - xaxis: { - title: { - text: 'Subject' - } - }, - yaxis: { - title: { - text: 'Score' - }, - range: [0, 22] - }, - height: 600, - width: 900, - updatemenus: [{ - x: 0.85, - y: 1.15, - xref: 'paper', - yref: 'paper', - yanchor: 'top', - active: 0, - showactive: false, - buttons: [{ - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'avg'], - label: 'Avg' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'sum'], - label: 'Sum' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'min'], - label: 'Min' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'max'], - label: 'Max' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'mode'], - label: 'Mode' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'median'], - label: 'Median' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'count'], - label: 'Count' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'stddev'], - label: 'Std.Dev' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'first'], - label: 'First' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'last'], - label: 'Last' - }] - }] -} - -Plotly.newPlot('myDiv', data, layout) diff --git a/_posts/plotly_js/transforms/aggregates/2017-10-24-aggregates_plotly_js_index.html b/_posts/plotly_js/transforms/aggregates/2017-10-24-aggregates_plotly_js_index.html deleted file mode 100755 index 8bd1cea53..000000000 --- a/_posts/plotly_js/transforms/aggregates/2017-10-24-aggregates_plotly_js_index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -name: Aggregations -permalink: javascript/aggregations/ -description: How to use D3.js-based Aggregates in Plotly.js. -layout: base -thumbnail: thumbnail/aggregations.jpg -language: plotly_js -display_as: transforms -page_type: example_index -order: 3 ---- -

Note: transforms are deprecated and will be removed in a future version of Plotly.js

- -{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","aggregates" | sort: "order" %} -{% include posts/auto_examples.html examples=examples %} diff --git a/_posts/plotly_js/transforms/aggregates/2017-10-24-basic-example.html b/_posts/plotly_js/transforms/aggregates/2017-10-24-basic-example.html deleted file mode 100644 index a98797c56..000000000 --- a/_posts/plotly_js/transforms/aggregates/2017-10-24-basic-example.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -name: Basic Example -language: plotly_js -suite: aggregates -order: 2 -sitemap: false -arrangement: horizontal ---- - -var subject = ['Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly'] -var score = [1,6,2,8,2,9,4,5,1,5,2,8] - -var data = [{ - type: 'scatter', - x: subject, - y: score, - mode: 'markers', - transforms: [{ - type: 'aggregate', - groups: subject, - aggregations: [ - {target: 'y', func: 'avg', enabled: true}, - ] - }] -}] - -Plotly.newPlot('myDiv', data) - - diff --git a/_posts/plotly_js/transforms/aggregates/2017-10-24-histogram-binning.html b/_posts/plotly_js/transforms/aggregates/2017-10-24-histogram-binning.html deleted file mode 100644 index 7296d7e71..000000000 --- a/_posts/plotly_js/transforms/aggregates/2017-10-24-histogram-binning.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -name: Histogram Binning -language: plotly_js -suite: aggregates -order: 4 -sitemap: false -arrangement: horizontal ---- - -d3.csv("https://plotly.com/~public.health/17.csv", function(err, rows){ - function unpack(rows, key) { - return rows.map(function(row) { return row[key]; }); - } - -trace1 = { - x: unpack(rows, 'date'), - autobinx: false, - autobiny: true, - marker: {color: 'rgb(68, 68, 68)'}, - name: 'date', - type: 'histogram', - xbins: { - end: '2016-12-31 12:00', - size: 'M1', - start: '1983-12-31 12:00' - } -}; - -data = [trace1]; - -layout = { - paper_bgcolor: 'rgb(240, 240, 240)', - plot_bgcolor: 'rgb(240, 240, 240)', - title: { - text: '' - }, - xaxis: { - autorange: true, - range: ['1984-07-01 06:00', '2016-07-30 18:00'], - title: { - text: '' - }, - type: 'date' - }, - yaxis: { - autorange: true, - range: [0, 92.6315789474], - title: { - text: 'Shootings incidents' - }, - type: 'linear' - }, - updatemenus: [{ - x: 0.1, - y: 1.15, - xref: 'paper', - yref: 'paper', - yanchor: 'top', - active: 0, - showactive: true, - buttons: [{ - args: ['xbins.size', 'M1'], - label: 'Month', - method: 'restyle', - }, { - args: ['xbins.size', 'M3'], - label: 'Quater', - method: 'restyle', - }, { - args: ['xbins.size', 'M6'], - label: 'Half Year', - method: 'restyle', - }, { - args: ['xbins.size', 'M12'], - label: 'Year', - method: 'restyle', - }] - }] -}; - -Plotly.newPlot('myDiv', data, layout); - -}); diff --git a/_posts/plotly_js/transforms/aggregates/2017-10-24-mapping.html b/_posts/plotly_js/transforms/aggregates/2017-10-24-mapping.html deleted file mode 100644 index 50fb98dba..000000000 --- a/_posts/plotly_js/transforms/aggregates/2017-10-24-mapping.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -name: Mapping with Aggregates -language: plotly_js -suite: aggregates -order: 5 -sitemap: false -arrangement: horizontal ---- - -d3.csv('https://raw.githubusercontent.com/bcdunbar/datasets/master/worldhappiness.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, 'Country'), - z: unpack(rows, 'HappinessScore'), - autocolorscale: false, - reversescale: true, - colorscale: 'Portland', - transforms: [{ - type: 'aggregate', - groups: unpack(rows, 'Country'), - aggregations: [ - {target: 'z', func: 'avg', enabled: true}, - ] - }] - }]; - - var layout = { - title: { - text: 'World Happiness
2015 - 2017' - }, - geo: { - showframe: false, - showcoastlines: false, - projection:{ - type: 'orthographic' - } - }, - updatemenus: [{ - x: 0.85, - y: 1.15, - xref: 'paper', - yref: 'paper', - yanchor: 'top', - active: 0, - showactive: true, - buttons: [{ - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'avg'], - label: 'Avg' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'sum'], - label: 'Sum' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'min'], - label: 'Min' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'max'], - label: 'Max' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'mode'], - label: 'Mode' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'median'], - label: 'Median' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'first'], - label: 'First' - }, { - method: 'restyle', - args: ['transforms[0].aggregations[0].func', 'last'], - label: 'Last' - }] - }] - }; - - Plotly.newPlot('myDiv', data, layout); - -}); diff --git a/_posts/plotly_js/transforms/filter/2017-10-27-filter-basic-example.html b/_posts/plotly_js/transforms/filter/2017-10-27-filter-basic-example.html deleted file mode 100644 index a34c5e83b..000000000 --- a/_posts/plotly_js/transforms/filter/2017-10-27-filter-basic-example.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -name: Basic Example -language: plotly_js -suite: filters -order: 2 -sitemap: false -arrangement: horizontal ---- - -var subject = ['Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly'] -var score = [1,6,2,8,2,9,4,5,1,5,2,8] - -var data = [{ - type: 'scatter', - x: subject, - y: score, - mode: 'markers', - transforms: [{ - type: 'filter', - target: 'y', - operation: '>', - value: 4 - }] -}] - -var layout = { - title: { - text: 'Filter Scores > 4' - } -} - -Plotly.newPlot('myDiv', data, layout) diff --git a/_posts/plotly_js/transforms/filter/2017-10-27-filter_plotly_js_index.html b/_posts/plotly_js/transforms/filter/2017-10-27-filter_plotly_js_index.html deleted file mode 100755 index fe8c76738..000000000 --- a/_posts/plotly_js/transforms/filter/2017-10-27-filter_plotly_js_index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -name: Filter -permalink: javascript/filter/ -description: How to use D3.js-based Filters in Plotly.js. -layout: base -thumbnail: thumbnail/filter.jpg -language: plotly_js -display_as: transforms -page_type: example_index -order: 1 ---- -

Note: transforms are deprecated and will be removed in a future version of Plotly.js

- -{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","filters" | sort: "order" %} -{% include posts/auto_examples.html examples=examples %} diff --git a/_posts/plotly_js/transforms/groupby/2017-10-27-groupby-basic-example.html b/_posts/plotly_js/transforms/groupby/2017-10-27-groupby-basic-example.html deleted file mode 100644 index 09c33a3a4..000000000 --- a/_posts/plotly_js/transforms/groupby/2017-10-27-groupby-basic-example.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -name: Basic Example -language: plotly_js -suite: groupby -order: 2 -sitemap: false -arrangement: horizontal ---- - -var subject = ['Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly','Moe','Larry','Curly'] -var score = [1,6,2,8,2,9,4,5,1,5,2,8] - -var data = [{ - type: 'scatter', - x: subject, - y: score, - mode: 'markers', - transforms: [{ - type: 'groupby', - groups: subject, - styles: [ - {target: 'Moe', value: {marker: {color: 'blue'}}}, - {target: 'Larry', value: {marker: {color: 'red'}}}, - {target: 'Curly', value: {marker: {color: 'black'}}} - ] - }] -}] - -Plotly.newPlot('myDiv', data) diff --git a/_posts/plotly_js/transforms/groupby/2017-10-27-groupby_plotly_js_index.html b/_posts/plotly_js/transforms/groupby/2017-10-27-groupby_plotly_js_index.html deleted file mode 100755 index 081d0abfd..000000000 --- a/_posts/plotly_js/transforms/groupby/2017-10-27-groupby_plotly_js_index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -name: Groupby -permalink: javascript/group-by/ -description: How to use D3.js-based Group By in Plotly.js. -layout: base -thumbnail: thumbnail/groupby.jpg -language: plotly_js -display_as: transforms -page_type: example_index -order: 2 ---- -

Note: transforms are deprecated and will be removed in a future version of Plotly.js

- -{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","groupby" | sort: "order" %} -{% include posts/auto_examples.html examples=examples %} diff --git a/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-all.html b/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-all.html deleted file mode 100644 index 0ac9fef05..000000000 --- a/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-all.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -name: All Transforms -language: plotly_js -suite: multiple-transforms -order: 4 -sitemap: false -arrangement: horizontal ---- - -d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv", function(err, rows){ - - function unpack(rows, key) { - return rows.map(function(row) { return row[key]; }); -} - - var data = [{ - type: 'scatter', - mode: 'markers', - x: unpack(rows, 'lifeExp'), - y: unpack(rows, 'gdpPercap'), - text: unpack(rows, 'continent'), - marker: { - size: unpack(rows, 'pop'), - sizemode: "area", - sizeref: 200000 - }, - transforms: [ - { - type: 'filter', - target: unpack(rows, 'year'), - operation: '=', - value: '2007' - }, { - type: 'groupby', - groups: unpack(rows, 'continent'), - styles: [ - {target: 'Asia', value: {marker: {color: 'red'}}}, - {target: 'Europe', value: {marker: {color: 'blue'}}}, - {target: 'Americas', value: {marker: {color: 'orange'}}}, - {target: 'Africa', value: {marker: {color: 'green'}}}, - {target: 'Oceania', value: {marker: {color: 'purple'}}} - ] - }, { - type: 'aggregate', - groups: unpack(rows, 'continent'), - aggregations: [ - {target: 'x', func: 'avg'}, - {target: 'y', func: 'avg'}, - {target: 'marker.size', func: 'sum'} - ] - }] - }] - -var layout = { - title: { - text: 'Gapminder
2007 Average GDP Per Cap & Life Exp. by Continent' - }, - yaxis: { - type: 'log' - } -} - -Plotly.newPlot('myDiv', data, layout) -}); diff --git a/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-basic.html b/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-basic.html deleted file mode 100644 index bd5dd7546..000000000 --- a/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-basic.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -name: Filter and Group By -language: plotly_js -suite: multiple-transforms -order: 2 -sitemap: false -arrangement: horizontal ---- - -d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv", function(err, rows){ - - function unpack(rows, key) { - return rows.map(function(row) { return row[key]; }); -} - - var data = [{ - type: 'scatter', - mode: 'markers', - x: unpack(rows, 'lifeExp'), - y: unpack(rows, 'gdpPercap'), - text: unpack(rows, 'continent'), - marker: { - size: unpack(rows, 'pop'), - sizemode: "area", - sizeref: 200000 - }, - transforms: [ - { - type: 'filter', - target: unpack(rows, 'year'), - operation: '=', - value: '2007' - }, { - type: 'groupby', - groups: unpack(rows, 'continent'), - styles: [ - {target: 'Asia', value: {marker: {color: 'red'}}}, - {target: 'Europe', value: {marker: {color: 'blue'}}}, - {target: 'Americas', value: {marker: {color: 'orange'}}}, - {target: 'Africa', value: {marker: {color: 'green'}}}, - {target: 'Oceania', value: {marker: {color: 'purple'}}} - ] - }] - }] - -var layout = { - yaxis: { - type: 'log' - } -} - -Plotly.newPlot('myDiv', data, layout) -}); diff --git a/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-filter-agg.html b/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-filter-agg.html deleted file mode 100644 index b52012aee..000000000 --- a/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-filter-agg.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -name: Filter and Aggregates -language: plotly_js -suite: multiple-transforms -order: 3 -sitemap: false -arrangement: horizontal ---- - -d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv", function(err, rows){ - - function unpack(rows, key) { - return rows.map(function(row) { return row[key]; }); -} - - var data = [{ - type: 'scatter', - mode: 'markers', - x: unpack(rows, 'lifeExp'), - y: unpack(rows, 'gdpPercap'), - text: unpack(rows, 'continent'), - marker: { - size: unpack(rows, 'pop'), - sizemode: "area", - sizeref: 200000 - }, - transforms: [ - { - type: 'filter', - target: unpack(rows, 'year'), - operation: '=', - value: '2007' - }, { - type: 'aggregate', - groups: unpack(rows, 'continent'), - aggregations: [ - {target: 'x', func: 'avg'}, - {target: 'y', func: 'avg'}, - {target: 'marker.size', func: 'sum'} - ] - }] - }] - -var layout = { - yaxis: { - type: 'log' - } -} - -Plotly.newPlot('myDiv', data, layout) -}); diff --git a/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms_plotly_js_index.html b/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms_plotly_js_index.html deleted file mode 100755 index f024b08e2..000000000 --- a/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms_plotly_js_index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -name: Multiple Transforms -permalink: javascript/multiple-transforms/ -description: How to use D3.js-based Multiple Transforms in Plotly.js. -layout: base -thumbnail: thumbnail/multiple-transforms.jpg -language: plotly_js -display_as: transforms -page_type: example_index -order: 4 ---- - -

Note: transforms are deprecated and will be removed in a future version of Plotly.js

- -{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","multiple-transforms" | sort: "order" %} -{% include posts/auto_examples.html examples=examples %}