Skip to content

Instantly share code, notes, and snippets.



Created Apr 13, 2017
What would you like to do?
An issue i'm having with the d3 update pattern
<!DOCTYPE html>
<meta charset="utf-8">
<title>US Map of Nielsen Media Markets</title>
<button data-month="Jan">
<button data-month="Feb">
<div id="toggle">
<p>Initialized with "Jan", use buttons to toggle</p>
<script src=""></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})
function render(ident, key_month) {
var w = 300
var h = 100
var container =
// select and add a container div for each year in the data
// using only the data for the target month
var year = container
var yearEnter ={return d.key == key_month})[0].values)
.attr("class", "year")
// select and add a h2
var h2 ="h2")
var h2Enter = yearEnter.append('h2')
//update the text
.text(function(d){return d.values[0].month + " " + d.values[0].year})
// select and add a svg
var svg ="svg")
var svgEnter = yearEnter.append("svg")
//update the svg dimensions
.attr("width", w)
.attr("height", h)
// select and add an outer wrapper g
var locations_wrap ="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})
.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 ="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(){
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment