Modal transport share

Icon array with emojis

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

<!DOCTYPE html>
<html>
<head>
	<title>Transport modal share</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;
	}
	button{
		cursor: pointer;
	}
	svg{display:block;}
	.zero{display: none;}
	text{
		font-size: 20px;
	}
	hr{
		border:none;
		border-bottom: 1px solid black;
	}
	</style>
</head>
<body>
<h1>Modal transport share in cities with more than a million people</h1>
<div id="nav">
	
</div>
<hr>
<h2 id="chart-title"></h2>
<div id="viz"></div>
<p><a href="https://en.wikipedia.org/wiki/Modal_share">Source: Wikipedia</a></p>
</body>
<script type="text/javascript">

var picto = {
	'walking':'🚶', 
	'cycling':'🚴',
	'public transport':'🚌',
	'private motor vehicle':'🚗'	
};

var categories = ['walking', 'cycling', 'public transport', 'private motor vehicle'];	
var width = 600, height = 150, margin = {top:20,left:10,bottom:0,right:10};	
var layout = d3_iconarray.layout()
					.height(5)
					.widthFirst(false);

var xScale = d3_iconarray.scale()
					.domain([0,20])
					.range([0, width-(margin.left+margin.right)])
					.gapSize(1)
					.gapInterval(5);

var yScale = d3.scaleLinear()
					.domain([0,5])
					.range([0,height-(margin.top + margin.bottom)])

d3.tsv('modal-share-data.tsv',function(data){
	console.log(data.columns)
	d3.select('#nav').selectAll('span.city-button')
		.data(data).enter()
			.append('span').attr('class','city-button')
			.append('button')
				.html(function(d){return d.City; })
				.on('click', function(d){
					draw(d);
				})

draw(data.find(function(d){
		return (d.City == 'London');
	}));
})

function draw(data){

d3.select('#chart-title').text(function(){
		return data.City + ' ('+data.year+')';
	});

d3.select('#viz')
		.selectAll('svg')
		.data(categories)
			.enter()
		.append('svg')
			.attr('width', width)
			.attr('height', height)
				.attr('class','category')
			.append('g')
				.attr('class','plot')
				.attr('transform','translate('+margin.left+','+margin.top+')')

d3.select('#viz')	
		.selectAll('svg')
		.classed('zero', function(d){
				return (data[d] == 0);
			});

d3.selectAll('svg g.plot')
		.call(function(parent){
			var join = parent.selectAll('.icon')
				.data(function(d){ return layout( expand(data[d], d) ); });

join.exit().remove();

join.enter()
				.append('text').attr('class','icon');

join.attr('transform', function(d){
				return 'translate(' + xScale(d.position.x) + ',' + yScale(d.position.y) + ')'
			}).text(function(d){ return picto[d.data]; })

})
}

function expand(length, category){
	return d3.range(0,length,1).map(function(){ return category; })
}

</script>
</html>

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