Skip to content

Instantly share code, notes, and snippets.

@daralthus

daralthus/_.md

Created October 8, 2012 13:35
Show Gist options
  • Save daralthus/3852574 to your computer and use it in GitHub Desktop.
Save daralthus/3852574 to your computer and use it in GitHub Desktop.
Download ZIP
Tributary inlet
Raw
_.md
Raw
config.json
{"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"}
Raw
inlet.js
/**********
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
})
Display the source blob
Display the rendered blob
Raw
inlet.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="1158" height="647"><g transform="translate(-63,13)" class="pics"><image class="bg" width="1280" height="1024" xlink:href="http://smuuz.com/hackti/hc_0005_hatter.jpg"></image><g transform="translate(-100,253)" class="pics"><image class="esz" id="0" x="0" y="0" width="1338" height="500" xlink:href="http://smuuz.com/hacktismall/hc_0004_nagyonszomi.png" clip-path="url(#clip0)"></image><image class="esz" id="1" x="0" y="0" width="1338" height="500" xlink:href="http://smuuz.com/hacktismall/hc_0003_szomi.png" clip-path="url(#clip1)"></image><image class="esz" id="2" x="0" y="0" width="1338" height="500" xlink:href="http://smuuz.com/hacktismall/hc_0002_semleges.png" clip-path="url(#clip2)"></image><image class="esz" id="3" x="0" y="0" width="1338" height="500" xlink:href="http://smuuz.com/hacktismall/hc_0001_kismosoly.png" clip-path="url(#clip3)"></image><image class="esz" id="4" x="0" y="0" width="1338" height="500" xlink:href="http://smuuz.com/hacktismall/hc_0000_nagymosoly.png" clip-path="url(#clip4)"></image></g><g class="clippers"><clipPath id="clip0"><rect id="clip0" x="541" y="0" width="78.2" height="100%" fill="#333" stroke="#000111" class="clip"></rect></clipPath><clipPath id="clip1"><rect id="clip1" x="619.2" y="0" width="129.03" height="100%" fill="#333" stroke="#000111" class="clip"></rect></clipPath><clipPath id="clip2"><rect id="clip2" x="748.23" y="0" width="31.28" height="100%" fill="#333" stroke="#000111" class="clip"></rect></clipPath><clipPath id="clip3"><rect id="clip3" x="779.51" y="0" width="125.12" height="100%" fill="#333" stroke="#000111" class="clip"></rect></clipPath><clipPath id="clip4"><rect id="clip4" x="904.63" y="0" width="27.37" height="100%" fill="#333" stroke="#000111" class="clip"></rect></clipPath></g><g transform="translate(277,47)" class="buttons"><circle class="prev" cx="0" cy="0" r="20" fill="#000000" fill-opacity="0.7" stroke="#FFFFFF" stroke-opacity="0.5"></circle><circle class="next" cx="748" cy="0" r="20" fill="#000000" fill-opacity="0.7" stroke="#FFFFFF" stroke-opacity="0.5"></circle><text alignment-baseline="middle" text-anchor="middle" fill="#FFFFFF" fill-opacity="0.5">&lt;</text><text alignment-baseline="middle" text-anchor="middle" fill="#FFFFFF" fill-opacity="0.5" x="748">&gt;</text></g><g transform="translate(0,0)" class="questions"><text class="q1" x="632" y="32" font-size="12" alignment-baseline="middle" text-anchor="middle" fill="#000000" fill-opacity="0.82">Transparency International asked 1000 people: </text><text class="q2" x="647" y="50" font-size="20" alignment-baseline="middle" text-anchor="middle" fill="#000000" fill-opacity="0.82">"Do you think the police is typicaly working honestly?"</text></g><g transform="translate(-83,0)" class="labelholder"><text class="percent" x="541" y="139" font-size="13" alignment-baseline="middle" text-anchor="middle" fill="#000000" fill-opacity="0.82">20%</text><text class="percent" x="619.2" y="139" font-size="13" alignment-baseline="middle" text-anchor="middle" fill="#000000" fill-opacity="0.82">33%</text><text class="percent" x="748.23" y="139" font-size="13" alignment-baseline="middle" text-anchor="middle" fill="#000000" fill-opacity="0.82">8%</text><text class="percent" x="779.51" y="139" font-size="13" alignment-baseline="middle" text-anchor="middle" fill="#000000" fill-opacity="0.82">32%</text><text class="percent" x="904.63" y="139" font-size="13" alignment-baseline="middle" text-anchor="middle" fill="#000000" fill-opacity="0.82">7%</text></g></g></svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment