-
-
Save daralthus/3852574 to your computer and use it in GitHub Desktop.
Tributary inlet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.6837606837606838,"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,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":874,"height":262,"hide":false},"description":"Tributary inlet","fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"gistfile1.txt":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"thumbnail":"http://i.imgur.com/WqHUmUN.png"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/********** | |
Hi! | |
This visualization was made at the Youth And Corruption Hackaton (and slightly after) | |
Organized by Transparency International and Kitchen Budapest, within the Random Hacks of Kindness | |
You can find out more at http://dib.kibu.hu | |
All code is open source (and ugly :), Fork and have fun! | |
If you don't know where to start I would suggest you, watching some videos at http://enjalot.github.com/dot-enter/ | |
Special thanks to Enjalot the creator of this awesome coding enviroment (twitter.com/enjalot), | |
to Mike Bostock the creator of D3.js https://github.com/mbostock | |
to Eszter Bircsak for modelling. | |
Go on hit the hide button and look around! | |
**********/ | |
//our canvas | |
var svg = d3.select("svg").append("g") | |
.attr({ | |
transform: "translate(" + [document.getElementsByTagName('body')[0].offsetWidth/2-642,13] + ")", | |
"class": "pics" | |
}); | |
//background | |
var bg = svg.append("image").classed("bg", true) | |
.attr({ | |
width: 1280, | |
height: 1024, | |
"xlink:href": "http://smuuz.com/hackti/hc_0005_hatter.jpg" | |
}); | |
//data | |
var data = [{question:'"Do you think the government is typicaly working honestly?"', percent:[47,29,9,11,4],bg:""}, | |
{question:'"Do you think corporations are typicaly working honestly?"', percent:[28,39,11,17,5],bg:""}, | |
{question:'"Do you think the public health care system is typicaly working honestly?"', percent:[26,41,0,20,4],bg:""}, | |
{question:'"Do you think local authorities are typicaly working honestly?"', percent:[25,34,10,26,5],bg:""}, | |
{question:'"Do you think the police is typicaly working honestly?"', percent:[20,33,8,32,7],bg:""}, | |
{question:'"Do you think public education is typicaly working honestly?"', percent:[12,23,9,48,8],bg:""} | |
]; | |
var answers = ["Not at all!", "Typicaly No.", "I don't know.", "Mostly", "Absolutely!"]; | |
//faces | |
var esz = ["http://smuuz.com/hacktismall/hc_0000_nagymosoly.png", | |
"http://smuuz.com/hacktismall/hc_0001_kismosoly.png", | |
"http://smuuz.com/hacktismall/hc_0002_semleges.png", | |
"http://smuuz.com/hacktismall/hc_0003_szomi.png", | |
"http://smuuz.com/hacktismall/hc_0004_nagyonszomi.png" | |
].reverse(); | |
var row = 0; | |
var color = d3.scale.category20(); | |
//ranges for clipping | |
var left = 541; | |
var right = 932; | |
var w = right-left; | |
var clipwidth = d3.scale.linear() | |
.domain([0,100]) | |
.range([0,w]); | |
var clipx = d3.scale.linear() | |
.domain([0,100]) | |
.range([left,right]); | |
var x = function (d,i,t) { | |
return d3.sum(t.slice(0,i)); //stack the clippers next to each other | |
} | |
//adding faces | |
var pics = svg.append("g") | |
.attr({ | |
transform: "translate(" + [-100,document.getElementsByTagName('body')[0].offsetHeight - 530] + ")", | |
"class": "pics" | |
}); | |
pics.selectAll("g.pics") | |
.data(esz) | |
.enter() | |
.append("image") | |
.attr({ | |
"class": "esz", | |
id: function (d,i) { return i; }, | |
x: 0, | |
y: 0, | |
width: 1338, | |
height: 500, | |
"xlink:href": function (d,i) { return d; }, | |
"clip-path": function (d,i) { return "url(#clip"+i+")";} //linking the clipper boxes to the images | |
}); | |
pics.selectAll("image.esz") | |
.on("mouseover", function(){ | |
var that = this; | |
var tempdata = function (i) { var t = [10,10,10,10,10]; | |
t[i] = 60; | |
return t; | |
} | |
var answer = function (i) { var t = ["","","","",""]; | |
t[i] = answers[i]; | |
return t; | |
} | |
svg.selectAll("rect.clip") | |
.data(tempdata(that.id)) | |
.transition() | |
.duration(300) | |
.ease("linear") | |
.attr({ | |
x: function (d,i) { return clipx(x( d,i,tempdata(that.id) )); }, | |
width: function (d,i) { return clipwidth(d) } | |
}); | |
svg.selectAll("text.percent") | |
.data(answer(that.id)) | |
.transition() | |
.duration(300) | |
.ease("linear") | |
.text(function(d,i){ return d;}) | |
.attr({ | |
x: function (d,i) { return clipx(x(d,i,tempdata(that.id))); } | |
}); | |
}); | |
//clipping boxes | |
var clippers = svg.append("g") | |
.attr({ "class": "clippers" }); | |
clippers.selectAll("g.clippers") | |
.data(data[row].percent) | |
.enter() | |
.append("svg:clipPath") | |
.attr("id",function (d,i) { return "clip" + i; }) | |
.append("rect") | |
.attr({ | |
id: function (d,i) { return "clip" + i }, | |
x: function (d,i) { return clipx(x(d,i,data[row].percent)); }, | |
y: 0, | |
width: function (d,i) { return clipwidth(d) }, | |
height: "100%", | |
fill: "#333", | |
stroke: "#000111", | |
"class": "clip" | |
}); | |
svg.selectAll("image.bg") | |
.on("mouseover", function(){ | |
svg.selectAll("rect.clip") | |
.data(data[row].percent) | |
.transition() | |
.duration(300) | |
.ease("linear") | |
.attr({ | |
x: function (d,i) { return clipx(x(d,i,data[row].percent)); }, | |
width: function (d,i) { return clipwidth(d) } | |
}); | |
svg.selectAll("text.percent") | |
.data(data[row].percent) | |
.transition() | |
.duration(300) | |
.ease("linear") | |
.text(function(d,i){ return d + "%";}) | |
.attr({ | |
x: function (d,i) { return clipx(x(d,i,data[row].percent)); } | |
}); | |
}); | |
//buttons | |
var buttons = svg.append("g") | |
.attr({ | |
transform: "translate(" + [277,47] + ")", | |
"class": "buttons" | |
}); | |
var prev = buttons.append("circle") | |
.attr({ | |
"class": "prev", | |
cx: 0, | |
cy: 0, | |
r: 20, | |
fill: "#000000", | |
"fill-opacity": 0.7, | |
stroke: "#FFFFFF", | |
"stroke-opacity": 0.5 | |
}).on("click", function(){ | |
if (row > 0) { row -= 1 } else { row = data.length -1; } | |
svg.selectAll("rect.clip") | |
.data(data[row].percent) | |
.transition() | |
.duration(300) | |
.ease("linear") | |
.attr({ | |
x: function (d,i) { return clipx(x(d,i,data[row].percent)); }, | |
width: function (d,i) { return clipwidth(d) } | |
}); | |
svg.selectAll("text.q2") | |
.data([data[row].question]) | |
.text(function(d,i){ return d;}); | |
svg.selectAll("text.percent") | |
.data(data[row].percent) | |
.transition() | |
.duration(300) | |
.ease("linear") | |
.text(function(d,i){ return d + "%";}) | |
.attr({ | |
x: function (d,i) { return clipx(x(d,i,data[row].percent)); } | |
}); | |
}) | |
var next = buttons.append("circle") | |
.attr({ | |
"class": "next", | |
cx: w+357, | |
cy: 0, | |
r: 20, | |
fill: "#000000", | |
"fill-opacity": 0.7, | |
stroke: "#FFFFFF", | |
"stroke-opacity": 0.5 | |
}).on("click", function(){ | |
if (row < data.length -1) { row += 1 } else { row = 0; } | |
svg.selectAll("rect.clip") | |
.data(data[row].percent) | |
.transition() | |
.duration(300) | |
.ease("linear") | |
.attr({ | |
x: function (d,i) { return clipx(x(d,i,data[row].percent)); }, | |
width: function (d,i) { return clipwidth(d) } | |
}); | |
svg.selectAll("text.q2") | |
.data([data[row].question]) | |
.text(function(d,i){ return d;}); | |
svg.selectAll("text.percent") | |
.data(data[row].percent) | |
.transition() | |
.duration(300) | |
.ease("linear") | |
.text(function(d,i){ return d + "%";}) | |
.attr({ | |
x: function (d,i) { return clipx(x(d,i,data[row].percent)); } | |
}); | |
}) | |
var prevlabel = buttons.append("text") | |
.text("<") | |
.attr({ | |
"alignment-baseline": "middle", | |
"text-anchor": "middle", | |
fill: "#FFFFFF", | |
"fill-opacity": 0.5 | |
}) | |
var nextlabel = buttons.append("text") | |
.text(">") | |
.attr({ | |
"alignment-baseline": "middle", | |
"text-anchor": "middle", | |
fill: "#FFFFFF", | |
"fill-opacity": 0.5, | |
x: w+357 | |
}) | |
//text | |
var questions = svg.append("g") | |
.attr({ | |
transform: "translate(" + [0,0] + ")", | |
"class": "questions" | |
}); | |
function text(string,x,y,size,color,canvas,c) { | |
var q = canvas.selectAll("g.questions") | |
.data([string]); | |
q.enter() | |
.append("text") | |
.text(function (d,i) { return d; }) | |
.attr({ | |
"class": c, | |
x: x, | |
y: y, | |
"font-size": size, | |
"alignment-baseline": "middle", | |
"text-anchor": "middle", | |
fill: color, | |
"fill-opacity": 0.82 | |
}); | |
return q; | |
} | |
var question1 = text("Transparency International asked 1000 people: ",632,32,12,"#000000",questions,"q1"); | |
var question2 = text(data[row].question,647,50,20,"#000000",questions,"q2"); | |
//percentages | |
var labelholder = svg.append("g") | |
.attr({ | |
transform: "translate(" + [-83,0] + ")", | |
"class": "labelholder" | |
}); | |
var labels = labelholder.selectAll("g.labelholder") | |
.data(data[row].percent); | |
labels.enter() | |
.append("text") | |
.text(function (d,i) { return d + "%"; }) | |
.attr({ | |
"class": "percent", | |
x: function (d,i) { return clipx(x(d,i,data[row].percent)); }, | |
y: 139, | |
"font-size": 13, | |
"alignment-baseline": "middle", | |
"text-anchor": "middle", | |
fill: "#000000", | |
"fill-opacity": 0.82 | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment