D3 Examples - Nested test

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>US Map of Nielsen Media Markets</title>
  
</head>
<body>
​
 <button data-month="Jan">
  January
</button>
<button data-month="Feb">
  February
</button>
<div id="toggle">
    <p>Initialized with "Jan", use buttons to toggle</p>
</div>
  
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
//define some data
var data = [
        {"location": 1, "month": "Jan", "year": 2017, "value": "#ccc"},
        {"location": 2, "month": "Jan", "year": 2017, "value": "#999"},
        {"location": 3, "month": "Jan", "year": 2017, "value": "#666"},
        {"location": 4, "month": "Jan", "year": 2017, "value": "#333"},
        {"location": 1, "month": "Jan", "year": 2018, "value": "#fcc"},
        {"location": 2, "month": "Jan", "year": 2018, "value": "#f99"},
        {"location": 3, "month": "Jan", "year": 2018, "value": "#f66"},
    {"location": 4, "month": "Jan", "year": 2018, "value": "#f33"},
        {"location": 1, "month": "Feb", "year": 2017, "value": "#cfc"},
        {"location": 2, "month": "Feb", "year": 2017, "value": "#9f9"},
        {"location": 3, "month": "Feb", "year": 2017, "value": "#6f6"},
        {"location": 4, "month": "Feb", "year": 2017, "value": "#3f3"},
        {"location": 1, "month": "Feb", "year": 2018, "value": "#ccf"},
        {"location": 2, "month": "Feb", "year": 2018, "value": "#99f"},
        {"location": 3, "month": "Feb", "year": 2018, "value": "#66f"},
        {"location": 4, "month": "Feb", "year": 2018, "value": "#33f"},
    ]
 
 // nest the data by month then year
 var by_month = d3.nest()
        .key(function(d){return d.month})
        .key(function(d){return d.year})
        .entries(data)
    
    
function render(ident, key_month) {
​
    var w = 300
    var h = 100
​
    var container = d3.select(ident)
    
  // select and add a container div for each year in the data
  // using only the data for the target month
    var year = container
        .selectAll("div.year")
    
  var data = by_month.filter(function(d){return d.key == key_month})[0].values;
    var yearAll= year.data(data);
  
   
  yearAll.exit().remove();
  
  
  var yearEnter= yearAll
        .enter()
    .append("div")
    .classed("year",true);
​
  yearEnter = yearEnter.merge(yearAll);
  
  // add a h2
  var h2 = yearEnter.selectAll("h2")
                                    .data(function(d) {return [d];});
  
  var h2Enter = h2.enter()
              .append("h2");
                
  h2Enter.merge(h2)
    .text(function(d) {return  d.values[0].month + " " + d.values[0].year ;});
 
  // select and add a svg
    var svg = yearEnter.selectAll("svg")
                    .data(function(d) {return [d];});
  
    var svgEnter = svg.enter()
                        .append("svg");
                    
  
  svg.exit().remove();
    
  //update the svg dimensions
    svgEnter = svgEnter.merge(svg)
        .attr("width", w)
        .attr("height", h)
    
  // select and add element wrapper g
    var location_wrap = svgEnter.selectAll("g.location")
                                             .data(function(d) {return [d];});
  
  location_wrap.exit().remove();
    var location_wrapEnter = location_wrap.enter()
                                                                            .append("g")
                                                                            .classed("location",true);
  
  location_wrapEnter = location_wrapEnter.merge(location_wrap);
            
  
  var location =location_wrapEnter.selectAll("g")
                                   .data(function(d){return d.values});
  
  location.exit().remove();
  
    var locationEnter = location.enter()
                                            .append("g");
                    
  
  // merge and position element wrappers
    var locationEnter = locationEnter.merge(location)
        .attr("transform", function(d,i){return "translate("+[w/4*i]+")"});
​
  var rects = locationEnter.selectAll("rect")
                                    .data(function(d){return [d];});
 
  rects.exit().remove();
  var rectsEnter = rects.enter()
                                .append("rect")
                                .attr("x", 5)
                                    .attr("width", w/4 - 5)
                                    .attr("height", w/4 - 5);
  
  rectsEnter.merge(rects).attr("fill", function(d){return d.value});
​
}
​
// on button click change the subset of data being used
d3.selectAll("button").on("click", function(){
    render("#toggle",this.getAttribute("data-month"))
}) 
​
render("#toggle","Jan")
  
</script>
    