squares

_.md

[ Launch: squares ] d2075f98dcaa7c4004e8 by tom-christie

config.json

{"description":"squares","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true}

inlet.js

// set size of chart area
var margin = {top: 30, right: 20, bottom: 20, left: 80},
    width = 500 - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom,
    cwidth = 50;
	

//some data

var thismonth = [2.8, 2.8, 2.9, 3.1, 3.3, 3.4, 3.7, 3.8, 3.8, 3.8, 3.9, 3.9, 3.9, 4.3, 
                 4.4, 4.4, 4.9, 4.9, 4.9, 5, 5.1, 5.1, 5.1, 5.2, 5.3, 5.3, 5.6, 6.2, 5.6,
                 5.7, 5.9, 6, 6.2, 6.5, 6.7, 6.8, 6.8, 6.9, 6.9, 7, 7.1, 7.4, 7.5, 7.5, 7.6, 
                 7.7, 7.7, 7.8, 7.8, 7.8, 8, 8, 8, 8.2, 8.2, 8.3, 8.4, 8.4, 8.4, 9.3, 9.4, 9.4, 
                 9.5, 9.5, 10.3, 10.8, 10.8, 10.9, 10.9, 11.2, 11.5, 11.5, 11.7, 11.9, 12, 12, 12.6, 12.8, 13.5, 15.7],
    
    lastmonth = [2.1, 2.7, 2.8, 2.9, 3.1, 3.2, 3.4, 3.5, 3.6, 3.7, 3.8, 3.9, 4, 4.1, 
                 4.2, 4.3, 4.4, 4.5, 4.6, 4.7, 4.8, 4.9, 5.1, 5.2, 5.3, 5.4, 5.6, 5.7, 
                 5.8, 5.9, 6.1, 6.2, 6.3, 6.4, 6.5, 6.7, 6.8, 6.9, 7, 7.2, 7.3, 7.5, 7.7,
                 7.8, 7.9, 8.1, 8.2, 8.3, 8.4, 8.6, 8.7, 8.8, 8.9, 9.2, 9.4, 9.5, 9.7, 9.8, 
                 9.9, 10.2, 10.3, 10.4, 10.5, 10.8, 11, 11.1, 11.2, 11.3, 11.4, 11.5, 11.9, 12,
                 12.3, 12.4, 12.7, 12.9, 13.4, 13.7, 13.9, 14.2, 14.5, 15.7, 16.2, 16.3, 16.5, 17.4, 
                 17.7, 17.8, 17.9, 18.8, 20.3, 20.5, 21.5, 23.4, 26.5];








// set the target for glucose range
var rangemin = 3.9,
    rangemax = 10.0;


var under = thismonth.filter(function (value){
  return (value < rangemin);})

var within = thismonth.filter(function (value){
 return (value >= rangemin && value <= rangemax);})

var above = thismonth.filter(function (value){
  return (value > rangemax);})

var lastunder = lastmonth.filter(function(value){
  return (value < rangemin);})

var lastwithin = lastmonth.filter(function(value){
  return (value >= rangemin && value <= rangemax);})

var lastabove = lastmonth.filter(function(value){
  return (value < rangemin);})

var myData = {
  current:[under.length, within.length, above.length],
  last:[lastunder.length,lastwithin.length,lastabove.length]};


var currentAverage = d3.mean(thismonth), 
	currentSD = d3.deviation(thismonth),
    lastmonthAverage = d3.mean(lastmonth),
	lastmonthSD = d3.deviation(lastmonth),
	changeAverage = currentAverage - lastmonthAverage,
	changeSD = currentSD - lastmonthSD;

	//specify format of the change in SD and average ie we want to see +/- and 1dp
	changeSD = d3.format("+,.1f")(changeSD);
	changeAverage = d3.format("+,.0f")(changeAverage);

var color = d3.scale.ordinal()
    .range(["#FF5722", "#B0BEC5", "#FF5722"]);

//create svg canvas so that origin is in the centre of the donut
var svgCanvas = d3.select("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr('transform', 'translate(' + (width / 2) +  ',' + (height / 2) + ')');

//describe parameters for 2 arcs
var currentArc = d3.svg.arc()
	.innerRadius(16 +cwidth)
    .outerRadius(46 + cwidth);

var lastmonthsArc = d3.svg.arc()
	.innerRadius(cwidth)
	.outerRadius(15 + cwidth);
	
var pie = d3.layout.pie()
  .sort(null)
	.startAngle(-Math.PI/2)
	.endAngle(Math.PI/2);

// append data to chart
var gs = svgCanvas.selectAll("g").data(d3.values(myData)).enter().append("g");

//draw the chart
var donutpath = gs.selectAll('path')
.data(function(d){return pie(d)})
  .enter()
  .append('path')
  .attr("d", function(d, i, j) {    
    if(j===0){
      return currentArc(d)}
    if(j==1){
      return lastmonthsArc(d)}
  })
	.attr('d'.arc)
  .attr('fill', function(d, i) { 
    return color(i)
  })
.attr("class", function(d, i, j){
  if(j==1){
    return "donut"}
})

var sum = d3.sum(myData.current);


var text = gs.selectAll('text')
.data(function(d){return pie(d)})
.enter()
.append('text')
	.attr("class", "labels")
	.attr("transform", function(d) { return "translate(" + currentArc.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d,i,j) {
      if(j===0){
        var per = d.value/sum*100
        //return currentArc.centroid(d)}
       return per.toFixed(0)+"%"}
        //return d.startAngle}
    })
	
var label = svgCanvas.append('text')
	.attr('transform', 'translate(+8, +5)')//w/o translation the label starts at the middle of the chart
	.attr("class", "average")
	.style("text-anchor","end")
	.html(currentAverage.toFixed(1));

//append units --removed to clean up chart – might use in tooltip later?
var units = svgCanvas.append("text")
	.attr('transform', 'translate(+10, +5)')
	.text("mg/dL")
	.attr("class", "units");

var sd = svgCanvas.append("text")
	.text("± "+currentSD.toFixed(1))
	.attr("class", "sd")
	.style("text-anchor", "start")
	.attr('transform', 'translate(+10,-5)');


//show change from previous month – needs work!
var lastmonth = svgCanvas.append("text")
	.text(changeAverage) 
	.style("text-anchor","middle")
	.attr("class", "lastaverage")
	.attr('transform', 'translate(-20, -20)');

var lastmonthSD = svgCanvas.append("text")
	.text(changeSD) 
	.style("text-anchor","start")
	.attr("class", "lastmonth")
	.attr('transform', 'translate(+10, -17)');

/*var constants = svgCanvas.append("text")
	.data(function(d){return pie(d)})
	.text(3.9)
	.attr('x'(function(d){
		return d.endAngle			}
              })*/

style.css

body {
  font: 10px sans-serif;
  margin: 0;
}

.average{
	font-size: 300%; 
  	text-align: center;
}
.units{
  	font-size: 100%;
}
.labels{
	font-size: 110%;    
}
.sd{
  
 	font-size:115%; 
}
.lastmonth{
  
 font-size: 110%; 
 fill: #FF5722;
 
}
.lastaverage{
  
font-size:140%;
fill:#FF5722;  
}
.donut{
  
 fill-opacity: 0.4;
    stroke:8px ;
}