Skip to content

Instantly share code, notes, and snippets.

@gisminister

gisminister/index.html

Created September 3, 2015 11:34
Show Gist options
  • Save gisminister/2eebb7f260ea59ad90fa to your computer and use it in GitHub Desktop.
Save gisminister/2eebb7f260ea59ad90fa to your computer and use it in GitHub Desktop.
Download ZIP
Forslag partibarometer
Raw
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--START PÅ EMBEDKODE HER, REDIGER GJERNE PÅ TEKSTEN-->
<!-- Du kan godt redigere teksten i headeren eller beskrivelsen -->
<div id="barometer">
</div>
<script>
var data = [
{
name: "FrP",
totaldist: 12,
img: "http://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/frp.png",
},{
name: "SV",
totaldist: 2,
img: "http://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/sv.png",
},{
name: "Pensjonistpartiet",
totaldist: 2,
img: "http://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/pensjonistpartiet.png",
},{
name: "Partiet de Kristne",
totaldist: 2,
img: "http://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/partiet-de-kristne.png",
},{
name: "MDG",
totaldist: 2,
img: "http://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/mdg.png",
},{
name: "Rødt",
totaldist: 2,
img: "http://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/rodt.png",
},{
name: "SP",
totaldist: 8.1,
img: "http://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/sp.png",
},{
name: "AP",
totaldist: 8.5,
img: "http://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/ap.png",
},{
name: "H",
totaldist: 7.3,
img: "http://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/hoyre.png",
},{
name: "V",
totaldist: 7.3,
img: "http://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/venstre.png",
},
];
</script>
<!-- UNDER HER SKAL DU IKKE TRENGE Å GJØRE NOE -->
<style>
#barometer {
position: relative;
background-color: #ccc;
}
div.ku-header {
padding: 5px;
}
div.ku-footer {
padding: 5px;
}
div.ku-container {
padding: 5px;
}
img.ku-image {
width:50px;
height:50px;
border: 3px solid #fff;
border-radius: 50px;
background-color: #fff;
}
div.ku-image {
width:56px;
float:left;
}
div.ku-info {
margin-left:80px;
}
div.ku-name {
font-size: 1.1em;
font-weight: bold;
}
div.ku-bar-bg {
height: 15px;
width: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.08);
border-radius: 0 15px 15px 0;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.08);
}
div.ku-bar {
height: 15px;
border-radius: 0 15px 15px 0;
background-color: #555555;
}
hr.ku-line {
clear: both;
border: none;
margin: 0;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var distanceunit = "%";
var maxdist = d3.max(data,function(el){return el.totaldist;});
var progress = 100;
var container = d3.select("#barometer");
data = data.sort(function(a,b){
if (a.totaldist > b.totaldist) return -1;
if (a.totaldist < b.totaldist) return 1;
return 0;
});
var kucontainer = container.selectAll("div.ku-container")
.data(data)
.enter().append("div")
.attr("class","ku-container");
var imagecontainer = kucontainer.selectAll("div.ku-image")
.data(function(d){return [d];})
.enter().append("div")
.attr("class","ku-image");
imagecontainer.append("img")
.attr("class","ku-image")
.attr("title",function(d,i){return d.name;})
.attr("src",function(d,i){return d.img;});
var infocontainer = kucontainer.selectAll("div.ku-info")
.data(function(d){return [d];})
.enter().append("div")
.attr("class","ku-info");
infocontainer.append("div")
.attr("class","ku-name")
.text(function(d){return d.name;});
infocontainer.append("div")
.attr("class","ku-distance")
.html(function(d){return "Antall&nbsp;stemmer:&nbsp;"+d.totaldist+"&nbsp;"+distanceunit;});
var barbg = infocontainer.append("div")
.attr("class","ku-bar-bg");
barbg.append("div")
.attr("class","ku-bar")
.style("text-align","right")
.style("width",0)
.attr("title",function(d){return d.totaldist+" "+distanceunit;})
.html("&nbsp;")
.transition()
.duration(2000)
.style("width",function(d) { return progress*d.totaldist/maxdist+"%"; });
kucontainer.append("hr")
.attr("class","ku-line");
</script>
<!--SLUTT PÅ EMBEDKODE HER-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment