pstuffa/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from pstuffa's block: treemaps

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0;
/*       position:fixed; */
      top:0;
      right:0;
      bottom:0;
      left:0;
    }

    .parent {
      background-color: #f4f4f4;
      border: 1px solid #000;
      width: 100px;
      max-width: 100px
      height: 100px;
      display: inline-table;
      margin: 2px;
    }

    .child {
      background-color: #d3d3d3;
      width: 10px;
      height: 10px;
      border: 1px solid #afafaf;
      padding: 2px;
      margin: 2px;
      display: inline-table;
    }

  </style>
</head>

<body>
  <script>

    var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");

    function update() {

      var data = d3.shuffle(alphabet)
      	.slice(0, Math.floor(Math.random() * 26))
      	.sort();

    	// Parent Selection
   		var parents = d3.select("body").selectAll(".parent")
    		.data(data, function(d) { return d });

      // Exit
      parents
        .exit()
      	.transition() // Added to make it easier to see updates
      	.style("opacity",0)
        .remove()

      // Enter
      parents.enter().append("div")
        .attr("class", "parent")
      	.merge(parents) // this allows you to do enter & update
        .each(function() {

          var thisParent = d3.select(this);
          var childData = d3.shuffle(alphabet)
            .slice(0, Math.floor(Math.random() * 26))
            .sort();

        // Child Selection
          var children = thisParent.selectAll(".child")
              .data(childData, function(d) { return d });
        // Child Exit
       	children.exit().remove();
        	// Child Enter
         children.enter().append("div")
              .attr("class", "child")
         			.transition() // Added to make it easier to see updates
              .text(function(d) { return d });


        });

    }

		update();
    d3.interval(update, 4000)
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	margin:0;
	/* position:fixed; */
	top:0;
	right:0;
	bottom:0;
	left:0;
	}

	.parent {
	background-color: #f4f4f4;
	border: 1px solid #000;
	width: 100px;
	max-width: 100px
	height: 100px;
	display: inline-table;
	margin: 2px;
	}

	.child {
	background-color: #d3d3d3;
	width: 10px;
	height: 10px;
	border: 1px solid #afafaf;
	padding: 2px;
	margin: 2px;
	display: inline-table;
	}

	</style>
	</head>

	<body>
	<script>

	var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");

	function update() {

	var data = d3.shuffle(alphabet)
	.slice(0, Math.floor(Math.random() * 26))
	.sort();

	// Parent Selection
	var parents = d3.select("body").selectAll(".parent")
	.data(data, function(d) { return d });

	// Exit
	parents
	.exit()
	.transition() // Added to make it easier to see updates
	.style("opacity",0)
	.remove()

	// Enter
	parents.enter().append("div")
	.attr("class", "parent")
	.merge(parents) // this allows you to do enter & update
	.each(function() {

	var thisParent = d3.select(this);
	var childData = d3.shuffle(alphabet)
	.slice(0, Math.floor(Math.random() * 26))
	.sort();

	// Child Selection
	var children = thisParent.selectAll(".child")
	.data(childData, function(d) { return d });
	// Child Exit
	children.exit().remove();
	// Child Enter
	children.enter().append("div")
	.attr("class", "child")
	.transition() // Added to make it easier to see updates
	.text(function(d) { return d });


	});

	}

	update();
	d3.interval(update, 4000)
	</script>
	</body>