Skip to content

Instantly share code, notes, and snippets.

@sebastienwindal

sebastienwindal/.block

Forked from mbostock/.block
Last active February 24, 2016 16:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sebastienwindal/a4ee9ea44ab64866bb34 to your computer and use it in GitHub Desktop.
Save sebastienwindal/a4ee9ea44ab64866bb34 to your computer and use it in GitHub Desktop.
Download ZIP
Calendar View
Raw
.block
license: gpl-3.0
height: 910
border: no
Raw
README.md

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.

Raw
dji.csv
Date Open High Low Close Volume Adj Close
2010-10-01 10789.72 10907.41 10759.14 10829.68 4298910000 10829.68
2010-09-30 10835.96 10960.99 10732.27 10788.05 4284160000 10788.05
2010-09-29 10857.98 10901.96 10759.75 10835.28 3990280000 10835.28
2010-09-28 10809.85 10905.44 10714.03 10858.14 4025840000 10858.14
2010-09-27 10860.03 10902.52 10776.44 10812.04 3587860000 10812.04
2010-09-24 10664.39 10897.83 10664.39 10860.26 4123950000 10860.26
2010-09-23 10738.48 10779.65 10610.12 10662.42 3847850000 10662.42
2010-09-22 10761.11 10829.75 10682.40 10739.31 3911070000 10739.31
2010-09-21 10753.39 10844.89 10674.83 10761.03 4175660000 10761.03
2010-09-20 10608.08 10783.51 10594.38 10753.62 3364080000 10753.62
2010-09-17 10595.44 10689.29 10529.67 10607.85 4086140000 10607.85
2010-09-16 10571.75 10624.58 10499.43 10594.83 3364080000 10594.83
2010-09-15 10526.42 10609.21 10453.15 10572.73 3369840000 10572.73
2010-09-14 10544.81 10622.69 10460.34 10526.49 4521050000 10526.49
2010-09-13 10458.60 10605.73 10458.45 10544.13 4521050000 10544.13
2010-09-10 10415.01 10502.80 10376.34 10462.77 3061160000 10462.77
2010-09-09 10388.22 10515.86 10359.23 10415.24 3387770000 10415.24
2010-09-08 10338.57 10460.50 10318.93 10387.01 3224640000 10387.01
2010-09-07 10446.80 10448.99 10304.44 10340.69 3107380000 10340.69
2010-09-03 10321.92 10484.71 10321.92 10447.93 3534500000 10447.93
2010-09-02 10270.08 10350.98 10211.80 10320.10 3704210000 10320.10
2010-09-01 10016.01 10305.87 10016.01 10269.47 4396880000 10269.47
2010-08-31 10006.42 10101.53 9915.73 10014.72 4038770000 10014.72
2010-08-30 10145.58 10170.10 10005.56 10009.73 2917990000 10009.73
2010-08-27 9982.40 10176.30 9925.11 10150.65 4102460000 10150.65
2010-08-26 10059.83 10138.12 9959.17 9985.81 3646710000 9985.81
2010-08-25 10040.15 10104.18 9925.34 10060.06 4360190000 10060.06
2010-08-24 10170.86 10170.86 9975.86 10040.45 4436330000 10040.45
2010-08-23 10215.51 10328.88 10146.18 10174.41 3210950000 10174.41
2010-08-20 10270.98 10276.13 10131.88 10213.62 3761570000 10213.62
2010-08-19 10411.15 10412.29 10202.34 10271.21 4290540000 10271.21
2010-08-18 10398.59 10486.38 10308.83 10415.54 3724260000 10415.54
2010-08-17 10297.55 10501.67 10297.55 10405.85 3968210000 10405.85
2010-08-16 10303.07 10354.39 10193.26 10302.01 3142450000 10302.01
2010-08-13 10320.33 10381.86 10254.18 10303.15 3328890000 10303.15
2010-08-12 10361.58 10388.37 10222.85 10319.95 4521050000 10319.95
2010-08-11 10631.82 10631.82 10339.63 10378.83 4511860000 10378.83
2010-08-10 10696.63 10717.21 10522.63 10644.25 3979360000 10644.25
2010-08-09 10654.62 10755.66 10618.26 10698.75 3191630000 10698.75
2010-08-06 10668.55 10688.08 10491.37 10653.56 3857890000 10653.56
2010-08-05 10679.67 10712.37 10571.60 10674.98 3685560000 10674.98
2010-08-04 10630.20 10738.48 10583.10 10680.43 4057850000 10680.43
2010-08-03 10673.92 10714.19 10564.18 10636.38 4071820000 10636.38
2010-08-02 10468.82 10715.21 10468.82 10674.38 4144180000 10674.38
2010-07-30 10465.19 10528.84 10327.37 10465.94 4006450000 10465.94
2010-07-29 10498.94 10609.74 10383.45 10467.16 4612420000 10467.16
2010-07-28 10537.01 10586.36 10445.17 10497.88 4002390000 10497.88
2010-07-27 10525.28 10632.52 10460.65 10537.69 4725690000 10537.69
2010-07-26 10424.17 10545.94 10391.02 10525.43 4009650000 10525.43
2010-07-23 10321.16 10465.19 10237.84 10424.62 4524570000 10424.62
2010-07-22 10121.81 10391.78 10121.81 10322.30 4826900000 10322.30
2010-07-21 10226.02 10310.04 10053.85 10120.53 4747180000 10120.53
2010-07-20 10151.48 10248.20 9973.17 10229.96 4713280000 10229.96
2010-07-19 10098.12 10213.09 10051.28 10154.43 4089500000 10154.43
2010-07-16 10356.20 10356.20 10071.63 10097.90 5297350000 10097.90
2010-07-15 10367.10 10409.49 10216.04 10359.31 4552470000 10359.31
2010-07-14 10370.96 10423.03 10265.16 10366.72 4521050000 10366.72
2010-07-13 10217.55 10436.20 10217.55 10363.02 4640460000 10363.02
2010-07-12 10199.24 10260.62 10121.13 10216.27 3426990000 10216.27
2010-07-09 10137.93 10226.48 10079.05 10198.03 3506570000 10198.03
2010-07-08 10019.26 10175.02 9987.02 10138.99 4548460000 10138.99
2010-07-07 9736.85 10029.93 9716.38 10018.28 4931220000 10018.28
2010-07-06 9689.21 9880.76 9648.26 9743.62 4691240000 9743.62
2010-07-02 9732.23 9798.19 9603.80 9686.48 3968500000 9686.48
2010-07-01 9773.27 9834.71 9596.04 9732.53 6435770000 9732.53
2010-06-30 9868.34 9951.47 9741.07 9774.02 5067080000 9774.02
2010-06-29 10135.72 10135.72 9786.45 9870.30 6136700000 9870.30
2010-06-28 10143.05 10246.82 10070.12 10138.52 3896410000 10138.52
2010-06-25 10153.48 10261.10 10039.97 10143.81 5128840000 10143.81
2010-06-24 10297.08 10314.31 10112.60 10152.80 4814830000 10152.80
2010-06-23 10293.30 10393.89 10195.81 10298.44 4526150000 10298.44
2010-06-22 10441.95 10524.78 10276.14 10293.52 4514380000 10293.52
2010-06-21 10452.46 10627.19 10387.54 10442.41 4514360000 10442.41
2010-06-18 10435.00 10513.75 10379.60 10450.64 4555360000 10450.64
2010-06-17 10409.98 10479.74 10293.49 10434.17 4557760000 10434.17
2010-06-16 10404.24 10456.39 10289.37 10409.46 5002600000 10409.46
2010-06-15 10192.40 10416.11 10192.40 10404.77 4644490000 10404.77
2010-06-14 10211.83 10354.97 10175.02 10190.89 4425830000 10190.89
2010-06-11 10166.78 10235.10 10038.31 10211.07 4059280000 10211.07
2010-06-10 9901.67 10206.61 9901.67 10172.53 5144780000 10172.53
2010-06-09 9941.57 10093.33 9859.04 9899.25 5983200000 9899.25
2010-06-08 9812.94 9971.57 9726.33 9939.98 6192750000 9939.98
2010-06-07 9931.75 10025.84 9798.73 9816.49 5467560000 9816.49
2010-06-04 10249.61 10249.61 9881.11 9931.97 6180580000 9931.97
2010-06-03 10250.67 10348.84 10158.92 10255.28 4995970000 10255.28
2010-06-02 10025.61 10256.57 10007.09 10249.54 5026360000 10249.54
2010-06-01 10133.94 10249.27 9976.56 10024.02 5271480000 10024.02
2010-05-28 10258.00 10293.45 10078.66 10136.63 4871210000 10136.63
2010-05-27 9971.73 10279.01 9971.73 10258.99 5698460000 10258.99
2010-05-26 10045.11 10211.60 9937.79 9974.45 4521050000 9974.45
2010-05-25 10061.43 10061.43 9756.11 10043.75 7329580000 10043.75
2010-05-24 10193.46 10235.63 10028.78 10066.57 5224040000 10066.57
2010-05-21 10063.93 10225.88 9860.93 10193.39 5452130000 10193.39
2010-05-20 10440.21 10440.21 10042.46 10068.01 8328569600 10068.01
2010-05-19 10505.70 10558.56 10306.22 10444.37 6765800000 10444.37
2010-05-18 10625.45 10760.05 10463.15 10510.95 6170840000 10510.95
2010-05-17 10616.98 10707.30 10424.72 10625.83 5922920000 10625.83
2010-05-14 10780.68 10780.68 10509.89 10620.16 6126400000 10620.16
2010-05-13 10896.61 10952.84 10752.72 10782.95 4870640000 10782.95
2010-05-12 10742.15 10941.88 10725.81 10896.91 5225460000 10896.91
2010-05-11 10780.00 10888.30 10653.71 10748.26 5842550000 10748.26
2010-05-10 10386.18 10880.14 10386.18 10785.14 6893700000 10785.14
2010-05-07 10519.42 10622.27 10221.50 10380.43 9472910400 10380.43
2010-05-06 10862.22 10925.86 9787.17 10520.32 10617809600 10520.32
2010-05-05 10918.40 10984.05 10754.30 10868.12 6795940000 10868.12
2010-05-04 11149.48 11149.48 10843.71 10926.77 6594720000 10926.77
2010-05-03 11009.60 11203.37 11004.15 11151.83 4938050000 11151.83
2010-04-30 11168.23 11235.94 10984.35 11008.61 6048260000 11008.61
2010-04-29 11045.64 11232.54 11045.64 11167.32 6059410000 11167.32
2010-04-28 10988.87 11115.63 10938.48 11045.27 6342310000 11045.27
2010-04-27 11203.67 11260.88 10962.81 10991.99 7454540000 10991.99
2010-04-26 11205.11 11308.95 11150.01 11205.03 5647760000 11205.03
2010-04-23 11132.18 11247.20 11058.87 11204.28 5326060000 11204.28
2010-04-22 11119.78 11175.33 10975.66 11134.29 6035780000 11134.29
2010-04-21 11116.91 11217.35 11018.59 11124.92 5724310000 11124.92
2010-04-20 11093.11 11190.22 11045.80 11117.06 5316590000 11117.06
2010-04-19 11018.36 11116.76 10940.60 11092.05 6597740000 11092.05
2010-04-16 11143.66 11186.82 10947.55 11018.66 8108470400 11018.66
2010-04-15 11122.96 11189.61 11051.31 11144.57 5995330000 11144.57
2010-04-14 11020.70 11147.14 11004.61 11123.11 5760040000 11123.11
2010-04-13 11006.72 11072.70 10925.86 11019.42 5403580000 11019.42
2010-04-12 10996.75 11066.96 10957.22 11005.97 4607090000 11005.97
2010-04-09 10926.92 11032.12 10894.19 10997.35 4511570000 10997.35
2010-04-08 10896.99 10969.92 10810.15 10927.07 4726970000 10927.07
2010-04-07 10961.95 11000.22 10835.77 10897.52 5101430000 10897.52
2010-04-06 10972.49 11017.76 10893.89 10969.99 4086180000 10969.99
2010-04-05 10927.45 11026.75 10880.36 10973.55 3881620000 10973.55
2010-04-01 10857.31 10983.14 10851.57 10927.07 4006870000 10927.07
2010-03-31 10907.34 10933.19 10802.22 10856.63 4484340000 10856.63
2010-03-30 10895.02 10968.56 10837.21 10907.42 4085000000 10907.42
2010-03-29 10849.23 10954.43 10827.91 10895.86 4375580000 10895.86
2010-03-26 10841.29 10934.85 10801.84 10850.36 4708420000 10850.36
2010-03-25 10837.51 10985.26 10818.77 10841.21 5668900000 10841.21
2010-03-24 10887.62 10925.48 10788.77 10836.15 4705750000 10836.15
2010-03-23 10787.18 10906.06 10752.41 10888.83 4411640000 10888.83
2010-03-22 10741.00 10836.68 10672.23 10785.89 4261680000 10785.89
2010-03-19 10780.00 10869.55 10665.35 10741.98 5212410000 10741.98
2010-03-18 10733.44 10821.49 10686.89 10779.17 4234510000 10779.17
2010-03-17 10686.36 10787.86 10658.10 10733.67 4963200000 10733.67
2010-03-16 10642.53 10717.42 10594.16 10685.98 4369770000 10685.98
2010-03-15 10623.41 10680.32 10540.65 10642.15 4164110000 10642.15
2010-03-12 10611.77 10690.90 10561.66 10624.69 4928160000 10624.69
2010-03-11 10560.98 10626.73 10489.87 10611.84 4669060000 10611.84
2010-03-10 10560.13 10639.05 10502.64 10567.33 5469120000 10567.33
2010-03-09 10552.24 10637.46 10493.49 10564.38 5185570000 10564.38
2010-03-08 10563.78 10632.48 10500.90 10552.52 3774680000 10552.52
2010-03-05 10445.13 10587.13 10445.13 10566.20 4133000000 10566.20
2010-03-04 10396.53 10484.05 10363.88 10444.14 3945010000 10444.14
2010-03-03 10406.28 10496.22 10359.58 10396.76 3951320000 10396.76
2010-03-02 10404.16 10493.80 10359.80 10405.98 4134680000 10405.98
2010-03-01 10326.10 10444.60 10320.05 10403.79 3847640000 10403.79
2010-02-26 10321.41 10391.24 10250.45 10325.26 3945190000 10325.26
2010-02-25 10366.60 10366.60 10155.75 10321.03 4521130000 10321.03
2010-02-24 10284.00 10416.94 10271.61 10374.16 4168360000 10374.16
2010-02-23 10383.16 10430.16 10239.34 10282.41 4521050000 10282.41
2010-02-22 10402.43 10468.55 10333.05 10383.38 3814440000 10383.38
2010-02-19 10387.77 10459.18 10316.50 10402.35 3944280000 10402.35
2010-02-18 10309.39 10416.79 10255.58 10392.90 3878620000 10392.90
2010-02-17 10261.48 10366.83 10223.16 10309.24 4259230000 10309.24
2010-02-16 10100.81 10292.62 10100.81 10268.81 4080770000 10268.81
2010-02-12 10137.23 10140.18 9962.13 10099.14 4160680000 10099.14
2010-02-11 10037.85 10184.85 9963.19 10144.19 4400870000 10144.19
2010-02-10 10055.46 10120.15 9946.26 10038.38 4251450000 10038.38
2010-02-09 9910.28 10154.24 9910.28 10058.64 5114260000 10058.64
2010-02-08 10005.43 10059.24 9882.85 9908.39 4089820000 9908.39
2010-02-05 10003.69 10078.89 9822.84 10012.23 6438900000 10012.23
2010-02-04 10273.12 10273.12 9984.35 10002.18 5859690000 10002.18
2010-02-03 10291.73 10356.86 10192.03 10270.55 4285450000 10270.55
2010-02-02 10186.13 10333.35 10138.75 10296.85 4749540000 10296.85
2010-02-01 10068.99 10227.24 10068.99 10185.53 4077610000 10185.53
2010-01-29 10122.04 10272.29 10014.35 10067.33 5412850000 10067.33
2010-01-28 10236.92 10310.68 10023.80 10120.46 5452400000 10120.46
2010-01-27 10194.29 10294.13 10060.98 10236.16 5319120000 10236.16
2010-01-26 10195.35 10323.00 10102.17 10194.29 4731910000 10194.29
2010-01-25 10175.10 10316.65 10135.95 10196.86 4481390000 10196.86
2010-01-22 10389.58 10450.04 10133.15 10172.98 6208650000 10172.98
2010-01-21 10603.91 10651.14 10334.18 10389.88 6874289600 10389.88
2010-01-20 10719.69 10719.69 10492.36 10603.15 4810560000 10603.15
2010-01-19 10608.37 10763.45 10555.47 10725.43 4724830000 10725.43
2010-01-15 10706.99 10736.54 10529.09 10609.65 4758730000 10609.65
2010-01-14 10680.16 10767.15 10619.02 10710.55 3915200000 10710.55
2010-01-13 10628.09 10747.12 10569.07 10680.77 4170360000 10680.77
2010-01-12 10662.86 10701.48 10523.35 10627.26 4716160000 10627.26
2010-01-11 10620.31 10739.87 10538.91 10663.99 4255780000 10663.99
2010-01-08 10606.40 10653.11 10509.74 10618.19 4389590000 10618.19
2010-01-07 10571.11 10655.60 10471.73 10606.86 5270680000 10606.86
2010-01-06 10564.72 10655.22 10488.28 10573.68 4972660000 10573.68
2010-01-05 10584.56 10647.14 10468.86 10572.02 2491020000 10572.02
2010-01-04 10430.69 10641.62 10430.69 10583.96 3991400000 10583.96
Raw
index.html
<!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="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 136,
cellSize = 17; // cell size
var 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"; }));
var svg = d3.select("body").selectAll("svg")
.data(d3.range(2010, 2011))
.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 d3.time.weekOfYear(d) * cellSize; })
.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);
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 = t0.getDay(), w0 = d3.time.weekOfYear(t0),
d1 = t1.getDay(), w1 = d3.time.weekOfYear(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";
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment