Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Forked from mbostock/.block
Last active October 27, 2018 15:49
Show Gist options
  • Save mbostock/3884914 to your computer and use it in GitHub Desktop.
Save mbostock/3884914 to your computer and use it in GitHub Desktop.
Download ZIP
Bivariate Area Chart
Raw
.block
license: gpl-3.0
redirect: https://beta.observablehq.com/@mbostock/d3-band-chart
Raw
README.md
Raw
data.tsv
date high low
20101001 59.5 57.0
20101002 59.5 53.4
20101003 59.0 53.4
20101004 59.4 54.7
20101005 58.3 52.7
20101006 62.1 54.5
20101007 60.8 53.4
20101008 61.0 52.5
20101009 62.4 52.9
20101010 65.3 54.0
20101011 70.3 55.0
20101012 82.2 58.6
20101013 75.6 57.4
20101014 75.7 57.7
20101015 68.4 54.7
20101016 56.3 52.7
20101017 54.3 51.8
20101018 54.9 51.4
20101019 54.7 50.2
20101020 56.5 50.0
20101021 62.6 55.4
20101022 59.9 53.8
20101023 62.2 52.2
20101024 63.0 57.9
20101025 58.5 54.3
20101026 59.5 51.3
20101027 59.4 49.8
20101028 66.6 55.8
20101029 64.9 53.2
20101030 59.9 52.3
20101031 60.4 53.2
20101101 64.4 54.1
20101102 66.6 54.7
20101103 67.8 57.2
20101104 73.2 62.4
20101105 72.1 54.1
20101106 59.0 53.2
20101107 59.2 56.1
20101108 57.4 53.2
20101109 56.8 47.1
20101110 59.4 53.1
20101111 61.2 51.8
20101112 59.2 49.6
20101113 63.1 50.7
20101114 72.1 57.0
20101115 75.4 62.4
20101116 65.5 55.8
20101117 60.1 52.5
20101118 55.0 48.2
20101119 55.0 48.9
20101120 54.3 44.8
20101121 54.1 47.8
20101122 54.5 48.2
20101123 53.4 50.2
20101124 49.6 42.3
20101125 49.8 43.0
20101126 50.9 44.4
20101127 52.5 47.7
20101128 50.5 44.6
20101129 51.3 41.9
20101130 51.8 44.2
20101201 52.2 45.3
20101202 53.4 49.3
20101203 53.2 49.1
20101204 55.2 50.4
20101205 56.3 52.3
20101206 59.5 54.1
20101207 57.2 49.5
20101208 54.5 50.5
20101209 56.5 52.9
20101210 57.9 53.4
20101211 56.1 54.1
20101212 55.6 51.6
20101213 55.8 53.8
20101214 57.4 53.4
20101215 52.9 47.3
20101216 52.2 43.2
20101217 52.2 46.2
20101218 57.6 46.9
20101219 57.6 51.8
20101220 53.4 50.2
20101221 57.2 48.6
20101222 57.6 51.8
20101223 53.6 44.4
20101224 57.9 46.4
20101225 57.6 46.8
20101226 56.7 49.3
20101227 56.3 45.9
20101228 53.6 49.6
20101229 55.6 48.7
20101230 50.4 41.5
20101231 50.2 42.6
20110101 48.2 43.3
20110102 48.0 44.1
20110103 51.3 46.4
20110104 50.9 43.3
20110105 52.3 44.8
20110106 52.5 40.3
20110107 45.1 39.7
20110108 43.2 40.6
20110109 44.6 40.5
20110110 47.1 40.1
20110111 47.1 43.5
20110112 51.6 46.8
20110113 53.4 48.7
20110114 54.0 51.3
20110115 59.7 49.5
20110116 60.3 46.6
20110117 52.5 47.7
20110118 53.4 47.3
20110119 57.9 51.4
20110120 58.1 49.1
20110121 58.5 50.2
20110122 59.2 51.1
20110123 59.9 51.8
20110124 61.0 49.1
20110125 58.6 49.5
20110126 59.0 51.1
20110127 60.3 51.1
20110128 58.3 42.8
20110129 53.8 48.2
20110130 54.0 50.5
20110131 53.1 44.6
20110201 59.9 45.9
20110202 60.8 51.8
20110203 59.2 44.6
20110204 54.9 44.6
20110205 64.8 48.7
20110206 73.2 57.6
20110207 69.3 51.1
20110208 57.6 51.8
20110209 58.3 48.9
20110210 59.7 44.8
20110211 59.2 45.3
20110212 60.3 49.3
20110213 55.9 44.4
20110214 57.0 48.0
20110215 58.5 51.1
20110216 57.7 48.6
20110217 50.7 44.6
20110218 50.0 42.3
20110219 46.0 39.9
20110220 50.0 39.7
20110221 50.2 41.5
20110222 51.8 44.6
20110223 51.8 42.4
20110224 51.3 44.4
20110225 51.1 44.4
20110226 46.2 37.4
20110227 50.2 39.2
20110228 48.9 43.2
20110301 55.2 49.1
20110302 56.3 48.6
20110303 54.5 51.1
20110304 56.1 46.6
20110305 58.3 47.7
20110306 56.3 52.9
20110307 55.6 49.3
20110308 55.2 48.9
20110309 56.1 48.7
20110310 57.4 48.2
20110311 54.5 45.5
20110312 54.9 46.6
20110313 61.7 51.1
20110314 59.4 52.7
20110315 58.5 53.6
20110316 56.3 52.5
20110317 54.7 45.3
20110318 54.5 46.9
20110319 51.1 46.4
20110320 53.1 48.6
20110321 52.5 46.9
20110322 54.9 47.1
20110323 54.9 48.7
20110324 54.1 46.8
20110325 54.5 47.1
20110326 53.2 49.6
20110327 54.3 46.0
20110328 54.7 46.2
20110329 57.2 46.8
20110330 74.1 51.4
20110331 71.1 55.9
20110401 70.2 57.4
20110402 60.3 53.2
20110403 59.4 45.9
20110404 66.0 49.5
20110405 63.9 51.1
20110406 56.7 47.8
20110407 54.0 45.9
20110408 51.1 44.6
20110409 54.0 45.5
20110410 54.3 48.0
20110411 54.9 49.8
20110412 53.6 45.5
20110413 53.2 47.7
20110414 53.6 45.7
20110415 56.8 48.2
20110416 57.6 50.7
20110417 55.2 51.4
20110418 56.1 51.3
20110419 56.3 50.7
20110420 59.4 50.2
20110421 58.5 48.9
20110422 55.2 47.7
20110423 55.8 49.5
20110424 56.7 52.7
20110425 57.0 53.1
20110426 55.9 47.7
20110427 56.1 49.1
20110428 54.7 49.8
20110429 56.8 46.6
20110430 62.2 55.2
20110501 64.6 49.1
20110502 60.3 48.7
20110503 57.4 48.9
20110504 69.4 50.9
20110505 66.9 51.3
20110506 58.1 50.5
20110507 54.5 49.5
20110508 53.4 50.2
20110509 56.3 46.4
20110510 55.6 48.9
20110511 54.3 49.6
20110512 56.7 51.3
20110513 55.0 47.7
20110514 54.1 50.2
20110515 55.0 45.1
20110516 55.6 50.0
20110517 55.4 50.2
20110518 56.8 51.3
20110519 55.8 49.8
20110520 55.8 51.3
20110521 56.7 50.9
20110522 56.1 49.5
20110523 57.0 50.7
20110524 55.6 48.7
20110525 55.8 50.5
20110526 57.0 51.4
20110527 57.4 53.2
20110528 56.8 52.3
20110529 57.0 46.6
20110530 56.3 49.3
20110531 55.4 52.9
20110601 56.7 48.9
20110602 56.5 52.2
20110603 56.3 50.4
20110604 61.0 53.6
20110605 61.7 52.9
20110606 58.5 54.5
20110607 58.3 52.5
20110608 57.9 53.6
20110609 56.8 52.9
20110610 58.6 52.7
20110611 57.6 51.3
20110612 55.6 52.2
20110613 57.9 52.9
20110614 57.6 50.9
20110615 60.8 53.1
20110616 57.9 51.8
20110617 55.9 51.3
20110618 57.0 52.3
20110619 59.7 52.0
20110620 72.9 55.9
20110621 62.8 54.7
20110622 60.4 51.3
20110623 57.7 52.5
20110624 57.4 52.0
20110625 56.7 51.8
20110626 58.3 52.3
20110627 57.0 50.4
20110628 57.7 52.0
20110629 57.2 53.4
20110630 59.7 52.7
20110701 61.0 54.0
20110702 61.3 52.2
20110703 67.3 54.7
20110704 61.5 53.8
20110705 56.1 50.2
20110706 55.9 51.4
20110707 56.8 51.3
20110708 56.5 51.6
20110709 55.0 52.3
20110710 59.0 53.1
20110711 58.3 51.8
20110712 57.2 52.2
20110713 57.0 54.3
20110714 58.1 53.6
20110715 57.4 53.8
20110716 59.5 55.0
20110717 60.3 55.0
20110718 60.3 55.0
20110719 59.9 56.1
20110720 61.9 56.1
20110721 60.8 54.9
20110722 59.7 53.6
20110723 60.4 54.0
20110724 60.4 57.0
20110725 60.6 54.5
20110726 59.5 53.6
20110727 58.1 53.4
20110728 57.7 53.1
20110729 59.0 55.0
20110730 60.4 57.4
20110731 60.4 56.8
20110801 60.4 56.3
20110802 59.9 55.0
20110803 59.2 54.1
20110804 59.2 55.6
20110805 59.4 54.5
20110806 58.8 54.5
20110807 58.1 54.1
20110808 58.5 52.7
20110809 58.5 53.6
20110810 59.4 54.7
20110811 56.7 53.2
20110812 56.8 53.2
20110813 59.4 53.6
20110814 59.9 54.3
20110815 59.9 55.0
20110816 60.1 52.7
20110817 57.2 53.4
20110818 57.4 52.7
20110819 56.3 53.2
20110820 60.6 53.8
20110821 58.8 54.3
20110822 58.8 56.7
20110823 59.2 54.5
20110824 58.8 53.4
20110825 58.8 54.1
20110826 57.9 55.0
20110827 57.0 52.5
20110828 57.0 52.5
20110829 60.1 53.8
20110830 59.5 54.1
20110831 61.2 52.9
20110901 58.3 54.0
20110902 59.2 53.4
20110903 57.2 53.6
20110904 57.9 54.5
20110905 57.7 54.0
20110906 58.3 50.5
20110907 58.1 50.9
20110908 57.9 52.0
20110909 57.9 53.4
20110910 59.0 53.6
20110911 65.3 58.3
20110912 63.0 58.3
20110913 62.8 56.7
20110914 57.7 54.9
20110915 57.9 55.2
20110916 58.8 55.0
20110917 59.4 54.0
20110918 64.2 55.4
20110919 68.7 55.6
20110920 68.9 57.6
20110921 64.9 53.2
20110922 57.4 53.4
20110923 57.7 53.4
20110924 59.7 55.0
20110925 62.4 58.8
20110926 61.9 54.0
20110927 64.9 55.9
20110928 76.5 60.1
20110929 72.7 55.2
20110930 65.5 59.5
20111001 68.2 60.1
20111002 66.2 57.2
20111003 63.0 57.2
20111004 61.5 56.5
20111005 61.3 56.7
20111006 59.2 55.0
20111007 59.9 52.9
20111008 61.5 54.0
20111009 59.5 55.0
20111010 62.6 58.8
20111011 62.1 60.1
20111012 69.1 57.4
20111013 74.5 58.8
20111014 77.5 62.8
20111015 71.6 57.7
20111016 63.1 60.3
20111017 72.7 55.6
20111018 66.7 55.0
20111019 60.6 57.0
20111020 60.3 55.9
20111021 59.7 53.2
20111022 73.6 56.5
20111023 76.5 61.3
20111024 73.0 55.0
20111025 57.9 54.3
20111026 63.3 49.6
20111027 65.5 51.1
20111028 64.6 54.1
20111029 64.4 52.5
20111030 62.8 53.6
20111031 59.9 52.3
20111101 68.2 52.3
20111102 68.2 57.6
20111103 72.9 51.3
20111104 52.9 45.9
20111105 54.7 47.7
20111106 54.3 50.4
20111107 54.3 46.9
20111108 56.5 46.6
20111109 58.6 50.9
20111110 59.7 50.5
20111111 58.1 49.8
20111112 56.8 52.0
20111113 56.8 52.2
20111114 57.6 49.8
20111115 59.7 48.9
20111116 58.1 49.5
20111117 56.3 48.7
20111118 55.6 50.9
20111119 52.7 44.8
20111120 53.6 47.1
20111121 54.0 49.1
20111122 58.8 48.4
20111123 59.5 51.4
20111124 58.6 52.5
20111125 54.7 48.6
20111126 56.3 50.4
20111127 56.1 50.4
20111128 55.8 47.5
20111129 54.7 45.9
20111130 62.2 46.0
20111201 64.0 58.1
20111202 65.5 59.0
20111203 66.6 54.0
20111204 59.9 46.9
20111205 56.5 45.9
20111206 57.9 45.9
20111207 54.5 44.8
20111208 52.5 42.1
20111209 56.5 47.1
20111210 56.8 48.0
20111211 53.1 45.7
20111212 50.9 45.3
20111213 52.0 44.2
20111214 50.7 43.3
20111215 51.6 46.6
20111216 56.3 43.2
20111217 54.3 46.0
20111218 55.9 46.6
20111219 52.3 44.8
20111220 56.1 43.2
20111221 56.8 43.5
20111222 57.4 48.4
20111223 58.3 42.8
20111224 53.2 44.1
20111225 54.0 45.3
20111226 52.5 43.5
20111227 52.2 43.3
20111228 54.7 45.5
20111229 54.5 48.2
20111230 54.7 51.8
20111231 55.0 46.2
20120101 57.2 51.3
20120102 55.9 49.6
20120103 54.1 46.2
20120104 59.7 49.5
20120105 58.8 47.1
20120106 56.3 45.5
20120107 64.8 45.3
20120108 64.9 51.6
20120109 61.2 47.8
20120110 58.3 47.1
20120111 58.8 44.6
20120112 57.2 46.4
20120113 59.4 47.5
20120114 59.9 47.5
20120115 55.8 48.0
20120116 48.9 42.1
20120117 48.6 38.5
20120118 52.2 40.5
20120119 51.4 45.1
20120120 57.6 49.3
20120121 57.9 49.1
20120122 51.4 46.2
20120123 55.2 50.7
20120124 53.6 45.7
20120125 57.0 49.8
20120126 57.6 52.0
20120127 57.9 45.7
20120128 57.9 45.9
20120129 59.4 50.2
20120130 57.0 48.4
20120131 52.3 48.0
20120201 54.9 46.2
20120202 58.8 46.2
20120203 58.8 46.8
20120204 58.3 48.9
20120205 60.1 49.5
20120206 59.5 50.0
20120207 57.9 51.6
20120208 57.4 48.2
20120209 59.0 50.5
20120210 64.4 48.9
20120211 55.9 50.5
20120212 52.9 46.0
20120213 52.9 46.4
20120214 53.4 43.9
20120215 55.2 43.9
20120216 57.4 48.0
20120217 53.6 46.4
20120218 54.5 50.2
20120219 52.9 43.0
20120220 52.9 46.6
20120221 54.9 47.5
20120222 62.2 49.3
20120223 61.3 49.5
20120224 61.3 51.4
20120225 54.0 49.5
20120226 53.1 41.0
20120227 49.3 40.3
20120228 50.5 41.4
20120229 52.2 48.0
20120301 50.7 47.3
20120302 55.2 43.5
20120303 62.4 45.3
20120304 62.8 50.0
20120305 60.1 44.2
20120306 51.3 46.2
20120307 54.0 46.6
20120308 61.7 44.2
20120309 62.8 45.0
20120310 54.9 46.8
20120311 54.1 48.6
20120312 55.0 44.2
20120313 55.6 52.5
20120314 56.7 54.1
20120315 56.8 54.9
20120316 55.9 53.8
20120317 54.3 43.5
20120318 50.4 44.8
20120319 49.8 42.3
20120320 52.7 48.4
20120321 57.2 48.6
20120322 53.6 49.1
20120323 53.2 43.9
20120324 53.8 43.0
20120325 51.1 44.6
20120326 55.2 43.9
20120327 58.3 52.2
20120328 55.9 52.7
20120329 54.9 50.0
20120330 58.5 52.3
20120331 59.4 48.4
20120401 55.9 48.7
20120402 54.9 46.6
20120403 57.0 49.8
20120404 54.9 45.7
20120405 51.8 43.2
20120406 51.3 42.4
20120407 56.7 45.1
20120408 57.2 44.2
20120409 59.7 47.1
20120410 59.7 52.2
20120411 57.0 50.4
20120412 56.7 49.3
20120413 55.9 46.6
20120414 55.0 47.7
20120415 54.5 49.6
20120416 54.3 49.3
20120417 55.0 51.8
20120418 56.1 50.7
20120419 59.0 53.2
20120420 61.3 52.0
20120421 64.9 54.0
20120422 58.8 49.8
20120423 59.9 52.7
20120424 60.8 56.1
20120425 59.7 56.3
20120426 58.8 52.2
20120427 58.3 47.8
20120428 58.6 51.1
20120429 57.4 50.5
20120430 57.2 50.2
20120501 57.4 48.9
20120502 54.5 47.3
20120503 59.4 49.8
20120504 58.5 50.0
20120505 58.6 48.2
20120506 70.0 50.7
20120507 63.1 49.6
20120508 61.0 48.9
20120509 56.1 50.2
20120510 60.8 48.0
20120511 57.2 49.8
20120512 53.4 47.7
20120513 57.2 49.5
20120514 59.0 53.8
20120515 58.1 49.5
20120516 54.3 49.8
20120517 55.2 49.6
20120518 56.8 48.4
20120519 56.8 48.7
20120520 58.1 51.1
20120521 57.6 50.0
20120522 57.9 51.6
20120523 58.8 53.2
20120524 57.4 50.0
20120525 56.3 49.5
20120526 54.9 48.7
20120527 54.9 50.7
20120528 55.4 50.4
20120529 56.1 49.8
20120530 55.8 49.8
20120531 57.2 51.1
20120601 59.0 51.3
20120602 57.4 51.4
20120603 56.5 49.6
20120604 57.6 54.0
20120605 57.0 50.9
20120606 57.4 49.3
20120607 58.3 49.8
20120608 57.6 50.4
20120609 59.4 49.6
20120610 68.7 54.9
20120611 63.0 53.4
20120612 61.5 51.4
20120613 59.2 49.6
20120614 56.7 50.4
20120615 58.8 50.4
20120616 66.7 52.5
20120617 60.4 52.5
20120618 54.5 50.5
20120619 56.3 51.8
20120620 59.5 52.5
20120621 57.6 50.5
20120622 57.9 52.2
20120623 58.1 52.5
20120624 58.5 52.2
20120625 60.4 52.7
20120626 61.5 52.3
20120627 62.8 53.4
20120628 59.7 54.5
20120629 60.3 54.5
20120630 62.1 55.8
20120701 62.2 56.3
20120702 58.8 54.0
20120703 60.4 52.3
20120704 58.8 53.6
20120705 59.0 52.5
20120706 58.8 52.3
20120707 58.5 51.6
20120708 55.9 51.3
20120709 55.8 52.2
20120710 57.2 49.6
20120711 54.1 50.7
20120712 55.6 50.4
20120713 55.8 51.4
20120714 56.5 51.8
20120715 56.8 52.2
20120716 57.6 52.0
20120717 60.1 55.2
20120718 60.4 55.9
20120719 60.1 53.4
20120720 61.2 55.0
20120721 61.2 54.5
20120722 60.3 53.1
20120723 59.2 54.9
20120724 61.0 55.6
20120725 58.8 56.3
20120726 59.7 54.5
20120727 58.1 52.5
20120728 60.1 53.4
20120729 59.9 52.9
20120730 59.5 53.2
20120731 59.0 53.4
20120801 57.0 53.2
20120802 57.2 52.7
20120803 55.8 52.2
20120804 58.1 51.8
20120805 61.0 56.8
20120806 61.9 55.8
20120807 61.7 55.0
20120808 60.6 53.8
20120809 59.7 51.6
20120810 57.9 52.5
20120811 55.2 51.6
20120812 55.2 50.7
20120813 55.8 51.4
20120814 57.4 51.8
20120815 58.6 55.0
20120816 58.6 55.9
20120817 59.4 53.8
20120818 59.2 54.7
20120819 57.2 52.3
20120820 56.5 51.3
20120821 55.4 52.0
20120822 57.6 51.6
20120823 57.0 54.9
20120824 58.5 51.3
20120825 55.8 51.8
20120826 60.8 53.1
20120827 62.4 55.9
20120828 63.1 55.8
20120829 62.6 53.4
20120830 61.3 53.1
20120831 58.1 53.6
20120901 57.7 52.7
20120902 54.7 51.6
20120903 55.9 51.1
20120904 55.2 50.7
20120905 56.8 53.1
20120906 57.9 55.0
20120907 60.1 52.9
20120908 59.4 54.7
20120909 61.2 52.9
20120910 60.3 53.1
20120911 59.4 54.0
20120912 58.5 53.8
20120913 57.6 52.0
20120914 58.3 53.6
20120915 58.5 51.4
20120916 56.5 50.7
20120917 57.9 52.9
20120918 59.2 52.0
20120919 59.4 55.0
20120920 59.2 50.9
20120921 59.9 50.9
20120922 60.6 52.3
20120923 57.7 50.0
20120924 57.2 52.7
20120925 55.8 50.9
20120926 54.9 52.3
20120927 54.3 50.7
20120928 55.8 49.6
20120929 55.6 52.5
20120930 65.5 50.4
20121001 78.3 55.6
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.area {
fill: steelblue;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.low); })
.y1(function(d) { return y(d.high); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.tsv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.low = +d.low;
d.high = +d.high;
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([d3.min(data, function(d) { return d.low; }), d3.max(data, function(d) { return d.high; })]);
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (ºF)");
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment