Old school D3 from simpler times

All examples By author By category About

gisminister

Full window Github gist

Forslag partibarometer

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="barometer">
</div>

<script>
    var data = [
        {
            name: "FrP",
            totaldist: 12,
            img: "https://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/frp.png",
        },{
            name: "SV",
            totaldist: 2,
            img: "https://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/sv.png",
        },{
            name: "Pensjonistpartiet",
            totaldist: 2,
            img: "https://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/pensjonistpartiet.png",
        },{
            name: "Partiet de Kristne",
            totaldist: 2,
            img: "https://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/partiet-de-kristne.png",
        },{
            name: "MDG",
            totaldist: 2,
            img: "https://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/mdg.png",
        },{
            name: "Rødt",
            totaldist: 2,
            img: "https://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/rodt.png",
        },{
            name: "SP",
            totaldist: 8.1,
            img: "https://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/sp.png",
        },{
            name: "AP",
            totaldist: 8.5,
            img: "https://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/ap.png",
        },{
            name: "H",
            totaldist: 7.3,
            img: "https://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/hoyre.png",
        },{
            name: "V",
            totaldist: 7.3,
            img: "https://www.ostlendingen.no/vis/velgerhjelpen/gfx/partilogoer/venstre.png",
        },
    ];
</script>

<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="https://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>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js