Nested test 1

forked from anonymous's block: fresh block

forked from mpbastos's block: Nested test

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>US Map of Nielsen Media Markets</title>
  
</head>
<body>

<button class="month" data-month="Jan">
  January
</button>
<button class="month" data-month="Feb">
  February
</button>
<button id="clearb">
  Clear
</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"},
    {"location": 5, "month": "Feb", "year": 2018, "value": "#0505ff"},
	]
 
 // 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 = 500
	var h = 100

// merge and position element wrappers
  glocEnter
		.attr("transform", function(d,i){return "translate("+[w/5*i]+")"});
  
  var t = d3.transition().duration(1000);
 
  glocEnter.select("rect")
            .attr("x", (w/5 - 5)/2)
  								.attr("y", (w/5 - 5)/2)
  								.attr("width", 0)
									.attr("height", 0)
  								.attr("fill", "black")
  								.transition(t)
  								.attr("x", 5)
  								.attr("y", 0)
									.attr("width", w/5 - 5)
									.attr("height", w/5 - 5)
  								.attr("fill", function(d){return d.value});
  
}
  
// on button click change the subset of data being used
d3.selectAll(".month").on("click", function(){
    render("#toggle",this.getAttribute("data-month"))
})

d3.selectAll("#clearb").on("click", function(){
   d3.selectAll("g.loc").remove();
})

render("#toggle","Jan")
  
</script>

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