enjalot/.block

## .block
height: 1050px

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }

    .branch {
      fill: none;
      stroke: #111;
    }
  </style>
</head>

<body>
  <script>
    // RECURSION EXAMPLE
    var index = 0;
    function f(n) {
      var step = {
        step: index++,
        param: n
      }
      if(n > 1) {
        var child1 = f(n-1);
        var child2 = f(n-1);
        step.children = [child1, child2]
      }
      step.returnStep = index;
      return step;
    }

    // CALL THE FUNCTION
    var tree = f(4);
    console.log(tree);

    var color = d3.scale.linear()
    .domain([0, tree.returnStep])
    .range(["#eee", "#f00"])

    // RENDER THE VIS
    var width = 960;
    var height = 500;
    var svg = d3.select("body").append("svg")

    var diagonal = d3.svg.diagonal()
      .projection(function(d) { return [d.x, d.y]; });

    var treegroup = svg.append("g")
    	.attr("transform", "translate(0, 20)")

    var treeLayout = d3.layout.tree()
      .size([width, height - 20])

    var leaves = treeLayout.nodes(tree)
    var branches = treeLayout.links(leaves)

    var branch = treegroup.selectAll(".branch")
      .data(branches)
    branch
    .enter().append("path").classed("branch", true)
    .attr({
      d: diagonal
    })

    var leaf = treegroup.selectAll(".leaf")
      .data(leaves)
    leaf
    .enter().append("circle")
      .classed("leaf", true)
      .attr({
        cx: function(d) { return d.x },
        cy: function(d) { return d.y},
        r: 10,
        fill: function(d) { return color(d.step)}
      })

    var steps = svg.selectAll("g.step")
      .data(leaves)
    var stepsEnter = steps.enter().append("g").classed("step", true)

    stepsEnter.append("text")
    .text(function(d) { return d.step })
    .attr({
      x: function(d,i) { return 100 + i * 20 },
      y: 600,
    })
    stepsEnter.append("rect")
    .attr({
      x: function(d,i) { return 100 + i * 20 },
      y: 600,
      width: 15,
      height: 15
    })
    .on("mouseover", function(step) {
      console.log("step", step)
      leaf
      .style({
        "fill-opacity": 1,
        r: 10
      })
        .filter(function(d) { return d.step > step.step })
      .style({
        "fill-opacity": 0.2,
        r: 3
      })
    })


  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width:100%; height: 100% }

	.branch {
	fill: none;
	stroke: #111;
	}
	</style>
	</head>

	<body>
	<script>
	// RECURSION EXAMPLE
	var index = 0;
	function f(n) {
	var step = {
	step: index++,
	param: n
	}
	if(n > 1) {
	var child1 = f(n-1);
	var child2 = f(n-1);
	step.children = [child1, child2]
	}
	step.returnStep = index;
	return step;
	}

	// CALL THE FUNCTION
	var tree = f(4);
	console.log(tree);

	var color = d3.scale.linear()
	.domain([0, tree.returnStep])
	.range(["#eee", "#f00"])

	// RENDER THE VIS
	var width = 960;
	var height = 500;
	var svg = d3.select("body").append("svg")

	var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.x, d.y]; });

	var treegroup = svg.append("g")
	.attr("transform", "translate(0, 20)")

	var treeLayout = d3.layout.tree()
	.size([width, height - 20])

	var leaves = treeLayout.nodes(tree)
	var branches = treeLayout.links(leaves)

	var branch = treegroup.selectAll(".branch")
	.data(branches)
	branch
	.enter().append("path").classed("branch", true)
	.attr({
	d: diagonal
	})

	var leaf = treegroup.selectAll(".leaf")
	.data(leaves)
	leaf
	.enter().append("circle")
	.classed("leaf", true)
	.attr({
	cx: function(d) { return d.x },
	cy: function(d) { return d.y},
	r: 10,
	fill: function(d) { return color(d.step)}
	})

	var steps = svg.selectAll("g.step")
	.data(leaves)
	var stepsEnter = steps.enter().append("g").classed("step", true)

	stepsEnter.append("text")
	.text(function(d) { return d.step })
	.attr({
	x: function(d,i) { return 100 + i * 20 },
	y: 600,
	})
	stepsEnter.append("rect")
	.attr({
	x: function(d,i) { return 100 + i * 20 },
	y: 600,
	width: 15,
	height: 15
	})
	.on("mouseover", function(step) {
	console.log("step", step)
	leaf
	.style({
	"fill-opacity": 1,
	r: 10
	})
	.filter(function(d) { return d.step > step.step })
	.style({
	"fill-opacity": 0.2,
	r: 3
	})
	})



	</script>
	</body>