d3.js focus + context via brushing multiple paths not showing up

Question

I referred to this stackoverflow link for some code but for some reason on my chart, the chart disappears when I try to zoom in. I tried putting the code and the data in this Vida document but the visualization won't show up altogether, and I still can't figure out the issue there. Thanks for the help!

svg {
font: 10px sans-serif;
}

path {
fill:none;
stroke:white;
stroke-width:2px;
}
.axis path, .axis line {
fill: none;
stroke: #CCC;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.path_H2O {
stroke:green;
}
.path_OH- {
stroke:red;
}
.path_Ca3SiO5 {
stroke:yellow;
} 

---

var margin = {top: 10, right: 20, bottom: 100, left: 40},
margin2 = {top: 630, right: 20, bottom: 20, left: 40},
width = 1600 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom,
height2 = 700 - margin2.top - margin2.bottom;

var x = d3.scale.linear().range([0, width]),
x2 = d3.scale.linear().range([0, width]),
y = d3.scale.linear().range([height, 0]),
y2 = d3.scale.linear().range([height2, 0]);

var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

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 area = function (Concent) {
return d3.svg.area()
.interpolate("step")
.x(function(d) { return x(d.Time); })
.y0(height)
.y1(function(d) { return y(d[Concent]); });
};
var area2 = function (Concent) {
return d3.svg.area()
.interpolate("step")
.x(function(d) { return x2(d.Time); })
.y0(height2)
.y1(function(d) { return y2(d[Concent]); });
};
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 + ")");

var myfunc = function(Time, data){

color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Time"; }));

 data.forEach(function(d){
      var y0 = 0; });
       /* d.concent = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
        d.total = d.concent[d.concent.length - 1].y1;});
      dataset=data;*/
      console.log(Time, data);

x.domain(d3.extent(data.map(function(d) { return d.Time; })));
y.domain([0, d3.max(data.map(function(d) { return d.H2O; }))]);
x2.domain(x.domain());
y2.domain(y.domain());


focus.selectAll('path')
    .data(['H2O', 'OH-', 'Ca3SiO5'])
  .enter()
    .append('path')
    .attr('clip-path', 'url(#clip)')
    .attr('d', function (col) {
      return area(col)(data);
    })
    .attr('class', function (col) {
      return "path_" + col + " data";
    });

focus.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

focus.append("g")
  .attr("class", "y axis")
  .call(yAxis);

  context.selectAll('path')
     .data(['H2O', 'OH-', 'Ca3SiO5'])
  .enter()
    .append('path')
    .attr('d', function (col) {
      return area2(col)(data);
    })
    .attr('class', function (col) {
      return "path_" + col;
    });

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 brushed() {
    x.domain(brush.empty() ? x2.domain() : brush.extent());
    focus.selectAll("path.data").attr("d", function (col) { return area(col)(data); });
    focus.select(".x.axis").call(xAxis);
}
};

var data= d3.json([
{
"Time":0,
"H2O":0.7223999972,
"Ca3SiO5":0.2775999921,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":0,
"H3SiO4-":0,
"Ca++":0,
"CaOH+":0,
"OH-":0,
"Vacancy":"0"
},
{
"Time":0,
"H2O":0.7223999972,
"Ca3SiO5":0.2775999921,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":0,
"H3SiO4-":0,
"Ca++":0,
"CaOH+":0,
"OH-":0,
"Vacancy":"0"
},
{
"Time":0.1011666667,
"H2O":0.722445376,
"Ca3SiO5":0.2775546219,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":1.66E-006,
"H3SiO4-":0.0007145257,
"Ca++":0.0021455429,
"CaOH+":3.01E-006,
"OH-":0.0035762526,
"Vacancy":"0"
},
{
"Time":0.2025,
"H2O":0.7224635218,
"Ca3SiO5":0.277536476,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":5.77E-006,
"H3SiO4-":0.000996856,
"Ca++":0.0029978343,
"CaOH+":1.00E-005,
"OH-":0.0049973131,
"Vacancy":"0"
},
{
"Time":0.3038333333,
"H2O":0.7224757574,
"Ca3SiO5":0.2775242411,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":1.19E-005,
"H3SiO4-":0.001183896,
"Ca++":0.0035669817,
"CaOH+":2.03E-005,
"OH-":0.005946632,
"Vacancy":"0"
},
{
"Time":0.4051666667,
"H2O":0.722485082,
"Ca3SiO5":0.277514916,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":1.92E-005,
"H3SiO4-":0.0013237783,
"Ca++":0.0039957417,
"CaOH+":3.31E-005,
"OH-":0.0066624743,
"Vacancy":"0"
},
{
"Time":0.5065,
"H2O":0.7224926814,
"Ca3SiO5":0.2775073166,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":2.77E-005,
"H3SiO4-":0.0014351806,
"Ca++":0.0043407829,
"CaOH+":4.80E-005,
"OH-":0.0072388754,
"Vacancy":"0"
},
{
"Time":0.611,
"H2O":0.7224993205,
"Ca3SiO5":0.2775006773,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":3.68E-005,
"H3SiO4-":0.0015308949,
"Ca++":0.0046383714,
"CaOH+":6.48E-005,
"OH-":0.0077369817,
"Vacancy":"0"
},
{
"Time":0.7155,
"H2O":0.7225050948,
"Ca3SiO5":0.2774949035,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":4.60E-005,
"H3SiO4-":0.0016128709,
"Ca++":0.0048938526,
"CaOH+":8.27E-005,
"OH-":0.0081655806,
"Vacancy":"0"
},
{
"Time":0.82,
"H2O":0.7225102312,
"Ca3SiO5":0.2774897666,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":5.54E-005,
"H3SiO4-":0.0016845349,
"Ca++":0.0051181417,
"CaOH+":0.0001016937,
"OH-":0.0085426217,
"Vacancy":"0"
},
{
"Time":0.9245,
"H2O":0.722514876,
"Ca3SiO5":0.2774851215,
"Ca(OH)2":0,
"CSH(II)":0,
"H2SiO4--":6.52E-005,
"H3SiO4-":0.0017480743,
"Ca++":0.0053181429,
"CaOH+":0.0001216663,
"OH-":0.0088794869,
"Vacancy":"0"
};
],myfunc);

For the full dataset, please refer to the vida document I posted. Thanks!

Answer 1

I am posting my efforts here since it is easier to type all that is needed in a greater box, if nothing else. I created a FIDDLE to help us out. A few points:

1. I had to change the variable/myfunc strategy because it was not working. You will need to tell me if this actually worked. The lines are pretty flat but your data seems to show little variation in magnitude and perhaps some tweak in the scaling may help.
2. You were calling brush but your function is called brushed...that change was enough to activate the brush to do its job.

Well, let's see what you say. I hope this helps.