icon array scale interactive example

Icon array scale example

A simple example of using the layout and scale functions of my d3 icon array plugin.

This gist is to illustrate the gapInterval and gapSize properties.

<!DOCTYPE html>
<html>
<head>
	<title>Icon array scaletest</title>
	<script src="//d3js.org/d3.v4.0.0-alpha.18.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="d3-iconarray.js"></script>
	<style type="text/css">
	*{
		font-family: sans-serif;
		font-weight: bold;
		letter-spacing: 1px;
	}

input[type='range']{
		width:600px;
	}

p{
		font-weight: normal;
	}
	.arg{
		color: #B00;
		font-weight: bold;
	}

</style>
</head>
<body>

<p>gapInterval(<span class="arg" id="interval-value">4</span>):</p> <input value="4" id="interval-input" type="range" min="0" max="12" step="1"></input>

<p>gapSize(<span class="arg" id="size-value">1</span>):</p><input value="1" id="size-input" type="range" min="0" max="3" step="0.1"></input>

<div id="simple-example">
	
</div>
</body>
<script type="text/javascript">
	
var layout = d3_iconarray.layout();

var data = d3.range(1, 145, 1);

var grid = layout(data);
var dotRadius = 10;
var width = 600, 
	height = 600, 
	margin = {top:20, bottom:20, left:20, right:20 };

var arrayScale = d3_iconarray.scale()
	.domain([ 0, layout.maxDimension(data.length) ])
	.range([0, width-(margin.left+margin.right)])
	.gapSize(1)
	.gapInterval(4);

var svg = d3.select('#simple-example')
		.append('svg')
			.attr('width',width)
			.attr('height',height)
		.append('g')
			.attr('transform','translate('+margin.left+','+margin.top+')');

svg.selectAll('g')
	.data(grid)
		.enter()
	.append('g').attr('transform', function(d){ 
		return 'translate('+arrayScale(d.position.x)+','+arrayScale(d.position.y)+')' 
	})
	.call(function(parent){
		parent.append('text')
			.text(function(d){ return d.data; })
			.attr('stroke','#000')
			.attr('stroke-width',8)
			.attr('stroke-linejoin','round')
			.attr('text-anchor','middle')
			.attr('x',dotRadius)
			.attr('y',dotRadius*6/4)

parent.append('text')
			.text(function(d){ return d.data; })
			.attr('fill','#FFF')
			.attr('text-anchor','middle')		
			.attr('y',dotRadius*6/4)
			.attr('x',dotRadius)	
	});

d3.selectAll('input#interval-input, input#size-input').on('change',function(){
	console.log('hiya');

var interval = document.getElementById('interval-input').value;
	var size = document.getElementById('size-input').value;

d3.select('#interval-value').text(interval);
	d3.select('#size-value').text(size);

arrayScale.gapSize(size)
		.gapInterval(interval);

svg.selectAll('g')
		.transition()
		.attr('transform', function(d){ 
			return 'translate('+arrayScale(d.position.x)+','+arrayScale(d.position.y)+')' 
		})
})

d3.select(self.frameElement).style("height", (height + 200)+"px");

</script>
</html>

https://d3js.org/d3.v4.0.0-alpha.18.min.js