var canvas = d3.select("#speed-svg");

var width = canvas.node().getBoundingClientRect().width;
var height = canvas.node().getBoundingClientRect().height;

var r = height/2;
var p = Math.PI * 2;
var size = 0.7;

var start = 0.5;
var stop = 1.2;
var mark = 0.9;

var min = 0;
var max = 60;
var level = 12;

var updateArcs = function()
{
    mark = (level - min)/(max - min)*(stop - start) + start;
}

updateArcs();

var arcBars = [];

arcBars[0] = canvas.append("g")
.attr("transform","translate(" + height/2 + ", " + height/2 + ")");
arcBars[1] = canvas.append("g")
.attr("transform","translate(" + height/2 + ", " + height/2 + ")");

//arcBar default
var arcb = d3.arc()
.innerRadius(function(d) {return r*size;})
.outerRadius(function(d) {return r;})
.startAngle(function(d, i) {if (i%2) return ((d.level - min)/(max - min)*(stop - start) + start)*p; else return start*p;})
.endAngle(function(d, i) {if (i%2) return stop*p; else return ((d.level - min)/(max - min)*(stop - start) + start)*p;});

var paths1_d = [
    {level: 12, colour: "#008cff77"},
    {level: 12, colour: "#a8a8a877"}
];

var updatePaths = function() {
    var paths1 = arcBars[0].selectAll("path")
    .data(paths1_d)
    .attr("d", arcb)
    .attr("fill", function(d) {return d.colour;})
    .enter()
        .append("path")
        .attr("d", arcb)
        .attr("fill", function(d) {return d.colour;});

    var texts1 = arcBars[0].selectAll("text")
    .data(paths1_d)
    .text(function(d, i) {return d.level;})
    .enter()
        .append("text")
        .text(function(d, i) {return d.level;})
        .attr("x", -32 )
        .attr("y", 16 )
        .attr("font-family", "Courier" )
        .attr("font-weight", "bold" )
        .attr("font-size", "60px")
        .attr("fill", "#fff");

    var texts1 = arcBars[1].selectAll("text")
    .data(paths1_d)
    .text('km/h')
    .enter()
        .append("text")
        .text('km/h')
        .attr("x", 0 )
        .attr("y", 30 )
        .attr("font-family", "Courier" )
        .attr("font-weight", "bold" )
        .attr("font-size", "15px")
        .attr("fill", "#fff");
}

setInterval(function() {
    paths1_d[0].level = speed_t;
    paths1_d[1].level = speed_t;
    updatePaths();
}, 500);



