Skip to content

Instantly share code, notes, and snippets.

@gelicia gelicia/_.md

Created Jun 10, 2013
Embed
What would you like to do?
metaevil
{"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"}
q1 q2 q3 q4 q5
1 0 1 1 1
1 0 0 1 0
1 1 0 1 1
0 0 0 0 0
1 0 1 1 1
1 0 0 1 0
1 1 0 1 1
0 0 0 0 0
1 0 1 1 1
1 0 0 1 0
1 1 0 1 1
1 1 0 1 1
1 0 0 1 0
1 1 0 1 1
0 0 0 0 0
1 0 1 1 1
1 0 0 1 0
1 1 0 1 1
0 0 0 0 0
1 1 0 1 1
0 0 0 0 0
1 1 1 1 1
1 0 0 1 0
1 1 0 1 1
0 0 0 0 0
1 0 1 1 1
1 0 0 1 0
1 1 0 1 1
0 0 0 0 0
1 0 1 1 1
1 0 0 1 0
1 1 0 1 1
0 0 0 0 0
1 0 1 1 1
1 0 0 1 0
1 1 0 1 1
0 0 0 0 0
1 0 1 1 1
1 0 0 1 0
1 1 0 1 1
0 0 0 0 0
1 0 1 1 1
//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
});
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.