title: D3 filtering root data from flare.csv for treemap
body: <p>I have the following csv-formatted data saved into a variable called <code>csvData</code> and I'm trying to only show certain parts of it. The variable is formatted like so ...</p>
  
  <pre><code>var csvData = 'id,value
  flare,
  flare.analytics,
  flare.analytics.cluster,
  flare.analytics.cluster.AgglomerativeCluster,3938
  flare.analytics.cluster.CommunityStructure,3812
  flare.analytics.cluster.HierarchicalCluster,6714
  flare.analytics.cluster.MergeEdge,743
  flare.analytics.graph,
  flare.analytics.graph.BetweennessCentrality,3534
  flare.analytics.graph.LinkDistance,5731
  flare.analytics.graph.MaxFlowMinCut,7840
  flare.analytics.graph.ShortestPaths,5914
  flare.analytics.graph.SpanningTree,3416
  flare.analytics.optimization,
  flare.analytics.optimization.AspectRatioBanker,7074
  flare.animate,
  flare.animate.Easing,17010
  flare.animate.FunctionSequence,5842
  flare.animate.interpolate,
  flare.animate.interpolate.ArrayInterpolator,1983
  flare.animate.interpolate.ColorInterpolator,2047
  flare.animate.interpolate.DateInterpolator,1375
  flare.animate.interpolate.Interpolator,8746
  flare.animate.interpolate.MatrixInterpolator,2202
  flare.animate.interpolate.NumberInterpolator,1382
  flare.animate.interpolate.ObjectInterpolator,1629
  flare.animate.interpolate.PointInterpolator,1675
  flare.animate.interpolate.RectangleInterpolator,2042
  flare.animate.ISchedulable,1041
  flare.animate.Parallel,5176
  flare.animate.Pause,449
  flare.animate.Scheduler,5593
  flare.animate.Sequence,5534
  flare.animate.Transition,9201
  flare.animate.Transitioner,19975
  flare.animate.TransitionEvent,1116
  flare.animate.Tween,6006'
  </code></pre>
  
  <p>I am able to display all the data in a treemap by pulling it in like so ...</p>
  
  <pre><code>var stratify = d3.stratify()
      .parentId(function(d) {
          return d.id.substring(0, d.id.lastIndexOf("."));
      });
  
  var treemap = d3.treemap()
      .size([width, height])
      .padding(1)
      .round(true);
  
  var data = d3.csvParse(csvData, function(d) {
      return {
          id: d.id, // lowercase
          value: +d.value // lowercase
      };
  });
  
  var root = stratify(data)
      .sum(function(d) {
          return d.value;
      })
      .sort(function(a, b) { return b.height - a.height || b.value - a.value; });
  
  treemap(root);
  </code></pre>
  
  <p>And then using <code>.data(root.leaves())</code> like so ...</p>
  
  <pre><code>d3.select("#treeChart")
      .selectAll(".node")
      .data(root.leaves())
      .enter().append("div")
      .attr("class", "node")
      //... more stuff here ...
  </code></pre>
  
  <p>But that shows everything and I just want to show the <code>analytics</code> part and NOT the <code>animate</code> part. From what I gathered, I need to filter the root data but I'm not sure how to get at it. Eventually I'd like to have a pull-down that switches between <code>analytics</code> and <code>animate</code> but that becomes a second post. So I'm starting with just showing the initial <code>analytics</code> part. </p>