{{ message }}

Instantly share code, notes, and snippets.

# emmasaunders/index.html

Last active Aug 6, 2016
Spiral calendar (v3)

##Explanation This d3 spiral calendar block is based on the spiral created for John Hunter.

• Progressively lighter blue/grey-filled circles indicate the year, starting October 2015 and ending December 2017.
• The thin blue/grey spiral indicates the progression of time. The coloured partial spirals indicate periods of time, which are defined in the periods array.
• The small white circles with the coloured border on top of the periods indicate particular days, or events, as defined in the specialDays array.
 Calendar spiral in d3.js
 var width = 400, height = 430, num_axes = 12, tick_axis = 9, start = 0, firstJan = 0.25, end = 2.25, startDate = new Date(2015,10,1); var theta = function(r) { return 2*Math.PI*r; }; var months = ['Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar']; var r = d3.min([width,height])/2-40; var r2 = r; var radius = d3.scale.linear() .domain([start, end]) .range([0, r]); var angle = d3.scale.linear() .domain([0,num_axes]) .range([0,360]) var svg = d3.select("#chart").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width/2 + "," + (height/2+8) +")"); var pieces = d3.range(start, end+0.001, (end-start)/1000); var spiral = d3.svg.line.radial() .interpolate("cardinal") .angle(theta) .radius(radius); svg.selectAll("circle.tick") .data(d3.range(firstJan,(end+0.001),1)) .enter().append("circle") .attr("class", "tick") .attr("cx", 0) .attr("cy", 0) .attr("r", function(d) { return radius(d); }); svg.selectAll(".axis") .data(d3.range(num_axes)) .enter().append("g") .attr("class", "axis") .attr("transform", function(d) { return "rotate(" + -angle(d) + ")"; }) .call(radial_tick); svg.selectAll("text.year") .data(['2016','2017']) .enter() .append("text") .attr("x","0") .attr("y",function(d,i){ return (i*-80)-35; }) .attr("class","year") .attr("text-anchor","middle") .text(function(d){ return d; }); svg.selectAll("text.months") .data(d3.range(num_axes)) .enter().append("text") .attr("class","months") .attr("y", radius(end)+13) .text(function(d,i) { return months[i]; }) .attr("text-anchor", "middle") .attr("transform", function(d,i) { var tempX = Math.round(1.15*(r * Math.cos((angle(d)/180)*Math.PI))); var tempY = Math.round(1.1*(r * Math.sin((angle(d)/180)*Math.PI))) - r - 6; return "translate(" + tempX + ", " + tempY + ")"; }); svg.selectAll(".spiral") .data([pieces]) .enter().append("path") .attr("class", "spiral") .attr("d", spiral) .attr("transform", function(d) { return "rotate(" + (-90) + ")" });//starts in October var periods = []; periods[0] = {startDay:6, startMth:4, startYear:2016, endDay:31, endMth:1, endYear:2017}; periods[1] = {startDay:1, startMth:6, startYear:2016, endDay:1, endMth:3, endYear:2017}; periods[2] = {startDay:1, startMth:6, startYear:2016, endDay:1, endMth:6, endYear:2017}; periods[3] = {startDay:8, startMth:10, startYear:2016, endDay:5, endMth:11, endYear:2016}; var specialDays = []; specialDays[0] = { day: 1, month: 6, year: 2016, ref:2 }; specialDays[1] = { day: 2, month: 3, year: 2017, ref:2 }; specialDays[2] = { day: 1, month: 6, year: 2017, ref:2}; specialDays[3] = { day: 1, month: 6, year: 2016, ref:1}; specialDays[4] = { day: 1, month: 3, year: 2017, ref:1}; specialDays[5] = { day: 6, month: 4, year: 2016, ref:0}; specialDays[6] = { day: 31, month: 1, year: 2017, ref:0}; specialDays[7] = { day: 8, month: 10, year: 2016, ref:3}; specialDays[8] = { day: 5, month: 11, year: 2016, ref:3}; for (var p=0; p