This example demonstrates loading of CSV data, which is then quantized into a diverging color scale. The values are visualized as colored cells per day. Days are arranged into columns by week, then grouped by month and years. Colors by Cynthia Brewer. Layout inspired by Rick Wicklin and Robert Allison.
Edited to play with a Google Calendar ICS, imported to Thunderbird/Lightning and exported to CSv.
| "Subject","Startdate","Start Time","End Date","End Time","All day event","Reminder on/off","Reminder Date","Reminder Time","Categories","Description","Location","Private" | |
| "RubyKaigi 2013 EarlyBird Ticket","03/27/13","05:30:00 PM","03/27/13","06:30:00 PM","False","True","03/27/13","05:00:00 PM","" | |
| "College for Kids I","06/24/13","12:00:00 AM","07/13/13","12:00:00 AM","True","False","","","","","","False" | |
| "Ruby Kaigi","05/30/13","12:00:00 AM","06/02/13","12:00:00 AM","True","False","","","","","","False" | |
| "Open Hardware Summit","09/06/13","12:00:00 AM","09/07/13","12:00:00 AM","True","False","","","","","","False" | |
| "Technology & Arts","06/17/13","12:00:00 AM","06/22/13","12:00:00 AM","True","False","","","","","","False" | |
| "College For Kids 2","07/22/13","12:00:00 AM","07/27/13","12:00:00 AM","True","False","","","","","","False" | |
| "UXMad","07/11/13","12:00:00 AM","07/14/13","12:00:00 AM","True","False","","","","","","False" | |
| "MadisonRuby","08/22/13","12:00:00 AM","08/25/13","12:00:00 AM","True","False","","","","","","False" | |
| "GDC 2013","03/25/13","12:00:00 AM","03/30/13","12:00:00 AM","True","False","","","","","San Francisco, CA","False" | |
| "Snow*Mobile","02/15/13","12:00:00 AM","02/17/13","12:00:00 AM","True","False","","","","","","False" | |
| "RailsConf 2013","04/28/13","07:00:00 PM","05/01/13","07:00:00 PM","False","False","","","","Coming up: RubyConf 2012 and RailsConf 2013RubyConf 2012 will be held in Denver, CO, from November 1-3. RailsConf 2013 will return to Portland, OR, from April 29 - May 2. See you at both events!","Portland,Oregon,United States","False" | |
| "TrailsFwd: Design Mtg","07/27/12","10:00:00 AM","07/27/12","12:00:00 PM","False","False","","","","Discuss design, emerging issues, resolving issues","","False" | |
| "Trails quickie","10/12/12","09:00:00 AM","10/12/12","09:30:00 AM","False","True","10/12/12","08:50:00 AM","","","","False" | |
| "Trails Fwd - Standup","09/20/12","09:30:00 AM","09/20/12","10:00:00 AM","False","True","09/20/12","09:20:00 AM","","","","False" |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| shape-rendering: crispEdges; | |
| } | |
| .day { | |
| fill: #fff; | |
| stroke: #ccc; | |
| } | |
| .month { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: 2px; | |
| } | |
| .RdYlGn .q0-11{fill:rgb(165,0,38)} | |
| .RdYlGn .q1-11{fill:rgb(215,48,39)} | |
| .RdYlGn .q2-11{fill:rgb(244,109,67)} | |
| .RdYlGn .q3-11{fill:rgb(253,174,97)} | |
| .RdYlGn .q4-11{fill:rgb(254,224,139)} | |
| .RdYlGn .q5-11{fill:rgb(255,255,191)} | |
| .RdYlGn .q6-11{fill:rgb(217,239,139)} | |
| .RdYlGn .q7-11{fill:rgb(166,217,106)} | |
| .RdYlGn .q8-11{fill:rgb(102,189,99)} | |
| .RdYlGn .q9-11{fill:rgb(26,152,80)} | |
| .RdYlGn .q10-11{fill:rgb(0,104,55)} | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 136, | |
| cellSize = 17; // cell size | |
| var day = d3.time.format("%w"), | |
| week = d3.time.format("%U"), | |
| percent = d3.format(".1%"), | |
| format = d3.time.format("%m/%d/%Y"); | |
| var color = d3.scale.quantize() | |
| .domain([-.05, .05]) | |
| .range(d3.range(11).map(function(d) { return "q" + d + "-11"; })); | |
| var svg = d3.select("body").selectAll("svg") | |
| .data(d3.range(2012, 2014)) | |
| .enter().append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .attr("class", "RdYlGn") | |
| .append("g") | |
| .attr("transform", "translate(" + ((width - cellSize * 53) / 2) + "," + (height - cellSize * 7 - 1) + ")"); | |
| svg.append("text") | |
| .attr("transform", "translate(-6," + cellSize * 3.5 + ")rotate(-90)") | |
| .style("text-anchor", "middle") | |
| .text(function(d) { return d; }); | |
| var rect = svg.selectAll(".day") | |
| .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) | |
| .enter().append("rect") | |
| .attr("class", "day") | |
| .attr("width", cellSize) | |
| .attr("height", cellSize) | |
| .attr("x", function(d) { return week(d) * cellSize; }) | |
| .attr("y", function(d) { return day(d) * cellSize; }) | |
| .datum(format); | |
| rect.append("title") | |
| .text(function(d) { return d; }); | |
| svg.selectAll(".month") | |
| .data(function(d) { return d3.time.months(new Date(d, 0, 1), new Date(d + 1, 0, 1)); }) | |
| .enter().append("path") | |
| .attr("class", "month") | |
| .attr("d", monthPath); | |
| d3.csv("dji.csv", function(error, csv) { | |
| var data = d3.nest() | |
| .key(function(d) { return d.Startdate; }) | |
| .rollup(function(d) { return 0.05; }) | |
| .map(csv); | |
| rect.filter(function(d) { return d in data; }) | |
| .attr("class", function(d) { return "day " + color(data[d]); }) | |
| .select("title") | |
| .text(function(d) { return d + ": " + percent(data[d]); }); | |
| }); | |
| function monthPath(t0) { | |
| var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0), | |
| d0 = +day(t0), w0 = +week(t0), | |
| d1 = +day(t1), w1 = +week(t1); | |
| return "M" + (w0 + 1) * cellSize + "," + d0 * cellSize | |
| + "H" + w0 * cellSize + "V" + 7 * cellSize | |
| + "H" + w1 * cellSize + "V" + (d1 + 1) * cellSize | |
| + "H" + (w1 + 1) * cellSize + "V" + 0 | |
| + "H" + (w0 + 1) * cellSize + "Z"; | |
| } | |
| d3.select(self.frameElement).style("height", "2910px"); | |
| </script> |