lwthatcher/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Testing out the d3-iconarray plugin
forked from armollica's block: Icon Array

  
## d3-iconarray.min.js
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("d3-scale")):"function"==typeof define&&define.amd?define(["exports","d3-scale"],t):t(n.d3_iconarray=n.d3_iconarray||{},n.d3)}(this,function(n,t){"use strict";function i(){function n(n){return i(n.length),n.map(function(n,i){return{data:n,position:t(i)}})}function t(n){return isNaN(r)||isNaN(e)?(console.log("Warning: width/height undefined"),0):a?{x:n%r,y:Math.floor(n/r)}:{x:Math.floor(n/e),y:n%e}}function i(n){isNaN(r)&&isNaN(e)?(console.log("no width or height"),a?(r=Math.ceil(Math.sqrt(n)),e=Math.ceil(n/r)):(e=Math.ceil(Math.sqrt(n)),r=Math.ceil(n/e))):isNaN(r)?r=Math.ceil(n/e):isNaN(e)&&(e=Math.ceil(n/r))}var r=void 0,e=void 0,a=!0;return n.maxDimension=function(n){var i=t(n);if(a){var n=Math.max(i.x,r);return Math.max(n,i.y)}var o=Math.max(i.y,e);return Math.max(o,i.x)},n.position=function(n){return t(n)},n.width=function(t){return void 0===t?r:(r=t,n)},n.height=function(t){return void 0===t?e:(e=t,n)},n.widthFirst=function(t){return void 0===t?a:(a=t,n)},n}function r(){function n(n){var t=20,i=n+Math.floor(n/a)*o;return t=u(i)}function i(){var n=(r[1]-r[0])*o,t=Math.ceil(n/a),i=[r[0],r[1]+t];u.domain(i).range(e)}var r=[0,100],e=[0,100],a=10,o=0,u=t.scaleLinear().domain(r).range(e);return n.gapInterval=function(t){return t?(a=t,i(),n):a},n.gapSize=function(t){return isNaN(t)?o:(o=t,i(),n)},n.domain=function(t){return t?(r=t,i(),n):r},n.range=function(t){return t?(e=t,i(),n):e},i(),n}var e="0.0.2";n.version=e,n.layout=i,n.scale=r});

## index.html
<html>
	<head>
		<style>
			.bluies { fill: #0A8BB2; }
			.greenies { fill: #1AC18B; }
			.reddies { fill: #E40E0E; }
		</style>
	</head>
	<body>

		 <script src="//d3js.org/d3.v4.0.0-alpha.28.min.js" charset="utf-8"></script>
		 <script src="d3-iconarray.min.js"></script>
		 <script>
			 var width = 960,
					 height = 500,
					 rows = 30,
					 columns = 57,
					 iconWidth = 12,
					 gapSize = 1,
					 gapInterval = 6;

			 var layout = d3_iconarray.layout()
			 	.widthFirst(false)
				.height(rows);

			 var data = d3.range(0, 1, 1/(rows * columns))
			 	.map(function(pct) {
					 return {
						 class: pct < 0.30 ? "greenies" :
						 				pct < 0.65 ? "reddies" :
										"bluies"
					 };
				 });

			 var grid = layout(data);

			 var arrayScale = d3_iconarray.scale()
				.domain([0, rows])
				.range([0, height])
				.gapSize(gapSize)
				.gapInterval(gapInterval);

			 var svg = d3.select("body").append("svg")
			 	.attr("width", width)
				.attr("height", height);

			 svg.selectAll("g").data(grid)
			 	.enter().append("g")
					.attr("class", function(d) { return "icon " + d.data.class; })
					.attr("transform", function(d) {
						return "translate(" +
							arrayScale(d.position.x) + "," +
							arrayScale(d.position.y) + ")";
					})
					.call(appendCircles);

				function appendCircles(selection) {
					selection.append("circle")
							.attr("cx", iconWidth/2)
							.attr("cy", iconWidth/2)
							.attr("r", 0)
						.transition().delay(function(d) { return 10 * d.position.y; }).duration(333)
							.attr("r", iconWidth/2);
				}
		 </script>
	</body>
</html>
	<html>
	<head>
	<style>
	.bluies { fill: #0A8BB2; }
	.greenies { fill: #1AC18B; }
	.reddies { fill: #E40E0E; }
	</style>
	</head>
	<body>

	<script src="//d3js.org/d3.v4.0.0-alpha.28.min.js" charset="utf-8"></script>
	<script src="d3-iconarray.min.js"></script>
	<script>
	var width = 960,
	height = 500,
	rows = 30,
	columns = 57,
	iconWidth = 12,
	gapSize = 1,
	gapInterval = 6;

	var layout = d3_iconarray.layout()
	.widthFirst(false)
	.height(rows);

	var data = d3.range(0, 1, 1/(rows * columns))
	.map(function(pct) {
	return {
	class: pct < 0.30 ? "greenies" :
	pct < 0.65 ? "reddies" :
	"bluies"
	};
	});

	var grid = layout(data);

	var arrayScale = d3_iconarray.scale()
	.domain([0, rows])
	.range([0, height])
	.gapSize(gapSize)
	.gapInterval(gapInterval);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.selectAll("g").data(grid)
	.enter().append("g")
	.attr("class", function(d) { return "icon " + d.data.class; })
	.attr("transform", function(d) {
	return "translate(" +
	arrayScale(d.position.x) + "," +
	arrayScale(d.position.y) + ")";
	})
	.call(appendCircles);

	function appendCircles(selection) {
	selection.append("circle")
	.attr("cx", iconWidth/2)
	.attr("cy", iconWidth/2)
	.attr("r", 0)
	.transition().delay(function(d) { return 10 * d.position.y; }).duration(333)
	.attr("r", iconWidth/2);
	}
	</script>
	</body>
	</html>