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; }
  </style>
</head>
<div id="alphaPack"></div>

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

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

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(function(d) { return 25 });

    // Data join by key to <g> nodes
    let node = svg.selectAll(".node")
        .data(alphaBubble(nodes).descendants());

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

    // UPDATE
    node.selectAll("circle")
        .attr("class", function(d, i) {
        var result = d.id === "charContainer" ? "container_16_2_5" : "update_16_2_5";
            return result;
    });

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

    enterNode.append("circle")
        .attr("class", function(d, i) {
            var result = d.id === "charContainer" ? "container_16_2_5" : "enter_16_2_5";
            return result;
        })
        .style("fill-opacity", 1e-6);

    enterNode.append("text")
        .attr("class", "text_16_2_5")
        .attr("dx", -14)
        .attr("dy", ".25em")
        .text(function(d) { return d.id; });

    // All
    node.transition().duration(750)
        .attr("transform", function(d) {
            return "translate(" + d.x + ", " + d.y + ")";
        });

    node.selectAll("circle")
      .transition()
        .duration(750)
        .attr("r", function(d) {
            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", function(d) {
            return "translate(" + (+500) + ", " + (+500) + ")";
        })
        .remove();

    node.exit().selectAll("circle")
      .transition()
        .duration(750)
        .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() {
    //console.log("===>>> data.children: " + data.children);
    let newChildren = d3.shuffle(alphabet)
        .slice(0, Math.floor(Math.random() * 26))
        .sort();
    data.children = objectify(newChildren);
    update(data);
}, 1500);
  </script>
</body>

## style.css
---
---

//
// IMPORTS
//

@import "reset";
@import "variables";
@import "alphapack9";
@import "AlphaPack9_bias";

// Syntax highlighting @import is at the bottom of this file

/**************/
/* BASE RULES */
/**************/

html {
  font-size: 100%;
}

body {
	background: $white;
  font: 18px/1.4 $helvetica;
  color: $darkGray;
}

.container {
  margin: 0 auto;
  max-width: 740px;
  padding: 0 10px;
  width: 100%;
}

#chart text {
  font-size: .6em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: $helveticaNeue;
  color: $darkerGray;
  font-weight: bold;

  line-height: 1.7;
  margin: 1em 0 15px;
  padding: 0;

  @include mobile {
    line-height: 1.4;
  }
}

h1 {
  font-size: 30px;
  a {
    color: inherit;
  }
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
  color: $gray;
}

p {
  margin: 15px 0;
}

a {
  color: $blue;
  text-decoration: none;
	cursor: pointer;
  &:hover, &:active {
    color: $blue;
  }
}

