jwilber/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## 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; }
    .text_16_2_5 {
      font: bold 48px monospace;
      fill: white
    }
    .charContainer {
      font: bold 0px monospace;
    }
    #charContainer {
      font: bold 0px monospace;
    }
    .exit_16_2_5 {
      font: bold 10px monospace;
      fill: red
    }
  </style>
</head>
<div id="alphaPack"></div>

<body>
  <script>
    const data = {
    "id": "charContainer",
    "value": 100,
    "children": []
};

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

    let depthScale = d3.scaleOrdinal()
          .range(["#548687", "#FFFFC7", "#473335", "#93c464", "#75739F"]);

const diameter = 600;

const svg = d3.select("#alphaPack").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g");

const alphaBubble = d3.pack()
    .size([diameter - 50, diameter - 50])
    .padding(5);

function update(data) {

  let nodes = d3.hierarchy(data)
            .sum(d => d.value ? d.value : undefined);

    // Data join by key to <g> nodes
    let node = svg.selectAll(".node")
        .data(alphaBubble(nodes).descendants())
//     		.attr('erea', function(d) {
//           console.log(d)
//         })

    // Data join by key to circles
    let circles = svg.selectAll("circle")
        .data(nodes, d => d.id);

    // UPDATE
    node.selectAll("circle")
        .attr("class", d => d.data.id === "charContainer" ? "container_16_2_5" : "update_16_2_5")
    		.style('fill', d => depthScale(d.depth))
    		.attr('r', d => d.r)

    // ENTER
    let enterNode = node.enter().append("g")
        .attr("class", "node");

    enterNode.append("circle")
        .attr("class", d => d.data.id === "charContainer" ? "container_16_2_5" : "enter_16_2_5")
        .style("fill-opacity", 1e-6)
    		.style("fill", d => depthScale(d.depth))

    enterNode.append("text")
        .attr("class", "text_16_2_5")
    		.text(d => d.data.id)
        .attr("dx", -14)
        .attr("dy", ".25em");

    // All
    node.transition().duration(750)
        .attr("transform", d => "translate(" + d.x + ", " + d.y + ")");

    node.selectAll("circle")
      .transition()
        .duration(750)
        .attr("r", function(d) {
      console.log('d.r', d.r)
      return d.r
    })
        .style("fill-opacity", 1);

    // EXIT
    node.exit().selectAll("circle")
        .attr("class", "exit_16_2_5");

    node.exit()
      .transition()
        .duration(750)
        .attr("transform", d => "translate(" + (+500) + ", " + (+500) + ")")
        .remove();

    node.exit().selectAll("circle")
      .transition()
        .duration(750)
    		.style('fill', 'red')
//         .style("fill-opacity", 1e-6);
}

function objectify(alphArr) {
    let objArr = [];
    for(let i = 0; i < alphArr.length; i++) {
        objArr.push({"id": alphArr[i], "value": 25});
    }
    return objArr;
}

data.children = objectify(alphabet);

update(data);

setInterval(function() {
    let newChildren = d3.shuffle(alphabet)
        .slice(0, Math.floor(Math.random() * 26))
        .sort();
    data.children = objectify(newChildren);
    update(data);
}, 2000);
  </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; }
	.text_16_2_5 {
	font: bold 48px monospace;
	fill: white
	}
	.charContainer {
	font: bold 0px monospace;
	}
	#charContainer {
	font: bold 0px monospace;
	}
	.exit_16_2_5 {
	font: bold 10px monospace;
	fill: red
	}
	</style>
	</head>
	<div id="alphaPack"></div>

	<body>
	<script>
	const data = {
	"id": "charContainer",
	"value": 100,
	"children": []
	};

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

	let depthScale = d3.scaleOrdinal()
	.range(["#548687", "#FFFFC7", "#473335", "#93c464", "#75739F"]);

	const diameter = 600;

	const svg = d3.select("#alphaPack").append("svg")
	.attr("width", diameter)
	.attr("height", diameter)
	.append("g");

	const alphaBubble = d3.pack()
	.size([diameter - 50, diameter - 50])
	.padding(5);

	function update(data) {

	let nodes = d3.hierarchy(data)
	.sum(d => d.value ? d.value : undefined);

	// Data join by key to <g> nodes
	let node = svg.selectAll(".node")
	.data(alphaBubble(nodes).descendants())
	// .attr('erea', function(d) {
	// console.log(d)
	// })

	// Data join by key to circles
	let circles = svg.selectAll("circle")
	.data(nodes, d => d.id);

	// UPDATE
	node.selectAll("circle")
	.attr("class", d => d.data.id === "charContainer" ? "container_16_2_5" : "update_16_2_5")
	.style('fill', d => depthScale(d.depth))
	.attr('r', d => d.r)

	// ENTER
	let enterNode = node.enter().append("g")
	.attr("class", "node");

	enterNode.append("circle")
	.attr("class", d => d.data.id === "charContainer" ? "container_16_2_5" : "enter_16_2_5")
	.style("fill-opacity", 1e-6)
	.style("fill", d => depthScale(d.depth))

	enterNode.append("text")
	.attr("class", "text_16_2_5")
	.text(d => d.data.id)
	.attr("dx", -14)
	.attr("dy", ".25em");

	// All
	node.transition().duration(750)
	.attr("transform", d => "translate(" + d.x + ", " + d.y + ")");

	node.selectAll("circle")
	.transition()
	.duration(750)
	.attr("r", function(d) {
	console.log('d.r', d.r)
	return d.r
	})
	.style("fill-opacity", 1);

	// EXIT
	node.exit().selectAll("circle")
	.attr("class", "exit_16_2_5");

	node.exit()
	.transition()
	.duration(750)
	.attr("transform", d => "translate(" + (+500) + ", " + (+500) + ")")
	.remove();

	node.exit().selectAll("circle")
	.transition()
	.duration(750)
	.style('fill', 'red')
	// .style("fill-opacity", 1e-6);
	}

	function objectify(alphArr) {
	let objArr = [];
	for(let i = 0; i < alphArr.length; i++) {
	objArr.push({"id": alphArr[i], "value": 25});
	}
	return objArr;
	}

	data.children = objectify(alphabet);

	update(data);

	setInterval(function() {
	let newChildren = d3.shuffle(alphabet)
	.slice(0, Math.floor(Math.random() * 26))
	.sort();
	data.children = objectify(newChildren);
	update(data);
	}, 2000);
	</script>
	</body>