JSFiddle - React, Tailwind, and code Playground

by Samuel Price

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://rawgithub.com/thesamprice/javascript/master/topo.js"></script>
<script src="https://rawgithub.com/thesamprice/javascript/master/color.js"></script>
<svg id="mysvg">
    

      <text x="10" y="100" style="stroke: #ffffff;">
      <textPath xlink:href="#hour_2" >
            Text along a curved path...
      </textPath>

    </text>    
    <g id="hour_group"/>
    <g id="min_group"/>
    <g id="sec_group"/>   
</svg>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}
.hour
{
    stroke:#ffffff;
}

/*Begin of globe */
.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}
 
.fill {
  fill: #fff;
}
 
.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}
 
.land {
  fill: #222;
}
 
.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

#min_group path{
border-style:solid;
stroke-width:1px;
stroke:black;
}
#sec_group path{
border-style:solid;
stroke-width:1px;
stroke:black;
}

JavaScript

var dataset = {
  hours: Array.apply(null, new Array(24)).map(Number.prototype.valueOf,1),
  min: Array.apply(null, new Array(60)).map(Number.prototype.valueOf,1),
  sec: Array.apply(null, new Array(60)).map(Number.prototype.valueOf,1),    
};


var width = 600,
    height = 600,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(radius - 75)
    .outerRadius(radius - 50);

var arc_min = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 75);

var arc_sec = d3.svg.arc()
    .innerRadius(radius - 125)
    .outerRadius(radius - 100);

var svg = d3.select("#hour_group")
    .attr("width", width)
    .attr("height", height)
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = d3.select('#hour_group')
        .selectAll("path")
        .data(pie(dataset.hours))
    .enter()
    .append("path")
    .attr("id", function(d, i) { return 'hour_' + i })
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc)

var path = d3.select('#hour_group')
        .selectAll("text")
        .data(pie(dataset.hours))
        .enter()
    .append('text')
        .attr("x", 6)
        .attr("dy", 15)
    .append('textPath')
        .attr("stroke","black")
        .attr("xlink:href",function(d, i) { return '#hour_' + i })
        .text(function(d, i) { return ' ' + (i) + ' '})



////////// MIN //////////

var svg = d3.select("#min_group")
    .attr("width", width)
    .attr("height", height)
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = d3.select('#min_group')
        .selectAll("path")
        .data(pie(dataset.min))
    .enter()
    .append("path")
    .attr("id", function(d, i) { return 'min_' + i })
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc_min)

var path = d3.select('#min_group')
        .selectAll("text")
       ...