Signal Plot II (highlighting + tooltips)

Signal Plot II (with highlighting and tooltips)

Simple line chart that displays three dimensions of data taken from an accelerometer. This chart also supports line highlighting when mousing over, inspired from lwthatcher's block: Multi y-axis with mouseover, as well as displaying tooltips inspired from d3noob's block: Simple tooltips in v4.

This is a very basic expansion from Signal Plot I designed to illustrate adding highlighting and tooltips to a line chart.

Built with blockbuilder.org

forked from lwthatcher's block: Signal Plot I

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
.line {
  fill: none;
  opacity: 0.9;
  stroke-width: 1.5px;
}

.line--x {
  stroke: steelblue;
}
  
.line--y {
  stroke: coral;
}

.line--z {
  stroke: purple;
}
  
.line--fade {
  stroke-width: 1.4px;
  opacity: 0.5;  
}
  
.line--hover {
  stroke-width: 2px;
  opacity: 1.0;
}
  
div.tooltip {
  position: absolute;
  text-align: center;
  pointer-events: none;
  
  line-height: 1;
  font-weight: bold;
  padding: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 2px;
}
  
/* Creates a small triangle extender for the tooltip */
div.tooltip:after {
  clear;
  box-sizing: border-box;
  display: inline;
  font-size: 11px;
  top: 95%;
  left: 50%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.6);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

</style>
</head>

<body>
<script>
// set the dimensions and margins of the graph
var margin = {top: 20, right: 40, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// the different dimensions in the data
var dims = ['x', 'y', 'z'];

// set x-range
var x = d3.scaleLinear().range([0, width]);
  
// set the y-ranges
var Y = {}
dims.forEach(dim => {
  Y[dim] = d3.scaleLinear().range([height, 0]);
});

// define the line functions for each dimension
var lines = {}
dims.forEach(dim => { 
  lines[dim] = d3.line()
    .x(d => x(d.tick))
    .y(d => Y[dim](d[dim]));
});

// tooltip
var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

// create the svg object
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// process the data
d3.csv("accel-data.csv",(error, data) => {
  if (error) throw error;
  
  // Parse the data
  data.forEach(d => {
      d.tick = +d.tick;
      d.x = +d.x;
      d.y = +d.y;
      d.z = +d.z;
  });
  // Set domain scales
  x.domain(d3.extent(data, d => d.tick));
  for(var dim of dims) {
    Y[dim].domain(d3.extent(data, d => d[dim]));
  }
  
  // Draw Paths
  for (var dim of dims) {
    svg.append("path")
    	  .data([data])
        .attr("class", "line line--"+dim)
    		.attr("name", dim)
        .attr("d", d => lines[dim](d))
    		.on("mouseover", mouseover)
    		.on("mouseout", mouseout)
  }
  
  // Add the X Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
  
  // Add the Y Axis (Note how we only need one axis)
  svg.append("g")
      .attr("class", "axisSteelBlue")
      .call(d3.axisLeft(Y['x']));
  
  // mouseover function
  function mouseover(d) {
    var name = d3.select(this).attr("name");
    
    // highlight this line, fade other lines
    d3.selectAll(".line").classed("line--hover", (d, i) => {
      return (name === dims[i]);
    }).classed("line--fade", (d, i) => {
      return (name !== dims[i]);
    });
    
    // display tooltip
    div.transition()
    	.duration(200)
    	.style("opacity", 1);
    div.html("accelerometer - " + name)
    	.style("left", (d3.event.pageX - 70) + "px")
      .style("top", (d3.event.pageY - 40) + "px");
  }
  
  // mouseout function
  function mouseout(d) {
    // turn off hover and fade effects
    d3.selectAll(".line")
      .classed("line--hover", false)
      .classed("line--fade", false);
    
    // hide tooltip
    div.transition()
    	.duration(500)
    	.style("opacity", 0);
  }
});
    
</script>
</body>

https://d3js.org/d3.v4.min.js