Week of hours

_.md

[ Launch: Arc test ] bb60c8a3e7dbd7cc3237 by GitNoise

config.json

{"description":"Week of hours","endpoint":"","display":"svg","public":true,"require":[{"name":"d3-tip","url":"https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"labels":{"default":true,"vim":false,"emacs":false,"fontSize":12},"labels.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/NZ668YR.png"}

inlet.js

// magic numbers
var t = 2 * Math.PI;
var depth = 5;
var arcHeight = 35;
var innerRadius = 80;

// arc generators
var arc = d3.svg.arc()
    .innerRadius(function(d,i) { return innerRadius +  d.depth * arcHeight + arcHeight + (d.depth)*1; })
    .outerRadius(function(d,i) { return innerRadius + d.depth * arcHeight + arcHeight*2 + (d.depth+1)*1; })
    .startAngle(function(d, i){return d.start;})
	.endAngle(function(d, i){return d.end;})

var overlayArc = d3.svg.arc()
    .innerRadius(arcHeight + innerRadius)
    .outerRadius(innerRadius +  depth * arcHeight + arcHeight + depth)
    .startAngle(function(d){return d.start;})
	.endAngle(function(d){return d.end;})

// get svg object
var svg = d3.select("svg")
  .append("g")
    .attr("transform", "translate(400, 400)");

// render
var hours = 24 * 7;
var data = d3.range(0,hours*depth);
data = data.map(function(d) {
  return {
    hoursIndex: d % hours,
    hour: d%24,
    start: d*((2*Math.PI) / hours), 
    end: d*((2*Math.PI) / hours) + ((2*Math.PI) / hours),
    color: Math.random(),
    depth: Math.floor(d/hours)
	}
});

var dataOverlay = d3.range(0,hours)
dataOverlay = dataOverlay.map(function(d) {
  return {
      start: d*((2*Math.PI) / hours), 
      end: d*((2*Math.PI) / hours) + ((2*Math.PI) / hours),
      data: d
	}
});

// Scales
var colorScaleDay = d3.scale.linear()
	.domain([0, 1])
	.interpolate(d3.interpolateRgb)
	.range(["#ffffff", "#ffba19"]);

var colorScaleNight = d3.scale.linear()
	.domain([0, 1])
	.interpolate(d3.interpolateRgb)
	.range(["#ffffff", "#2d73fe"]);

var opacityScale = d3.scale.pow().exponent(1.2)
	.domain([0, 1])
	.range([0,1]);

// render viz
var select = svg.selectAll(".fore").data(data).enter();
 
select.append("path")
	.classed("fore", true)
    .style({
      "fill-opacity": function(d) {  return opacityScale(d.color); },
      "stroke": "white",
      "stroke-width": 0.5,
      "fill": function(d) { return (5 >= d.hour) || (18 <= d.hour) ? colorScaleNight(d.color) : colorScaleDay(d.color);  }
    })
    .attr("d", arc)
	.transition();

svg.selectAll(".overlay").data(dataOverlay).enter()
  .append("path")
  .classed("overlay", true)
  .style({
    "stroke": "black",
    "stroke-opacity": 0,
    "stroke-width": 2,
    "fill": "white",
    "fill-opacity": 0
  })
  .attr("d", overlayArc)
  .on('mouseover',  function(d) {
    d3.select(this).style("stroke-opacity", 1);
    var dataindex = d3.select(this).data()[0].data;
    var object = data.filter(function(d) { return d.hoursIndex == dataindex; });
    var result = object.map(function(d) { return d.color; });
    svg.select(".txt").data(result).enter()
    	.append("text").classed("txt",true)
    	.text(function(d) {return d[0];});
  })
  .on('mouseout',  function(d) { 
    d3.select(this).style("stroke-opacity", 0);
   });
  
// labeling
svg.append("circle")
	.attr({
      cx: 0,
      cy: 0,
      r: innerRadius + (arcHeight * (depth + 1))+ 10 
    })
    .style({
      "stroke-width": "1",
      "stroke": "#606060",
      "fill": "none"
    });

// Cross lines and labels
var labelData = data.filter(function(d) { return d.hour == 6 || d.hour == 18 });
var labels = svg.selectAll(".label").data(labelData)
	.enter().append("g").classed("label", true);

labels.append("text") 
	.attr({
      y: function(d) { return (arcHeight*9.5) * Math.cos(d.start); },
      x: function(d) { return (arcHeight*9.5) * Math.sin(d.start); }
    })
.text(function(d) { return d.hour + ":00"})
.style("text-anchor", function(d) { return Math.sin(d.start) > 0 ? "start" : "end"  });

labels.append("line").
	attr({ 
      y2: function(d) { return (arcHeight*(depth + 4)) * Math.cos(d.start); },
      y1: 0,
      x2: function(d) { return (arcHeight*(depth + 4)) * Math.sin(d.start); },
      x1: 0
    })
.style({"stroke": "#606060", "stroke-width":2});

svg.append("circle")
	.attr({
      cx: 0,
      cy: 0,
      r: innerRadius + arcHeight
    })
	.style("fill", "white");

svg.append("circle")
	.attr({
      cx: 0,
      cy: 0,
      r: innerRadius + arcHeight - 5 
    })
    .style({
      "stroke-width": "1",
      "stroke": "#606060",
      "fill": "white" 
    });

svg.append("text").text(depth + " weeks (in hours)")
.attr({
  x: 0,
  y: 3 
})
.style({
  "text-anchor": "middle",
  "font-weight": "bold"
});

styles.css

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none;
}

/* Northward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -4px;
}

/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -4px;
  left: 0;
  text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}