From 4f9cd9eb0a36c4f0b5632b696c0f2d242f8af20c Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Wed, 9 Oct 2024 16:06:12 -0400
Subject: [PATCH 01/24] remove point cloud pages

---
 .../2017-06-15-advanced-pointcloud.html       | 231 ------------------
 .../2017-06-15-basic-pointcloud.html          |  16 --
 .../2017-06-15-plotlyjs-pointcloud-index.html |  13 -
 .../2017-06-15-styled-pointcloud.html         |  80 ------
 4 files changed, 340 deletions(-)
 delete mode 100644 _posts/plotly_js/basic/pointcloud/2017-06-15-advanced-pointcloud.html
 delete mode 100644 _posts/plotly_js/basic/pointcloud/2017-06-15-basic-pointcloud.html
 delete mode 100755 _posts/plotly_js/basic/pointcloud/2017-06-15-plotlyjs-pointcloud-index.html
 delete mode 100644 _posts/plotly_js/basic/pointcloud/2017-06-15-styled-pointcloud.html

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 8238999ce..000000000
--- a/_posts/plotly_js/basic/pointcloud/2017-06-15-advanced-pointcloud.html
+++ /dev/null
@@ -1,231 +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: '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 02f77b475..000000000
--- a/_posts/plotly_js/basic/pointcloud/2017-06-15-styled-pointcloud.html
+++ /dev/null
@@ -1,80 +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: "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);

From cad2cabee0d88363cd30d5d2e220310f0a1d1648 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Wed, 9 Oct 2024 16:16:40 -0400
Subject: [PATCH 02/24] add draft of version 3 changes

---
 .../2024-10-09-plotly-js-3-changes.md               | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 _posts/plotly_js/fundamentals/plotly-js-3-changes/2024-10-09-plotly-js-3-changes.md

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..fe9125365
--- /dev/null
+++ b/_posts/plotly_js/fundamentals/plotly-js-3-changes/2024-10-09-plotly-js-3-changes.md
@@ -0,0 +1,13 @@
+---
+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
+---

From bb95055efa8246a34947c10be445b32725c6903e Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Wed, 9 Oct 2024 16:31:18 -0400
Subject: [PATCH 03/24] add annotation.ref removal

---
 .../2024-10-09-plotly-js-3-changes.md         | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

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
index fe9125365..da0fcbda9 100644
--- 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
@@ -11,3 +11,48 @@ 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
+
+`annotation.ref` has been removed. Use `annotation.xref` and `annotation.yref` instead.
+
+
+Example using `annotation.ref`:
+
+```js
+...
+var layout = {
+    title: "Try panning or zooming!",
+    annotations: [{
+        text: "Absolutely-positioned annotation",
+        ref: "paper",
+        x: 0.3,
+        y: 0.3,
+        showarrow: false
+    }]
+};
+...
+```
+
+Example using `annotation.xref` and `annotation.yref`:
+
+```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
+    }]
+};
+...
+```
\ No newline at end of file

From c4b4c2d7fcef7beb22e3a95899b33890c5524f48 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Wed, 9 Oct 2024 16:38:08 -0400
Subject: [PATCH 04/24] add opacity removal

---
 .../2024-10-09-plotly-js-3-changes.md         | 32 ++++++++++++++++++-
 .../error-bar/2015-04-09-error-bar-style.html |  2 --
 2 files changed, 31 insertions(+), 3 deletions(-)

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
index da0fcbda9..455389514 100644
--- 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
@@ -17,7 +17,7 @@ This page outlines the changes in Plotly.js version 3 and cases where you may ne
 
 Plotly.js 3 removes the following features that were deprecated in previous versions.
 
-### annotation.ref
+### `annotation.ref`
 
 `annotation.ref` has been removed. Use `annotation.xref` and `annotation.yref` instead.
 
@@ -55,4 +55,34 @@ var layout = {
     }]
 };
 ...
