Add files via upload

updated tooltip

Author: francescalicc

main.js

@@ -1,68 +1,116 @@
-// Data
+// Data 
 let data = [
     { gender: 'Female', 'Physical Activity': 2.43, 'Study Time': 4.49, 'Screen Time': 6.44, 'Sleep': 7.31 },
-    { gender: 'Male', 'Physical Activity': 3.05, 'Study Time': 4.58, 'Screen Time': 8.5, 'Sleep': 7.14 }
-];
+    { gender: 'Male',   'Physical Activity': 3.05, 'Study Time': 4.58, 'Screen Time': 8.5, 'Sleep': 7.14 }
+  ];
+  
+  const keys   = ['Physical Activity', 'Study Time', 'Screen Time', 'Sleep'];
+  const colors = ['#dbdb8d', '#aec7e8', '#ff9896', '#ffbb78'];
+  
+  let width  = 600,
+      height = 400;
+  
+  let margin = { top: 50, bottom: 60, left: 60, right: 160 };
+  
+  let svg = d3.select('body')
+    .append('svg')
+    .attr('width',  width)
+    .attr('height', height);
 
-const keys = ['Physical Activity', 'Study Time', 'Screen Time', 'Sleep'];
-const colors = ['#dbdb8d', '#aec7e8', '#ff9896', '#ffbb78'];
-let width = 600,
-height = 400;
-let margin = { top: 50, bottom: 60, left: 60, right: 160 };
-let svg = d3.select('#chart')
-.append('svg')
-.attr('width', width)
-.attr('height', height);
-let stack = d3.stack().keys(keys);
-let series = stack(data);
-let maxVal = d3.max(series, s => d3.max(s, d => d[1]));
-let yScale = d3.scaleLinear()
+  let tooltip = d3.select('body')
+    .append('div')
+    .style('position',         'absolute')
+    .style('background',       'rgba(0,0,0,0.75)')
+    .style('color',            '#fff')
+    .style('padding',          '8px 12px')
+    .style('font-size',        '13px')
+    .style('pointer-events',   'none')
+    .style('opacity',          0);
+  
+  let stack  = d3.stack().keys(keys);
+  let series = stack(data);
+  
+  let maxVal = d3.max(series, s => d3.max(s, d => d[1]));
+  
+  let yScale = d3.scaleLinear()
     .domain([0, Math.ceil(maxVal)])
     .range([height - margin.bottom, margin.top]);
-let xScale = d3.scaleBand()
+  
+  let xScale = d3.scaleBand()
     .domain(data.map(d => d.gender))
     .range([margin.left, width - margin.right])
     .padding(0.35);
 
-let yAxis = svg.append('g')
+  let yAxis = svg.append('g')
     .call(d3.axisLeft(yScale).ticks(6))
     .attr('transform', `translate(${margin.left}, 0)`);
-let xAxis = svg.append('g')
+  
+  let xAxis = svg.append('g')
     .call(d3.axisBottom(xScale).tickSize(0))
     .attr('transform', `translate(0, ${height - margin.bottom})`);
-
-// Input axis labels
-svg.append('text')
+  
+  // Input axis labels
+  svg.append('text')
     .attr('x', -(height / 2))
     .attr('y', 18)
     .attr('transform', 'rotate(-90)')
     .attr('text-anchor', 'middle')
     .text('Average hours per day');
-svg.append('text')
+  
+  svg.append('text')
     .attr('x', margin.left + (width - margin.left - margin.right) / 2)
     .attr('y', height - 10)
     .attr('text-anchor', 'middle')
-    .text('Gender');
-let groups = svg.selectAll('g.series')
+    .text('Sex');
+  
+  let groups = svg.selectAll('g.series')
     .data(series)
     .enter()
     .append('g')
     .attr('class', 'series')
     .attr('fill', (d, i) => colors[i]);
-groups.selectAll('rect')
+  
+  groups.selectAll('rect')
     .data(d => d)
     .enter()
     .append('rect')
-    .attr('x', d => xScale(d.data.gender))
-    .attr('y', d => yScale(d[1]))
-    .attr('width', xScale.bandwidth())
-    .attr('height', d => yScale(d[0]) - yScale(d[1]));
+    .attr('x',      d => xScale(d.data.gender))
+    .attr('y',      d => yScale(d[1]))
+    .attr('width',  xScale.bandwidth())
+    .attr('height', d => yScale(d[0]) - yScale(d[1]))
+    .style('cursor', 'pointer')
+    .on('mouseover', function(event, d) {
+        const key    = d3.select(this.parentNode).datum().key;
+        const rawVal = d.data[key];
+        const total  = keys.reduce((sum, k) => sum + d.data[k], 0);
+        const pct    = ((rawVal / total) * 100).toFixed(1);
+
+        tooltip
+            .style('opacity', 1)
+            .html(`
+                <strong>${d.data.gender}</strong><br/>
+                <span style="color:#ccc">${key}</span><br/>
+                ${rawVal.toFixed(2)} hrs &nbsp;|&nbsp; ${pct}%
+            `);
 
-// Create the legend
-let legend = svg.append('g')
+        d3.select(this).style('filter', 'brightness(1.2)');
+    })
+    .on('mousemove', function(event) {
+        tooltip
+            .style('left', (event.pageX + 14) + 'px')
+            .style('top',  (event.pageY - 36) + 'px');
+    })
+    .on('mouseout', function() {
+        tooltip.style('opacity', 0);
+        d3.select(this).style('filter', null);
+    });
+  
+  // Create the legend
+  let legend = svg.append('g')
     .attr('transform', `translate(${width - margin.right + 16}, ${margin.top})`);
-keys.forEach((key, i) => {
+  
+  keys.forEach((key, i) => {
     let row = legend.append('g').attr('transform', `translate(0, ${i * 24})`);
     row.append('rect').attr('width', 12).attr('height', 12).attr('fill', colors[i]);
     row.append('text').attr('x', 18).attr('y', 10).style('font-size', '12px').text(key);
-})
+  });