ul, ol {
  margin: 15px 0;
  padding-left: 30px;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

ol ul, ul ol, ul ul, ol ol {
  margin: 0;
}

ul ul, ol ul {
  list-style-type: circle;
}

em, i {
  font-style: italic;
}

strong, b {
  font-weight: bold;
}

img {
  max-width: 100%;
}

// Fixes images in popup boxes from Google Translate
.gmnoprint img {
  max-width: none;
}

.date {
  font-style: italic;
  color: $gray;
}

// Specify the color of the selection
::-moz-selection {
  color: $black;
  background: $lightGray;
}
::selection {
  color: $black;
  background: $lightGray;
}

// Nicolas Gallagher's micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/*********************/
/* LAYOUT / SECTIONS */
/*********************/

//
// .masthead
//

.wrapper-masthead {
  margin-bottom: 50px;
}

.masthead {
  padding: 20px 0;
  border-bottom: 1px solid $lightGray;

  @include mobile {
    text-align: center;
  }
}

.site-avatar {
  float: left;
  width: 70px;
  height: 70px;
  margin-right: 15px;

  @include mobile {
    float: none;
    display: block;
    margin: 0 auto;
  }

  img {
    border-radius: 5px;
  }
}

.site-info {
  float: left;

  @include mobile {
    float: none;
    display: block;
    margin: 0 auto;
  }
}

.site-name {
  margin: 0;
  color: $darkGray;
  cursor: pointer;
  font-family: $helveticaNeue;
  font-weight: 300;
  font-size: 28px;
  letter-spacing: 1px;
}

.site-description {
  margin: -5px 0 0 0;
  color: $gray;
  font-size: 16px;

  @include mobile {
    margin: 3px 0;
  }
}

nav {
  float: right;
  margin-top: 23px; // @TODO: Vertically middle align
  font-family: $helveticaNeue;
  font-size: 18px;

  @include mobile {
    float: none;
    margin-top: 9px;
    display: block;
    font-size: 16px;
  }

  a {
    margin-left: 20px;
    color: $darkGray;
    text-align: right;
    font-weight: 300;
    letter-spacing: 1px;

    @include mobile {
      margin: 0 10px;
      color: $blue;
    }
  }
}

//
// .main
//

.posts > .post {
  padding-bottom: 2em;
  border-bottom: 1px solid $lightGray;
}

.posts > .post:last-child {
  padding-bottom: 1em;
  border-bottom: none;
}

.post {
  blockquote {
    margin: 1.8em .8em;
    border-left: 2px solid $gray;
    padding: 0.1em 1em;
    color: $gray;
    font-size: 22px;
    font-style: italic;
  }

  .comments {
    margin-top: 10px;
  }

  .read-more {
    text-transform: uppercase;
    font-size: 15px;
  }
}

.wrapper-footer {
  margin-top: 50px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: $lightGray;
}

footer {
  padding: 20px 0;
  text-align: center;
}

// Settled on moving the import of syntax highlighting to the bottom of the CSS
// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
@import "highlights";
@import "svg-icons";
	<!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; }
	</style>
	</head>
	<div id="alphaPack"></div>

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

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

	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(function(d) { return 25 });

	// Data join by key to <g> nodes
	let node = svg.selectAll(".node")
	.data(alphaBubble(nodes).descendants());

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

	// UPDATE
	node.selectAll("circle")
	.attr("class", function(d, i) {
	var result = d.id === "charContainer" ? "container_16_2_5" : "update_16_2_5";
	return result;
	});

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

	enterNode.append("circle")
	.attr("class", function(d, i) {
	var result = d.id === "charContainer" ? "container_16_2_5" : "enter_16_2_5";
	return result;
	})
	.style("fill-opacity", 1e-6);

	enterNode.append("text")
	.attr("class", "text_16_2_5")
	.attr("dx", -14)
	.attr("dy", ".25em")
	.text(function(d) { return d.id; });

	// All
	node.transition().duration(750)
	.attr("transform", function(d) {
	return "translate(" + d.x + ", " + d.y + ")";
	});

	node.selectAll("circle")
	.transition()
	.duration(750)
	.attr("r", function(d) {
	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", function(d) {
	return "translate(" + (+500) + ", " + (+500) + ")";
	})
	.remove();

	node.exit().selectAll("circle")
	.transition()
	.duration(750)
	.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() {
	//console.log("===>>> data.children: " + data.children);
	let newChildren = d3.shuffle(alphabet)
	.slice(0, Math.floor(Math.random() * 26))
	.sort();
	data.children = objectify(newChildren);
	update(data);
	}, 1500);
	</script>
	</body>
	---
	---

	//
	// IMPORTS
	//

	@import "reset";
	@import "variables";
	@import "alphapack9";
	@import "AlphaPack9_bias";

	// Syntax highlighting @import is at the bottom of this file

	/**************/
	/* BASE RULES */
	/**************/

	html {
	font-size: 100%;
	}

	body {
	background: $white;
	font: 18px/1.4 $helvetica;
	color: $darkGray;
	}

	.container {
	margin: 0 auto;
	max-width: 740px;
	padding: 0 10px;
	width: 100%;
	}

	#chart text {
	font-size: .6em;
	}

	h1, h2, h3, h4, h5, h6 {
	font-family: $helveticaNeue;
	color: $darkerGray;
	font-weight: bold;

	line-height: 1.7;
	margin: 1em 0 15px;
	padding: 0;

	@include mobile {
	line-height: 1.4;
	}
	}

	h1 {
	font-size: 30px;
	a {
	color: inherit;
	}
	}

	h2 {
	font-size: 24px;
	}

	h3 {
	font-size: 20px;
	}

	h4 {
	font-size: 18px;
	color: $gray;
	}

	p {
	margin: 15px 0;
	}

	a {
	color: $blue;
	text-decoration: none;
	cursor: pointer;
	&:hover, &:active {
	color: $blue;
	}
	}

	ul, ol {
	margin: 15px 0;
	padding-left: 30px;
	}

	ul {
	list-style-type: disc;
	}

	ol {
	list-style-type: decimal;
	}

	ol ul, ul ol, ul ul, ol ol {
	margin: 0;
	}

	ul ul, ol ul {
	list-style-type: circle;
	}

	em, i {
	font-style: italic;
	}

	strong, b {
	font-weight: bold;
	}

	img {
	max-width: 100%;
	}

	// Fixes images in popup boxes from Google Translate
	.gmnoprint img {
	max-width: none;
	}

	.date {
	font-style: italic;
	color: $gray;
	}

	// Specify the color of the selection
	::-moz-selection {
	color: $black;
	background: $lightGray;
	}
	::selection {
	color: $black;
	background: $lightGray;
	}

	// Nicolas Gallagher's micro clearfix hack
	// http://nicolasgallagher.com/micro-clearfix-hack/
	.clearfix:before,
	.clearfix:after {
	content: " ";
	display: table;
	}

	.clearfix:after {
	clear: both;
	}

	/*********************/
	/* LAYOUT / SECTIONS */
	/*********************/

	//
	// .masthead
	//

	.wrapper-masthead {
	margin-bottom: 50px;
	}

	.masthead {
	padding: 20px 0;
	border-bottom: 1px solid $lightGray;

	@include mobile {
	text-align: center;
	}
	}

	.site-avatar {
	float: left;
	width: 70px;
	height: 70px;
	margin-right: 15px;

	@include mobile {
	float: none;
	display: block;
	margin: 0 auto;
	}

	img {
	border-radius: 5px;
	}
	}

	.site-info {
	float: left;

	@include mobile {
	float: none;
	display: block;
	margin: 0 auto;
	}
	}

	.site-name {
	margin: 0;
	color: $darkGray;
	cursor: pointer;
	font-family: $helveticaNeue;
	font-weight: 300;
	font-size: 28px;
	letter-spacing: 1px;
	}

	.site-description {
	margin: -5px 0 0 0;
	color: $gray;
	font-size: 16px;

	@include mobile {
	margin: 3px 0;
	}
	}

	nav {
	float: right;
	margin-top: 23px; // @TODO: Vertically middle align
	font-family: $helveticaNeue;
	font-size: 18px;

	@include mobile {
	float: none;
	margin-top: 9px;
	display: block;
	font-size: 16px;
	}

	a {
	margin-left: 20px;
	color: $darkGray;
	text-align: right;
	font-weight: 300;
	letter-spacing: 1px;

	@include mobile {
	margin: 0 10px;
	color: $blue;
	}
	}
	}

	//
	// .main
	//

	.posts > .post {
	padding-bottom: 2em;
	border-bottom: 1px solid $lightGray;
	}

	.posts > .post:last-child {
	padding-bottom: 1em;
	border-bottom: none;
	}

	.post {
	blockquote {
	margin: 1.8em .8em;
	border-left: 2px solid $gray;
	padding: 0.1em 1em;
	color: $gray;
	font-size: 22px;
	font-style: italic;
	}

	.comments {
	margin-top: 10px;
	}

	.read-more {
	text-transform: uppercase;
	font-size: 15px;
	}
	}

	.wrapper-footer {
	margin-top: 50px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	background-color: $lightGray;
	}

	footer {
	padding: 20px 0;
	text-align: center;
	}

	// Settled on moving the import of syntax highlighting to the bottom of the CSS
	// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
	@import "highlights";
	@import "svg-icons";