Skip to content

Instantly share code, notes, and snippets.

@BBischof

BBischof/.block

Last active July 24, 2016 19:11
Show Gist options
  • Save BBischof/1947ff949f969d6ca9be285705d57e16 to your computer and use it in GitHub Desktop.
Save BBischof/1947ff949f969d6ca9be285705d57e16 to your computer and use it in GitHub Desktop.
Download ZIP
Calendar Alternate Orientation v4 update
Raw
.block
license: gpl-3.0
Raw
README.md

Updating the exploded month calendar to v4, originally designed by Kathy Zhou. Thanks again to Micah Stubbs for bug fixes on the other one.

Raw
factletdata.csv
Date Facts
2016-02-04 3
2016-02-05 1
2016-02-06 1
2016-02-08 1
2016-02-09 3
2016-02-10 2
2016-02-11 1
2016-02-15 1
2016-02-17 1
2016-02-19 1
2016-02-22 3
2016-02-23 1
2016-02-24 1
2016-02-27 2
2016-02-29 1
2016-03-02 2
2016-03-03 1
2016-03-04 1
2016-03-07 1
2016-03-09 1
2016-03-13 2
2016-03-23 1
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
body {
font: 1.1em sans-serif;
}
#chart{
width: 800px;
margin: 0 auto;
}
.background {
fill: #eee;
}
line {
stroke: #fff;
}
text.active {
fill: red;
}
.day {
fill: #fff;
stroke: #ccc;
}
.month {
fill: none;
stroke: #fff;
stroke-width: 4px;
}
.year-title {
font-size: 1.5em;
}
/* color ranges */
.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)}
polylinear_color = d3.scale.linear()
.domain([0, 3, 10])
.range(['rgb(255,0,0)','rgb(255,255,255)','rgb(0,255,0)'])
/* hover info */
#tooltip {
background-color: #fff;
border: 2px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div id="chart" class="clearfix"></div>
<script src="http://d3js.org/d3.v4.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var width = 960,
height = 750,
cellSize = 25; // cell size
var no_months_in_a_row = Math.floor(width / (cellSize * 7 + 50));
var shift_up = cellSize * 3;
var day = d3.timeFormat("%w"), // day of the week
day_of_month = d3.timeFormat("%e") // day of the month
day_of_year = d3.timeFormat("%j")
week = d3.timeFormat("%U"), // week number of the year
month = d3.timeFormat("%m"), // month number
year = d3.timeFormat("%Y"),
percent = d3.format(".1%"),
format = d3.timeFormat("%Y-%m-%d");
var color = d3.scaleQuantize()
.domain([0, 10])
.range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));
var svg = d3.select("#chart").selectAll("svg")
.data(d3.range(2016, 2017)) //years included in the viz
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "RdYlGn")
.append("g")
var rect = svg.selectAll(".day")
.data(function(d) {
return d3.timeDays(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) {
var month_padding = 1.2 * cellSize*7 * ((month(d)-1) % (no_months_in_a_row));
return day(d) * cellSize + month_padding;
})
.attr("y", function(d) {
var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
var row_level = Math.ceil(month(d) / (no_months_in_a_row));
return (week_diff*cellSize) + row_level*cellSize*8 - cellSize/2 - shift_up;
})
.datum(format);
var month_titles = svg.selectAll(".month-title") // Jan, Feb, Mar and the whatnot
.data(function(d) {
return d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("text")
.text(monthTitle)
.attr("x", function(d, i) {
var month_padding = 1.2 * cellSize*7* ((month(d)-1) % (no_months_in_a_row));
return month_padding;
})
.attr("y", function(d, i) {
var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
var row_level = Math.ceil(month(d) / (no_months_in_a_row));
return (week_diff*cellSize) + row_level*cellSize*8 - cellSize - shift_up;
})
.attr("class", "month-title")
.attr("d", monthTitle);
var year_titles = svg.selectAll(".year-title") // Jan, Feb, Mar and the whatnot
.data(function(d) {
return d3.timeYears(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("text")
.text(yearTitle)
.attr("x", function(d, i) { return width/2 - 100; })
.attr("y", function(d, i) { return cellSize*5.5 - shift_up; })
.attr("class", "year-title")
.attr("d", yearTitle);
// Tooltip Object
var tooltip = d3.select("body")
.append("div").attr("id", "tooltip")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");
d3.csv("factletdata.csv", function(error, csv) {
var data = d3.nest()
.key(function(d) { return d.Date; })
.rollup(function(d) { return (d[0].Facts); })
.map(csv);
rect.filter(function(d) {
return (data.has(d));
})
.attr("class", function(d) {
return "day " + color(data.get(d));
})
.select("title")
.text(function(d) { return d + ": " + percent(data.get(d)); });
// Tooltip
rect.on("mouseover", mouseover);
rect.on("mouseout", mouseout);
function mouseover(d) {
tooltip.style("visibility", "visible");
var factlet_num = (data[('$' + d)] !== undefined) ? data[('$' + d)] : 0;
var purchase_text = d + ": " + factlet_num + " factlets";
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(purchase_text)
.style("left", (d3.event.pageX)+30 + "px")
.style("top", (d3.event.pageY) + "px");
}
function mouseout (d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
var $tooltip = $("#tooltip");
$tooltip.empty();
}
});
function dayTitle (t0) {
return t0.toString().split(" ")[2];
}
function monthTitle (t0) {
return t0.toLocaleString("en-us", { month: "long" });
}
function yearTitle (t0) {
return t0.toString().split(" ")[3];
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment