Skip to content

Instantly share code, notes, and snippets.

@ckinmind

ckinmind/README.md

Last active January 5, 2018 02:22
Show Gist options
  • Save ckinmind/62e78863eb1f15305120096c3dc5dead to your computer and use it in GitHub Desktop.
Save ckinmind/62e78863eb1f15305120096c3dc5dead to your computer and use it in GitHub Desktop.
Download ZIP
Ohter——日期图
Raw
README.md

说明

  • 图表类型：日期图(热力图)
  • 原图地址：Calendar View
  • 只保留原图一年的数据

知识点

  • d3.scaleQuantize - 创建一个均匀的量化的线性比例尺
  • d3.nest - 创建一个嵌套生成器
  • M => MoveTo, 开始坐标
  • H => 代表水平
  • V => 代表垂直
  • Z => 代表闭合一系列的svg线段
Raw
data.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>
<body>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script>
const width = 960,
height = 136,
cellSize = 17
const formatPercent = d3.format('.1%') // 生成百分比并且保留一位小数
// d3.scaleQuantize - 创建一个均匀的量化的线性比例尺，意思大概是定义域的一部分对应一个值域，均匀切分
const color = d3.scaleQuantize()
.domain([-0.05, 0.05])
.range(['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee08b', '#ffffbf', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850', '#006837'])
// 每一年的时间表都是一个svg
const svg = d3.select('body')
.selectAll('svg')
.data([2010])
.enter()
.append('svg')
.attr('width', width)
.attr('height', height)
.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)`)
.attr('font-family', 'sans-serif')
.attr('font-size', 10)
.attr('text-anchor', 'middle')
.text(d => d)
// 添加rect
const rect = svg.append('g')
.attr('fill', 'none')
.attr('stroke', '#ccc')
.selectAll('rect')
.data(d => d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1)))
.enter()
.append('rect')
.attr('width', cellSize)
.attr('height', cellSize)
.attr('x', d => d3.timeWeek.count(d3.timeYear(d), d) * cellSize)
.attr('y', d => d.getDay() * cellSize)
.datum(d3.timeFormat('%Y-%m-%d'))
// new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);
// new Date(d, 0, 1) => 某一年的第一天 new Date(d + 1, 0, 1) => 下一年的第一天
// d3.timeDays(new Date(d, 0, 1), new Date(d + 1, 0, 1)) => 获取某一年的所有天
// 绘制每个月份的分割线
svg.append('g')
.attr('fill', 'none')
.attr('stroke', '#000')
.selectAll('path')
.data(d => d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1)))
.enter().append('path')
.attr('d', pathMonth)
// d3.timeMonths(new Date(d, 0, 1), new Date(d + 1, 0, 1) => 获取某一年所有月份
d3.csv('data.csv', function(error, csv) {
if (error) throw error
// d3.nest - 创建一个嵌套生成器
// nest.key - 在嵌套层级中加一级 (指定对象key名字)
// nest.rollup -为叶子层指定汇总函数(指定生成value的方法)
// nest.object - 生成一个嵌套，返回一个关联数组(指定数据源)
const data = d3.nest()
.key(d => d.Date)
.rollup(d => (d[0].Close - d[0].Open) / d[0].Open)
.object(csv)
// 经过nest处理后的data数据是一个以日期为key的对象(用来方便的根据日期取值来确定颜色)
// selection.filter - 基于数据过滤元素
// 不明白为什么每个rect里面要放一个title元素
rect.filter(d => d in data) // 这句可以省略的，没有影响
.attr('fill', d => color(data[d]))
// .append('title')
// .text(d => `${d} ': ' ${formatPercent(data[d])})`)
})
// 绘制每个月的分割线path
function pathMonth(t0) {
const t1 = new Date(t0.getFullYear(), t0.getMonth() + 1, 0), // t0是当前月第一天， t1是当前月最后一天
d0 = t0.getDay(), // 返回这个月的第一天是这周的第几天，0代表周日， 1代表周一
w0 = d3.timeWeek.count(d3.timeYear(t0), t0), // 返回月初的这天是这年的第几周，从0开始
d1 = t1.getDay(), // 返回这个月的最后一天是这周的第几天， 0代表周日
w1 = d3.timeWeek.count(d3.timeYear(t1), t1) // 返回月末的这天是这个年的第几周，从0开始
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'
// M => MoveTo, 开始坐标
// H => 代表水平
// V => 代表垂直
// Z => 代表闭合一系列的svg线段
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment