D3 Examples - Multi line chart d3 v4 with brush

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    /* Styles go here */
​
svg {
  font: 10px sans-serif;
}
​
path { 
    stroke-width: 1;
    fill: none;
}
​
#Line1, #Nebo1D {
    stroke: #009390;
}
​
#Line1Legend, #Nebo1DLegend {
    fill: #009390;
}
​
#Line2, #Nebo2D {
    stroke: #8dc63f;
}
​
#Line2Legend, #Nebo2DLegend {
    fill: #8dc63f;
}
​
#Line3, #Nebo1S {
    stroke: #132d46;
}
​
#Line3Legend, #Nebo1SLegend {
    fill: #132d46;
}
​
#Line4, #Nebo2S {
    stroke: #aaa813;
}
​
#Line4Legend, #Nebo2SLegend {
    fill: #aaa813;
}
​
#Stream5, #Nebo3 {
    stroke: #619dd4;
}
​
#Stream5Legend, #Nebo3Legend {
    fill: #619dd4;
}
​
.pn1d, .pn2d {
  fill: none;
  clip-path: url(#clip);
}
​
.pn1d {
  stroke: #009390;
}
​
.pn2d {
  stroke: #1b4164;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}
​
.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}
  </style>
</head>
​
<body>
  <script>
    // Code goes here
​
var marginFocus = {top: 10, right: 10, bottom: 250, left: 40},
    marginContext = {top: 430, right: 10, bottom: 170, left: 40},
    width = 960 - marginFocus.left - marginFocus.right,
    heightFocus = 650 - marginFocus.top - marginFocus.bottom,
    heightContext = 650 - marginContext.top - marginContext.bottom;
    legendOffset = 550;
​
let parseTime = d3.timeParse("%d-%b-%y");
​
var xFocus = d3.scaleTime().range([0, width]),
    xContext = d3.scaleTime().range([0, width]),
    yFocus = d3.scaleLinear().range([heightFocus, 0]),
    yContext = d3.scaleLinear().range([heightContext, 0]);
​
        var xAxisFocus = d3.axisBottom(xFocus);
        var xAxisContext = d3.axisBottom(xContext); 
        var yAxisFocus = d3.axisLeft(yFocus); 
 
var levelFocus = d3.line()
    .x(function(d) { console.log("level");
                    console.log(d.date); 
                    console.log(xFocus(d.date));
                    return xFocus(d.date); })
    .y(function(d) { return yFocus(d.value); });
​
​
var levelContext = d3.line()
    .x(function(d) {
 
      return xContext(d.date); })
    .y(function(d) { return yContext(d.value); });
​
var svg = d3.select("body").append("svg")
    .attr("width", width + marginFocus.left + marginFocus.right)
    .attr("height", heightFocus + marginFocus.top + marginFocus.bottom);
​
svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", heightFocus);
​
var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + marginFocus.left + "," + marginFocus.top + ")");
​
var context = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + marginContext.left + "," + marginContext.top + ")");
​
d3.json("data.json", function(error, data) {
    data.forEach(function(d) {
    d.date = parseTime(d.date);
    d.value = +d.value;
    });
    
   //  console.log(data);
 
  xFocus.domain(d3.extent(data.map(function(d) {console.log("domain");
                                                console.log(d); 
                                                return d.date; })));
  yFocus.domain([d3.min(data.map(function(d) { return d.value; })),d3.max(data.map(function(d) { return d.value; }))]);
  xContext.domain(xFocus.domain()); 
  yContext.domain(yFocus.domain());
​
    // Nest the entries by piezo
    var dataNest = d3.nest()
        .key(function(d) {return d.key;})
        .entries(data);
  
  console.log(dataNest);
​
 
    legendSpace = width/dataNest.length; // spacing for legend // ******
​
​
  var brush = d3.brushX(xContext)
  //.extent([0, 1])
    .on("brush", brushed);
​
​
focus.selectAll("g").data(dataNest)
    .enter()
    .append("g")
    .attr("id", function(d) { return d.key.replace(/\s+/g, '') })  //the replace stuff is getting rid of spaces
    .append("path")
    .attr("class", "line")
    .attr("d", function(d) {console.log(d);  return levelFocus(d.values); });    
​
context.selectAll("g").data(dataNest)
    .enter()
    .append("g")
    .attr("class", "line")
    .attr("id", function(d) { return d.key.replace(/\s+/g, '') })  //the replace stuff is getting rid of spaces
    .append("path")
    .attr("d", function(d) { return levelContext(d.values); });    
​
  focus.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + heightFocus + ")")
      .call(xAxisFocus);
​
  focus.append("g")
      .attr("class", "y axis")
      .call(yAxisFocus);
​
  context.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + heightContext + ")")
      .call(xAxisContext);
​
  context.append("g")
      .attr("class", "x brush")
      .call(brush)
    .selectAll("rect")
      .attr("y", -6) 
      .attr("height", heightContext + 7);
  
function brushed() {
  /*console.log(d3.event.selection);  
  console.log(levelFocus);
  console.log(xAxisFocus);
  console.log(xContext); */
  xFocus.domain(d3.event.selection === null ? xContext.domain() : brush.extent());
  focus.selectAll("path.line").attr("d", function(d) { 
  console.log(d);  
  return levelFocus(d); }); 
  //focus.select(".x.axis").call(xAxisFocus);
//console.log("brushed");   
  //console.log(d3.event.sourceEvent.type);
  //console.log(d3.event.selection);
}
​
​
});
​
​
​
  </script>
</body>
​
    