Built with blockbuilder.org
forked from SpaceActuary's block: Mini Chart
license: mit |
Built with blockbuilder.org
forked from SpaceActuary's block: Mini Chart
group | year | amount1 | amount2 | amount3 | |
---|---|---|---|---|---|
ABC | 2010 | 11124 | 50.236 | 0.558825264 | |
ABC | 2011 | 11433 | 51.577 | 0.589679841 | |
ABC | 2012 | 11914 | 49.006 | 0.583857484 | |
ABC | 2013 | 11734 | 48.706 | 0.571516204 | |
ABC | 2014 | 12222 | 50.496 | 0.617162112 | |
ABC | 2015 | 11943 | 52.802 | 0.630614286 | |
XYZ | 2010 | 13349 | 51.241 | 0.68401611 | |
XYZ | 2011 | 11204 | 56.735 | 0.63565894 | |
XYZ | 2012 | 10603 | 40.675 | 0.43127703 | |
XYZ | 2013 | 9387 | 44.81 | 0.42063147 | |
XYZ | 2014 | 10144 | 59.08 | 0.59930752 | |
XYZ | 2015 | 11226 | 44.354 | 0.497918 | |
Total | 2010 | 12248 | 50.437 | 0.61775238 | |
Total | 2011 | 11313 | 52.609 | 0.59516562 | |
Total | 2012 | 11319 | 47.34 | 0.53584146 | |
Total | 2013 | 10609 | 47.927 | 0.50845754 | |
Total | 2014 | 11102 | 52.213 | 0.57966873 | |
Total | 2015 | 11616 | 51.112 | 0.59371699 |
date | NY | SF | TX | |
---|---|---|---|---|
20111001 | 63.4 | 62.7 | 72.2 | |
20111002 | 58.0 | 59.9 | 67.7 | |
20111003 | 53.3 | 59.1 | 69.4 | |
20111004 | 55.7 | 58.8 | 68.0 | |
20111005 | 64.2 | 58.7 | 72.4 | |
20111006 | 58.8 | 57.0 | 77.0 | |
20111007 | 57.9 | 56.7 | 82.3 | |
20111008 | 61.8 | 56.8 | 78.9 | |
20111009 | 69.3 | 56.7 | 68.8 | |
20111010 | 71.2 | 60.1 | 68.7 | |
20111011 | 68.7 | 61.1 | 70.3 | |
20111012 | 61.8 | 61.5 | 75.3 | |
20111013 | 63.0 | 64.3 | 76.6 | |
20111014 | 66.9 | 67.1 | 66.6 | |
20111015 | 61.7 | 64.6 | 68.0 | |
20111016 | 61.8 | 61.6 | 70.6 | |
20111017 | 62.8 | 61.1 | 71.1 | |
20111018 | 60.8 | 59.2 | 70.0 | |
20111019 | 62.1 | 58.9 | 61.6 | |
20111020 | 65.1 | 57.2 | 57.4 | |
20111021 | 55.6 | 56.4 | 64.3 | |
20111022 | 54.4 | 60.7 | 72.4 | |
20111023 | 54.4 | 65.1 | 72.4 | |
20111024 | 54.8 | 60.9 | 72.5 | |
20111025 | 57.9 | 56.1 | 72.7 | |
20111026 | 54.6 | 54.6 | 73.4 | |
20111027 | 54.4 | 56.1 | 70.7 | |
20111028 | 42.5 | 58.1 | 56.8 | |
20111029 | 40.9 | 57.5 | 51.0 | |
20111030 | 38.6 | 57.7 | 54.9 | |
20111031 | 44.2 | 55.1 | 58.8 | |
20111101 | 49.6 | 57.9 | 62.6 | |
20111102 | 47.2 | 64.6 | 71.0 | |
20111103 | 50.1 | 56.2 | 58.4 | |
20111104 | 50.1 | 50.5 | 45.1 | |
20111105 | 43.5 | 51.3 | 52.2 | |
20111106 | 43.8 | 52.6 | 73.0 | |
20111107 | 48.9 | 51.4 | 75.4 | |
20111108 | 55.5 | 50.6 | 72.1 | |
20111109 | 53.7 | 54.6 | 56.6 | |
20111110 | 57.7 | 55.6 | 55.4 | |
20111111 | 48.5 | 53.9 | 46.7 | |
20111112 | 46.8 | 54.0 | 62.0 | |
20111113 | 51.1 | 53.8 | 71.6 | |
20111114 | 56.8 | 53.5 | 75.5 | |
20111115 | 59.7 | 53.4 | 72.1 | |
20111116 | 56.5 | 52.2 | 65.7 | |
20111117 | 49.6 | 52.7 | 56.8 | |
20111118 | 41.5 | 53.1 | 49.9 | |
20111119 | 44.3 | 49.0 | 71.7 | |
20111120 | 54.0 | 50.4 | 77.7 | |
20111121 | 54.1 | 51.1 | 76.4 | |
20111122 | 49.4 | 52.3 | 68.8 | |
20111123 | 50.0 | 54.6 | 57.0 | |
20111124 | 44.0 | 55.1 | 55.5 | |
20111125 | 50.3 | 51.5 | 61.6 | |
20111126 | 52.1 | 53.6 | 64.1 | |
20111127 | 49.6 | 52.3 | 51.1 | |
20111128 | 57.2 | 51.0 | 43.0 | |
20111129 | 59.1 | 49.5 | 46.4 | |
20111130 | 50.6 | 49.8 | 48.0 | |
20111201 | 44.3 | 60.4 | 48.1 | |
20111202 | 43.9 | 62.2 | 60.6 | |
20111203 | 42.1 | 58.3 | 62.6 | |
20111204 | 43.9 | 52.7 | 57.1 | |
20111205 | 50.2 | 51.5 | 44.2 | |
20111206 | 54.2 | 49.9 | 37.4 | |
20111207 | 54.6 | 48.6 | 35.0 | |
20111208 | 43.4 | 46.4 | 37.0 | |
20111209 | 42.2 | 49.8 | 45.4 | |
20111210 | 45.0 | 52.1 | 50.7 | |
20111211 | 33.8 | 48.8 | 48.6 | |
20111212 | 36.8 | 47.4 | 52.2 | |
20111213 | 38.6 | 47.2 | 60.8 | |
20111214 | 41.9 | 46.1 | 70.0 | |
20111215 | 49.6 | 48.8 | 64.2 | |
20111216 | 50.2 | 47.9 | 50.9 | |
20111217 | 40.6 | 49.8 | 51.6 | |
20111218 | 29.1 | 49.1 | 55.2 | |
20111219 | 33.7 | 48.3 | 62.1 | |
20111220 | 45.8 | 49.3 | 56.3 | |
20111221 | 47.4 | 48.4 | 47.2 | |
20111222 | 54.4 | 53.3 | 52.3 | |
20111223 | 47.8 | 47.5 | 45.2 | |
20111224 | 34.9 | 47.9 | 43.6 | |
20111225 | 35.9 | 48.9 | 42.9 | |
20111226 | 43.6 | 45.9 | 48.2 | |
20111227 | 42.9 | 47.2 | 45.4 | |
20111228 | 46.2 | 48.9 | 44.2 | |
20111229 | 30.8 | 50.9 | 50.4 | |
20111230 | 40.8 | 52.9 | 52.4 | |
20111231 | 49.8 | 50.1 | 53.5 | |
20120101 | 46.3 | 53.9 | 55.9 | |
20120102 | 43.2 | 53.1 | 48.2 | |
20120103 | 30.3 | 49.7 | 41.0 | |
20120104 | 19.2 | 52.7 | 48.9 | |
20120105 | 32.1 | 52.6 | 54.8 | |
20120106 | 41.2 | 49.0 | 61.2 | |
20120107 | 47.0 | 51.0 | 59.7 | |
20120108 | 46.0 | 56.8 | 52.5 | |
20120109 | 34.7 | 52.3 | 54.0 | |
20120110 | 39.4 | 51.6 | 47.7 | |
20120111 | 40.4 | 49.8 | 49.2 | |
20120112 | 45.4 | 51.9 | 48.4 | |
20120113 | 40.7 | 53.7 | 40.2 | |
20120114 | 30.4 | 52.9 | 43.9 | |
20120115 | 23.9 | 49.7 | 45.2 | |
20120116 | 22.6 | 45.3 | 65.0 | |
20120117 | 39.8 | 43.6 | 68.2 | |
20120118 | 43.2 | 45.0 | 47.5 | |
20120119 | 26.3 | 47.3 | 57.1 | |
20120120 | 32.8 | 51.4 | 61.9 | |
20120121 | 27.4 | 53.7 | 54.6 | |
20120122 | 25.0 | 48.3 | 56.7 | |
20120123 | 39.4 | 52.9 | 54.4 | |
20120124 | 48.7 | 49.1 | 52.7 | |
20120125 | 43.0 | 52.1 | 61.8 | |
20120126 | 37.1 | 53.6 | 55.0 | |
20120127 | 48.2 | 50.4 | 50.7 | |
20120128 | 43.7 | 50.3 | 52.9 | |
20120129 | 40.1 | 53.8 | 44.4 | |
20120130 | 38.0 | 51.9 | 49.1 | |
20120131 | 43.5 | 50.0 | 62.8 | |
20120201 | 50.4 | 50.0 | 64.6 | |
20120202 | 45.8 | 51.3 | 61.1 | |
20120203 | 37.5 | 51.5 | 70.0 | |
20120204 | 40.8 | 52.0 | 61.3 | |
20120205 | 36.5 | 53.8 | 48.2 | |
20120206 | 39.1 | 54.6 | 44.2 | |
20120207 | 43.2 | 54.3 | 51.3 | |
20120208 | 36.5 | 51.9 | 49.2 | |
20120209 | 36.5 | 53.8 | 45.7 | |
20120210 | 38.3 | 53.9 | 54.1 | |
20120211 | 36.9 | 52.3 | 44.9 | |
20120212 | 29.7 | 50.1 | 36.5 | |
20120213 | 33.1 | 49.5 | 44.8 | |
20120214 | 39.6 | 48.6 | 52.3 | |
20120215 | 42.3 | 49.9 | 68.0 | |
20120216 | 39.7 | 52.4 | 54.6 | |
20120217 | 46.0 | 49.9 | 53.8 | |
20120218 | 41.2 | 51.6 | 56.2 | |
20120219 | 39.8 | 47.8 | 50.8 | |
20120220 | 38.1 | 48.7 | 53.0 | |
20120221 | 37.1 | 49.7 | 61.0 | |
20120222 | 45.5 | 53.4 | 68.8 | |
20120223 | 50.6 | 54.1 | 69.4 | |
20120224 | 42.7 | 55.9 | 59.3 | |
20120225 | 42.6 | 51.7 | 47.2 | |
20120226 | 36.9 | 47.7 | 47.7 | |
20120227 | 40.9 | 45.4 | 61.9 | |
20120228 | 45.9 | 47.0 | 67.2 | |
20120229 | 40.7 | 49.8 | 70.1 | |
20120301 | 41.3 | 48.9 | 62.1 | |
20120302 | 36.8 | 48.1 | 72.7 | |
20120303 | 47.6 | 50.7 | 59.0 | |
20120304 | 44.2 | 55.0 | 51.8 | |
20120305 | 38.5 | 48.8 | 55.0 | |
20120306 | 32.9 | 48.4 | 61.8 | |
20120307 | 43.3 | 49.9 | 67.1 | |
20120308 | 51.2 | 49.2 | 72.0 | |
20120309 | 47.8 | 51.7 | 46.4 | |
20120310 | 37.2 | 49.3 | 46.7 | |
20120311 | 42.9 | 50.0 | 56.9 | |
20120312 | 48.8 | 48.6 | 61.9 | |
20120313 | 52.6 | 53.9 | 68.8 | |
20120314 | 60.5 | 55.2 | 71.9 | |
20120315 | 47.2 | 55.9 | 72.0 | |
20120316 | 44.7 | 54.6 | 72.5 | |
20120317 | 48.2 | 48.2 | 71.7 | |
20120318 | 48.2 | 47.1 | 71.1 | |
20120319 | 53.1 | 45.8 | 73.0 | |
20120320 | 57.8 | 49.7 | 63.8 | |
20120321 | 57.5 | 51.4 | 60.0 | |
20120322 | 57.3 | 51.4 | 62.3 | |
20120323 | 61.7 | 48.4 | 61.1 | |
20120324 | 55.8 | 49.0 | 62.0 | |
20120325 | 48.4 | 46.4 | 64.6 | |
20120326 | 49.8 | 49.7 | 66.0 | |
20120327 | 39.6 | 54.1 | 65.8 | |
20120328 | 49.7 | 54.6 | 69.2 | |
20120329 | 56.8 | 52.3 | 69.5 | |
20120330 | 46.5 | 54.5 | 73.5 | |
20120331 | 42.2 | 56.2 | 73.9 | |
20120401 | 45.3 | 51.1 | 75.3 | |
20120402 | 48.1 | 50.5 | 75.4 | |
20120403 | 51.2 | 52.2 | 77.3 | |
20120404 | 61.0 | 50.6 | 67.0 | |
20120405 | 50.7 | 47.9 | 71.1 | |
20120406 | 48.0 | 47.4 | 70.4 | |
20120407 | 51.1 | 49.4 | 73.6 | |
20120408 | 55.7 | 50.0 | 71.1 | |
20120409 | 58.3 | 51.3 | 70.0 | |
20120410 | 55.0 | 53.8 | 69.0 | |
20120411 | 49.0 | 52.9 | 69.2 | |
20120412 | 51.7 | 53.9 | 74.5 | |
20120413 | 53.1 | 50.2 | 73.4 | |
20120414 | 55.2 | 50.9 | 76.0 | |
20120415 | 62.3 | 51.5 | 74.5 | |
20120416 | 62.9 | 51.9 | 63.6 | |
20120417 | 69.3 | 53.2 | 67.3 | |
20120418 | 59.0 | 53.0 | 65.1 | |
20120419 | 54.1 | 55.1 | 67.9 | |
20120420 | 56.5 | 55.8 | 68.9 | |
20120421 | 58.2 | 58.0 | 65.1 | |
20120422 | 52.4 | 52.8 | 65.4 | |
20120423 | 51.6 | 55.1 | 70.1 | |
20120424 | 49.3 | 57.9 | 67.0 | |
20120425 | 52.5 | 57.5 | 75.4 | |
20120426 | 50.5 | 55.3 | 77.5 | |
20120427 | 51.9 | 53.5 | 77.0 | |
20120428 | 47.4 | 54.7 | 77.7 | |
20120429 | 54.1 | 54.0 | 77.7 | |
20120430 | 51.9 | 53.4 | 77.7 | |
20120501 | 57.4 | 52.7 | 77.0 | |
20120502 | 53.7 | 50.7 | 77.9 | |
20120503 | 53.1 | 52.6 | 79.1 | |
20120504 | 57.2 | 53.4 | 80.1 | |
20120505 | 57.0 | 53.1 | 82.1 | |
20120506 | 56.6 | 56.5 | 79.0 | |
20120507 | 54.6 | 55.3 | 79.8 | |
20120508 | 57.9 | 52.0 | 70.0 | |
20120509 | 59.2 | 52.4 | 69.8 | |
20120510 | 61.1 | 53.4 | 71.3 | |
20120511 | 59.7 | 53.1 | 69.4 | |
20120512 | 64.1 | 49.9 | 72.0 | |
20120513 | 65.3 | 52.0 | 72.4 | |
20120514 | 64.2 | 56.0 | 72.5 | |
20120515 | 62.0 | 53.0 | 67.6 | |
20120516 | 63.8 | 51.0 | 69.0 | |
20120517 | 64.5 | 51.4 | 72.7 | |
20120518 | 61.0 | 52.2 | 73.7 | |
20120519 | 62.6 | 52.4 | 77.5 | |
20120520 | 66.2 | 54.5 | 75.8 | |
20120521 | 62.7 | 52.8 | 76.9 | |
20120522 | 63.7 | 53.9 | 78.8 | |
20120523 | 66.4 | 56.5 | 77.7 | |
20120524 | 64.5 | 54.7 | 80.6 | |
20120525 | 65.4 | 52.5 | 81.4 | |
20120526 | 69.4 | 52.1 | 82.3 | |
20120527 | 71.9 | 52.2 | 80.3 | |
20120528 | 74.4 | 52.9 | 80.3 | |
20120529 | 75.9 | 52.1 | 82.2 | |
20120530 | 72.9 | 52.1 | 81.9 | |
20120531 | 72.5 | 53.3 | 82.4 | |
20120601 | 67.2 | 54.8 | 77.9 | |
20120602 | 68.3 | 54.0 | 81.1 | |
20120603 | 67.7 | 52.3 | 82.2 | |
20120604 | 61.9 | 55.3 | 81.2 | |
20120605 | 58.3 | 53.5 | 83.0 | |
20120606 | 61.7 | 54.1 | 83.2 | |
20120607 | 66.7 | 53.9 | 82.1 | |
20120608 | 68.7 | 54.4 | 77.5 | |
20120609 | 72.2 | 55.0 | 77.9 | |
20120610 | 72.6 | 60.0 | 82.9 | |
20120611 | 69.2 | 57.2 | 86.8 | |
20120612 | 66.9 | 55.1 | 85.3 | |
20120613 | 66.7 | 53.3 | 76.9 | |
20120614 | 67.7 | 53.4 | 84.5 | |
20120615 | 68.5 | 54.6 | 84.4 | |
20120616 | 67.5 | 57.0 | 83.8 | |
20120617 | 64.2 | 55.6 | 82.5 | |
20120618 | 61.7 | 52.5 | 82.9 | |
20120619 | 66.4 | 53.9 | 82.5 | |
20120620 | 77.9 | 55.3 | 81.3 | |
20120621 | 88.3 | 53.3 | 80.8 | |
20120622 | 82.2 | 54.1 | 81.7 | |
20120623 | 77.0 | 55.2 | 83.9 | |
20120624 | 75.4 | 55.8 | 85.5 | |
20120625 | 70.9 | 56.8 | 87.2 | |
20120626 | 65.9 | 57.5 | 88.0 | |
20120627 | 73.5 | 57.7 | 89.6 | |
20120628 | 77.4 | 56.6 | 86.7 | |
20120629 | 79.6 | 56.4 | 85.3 | |
20120630 | 84.2 | 58.4 | 81.7 | |
20120701 | 81.8 | 58.8 | 78.5 | |
20120702 | 82.5 | 56.4 | 83.1 | |
20120703 | 80.2 | 56.5 | 83.1 | |
20120704 | 77.8 | 55.8 | 84.5 | |
20120705 | 86.1 | 54.8 | 84.6 | |
20120706 | 79.9 | 54.9 | 84.2 | |
20120707 | 83.5 | 54.7 | 86.7 | |
20120708 | 81.5 | 52.8 | 84.3 | |
20120709 | 77.8 | 53.7 | 83.7 | |
20120710 | 76.1 | 53.1 | 77.1 | |
20120711 | 76.3 | 52.7 | 77.4 | |
20120712 | 75.8 | 52.0 | 80.6 | |
20120713 | 77.2 | 53.4 | 81.4 | |
20120714 | 79.3 | 54.0 | 80.2 | |
20120715 | 78.9 | 54.0 | 81.8 | |
20120716 | 79.6 | 54.5 | 77.3 | |
20120717 | 83.3 | 56.7 | 80.8 | |
20120718 | 84.3 | 57.5 | 81.6 | |
20120719 | 75.1 | 57.1 | 80.9 | |
20120720 | 68.4 | 58.1 | 83.9 | |
20120721 | 68.4 | 57.6 | 85.6 | |
20120722 | 72.2 | 56.0 | 83.6 | |
20120723 | 75.6 | 56.6 | 84.0 | |
20120724 | 82.6 | 57.8 | 83.0 | |
20120725 | 78.4 | 57.5 | 84.8 | |
20120726 | 77.0 | 56.4 | 84.4 | |
20120727 | 79.4 | 55.3 | 84.3 | |
20120728 | 77.4 | 55.0 | 83.9 | |
20120729 | 72.5 | 55.6 | 85.0 | |
20120730 | 72.9 | 55.6 | 84.9 | |
20120731 | 73.6 | 55.9 | 86.3 | |
20120801 | 75.0 | 55.4 | 86.5 | |
20120802 | 77.7 | 54.4 | 85.8 | |
20120803 | 79.7 | 53.7 | 85.3 | |
20120804 | 79.6 | 54.1 | 86.0 | |
20120805 | 81.5 | 57.8 | 84.2 | |
20120806 | 80.0 | 58.2 | 81.9 | |
20120807 | 75.7 | 58.0 | 86.5 | |
20120808 | 77.8 | 57.0 | 86.1 | |
20120809 | 78.6 | 55.0 | 86.8 | |
20120810 | 77.8 | 54.8 | 88.0 | |
20120811 | 78.5 | 53.0 | 85.1 | |
20120812 | 78.8 | 52.5 | 87.4 | |
20120813 | 78.6 | 53.3 | 88.0 | |
20120814 | 76.8 | 53.9 | 88.0 | |
20120815 | 76.7 | 56.2 | 87.2 | |
20120816 | 75.9 | 57.1 | 86.1 | |
20120817 | 77.6 | 55.3 | 86.8 | |
20120818 | 72.6 | 56.2 | 84.9 | |
20120819 | 70.4 | 54.3 | 76.8 | |
20120820 | 71.8 | 53.1 | 80.6 | |
20120821 | 73.6 | 53.4 | 80.0 | |
20120822 | 74.7 | 54.5 | 78.2 | |
20120823 | 74.6 | 55.7 | 79.1 | |
20120824 | 76.0 | 54.8 | 81.9 | |
20120825 | 76.2 | 53.8 | 84.7 | |
20120826 | 73.4 | 56.5 | 83.5 | |
20120827 | 74.6 | 58.3 | 82.1 | |
20120828 | 79.4 | 58.7 | 84.0 | |
20120829 | 74.7 | 57.5 | 85.7 | |
20120830 | 73.5 | 55.9 | 87.2 | |
20120831 | 77.9 | 55.4 | 82.9 | |
20120901 | 80.7 | 55.7 | 84.8 | |
20120902 | 75.1 | 53.1 | 83.9 | |
20120903 | 73.5 | 53.5 | 85.5 | |
20120904 | 73.5 | 52.5 | 86.4 | |
20120905 | 77.7 | 54.5 | 85.8 | |
20120906 | 74.2 | 56.3 | 85.4 | |
20120907 | 76.0 | 56.4 | 85.3 | |
20120908 | 77.1 | 56.5 | 81.9 | |
20120909 | 69.7 | 56.4 | 74.8 | |
20120910 | 67.8 | 55.4 | 71.6 | |
20120911 | 64.0 | 56.2 | 75.9 | |
20120912 | 68.1 | 55.7 | 82.1 | |
20120913 | 69.3 | 54.3 | 80.5 | |
20120914 | 70.0 | 55.2 | 70.0 | |
20120915 | 69.3 | 54.3 | 71.2 | |
20120916 | 66.3 | 52.9 | 70.3 | |
20120917 | 67.0 | 54.8 | 72.1 | |
20120918 | 72.8 | 54.8 | 73.7 | |
20120919 | 67.2 | 56.8 | 72.7 | |
20120920 | 62.1 | 55.4 | 71.7 | |
20120921 | 64.0 | 55.8 | 72.9 | |
20120922 | 65.5 | 55.9 | 73.1 | |
20120923 | 65.7 | 52.8 | 75.6 | |
20120924 | 60.4 | 54.5 | 78.3 | |
20120925 | 63.2 | 53.3 | 78.3 | |
20120926 | 68.5 | 53.6 | 79.6 | |
20120927 | 69.2 | 52.1 | 76.4 | |
20120928 | 68.7 | 52.6 | 77.2 | |
20120929 | 62.5 | 53.9 | 75.2 | |
20120930 | 62.3 | 55.1 | 71.9 |
variable | group | label | |
---|---|---|---|
NY | 1 | New York | |
SF | 5 | San Francisco | |
TX | 6 | Austin |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> | |
<style> | |
body { | |
margin: 0;position:fixed;top:0;right:0;bottom:0;left:0; | |
font-family: 'Montserrat', sans-serif; | |
font-size: 14px; | |
} | |
div { | |
display: inline; | |
margin: 20px 0px 0px 20px; | |
} | |
.spark { | |
fill: none; | |
stroke: steelblue; | |
stroke-width: 1.5px; | |
} | |
.point { | |
fill: steelblue; | |
stroke: #fff; | |
stroke-width: 3px; | |
} | |
.label, | |
.change, | |
.axis, | |
.main { | |
text-anchor: middle; | |
alignment-baseline: middle; | |
fill: #aaa; | |
} | |
.change, | |
.main { | |
text-anchor: middle; | |
alignment-baseline: middle; | |
fill: #333; | |
} | |
line.axis { | |
stroke: #aaa; | |
stroke-width: 1.5px; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
console.clear(); | |
var changeFormat = d3.format(".1f"), | |
numberFormat = d3.format(",.0f"); | |
d3.csv("data.csv", function(raw){ | |
var data_ABC = raw.filter(function(d){ return d.group == "ABC"}), | |
data_XYZ = raw.filter(function(d){ return d.group == "XYZ"}), | |
data_Total = raw.filter(function(d){ return d.group == "Total"}); | |
var miniChart1 = miniChart() | |
.xValue(function(d){ return +d.year; }) | |
.yValue(function(d){ return +d.amount1; }) | |
.numberFormat(d3.format(",.0f")); | |
var miniChart2 = miniChart() | |
.xValue(function(d){ return +d.year; }) | |
.yValue(function(d){ return +d.amount2; }) | |
.numberFormat(d3.format(".2f")); | |
var miniChart3 = miniChart() | |
.xValue(function(d){ return +d.year; }) | |
.yValue(function(d){ return +d.amount3; }) | |
.numberFormat(d3.format(".1%")); | |
d3.select("body").append("div") | |
.datum(data_ABC) | |
.call(miniChart1); | |
d3.select("body").append("div") | |
.datum(data_ABC) | |
.call(miniChart2); | |
d3.select("body").append("div") | |
.datum(data_ABC) | |
.call(miniChart3); | |
d3.select("body").append("div") | |
.datum(data_XYZ) | |
.call(miniChart1); | |
d3.select("body").append("div") | |
.datum(data_XYZ) | |
.call(miniChart2); | |
d3.select("body").append("div") | |
.datum(data_XYZ) | |
.call(miniChart3); | |
d3.select("body").append("div") | |
.datum(data_Total) | |
.call(miniChart1); | |
d3.select("body").append("div") | |
.datum(data_Total) | |
.call(miniChart2); | |
d3.select("body").append("div") | |
.datum(data_Total) | |
.call(miniChart3); | |
}); | |
function dataPrep(raw, xValue, yValue) { | |
var rough = [{x: NaN, y: NaN}]; | |
//console.log("rough 1",rough); | |
raw.forEach(function(d, i, data){ | |
rough.push({ | |
x: xValue(d, i, data), | |
y: yValue(d, i, data) | |
}); | |
}); | |
//console.log("rough 2", rough); | |
var dataPairs = d3.pairs(rough); | |
//console.log("dataPairs",dataPairs) | |
var data = dataPairs.map(function(d){ | |
var d0 = d[0], | |
d1 = d[1]; | |
d1.y_delta = (d1.y / d0.y) - 1; | |
return d1; | |
}); | |
//console.log("data 3",data); | |
return data; | |
} | |
function miniChart() { | |
var margin = {top: 20, bottom: 80, left: 80, right: 20}, | |
height = 170 - margin.top - margin.bottom, // default height | |
width = 280 - margin.left - margin.right, // default width | |
changeFormat = d3.format(".1f"), | |
numberFormat = d3.format(",.0f"), | |
xValue = function(d, i){ return i; }, | |
yValue = function(d, i){ return i; }, | |
xScale = d3.scalePoint(), | |
yScale = d3.scaleLinear(), | |
line = d3.line() | |
.curve(d3.curveCatmullRom.alpha(0.5)) | |
.x(function(d, i, data){ return xScale(d.x); }) | |
.y(function(d, i, data){ return yScale(d.y); }); | |
function chart(selection) { | |
selection.each(function(raw){ | |
var chartData = dataPrep(raw, xValue, yValue); | |
console.table(chartData); | |
var yExt = d3.extent(chartData, function(d){ return d.y; }); | |
xScale | |
.domain(chartData.map(function(d){ return d.x; })) | |
.range([0, width]); | |
yScale | |
.domain(yExt).nice() | |
.range([height, 0]); | |
// Select the svg element, if it exists. | |
var svg = d3.select(this).selectAll("svg").data([chartData]); | |
// Otherwise, create the skeletal chart. | |
var svgEnter = svg.enter().append("svg") | |
svgEnter.append("g").append("g").attr("class", "y axis"); | |
// Update the outer dimensions. | |
svg = svgEnter.merge(svg) | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom); | |
/* | |
svg.insert("rect") | |
.attr("fill", "#ddd") | |
.attr("opacity", 0.2) | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom); | |
svg.insert("rect") | |
.attr("fill", "#aaa") | |
.attr("opacity", 0.2) | |
.attr("x", margin.left) | |
.attr("y", margin.top) | |
.attr("width", width) | |
.attr("height", height); | |
*/ | |
// Update the inner dimensions. | |
var g = svg.select("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
// Update the Y Axis | |
var yAxis = g.select(".y.axis") | |
.attr("transform", "translate(" + (-margin.left / 2) + "," + 0 + ")"); | |
// Update the lines | |
var spark = g.append("path").datum(chartData) | |
.attr("class", "spark") | |
.attr("d", line); | |
// Update the points | |
var points = g.selectAll("circle.point").data(chartData); | |
points.enter() | |
.append("circle").attr("class", "point") | |
.merge(points) | |
.attr("cx", function(d, i, data){ return xScale(d.x); }) | |
.attr("cy", function(d, i, data){ return yScale(d.y); }) | |
.attr("r", 5) | |
var labels = svg.selectAll("text.label").data(chartData); | |
labels.enter() | |
.append("text").attr("class", "label") | |
.merge(labels) | |
.text(function(d){ return d.x; }) | |
.attr("transform", "translate(" + margin.left + "," + | |
(height+margin.top) + ")") | |
.attr("x", function(d){ return xScale(d.x); }) | |
.attr("y", 20) | |
var changes = svg.selectAll("text.change") | |
.data(chartData.filter(function(d){ return !isNaN(d.y_delta); })); | |
changes.enter() | |
.append("text").attr("class", "change") | |
.merge(changes) | |
.text(function(d){ return changeFormat(d.y_delta * 100); }) | |
.attr("transform", "translate(" + margin.left + "," + | |
(height+margin.top) + ")") | |
.attr("x", function(d){ return xScale(d.x); }) | |
.attr("y", 40) | |
yAxis.append("text").attr("class", "axis max") | |
.text(numberFormat(yExt[1])) | |
.attr("y", yScale(yExt[1])); | |
yAxis.append("line").attr("class", "axis") | |
.attr("x1", 0) | |
.attr("y1", yScale(yExt[1]) + 10) | |
.attr("x2", 0) | |
.attr("y2", yScale(yExt[0]) - 10); | |
yAxis.append("text").attr("class", "axis min") | |
.text(numberFormat(yExt[0])) | |
.attr("y", yScale(yExt[0])); | |
svg.append("text").text("YOY % Chg").attr("class", "main") | |
.attr("transform", "translate(" + 0 + "," + (height+margin.top) + ")") | |
.attr("x", 50) | |
.attr("y", 40); | |
}); | |
} | |
chart.width = function(_) { | |
if (!arguments.length) return width; | |
width = _; | |
return chart; | |
}; | |
chart.height = function(_) { | |
if (!arguments.length) return height; | |
height = _; | |
return chart; | |
}; | |
chart.xValue = function(_) { | |
if (!arguments.length) return xValue; | |
xValue = _; | |
return chart; | |
}; | |
chart.yValue = function(_) { | |
if (!arguments.length) return yValue; | |
yValue = _; | |
return chart; | |
}; | |
chart.numberFormat = function(_) { | |
if (!arguments.length) return numberFormat; | |
numberFormat = _; | |
return chart; | |
}; | |
chart.changeFormat = function(_) { | |
if (!arguments.length) return changeFormat; | |
changeFormat = _; | |
return chart; | |
}; | |
return chart; | |
} | |
</script> | |
</body> |