yanofsky/index.html

## index.html
<!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 yearEnter = year.data(by_month.filter(function(d){return d.key == key_month})[0].values)
		.enter()
		.append("div")
		.attr("class", "year")

	// select and add a h2
	var h2 = year.select("h2")
	var h2Enter = yearEnter.append('h2')

	//update the text
	h2Enter.merge(h2)
		.text(function(d){return d.values[0].month + " " + d.values[0].year})

  // select and add a svg
	var svg = year.select("svg")
	var svgEnter = yearEnter.append("svg")

  //update the svg dimensions
	svgEnter.merge(svg)
		.attr("width", w)
		.attr("height", h)

  // select and add an outer wrapper g
	var locations_wrap = svg.select("g.locations")
	var locations_wrapEnter = svgEnter.append("g")
		.attr('class', "locations")

  // select and add element wrapper g
	var location = locations_wrap.selectAll("g.location")
	var locationEnter = locations_wrapEnter.selectAll("g.location")
		.data(function(d){return d.values})
		.enter()
		.append("g")
		.attr("class", "site")

  // merge and position element wrappers
	var locationMerged = locationEnter.merge(location)
		.attr("transform", function(d,i){return "translate("+[w/4*i]+")"})

  //select and add rects inside element
	var rects = location.select("rect")
	var rectsEnter = locationEnter.append("rect")
		.attr("x", 5)
		.attr("width", w/4 - 5)
		.attr("height", w/4 - 5)

  // ???? merge the rects and update its fill ????
  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>
	<!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 yearEnter = year.data(by_month.filter(function(d){return d.key == key_month})[0].values)
	.enter()
	.append("div")
	.attr("class", "year")

	// select and add a h2
	var h2 = year.select("h2")
	var h2Enter = yearEnter.append('h2')

	//update the text
	h2Enter.merge(h2)
	.text(function(d){return d.values[0].month + " " + d.values[0].year})

	// select and add a svg
	var svg = year.select("svg")
	var svgEnter = yearEnter.append("svg")

	//update the svg dimensions
	svgEnter.merge(svg)
	.attr("width", w)
	.attr("height", h)

	// select and add an outer wrapper g
	var locations_wrap = svg.select("g.locations")
	var locations_wrapEnter = svgEnter.append("g")
	.attr('class', "locations")

	// select and add element wrapper g
	var location = locations_wrap.selectAll("g.location")
	var locationEnter = locations_wrapEnter.selectAll("g.location")
	.data(function(d){return d.values})
	.enter()
	.append("g")
	.attr("class", "site")

	// merge and position element wrappers
	var locationMerged = locationEnter.merge(location)
	.attr("transform", function(d,i){return "translate("+[w/4*i]+")"})

	//select and add rects inside element
	var rects = location.select("rect")
	var rectsEnter = locationEnter.append("rect")
	.attr("x", 5)
	.attr("width", w/4 - 5)
	.attr("height", w/4 - 5)

	// ???? merge the rects and update its fill ????
	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>