Reusable Trees

_.md

[ Launch: Reusable Trees ] 75ccb340a075beed1c16 by ramnathv

app.css

.link {
  fill: none;
  stroke: #cecece
}

text {
  font-size: 12px;
}

circle {
  fill: white;
  stroke: steelblue
}

rect {
  fill: white;
  stroke: white;
  stroke-width: 3
}

/* tooltips */
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none !important;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
}

/* Nrthward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px;
}

/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}

.hi {
  width: 20px;
  height: 10px;
  background: green;
}

config.json

{"description":"Reusable Trees","endpoint":"","display":"svg","public":true,"require":[{"name":"d3tip","url":"http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"species.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"new.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"test1.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"test2.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/ewD106q.png"}

inlet.coffee

elbow = (d) ->
  'M' + d.source.x + ',' + d.source.y + 'H' + d.target.x + 'V' + d.target.y + (if d.target.children then '' else 'h' + 20)
d3.viz = {}
d3.viz.tree = (A, O) ->
  that = this
  tree = d3.layout.tree().size([O.width, O.height])
  @diagonal = d3.svg.diagonal().projection (d) -> [A.x(d), A.y(d)]
  exports = (selection) ->
    selection.each (data) ->
    
      # Create data
      nodes = tree.nodes(data)
      nodes.forEach((d, i) -> d.id = i; d)
      links = tree.links(nodes)

      # Create links
      link = d3.select(this)
        .selectAll('.link').data(links)
        
      linkEnter = link.enter()
        .append("path")
        .attr("class", "link")
        .attr("d", that.diagonal)

      # Create nodes
      node = d3.select(this)
        .selectAll('.node')
        .data(nodes, (d) -> d.id)
        
      nodeEnter = node.enter()
        .append("g")
        
        
      node
        .attr("transform", (d) -> "translate(#{A.x d}, #{A.y d})")
        .attr("class", (d) -> "node #{d.type}")
      
      ww = 33; hh = 17
      # Append rectangles
      nodeEnter.append("rect")
        .attr("x", -ww/2)
        .attr("y", -hh/2)
        .attr("width", ww)
        .attr("height", hh)
        .attr("rx", 6)
        .attr("ry", 6)

      nodeEnter.append("text")
        .attr("x", 0)
        .attr("dy", "-1.52em")
        .attr("text-anchor", "middle")
        .text((d) -> d.name)
  exports
  
data = tributary.test1

#A = (d) -> [d.x, d.y]
O = {width: 600, height: 327}

A = 
  x: (d) -> d.x
  y: (d) -> d.y


O.margin = {top: 66, right: 39, bottom: 40, left: 60}
O.W = O.width + O.margin.left + O.margin.right
O.H = O.height + O.margin.top + O.margin.bottom

  

svg = d3.select("svg")
    .attr("width", O.W)
    .attr("height", O.H)
    .append("g")
    .attr("transform", "translate(" + O.margin.left + "," + O.margin.top + ")")
    


mytree = d3.viz.tree(A, O)

svg.datum(data).call(mytree)

tip = d3.tip()
  .attr('class', 'd3-tip')
  .html((d) -> d.id)
  .direction('s')
  .offset([0, 0])

svg.call(tip)

d3.selectAll("rect")
  .on("mouseover", tip.show)
  .on("mouseout", tip.hide)


    
    

species.json

{
  "name": "Carnivora",
  "children": [
    {
      "name": "Felidae",
      "children": [
        {
          "name": "Felis",
          "children": [
            {
              "name": "catus",
              "type": "domesticated"
            }
          ]
        },
        {
          "name": "Panthera",
          "children": [
            {
              "name": "tigris",
              "type": "wild"
            },
            {
              "name": "leo",
              "type": "wild"
            },
            {
              "name": "onca",
              "type": "wild"
            },
            {
              "name": "pardus",
              "type": "wild"
            }
          ]
        }
      ]
    },
    {
      "name": "Canidae",
      "children": [
        {
          "name": "Canis",
          "children": [
            {
              "name": "lupus",
              "type": "domesticated"
            },
            {
              "name": "latrans",
              "type": "wild"
            },
            {
              "name": "aureus",
              "type": "wild"
            }
          ]
        }
      ]
    }
  ]
}

test1.json

{"name":"Root","children":[{"name":"A","children":[{"name":"b","value":1},{"name":"c","value":1},{"name":"d","children":[{"name":"e","value":2},{"name":"f","value":6}]}]},{"name":"B","children":[{"name":"d","value":1}]}]}