diff --git a/examples/calendar/calendar.css b/examples/calendar/calendar.css new file mode 100644 index 0000000000000..38d5c83b68cde --- /dev/null +++ b/examples/calendar/calendar.css @@ -0,0 +1,16 @@ +#chart { + font: 10px sans-serif; +} + +.day { + fill: none; + stroke: #ccc; + shape-rendering: crispEdges; +} + +.month { + fill: none; + stroke: #000; + stroke-width: 2px; + shape-rendering: crispEdges; +} diff --git a/examples/calendar/calendar.js b/examples/calendar/calendar.js new file mode 100644 index 0000000000000..23f0f65e3dcff --- /dev/null +++ b/examples/calendar/calendar.js @@ -0,0 +1,50 @@ +var calendar = { + + format: d3.time.format("%Y-%m-%d"), + + dates: function(year) { + var dates = [], + date = new Date(year, 0, 1), + week = 0, + day; + do { + dates.push({ + day: day = date.getDay(), + week: week, + month: date.getMonth(), + Date: calendar.format(date) + }); + date.setDate(date.getDate() + 1); + if (day == 6) week++; + } while (date.getFullYear() == year); + return dates; + }, + + months: function(year) { + var months = [], + date = new Date(year, 0, 1), + month, + firstDay, + firstWeek, + day, + week = 0; + do { + firstDay = date.getDay(); + firstWeek = week; + month = date.getMonth(); + do { + day = date.getDay(); + if (day == 6) week++; + date.setDate(date.getDate() + 1); + } while (date.getMonth() == month); + months.push({ + firstDay: firstDay, + firstWeek: firstWeek, + lastDay: day, + lastWeek: day == 6 ? week - 1 : week + }); + } while (date.getFullYear() == year); + return months; + } + +}; diff --git a/examples/calendar/dji.html b/examples/calendar/dji.html index e071724638b4d..2e37b849ba5e8 100644 --- a/examples/calendar/dji.html +++ b/examples/calendar/dji.html @@ -3,146 +3,13 @@ DJI - + + + + - +
+ diff --git a/examples/calendar/dji.js b/examples/calendar/dji.js new file mode 100644 index 0000000000000..cc0c09da20345 --- /dev/null +++ b/examples/calendar/dji.js @@ -0,0 +1,57 @@ +d3.csv("dji.csv", function(csv) { + var data = d3.nest() + .key(function(d) { return d.Date; }) + .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; }) + .map(csv); + + var color = d3.scale.quantize() + .domain([-.05, .05]) + .range(d3.range(9)); + + var w = 710, + pw = 14, + z = ~~((w - pw * 2) / 53), + ph = z >> 1, + h = z * 7 + ph * 2; + + var vis = d3.select("#chart") + .selectAll("svg") + .data(d3.range(1990, 2011)) + .enter("svg:svg") + .attr("width", w) + .attr("height", h) + .attr("class", "RdGy") + .append("svg:g") + .attr("transform", "translate(" + pw + "," + ph + ")"); + + vis.append("svg:text") + .attr("transform", "translate(-6," + h / 2 + ")rotate(-90)") + .text(function(d) { return d; }); + + vis.selectAll("rect.day") + .data(calendar.dates) + .enter("svg:rect") + .attr("x", function(d) { return d.week * z; }) + .attr("y", function(d) { return d.day * z; }) + .attr("class", function(d) { return "day q" + color(data[d.Date]) + "-9"; }) + .attr("width", z) + .attr("height", z) + .append("svg:title") + .text(function(d) { return d.Date + ": " + (data[d.Date] * 100).toFixed(1) + "%"; }); + + vis.selectAll("path.month") + .data(calendar.months) + .enter("svg:path") + .attr("class", "month") + .attr("d", function(d) { + return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z + + "H" + d.firstWeek * z + + "V" + 7 * z + + "H" + d.lastWeek * z + + "V" + (d.lastDay + 1) * z + + "H" + (d.lastWeek + 1) * z + + "V" + 0 + + "H" + (d.firstWeek + 1) * z + + "Z"; + }); +}); diff --git a/examples/calendar/vix.html b/examples/calendar/vix.html index da0643c223c9b..2d311d8e55015 100644 --- a/examples/calendar/vix.html +++ b/examples/calendar/vix.html @@ -3,145 +3,13 @@ VIX - + + + + - +
+ diff --git a/examples/calendar/vix.js b/examples/calendar/vix.js new file mode 100644 index 0000000000000..d92c74d343a3e --- /dev/null +++ b/examples/calendar/vix.js @@ -0,0 +1,57 @@ +d3.csv("vix.csv", function(csv) { + var data = d3.nest() + .key(function(d) { return d.Date; }) + .rollup(function(d) { return d[0].Open; }) + .map(csv); + + var color = d3.scale.quantile() + .domain(d3.values(data)) + .range(d3.range(9).reverse()); + + var w = 710, + pw = 14, + z = ~~((w - pw * 2) / 53), + ph = z >> 1, + h = z * 7 + ph * 2; + + var vis = d3.select("#chart") + .selectAll("svg") + .data(d3.range(1993, 2011)) + .enter("svg:svg") + .attr("width", w) + .attr("height", h) + .attr("class", "RdYlGn") + .append("svg:g") + .attr("transform", "translate(" + pw + "," + ph + ")"); + + vis.append("svg:text") + .attr("transform", "translate(-6," + h / 2 + ")rotate(-90)") + .text(function(d) { return d; }); + + vis.selectAll("rect.day") + .data(calendar.dates) + .enter("svg:rect") + .attr("x", function(d) { return d.week * z; }) + .attr("y", function(d) { return d.day * z; }) + .attr("class", function(d) { return "day q" + color(data[d.Date]) + "-9"; }) + .attr("width", z) + .attr("height", z) + .append("svg:title") + .text(function(d) { return d.Date + ": " + data[d.Date]; }); + + vis.selectAll("path.month") + .data(calendar.months) + .enter("svg:path") + .attr("class", "month") + .attr("d", function(d) { + return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z + + "H" + d.firstWeek * z + + "V" + 7 * z + + "H" + d.lastWeek * z + + "V" + (d.lastDay + 1) * z + + "H" + (d.lastWeek + 1) * z + + "V" + 0 + + "H" + (d.firstWeek + 1) * z + + "Z"; + }); +});