Add tooltip to scatter plot

0843bcc2 · Almouhannad Hafez · 61556da8 · 0843bcc2 · 0843bcc2 · 0843bcc2
Commit 0843bcc2 authored Jan 10, 2025 by Almouhannad Hafez
Hide whitespace changes
Inline Side-by-side

Showing with 45 additions and 1 deletion

index.html index.html +1 -0

style.css src/css/style.css +20 -0

scatter.ts src/ts/scatter.ts +24 -1

No files found.
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@

 <body>
  <div id="scatterplot-container">
+    <div id="scatterplot-tooltip">fdsfds</div>
    <svg id="scatterplot"></svg>
    <ul class="legend" id="scatterplot-legend">
      <p>Filter by level:</p>

--- a/src/css/style.css
+++ b/src/css/style.css
@@ -93,4 +93,24 @@ body {
  color: #2a8d46;
 }

+#scatterplot-tooltip {
+  position: absolute;
+  display: none;
+  background: white;
+  border: 1px solid #9a9a9a;
+  padding: 5px;
+  margin-left: 0;
+  border-radius: 5px;
+  pointer-events: none;
+}
+
+#scatterplot-tooltip .tooltip-title {
+  font-weight: 800;
+}
+
+#scatterplot-tooltip .tooltip-second-title {
+  font-weight: 600;
+  color: gray;
+}
+
 /* #endregion */
\ No newline at end of file
--- a/src/ts/scatter.ts
+++ b/src/ts/scatter.ts
@@ -15,6 +15,7 @@ export class Scatterplot extends Chart {
    private xValue: (d: any) => any;
    private yValue: (d: any) => any;
    private idValue: (d: any) => any;
+    private tooltip: d3.Selection<d3.BaseType, unknown, HTMLElement, any>;

    constructor(_config: ChartConfiguration, _data?: any[]) {
        super(_config, _data);
@@ -76,6 +77,8 @@ export class Scatterplot extends Chart {
            .attr('y', 0)
            .attr('dy', '.71em')
            .text('Hours');
+
+        vis.tooltip = d3.select("#scatterplot-tooltip");
    }

    public updateVis(): void {
@@ -95,6 +98,7 @@ export class Scatterplot extends Chart {
    protected renderVis() {
        let vis = this;
        vis.idValue = (d: any) => d.trail;
+
        // Bind data to circles
        const circles = vis.chart.selectAll('.point')
            .data(vis.data, (d: any) => vis.idValue(d));
@@ -106,7 +110,26 @@ export class Scatterplot extends Chart {
            .attr('r', 4)
            .attr('fill', (d: any) => vis.colorScale(vis.colorValue(d)))
            .attr('cy', vis.yScale(0)) // Start from y=0
-            .attr('cx', (d: any) => vis.xScale(vis.xValue(d)));
+            .attr('cx', (d: any) => vis.xScale(vis.xValue(d)))
+            .on('mouseover', (_event: any, d: any) => {
+                vis.tooltip.style('display', 'block')
+                    .html(`
+                        <div class="tooltip-title">${d.trail}</div>
+                        <div class="tooltip-second-title">${d.region}</div>
+                        <ul>
+                            <li>${d.distance} km, ~${d.time} hours</li>
+                            <li>${d.difficulty}</li>
+                            <li>${d.season}</li>
+                        </ul>`
+                    );
+            })
+            .on('mousemove', (event: any) => {
+                vis.tooltip.style('left', (event.pageX + 10) + 'px')
+                    .style('top', (event.pageY + 10) + 'px');
+            })
+            .on('mouseleave', () => {
+                vis.tooltip.style('display', 'none');
+            });

        circlesEnter.transition()
            .duration(1000)