+```
+
+### `opacity` on Error Bars
+
+The `opacity` attribute on error bars has been removed. Use the alpha channel of the `color` attribute instead.
+
+Here's a previous example from the Plotly.js docs that uses `opacity`.
+
+```
+  error_y: {
+    type: 'constant',
+    value: 0.1,
+    color: '#85144B',
+    thickness: 1.5,
+    width: 3,
+    opacity: 0.5
+  }
+
+```
+And here it is rewritten to use the alpha channel on a `rgba` color value.
+
+```
+  error_y: {
+    type: 'constant',
+    value: 0.1,
+    color: 'rgba(133, 20, 75, 0.5)',
+    thickness: 1.5,
+    width: 3,
+  }
+
 ```
\ No newline at end of file
diff --git a/_posts/plotly_js/statistical/error-bar/2015-04-09-error-bar-style.html b/_posts/plotly_js/statistical/error-bar/2015-04-09-error-bar-style.html
index bdfb5180a..0b76dfce6 100755
--- a/_posts/plotly_js/statistical/error-bar/2015-04-09-error-bar-style.html
+++ b/_posts/plotly_js/statistical/error-bar/2015-04-09-error-bar-style.html
@@ -31,7 +31,6 @@
     color: '#85144B',
     thickness: 1.5,
     width: 3,
-    opacity: 1
   },
   error_x: {
     type: 'constant',
@@ -39,7 +38,6 @@
     color: '#85144B',
     thickness: 1.5,
     width: 3,
-    opacity: 1
   },
   marker: {
     color: '#85144B',

From 80f30a69fcea533d1533c325819235ecd4d6dcd8 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Wed, 9 Oct 2024 16:44:56 -0400
Subject: [PATCH 05/24] add pointcloud and heatmapgl as removed

---
 .../2024-10-09-plotly-js-3-changes.md         | 70 +++++++++++++++++--
 1 file changed, 66 insertions(+), 4 deletions(-)

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
index 455389514..5422266ae 100644
--- 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
@@ -17,7 +17,7 @@ This page outlines the changes in Plotly.js version 3 and cases where you may ne
 
 Plotly.js 3 removes the following features that were deprecated in previous versions.
 
-### `annotation.ref`
+### `annotation.ref` Attribute
 
 `annotation.ref` has been removed. Use `annotation.xref` and `annotation.yref` instead.
 
@@ -57,11 +57,16 @@ var layout = {
 ...
 ```
 
-### `opacity` on Error Bars
+### `heatmapgl` Trace
+
+`heatmapgl` has been removed. Use `heatmap` instead.
+
+
+### `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 a previous example from the Plotly.js docs that uses `opacity`.
+Here's an example that was previously in the Plotly.js docs, and which uses `opacity`.
 
 ```
   error_y: {
@@ -85,4 +90,61 @@ And here it is rewritten to use the alpha channel on a `rgba` color value.
     width: 3,
   }
 
-```
\ No newline at end of file
+```
+
+### `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`:
+
+
+```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);
+```
+
+And here it is rewritten to use `scattergl`:
+
+```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);
+```
+
+

From 9cab06ee9faa0322964ebbe3de5420247f5ccd54 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Wed, 9 Oct 2024 16:51:06 -0400
Subject: [PATCH 06/24] add removal of bardir on bar charts

---
 .../2024-10-09-plotly-js-3-changes.md         | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)

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
index 5422266ae..7c7f6a33e 100644
--- 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
@@ -57,6 +57,58 @@ var layout = {
 ...
 ```
 
+### `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:
+
+```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);
+```
+
+And here it is rewritten to use `orientation`:
+
+```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);
+```
+
 ### `heatmapgl` Trace
 
 `heatmapgl` has been removed. Use `heatmap` instead.

From b35c9ce8702b4356e63f13266f1537e121d605fb Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Thu, 10 Oct 2024 10:34:22 -0400
Subject: [PATCH 07/24] add title removals

---
 .../2024-10-09-plotly-js-3-changes.md         | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

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
index 7c7f6a33e..9cfc51bbf 100644
--- 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
@@ -199,4 +199,48 @@ var layout = {
 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`:
+
+```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);
+```
+
+And here it is 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',
+        font: {
+            size: 40
+        }
+    },
+};
+
+Plotly.newPlot('chart', data, layout);
+```
\ No newline at end of file

From 04b2129161d958c092d2d2cabcc44a7dc17588f4 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Thu, 10 Oct 2024 10:50:55 -0400
Subject: [PATCH 08/24] add cameraposition removal

