Outcomes associated with group B strep (GBS) among pregnant women

Icon array example

A recreation of an illustration from this Scientific American article on icon arrays. using the layout function of my d3 icon array plugin

<!DOCTYPE html>
<html>
<head>
	<title>VARIOUS OUTCOMES ASSOCIATED WITH GROUP B STREP (GBS) AMONG PREGNANT WOMEN</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;
		color: #333;
	}
	</style>
</head>
<body>
<h1>Outcomes associated with group B strep (GBS) among pregnant women</h1>
<p>after <a href="https://blogs.scientificamerican.com/sa-visual/inadequate-data-visualization-leaves-patients-undereducated/">Amanda Montañez</a></p>
<div id="gbs-example">

</div>
</body>
<script type="text/javascript">

var data = [
	{
		label:'Women who test negative for GBS',
		count:402,
		colour:'#6bbde9'
	},
	{
		label:'Women who test positive but do not pass the bacteria to their babies',
		count:49,
		colour:'#0b95a3'
	},
	{
		label:'Women who pass the bacteria to their babies without resulting illness',
		count:48,
		colour:'#ed7fa0'
	},
	{
		label:'Women whose babies contract early onset GBS disease',
		count:1,
		colour:'#815a82'
	}
];

var layout = d3_iconarray.layout()
	.width(25);

//expand the data to an array
var dataArray = data.reduce(function(value, d){
	    for(var i=0;i<d.count ;i++){
	        value.push(d.colour);
	    }
	    return value;
	}, []);

var grid = layout(dataArray);

var dotRadius = 7;
var width = 800, 
	height = 600, 
	margin = {top:20, bottom:20, left:20, right:300 };

var arrayScale = d3.scaleLinear()
	.domain([ 0, 25 ])
	.range([0, width-(margin.left+margin.right)]);
var svg = d3.select('#gbs-example')
		.append('svg')
			.attr('width',width)
			.attr('height',height)
		.append('g')
			.attr('transform','translate('+margin.left+','+margin.top+')');

svg.selectAll('circle')
	.data(grid)
		.enter()
	.append('circle')
		.attr('cx', function(d){ 
			return arrayScale(d.position.x); 
		})
		.attr('cy', function(d){ 
			return arrayScale(d.position.y); 
		})
		.attr('r',dotRadius)
		.attr('fill',function(d){ return d.data; })

d3.select('#gbs-example svg')
	.append('g').attr('transform','translate('+ (width-margin.right + 30)+',' + (margin.top + dotRadius) + ')')
	.selectAll('g.key-element')
	.data(data)
		.enter()
	.append('g')
		.attr('transform',function(d,i){ return 'translate(0,'+(i*60)+')'; })
		.attr('class','key-element')
	.call(function(parent){
		parent.append('circle')
			.attr('r', dotRadius)
			.attr('cx', -dotRadius*2)
			.attr('cy', -dotRadius)	
			.attr('fill', function(d){ return d.colour; })
		
		parent.append('text')
			.attr('dx', 0)
			.attr('dy',0 )
			.text(function(d){
				return d.label;
			})
			.call(wrap, margin.right-20);
	})

//wrapping long labels https://bl.ocks.org/mbostock/7555321

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

</script>
</html>

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