Fort Ross MouseOver and Focus with Accents

This is similar to previous examples, except that I am exploring different ways of emphasizing the moused over data. In this case, opacity is changed on mouseover as is the width of the colored line. The wider line is a bit challenging when viewing the data as a whole, but does tend to improve visibility when "zoomed in". I'm not sure the background lines are faint enough, but making them too faint may defeat the purpose of showing their colors.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
 
svg {
  font: 10px sans-serif;
}
 
 
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.y.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke-width: 2px;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
 
var margin = {top: 10, right: 10, bottom: 100, left: 40},
    margin2 = {top: 430, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    height2 = 500 - margin2.top - margin2.bottom;
 
var color = d3.scale.category10();
 
var parseDate = d3.time.format("%m-%d-%y %H:%M:%S").parse;
 
var x = d3.time.scale().range([0, width]),
    x2 = d3.time.scale().range([0, width]),
    y = d3.scale.linear().range([height, 0]),
    y2 = d3.scale.linear().range([height2, 0]);
 
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).orient("left");
 
var brush = d3.svg.brush()
    .x(x2)
    .on("brush", brush);
 
var line = d3.svg.line()
    .defined(function(d) { return !isNaN(d.temperature); })
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });
 
var line2 = d3.svg.line()
    .defined(function(d) { return !isNaN(d.temperature); })
    .interpolate("basis")
    .x(function(d) {return x2(d.date); })
    .y(function(d) {return y2(d.temperature); });
 
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
 
svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);
 
var focus = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      
var context = svg.append("g")
  .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
 
d3.csv("FR_data_Summer1.csv", function(error, data) {
 
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
 
    data.forEach(function(d) {
      d.date = parseDate(d.date);
    });
 
  var sources = color.domain().map(function(name) {
      return {
        name: name,
        values: data.map(function(d) {
          return {date: d.date, temperature: +d[name]};
        })
      };
    });
 
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([d3.min(sources, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
              d3.max(sources, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); }) ]);
    x2.domain(x.domain());
    y2.domain(y.domain());
    
    var focuslineGroups = focus.selectAll("g")
        .data(sources)
      .enter().append("g");
      
    var focuslines = focuslineGroups.append("path")
        .attr("class","line")
        .attr("d", function(d) { return line(d.values); })
        .style("stroke",function(d) {return color(d.name);})
        .style("stroke-opacity",0.3)
      .on("mouseover", function(d){
        d3.select(this)
          .style("stroke",function(d) {return color(d.name);})
          .style("stroke-opacity",1.0)
          .style("stroke-width", 2.5);
          this.parentNode.parentNode.appendChild(this.parentNode);    
      })
      .on("mouseout", function(d) {
          d3.select(this)
            .transition()
            .duration(750)
            .style("stroke",function(d) {return color(d.name);})
            .style("stroke-opacity", 0.3)
            .style("stroke-width", 2.0)
          })
        .attr("clip-path", "url(#clip)")
        .attr("id", function(d, i) { return "path-" + d.name; });
    
    var focustext = focuslineGroups.append("text")
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length-60]}; })
      .attr("transform", function(d) { return "translate(20,10)"; })
      .attr("x", function(d,i) {return (i+2)*80;})
      .attr("dy", ".35em")
      .style("stroke",function(d) {return color(d.name);})
      .style("fill",function(d) {return color(d.name);})
      .on("mouseover", function(d){
    d3.select('#path-' + d.name)
       .style("stroke",function(d) {return color(d.name);})
       .style("stroke-opacity", 1.0)
       .style("stroke-width", 2.5);
       this.parentNode.parentNode.appendChild(this.parentNode);
      })
      .on("mouseout", function(d) {
    d3.select('#path-' + d.name)
      .transition()
      .duration(750)
      .style("stroke",function(d) {return color(d.name);})
      .style("stroke-opacity", 0.3)
      .style("stroke-width", 2.0);
    })
      .text(function(d) { return d.name; })
      .attr("font-family","sans-serif")
      .attr("font-size","11px")
      .attr("id", function(d, i) { return "text-" + d.name; });
    
    focus.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
 
    focus.append("g")
        .attr("class", "y axis")
        .call(yAxis);
        
    var contextlineGroups = context.selectAll("g")
        .data(sources)
      .enter().append("g");
    
    var contextLines = contextlineGroups.append("path")
        .attr("class", "line")
        .attr("d", function(d) { return line2(d.values); })
        .style("stroke", function(d) {return color(d.name);})
        .attr("clip-path", "url(#clip)");
 
    context.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height2 + ")")
        .call(xAxis2);
 
    context.append("g")
        .attr("class", "x brush")
        .call(brush)
      .selectAll("rect")
        .attr("y", -6)
        .attr("height", height2 + 7);
        
        
});
 
function brush() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.selectAll("path.line").attr("d",  function(d) {return line(d.values)});
  focus.select(".x.axis").call(xAxis);
  focus.select(".y.axis").call(yAxis);
}
 
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

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