Kitchen Sink Outliner

by Nivaldo

JavaScript

var dataset = [
{id: 1, type: "type1", name: "Some name" },
{id: 2, type: "type2", name: "Some name" },
{id: 3, type: "type2", name: "Some name" },
{id: 4, type: "type1", name: "Some name" },
{id: 5, type: "type2", name: "Some name" },
{id: 6, type: "type1", name: "Some name" }];

d1 = 30;
d2 = d1 + 5;

var svg = d3.select("body").append("svg").attr("height", 600);
var g = svg.selectAll("g")
    .data(dataset)
  .enter()
  .append("g")
    .attr("class",function(d) {return d.type;});

d3.selectAll(".type1")
  .append("rect")
    .attr("x",0)
    .attr("y",function(d) {return d.id * d2;})
    .attr("width",d1)
    .attr("height",d1)
    .style("fill","blue");

d3.selectAll(".type1")
  .append("text")
    .attr("x",0)
    .attr("y",function(d) {return d.id * d2;})
    .attr("dx",d2)
    .attr("dy",d1 / 2)
    .style("fill","red")
    .text(function(d) {return d.name + " " + d.id;});

d3.selectAll(".type2")
  .append("rect")
    .attr("x",0)
    .attr("y",function(d) {return d.id * d2;})
    .attr("width",d1)
    .attr("height",d1)
    .style("stroke","blue")
    .style("fill","none");

d3.selectAll(".type2")
  .append("rect")
    .attr("x",d2)
    .attr("y",function(d) {return d.id * d2;})
    .attr("width",d1)
    .attr("height",d1)
    .style("stroke","blue")
    .style("fill","none");

d3.selectAll(".type2")
  .append("text")
    .attr("x",0)
    .attr("y",function(d) {return d.id * d2;})
    .attr("dx",d2 * 2)
    .attr("dy",d1 / 2)
    .style("fill","red")
    .text(function(d) {return d.name + " " + d.id;});