gisminister/index.html

## 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>
	<!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 stemmer: "+d.totaldist+" "+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(" ")
	.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>