3

Using d3.js - I would like to create this kind of clock interface.

Ideally if there is a way to incorporate a 12 clock data driven way into this pie chart.

enter image description here

https://jsfiddle.net/qkHK6/2191/

var w = 400;
var h = 400;
var r = h / 2;
var color = d3.scale.category20c();

var data = [{
  "label": "Category B",
  "value": 70
}, {
  "label": "Category A",
  "value": 30
}];


var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d) {
  return d.value;
});

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);

// select paths, use arc generator to draw
var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
arcs.append("svg:path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d) {
    // log the result of the arc generator to show how cool it is :)
    console.log(arc(d));
    return arc(d);
  });
4
  • be great to make it responsive too at some point - jsfiddle.net/RodEsp/fdzbv6vg Commented Jul 2, 2016 at 1:59
  • -- here is a simple clock face. jsfiddle.net/c9jorqje/6 -- how do I add the ticks, and a pie chart range underneath that shows the time range? Commented Jul 2, 2016 at 6:54
  • What does the pie range exactly mean in the clock face? Commented Jul 2, 2016 at 9:58
  • I think the slice is to start at the 9am point and then end at 6pm Commented Jul 2, 2016 at 11:17

1 Answer 1

5

I think there is no magic bullet for this case. But, you can accomplish the goal with some mathematics.

jsfiddle is here in advance.

Ticks

Ticks can be drawn based on trigonometric functions. If you are scared about tons of formulas, just take a look at this and use them. He described it very neatly as pseudo-code (I guess).

var radius = 80;
var tickLength = 10;
var circleDegree = 360;

clockGroup.append('g')
  .attr('class', 'ticks')
  .selectAll('path')
  .data(splitDegrees(12))
  .enter()
  .append('path')
  .attr('d', function(d) {
    var coord = {
      outer: getCoordFromCircle(d, 0, 0, radius),
      inner: getCoordFromCircle(d, 0, 0, radius - tickLength)
    };
    return 'M' + coord.outer[0] + ' ' + coord.outer[1] + 'L' + coord.inner[0] + ' ' + coord.inner[1] + 'Z';
  });

function degToRad(degrees) {
  return degrees * Math.PI / 180;
}

// it'll give you xy-coord by degree from 12(or 0) o'clock 
function getCoordFromCircle(deg, cx, cy, r) {
  var rad = degToRad(deg);
  var x = cx + r * Math.cos(rad);
  var y = cy + r * Math.sin(rad);
  return [x, y];
}

function splitDegrees(num) {
  var angle = circleDegree / num;
  var degrees = [];

  for (var ang = 0; ang < circleDegree; ang += angle) {
    degrees.push(ang);
  }

  return degrees;
}

Arc range

In this case, you can draw it via simple d3 methods.

var fromClock = 9;
var toClock = 6;

var arc = d3.svg.arc()
  .innerRadius(0)
  .outerRadius(radius)
  .startAngle(clockToRad(fromClock, -1))
  .endAngle(clockToRad(toClock, 1));

clockGroup.append('path')
  .attr('d', arc)
  .style('fill', 'orange');

function clockToRad(clock, direction) {
  var unit = circleDegree / 12;
  var degree = direction > 0 ? unit * clock : unit * clock - circleDegree;
  return degToRad(degree);
}
10
  • that is great man. I've tweaked it to make it look more like their designs. jsfiddle.net/3uz3nzpx/3 -- I don't know if they would anticipate it to be an actual clock -- but thought this was a start. Is there a way to LOCK the clock to the start time? Commented Jul 3, 2016 at 0:48
  • @TheOldCounty you don't want the clock to be animated? Commented Jul 3, 2016 at 11:41
  • 1
    @TheOldCounty If it was right, you just turn off setInterval function and change startAngle and endAngle of minuteArc and hourArc to what you want. jsfiddle.net/jkiimm/3uz3nzpx/4 Commented Jul 3, 2016 at 11:57
  • Well not too sure - was looking for options -- what is the start and end time are not bang on 9, 6 -- what if the start time was 9:20 Commented Jul 3, 2016 at 21:47
  • I've added a fraction element to the time -- so you can add a time and have it be 1/2 an hour. jsfiddle.net/3uz3nzpx/5 Commented Jul 4, 2016 at 22:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.