function drawClock(config){
    var svg = d3.select(config.dom_element).append("svg")
    .style("width", config.width + config.margin.left + config.margin.right)
    .style("height", config.height + config.margin.top + config.margin.bottom);

    var clock = svg
    .append("circle")
    .attr("cx",config.x)
    .attr("cy",config.y)
    .attr("r",config.radius)
    .style("fill",config.clock_fill_color)
    .style("stroke",config.clock_stroke_color)
    .style("stroke-width",config.clock_stroke_width);

    var digits = svg.selectAll("digits")
    .data(["01","02","03","04","05","06","07","08","09","10","11","12"])
    .enter();

    digits
    .append("text")
    .attr("x",config.x-5)
    .attr("y",config.y+5)
    .attr("transform",function(d,i){
        var radius = config.radius-20;
        return "translate(" + radius*Math.sin(toRadians(30)*(d)) + "," + radius*Math.cos(toRadians(180) + toRadians(30)*(d)) + ")"
        })
    .text(function(d){return d;});

    seconds_hand = svg
    .append("line")
    .attr("x1",config.x)
    .attr("y1",config.y)
    .attr("x2",config.sh_x)
    .attr("y2",config.sh_y)
    .style("stroke",config.sh_stroke_color)
    .style("stroke-width",config.sh_stroke_width);

    minute_hand = svg
    .append("line")
    .attr("x1",config.x)
    .attr("y1",config.y)
    .attr("x2",config.mh_x)
    .attr("y2",config.mh_y)
    .style("stroke",config.mh_stroke_color)
    .style("stroke-width",config.mh_stroke_width);

    hour_hand = svg
    .append("line")
    .attr("x1",config.x)
    .attr("y1",config.y)
    .attr("x2",config.hh_x)
    .attr("y2",config.hh_y)
    .style("stroke",config.hh_stroke_color)
    .style("stroke-width",config.hh_stroke_width);

    if(config.animation){
        hour_hand_transition(hour_hand,config);
        minute_hand_transition(minute_hand,config);
        seconds_hand_transition(seconds_hand,config);
    }else{
        moveSecondHand(seconds_hand,config,updateData());
        moveMinuteHand(minute_hand,config,updateData());
        moveHourHand(hour_hand,config,updateData());
    }
}

    function moveSecondHand(seconds_hand,config,time_dict){
        var startAngle = time_dict["s"] * 6 - 6;
        var endAngle = time_dict["s"] * 6;

        seconds_hand
          .transition()
            .duration(0)
            .ease("linear")
            .attrTween("transform", function(d){return d3.interpolateString(
            "rotate(" + startAngle + " " + config.x + " " + config.y +")",
            "rotate(" + endAngle + " " + config.x + " " + config.y +")"
            )})

        setTimeout(function() {
            time_dict = updateData();
            moveSecondHand(seconds_hand,config,time_dict);       // repeat
        }, 1000);
    }

    function moveMinuteHand(minute_hand,config,time_dict){
        var startAngle = time_dict["m"] * 6 - 6;
        var endAngle = time_dict["m"] * 6;

        minute_hand
          .transition()
            .duration(0)
            .ease("linear")
            .attrTween("transform", function(d){return d3.interpolateString(
            "rotate(" + startAngle + " " + config.x + " " + config.y +")",
            "rotate(" + endAngle + " " + config.x + " " + config.y +")"
            )})

        setTimeout(function() {
            time_dict = updateData();
            moveMinuteHand(minute_hand,config,time_dict);       // repeat
        }, 1000);
    }

    function moveHourHand(hour_hand,config,time_dict){

        var startAngle = (time_dict["h"] * 60 + time_dict["m"])/2 - 6;
        var endAngle = (time_dict["h"] * 60 + time_dict["m"])/2;

        hour_hand
          .transition()
            .duration(0)
            .ease("linear")
            .attrTween("transform", function(d){return d3.interpolateString(
            "rotate(" + startAngle + " " + config.x + " " + config.y +")",
            "rotate(" + endAngle + " " + config.x + " " + config.y +")"
            )})

        setTimeout(function() {
            time_dict = updateData();
            moveHourHand(hour_hand,config,time_dict);       // repeat
        }, 1000);
    }

    function updateData(){
        var t = new Date();
        hours = (t.getHours() % 12);
        minutes = t.getMinutes();
        seconds = t.getSeconds();

        time_dict = {h:hours,m:minutes,s:seconds}

        return time_dict;
    }

    function toRadians(degs){
        return Math.PI*degs/180;
    }

    function sHandAnim(config) {
        var startAngle = config.sh_start_angle;
        var endAngle = 360 + startAngle;
        return d3.interpolateString(
            "rotate("+startAngle+" "+ config.x +" "+ config.y +")",
            "rotate("+endAngle+" "+ config.x +" "+ config.y +")"
        );
    }
    function mHandAnim(config) {
        var startAngle = config.mh_start_angle;
        var endAngle = 360 + startAngle;
        return d3.interpolateString(
            "rotate("+startAngle+" "+ config.x +" "+ config.y +")",
            "rotate("+endAngle+" "+ config.x +" "+ config.y +")"
        );
    }
    function hHandAnim(config) {
        var startAngle = config.hh_start_angle;
        var endAngle = 360 + startAngle;
        return d3.interpolateString(
            "rotate("+startAngle+" "+ config.x +" "+ config.y +")",
            "rotate("+endAngle+" "+ config.x +" "+ config.y +")"
        );
    }

    function hour_hand_transition(hour_hand,config){
        hour_hand
          .transition()
            .duration(config.hh_interval)
            .ease("linear")
            .attrTween("transform", function(d){return hHandAnim(config);})

        setTimeout(function() {
            hour_hand_transition(hour_hand,config);       // repeat
        }, config.hh_interval);

    }

    function seconds_hand_transition(seconds_hand,config){

        seconds_hand
          .transition()
            .duration(config.sh_interval)
            .ease("linear")
            .attrTween("transform", function(d){return sHandAnim(config);})

        setTimeout(function() {
            seconds_hand_transition(seconds_hand,config);       // repeat
        }, config.sh_interval);

    }

    function minute_hand_transition(minute_hand,config){

        minute_hand
          .transition()
            .duration(config.mh_interval)
            .ease("linear")
            .attrTween("transform", function(d){return mHandAnim(config);})

        setTimeout(function() {
            minute_hand_transition(minute_hand,config);       // repeat
        }, config.mh_interval);

    }