fix country bar chart

FilipeOrfao · Jul 24, 2024 · 3b6b0b7 · 3b6b0b7
1 parent 4d4e102
commit 3b6b0b7
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 7 deletions.
diff --git a/016_/static/css/style.css b/016_/static/css/style.css
@@ -272,6 +272,28 @@ a:hover {
   margin: 0px;
 }
 
+/* nobel-country */
+#bar-tooltip {
+  position: absolute;
+  pointer-events: none;
+  text-align: center;
+  color: #eee;
+  font-size: 12px;
+  opacity: 0.7;
+  background: #222;
+  border: 2px solid #555;
+  border-color: goldenrod;
+  padding: 10px;
+  left: -999px;
+  border-radius: 10px;
+}
+
+#bar-tooltip h2 {
+  text-align: center;
+  padding: 0px;
+  margin: 0px;
+}
+
 /* nobel-birth-month */
 
 #nobel-birth-month {

diff --git a/016_/static/js/nbviz_bar.mjs b/016_/static/js/nbviz_bar.mjs
@@ -94,7 +94,7 @@ svg
   .text("Number of winners");
 
 // updateBarChart(nobelData);
-let tooltip = d3.select("#bar-tooltip");
+let country_tooltip = d3.select("#bar-tooltip");
 function updateBarChart(data) {
   data = data.filter((d) => d.value > 0);
   data = data.slice(0, 20);
@@ -128,11 +128,28 @@ function updateBarChart(data) {
     .delay((d, i) => i * 10)
     .attr("y", (d) => yScale(d.value))
     .attr("height", (d) => height - yScale(d.value))
-    .attr("value", (d) => d.value);
-
-  svg.selectAll("bar").on("mouseenter", function (e) {
-    console.log(this.getAttribute("value"));
-  });
+    .attr("value", (d) => d.value)
+    .attr("country", (d) => d.code);
+  console.log(data);
+  svg
+    .selectAll(".bar")
+    .on("mouseenter", function (e) {
+      let bar_info = d3.select(this).datum();
+
+      country_tooltip.select("h2").text(bar_info.key);
+      country_tooltip.select("p").text(bar_info.value);
+
+      d3.select(this).classed("active", true);
+
+      country_tooltip
+        .style("left", e.layerX - 20 + "px")
+        .style("top", e.layerY - 80 + "px");
+    })
+    .on("mouseout", function (e) {
+      country_tooltip.style("left", "-9999px");
+      // month_tooltip.style("visl", "-9999px");
+      d3.select(this).classed("active", false);
+    });
 }
 
 nbviz.callbacks.push(() => {

diff --git a/016_/static/js/nbviz_birth_month.mjs b/016_/static/js/nbviz_birth_month.mjs
@@ -88,7 +88,7 @@ function updateBirthMonthBarChart(data) {
     .attr("transform", "rotate(-65)");
 
   svg.select(".y.axis").call(yAxis);
-
+  // console.log(data);
   let bars = svg
     .selectAll(".bar")
     .data(data)