JSFiddle - React, Tailwind, and code Playground

by chriswilsondc

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<div class="chart"></div>

CSS

.hand {
    stroke-width: 5px;
    stroke: #666;
}

JavaScript

function clock(opts) {
    opts = opts || {};
    
    var x = (typeof opts.x !== "undefined") ? opts.x : 100,
        y = (typeof opts.y !== "undefined") ? opts.y : 100,
        r = (typeof opts.r !== "undefined") ? opts.r : 25,  
        margin = (typeof opts.margin !== "undefined") ? opts.margin : 5,  
        format = d3.time.format(opts.format || "%H:%M");
    
    var times = {
        default: opts.time ? format.parse(opts.time) : format.parse("12:00")
    };

    var vis = d3.selectAll(".chart").append("svg:svg").attr("width", x + r + margin).attr("height", y + r + margin);

    var clockGroup = vis.append("svg:g");

    clockGroup.append("svg:circle")
        .attr("r", r)
        .attr("cx", x)
        .attr("cy", y)
        .style("fill", "white")
        .style("stroke", "black")
        .style("stroke-width", 4);
    
    return {
        addTime: function(name, opts) {
            var fmt = d3.time.format(opts.format || "%H:%M");
            times[name] = opts.time ? fmt.parse(opts.time) : fmt.parse("12:00");
        },
        render: function() {
            vis.selectAll(".hand")
                .data(d3.entries(times))
                .enter()
            .append("svg:path")
                .attr("class", "hand")
            .attr("d", function(d) {
                return "M" + x + "," + y + "L" + x + "," + (y - r * 0.8);
            })
            .attr("transform", function(d) { return "rotate(" + (d.value.getHours() / 12 * 360) + " " + x + "," + y + ")"});
            
        }
        
    }
   
    
    /*    
    var clockGroup, fields, height, pi, render, scaleHours, scaleSecs, vis, width;

    fields = function() {        
        var second = currentTime.getSeconds(),
            minute = currentTime.getMinutes(),
            hour = currentTime.getHours() + minute / 60;
        
        return data = [
          {
            "seconds" : second,
            "minutes" : minute,
            "hours" : hour
          }
        ];
     ...