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. Dow Jones historical data copyright Yahoo! Finance or independent data provider; fair use for educational purposes.
forked from mbostock's block: Calendar View
xxxxxxxxxx<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="//d3js.org/d3.v3.min.js"></script><script>var width = 960, height = 136, cellSize = 17; // cell sizevar percent = d3.format(".1%"), format = d3.time.format("%Y-%m-%d");var color = d3.scale.quantize() .domain([-.05, .05]) .range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));// Creating on SVG for each year in the date range 1990 to 2011var svg = d3.select("body").selectAll("svg") .data(d3.range(1990, 2011)) .enter().append("svg") .attr("width", width) .attr("height", height) .attr("class", "RdYlGn") .append("g") // Tranlating the g element such that the space remaining after subtracting the 53 weeks x cell size is available on both sides // While space for the height is only left at the top .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") // The data sent here will be the year number and the data generated will be each day // in that year. And so a rectange will be formed for every day in that year. .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) // X pos of the rectangle is at week of the year .attr("x", function(d) { return d3.time.weekOfYear(d) * cellSize; }) // Y pos of the rectange is .attr("y", function(d) { return d.getDay() * 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) { if (error) throw error; 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); console.log(data); 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) { // t1 gets the last day of the month passed var t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0), // d0 gets the first day (Weekday) of the month, w0 gets the week of the year d0 = t0.getDay(), w0 = d3.time.weekOfYear(t0), // d1 gets the last day (Weekday) of the month, w1 gets the week of the year d1 = t1.getDay(), w1 = d3.time.weekOfYear(t1); //console.log(t0, t1, d0, d1); 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";}</script> https://d3js.org/d3.v3.min.js