---
 .../2024-10-09-plotly-js-3-changes.md         | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

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
index 9cfc51bbf..d13ed6409 100644
--- 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
@@ -109,6 +109,38 @@ var layout = {
 Plotly.newPlot('bar-chart', data, layout);
 ```
 
+### `cameraposition` Attribute on 3D Surface Plots
+
+The `cameraposition` attribute on 3D surface plots has been removed. Use `camera` instead.
+
+If you are using `cameraposition`, you'll need to make some changes to 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 = <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.

From 00f0077900038767c3778895975fe8502545db4b Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Thu, 10 Oct 2024 11:20:12 -0400
Subject: [PATCH 09/24] add note on setting title as a string

---
 .../2024-10-09-plotly-js-3-changes.md         | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

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
index d13ed6409..9c7e0b50d 100644
--- 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
@@ -231,6 +231,52 @@ var layout = {
 Plotly.newPlot('myDiv', data, layout);
 ```
 
+## `title` Attribute as a String
+
+The `title` attribute can no longer be set as a string. Use `title.text` instead.
+
+Here's an example that sets `title` with strings on the chart and on the axes:
+
+```js
+var data = [{
+    x: [1, 2, 3, 4, 5],
+    y: [1, 2, 4, 8, 16]
+}];
+
+var layout = {
+    title: 'My chart title',
+    xaxis: { title: 'x-axis title' },
+    yaxis: { title: 'y-axis title' }
+};
+
+Plotly.newPlot('myDiv', data, layout);
+```
+
+And here it is rewritten to use `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`.

From 2e70e6237961931fd050ab5fe7ee0a29aa59e039 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Thu, 10 Oct 2024 11:33:53 -0400
Subject: [PATCH 10/24] fix ordering on basic charts

---
 .../plotly_js/basic/WebGL/2018-08-07-webgl_plotlyjs_index.html  | 2 +-
 .../plotly_js/basic/mixed/2015-04-09-mixed_plotly_js_index.html | 2 +-
 .../basic/table/2017-11-01-tables-plotly_js_index.html          | 2 +-
 .../basic/treemap/2019-10-15-treemap_plotly_js_index.html       | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

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/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
 ---

From 2246a6fd5e5866d52e307a3d96344c7165724e66 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Thu, 10 Oct 2024 13:56:57 -0400
Subject: [PATCH 11/24] remove example for converting title to title.text

---
 .../2024-10-09-plotly-js-3-changes.md         | 46 -------------------
 1 file changed, 46 deletions(-)

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
index 9c7e0b50d..d13ed6409 100644
--- 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
@@ -231,52 +231,6 @@ var layout = {
 Plotly.newPlot('myDiv', data, layout);
 ```
 
-## `title` Attribute as a String
-
-The `title` attribute can no longer be set as a string. Use `title.text` instead.
-
-Here's an example that sets `title` with strings on the chart and on the axes:
-
-```js
-var data = [{
-    x: [1, 2, 3, 4, 5],
-    y: [1, 2, 4, 8, 16]
-}];
-
-var layout = {
-    title: 'My chart title',
-    xaxis: { title: 'x-axis title' },
-    yaxis: { title: 'y-axis title' }
-};
-
-Plotly.newPlot('myDiv', data, layout);
-```
-
-And here it is rewritten to use `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`.

From 096190c8f2ccb202e8c54ce80a55f79dcd437fad Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Thu, 10 Oct 2024 15:42:20 -0400
Subject: [PATCH 12/24] fix text + add example

---
 .../2024-10-09-plotly-js-3-changes.md         | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

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
index d13ed6409..1f77d7b66 100644
--- 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
@@ -109,9 +109,9 @@ var layout = {
 Plotly.newPlot('bar-chart', data, layout);
 ```
 
-### `cameraposition` Attribute on 3D Surface Plots
+### `layout.scene.cameraposition` Attribute for 3D Plots
 
-The `cameraposition` attribute on 3D surface plots has been removed. Use `camera` instead.
+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 make some changes to 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).
 
@@ -139,12 +139,31 @@ var camera = {
 };
 ```
 
-
-
 ### `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
 

From 37b363363d5ba015840202ce7b0a181119d1a060 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Thu, 17 Oct 2024 11:27:42 -0400
Subject: [PATCH 13/24] add more removals

---
 .../events/2017-01-01-order1_using_events.html           | 2 +-
 .../2024-10-09-plotly-js-3-changes.md                    | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

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/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
index 1f77d7b66..a3843ef14 100644
--- 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
@@ -195,6 +195,10 @@ And here it is rewritten to use the alpha channel on a `rgba` color value.
 
 ```
 
+### 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.
@@ -250,6 +254,11 @@ var layout = {
 Plotly.newPlot('myDiv', data, layout);
 ```
 
+### `plot3dPixelRatio` for WebGL Image Export
+
+`plotGlPixelRatio` for setting the pixel ration during WebGL image export has been removed. Use `plotGlPixelRatio` instead.
+
+
 ### `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`.

From 612ddd71393c51ed72832ab3d6b40619d92ff6d4 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Thu, 17 Oct 2024 14:03:41 -0400
Subject: [PATCH 14/24] add surface trace removal

---
 .../plotly-js-3-changes/2024-10-09-plotly-js-3-changes.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

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
index a3843ef14..d8f3066ff 100644
--- 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
@@ -303,4 +303,10 @@ var layout = {
 };
 
 Plotly.newPlot('chart', data, layout);
-```
\ No newline at end of file
+```
+
+### `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.
+
+

From 9ffcbd94980ad8e182915c8071df8278138ffd84 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Mon, 21 Oct 2024 16:04:55 -0400
Subject: [PATCH 15/24] add autotick removal

---
 .../plotly-js-3-changes/2024-10-09-plotly-js-3-changes.md   | 6 ++++++
 1 file changed, 6 insertions(+)

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
index d8f3066ff..04d151ed4 100644
--- 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
@@ -57,6 +57,12 @@ var layout = {
 ...
 ```
 
+### `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.

From b2b1de5e927cfab73c81af7b4d4cc7eb1d0fac73 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Thu, 24 Oct 2024 15:21:47 -0400
Subject: [PATCH 16/24] remove transforms

---
 .../2019-05-15-advanced-hovertemplate.html    | 64 --------------
 .../2024-10-09-plotly-js-3-changes.md         |  4 +
 .../2018-01-16-multiple-traces-violin.html    | 50 -----------
 .../2017-10-24-aggregate-functions.html       | 84 ------------------
 ...2017-10-24-aggregates_plotly_js_index.html | 15 ----
 .../aggregates/2017-10-24-basic-example.html  | 29 -------
 .../2017-10-24-histogram-binning.html         | 77 ----------------
 .../aggregates/2017-10-24-mapping.html        | 87 -------------------
 .../2017-10-27-filter-basic-example.html      | 30 -------
 .../2017-10-27-filter_plotly_js_index.html    | 15 ----
 .../2017-10-27-groupby-basic-example.html     | 29 -------
 .../2017-10-27-groupby_plotly_js_index.html   | 15 ----
 .../2017-10-27-multiple-transforms-all.html   | 62 -------------
 .../2017-10-27-multiple-transforms-basic.html | 53 -----------
 ...-10-27-multiple-transforms-filter-agg.html | 51 -----------
 ...7-multiple-transforms_plotly_js_index.html | 16 ----
 16 files changed, 4 insertions(+), 677 deletions(-)
 delete mode 100644 _posts/plotly_js/chart-events/hover/2019-05-15-advanced-hovertemplate.html
 delete mode 100644 _posts/plotly_js/statistical/violin/2018-01-16-multiple-traces-violin.html
 delete mode 100644 _posts/plotly_js/transforms/aggregates/2017-10-24-aggregate-functions.html
 delete mode 100755 _posts/plotly_js/transforms/aggregates/2017-10-24-aggregates_plotly_js_index.html
 delete mode 100644 _posts/plotly_js/transforms/aggregates/2017-10-24-basic-example.html
 delete mode 100644 _posts/plotly_js/transforms/aggregates/2017-10-24-histogram-binning.html
 delete mode 100644 _posts/plotly_js/transforms/aggregates/2017-10-24-mapping.html
 delete mode 100644 _posts/plotly_js/transforms/filter/2017-10-27-filter-basic-example.html
 delete mode 100755 _posts/plotly_js/transforms/filter/2017-10-27-filter_plotly_js_index.html
 delete mode 100644 _posts/plotly_js/transforms/groupby/2017-10-27-groupby-basic-example.html
 delete mode 100755 _posts/plotly_js/transforms/groupby/2017-10-27-groupby_plotly_js_index.html
 delete mode 100644 _posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-all.html
 delete mode 100644 _posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-basic.html
 delete mode 100644 _posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-filter-agg.html
 delete mode 100755 _posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms_plotly_js_index.html

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 eaa1bb312..000000000
--- a/_posts/plotly_js/chart-events/hover/2019-05-15-advanced-hovertemplate.html
+++ /dev/null
@@ -1,64 +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:
-            "<b>%{text}</b><br><br>" +
-            "%{yaxis.title.text}: %{y:$,.0f}<br>" +
-            "%{xaxis.title.text}: %{x:.0%}<br>" +
-            "Number Employed: %{marker.size:,}" +
-            "<extra></extra>"
-        }
-      ],
-      layout: {
-        title: "Higher Risk of Job Automation in Lower Paying Jobs",
-        hovermode: "closest",
-        hoverlabel: { bgcolor: "#FFF" },
-        legend: {orientation: 'h', y: -0.3},
-        xaxis: {
-          tickformat: ".0%",
-          title: "Automation Probability",
-          zeroline: false
-        },
-        yaxis: {
-          title: "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
index 04d151ed4..afcac0549 100644
--- 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
@@ -311,6 +311,10 @@ var layout = {
 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.
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 8488b250f..000000000
--- a/_posts/plotly_js/statistical/violin/2018-01-16-multiple-traces-violin.html
+++ /dev/null
@@ -1,50 +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: "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 c9304df51..000000000
--- a/_posts/plotly_js/transforms/aggregates/2017-10-24-aggregate-functions.html
+++ /dev/null
@@ -1,84 +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: '<b>Plotly Aggregations</b><br>use dropdown to change aggregation',
-  xaxis: {title: 'Subject'},
-  yaxis: {title: '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
----
-<p><strong>Note: <code>transforms</code> are deprecated and will be removed in a future version of Plotly.js</strong></p>
-
-{% 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 4a1b5953c..000000000
--- a/_posts/plotly_js/transforms/aggregates/2017-10-24-histogram-binning.html
+++ /dev/null
@@ -1,77 +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: '',
-  xaxis: {
-    autorange: true,
-    range: ['1984-07-01 06:00', '2016-07-30 18:00'],
-    title: '',
-    type: 'date'
-  },
-  yaxis: {
-    autorange: true,
-    range: [0, 92.6315789474],
-    title: '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 658a16bf5..000000000
--- a/_posts/plotly_js/transforms/aggregates/2017-10-24-mapping.html
+++ /dev/null
@@ -1,87 +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: '<b>World Happiness</b><br>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 e35173c27..000000000
--- a/_posts/plotly_js/transforms/filter/2017-10-27-filter-basic-example.html
+++ /dev/null
@@ -1,30 +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: '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
----
-<p><strong>Note: <code>transforms</code> are deprecated and will be removed in a future version of Plotly.js</strong></p>
-
-{% 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
----
-<p><strong>Note: <code>transforms</code> are deprecated and will be removed in a future version of Plotly.js</strong></p>
-
-{% 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 0c277b2ac..000000000
--- a/_posts/plotly_js/transforms/multiple-transforms/2017-10-27-multiple-transforms-all.html
+++ /dev/null
@@ -1,62 +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: '<b>Gapminder</b><br>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
----
-
-<p><strong>Note: <code>transforms</code> are deprecated and will be removed in a future version of Plotly.js</strong></p>
-
-{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","multiple-transforms" | sort: "order" %}
-{% include posts/auto_examples.html examples=examples %}

From a16cfd19388b92eef956bc5f1d174027dece8c5b Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Thu, 24 Oct 2024 15:23:16 -0400
Subject: [PATCH 17/24] fix typo

---
 .../plotly-js-3-changes/2024-10-09-plotly-js-3-changes.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index afcac0549..c38813dce 100644
--- 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
@@ -61,7 +61,7 @@ var layout = {
 
 The `autotick` attribute has been removed.
 
-Use `tickmode: 'auto'` instead of `autotick: true` and `tickmode: 'linear' instead of `autotick: false`.
+Use `tickmode: 'auto'` instead of `autotick: true` and `tickmode: 'linear'` instead of `autotick: false`.
 
 ### `bardir` Attribute on Bar Charts
 

From db639a46defbb45c404773a56e686253e7df4dca Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Wed, 30 Oct 2024 15:34:56 -0400
Subject: [PATCH 18/24] remove transforms content

---
 _includes/layouts/side-bar.html               |  2 --
 _includes/posts/documentation_eg.html         | 22 ------------
 .../posts/mainlang_documentation_eg.html      | 35 -------------------
 3 files changed, 59 deletions(-)

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 @@
 </section>
 {% endif %}
 
-{% if transforms %}
-<section class="--tutorial-section">
-    <header class="--section-header"><a href="#transforms" name="transforms" id="transforms">Transforms</a>
-    </header>
-    <section class="--grid">
-        <ul class="--grid-list">
-            {%- for page in languagelist -%}
-            {% if page.display_as == "transforms" %}
-
-
-                        {% include layouts/grid-item.html %}
-
-
-            {% endif %}
-            {%- endfor -%}
-        </ul>
-    </section>
-</section>
-{% endif %}
-
 {% if controls %}
 <section class="--tutorial-section" id="controls">
     <header class="--section-header"><a href="#controls">Add Custom Controls</a>
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 @@
 </section>
 {% endif %}
 
-{% if transforms %}
-<section class="--tutorial-section">
-    <header class="--section-header">
-        <a href="#transforms" name="transforms" id="transforms">Transforms</a>
-
-        {% 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 %}
-        <a href="/{{language}}/transforms/" class="langindexlink">More Transforms &raquo;</a>
-        {% endif %}
-    </header>
-    <section class="--grid">
-        <ul class="--grid-list">
-
-            {% assign forloop_idx = 0 %}
-
-            {%- for page in languagelist -%}
-                {% if page.display_as == "transforms" and page.layout != "langindex" and forloop_idx < num_examples  %}
-                    {% assign forloop_idx = forloop_idx | plus:1 %}
-                    {% include layouts/grid-item.html %}
-                {% endif %}
-            {%- endfor -%}
-
-        </ul>
-    </section>
-</section>
-{% endif %}
-
 {% if controls %}
 <section class="--tutorial-section" id="controls">
     <header class="--section-header">

From fe114468c0c46f05517377c975a15b9755322203 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Tue, 5 Nov 2024 16:59:01 -0500
Subject: [PATCH 19/24] add zauto example

---
 .../2024-10-09-plotly-js-3-changes.md         | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

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
index c38813dce..251f7daa7 100644
--- 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
@@ -319,4 +319,32 @@ Transforms have been removed.
 
 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
+}];
+```

From 6add0fdf8d2f010a539943701c75133e5c56f323 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Tue, 5 Nov 2024 17:00:05 -0500
Subject: [PATCH 20/24] fix paragraph

---
 .../plotly-js-3-changes/2024-10-09-plotly-js-3-changes.md     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

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
index 251f7daa7..0048a020b 100644
--- 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
@@ -59,9 +59,7 @@ var layout = {
 
 ### `autotick` Attribute
 
-The `autotick` attribute has been removed.
-
-Use `tickmode: 'auto'` instead of `autotick: true` and `tickmode: 'linear'` instead of `autotick: false`.
+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
 

From 1babc45a24099cdd9d1374c8771ef619fedb9494 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Tue, 5 Nov 2024 17:01:17 -0500
Subject: [PATCH 21/24] small update

---
 .../plotly-js-3-changes/2024-10-09-plotly-js-3-changes.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 0048a020b..0b31c40c9 100644
--- 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
@@ -117,7 +117,7 @@ Plotly.newPlot('bar-chart', data, layout);
 
 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 make some changes to 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).
+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');

From 604f926084f4183334fbcefffb3de04ecb169a2b Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Tue, 5 Nov 2024 17:15:47 -0500
Subject: [PATCH 22/24] Update 2024-10-09-plotly-js-3-changes.md

---
 .../plotly-js-3-changes/2024-10-09-plotly-js-3-changes.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 0b31c40c9..72d130a1c 100644
--- 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
@@ -260,7 +260,7 @@ Plotly.newPlot('myDiv', data, layout);
 
 ### `plot3dPixelRatio` for WebGL Image Export
 
-`plotGlPixelRatio` for setting the pixel ration during WebGL image export has been removed. Use `plotGlPixelRatio` instead.
+The `plotGlPixelRatio` option on `config` for setting the pixel ration during WebGL image export has been removed. Use `plotGlPixelRatio` instead.
 
 
 ### `titlefont`,`titleposition`, `titleside`, and `titleoffset` Attributes

From fc8760c1549fb83449eb8b581a4bd1ad045ab5ad Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Tue, 5 Nov 2024 17:16:04 -0500
Subject: [PATCH 23/24] fix typo

---
 .../plotly-js-3-changes/2024-10-09-plotly-js-3-changes.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 72d130a1c..747248002 100644
--- 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
@@ -260,7 +260,7 @@ Plotly.newPlot('myDiv', data, layout);
 
 ### `plot3dPixelRatio` for WebGL Image Export
 
-The `plotGlPixelRatio` option on `config` for setting the pixel ration during WebGL image export has been removed. Use `plotGlPixelRatio` instead.
+The `plot3dPixelRatio` option on `config` for setting the pixel ration during WebGL image export has been removed. Use `plotGlPixelRatio` instead.
 
 
 ### `titlefont`,`titleposition`, `titleside`, and `titleoffset` Attributes

From 945f4da5a2a0105592e41eecc39cfcb88e080131 Mon Sep 17 00:00:00 2001
From: Liam Connors <connorsl@tcd.ie>
Date: Fri, 8 Nov 2024 15:47:35 -0500
Subject: [PATCH 24/24] add back title as string removed example

---
 .../2024-10-09-plotly-js-3-changes.md         | 46 ++++++++++++-------
 1 file changed, 30 insertions(+), 16 deletions(-)

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
index 747248002..7beac7958 100644
--- 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
@@ -21,8 +21,7 @@ Plotly.js 3 removes the following features that were deprecated in previous vers
 
 `annotation.ref` has been removed. Use `annotation.xref` and `annotation.yref` instead.
 
-
-Example using `annotation.ref`:
+Here's an example using `annotation.ref`, followed by teh same example rewritte to use `annotation.xref` and `annotation.yref`:
 
 ```js
 ...
@@ -39,8 +38,6 @@ var layout = {
 ...
 ```
 
-Example using `annotation.xref` and `annotation.yref`:
-
 ```js
 ...
 var layout = {
@@ -65,7 +62,7 @@ The `autotick` attribute has been removed. Use `tickmode: 'auto'` instead of `au
 
 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:
+Here's an example using `bardir` to make the bars horizontal, followed by the same example rewritten to use `orientation`:
 
 ```js
 var data = [{
@@ -89,8 +86,6 @@ var layout = {
 Plotly.newPlot('bar-chart', data, layout);
 ```
 
-And here it is rewritten to use `orientation`:
-
 ```js
 var data = [{
     type: 'bar',
@@ -173,7 +168,7 @@ Plotly.newPlot('myDiv', data);
 
 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`.
+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: {
@@ -186,7 +181,6 @@ Here's an example that was previously in the Plotly.js docs, and which uses `opa
   }
 
 ```
-And here it is rewritten to use the alpha channel on a `rgba` color value.
 
 ```
   error_y: {
@@ -207,8 +201,7 @@ Support for using jQuery events has been removed. Use [Plotly.js events](/javasc
 
 `pointcloud` has been removed. Use `scattergl` instead.
 
-Here's an example that was previously in the Plotly.js docs and which uses `pointcloud`:
-
+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');
@@ -224,8 +217,6 @@ layout = { };
 Plotly.newPlot('myDiv', data, layout);
 ```
 
-And here it is rewritten to use `scattergl`:
-
 ```js
 var myPlot = document.getElementById('myDiv');
 
@@ -263,11 +254,36 @@ Plotly.newPlot('myDiv', data, layout);
 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`:
+Here's an example that uses `titlefont`, followed by the same example rewritten to use `title.font`:
 
 ```js
 var data = [{
@@ -288,8 +304,6 @@ var layout = {
 Plotly.newPlot('chart', data, layout);
 ```
 
-And here it is rewritten to use `title.font`:
-
 ```js
 var data = [{
     type: 'bar',