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

xxxxxxxxxx
 
<!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
​
function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}
​
d3.select(self.frameElement).style("height", (height + 200)+"px");
​
</script>
</html>
    