davelandry

data = [
  {"value":100, "group":"alpha", "id":1},
  {"value":70, "group":"alpha", "id":2},
  {"value":40, "group":"alpha", "id":3},
  {"value":15, "group":"beta", "id":4},
  {"value":5, "group":"beta", "id":5},
  {"value":1, "group":"beta", "id":6}
]

davelandry

attrs = [
	{"id": 1, "name": "one"},
	{"id": 2, "name": "two"},
	{"id": 3, "name": "three"},
	{"id": 4, "name": "four"},
	{"id": 5, "name": "five"},
	{"id": 6, "name": "six"}
]

davelandry

attrs = {
	1: {"name": "one"},
	2: {"name": "two"},
	3: {"name": "three"},
	4: {"name": "four"},
	5: {"name": "five"},
	6: {"name": "six"}
}

davelandry

attrs = {
  "id": [
	  {"id": 1, "name": "one"},
	  {"id": 2, "name": "two"},
	  {"id": 3, "name": "three"},
	  {"id": 4, "name": "four"},
	  {"id": 5, "name": "five"},
	  {"id": 6, "name": "six"}
  ],
  "group": [

davelandry

var container = d3.select("div#container")

davelandry

function change_id(selection) {
  selection.attr("id","visualization")
}

d3.select("div#container").call(change_id)

davelandry

  visualization
    .type("tree_map")   // we're building a tree map
    .id("name")         // the unique key for our data
    .value("size")     // the key used for sizing the squares
    .dev(true)

davelandry

var rect = svg.append("rect")

davelandry

var svg = d3.select("svg#viz")

davelandry

var arr = [2,3,6,10]

rect.data(arr)