d3

Version:

A small, free JavaScript library for manipulating documents based on data.

mbostock.github.com/d3/

mbostock/d3

107 lines (101 loc) • 18.4 kB

HTML

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>d3.js ~ Calendar View</title> <script type="text/javascript" src="../d3.js?1.12.0"></script> <style type="text/css"> @import url("../style.css?1.10.0"); @import url("../syntax.css?1.6.0"); </style> </head> <body> <div class="body"> <div class="content"> <div class="topbar"> <a href="../">Overview</a> <a href="../ex/">Examples</a> <a href="../api/">Documentation</a> <a href="http://github.com/mbostock/d3/archives/master">Download</a> </div> <div class="sidebar"> <h1>d3.js</h1> </div> <h1 id='calendar_view'>Calendar View</h1> <div class='gallery' id='chart'> </div><link href='calendar.css' rel='stylesheet' type='text/css' /><link href='colorbrewer.css' rel='stylesheet' type='text/css' /><script src='../d3.csv.js?1.12.0' type='text/javascript'> </script><script src='../d3.time.js?1.12.0' type='text/javascript'> </script><script src='calendar.js' type='text/javascript'> </script><script src='dji.js' type='text/javascript'> </script> Colors by <a href='http://colorbrewer.org/'>Cynthia Brewer</a>. Layout inspired by <a href='http://stat-computing.org/dataexpo/2009/posters/'>Rick Wicklin and Robert Allison</a>. Dow Jones historical data copyright <a href='http://finance.yahoo.com/'>Yahoo! Finance</a> or independent data provider; fair use for educational purposes. <h3 id='source_code'>Source Code</h3> <div class='highlight'><pre><code class='js'> 1 var w = 960, 2 pw = 14, 3 z = ~~((w - pw * 2) / 53), 4 ph = z >> 1, 5 h = z * 7; 6 7 var vis = d3.select("#chart") 8 .selectAll("svg") 9 .data(d3.range(1990, 2011)) 10 .enter().append("svg:svg") 11 .attr("width", w) 12 .attr("height", h + ph * 2) 13 .attr("class", "RdGy") 14 .append("svg:g") 15 .attr("transform", "translate(" + pw + "," + ph + ")"); 16 17 vis.append("svg:text") 18 .attr("transform", "translate(-6," + h / 2 + ")rotate(-90)") 19 .attr("text-anchor", "middle") 20 .text(function(d) { return d; }); 21 22 vis.selectAll("rect.day") 23 .data(calendar.dates) 24 .enter().append("svg:rect") 25 .attr("x", function(d) { return d.week * z; }) 26 .attr("y", function(d) { return d.day * z; }) 27 .attr("class", "day") 28 .attr("fill", "#fff") 29 .attr("width", z) 30 .attr("height", z); 31 32 vis.selectAll("path.month") 33 .data(calendar.months) 34 .enter().append("svg:path") 35 .attr("class", "month") 36 .attr("d", function(d) { 37 return "M" + (d.firstWeek + 1) * z + "," + d.firstDay * z 38 + "H" + d.firstWeek * z 39 + "V" + 7 * z 40 + "H" + d.lastWeek * z 41 + "V" + (d.lastDay + 1) * z 42 + "H" + (d.lastWeek + 1) * z 43 + "V" + 0 44 + "H" + (d.firstWeek + 1) * z 45 + "Z"; 46 }); 47 48 d3.csv("dji.csv", function(csv) { 49 var data = d3.nest() 50 .key(function(d) { return d.Date; }) 51 .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; }) 52 .map(csv); 53 54 var color = d3.scale.quantize() 55 .domain([-.05, .05]) 56 .range(d3.range(9)); 57 58 vis.selectAll("rect.day") 59 .attr("class", function(d) { return "day q" + color(data[d.Date]) + "-9"; }) 60 .append("svg:title") 61 .text(function(d) { return d.Date + ": " + (data[d.Date] * 100).toFixed(1) + "%"; }); 62 }); </code></pre> </div> </div> <div class="foot">Copyright © 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div> </div> </div> <a href="http://github.com/mbostock/d3"><img style="position:absolute;top:0;right:0;border:0;" width="149" height="149" src="../forkme.png" alt="Fork me on GitHub" /></a> </body> </html>