metaevil

_.md

[ Launch: metaevil ] 5751081 by gelicia

config.json

{"description":"metaevil","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data4.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data3.csv":{"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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/ybwoJsL.png"}

data.csv

inlet.js

//from the eyeo2013 shirt designed by stefpos at http://www.itsbeenreal.co.uk/
d3.select("body").style("background-color", "#5E5A5A");

//change this variable on what boolean value is blue/positive (true=1, false=0)
var isBlue = 1;

//Each circle is a response to a survey. The answers are either yes or no
//Modify the data in data.csv above

var svg = d3.select('svg');
var data = tributary.data;
//constant globals
var two_pi = 2 * Math.PI;
var num_points = Object.keys(data[0]).length; //please make sure the first answer has all the data :) 
var jump = two_pi / num_points;
var rowBreak = Math.ceil(Math.sqrt(data.length));
//styling globals
var respStyle = {size: 26, width: 2, gap: 0.112, spacing: 60};
var margin = {t: 76, l: 77};

for (var i = 0; i < data.length; i++) {
	var thisX = margin.l + ((i % rowBreak)* respStyle.spacing);
	var thisY = margin.t + (Math.floor(i/rowBreak) * respStyle.spacing);
    var g = svg.append('g').attr({
      transform: "translate(" + thisX + "," + thisY + ")"
    });
	drawResponse(g, respStyle, data[i]); 
}

function drawResponse(g, respStyle, data){
  var ijump;
  for (var i = 1; i <= num_points; i+=1){
    ijump = jump * i;
    var arc = d3.svg.arc()
		.innerRadius(respStyle.size-respStyle.width)
		.outerRadius(respStyle.size)
		.startAngle((ijump-jump) + (respStyle.gap/2))
		.endAngle(ijump - (respStyle.gap/2));

    if(data[Object.keys(data)[i-1]] == isBlue){  
      g.append("g:path")
      .attr({
        d : arc,
        fill: '#26ABC4',
        transform: "translate(" + respStyle.size/2 + "," + respStyle.size/2 + ")"
      });
    }
    else {
      var angle = (ijump - (jump/2)) + (Math.PI/2);
      
	  g.append("line")
      .attr({
        x1: respStyle.size/2,
        y1: respStyle.size/2,
        x2: respStyle.size/2 - (respStyle.size * Math.cos(angle)), 
        y2: respStyle.size/2 - (respStyle.size * Math.sin(angle)), 
        stroke: '#F74030',
        'stroke-width': respStyle.width
      });
    } 
  }
}