From b49d94ce901d3306fc3faa6aac4b5fb12956b317 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Sun, 23 May 2021 17:05:28 +0200
Subject: [PATCH 1/2] Fix raster example tooltips

---
 examples/raster.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/examples/raster.js b/examples/raster.js
index 2abdfd463a..a15a7476f3 100644
--- a/examples/raster.js
+++ b/examples/raster.js
@@ -195,18 +195,18 @@ function plot(resolution, counts, threshold) {
     }
     tip.html(message(counts.min + index * counts.delta, area));
     tip.style('display', 'block');
-    tip.transition().style({
-      left: chartRect.left + index * barWidth + barWidth / 2 + 'px',
-      top: d3.event.y - 60 + 'px',
-      opacity: 1,
-    });
+    tip
+      .transition()
+      .style('left', chartRect.left + index * barWidth + barWidth / 2 + 'px')
+      .style('top', d3.event.y - 60 + 'px')
+      .style('opacity', 1);
   });
 
   bar.on('mouseout', function () {
     tip
       .transition()
       .style('opacity', 0)
-      .each('end', function () {
+      .on('end', function () {
         tip.style('display', 'none');
       });
   });

From ad8c704e4a4a98dddee9280aed0d24f60c842e87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Sun, 23 May 2021 17:06:00 +0200
Subject: [PATCH 2/2] Update d3 to v6.7.0

---
 examples/d3.html     | 2 +-
 examples/raster.html | 2 +-
 examples/raster.js   | 8 +++++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/examples/d3.html b/examples/d3.html
index 789c0637f7..c4fb195d0f 100644
--- a/examples/d3.html
+++ b/examples/d3.html
@@ -6,7 +6,7 @@ docs: >
   The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a SVG element.
 tags: "d3"
 resources:
-  - https://unpkg.com/d3@5.9.2/dist/d3.js
+  - https://unpkg.com/d3@6.7.0/dist/d3.min.js
   - https://unpkg.com/topojson@3.0.2/dist/topojson.js
 ---
 <div id="map" class="map"></div>
diff --git a/examples/raster.html b/examples/raster.html
index e98a280140..0b63a9bc73 100644
--- a/examples/raster.html
+++ b/examples/raster.html
@@ -20,7 +20,7 @@ docs: >
   </p>
 tags: "raster, pixel, maptiler"
 resources:
-  - https://unpkg.com/d3@4.12.0/build/d3.js
+  - https://unpkg.com/d3@6.7.0/dist/d3.min.js
 cloak:
   - key: get_your_own_D6rA4zTHduk6KOKTXzGB
     value: Get your own API key at https://www.maptiler.com/cloud/
diff --git a/examples/raster.js b/examples/raster.js
index a15a7476f3..feeb037888 100644
--- a/examples/raster.js
+++ b/examples/raster.js
@@ -180,7 +180,8 @@ function plot(resolution, counts, threshold) {
     })
     .attr('height', yScale);
 
-  bar.on('mousemove', function (count, index) {
+  bar.on('mousemove', function () {
+    const index = bar.nodes().indexOf(this);
     const threshold = counts.min + index * counts.delta;
     if (raster.get('threshold') !== threshold) {
       raster.set('threshold', threshold);
@@ -188,7 +189,8 @@ function plot(resolution, counts, threshold) {
     }
   });
 
-  bar.on('mouseover', function (count, index) {
+  bar.on('mouseover', function (event) {
+    const index = bar.nodes().indexOf(this);
     let area = 0;
     for (let i = counts.values.length - 1; i >= index; --i) {
       area += resolution * resolution * counts.values[i];
@@ -198,7 +200,7 @@ function plot(resolution, counts, threshold) {
     tip
       .transition()
       .style('left', chartRect.left + index * barWidth + barWidth / 2 + 'px')
-      .style('top', d3.event.y - 60 + 'px')
+      .style('top', event.y - 60 + 'px')
       .style('opacity', 1);
   });