├── LICENSE ├── README.md ├── css ├── bootstrap-grid.css ├── bootstrap-grid.css.map ├── bootstrap-grid.min.css ├── bootstrap-grid.min.css.map ├── bootstrap-reboot.css ├── bootstrap-reboot.css.map ├── bootstrap-reboot.min.css ├── bootstrap-reboot.min.css.map ├── bootstrap.css ├── bootstrap.css.map ├── bootstrap.min.css ├── bootstrap.min.css.map ├── hover-min.css ├── material.min.css ├── material.min.css.map ├── materialize.min.css ├── mobilestyle.css └── style.css ├── data └── firecast_test.csv ├── favicon_package_v0.16 ├── android-chrome-192x192.png ├── android-chrome-256x256.png ├── apple-touch-icon.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── mstile-150x150.png ├── safari-pinned-tab.svg └── site.webmanifest ├── img ├── PLDeli.svg ├── aki.jpg ├── automation.png ├── avocado.png ├── avocado.svg ├── avocado.svg.2019_03_31_17_41_52.0.svg ├── avocado1.png ├── avocado_fav.png ├── avocado_fav.png.tmp$$ ├── bias.png ├── cards.jpg ├── decisionTree.svg ├── dee.jpg ├── dee.tif ├── elyse.jpg ├── elyse2.jpg ├── explainability.png ├── flexibility.png ├── impact.png ├── jon.jpg ├── jon.tif ├── jon1.tif ├── jon2.tif ├── megaphone.png ├── megaphone_white.png ├── mejia_drawing.svg ├── network.svg ├── newyork2.svg ├── porfirio.svg ├── register.svg ├── register2.svg ├── regression.svg ├── skinny_outline.jpg ├── skyline1.png ├── skyline2.jpg ├── skyline3.tif ├── skylineSketch.svg └── two_avocados.png ├── index.html └── js ├── ScrollTrigger.min.js ├── ToyAlgorithm.js ├── _build.js ├── anijs-min.js ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js ├── bootstrap.min.js.map ├── d3-tip.js ├── d3.min.js ├── defaults.js ├── html-parser.js ├── initializer.js ├── jquery.min.js ├── main.js ├── material.min.js ├── material.min.js.map ├── materialize.min.js ├── pathformer.js ├── popper.min.js ├── queue.min.js ├── vivus.js └── vivus.min.js /README.md: -------------------------------------------------------------------------------- 1 | # Automating NYC 2 | 3 | This project is the result of a Harvard Kennedy School's applied thesis, the Policy Analysis Exercise. This website reflects the views of the authors and should not be viewed as representing the views of Harvard University or any of its faculty. 4 | 5 | 6 | ## Built With 7 | 8 | ### Javascript Libraries 9 | * [Bootstrap](https://getbootstrap.com/) - Used for styling 10 | * [Materialize](https://materializecss.com/) - Used for styling cards 11 | * [Vivus](https://maxwellito.github.io/vivus/) - Used for animating line drawings 12 | * [Scroll Trigger](https://github.com/terwanerik/ScrollTrigger) - Used for scroll fade effects 13 | * [D3](https://d3js.org/) - Used to visualize the toy algorithm 14 | * [CSS Hover](https://ianlunn.github.io/Hover/) - used to create hover bounce effect 15 | 16 | ### Icons and Images Credit 17 | 18 | * NYC Skyline modified from [Freepik](http://www.freepik.com) 19 | * Select icons from [Font Awesome](https://fontawesome.com/?from=io) 20 | * Select icons from [Feather Icons Library](https://feathericons.com/) 21 | * All other icons and visuals our own. 22 | 23 | 24 | 25 | ## Authors 26 | 27 | * **Akina Younge** - *Project Management + Data Wrangler* - [Akinana27](https://github.com/Akinana27) 28 | * **Deepra Yusuf** - *Content Development + Research* - [debrazebra1209](https://github.com/debrazebra1209) 29 | * **Elyse Voegeli** - *Design + Engineering* - [evoeges](https://github.com/evoeges) 30 | * **Jon Truong** - *Design + Content Development* - [ohbother](https://github.com/ohbother) 31 | 32 | 33 | ## License 34 | 35 | This project is licensed under the GNU License - see the [LICENSE.md](LICENSE.md) file for details 36 | 37 | ## Acknowledgments 38 | 39 | Special thanks to our advisors, Julie Wilson and Jeffrey Liebman, the Jain Family institute for their support, and Emily Chu for her technical mentorship. Most of our icons are custom, but thanks to Font Awesome and Feather Icons Library for the others. All other visuals are our own. And finally, shout out to all the amazing people who user tested for us! You know who you are. 40 | -------------------------------------------------------------------------------- /css/bootstrap-reboot.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2019 The Bootstrap Authors 4 | * Copyright 2011-2019 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) 7 | */ 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: border-box; 12 | } 13 | 14 | html { 15 | font-family: sans-serif; 16 | line-height: 1.15; 17 | -webkit-text-size-adjust: 100%; 18 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 19 | } 20 | 21 | article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { 22 | display: block; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 28 | font-size: 1rem; 29 | font-weight: 400; 30 | line-height: 1.5; 31 | color: #212529; 32 | text-align: left; 33 | background-color: #fff; 34 | } 35 | 36 | [tabindex="-1"]:focus { 37 | outline: 0 !important; 38 | } 39 | 40 | hr { 41 | box-sizing: content-box; 42 | height: 0; 43 | overflow: visible; 44 | } 45 | 46 | h1, h2, h3, h4, h5, h6 { 47 | margin-top: 0; 48 | margin-bottom: 0.5rem; 49 | } 50 | 51 | p { 52 | margin-top: 0; 53 | margin-bottom: 1rem; 54 | } 55 | 56 | abbr[title], 57 | abbr[data-original-title] { 58 | text-decoration: underline; 59 | -webkit-text-decoration: underline dotted; 60 | text-decoration: underline dotted; 61 | cursor: help; 62 | border-bottom: 0; 63 | -webkit-text-decoration-skip-ink: none; 64 | text-decoration-skip-ink: none; 65 | } 66 | 67 | address { 68 | margin-bottom: 1rem; 69 | font-style: normal; 70 | line-height: inherit; 71 | } 72 | 73 | ol, 74 | ul, 75 | dl { 76 | margin-top: 0; 77 | margin-bottom: 1rem; 78 | } 79 | 80 | ol ol, 81 | ul ul, 82 | ol ul, 83 | ul ol { 84 | margin-bottom: 0; 85 | } 86 | 87 | dt { 88 | font-weight: 700; 89 | } 90 | 91 | dd { 92 | margin-bottom: .5rem; 93 | margin-left: 0; 94 | } 95 | 96 | blockquote { 97 | margin: 0 0 1rem; 98 | } 99 | 100 | b, 101 | strong { 102 | font-weight: bolder; 103 | } 104 | 105 | small { 106 | font-size: 80%; 107 | } 108 | 109 | sub, 110 | sup { 111 | position: relative; 112 | font-size: 75%; 113 | line-height: 0; 114 | vertical-align: baseline; 115 | } 116 | 117 | sub { 118 | bottom: -.25em; 119 | } 120 | 121 | sup { 122 | top: -.5em; 123 | } 124 | 125 | a { 126 | color: #007bff; 127 | text-decoration: none; 128 | background-color: transparent; 129 | } 130 | 131 | a:hover { 132 | color: #0056b3; 133 | text-decoration: underline; 134 | } 135 | 136 | a:not([href]):not([tabindex]) { 137 | color: inherit; 138 | text-decoration: none; 139 | } 140 | 141 | a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { 142 | color: inherit; 143 | text-decoration: none; 144 | } 145 | 146 | a:not([href]):not([tabindex]):focus { 147 | outline: 0; 148 | } 149 | 150 | pre, 151 | code, 152 | kbd, 153 | samp { 154 | font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 155 | font-size: 1em; 156 | } 157 | 158 | pre { 159 | margin-top: 0; 160 | margin-bottom: 1rem; 161 | overflow: auto; 162 | } 163 | 164 | figure { 165 | margin: 0 0 1rem; 166 | } 167 | 168 | img { 169 | vertical-align: middle; 170 | border-style: none; 171 | } 172 | 173 | svg { 174 | overflow: hidden; 175 | vertical-align: middle; 176 | } 177 | 178 | table { 179 | border-collapse: collapse; 180 | } 181 | 182 | caption { 183 | padding-top: 0.75rem; 184 | padding-bottom: 0.75rem; 185 | color: #6c757d; 186 | text-align: left; 187 | caption-side: bottom; 188 | } 189 | 190 | th { 191 | text-align: inherit; 192 | } 193 | 194 | label { 195 | display: inline-block; 196 | margin-bottom: 0.5rem; 197 | } 198 | 199 | button { 200 | border-radius: 0; 201 | } 202 | 203 | button:focus { 204 | outline: 1px dotted; 205 | outline: 5px auto -webkit-focus-ring-color; 206 | } 207 | 208 | input, 209 | button, 210 | select, 211 | optgroup, 212 | textarea { 213 | margin: 0; 214 | font-family: inherit; 215 | font-size: inherit; 216 | line-height: inherit; 217 | } 218 | 219 | button, 220 | input { 221 | overflow: visible; 222 | } 223 | 224 | button, 225 | select { 226 | text-transform: none; 227 | } 228 | 229 | select { 230 | word-wrap: normal; 231 | } 232 | 233 | button, 234 | [type="button"], 235 | [type="reset"], 236 | [type="submit"] { 237 | -webkit-appearance: button; 238 | } 239 | 240 | button:not(:disabled), 241 | [type="button"]:not(:disabled), 242 | [type="reset"]:not(:disabled), 243 | [type="submit"]:not(:disabled) { 244 | cursor: pointer; 245 | } 246 | 247 | button::-moz-focus-inner, 248 | [type="button"]::-moz-focus-inner, 249 | [type="reset"]::-moz-focus-inner, 250 | [type="submit"]::-moz-focus-inner { 251 | padding: 0; 252 | border-style: none; 253 | } 254 | 255 | input[type="radio"], 256 | input[type="checkbox"] { 257 | box-sizing: border-box; 258 | padding: 0; 259 | } 260 | 261 | input[type="date"], 262 | input[type="time"], 263 | input[type="datetime-local"], 264 | input[type="month"] { 265 | -webkit-appearance: listbox; 266 | } 267 | 268 | textarea { 269 | overflow: auto; 270 | resize: vertical; 271 | } 272 | 273 | fieldset { 274 | min-width: 0; 275 | padding: 0; 276 | margin: 0; 277 | border: 0; 278 | } 279 | 280 | legend { 281 | display: block; 282 | width: 100%; 283 | max-width: 100%; 284 | padding: 0; 285 | margin-bottom: .5rem; 286 | font-size: 1.5rem; 287 | line-height: inherit; 288 | color: inherit; 289 | white-space: normal; 290 | } 291 | 292 | progress { 293 | vertical-align: baseline; 294 | } 295 | 296 | [type="number"]::-webkit-inner-spin-button, 297 | [type="number"]::-webkit-outer-spin-button { 298 | height: auto; 299 | } 300 | 301 | [type="search"] { 302 | outline-offset: -2px; 303 | -webkit-appearance: none; 304 | } 305 | 306 | [type="search"]::-webkit-search-decoration { 307 | -webkit-appearance: none; 308 | } 309 | 310 | ::-webkit-file-upload-button { 311 | font: inherit; 312 | -webkit-appearance: button; 313 | } 314 | 315 | output { 316 | display: inline-block; 317 | } 318 | 319 | summary { 320 | display: list-item; 321 | cursor: pointer; 322 | } 323 | 324 | template { 325 | display: none; 326 | } 327 | 328 | [hidden] { 329 | display: none !important; 330 | } 331 | /*# sourceMappingURL=bootstrap-reboot.css.map */ -------------------------------------------------------------------------------- /css/bootstrap-reboot.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2019 The Bootstrap Authors 4 | * Copyright 2011-2019 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) 7 | */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important} 8 | /*# sourceMappingURL=bootstrap-reboot.min.css.map */ -------------------------------------------------------------------------------- /css/bootstrap-reboot.min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../scss/bootstrap-reboot.scss","../../scss/_reboot.scss","dist/css/bootstrap-reboot.css","../../scss/vendor/_rfs.scss","bootstrap-reboot.css","../../scss/mixins/_hover.scss"],"names":[],"mappings":"AAAA;;;;;;ACkBA,ECTA,QADA,SDaE,WAAA,WAGF,KACE,YAAA,WACA,YAAA,KACA,yBAAA,KACA,4BAAA,YAMF,QAAA,MAAA,WAAA,OAAA,OAAA,OAAA,OAAA,KAAA,IAAA,QACE,QAAA,MAUF,KACE,OAAA,EACA,YAAA,aAAA,CAAA,kBAAA,CAAA,UAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,KAAA,CAAA,WAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,gBAAA,CAAA,iBAAA,CAAA,mBEgFI,UAAA,KF9EJ,YAAA,IACA,YAAA,IACA,MAAA,QACA,WAAA,KACA,iBAAA,KGlBF,sBH2BE,QAAA,YASF,GACE,WAAA,YACA,OAAA,EACA,SAAA,QAaF,GAAA,GAAA,GAAA,GAAA,GAAA,GACE,WAAA,EACA,cAAA,MAOF,EACE,WAAA,EACA,cAAA,KC1CF,0BDqDA,YAEE,gBAAA,UACA,wBAAA,UAAA,OAAA,gBAAA,UAAA,OACA,OAAA,KACA,cAAA,EACA,iCAAA,KAAA,yBAAA,KAGF,QACE,cAAA,KACA,WAAA,OACA,YAAA,QC/CF,GDkDA,GCnDA,GDsDE,WAAA,EACA,cAAA,KAGF,MClDA,MACA,MAFA,MDuDE,cAAA,EAGF,GACE,YAAA,IAGF,GACE,cAAA,MACA,YAAA,EAGF,WACE,OAAA,EAAA,EAAA,KAGF,ECnDA,ODqDE,YAAA,OAGF,MEpFI,UAAA,IF6FJ,ICxDA,ID0DE,SAAA,SE/FE,UAAA,IFiGF,YAAA,EACA,eAAA,SAGF,IAAM,OAAA,OACN,IAAM,IAAA,MAON,EACE,MAAA,QACA,gBAAA,KACA,iBAAA,YI5KA,QJ+KE,MAAA,QACA,gBAAA,UAUJ,8BACE,MAAA,QACA,gBAAA,KIxLA,oCAAA,oCJ2LE,MAAA,QACA,gBAAA,KANJ,oCAUI,QAAA,EC1DJ,KACA,IDkEA,ICjEA,KDqEE,YAAA,cAAA,CAAA,KAAA,CAAA,MAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,aAAA,CAAA,UErJE,UAAA,IFyJJ,IAEE,WAAA,EAEA,cAAA,KAEA,SAAA,KAQF,OAEE,OAAA,EAAA,EAAA,KAQF,IACE,eAAA,OACA,aAAA,KAGF,IAGE,SAAA,OACA,eAAA,OAQF,MACE,gBAAA,SAGF,QACE,YAAA,OACA,eAAA,OACA,MAAA,QACA,WAAA,KACA,aAAA,OAGF,GAGE,WAAA,QAQF,MAEE,QAAA,aACA,cAAA,MAMF,OAEE,cAAA,EAOF,aACE,QAAA,IAAA,OACA,QAAA,IAAA,KAAA,yBCrGF,ODwGA,MCtGA,SADA,OAEA,SD0GE,OAAA,EACA,YAAA,QEtPE,UAAA,QFwPF,YAAA,QAGF,OCxGA,MD0GE,SAAA,QAGF,OCxGA,OD0GE,eAAA,KAMF,OACE,UAAA,OCxGF,cACA,aACA,cD6GA,OAIE,mBAAA,OC5GF,6BACA,4BACA,6BD+GE,sBAKI,OAAA,QC/GN,gCACA,+BACA,gCDmHA,yBAIE,QAAA,EACA,aAAA,KClHF,qBDqHA,kBAEE,WAAA,WACA,QAAA,EAIF,iBCrHA,2BACA,kBAFA,iBD+HE,mBAAA,QAGF,SACE,SAAA,KAEA,OAAA,SAGF,SAME,UAAA,EAEA,QAAA,EACA,OAAA,EACA,OAAA,EAKF,OACE,QAAA,MACA,MAAA,KACA,UAAA,KACA,QAAA,EACA,cAAA,MElSI,UAAA,OFoSJ,YAAA,QACA,MAAA,QACA,YAAA,OAGF,SACE,eAAA,SGpIF,yCFGA,yCDuIE,OAAA,KGrIF,cH6IE,eAAA,KACA,mBAAA,KGzIF,yCHiJE,mBAAA,KAQF,6BACE,KAAA,QACA,mBAAA,OAOF,OACE,QAAA,aAGF,QACE,QAAA,UACA,OAAA,QAGF,SACE,QAAA,KGtJF,SH4JE,QAAA","sourcesContent":["/*!\n * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)\n * Copyright 2011-2019 The Bootstrap Authors\n * Copyright 2011-2019 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)\n */\n\n@import \"functions\";\n@import \"variables\";\n@import \"mixins\";\n@import \"reboot\";\n","// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix\n\n// Reboot\n//\n// Normalization of HTML elements, manually forked from Normalize.css to remove\n// styles targeting irrelevant browsers while applying new styles.\n//\n// Normalize is licensed MIT. https://github.com/necolas/normalize.css\n\n\n// Document\n//\n// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.\n// 2. Change the default font family in all browsers.\n// 3. Correct the line height in all browsers.\n// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.\n// 5. Change the default tap highlight to be completely transparent in iOS.\n\n*,\n*::before,\n*::after {\n box-sizing: border-box; // 1\n}\n\nhtml {\n font-family: sans-serif; // 2\n line-height: 1.15; // 3\n -webkit-text-size-adjust: 100%; // 4\n -webkit-tap-highlight-color: rgba($black, 0); // 5\n}\n\n// Shim for \"new\" HTML5 structural elements to display correctly (IE10, older browsers)\n// TODO: remove in v5\n// stylelint-disable-next-line selector-list-comma-newline-after\narticle, aside, figcaption, figure, footer, header, hgroup, main, nav, section {\n display: block;\n}\n\n// Body\n//\n// 1. Remove the margin in all browsers.\n// 2. As a best practice, apply a default `background-color`.\n// 3. Set an explicit initial text-align value so that we can later use\n// the `inherit` value on things like `` elements.\n\nbody {\n margin: 0; // 1\n font-family: $font-family-base;\n @include font-size($font-size-base);\n font-weight: $font-weight-base;\n line-height: $line-height-base;\n color: $body-color;\n text-align: left; // 3\n background-color: $body-bg; // 2\n}\n\n// Suppress the focus outline on elements that cannot be accessed via keyboard.\n// This prevents an unwanted focus outline from appearing around elements that\n// might still respond to pointer events.\n//\n// Credit: https://github.com/suitcss/base\n[tabindex=\"-1\"]:focus {\n outline: 0 !important;\n}\n\n\n// Content grouping\n//\n// 1. Add the correct box sizing in Firefox.\n// 2. Show the overflow in Edge and IE.\n\nhr {\n box-sizing: content-box; // 1\n height: 0; // 1\n overflow: visible; // 2\n}\n\n\n//\n// Typography\n//\n\n// Remove top margins from headings\n//\n// By default, `

`-`

` all receive top and bottom margins. We nuke the top\n// margin for easier control within type scales as it avoids margin collapsing.\n// stylelint-disable-next-line selector-list-comma-newline-after\nh1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n margin-bottom: $headings-margin-bottom;\n}\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on `

`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Remove the bottom border in Firefox 39-.\n// 5. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-original-title] { // 1\n text-decoration: underline; // 2\n text-decoration: underline dotted; // 2\n cursor: help; // 3\n border-bottom: 0; // 4\n text-decoration-skip-ink: none; // 5\n}\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // Undo browser default\n}\n\nblockquote {\n margin: 0 0 1rem;\n}\n\nb,\nstrong {\n font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari\n}\n\nsmall {\n @include font-size(80%); // Add the correct font size in all browsers\n}\n\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n//\n\nsub,\nsup {\n position: relative;\n @include font-size(75%);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n//\n// Links\n//\n\na {\n color: $link-color;\n text-decoration: $link-decoration;\n background-color: transparent; // Remove the gray background on active links in IE 10.\n\n @include hover {\n color: $link-hover-color;\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href)\n// which have not been made explicitly keyboard-focusable (without tabindex).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([tabindex]) {\n color: inherit;\n text-decoration: none;\n\n @include hover-focus {\n color: inherit;\n text-decoration: none;\n }\n\n &:focus {\n outline: 0;\n }\n}\n\n\n//\n// Code\n//\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-monospace;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\npre {\n // Remove browser default top margin\n margin-top: 0;\n // Reset browser default of `1em` to use `rem`s\n margin-bottom: 1rem;\n // Don't allow content to break outside\n overflow: auto;\n}\n\n\n//\n// Figures\n//\n\nfigure {\n // Apply a consistent margin strategy (matches our type styles).\n margin: 0 0 1rem;\n}\n\n\n//\n// Images and content\n//\n\nimg {\n vertical-align: middle;\n border-style: none; // Remove the border on images inside links in IE 10-.\n}\n\nsvg {\n // Workaround for the SVG overflow bug in IE10/11 is still required.\n // See https://github.com/twbs/bootstrap/issues/26878\n overflow: hidden;\n vertical-align: middle;\n}\n\n\n//\n// Tables\n//\n\ntable {\n border-collapse: collapse; // Prevent double borders\n}\n\ncaption {\n padding-top: $table-cell-padding;\n padding-bottom: $table-cell-padding;\n color: $table-caption-color;\n text-align: left;\n caption-side: bottom;\n}\n\nth {\n // Matches default `` alignment by inheriting from the ``, or the\n // closest parent with a set `text-align`.\n text-align: inherit;\n}\n\n\n//\n// Forms\n//\n\nlabel {\n // Allow labels to use `margin` for spacing.\n display: inline-block;\n margin-bottom: $label-margin-bottom;\n}\n\n// Remove the default `border-radius` that macOS Chrome adds.\n//\n// Details at https://github.com/twbs/bootstrap/issues/24093\nbutton {\n // stylelint-disable-next-line property-blacklist\n border-radius: 0;\n}\n\n// Work around a Firefox/IE bug where the transparent `button` background\n// results in a loss of the default `button` focus styles.\n//\n// Credit: https://github.com/suitcss/base/\nbutton:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n margin: 0; // Remove the margin in Firefox and Safari\n font-family: inherit;\n @include font-size(inherit);\n line-height: inherit;\n}\n\nbutton,\ninput {\n overflow: visible; // Show the overflow in Edge\n}\n\nbutton,\nselect {\n text-transform: none; // Remove the inheritance of text transform in Firefox\n}\n\n// Remove the inheritance of word-wrap in Safari.\n//\n// Details at https://github.com/twbs/bootstrap/issues/24990\nselect {\n word-wrap: normal;\n}\n\n\n// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n// controls in Android 4.\n// 2. Correct the inability to style clickable types in iOS and Safari.\nbutton,\n[type=\"button\"], // 1\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button; // 2\n}\n\n// Opinionated: add \"hand\" cursor to non-disabled button elements.\n@if $enable-pointer-cursor-for-buttons {\n button,\n [type=\"button\"],\n [type=\"reset\"],\n [type=\"submit\"] {\n &:not(:disabled) {\n cursor: pointer;\n }\n }\n}\n\n// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n padding: 0;\n border-style: none;\n}\n\ninput[type=\"radio\"],\ninput[type=\"checkbox\"] {\n box-sizing: border-box; // 1. Add the correct box sizing in IE 10-\n padding: 0; // 2. Remove the padding in IE 10-\n}\n\n\ninput[type=\"date\"],\ninput[type=\"time\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"] {\n // Remove the default appearance of temporal inputs to avoid a Mobile Safari\n // bug where setting a custom line-height prevents text from being vertically\n // centered within the input.\n // See https://bugs.webkit.org/show_bug.cgi?id=139848\n // and https://github.com/twbs/bootstrap/issues/11266\n -webkit-appearance: listbox;\n}\n\ntextarea {\n overflow: auto; // Remove the default vertical scrollbar in IE.\n // Textareas should really only resize vertically so they don't break their (horizontal) containers.\n resize: vertical;\n}\n\nfieldset {\n // Browsers set a default `min-width: min-content;` on fieldsets,\n // unlike e.g. `

`s, which have `min-width: 0;` by default.\n // So we reset that to ensure fieldsets behave more like a standard block element.\n // See https://github.com/twbs/bootstrap/issues/12359\n // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements\n min-width: 0;\n // Reset the default outline behavior of fieldsets so they don't affect page layout.\n padding: 0;\n margin: 0;\n border: 0;\n}\n\n// 1. Correct the text wrapping in Edge and IE.\n// 2. Correct the color inheritance from `fieldset` elements in IE.\nlegend {\n display: block;\n width: 100%;\n max-width: 100%; // 1\n padding: 0;\n margin-bottom: .5rem;\n @include font-size(1.5rem);\n line-height: inherit;\n color: inherit; // 2\n white-space: normal; // 1\n}\n\nprogress {\n vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.\n}\n\n// Correct the cursor style of increment and decrement buttons in Chrome.\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=\"search\"] {\n // This overrides the extra rounded corners on search inputs in iOS so that our\n // `.form-control` class can properly style them. Note that this cannot simply\n // be added to `.form-control` as it's not specific enough. For details, see\n // https://github.com/twbs/bootstrap/issues/11586.\n outline-offset: -2px; // 2. Correct the outline style in Safari.\n -webkit-appearance: none;\n}\n\n//\n// Remove the inner padding in Chrome and Safari on macOS.\n//\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n//\n// 1. Correct the inability to style clickable types in iOS and Safari.\n// 2. Change font properties to `inherit` in Safari.\n//\n\n::-webkit-file-upload-button {\n font: inherit; // 2\n -webkit-appearance: button; // 1\n}\n\n//\n// Correct element displays\n//\n\noutput {\n display: inline-block;\n}\n\nsummary {\n display: list-item; // Add the correct display in all browsers\n cursor: pointer;\n}\n\ntemplate {\n display: none; // Add the correct display in IE\n}\n\n// Always hide an element with the `hidden` HTML attribute (from PureCSS).\n// Needed for proper display in IE 10-.\n[hidden] {\n display: none !important;\n}\n","/*!\n * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)\n * Copyright 2011-2019 The Bootstrap Authors\n * Copyright 2011-2019 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)\n */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n font-family: sans-serif;\n line-height: 1.15;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\narticle, aside, figcaption, figure, footer, header, hgroup, main, nav, section {\n display: block;\n}\n\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n text-align: left;\n background-color: #fff;\n}\n\n[tabindex=\"-1\"]:focus {\n outline: 0 !important;\n}\n\nhr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n}\n\nh1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n}\n\np {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nabbr[title],\nabbr[data-original-title] {\n text-decoration: underline;\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n cursor: help;\n border-bottom: 0;\n -webkit-text-decoration-skip-ink: none;\n text-decoration-skip-ink: none;\n}\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: 700;\n}\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0;\n}\n\nblockquote {\n margin: 0 0 1rem;\n}\n\nb,\nstrong {\n font-weight: bolder;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub,\nsup {\n position: relative;\n font-size: 75%;\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -.25em;\n}\n\nsup {\n top: -.5em;\n}\n\na {\n color: #007bff;\n text-decoration: none;\n background-color: transparent;\n}\n\na:hover {\n color: #0056b3;\n text-decoration: underline;\n}\n\na:not([href]):not([tabindex]) {\n color: inherit;\n text-decoration: none;\n}\n\na:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {\n color: inherit;\n text-decoration: none;\n}\n\na:not([href]):not([tabindex]):focus {\n outline: 0;\n}\n\npre,\ncode,\nkbd,\nsamp {\n font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 1em;\n}\n\npre {\n margin-top: 0;\n margin-bottom: 1rem;\n overflow: auto;\n}\n\nfigure {\n margin: 0 0 1rem;\n}\n\nimg {\n vertical-align: middle;\n border-style: none;\n}\n\nsvg {\n overflow: hidden;\n vertical-align: middle;\n}\n\ntable {\n border-collapse: collapse;\n}\n\ncaption {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n color: #6c757d;\n text-align: left;\n caption-side: bottom;\n}\n\nth {\n text-align: inherit;\n}\n\nlabel {\n display: inline-block;\n margin-bottom: 0.5rem;\n}\n\nbutton {\n border-radius: 0;\n}\n\nbutton:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\nbutton,\ninput {\n overflow: visible;\n}\n\nbutton,\nselect {\n text-transform: none;\n}\n\nselect {\n word-wrap: normal;\n}\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\nbutton:not(:disabled),\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled) {\n cursor: pointer;\n}\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n padding: 0;\n border-style: none;\n}\n\ninput[type=\"radio\"],\ninput[type=\"checkbox\"] {\n box-sizing: border-box;\n padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"time\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"] {\n -webkit-appearance: listbox;\n}\n\ntextarea {\n overflow: auto;\n resize: vertical;\n}\n\nfieldset {\n min-width: 0;\n padding: 0;\n margin: 0;\n border: 0;\n}\n\nlegend {\n display: block;\n width: 100%;\n max-width: 100%;\n padding: 0;\n margin-bottom: .5rem;\n font-size: 1.5rem;\n line-height: inherit;\n color: inherit;\n white-space: normal;\n}\n\nprogress {\n vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=\"search\"] {\n outline-offset: -2px;\n -webkit-appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n font: inherit;\n -webkit-appearance: button;\n}\n\noutput {\n display: inline-block;\n}\n\nsummary {\n display: list-item;\n cursor: pointer;\n}\n\ntemplate {\n display: none;\n}\n\n[hidden] {\n display: none !important;\n}\n/*# sourceMappingURL=bootstrap-reboot.css.map */","// stylelint-disable property-blacklist, scss/dollar-variable-default\n\n// SCSS RFS mixin\n//\n// Automated font-resizing\n//\n// See https://github.com/twbs/rfs\n\n// Configuration\n\n// Base font size\n$rfs-base-font-size: 1.25rem !default;\n$rfs-font-size-unit: rem !default;\n\n// Breakpoint at where font-size starts decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n// Resize font-size based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != \"number\" or $rfs-factor <= 1 {\n @error \"`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.\";\n}\n\n// Generate enable or disable classes. Possibilities: false, \"enable\" or \"disable\"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-responsive-font-sizes to false\n$enable-responsive-font-sizes: true !default;\n\n// Cache $rfs-base-font-size unit\n$rfs-base-font-size-unit: unit($rfs-base-font-size);\n\n// Remove px-unit from $rfs-base-font-size for calculations\n@if $rfs-base-font-size-unit == \"px\" {\n $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);\n}\n@else if $rfs-base-font-size-unit == \"rem\" {\n $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == \"px\" {\n $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == \"rem\" or $rfs-breakpoint-unit-cache == \"em\" {\n $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);\n}\n\n// Responsive font-size mixin\n@mixin rfs($fs, $important: false) {\n // Cache $fs unit\n $fs-unit: if(type-of($fs) == \"number\", unit($fs), false);\n\n // Add !important suffix if needed\n $rfs-suffix: if($important, \" !important\", \"\");\n\n // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n @if not $fs-unit or $fs-unit != \"\" and $fs-unit != \"px\" and $fs-unit != \"rem\" or $fs == 0 {\n font-size: #{$fs}#{$rfs-suffix};\n }\n @else {\n // Variables for storing static and fluid rescaling\n $rfs-static: null;\n $rfs-fluid: null;\n\n // Remove px-unit from $fs for calculations\n @if $fs-unit == \"px\" {\n $fs: $fs / ($fs * 0 + 1);\n }\n @else if $fs-unit == \"rem\" {\n $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);\n }\n\n // Set default font-size\n @if $rfs-font-size-unit == rem {\n $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};\n }\n @else if $rfs-font-size-unit == px {\n $rfs-static: #{$fs}px#{$rfs-suffix};\n }\n @else {\n @error \"`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.\";\n }\n\n // Only add media query if font-size is bigger as the minimum font-size\n // If $rfs-factor == 1, no rescaling will take place\n @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {\n $min-width: null;\n $variable-unit: null;\n\n // Calculate minimum font-size for given font-size\n $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;\n\n // Calculate difference between given font-size and minimum font-size for given font-size\n $fs-diff: $fs - $fs-min;\n\n // Base font-size formatting\n // No need to check if the unit is valid, because we did that before\n $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);\n\n // If two-dimensional, use smallest of screen width and height\n $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n // Calculate the variable width between 0 and $rfs-breakpoint\n $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};\n\n // Set the calculated font-size.\n $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};\n }\n\n // Rendering\n @if $rfs-fluid == null {\n // Only render static font-size if no fluid font-size is available\n font-size: $rfs-static;\n }\n @else {\n $mq-value: null;\n\n // RFS breakpoint formatting\n @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {\n $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};\n }\n @else if $rfs-breakpoint-unit == px {\n $mq-value: #{$rfs-breakpoint}px;\n }\n @else {\n @error \"`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.\";\n }\n\n @if $rfs-class == \"disable\" {\n // Adding an extra class increases specificity,\n // which prevents the media query to override the font size\n &,\n .disable-responsive-font-size &,\n &.disable-responsive-font-size {\n font-size: $rfs-static;\n }\n }\n @else {\n font-size: $rfs-static;\n }\n\n @if $rfs-two-dimensional {\n @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n font-size: $rfs-fluid;\n }\n }\n @else {\n font-size: $rfs-fluid;\n }\n\n @if $rfs-safari-iframe-resize-bug-fix {\n // stylelint-disable-next-line length-zero-no-unit\n min-width: 0vw;\n }\n }\n }\n @else {\n @media (max-width: #{$mq-value}) {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n font-size: $rfs-fluid;\n }\n }\n @else {\n font-size: $rfs-fluid;\n }\n\n @if $rfs-safari-iframe-resize-bug-fix {\n // stylelint-disable-next-line length-zero-no-unit\n min-width: 0vw;\n }\n }\n }\n }\n }\n}\n\n// The font-size & responsive-font-size mixin uses RFS to rescale font sizes\n@mixin font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n\n@mixin responsive-font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n","/*!\n * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)\n * Copyright 2011-2019 The Bootstrap Authors\n * Copyright 2011-2019 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)\n */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n font-family: sans-serif;\n line-height: 1.15;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\narticle, aside, figcaption, figure, footer, header, hgroup, main, nav, section {\n display: block;\n}\n\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n text-align: left;\n background-color: #fff;\n}\n\n[tabindex=\"-1\"]:focus {\n outline: 0 !important;\n}\n\nhr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n}\n\nh1, h2, h3, h4, h5, h6 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n}\n\np {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nabbr[title],\nabbr[data-original-title] {\n text-decoration: underline;\n text-decoration: underline dotted;\n cursor: help;\n border-bottom: 0;\n text-decoration-skip-ink: none;\n}\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: 700;\n}\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0;\n}\n\nblockquote {\n margin: 0 0 1rem;\n}\n\nb,\nstrong {\n font-weight: bolder;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub,\nsup {\n position: relative;\n font-size: 75%;\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -.25em;\n}\n\nsup {\n top: -.5em;\n}\n\na {\n color: #007bff;\n text-decoration: none;\n background-color: transparent;\n}\n\na:hover {\n color: #0056b3;\n text-decoration: underline;\n}\n\na:not([href]):not([tabindex]) {\n color: inherit;\n text-decoration: none;\n}\n\na:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {\n color: inherit;\n text-decoration: none;\n}\n\na:not([href]):not([tabindex]):focus {\n outline: 0;\n}\n\npre,\ncode,\nkbd,\nsamp {\n font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n font-size: 1em;\n}\n\npre {\n margin-top: 0;\n margin-bottom: 1rem;\n overflow: auto;\n}\n\nfigure {\n margin: 0 0 1rem;\n}\n\nimg {\n vertical-align: middle;\n border-style: none;\n}\n\nsvg {\n overflow: hidden;\n vertical-align: middle;\n}\n\ntable {\n border-collapse: collapse;\n}\n\ncaption {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n color: #6c757d;\n text-align: left;\n caption-side: bottom;\n}\n\nth {\n text-align: inherit;\n}\n\nlabel {\n display: inline-block;\n margin-bottom: 0.5rem;\n}\n\nbutton {\n border-radius: 0;\n}\n\nbutton:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\nbutton,\ninput {\n overflow: visible;\n}\n\nbutton,\nselect {\n text-transform: none;\n}\n\nselect {\n word-wrap: normal;\n}\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\nbutton:not(:disabled),\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled) {\n cursor: pointer;\n}\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n padding: 0;\n border-style: none;\n}\n\ninput[type=\"radio\"],\ninput[type=\"checkbox\"] {\n box-sizing: border-box;\n padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"time\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"] {\n -webkit-appearance: listbox;\n}\n\ntextarea {\n overflow: auto;\n resize: vertical;\n}\n\nfieldset {\n min-width: 0;\n padding: 0;\n margin: 0;\n border: 0;\n}\n\nlegend {\n display: block;\n width: 100%;\n max-width: 100%;\n padding: 0;\n margin-bottom: .5rem;\n font-size: 1.5rem;\n line-height: inherit;\n color: inherit;\n white-space: normal;\n}\n\nprogress {\n vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=\"search\"] {\n outline-offset: -2px;\n -webkit-appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n font: inherit;\n -webkit-appearance: button;\n}\n\noutput {\n display: inline-block;\n}\n\nsummary {\n display: list-item;\n cursor: pointer;\n}\n\ntemplate {\n display: none;\n}\n\n[hidden] {\n display: none !important;\n}\n\n/*# sourceMappingURL=bootstrap-reboot.css.map */","// Hover mixin and `$enable-hover-media-query` are deprecated.\n//\n// Originally added during our alphas and maintained during betas, this mixin was\n// designed to prevent `:hover` stickiness on iOS-an issue where hover styles\n// would persist after initial touch.\n//\n// For backward compatibility, we've kept these mixins and updated them to\n// always return their regular pseudo-classes instead of a shimmed media query.\n//\n// Issue: https://github.com/twbs/bootstrap/issues/25195\n\n@mixin hover {\n &:hover { @content; }\n}\n\n@mixin hover-focus {\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin plain-hover-focus {\n &,\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin hover-focus-active {\n &:hover,\n &:focus,\n &:active {\n @content;\n }\n}\n"]} -------------------------------------------------------------------------------- /css/mobilestyle.css: -------------------------------------------------------------------------------- 1 | /* MOBILE SPECIFICATIONS */ 2 | @media only screen and (max-width: 700px) { 3 | .modal { 4 | margin: 0px; 5 | width: 100%; 6 | height: 100%; 7 | } 8 | 9 | #two_avocados { 10 | width: 50%; 11 | display: block; 12 | margin-left: auto; 13 | margin-right: auto; 14 | } 15 | 16 | .card_row { 17 | padding-top: 0%; 18 | margin-bottom: 0%; 19 | } 20 | 21 | .card_row .col-md-4 { 22 | padding-bottom: 3%; 23 | } 24 | 25 | .accordion { 26 | font-size: 110%; 27 | border-radius: 50px; 28 | } 29 | 30 | h1 { 31 | font-size: 200%; 32 | } 33 | 34 | .chapter_title { 35 | font-size: 225%; 36 | } 37 | 38 | h2 { 39 | font-size: 175%; 40 | } 41 | 42 | h3 { 43 | font-size: 150%; 44 | } 45 | 46 | h3 { 47 | font-size: 125%; 48 | } 49 | 50 | .card-title { 51 | font-size: 130%; 52 | } 53 | 54 | .desktop_nav { 55 | display: none; 56 | opacity: 0; 57 | } 58 | 59 | #website_title { 60 | font-size: 300%; 61 | font-kerning: normal; 62 | } 63 | 64 | #website_subtitle { 65 | font-size: 250%; 66 | } 67 | 68 | #title_chevron { 69 | font-size: 300%; 70 | } 71 | 72 | .intro_emphasis { 73 | font-size: 6vw; 74 | } 75 | 76 | p.intro_emphasis { 77 | font-size: 6vw; 78 | } 79 | 80 | .intro_paragraphs { 81 | font-size: 5vw; 82 | } 83 | 84 | .small-card { 85 | width: 100%; 86 | height: 100%; 87 | } 88 | 89 | .case_cards { 90 | width: 100%; 91 | height: 100%; 92 | } 93 | 94 | .card-get-active { 95 | height: 50vw; 96 | } 97 | 98 | .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, 99 | .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto { 100 | padding-right: 0; 101 | padding-left: 0; 102 | } 103 | 104 | .bio_images { 105 | width: 50%; 106 | margin-bottom: 0; 107 | margin-top: 5%; 108 | } 109 | 110 | .mobile_nav { 111 | display: block; 112 | } 113 | 114 | .nav-link { 115 | font-weight: 200; 116 | margin-left: 5px; 117 | padding-left: 5px; 118 | border-left: none; 119 | font-size: 100%; 120 | padding-top: 15%; 121 | } 122 | 123 | #navbar-side a { 124 | color: var(--mobile-nav-color); 125 | } 126 | 127 | #navbar-side a.active { 128 | background-color: transparent; 129 | font-weight: 200; 130 | margin-left: 5px; 131 | padding-left: 5px; 132 | border-left: none; 133 | font-size: 100%; 134 | color: var(--secondary-color); 135 | } 136 | 137 | .sub_nav { 138 | margin-left: 0; 139 | padding-left: 0; 140 | } 141 | 142 | .frameworks_row .body_takeaway { 143 | margin-top: 10%; 144 | margin-bottom: 10%; 145 | } 146 | 147 | .bio { 148 | font-size: 100%; 149 | } 150 | 151 | #register_drawing { 152 | display: none; 153 | } 154 | 155 | ul.toy_algo_boxes li label { 156 | font-size: 100%; 157 | } 158 | 159 | #avocado_drawing { 160 | display: none; 161 | } 162 | 163 | #toy-algo-houses-area { 164 | width: 100%; 165 | } 166 | 167 | .helper { 168 | display: none; 169 | } 170 | 171 | .algorithm_icons { 172 | display: none; 173 | } 174 | 175 | #typed-strings { 176 | display: none; 177 | } 178 | 179 | .alert_text { 180 | background-color: var(--secondary-color); 181 | color: white; 182 | padding: 0; 183 | border-radius: 25px; 184 | font-size: 75%; 185 | } 186 | 187 | .alert_button { 188 | width: 35px; 189 | text-align: right; 190 | } 191 | 192 | 193 | .mobile_only{ 194 | display:block; 195 | } 196 | .desktop_only{ 197 | display:none; 198 | } 199 | 200 | .footer{ 201 | width:100%; 202 | position:fixed; 203 | bottom:0px; 204 | background-color: var(--secondary-color); 205 | color:white; 206 | font-size:15px; 207 | text-align: center; 208 | height: 50px; 209 | padding:1%; 210 | padding-top: 2%; 211 | vertical-align: middle; 212 | opacity: 1; 213 | 214 | } 215 | 216 | .footer a{ 217 | text-decoration: underline white; 218 | } 219 | 220 | .footer a:hover{ 221 | color: white; 222 | font-size: 110%; 223 | } 224 | 225 | .contact_info { 226 | margin-bottom: 55px; 227 | } 228 | 229 | .hidden{ 230 | display:none; 231 | } 232 | 233 | .case_study{ 234 | width: 90%; 235 | } 236 | 237 | .cases_header{ 238 | width: 80%; 239 | } 240 | 241 | } 242 | 243 | @media only screen and (max-width: 450px) { 244 | 245 | .card-get-active { 246 | height: 70vw; 247 | } 248 | } 249 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-color: #26A599; 3 | --secondary-color: #DA786C; 4 | --esp-color: #2ab3a6; 5 | --nycha-color: #2ab3a6; 6 | --doe-color: #2ab3a6; 7 | --success-color:#4C7CBD; 8 | --dark-color: #616161; 9 | --link-color: #767676; 10 | --nav-link-color: #767676; 11 | --popover-word-color: #DA786C; 12 | --popover-word-pressed-color: #DA786C; 13 | --mobile-nav-color: #E0E0E0; 14 | --main-font: 'Nunito', sans-serif; 15 | --secondary-font: 'Copse', serif; 16 | --houses-color: #BDBDBD; 17 | --card1-color: #64518e; 18 | --card2-color: #455e96; 19 | --card3-color: #3389a5; 20 | --card4-color: #7DA11A; 21 | --card5-color: #D48200; 22 | } 23 | 24 | /* 25 | Classes are identified with a . 26 | IDs are identified with a # 27 | */ 28 | 29 | 30 | html, body 31 | { 32 | height: 100%; 33 | } 34 | 35 | body { 36 | font-family: var(--main-font); 37 | font-size: 110%; 38 | font-weight:normal; 39 | position: relative; 40 | } 41 | 42 | p { 43 | line-height: 1.43; 44 | } 45 | .container{ 46 | width: 75%; 47 | } 48 | 49 | .page { 50 | min-height: 100%; 51 | } 52 | 53 | h1 { 54 | text-align: center; 55 | color: var(--main-color); 56 | padding-top: 5%; 57 | padding-bottom: 2%; 58 | font-size: 300%; 59 | font-family: var(--secondary-font); 60 | font-weight: bold; 61 | } 62 | 63 | h2 { 64 | text-align: center; 65 | color: var(--main-color); 66 | padding-top: 5%; 67 | font-size: 250%; 68 | font-family: var(--secondary-font); 69 | } 70 | 71 | h3 { 72 | text-align: left; 73 | color: var(--dark-color); 74 | font-size: 180%; 75 | font-family: var(--secondary-font); 76 | font-weight: 500; 77 | padding-top: 5%; 78 | } 79 | 80 | h4{ 81 | font-size: 150%; 82 | font-family: var(--secondary-font); 83 | } 84 | 85 | 86 | .pros_cons{ 87 | color: var(--main-color); 88 | text-align: center; 89 | width: 50px; 90 | height: 50px; 91 | } 92 | 93 | .body_emphasis{ 94 | font-size: 120%; 95 | font-weight: 400; 96 | color: var(--main-color); 97 | } 98 | 99 | .body_takeaway{ 100 | border-top: 1px dotted; 101 | border-bottom: 1px dotted; 102 | border-color: var(--main-color); 103 | color: var(--main-color); 104 | font-size: 160%; 105 | font-weight: 400; 106 | padding: 4%; 107 | margin-top:2%; 108 | } 109 | 110 | 111 | .salmon{ 112 | background-color: var(--secondary-color); 113 | width: 200%; 114 | } 115 | 116 | .btn-floating{ 117 | width: 100%; 118 | 119 | 120 | } 121 | 122 | .btn-floating:hover{ 123 | background-color: var(--secondary-color); 124 | } 125 | .salmon:hover{ 126 | background-color: var(--secondary-color); 127 | } 128 | 129 | .citation{ 130 | font-size:80%; 131 | font-weight: 200; 132 | color: var(--link-color); 133 | } 134 | 135 | 136 | 137 | .alert_text{ 138 | background-color: var(--secondary-color); 139 | color: white !important; 140 | 141 | border-radius: 25px; 142 | 143 | } 144 | 145 | .alert_button{ 146 | width: 35px; 147 | text-align: right; 148 | } 149 | 150 | /* quote styling */ 151 | .quote_external{ 152 | border-top: 1px dotted; 153 | border-bottom: 1px dotted; 154 | color: var(--link-color); 155 | font-family: var(--secondary-font); 156 | font-size: 150%; 157 | font-style: italic; 158 | margin-top: 20%; 159 | padding: 5%; 160 | } 161 | 162 | /* Navbar styling */ 163 | 164 | #navbar-side{ 165 | font-size: 80%; 166 | width: 10%; 167 | } 168 | #navbar-side a.active { 169 | background-color: transparent; 170 | border-left: 3px solid var(--secondary-color); 171 | font-weight: 600; 172 | margin-left: 15px; 173 | padding-left: 15px; 174 | } 175 | 176 | #navbar-side a { 177 | color: var(--nav-link-color); 178 | text-decoration: none; 179 | } 180 | 181 | .sub_nav { 182 | margin-left: 5px; 183 | padding-left: 5px; 184 | } 185 | 186 | .mobile_nav{ 187 | display: none; 188 | } 189 | /* splash screen */ 190 | .bg { 191 | background: url("../img/skyline1.png"); 192 | width: 100%; 193 | background-position: center; 194 | background-repeat: no-repeat; 195 | background-size: cover; 196 | } 197 | #website_title{ 198 | font-size: 500%; 199 | color: var(--main-color); 200 | margin-top: 3%; 201 | margin-bottom: 0%; 202 | padding-bottom: 0%; 203 | } 204 | 205 | #title_chevron{ 206 | color: var(--main-color); 207 | margin-bottom: 0%; 208 | text-align: center; 209 | font-size: 50px; 210 | } 211 | 212 | #skyline_drawing{ 213 | text-align:center; 214 | } 215 | 216 | #bodega_drawing{ 217 | text-align:center; 218 | } 219 | 220 | .icon_center{ 221 | text-align: center; 222 | } 223 | 224 | 225 | #website_subtitle{ 226 | font: var(--main-font); 227 | font-size: 300%; 228 | font-weight: 300; 229 | color: var(--dark-color); 230 | margin-top: 0%; 231 | margin-bottom: 3%; 232 | padding: 0%; 233 | } 234 | 235 | /* intro pages */ 236 | .intro_paragraphs{ 237 | color: var(--dark-color); 238 | font-size: 150%; 239 | margin-top: 5%; 240 | } 241 | .intro_emphasis{ 242 | font-size: 35px; 243 | color: var(--main-color); 244 | } 245 | 246 | strong{ 247 | color: var(--main-color); 248 | } 249 | /* buttons styling */ 250 | .btn { 251 | margin-left: .5%; 252 | margin-top:.5%; 253 | text-transform: capitalize; 254 | 255 | } 256 | 257 | #plain_text{ 258 | font-size: 25px; 259 | } 260 | #legalese_text{ 261 | font-size: 25px 262 | } 263 | #definitions_buttons{ 264 | padding: 5%; 265 | font-size: 120%; 266 | text-align:center; 267 | } 268 | 269 | 270 | /* links style */ 271 | /* unvisited link */ 272 | a:link { 273 | color: inherit; 274 | text-decoration: underline var(--secondary-color); 275 | } 276 | 277 | .tooltip_definition{ 278 | 279 | } 280 | /* popover */ 281 | .popover-definition{ 282 | color: var(--popover-word-color); 283 | } 284 | 285 | .popover{ 286 | border: 2px solid; 287 | border-color: var(--popover-word-color); 288 | -moz-box-shadow:-10 10 .75rem; 289 | -webkit-box-shadow:-10 10 .75rem; 290 | box-shadow: -10 10 .75rem; 291 | font-family: var(--main-font); 292 | font-size: 102%; 293 | padding: .75rem 1rem; 294 | box-decoration-break: clone; 295 | } 296 | 297 | .popover .arrow{ 298 | display: none; 299 | } 300 | 301 | a.popover_word{ 302 | border: 2px solid; 303 | border-color: var(--popover-word-color); 304 | border-radius: 10px; 305 | color: var(--popover-word-color); 306 | font-weight: bold; 307 | margin: .5px; 308 | padding-left: 10px; 309 | padding-right: 10px; 310 | text-decoration: none; 311 | box-decoration-break: clone; 312 | } 313 | 314 | a.popover_word:hover { 315 | background-color: var(--popover-word-pressed-color); 316 | border-color: var(--popover-word-pressed-color); 317 | box-decoration-break: clone; 318 | color: white; 319 | font-weight: bold; 320 | 321 | } 322 | 323 | #variable_example{ 324 | border: 2px solid; 325 | border-color: var(--popover-word-color); 326 | border-radius: 50px; 327 | color: var(--popover-word-color); 328 | padding: 2px; 329 | text-decoration: none; 330 | } 331 | 332 | /* visited link */ 333 | a:visited { 334 | color: inherit; 335 | text-decoration: underline var(--secondary-color); 336 | } 337 | 338 | /* mouse over link */ 339 | a:hover { 340 | color: var(--secondary-color); 341 | } 342 | 343 | /* selected link */ 344 | a:active { 345 | color: var(--secondary-color); 346 | } 347 | 348 | .problem_statement{ 349 | border-color: var(--main-color); 350 | border-style: solid; 351 | border-width: 3px; 352 | border-radius: 16px; 353 | padding: 5%; 354 | } 355 | 356 | .problem_statement_header{ 357 | padding-top: none; 358 | } 359 | 360 | .row{ 361 | padding-top: 1%; 362 | } 363 | 364 | .slidecontainer { 365 | width: 100%; /* Width of the outside container */ 366 | } 367 | 368 | .slider { 369 | -webkit-appearance: none; 370 | width: 60%; 371 | height: 15px; 372 | border-radius: 5px; 373 | background: #d3d3d3; 374 | outline: none; 375 | opacity: 0.7; 376 | -webkit-transition: .2s; 377 | transition: opacity .2s; 378 | } 379 | 380 | .slider:hover { 381 | opacity: 1; /* Fully shown on mouse-over */ 382 | } 383 | 384 | .slider::-webkit-slider-thumb { 385 | -webkit-appearance: none; 386 | appearance: none; 387 | width: 25px; 388 | height: 25px; 389 | border-radius: 50%; 390 | background: var(--main-color); 391 | cursor: pointer; 392 | } 393 | 394 | .slider::-moz-range-thumb { 395 | width: 25px; 396 | height: 25px; 397 | border-radius: 50%; 398 | background: var(--main-color); 399 | cursor: pointer; 400 | } 401 | 402 | .slider-row{ 403 | padding: 1%; 404 | } 405 | /*TOY ALGO STYLE */ 406 | .toy_buttons { 407 | margin-left: .5%; 408 | margin-top:.5%; 409 | text-transform: capitalize; 410 | 411 | } 412 | 413 | .toyAlgoButtonsRow{ 414 | padding-top:1%; 415 | padding-bottom:1%; 416 | text-align: center; 417 | } 418 | 419 | .new_section{ 420 | padding-top: 25%; 421 | } 422 | 423 | 424 | 425 | .splash_screen h1{ 426 | color: black; 427 | font-size: 72px; 428 | 429 | } 430 | 431 | .splash_screen h2{ 432 | color: black; 433 | margin-top: 3%; 434 | font-size: 58px; 435 | } 436 | 437 | 438 | 439 | .fromTopIn 440 | { 441 | transition: transform 2.0s ease, opacity 2.0s ease; 442 | 443 | transform: translate(0,0); 444 | opacity: 1.0; 445 | } 446 | 447 | .fromTopOut 448 | { 449 | transition: transform 2.0s ease, opacity 2.0s ease; 450 | 451 | transform: translate(0,-10px); 452 | opacity: 0.0; 453 | } 454 | 455 | .fromBottomIn 456 | { 457 | transition: transform 2.0s ease, opacity 2.0s ease; 458 | 459 | transform: translate(0,0); 460 | opacity: 1.0; 461 | } 462 | 463 | .fromBottomOut 464 | { 465 | transition: transform 2.0s ease, opacity 2.0s ease; 466 | 467 | transform: translate(0,10px); 468 | opacity: 0.0; 469 | } 470 | 471 | .chapter_number{ 472 | font-size: 300%; 473 | font-weight: lighter; 474 | width: 100px; 475 | height: 100px; 476 | background: var(--main-color); 477 | color: white; 478 | margin: auto; 479 | padding: 18px; 480 | border-radius: 50%; 481 | } 482 | 483 | .chapter_title{ 484 | font-family: var(--main-font); 485 | font-weight: 700; 486 | font-size: 300%; 487 | color: var(--main-color); 488 | text-align: center; 489 | margin-bottom: 50px; 490 | padding: 0; 491 | } 492 | 493 | /* ADS Accordian*/ 494 | .accordion { 495 | color: white; 496 | cursor: pointer; 497 | margin-top: 5%; 498 | padding: 2%; 499 | width: 100%; 500 | border: none; 501 | outline: none; 502 | transition: 0.4s; 503 | text-align: center; 504 | font-size: 200%; 505 | border-radius: 50px; 506 | } 507 | 508 | .active, .accordion:hover { 509 | background-color: #ccc; 510 | } 511 | 512 | .accordian:focus{ 513 | background-color: #ccc; 514 | } 515 | 516 | #nypl_accordian{ 517 | background-color: #F4A79C; 518 | } 519 | #nycha_accordian{ 520 | background-color: #F19184; 521 | } 522 | 523 | #doe_accordian{ 524 | background-color: #DB7A6E; 525 | } 526 | .panel { 527 | padding: 0 18px; 528 | display: none; 529 | background-color: white; 530 | overflow: hidden; 531 | } 532 | 533 | #mejia_photo{ 534 | text-align: center; 535 | } 536 | 537 | .algorithm_icons{ 538 | color: var(--main-color); 539 | font-size: 400%; 540 | text-align: center; 541 | } 542 | 543 | .algorithm_icon_link{ 544 | color: var(--main-color); 545 | font-size: 250%; 546 | text-align: center; 547 | } 548 | 549 | .algorithm_arrows{ 550 | color: var(--dark-color); 551 | width: 100%; 552 | height: 100%; 553 | font-weight: 500; 554 | text-align: center; 555 | } 556 | 557 | p{ 558 | padding-top: 3%; 559 | } 560 | 561 | .hvr-icon-forward2 { 562 | display: inline-block; 563 | vertical-align: middle; 564 | -webkit-transform: perspective(100%) translateZ(0); 565 | transform: perspective(100%) translateZ(0); 566 | box-shadow: 0 0 1px rgba(0, 0, 0, 0); 567 | -webkit-transition-duration: 0.1s; 568 | transition-duration: 0.1s; 569 | } 570 | 571 | .hvr-icon-forward2 .hvr-icon2 { 572 | -webkit-transform: translateZ(0); 573 | transform: translateZ(0); 574 | -webkit-transition-duration: 0.1s; 575 | transition-duration: 0.1s; 576 | -webkit-transition-property: transform; 577 | transition-property: transform; 578 | -webkit-transition-timing-function: ease-out; 579 | transition-timing-function: ease-out; 580 | } 581 | .hvr-icon-forward2:hover .hvr-icon2, .hvr-icon-forward2:focus .hvr-icon2, .hvr-icon-forward2:active .hvr-icon2 { 582 | -webkit-transform: translateX(100%); 583 | transform: translateX(100%); 584 | } 585 | 586 | 587 | /** framework cards **/ 588 | .front-card-title{ 589 | text-align: center; 590 | color: white; 591 | } 592 | 593 | .card-title{ 594 | font-size: 200%; 595 | color: white; 596 | } 597 | 598 | .front-card-text{ 599 | text-align: center; 600 | } 601 | 602 | .collapsible-body{ 603 | background-color: white; 604 | } 605 | 606 | .collapsible-header{ 607 | text-align: center; 608 | color: var(--main-color); 609 | } 610 | 611 | .machine-bias-card{ 612 | background-color:var(--card2-color); 613 | color: white; 614 | } 615 | 616 | .bias-title{ 617 | color: var(--card2-color); 618 | } 619 | .explainability-card{ 620 | background-color: var(--card3-color); 621 | color: white; 622 | } 623 | 624 | .explainability-title{ 625 | color: var(--card3-color); 626 | } 627 | 628 | .automation-card{ 629 | background-color:var(--card4-color); 630 | color: white; 631 | } 632 | 633 | .automation-title{ 634 | color: var(--card4-color); 635 | } 636 | 637 | .flexibility-card{ 638 | background-color: var(--card5-color); 639 | color: white; 640 | 641 | } 642 | 643 | .flexibility-title{ 644 | color: var(--card5-color); 645 | } 646 | 647 | .impact-card{ 648 | background-color: var(--card1-color); 649 | color: white; 650 | } 651 | .impact-title{ 652 | color: var(--card1-color); 653 | } 654 | 655 | .card-reveal{ 656 | color: black; 657 | } 658 | 659 | .small-card{ 660 | width: 20vw; 661 | height:25vw; 662 | 663 | 664 | } 665 | 666 | .small-card .card-content{ 667 | padding-left: 4%; 668 | padding-right: 4%; 669 | } 670 | 671 | 672 | .small-card-row{ 673 | margin-bottom:0px; 674 | margin-top: 0px; 675 | } 676 | .small-card-row .col{ 677 | padding: .5%; 678 | } 679 | 680 | .card_icon{ 681 | width: 50%; 682 | display: block; 683 | margin-left: auto; 684 | margin-right: auto; 685 | padding-top: 5%; 686 | padding-bottom: 15%; 687 | 688 | } 689 | 690 | .card.medium{ 691 | margin-top:1%; 692 | height:400px; 693 | margin-left: 20%; 694 | 695 | 696 | } 697 | 698 | 699 | #Porfirio_framework{ 700 | padding-bottom: 10%; 701 | } 702 | 703 | .centered-header{ 704 | text-align: center; 705 | padding-top: 10%; 706 | padding-bottom: 5%; 707 | } 708 | 709 | .case-study{ 710 | width: 80% 711 | } 712 | 713 | .affix { 714 | top:0; 715 | } 716 | 717 | .btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus { 718 | background-color: #545b62; 719 | } 720 | 721 | /* avocados section */ 722 | 723 | .avocado_thoughts{ 724 | font-style: italic; 725 | font-size: 110%; 726 | margin: 5%; 727 | } 728 | .avocado_images{ 729 | width: 15%; 730 | padding-right: 5%; 731 | } 732 | 733 | .avo-emoji{ 734 | font-size: 500%; 735 | } 736 | 737 | .avocado_section{ 738 | text-align: center; 739 | margin-bottom: 3%; 740 | } 741 | 742 | .avocado_section p{ 743 | padding-bottom: 3%; 744 | } 745 | .avocado_rows{ 746 | padding-top:0; 747 | } 748 | 749 | .avocado_rows p{ 750 | padding-top: 1%; 751 | } 752 | .avo_right{ 753 | text-align: right; 754 | } 755 | 756 | .row_no_padding{ 757 | padding-top:0px; 758 | } 759 | 760 | .vertical-center { 761 | margin: 0; 762 | top: 50%; 763 | -ms-transform: translateY(-50%); 764 | transform: translateY(-50%); 765 | } 766 | 767 | #two_avocados{ 768 | width:100%; 769 | height:100%; 770 | } 771 | 772 | .overlay { 773 | position: absolute; 774 | top: -2%; 775 | bottom: 0; 776 | left: -2%; 777 | right: 0; 778 | height: 110%; 779 | width: 110%; 780 | opacity: 0; 781 | transition: .5s ease; 782 | background-color: #ffffff; 783 | border: transparent; 784 | box-shadow: transparent; 785 | } 786 | 787 | .fade-container:hover .overlay { 788 | opacity: 1; 789 | } 790 | 791 | .icon-fade { 792 | font-size: 400%; 793 | position: absolute; 794 | top: 50%; 795 | left: 50%; 796 | -webkit-transform: translate(-50%, -50%); 797 | -ms-transform: translate(-50%, -50%); 798 | transform: translate(-50%, -50%); 799 | text-align: center; 800 | } 801 | 802 | /** frameworks section **/ 803 | .collapsible_icons{ 804 | font-size: 80%; 805 | } 806 | 807 | .collapsible-header i{ 808 | font-size: 80%; 809 | margin-top: 1%; 810 | } 811 | 812 | 813 | .frameworks_row{ 814 | margin-top: 15%; 815 | margin-bottom: 15%; 816 | } 817 | 818 | .definitions_hidden{ 819 | display: none; 820 | } 821 | 822 | .impact-card .icon-fade{ 823 | color: var(--card1-color); 824 | text-align: left; 825 | } 826 | 827 | 828 | .machine-bias-card .icon-fade{ 829 | color: var(--card2-color); 830 | text-align: left; 831 | } 832 | 833 | .explainability-card .icon-fade{ 834 | color: var(--card3-color); 835 | } 836 | 837 | .automation-card .icon-fade{ 838 | color: var(--card4-color); 839 | } 840 | 841 | .flexibility-card .icon-fade{ 842 | color: var(--card5-color); 843 | } 844 | 845 | .small-card-row a{ 846 | text-decoration: none; 847 | } 848 | 849 | #impact_section strong { 850 | color: var(--card1-color); 851 | } 852 | 853 | .impact_collapsible .collapsible-header{ 854 | color: var(--card1-color); 855 | } 856 | 857 | #bias_section strong { 858 | color: var(--card2-color); 859 | } 860 | 861 | .bias_collapsible .collapsible-header{ 862 | color: var(--card2-color); 863 | } 864 | 865 | #explainability_section strong { 866 | color: var(--card3-color); 867 | } 868 | 869 | .explainability_collapsible .collapsible-header{ 870 | color: var(--card3-color); 871 | } 872 | 873 | #automation_section strong { 874 | color: var(--card4-color); 875 | } 876 | 877 | .automation_collapsible .collapsible-header{ 878 | color: var(--card4-color); 879 | } 880 | 881 | #flexibility_section strong { 882 | color: var(--card5-color); 883 | } 884 | 885 | .flexibility_collapsible .collapsible-header{ 886 | color: var(--card5-color); 887 | } 888 | 889 | .case_cards{ 890 | margin: 1%; 891 | margin-left: 1%; 892 | width: 20vw; 893 | height:25vw; 894 | } 895 | 896 | /* Toy algo buttons */ 897 | 898 | ul.toy_algo_boxes { 899 | list-style: none; 900 | padding: 2%; 901 | } 902 | ul.toy_algo_boxes li{ 903 | display: inline; 904 | } 905 | 906 | ul.toy_algo_boxes li label{ 907 | display: inline-block; 908 | border: 2px solid var(--secondary-color); 909 | color: var(--secondary-color); 910 | border-radius: 50px; 911 | -webkit-touch-callout: none; 912 | -webkit-user-select: none; 913 | -moz-user-select: none; 914 | -ms-user-select: none; 915 | user-select: none; 916 | -webkit-tap-highlight-color: transparent; 917 | transition: all .2s; 918 | font-size: 120%; 919 | } 920 | 921 | ul.toy_algo_boxes li label { 922 | padding:1%; 923 | cursor: pointer; 924 | } 925 | 926 | ul.toy_algo_boxes li label::before { 927 | font-size: 120%; 928 | padding:1%; 929 | } 930 | 931 | ul.toy_algo_boxes li input[type="checkbox"]:checked + label { 932 | background-color: var(--secondary-color); 933 | color: white; 934 | transition: all .2s; 935 | } 936 | 937 | .colored_bullet{ 938 | color: var(--main-color); 939 | font-size: 50%; 940 | padding-right: 3%; 941 | } 942 | 943 | ul { 944 | list-style-position: outside; 945 | } 946 | 947 | ul.indented-bullet-points{ 948 | padding-left: 5%; 949 | padding-right: 5%; 950 | list-style-type: circle; 951 | } 952 | 953 | li { 954 | margin-bottom: 3%; 955 | } 956 | .btn-secondary { 957 | color: #fff; 958 | background-color: var(--secondary-color); 959 | border-color: var(--secondary-color); 960 | 961 | border-radius: 50px; 962 | 963 | 964 | } 965 | 966 | .btn-secondary:hover{ 967 | background-color: var(--secondary-color); 968 | border-color: var(--secondary-color); 969 | } 970 | .btn-secondary:focus{ 971 | background-color: var(--secondary-color); 972 | border-color: var(--secondary-color); 973 | } 974 | 975 | .btn-secondary:submit{ 976 | background-color: var(--secondary-color); 977 | border-color: var(--secondary-color); 978 | } 979 | 980 | /** examples section **/ 981 | .nycha_titles{ 982 | color: var(--nycha-color); 983 | } 984 | 985 | .case_title{ 986 | margin-top: 10%; 987 | } 988 | 989 | .iconCircle{ 990 | border-radius: 50%; 991 | width: 72px; 992 | height: 36px; 993 | background: none; 994 | border: 4px solid white; 995 | color: white; 996 | text-align: center; 997 | } 998 | 999 | .modal{ 1000 | width: 70%; 1001 | } 1002 | 1003 | .modal-backdrop.show{ 1004 | color: white; 1005 | 1006 | } 1007 | 1008 | .modal-backdrop { 1009 | position: fixed; 1010 | top: 0; 1011 | left: 0; 1012 | z-index: 1040; 1013 | width: 100vw; 1014 | height: 100vh; 1015 | background-color: white; 1016 | } 1017 | 1018 | .finalpage{ 1019 | height: 100%; 1020 | } 1021 | 1022 | .code_block{ 1023 | font-family: monospace; 1024 | } 1025 | 1026 | .modal{ 1027 | margin-top: 5%; 1028 | } 1029 | 1030 | .bio_images{ 1031 | display: block; 1032 | margin-left: auto; 1033 | margin-right: auto; 1034 | border-radius: 50%; 1035 | border:3px solid var(--secondary-color); 1036 | width: 70%; 1037 | margin-bottom: 10%; 1038 | } 1039 | 1040 | .bio { 1041 | font-size: 85%; 1042 | } 1043 | 1044 | .sticky{ 1045 | position: sticky; 1046 | position: -webkit-sticky; 1047 | height: 50%; 1048 | top: 20%; 1049 | 1050 | } 1051 | 1052 | .sticky_card_icon{ 1053 | width: 40%; 1054 | display: block; 1055 | margin-left: auto; 1056 | margin-right: auto; 1057 | padding-top: 5%; 1058 | padding-bottom: 5%; 1059 | } 1060 | 1061 | #design-decisions-header{ 1062 | line-height: 155%; 1063 | } 1064 | #impact-style{ 1065 | background-color: var(--card1-color); 1066 | border-radius: 5%; 1067 | color: white; 1068 | padding: .5%; 1069 | } 1070 | 1071 | #bias-style{ 1072 | background-color: var(--card2-color); 1073 | border-radius: 5%; 1074 | color: white; 1075 | padding: .5%; 1076 | } 1077 | 1078 | #explainability-style{ 1079 | background-color: var(--card3-color); 1080 | border-radius: 5%; 1081 | color: white; 1082 | padding: .5%; 1083 | } 1084 | 1085 | #automation-style{ 1086 | background-color: var(--card4-color); 1087 | border-radius: 5%; 1088 | color: white; 1089 | padding: .5%; 1090 | } 1091 | 1092 | #flexibility-style{ 1093 | background-color: var(--card5-color); 1094 | border-radius: 5%; 1095 | color: white; 1096 | padding: .5%; 1097 | } 1098 | 1099 | .impact_details h3{ 1100 | color: var(--card1-color); 1101 | } 1102 | 1103 | .impact_details .body_takeaway{ 1104 | color: var(--card1-color); 1105 | border-color: var(--card1-color); 1106 | } 1107 | 1108 | .bias_details h3{ 1109 | color: var(--card2-color); 1110 | } 1111 | .bias_details .body_takeaway{ 1112 | color: var(--card2-color); 1113 | border-color: var(--card2-color); 1114 | } 1115 | 1116 | 1117 | .explainability_details h3{ 1118 | color: var(--card3-color); 1119 | } 1120 | .explainability_details .body_takeaway{ 1121 | color: var(--card3-color); 1122 | border-color: var(--card3-color); 1123 | } 1124 | 1125 | 1126 | .automation_details h3{ 1127 | color: var(--card4-color); 1128 | } 1129 | .automation_details .body_takeaway{ 1130 | color: var(--card4-color); 1131 | border-color: var(--card4-color); 1132 | } 1133 | 1134 | 1135 | .flexibility_details h3{ 1136 | color: var(--card5-color); 1137 | } 1138 | .flexibility_details .body_takeaway{ 1139 | color: var(--card5-color); 1140 | border-color: var(--card5-color); 1141 | } 1142 | 1143 | .card .card-title{ 1144 | font-size: 180%; 1145 | } 1146 | 1147 | .card-reveal p{ 1148 | font-size: 85%; 1149 | } 1150 | 1151 | .card-reveal h4{ 1152 | font-size: 110%; 1153 | } 1154 | 1155 | /** get active **/ 1156 | .card-get-active{ 1157 | height: 20vw; 1158 | background-color: var(--secondary-color); 1159 | } 1160 | 1161 | .card-get-active-header{ 1162 | color: white; 1163 | } 1164 | 1165 | .card-get-active-body{ 1166 | margin-left: 10% !important; 1167 | margin-right: 10% !important; 1168 | color: white; 1169 | } 1170 | 1171 | 1172 | .csl-entry{ 1173 | padding-top: 5%; 1174 | } 1175 | 1176 | .toy_algo_tip{ 1177 | font-size: 85%; 1178 | text-align: center; 1179 | } 1180 | 1181 | .popover_image{ 1182 | width: 50%; 1183 | } 1184 | 1185 | .popover_paragraph{ 1186 | padding-top: 0; 1187 | } 1188 | .modal-content{ 1189 | padding-top: 0; 1190 | } 1191 | .modal-close{ 1192 | position: sticky; 1193 | position: -webkit-sticky; 1194 | top: 0; 1195 | z-index:1; 1196 | margin-bottom: 0; 1197 | padding-top: 1%; 1198 | } 1199 | .modal-close-button{ 1200 | 1201 | font-size: 100%; 1202 | } 1203 | 1204 | .credits{ 1205 | font-size: 125%; 1206 | color: var(--dark-color); 1207 | font-family: var(--main-font); 1208 | 1209 | } 1210 | 1211 | .thanks{ 1212 | color: var(--main-color); 1213 | text-align: center; 1214 | padding-bottom: 3%; 1215 | } 1216 | 1217 | .helper{ 1218 | color: var(--secondary-color); 1219 | font-size: 100%; 1220 | font-weight: bold; 1221 | text-align: right; 1222 | } 1223 | 1224 | .easter_eggs{ 1225 | text-align: left; 1226 | color: var(--secondary-color); 1227 | } 1228 | 1229 | 1230 | 1231 | .alert_button:hover{ 1232 | -moz-box-shadow:-10 10 .75rem; 1233 | -webkit-box-shadow:-10 10 .75rem; 1234 | box-shadow: -10 10 .75rem; 1235 | 1236 | } 1237 | 1238 | .fixed-action-button.active, .fixed-action-button:hover { 1239 | background-color: white; 1240 | 1241 | } 1242 | 1243 | .fixed-action-btn.direction-left, .fixed-action-btn.direction-right { 1244 | padding: 0 0 0 0px; 1245 | margin-right: 0; 1246 | } 1247 | 1248 | .active, .accordion:hover { 1249 | background-color: rgb(0,0,0,0); 1250 | } 1251 | 1252 | .row_nopad{ 1253 | margin-bottom: 0; 1254 | padding-top: 0; 1255 | } 1256 | 1257 | .mobile_only{ 1258 | display: none; 1259 | } 1260 | 1261 | .hidden{ 1262 | display:none; 1263 | } 1264 | 1265 | .footer{ 1266 | width:100%; 1267 | position:fixed; 1268 | bottom:0px; 1269 | background-color: var(--secondary-color); 1270 | color:white; 1271 | font-size:90%; 1272 | text-align: center; 1273 | height: 0; 1274 | padding:1%; 1275 | padding-top: 2%; 1276 | vertical-align: middle; 1277 | opacity:0; 1278 | } 1279 | 1280 | .footer a:hover{ 1281 | color: white; 1282 | font-size: 110%; 1283 | } 1284 | 1285 | .fixed-action-btn a:focus{ 1286 | background-color: var(--secondary-color); 1287 | } 1288 | -------------------------------------------------------------------------------- /data/firecast_test.csv: -------------------------------------------------------------------------------- 1 | ID,borough,boroughBX,boroughMN,boroughQN,boroughSI,landuse,landuse4,landuse5,landuse8,lotarea,Square_Footage,Business,comarea,resarea,officearea,Height,Number_Occupants,unitstotal,proxcode,assesstot,Building_Age,yearbuilt,builtfar,PRIMARY.VACATE.REASON,Fire,x_position,y_position,Address,Number_Windows 2 | 1,Queens,0,0,1,0,1,0,0,0,5000,2500,0,0,2500,0,2,1,1,1,41886,1,2018,0.5,0,0,3,4,200 Bootstrap St,1 3 | 8,Brooklyn,0,0,0,0,2,0,0,0,1.00E+05,157708,0,0,157708,0,3,24,24,0,3497400,33,1986,1.58,1,0,5,1,5 Cross Validation Ln,2 4 | 6,Bronx,1,0,0,0,2,0,0,0,3475,2512,0,0,2512,0,3,3,3,3,33729,19,2000,0.72,1,0,1,4,87 Epanechnikov Pl ,3 5 | 13,Queens,0,0,1,0,2,0,0,0,2000,4380,0,0,4380,0,3,6,6,0,118176,97,1922,2.19,1,0,4,4,"7 Kernel St, Apt 1",4 6 | 9,Brooklyn,0,0,0,0,3,0,0,0,70000,153588,0,0,153588,0,6,195,195,1,7893900,44,1975,2.19,1,0,5,2,71 Mallow St,5 7 | 10,Bronx,1,0,0,0,3,0,0,0,17500,54775,1,10900,43875,8775,6,48,48,2,1300050,65,1954,3.13,1,0,2,4,81 Regression St,6 8 | 18,Bronx,1,0,0,0,3,0,0,0,21000,49000,0,0,49000,0,6,57,57,0,1113750,52,1967,2.33,1,0,1,3,17 Stochastic St,7 9 | 11,Manhatten,0,1,0,0,3,0,0,0,10092,68456,0,0,68456,0,8,57,57,0,5064750,109,1910,6.78,1,0,4,2,203 Logit Ln,8 10 | 15,Staten Island,0,0,0,1,3,0,0,0,123500,255480,0,0,255480,0,4,316,316,1,11475900,90,1929,2.07,1,0,3,1,"33 Matrix St, Apt 1",9 11 | 5,Manhatten,0,1,0,0,4,1,0,0,50574,589670,1,75085,514585,6378,40,516,523,1,65734200,21,1998,11.66,1,0,3,2,69 Euclidian Ln,10 12 | 14,Manhatten,0,1,0,0,4,1,0,0,3539,12600,1,600,12000,0,5,9,10,3,172786,95,1924,3.56,1,0,2,2,21 Gaussian Blvd,9 13 | 7,Queens,0,0,1,0,4,1,0,0,10010,34541,1,3555,27149,0,4,38,39,0,1962000,27,1992,3.45,1,0,5,4,1500 Cauchy Ct,8 14 | 12,Staten Island,0,0,0,1,4,1,0,0,3300,4290,1,1430,2860,0,3,2,3,1,17064,99,1920,1.3,1,0,1,1,42 Smooth St,7 15 | 20,Staten Island,0,0,0,1,4,1,0,0,147370,326646,1,1660,324986,0,6,361,362,1,9435150,54,1965,2.22,1,0,2,1,171 Nightengale Ct,6 16 | 17,Brooklyn,0,0,0,0,5,0,1,0,1533,2586,1,2586,0,0,2,0,2,0,135450,91,1928,1.69,1,0,4,1,8 Polynomial Ln,5 17 | 2,Queens,0,0,1,0,5,0,1,0,1750,6060,1,6060,0,2660,3,0,4,2,658800,9,2010,3.46,0,0,4,3,107 Algorithm Ln,4 18 | 19,Bronx,1,0,0,0,8,0,0,1,25000,235000,1,235000,0,0,14,227,227,0,14507100,48,1971,9.4,1,0,2,3,"55 Vector St, Apt 3",3 19 | 16,Manhatten,0,1,0,0,8,0,0,1,1600,3900,1,3900,0,0,4,0,1,3,105300,109,1910,2.44,1,0,3,3,5 Quadratic Blvd,2 20 | 3,Queens,0,0,1,0,8,0,0,1,12160,3680,1,3680,0,0,2,0,1,0,580050,313,1706,0.3,0,0,5,3,"50 Markov St, Apt 2",1 21 | 4,Staten Island,0,0,0,1,8,0,0,1,598715,2655,1,2000,655,0,2,1,2,1,2516400,354,1665,0,0,0,1,2,3 Bayes St,1 22 | -------------------------------------------------------------------------------- /favicon_package_v0.16/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/favicon_package_v0.16/android-chrome-192x192.png -------------------------------------------------------------------------------- /favicon_package_v0.16/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/favicon_package_v0.16/android-chrome-256x256.png -------------------------------------------------------------------------------- /favicon_package_v0.16/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/favicon_package_v0.16/apple-touch-icon.png -------------------------------------------------------------------------------- /favicon_package_v0.16/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #ffffff 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /favicon_package_v0.16/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/favicon_package_v0.16/favicon-16x16.png -------------------------------------------------------------------------------- /favicon_package_v0.16/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/favicon_package_v0.16/favicon-32x32.png -------------------------------------------------------------------------------- /favicon_package_v0.16/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/favicon_package_v0.16/favicon.ico -------------------------------------------------------------------------------- /favicon_package_v0.16/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/favicon_package_v0.16/mstile-150x150.png -------------------------------------------------------------------------------- /favicon_package_v0.16/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 25 | 35 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /favicon_package_v0.16/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "automating.nyc", 3 | "short_name": "automating.nyc", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#26a599", 17 | "background_color": "#26a599", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /img/aki.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/aki.jpg -------------------------------------------------------------------------------- /img/automation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/automation.png -------------------------------------------------------------------------------- /img/avocado.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/avocado.png -------------------------------------------------------------------------------- /img/avocado1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/avocado1.png -------------------------------------------------------------------------------- /img/avocado_fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/avocado_fav.png -------------------------------------------------------------------------------- /img/avocado_fav.png.tmp$$: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/avocado_fav.png.tmp$$ -------------------------------------------------------------------------------- /img/bias.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/bias.png -------------------------------------------------------------------------------- /img/cards.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/cards.jpg -------------------------------------------------------------------------------- /img/decisionTree.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 39 | 41 | 42 | 44 | image/svg+xml 45 | 47 | 48 | 49 | 50 | 51 | 56 | 59 | 62 | 68 | 74 | 80 | 88 | 96 | 102 | 108 | 116 | 124 | 130 | 136 | 144 | 152 | 153 | 154 | 155 | 156 | -------------------------------------------------------------------------------- /img/dee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/dee.jpg -------------------------------------------------------------------------------- /img/dee.tif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/dee.tif -------------------------------------------------------------------------------- /img/elyse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/elyse.jpg -------------------------------------------------------------------------------- /img/elyse2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/elyse2.jpg -------------------------------------------------------------------------------- /img/explainability.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/explainability.png -------------------------------------------------------------------------------- /img/flexibility.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/flexibility.png -------------------------------------------------------------------------------- /img/impact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/impact.png -------------------------------------------------------------------------------- /img/jon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/jon.jpg -------------------------------------------------------------------------------- /img/jon.tif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/jon.tif -------------------------------------------------------------------------------- /img/jon1.tif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/jon1.tif -------------------------------------------------------------------------------- /img/jon2.tif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/jon2.tif -------------------------------------------------------------------------------- /img/megaphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/megaphone.png -------------------------------------------------------------------------------- /img/megaphone_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/megaphone_white.png -------------------------------------------------------------------------------- /img/network.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 39 | 41 | 42 | 44 | image/svg+xml 45 | 47 | 48 | 49 | 50 | 51 | 56 | 59 | 62 | 68 | 74 | 80 | 81 | 84 | 90 | 96 | 102 | 108 | 109 | 115 | 123 | 131 | 139 | 147 | 155 | 165 | 175 | 185 | 193 | 201 | 209 | 217 | 225 | 233 | 241 | 249 | 250 | 251 | 252 | -------------------------------------------------------------------------------- /img/newyork2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | image/svg+xml 46 | 72 | 76 | 79 | 82 | 83 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /img/regression.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 39 | 41 | 42 | 44 | image/svg+xml 45 | 47 | 48 | 49 | 50 | 51 | 56 | 59 | 65 | 74 | 80 | 86 | 92 | 98 | 104 | 110 | 116 | 122 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /img/skinny_outline.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/skinny_outline.jpg -------------------------------------------------------------------------------- /img/skyline1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/skyline1.png -------------------------------------------------------------------------------- /img/skyline2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/skyline2.jpg -------------------------------------------------------------------------------- /img/skyline3.tif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/skyline3.tif -------------------------------------------------------------------------------- /img/two_avocados.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evoeges/pae/f7e4e05a61906084b854d079617d601d80be6bfc/img/two_avocados.png -------------------------------------------------------------------------------- /js/ScrollTrigger.min.js: -------------------------------------------------------------------------------- 1 | /* Written by Erik Terwan - MIT license - https://github.com/terwanerik */ 2 | !function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():t.ScrollTrigger=e()}(this,function(){"use strict";return function(t,e,n){function i(){var t=h.bindElement.scrollTop?h.bindElement.scrollTop:document.documentElement.scrollTop,e=h.bindElement.scrollLeft?h.bindElement.scrollLeft:document.documentElement.scrollLeft;a.left==e&&a.top==t||h.scrollDidChange(),r.length>0||c.length>0?(u=!0,d(i)):u=!1}function l(t,e){var n=e.split("("),i=n[0];if(n.length>1?(n=n[1].split(")")[0],n=n.indexOf("', '")>-1?n.split("', '"):n.indexOf("','")>-1?n.split("','"):n.indexOf('", "')>-1?n.split('", "'):n.indexOf('","')>-1?n.split('","'):[n]):n=[],n=n.map(function(t){return s(t)}),"function"==typeof h.callScope[i])try{h.callScope[i].apply(t.element,n)}catch(l){try{h.callScope[i].apply(null,n)}catch(l){}}}function s(t){return t+="",'"'==t[0]&&(t=t.substr(1)),"'"==t[0]&&(t=t.substr(1)),'"'==t[t.length-1]&&(t=t.substr(0,t.length-1)),"'"==t[t.length-1]&&(t=t.substr(0,t.length-1)),t}var o=function(t,e){this.element=e,this.defaultOptions=t,this.showCallback=null,this.hideCallback=null,this.visibleClass="visible",this.hiddenClass="invisible",this.addWidth=!1,this.addHeight=!1,this.once=!1;var n=0,i=0;this.left=function(t){return function(){return t.element.getBoundingClientRect().left}}(this),this.top=function(t){return function(){return t.element.getBoundingClientRect().top}}(this),this.xOffset=function(t){return function(e){var i=n;return t.addWidth&&!e?i+=t.width():e&&!t.addWidth&&(i-=t.width()),i}}(this),this.yOffset=function(t){return function(e){var n=i;return t.addHeight&&!e?n+=t.height():e&&!t.addHeight&&(n-=t.height()),n}}(this),this.width=function(t){return function(){return t.element.offsetWidth}}(this),this.height=function(t){return function(){return t.element.offsetHeight}}(this),this.reset=function(t){return function(){t.removeClass(t.visibleClass),t.removeClass(t.hiddenClass)}}(this),this.addClass=function(t){var e=function(e,n){t.element.classList.contains(e)||(t.element.classList.add(e),"function"==typeof n&&n())},n=function(e,n){e=e.trim();var i=new RegExp("(?:^|\\s)"+e+"(?:(\\s\\w)|$)","ig"),l=t.element.className;i.test(l)||(t.element.className+=" "+e,"function"==typeof n&&n())};return t.element.classList?e:n}(this),this.removeClass=function(t){var e=function(e,n){t.element.classList.contains(e)&&(t.element.classList.remove(e),"function"==typeof n&&n())},n=function(e,n){e=e.trim();var i=new RegExp("(?:^|\\s)"+e+"(?:(\\s\\w)|$)","ig"),l=t.element.className;i.test(l)&&(t.element.className=l.replace(i,"$1").trim(),"function"==typeof n&&n())};return t.element.classList?e:n}(this),this.init=function(t){return function(){var e=t.defaultOptions,l=t.element.getAttribute("data-scroll");e&&(e.toggle&&e.toggle.visible&&(t.visibleClass=e.toggle.visible),e.toggle&&e.toggle.hidden&&(t.hiddenClass=e.toggle.hidden),e.showCallback&&(t.showCallback=e.showCallback),e.hideCallback&&(t.hideCallback=e.hideCallback),e.centerHorizontal===!0&&(n=t.element.offsetWidth/2),e.centerVertical===!0&&(i=t.element.offsetHeight/2),e.offset&&e.offset.x&&(n+=e.offset.x),e.offset&&e.offset.y&&(i+=e.offset.y),e.addWidth&&(t.addWidth=e.addWidth),e.addHeight&&(t.addHeight=e.addHeight),e.once&&(t.once=e.once));var s=l.indexOf("addWidth")>-1,o=l.indexOf("addHeight")>-1,r=l.indexOf("once")>-1;t.addWidth===!1&&s===!0&&(t.addWidth=s),t.addHeight===!1&&o===!0&&(t.addHeight=o),t.once===!1&&r===!0&&(t.once=r),t.showCallback=t.element.hasAttribute("data-scroll-showCallback")?t.element.getAttribute("data-scroll-showCallback"):t.showCallback,t.hideCallback=t.element.hasAttribute("data-scroll-hideCallback")?t.element.getAttribute("data-scroll-hideCallback"):t.hideCallback;var c=l.split("toggle(");if(c.length>1){var a=c[1].split(")")[0].split(",");String.prototype.trim||(String.prototype.trim=function(){return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"")}),t.visibleClass=a[0].trim().replace(".",""),t.hiddenClass=a[1].trim().replace(".","")}l.indexOf("centerHorizontal")>-1&&(n=t.element.offsetWidth/2),l.indexOf("centerVertical")>-1&&(i=t.element.offsetHeight/2);var d=l.split("offset(");if(d.length>1){var u=d[1].split(")")[0].split(",");n+=parseInt(u[0].replace("px","")),i+=parseInt(u[1].replace("px",""))}return t}}(this)};this.scrollElement=window,this.bindElement=document.body,this.callScope=window;var r=[],c=[],a={left:-1,top:-1},d=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(t){setTimeout(t,1e3/60)},u=!1,f=function(t){return function(e,n,i){return void 0!=n&&null!=n?t.bindElement=n:t.bindElement=document.body,void 0!=i&&null!=i?t.scrollElement=i:t.scrollElement=window,t.bind(t.bindElement.querySelectorAll("[data-scroll]")),t}}(this);this.bind=function(e){return function(n){n instanceof HTMLElement&&(n=[n]);var l=[].slice.call(n);return l=l.map(function(e){var n=new o(t,e);return n.init()}),r=r.concat(l),r.length>0&&0==u?(u=!0,i()):u=!1,e}}(this),this.triggerFor=function(){return function(t){var e=null;return r.each(function(n){n.element==t&&(e=n)}),e}}(this),this.destroy=function(t){return function(e){return r.each(function(t,n){t.element==e&&r.splice(n,1)}),t}}(this),this.destroyAll=function(t){return function(){return r=[],t}}(this),this.reset=function(t){return function(e){var n=t.triggerFor(e);if(null!=n){n.reset();var i=r.indexOf(n);i>-1&&r.splice(i,1)}return t}}(this),this.resetAll=function(t){return function(){return r.each(function(t){t.reset()}),r=[],t}}(this),this.attach=function(t){return function(e){return c.push(e),u||(u=!0,i()),t}}(this),this.detach=function(t){return function(e){var n=c.indexOf(e);return n>-1&&c.splice(n,1),t}}(this);var h=this;return this.scrollDidChange=function(t){return function(){var e=t.scrollElement.innerWidth||t.scrollElement.offsetWidth,n=t.scrollElement.innerHeight||t.scrollElement.offsetHeight,i=t.bindElement.scrollTop?t.bindElement.scrollTop:document.documentElement.scrollTop,s=t.bindElement.scrollLeft?t.bindElement.scrollLeft:document.documentElement.scrollLeft,o=[];r.each(function(t){var r=t.left(),c=t.top();a.left>s?r-=t.xOffset(!0):a.lefti?c-=t.yOffset(!0):a.topr&&r>=0&&n>c&&c>=0?(t.addClass(t.visibleClass,function(){t.showCallback&&l(t,t.showCallback)}),t.removeClass(t.hiddenClass),t.once&&o.push(t)):(t.addClass(t.hiddenClass),t.removeClass(t.visibleClass,function(){t.hideCallback&&l(t,t.hideCallback)}))}),c.each(function(l){l.call(t,s,i,e,n)}),o.each(function(t){var e=r.indexOf(t);e>-1&&r.splice(e,1)}),a.left=s,a.top=i}}(this),Array.prototype.each=function(t){for(var e=this.length,n=0;e>n;n++){var i=this[n];i&&t(i,n)}},f(t,e,n)}}); 3 | -------------------------------------------------------------------------------- /js/ToyAlgorithm.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Toy Algorithm - Object constructor function 3 | * @param _parentElement -- the HTML element in which to draw the visualization 4 | * @param _data -- the data to use in drawing th element 5 | */ 6 | 7 | ToyAlgorithm = function(_parentElement, _data, _selections, _width, _height) { 8 | this.parentElement = _parentElement; 9 | this.data = _data; 10 | this.selections = _selections; 11 | this.width= _width; 12 | this.height=_height; 13 | this.initVis(this.width, this.height); 14 | } 15 | 16 | 17 | ToyAlgorithm.prototype.initVis = function(width, height) { 18 | var vis = this; 19 | 20 | vis.margin = { 21 | top: 40, 22 | right: 60, 23 | bottom: 60, 24 | left: 20 25 | }; 26 | 27 | //set the height and width to be dynamic to the viewport at some point 28 | vis.width = width- vis.margin.left - vis.margin.right, 29 | vis.height = height - vis.margin.top - vis.margin.bottom; 30 | 31 | // SVG drawing area 32 | vis.svg = d3.select("#" + vis.parentElement).append("svg") 33 | .attr("width", vis.width + vis.margin.left + vis.margin.right) 34 | .attr("height", vis.height + vis.margin.top + vis.margin.bottom) 35 | .append("g") 36 | .attr("transform", "translate(" + vis.margin.left + "," + vis.margin.top + ")"); 37 | 38 | // Scales and axes 39 | vis.x = d3.scaleLinear() 40 | .range([0, vis.width]) 41 | .domain(d3.extent(vis.data, function(d) { 42 | return d.x_position; 43 | })); 44 | 45 | vis.y = d3.scaleLinear() 46 | .range([vis.height, 0]) 47 | .domain(d3.extent(vis.data, function(d) { 48 | return d.y_position; 49 | })); 50 | 51 | vis.xAxis = d3.axisBottom() 52 | .scale(vis.x); 53 | 54 | vis.yAxis = d3.axisLeft() 55 | .scale(vis.y); 56 | 57 | vis.svg.append("g") 58 | .attr("class", "x-axis axis") 59 | .attr("transform", "translate(0," + vis.height + ")"); 60 | 61 | vis.svg.append("g") 62 | .attr("class", "y-axis axis"); 63 | 64 | vis.wrangleData(vis.selections); 65 | } 66 | 67 | ToyAlgorithm.prototype.wrangleData = function(selections) { 68 | //currently empty function. maybe we'll use this to create the actual regression? 69 | /* 70 | We could create an actual regression function with coefficients and for each house factor in the variables that have been selected into the regression to generate a probability of fire and then set on fire if the probability is above a threshold 71 | */ 72 | var vis = this; 73 | 74 | regressionEq(); 75 | 76 | function regressionEq() { 77 | /* for (var i=0; i= 1) { 106 | vis.data[i].Fire = .99; 107 | } 108 | if (vis.data[i].Fire <= 0) { 109 | vis.data[i].Fire = 0; 110 | } 111 | } 112 | } 113 | 114 | 115 | 116 | var vis = this; 117 | vis.updateVis(); 118 | } 119 | 120 | ToyAlgorithm.prototype.updateVis = function() { 121 | var vis = this; 122 | 123 | var formatPercent = d3.format(".000%"); 124 | var formatMoney = d3.format("($.2s"); 125 | var formatArea = d3.format(",.2r"); 126 | 127 | vis.tip = d3.tip() 128 | .attr('class', 'd3-tip popover toy_algo_tip') 129 | .html(function(d) { 130 | return d.Address + "
" + 131 | d.borough + "
" + 132 | d.Building_Age + " years old" + "
" + 133 | formatArea(d.Square_Footage) + " sq ft" + "
" + 134 | d.Number_Occupants + " occupants" + "
" + 135 | formatMoney(d.assesstot) + " value" + "
" + 136 | d.Height + " floors" + "
" + 137 | "" + "Fire Risk: " + formatPercent(d.Fire) + ""; 138 | 139 | }); 140 | 141 | vis.svg.call(vis.tip); 142 | 143 | var houses = vis.svg.selectAll("rect") 144 | .data(vis.data); 145 | 146 | houses.enter().append("rect") 147 | .attr("class", "rect") 148 | .on("mouseover", vis.tip.show) 149 | .on("mouseout", vis.tip.hide) 150 | 151 | 152 | .merge(houses) 153 | .transition() 154 | .duration(1000) 155 | .attr("fill", "var(--houses-color)") 156 | /*.attr("fill", "#fff") 157 | .attr("stroke-width", "4")*/ 158 | .attr("width", function(){ 159 | if (window.innerWidth>700) { 160 | return 40; 161 | } 162 | else if (window.innerWidth<=700){ 163 | return 20; 164 | } 165 | }) 166 | .attr("height", function(){ 167 | if (window.innerWidth>700) { 168 | return 40; 169 | } 170 | else if (window.innerWidth<=700){ 171 | return 20; 172 | } 173 | }) 174 | 175 | .attr("x", function(d) { 176 | return vis.x(d.x_position) ; 177 | }) 178 | .attr("y", function(d) { 179 | return vis.y(d.y_position); 180 | }); 181 | 182 | houses.exit().remove(); 183 | 184 | var fires = vis.svg.selectAll("text") 185 | .data(vis.data); 186 | 187 | fires.enter().append("text") 188 | .merge(fires) 189 | .transition() 190 | .duration(1000) 191 | .attr("class", "fa") 192 | .text(function(d) { 193 | if (d.Fire >= .3) { 194 | return '\uf06d'; 195 | } 196 | }) 197 | .attr("fill", "#EF6C00") 198 | .attr('font-size', function(d) { 199 | if (window.innerWidth>700) { 200 | return '40px'; 201 | } 202 | else if (window.innerWidth<=700){ 203 | return '20px'; 204 | } 205 | }) 206 | .attr("x", function(d) { 207 | if (window.innerWidth>700) { 208 | return vis.x(d.x_position)+20; 209 | } 210 | else if (window.innerWidth<=700){ 211 | return vis.x(d.x_position)+10; 212 | } 213 | 214 | }) 215 | .attr("y", function(d) { 216 | if (window.innerWidth>700) { 217 | return vis.y(d.y_position)+20; 218 | } 219 | else if (window.innerWidth<=700){ 220 | return vis.y(d.y_position)+10; 221 | } 222 | }); 223 | 224 | fires.exit().remove(); 225 | 226 | /* svg.append('text') 227 | .attr('x', 15) 228 | .attr('y', -17) 229 | .attr('fill', 'black') 230 | .attr("class", "fa") 231 | .attr('font-size', function (d) { return '20px' }) 232 | .text(function (d) { return '\uf2b9' }); */ 233 | 234 | } 235 | 236 | ToyAlgorithm.prototype.resizeSVG =function (width, height) { 237 | 238 | var vis = this; 239 | 240 | vis.svg.select('svg') 241 | .transition() 242 | .duration(100) 243 | .attr("width", width) 244 | .attr("height", height); 245 | 246 | 247 | vis.margin = { 248 | top: 40, 249 | right: 60, 250 | bottom: 60, 251 | left: 20 252 | }; 253 | 254 | 255 | vis.width = width- vis.margin.left - vis.margin.right, 256 | vis.height = height - vis.margin.top - vis.margin.bottom; 257 | 258 | vis.x = d3.scaleLinear() 259 | .range([0, vis.width]) 260 | .domain(d3.extent(vis.data, function(d) { 261 | return d.x_position; 262 | })); 263 | 264 | vis.y = d3.scaleLinear() 265 | .range([vis.height, 0]) 266 | .domain(d3.extent(vis.data, function(d) { 267 | return d.y_position; 268 | })); 269 | 270 | vis.updateVis(); 271 | 272 | 273 | } 274 | -------------------------------------------------------------------------------- /js/_build.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | (function () { 4 | 5 | //import("pathformer.js"); 6 | //import("vivus.js"); 7 | 8 | if (typeof define === 'function' && define.amd) { 9 | // AMD. Register as an anonymous module. 10 | define([], function() { 11 | return Vivus; 12 | }); 13 | } else if (typeof exports === 'object') { 14 | // Node. Does not work with strict CommonJS, but 15 | // only CommonJS-like environments that support module.exports, 16 | // like Node. 17 | module.exports = Vivus; 18 | } else { 19 | // Browser globals 20 | window.Vivus = Vivus; 21 | } 22 | 23 | }()); 24 | -------------------------------------------------------------------------------- /js/anijs-min.js: -------------------------------------------------------------------------------- 1 | !function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("AniJS-RWWD");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=function(b){var c="data-anijs",d="default",e="|",f="$",g="if",h="on",i=["do","after","before","to"],j="(\\s+|^)",k="(\\s+|$)",l="animationend",m="transitionend",n="target";b={rootDOMTravelScope:{},notifierCollection:{},init:function(){o._t={};var a=o._a();b.registerHelper(d,a),o._u=d,b.rootDOMTravelScope=document,b.Parser=o.Parser,o._v=o._p(),o._w=""},setDOMRootTravelScope:function(a){var c,d=document;try{"document"===a?c=d:(c=d.querySelector(a),c||(c=d))}catch(e){c=d}b.rootDOMTravelScope=c},run:function(){var a=[],d={};b.purgeAll(),b.notifierCollection={},a=o._o(b.rootDOMTravelScope);var e,f=a.length,g=0;for(g;f>g;g++)e=a[g],d=o._n(e.getAttribute(c)),o._c(e,d);var h=b.getNotifier("AniJSNotifier");h&&h.dispatchEvent("onRunFinished")},createAnimation:function(a,b){var c=b||"";o._c(c,a)},getHelper:function(a){var b=o._t;return b[a]||b[d]},registerHelper:function(a,b){o._t[a]=b},purge:function(a){if(a&&""!==a&&" "!==a){var c=document.querySelectorAll(a),d=c.length,e=0;for(e;d>e;e++)b.EventSystem.purgeEventTarget(c[e])}},purgeAll:function(){b.EventSystem.purgeAll()},purgeEventTarget:function(a){b.EventSystem.purgeEventTarget(a)},setClassNamesWhenAnim:function(a){o._w=" "+a},createNotifier:function(){return b.EventSystem.createEventTarget()},registerNotifier:function(a){var c=b.notifierCollection;return a.id&&a.value&&b.EventSystem.isEventTarget(a.value)?(c[a.id]=a.value,1):""},getNotifier:function(a){return b.notifierCollection[a]}};var o={};return o._a=function(){var a={removeAnim:function(a,b){a.target&&a.type&&b.nodeHelper.removeClass(a.target,b.behavior)},holdAnimClass:function(){},fireOnce:function(a,b){b.eventSystem.removeEventListenerHelper(b.eventTarget,b.event.type,b.listener)},emit:function(a,c,d){var e=d[0]||null,f="";if(null!==e){e=e.split("."),e.length>1?(f=e[0],e=e[1]):(f="",e=e[0]);var g=b.getNotifier(f)||null;null!==g&&g.dispatchEvent(e)}c.hasRunned||c.run()}};return a},o._b=function(){return new Parser},o._c=function(a,b){var c,d,e,f,g=b.length,h=0;for(h;g>h;h++)c=b[h],e=c.after,d=c.before,f=c.behavior,e&&(c.after=o.Parser.parseDoDefinition(e)),d&&(c.before=o.Parser.parseDoDefinition(d)),f&&(c.behavior=o.Parser.parseDoDefinition(f)),o._d(a,c)},o._d=function(a,c){var d,e=o._e(c),f=o._f(a,c);if(c.after&&o.Util._x(c.after)&&(d=c.after[0]),""!==e){var g,h=f.length,i=0;for(i;h>i;i++)if(g=f[i],b.EventSystem.isEventTarget(g)){var j=function(e){var f=o._g(a,c,e),g=o._h(c),h=o._j(a,c),i=o._i(a,c);""!==o._w&&(o.Util._x(g)||(g+=o._w));var k={behaviorTargetList:f,nodeHelper:o.NodeHelper,animationEndEvent:o._v,behavior:g,after:i,eventSystem:b.EventSystem,eventTarget:e.currentTarget,afterFunctionName:d,dataAniJSOwner:a,listener:j,event:e,before:h},l=new b.AnimationContext(k);l.runAll(k)};b.EventSystem.addEventListenerHelper(g,e,j,!1),b.EventSystem.registerEventHandle(g,e,j)}}},o._e=function(a){var b="",c=a.event||b;return c===l?c=o._p():c===m&&(c=o._q()),c},o._f=function(c,d){var e,f=c,g=[f],h=b.rootDOMTravelScope;if(d.eventTarget)if(e=o._notifierHelper(d.eventTarget),e.length>0)g=e;else if("document"===d.eventTarget)g=[document];else if("window"===d.eventTarget)g=[a];else if(d.eventTarget.split)try{g=h.querySelectorAll(d.eventTarget)}catch(i){g=[]}return g},o._g=function(a,c,d){var e=a,g=[e],h=b.rootDOMTravelScope,i=c.behaviorTarget;if(i)if(o.Util._x(i)){var j=this._y(a,c,i);j&&o.Util.isFunction(j[0])&&(g=j[0](d,{dataAniJSOwner:a},o._z(j)))}else if(i===n&&d.currentTarget)g=[d.currentTarget];else{i=i.split(f).join(",");try{g=h.querySelectorAll(i)}catch(k){g=[]}}return g},o._h=function(a){return this._y({},a,a.behavior)},o._i=function(a,b){var c=b.after;return o.Util._x(c)?this._y(a,b,c):o._k(a,b,c)},o._j=function(a,b){var c=b.before;return o.Util._x(c)?this._y(a,b,c):o._k(a,b,c)},o._y=function(a,b,c){var d,e=c||"";return o.Util._x(e)&&(d=o._k(a,b,e[0]),d?e[0]=d:e=e.join(" ")),e},o._k=function(a,b,c){var d=c||"",e=o._l(b);if(d&&!o.Util.isFunction(d)){var f=o._t,g=f[e];d=g&&o.Util.isFunction(g[d])?g[d]:!1}return d},o._l=function(a){var b=a.helper||o._u;return b},o._notifierHelper=function(a){{var c=[];b.notifierCollection}if(a)if(a.id&&b.EventSystem.isEventTarget(a.value))c.push(a.value),b.registerNotifier(a);else if(a.split){notifierIDList=a.split("$");var d,e=notifierIDList.length,f=1;for(f;e>f;f++)if(d=notifierIDList[f],d&&" "!==d){d=d.trim();var g=b.getNotifier(d);g||(g=b.EventSystem.createEventTarget(),b.registerNotifier({id:d,value:g})),c.push(g)}}return c},o._z=function(a){for(var b=[],c=a.length;c-->1;)b[c-1]=a[c];return b},o._n=function(a){return o.Parser.parse(a)},o._o=function(a){var b="["+c+"]";return a.querySelectorAll(b)},o._p=function(){var a=o._r(),b=[l,"oAnimationEnd",l,"webkitAnimationEnd"];return b[a]},o._q=function(){var a=o._r(),b=[m,"oTransitionEnd",m,"webkitTransitionEnd"];return b[a]},o._r=function(){for(var a=document.createElement("fe"),b="Animation",c=["animation","O"+b,"Moz"+b,"webkit"+b],d=0;dh;h++)d={behaviorTargetList:[f[h]],nodeHelper:c.nodeHelper,animationEndEvent:c.animationEndEvent,behavior:c.behavior,after:c.after,eventSystem:c.eventSystem,eventTarget:c.eventTarget,afterFunctionName:c.afterFunctionName,dataAniJSOwner:c.dataAniJSOwner,listener:c.listener,event:j},a=new b.AnimationContext(d),i?o.Util.isFunction(i)?i(j,a):o.Util._x(i)&&i[0](j,a,o._z(i)):a.run()},c.run=function(){var a=c,b=a.behavior,d=a.behaviorTargetList[0];c.hasRunned=1,o.Util._x(b)?a.doFunctionAction(d,b):a.doDefaultAction(d,b)},c.init(a)},o.Parser={parse:function(a){return this.parseDeclaration(a)},parseDeclaration:function(a){var b,c,d=[];b=a.split(";");var e=b.length,f=0;for(f;e>f;f++)c=this.parseSentence(b[f]),d.push(c);return d},parseSentence:function(a){var b,c,d={};b=a.split(",");var e=b.length,f=0;for(f;e>f;f++)c=this.parseDefinition(b[f]),d[c.key]=c.value;return d},parseDefinition:function(a){var b,c,d,e={},f="event",j="eventTarget",k=["behavior","after","before","behaviorTarget"];if(b=a.split(":"),b.length>1){if(c=b[0].trim(),b.length>2?(d=b.slice(1),d=d.join(":"),d=d.trim()):d=b[1].trim(),e.value=d,c===g)c=f;else if(c===h)c=j;else for(var l=i.length-1;l>=0;l--)c===i[l]&&(c=k[l],"after"!==c&&"before"!==c||"$"===d[0]||(d="$"+d),d=this.parseDoDefinition(d));e.key=c,e.value=d}return e},parseDoDefinition:function(a){var b=/^\$(\w+)\s*/g,c=b.exec(a),d="",f=1;if(null!==c){d=c[1],doDefinitionArray=a.split(c[0])[1],doDefinitionArray=null!==doDefinitionArray?doDefinitionArray.split(e):[],a=[],a[0]=d;for(var g=0;gc;++c)b[c]&&!new RegExp(j+b[c]+k).test(a.className)&&(a.className=""===a.className?b[c]:a.className.trim()+" "+b[c])},removeClass:function(a,b){b instanceof Array||(b=b.split(" "));for(var c=0,d=b.length;d>c;++c)a.className=a.className.replace(new RegExp(j+b[c]+k)," ").trim()},hasClass:function(a,b){return b&&new RegExp(j+b+k).test(a.className)}},o.Util={isFunction:function(a){return!!(a&&a.constructor&&a.call&&a.apply)},_x:function(a){return Array.isArray(a)}},b.EventSystem={eventCollection:{},eventIdCounter:0,isEventTarget:function(a){return a.addEventListener?1:0},createEventTarget:function(){return new b.EventTarget},addEventListenerHelper:function(a,b,c){a.addEventListener(b,c,!1)},removeEventListenerHelper:function(a,b,c){a&&a.removeEventListener(b,c)},purgeAll:function(){var a,b,c=this,d=c.eventCollection,e=Object.keys(d),f=e.length,g=0;for(g;f>g;g++)a=e[g],b=d[a],b&&b.handleCollection&&b.handleCollection.length>0&&c.purgeEventTarget(b.handleCollection[0].element),delete d[a]},purgeAllNodes:function(a){var b=a.querySelectorAll("*");size=b.length;for(var c=size-1;c>=0;c--)this.purgeEventTarget(b[c])},purgeEventTarget:function(a){var b,c=this,d=a._aniJSEventID;if(d){b=c.eventCollection[d].handleCollection;var e,f=b.length,g=0;for(g;f>g;g++)e=b[g],c.removeEventListenerHelper(a,e.eventType,e.listener);c.eventCollection[d]=a._aniJSEventID=null,delete c.eventCollection[d],delete a._aniJSEventID}},registerEventHandle:function(a,b,c){var d=this,e=a._aniJSEventID,f=d.eventCollection,g={eventType:b,listener:c,element:a};if(e)f[e].handleCollection.push(g);else{var h={handleCollection:[g]};f[++d.eventIdCounter]=h,a._aniJSEventID=d.eventIdCounter}}},b.EventTarget=function(){this._listeners={}},b.EventTarget.prototype={constructor:b.EventTarget,addEventListener:function(a,b){var c=this;"undefined"==typeof c._listeners[a]&&(c._listeners[a]=[]),c._listeners[a].push(b)},dispatchEvent:function(a){var b=this;if("string"==typeof a&&(a={type:a}),a.target||(a.target=b),!a.type)throw new Error("error");if(this._listeners[a.type]instanceof Array)for(var c=b._listeners[a.type],d=0,e=c.length;e>d;d++)c[d].call(b,a)},removeEventListener:function(a,b){var c=this;if(c._listeners[a]instanceof Array)for(var d=c._listeners[a],e=0,f=d.length;f>e;e++)if(d[e]===b){d.splice(e,1);break}}},b}(c||{});return c.init(),c.run(),"function"==typeof define&&define.amd&&define("anijs",[],function(){return c}),"undefined"==typeof b&&(a.AniJS=c),c}); -------------------------------------------------------------------------------- /js/d3-tip.js: -------------------------------------------------------------------------------- 1 | // d3.tip 2 | // Copyright (c) 2013 Justin Palmer 3 | // ES6 / D3 v4 Adaption Copyright (c) 2016 Constantin Gavrilete 4 | // Removal of ES6 for D3 v4 Adaption Copyright (c) 2016 David Gotz 5 | // 6 | // Tooltips for d3.js SVG visualizations 7 | 8 | d3.functor = function functor(v) { 9 | return typeof v === "function" ? v : function() { 10 | return v; 11 | }; 12 | }; 13 | 14 | d3.tip = function() { 15 | 16 | var direction = d3_tip_direction, 17 | offset = d3_tip_offset, 18 | html = d3_tip_html, 19 | node = initNode(), 20 | svg = null, 21 | point = null, 22 | target = null 23 | 24 | function tip(vis) { 25 | svg = getSVGNode(vis) 26 | point = svg.createSVGPoint() 27 | document.body.appendChild(node) 28 | } 29 | 30 | // Public - show the tooltip on the screen 31 | // 32 | // Returns a tip 33 | tip.show = function() { 34 | var args = Array.prototype.slice.call(arguments) 35 | if(args[args.length - 1] instanceof SVGElement) target = args.pop() 36 | 37 | var content = html.apply(this, args), 38 | poffset = offset.apply(this, args), 39 | dir = direction.apply(this, args), 40 | nodel = getNodeEl(), 41 | i = directions.length, 42 | coords, 43 | scrollTop = document.documentElement.scrollTop || document.body.scrollTop, 44 | scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft 45 | 46 | nodel.html(content) 47 | .style('position', 'absolute') 48 | .style('opacity', 1) 49 | .style('pointer-events', 'all') 50 | 51 | while(i--) nodel.classed(directions[i], false) 52 | coords = direction_callbacks[dir].apply(this) 53 | nodel.classed(dir, true) 54 | .style('top', (coords.top + poffset[0]) + scrollTop + 'px') 55 | .style('left', (coords.left + poffset[1]) + scrollLeft + 'px') 56 | 57 | return tip 58 | } 59 | 60 | // Public - hide the tooltip 61 | // 62 | // Returns a tip 63 | tip.hide = function() { 64 | var nodel = getNodeEl() 65 | nodel 66 | .style('opacity', 0) 67 | .style('pointer-events', 'none') 68 | return tip 69 | } 70 | 71 | // Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value. 72 | // 73 | // n - name of the attribute 74 | // v - value of the attribute 75 | // 76 | // Returns tip or attribute value 77 | tip.attr = function(n, v) { 78 | if (arguments.length < 2 && typeof n === 'string') { 79 | return getNodeEl().attr(n) 80 | } else { 81 | var args = Array.prototype.slice.call(arguments) 82 | d3.selection.prototype.attr.apply(getNodeEl(), args) 83 | } 84 | 85 | return tip 86 | } 87 | 88 | // Public: Proxy style calls to the d3 tip container. Sets or gets a style value. 89 | // 90 | // n - name of the property 91 | // v - value of the property 92 | // 93 | // Returns tip or style property value 94 | tip.style = function(n, v) { 95 | // debugger; 96 | if (arguments.length < 2 && typeof n === 'string') { 97 | return getNodeEl().style(n) 98 | } else { 99 | var args = Array.prototype.slice.call(arguments); 100 | if (args.length === 1) { 101 | var styles = args[0]; 102 | Object.keys(styles).forEach(function(key) { 103 | return d3.selection.prototype.style.apply(getNodeEl(), [key, styles[key]]); 104 | }); 105 | } 106 | } 107 | 108 | return tip 109 | } 110 | 111 | // Public: Set or get the direction of the tooltip 112 | // 113 | // v - One of n(north), s(south), e(east), or w(west), nw(northwest), 114 | // sw(southwest), ne(northeast) or se(southeast) 115 | // 116 | // Returns tip or direction 117 | tip.direction = function(v) { 118 | if (!arguments.length) return direction 119 | direction = v == null ? v : d3.functor(v) 120 | 121 | return tip 122 | } 123 | 124 | // Public: Sets or gets the offset of the tip 125 | // 126 | // v - Array of [x, y] offset 127 | // 128 | // Returns offset or 129 | tip.offset = function(v) { 130 | if (!arguments.length) return offset 131 | offset = v == null ? v : d3.functor(v) 132 | 133 | return tip 134 | } 135 | 136 | // Public: sets or gets the html value of the tooltip 137 | // 138 | // v - String value of the tip 139 | // 140 | // Returns html value or tip 141 | tip.html = function(v) { 142 | if (!arguments.length) return html 143 | html = v == null ? v : d3.functor(v) 144 | 145 | return tip 146 | } 147 | 148 | // Public: destroys the tooltip and removes it from the DOM 149 | // 150 | // Returns a tip 151 | tip.destroy = function() { 152 | if(node) { 153 | getNodeEl().remove(); 154 | node = null; 155 | } 156 | return tip; 157 | } 158 | 159 | function d3_tip_direction() { return 'n' } 160 | function d3_tip_offset() { return [0, 0] } 161 | function d3_tip_html() { return ' ' } 162 | 163 | var direction_callbacks = { 164 | n: direction_n, 165 | s: direction_s, 166 | e: direction_e, 167 | w: direction_w, 168 | nw: direction_nw, 169 | ne: direction_ne, 170 | sw: direction_sw, 171 | se: direction_se 172 | }; 173 | 174 | var directions = Object.keys(direction_callbacks); 175 | 176 | function direction_n() { 177 | var bbox = getScreenBBox() 178 | return { 179 | top: bbox.n.y - node.offsetHeight, 180 | left: bbox.n.x - node.offsetWidth / 2 181 | } 182 | } 183 | 184 | function direction_s() { 185 | var bbox = getScreenBBox() 186 | return { 187 | top: bbox.s.y, 188 | left: bbox.s.x - node.offsetWidth / 2 189 | } 190 | } 191 | 192 | function direction_e() { 193 | var bbox = getScreenBBox() 194 | return { 195 | top: bbox.e.y - node.offsetHeight / 2, 196 | left: bbox.e.x 197 | } 198 | } 199 | 200 | function direction_w() { 201 | var bbox = getScreenBBox() 202 | return { 203 | top: bbox.w.y - node.offsetHeight / 2, 204 | left: bbox.w.x - node.offsetWidth 205 | } 206 | } 207 | 208 | function direction_nw() { 209 | var bbox = getScreenBBox() 210 | return { 211 | top: bbox.nw.y - node.offsetHeight, 212 | left: bbox.nw.x - node.offsetWidth 213 | } 214 | } 215 | 216 | function direction_ne() { 217 | var bbox = getScreenBBox() 218 | return { 219 | top: bbox.ne.y - node.offsetHeight, 220 | left: bbox.ne.x 221 | } 222 | } 223 | 224 | function direction_sw() { 225 | var bbox = getScreenBBox() 226 | return { 227 | top: bbox.sw.y, 228 | left: bbox.sw.x - node.offsetWidth 229 | } 230 | } 231 | 232 | function direction_se() { 233 | var bbox = getScreenBBox() 234 | return { 235 | top: bbox.se.y, 236 | left: bbox.e.x 237 | } 238 | } 239 | 240 | function initNode() { 241 | var node = d3.select(document.createElement('div')) 242 | node 243 | .style('position', 'absolute') 244 | .style('top', '0') 245 | .style('opacity', '0') 246 | .style('pointer-events', 'none') 247 | .style('box-sizing', 'border-box') 248 | 249 | return node.node() 250 | } 251 | 252 | function getSVGNode(el) { 253 | el = el.node() 254 | if(el.tagName.toLowerCase() === 'svg') 255 | return el 256 | 257 | return el.ownerSVGElement 258 | } 259 | 260 | function getNodeEl() { 261 | if(node === null) { 262 | node = initNode(); 263 | // re-add node to DOM 264 | document.body.appendChild(node); 265 | }; 266 | return d3.select(node); 267 | } 268 | 269 | // Private - gets the screen coordinates of a shape 270 | // 271 | // Given a shape on the screen, will return an SVGPoint for the directions 272 | // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest), 273 | // sw(southwest). 274 | // 275 | // +-+-+ 276 | // | | 277 | // + + 278 | // | | 279 | // +-+-+ 280 | // 281 | // Returns an Object {n, s, e, w, nw, sw, ne, se} 282 | function getScreenBBox() { 283 | var targetel = target || d3.event.target; 284 | 285 | while ('undefined' === typeof targetel.getScreenCTM && 'undefined' === targetel.parentNode) { 286 | targetel = targetel.parentNode; 287 | } 288 | 289 | var bbox = {}, 290 | matrix = targetel.getScreenCTM(), 291 | tbbox = targetel.getBBox(), 292 | width = tbbox.width, 293 | height = tbbox.height, 294 | x = tbbox.x, 295 | y = tbbox.y 296 | 297 | point.x = x 298 | point.y = y 299 | bbox.nw = point.matrixTransform(matrix) 300 | point.x += width 301 | bbox.ne = point.matrixTransform(matrix) 302 | point.y += height 303 | bbox.se = point.matrixTransform(matrix) 304 | point.x -= width 305 | bbox.sw = point.matrixTransform(matrix) 306 | point.y -= height / 2 307 | bbox.w = point.matrixTransform(matrix) 308 | point.x += width 309 | bbox.e = point.matrixTransform(matrix) 310 | point.x -= width / 2 311 | point.y -= height / 2 312 | bbox.n = point.matrixTransform(matrix) 313 | point.y += height 314 | bbox.s = point.matrixTransform(matrix) 315 | 316 | return bbox 317 | } 318 | 319 | return tip 320 | }; 321 | -------------------------------------------------------------------------------- /js/defaults.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Defaults & options 3 | * @returns {object} Typed defaults & options 4 | * @public 5 | */ 6 | 7 | const defaults = { 8 | /** 9 | * @property {array} strings strings to be typed 10 | * @property {string} stringsElement ID of element containing string children 11 | */ 12 | strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'], 13 | stringsElement: null, 14 | 15 | /** 16 | * @property {number} typeSpeed type speed in milliseconds 17 | */ 18 | typeSpeed: 0, 19 | 20 | /** 21 | * @property {number} startDelay time before typing starts in milliseconds 22 | */ 23 | startDelay: 0, 24 | 25 | /** 26 | * @property {number} backSpeed backspacing speed in milliseconds 27 | */ 28 | backSpeed: 0, 29 | 30 | /** 31 | * @property {boolean} smartBackspace only backspace what doesn't match the previous string 32 | */ 33 | smartBackspace: true, 34 | 35 | /** 36 | * @property {boolean} shuffle shuffle the strings 37 | */ 38 | shuffle: false, 39 | 40 | /** 41 | * @property {number} backDelay time before backspacing in milliseconds 42 | */ 43 | backDelay: 700, 44 | 45 | /** 46 | * @property {boolean} fadeOut Fade out instead of backspace 47 | * @property {string} fadeOutClass css class for fade animation 48 | * @property {boolean} fadeOutDelay Fade out delay in milliseconds 49 | */ 50 | fadeOut: false, 51 | fadeOutClass: 'typed-fade-out', 52 | fadeOutDelay: 500, 53 | 54 | /** 55 | * @property {boolean} loop loop strings 56 | * @property {number} loopCount amount of loops 57 | */ 58 | loop: false, 59 | loopCount: Infinity, 60 | 61 | /** 62 | * @property {boolean} showCursor show cursor 63 | * @property {string} cursorChar character for cursor 64 | * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML 65 | */ 66 | showCursor: true, 67 | cursorChar: '|', 68 | autoInsertCss: true, 69 | 70 | /** 71 | * @property {string} attr attribute for typing 72 | * Ex: input placeholder, value, or just HTML text 73 | */ 74 | attr: null, 75 | 76 | /** 77 | * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input 78 | */ 79 | bindInputFocusEvents: false, 80 | 81 | /** 82 | * @property {string} contentType 'html' or 'null' for plaintext 83 | */ 84 | contentType: 'html', 85 | 86 | /** 87 | * All typing is complete 88 | * @param {Typed} self 89 | */ 90 | onComplete: (self) => {}, 91 | 92 | /** 93 | * Before each string is typed 94 | * @param {number} arrayPos 95 | * @param {Typed} self 96 | */ 97 | preStringTyped: (arrayPos, self) => {}, 98 | 99 | /** 100 | * After each string is typed 101 | * @param {number} arrayPos 102 | * @param {Typed} self 103 | */ 104 | onStringTyped: (arrayPos, self) => {}, 105 | 106 | /** 107 | * During looping, after last string is typed 108 | * @param {Typed} self 109 | */ 110 | onLastStringBackspaced: (self) => {}, 111 | 112 | /** 113 | * Typing has been stopped 114 | * @param {number} arrayPos 115 | * @param {Typed} self 116 | */ 117 | onTypingPaused: (arrayPos, self) => {}, 118 | 119 | /** 120 | * Typing has been started after being stopped 121 | * @param {number} arrayPos 122 | * @param {Typed} self 123 | */ 124 | onTypingResumed: (arrayPos, self) => {}, 125 | 126 | /** 127 | * After reset 128 | * @param {Typed} self 129 | */ 130 | onReset: (self) => {}, 131 | 132 | /** 133 | * After stop 134 | * @param {number} arrayPos 135 | * @param {Typed} self 136 | */ 137 | onStop: (arrayPos, self) => {}, 138 | 139 | /** 140 | * After start 141 | * @param {number} arrayPos 142 | * @param {Typed} self 143 | */ 144 | onStart: (arrayPos, self) => {}, 145 | 146 | /** 147 | * After destroy 148 | * @param {Typed} self 149 | */ 150 | onDestroy: (self) => {} 151 | }; 152 | 153 | export default defaults; 154 | -------------------------------------------------------------------------------- /js/html-parser.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * TODO: These methods can probably be combined somehow 4 | * Parse HTML tags & HTML Characters 5 | */ 6 | 7 | export default class HTMLParser { 8 | /** 9 | * Type HTML tags & HTML Characters 10 | * @param {string} curString Current string 11 | * @param {number} curStrPos Position in current string 12 | * @param {Typed} self instance of Typed 13 | * @returns {number} a new string position 14 | * @private 15 | */ 16 | 17 | typeHtmlChars(curString, curStrPos, self) { 18 | if (self.contentType !== 'html') return curStrPos; 19 | const curChar = curString.substr(curStrPos).charAt(0); 20 | if (curChar === '<' || curChar === '&') { 21 | let endTag = ''; 22 | if (curChar === '<') { 23 | endTag = '>'; 24 | } else { 25 | endTag = ';'; 26 | } 27 | while (curString.substr(curStrPos + 1).charAt(0) !== endTag) { 28 | curStrPos++; 29 | if (curStrPos + 1 > curString.length) { 30 | break; 31 | } 32 | } 33 | curStrPos++; 34 | } 35 | return curStrPos; 36 | } 37 | 38 | /** 39 | * Backspace HTML tags and HTML Characters 40 | * @param {string} curString Current string 41 | * @param {number} curStrPos Position in current string 42 | * @param {Typed} self instance of Typed 43 | * @returns {number} a new string position 44 | * @private 45 | */ 46 | backSpaceHtmlChars(curString, curStrPos, self) { 47 | if (self.contentType !== 'html') return curStrPos; 48 | const curChar = curString.substr(curStrPos).charAt(0); 49 | if (curChar === '>' || curChar === ';') { 50 | let endTag = ''; 51 | if (curChar === '>') { 52 | endTag = '<'; 53 | } else { 54 | endTag = '&'; 55 | } 56 | while (curString.substr(curStrPos - 1).charAt(0) !== endTag) { 57 | curStrPos--; 58 | if (curStrPos < 0) { 59 | break; 60 | } 61 | } 62 | curStrPos--; 63 | } 64 | return curStrPos; 65 | } 66 | } 67 | 68 | export let htmlParser = new HTMLParser(); 69 | -------------------------------------------------------------------------------- /js/initializer.js: -------------------------------------------------------------------------------- 1 | import defaults from './defaults.js'; 2 | /** 3 | * Initialize the Typed object 4 | */ 5 | 6 | export default class Initializer { 7 | /** 8 | * Load up defaults & options on the Typed instance 9 | * @param {Typed} self instance of Typed 10 | * @param {object} options options object 11 | * @param {string} elementId HTML element ID _OR_ instance of HTML element 12 | * @private 13 | */ 14 | 15 | load(self, options, elementId) { 16 | // chosen element to manipulate text 17 | if (typeof elementId === 'string') { 18 | self.el = document.querySelector(elementId); 19 | } else { 20 | self.el = elementId; 21 | } 22 | 23 | self.options = {...defaults, ...options}; 24 | 25 | // attribute to type into 26 | self.isInput = self.el.tagName.toLowerCase() === 'input'; 27 | self.attr = self.options.attr; 28 | self.bindInputFocusEvents = self.options.bindInputFocusEvents; 29 | 30 | // show cursor 31 | self.showCursor = self.isInput ? false : self.options.showCursor; 32 | 33 | // custom cursor 34 | self.cursorChar = self.options.cursorChar; 35 | 36 | // Is the cursor blinking 37 | self.cursorBlinking = true; 38 | 39 | // text content of element 40 | self.elContent = self.attr ? self.el.getAttribute(self.attr) : self.el.textContent; 41 | 42 | // html or plain text 43 | self.contentType = self.options.contentType; 44 | 45 | // typing speed 46 | self.typeSpeed = self.options.typeSpeed; 47 | 48 | // add a delay before typing starts 49 | self.startDelay = self.options.startDelay; 50 | 51 | // backspacing speed 52 | self.backSpeed = self.options.backSpeed; 53 | 54 | // only backspace what doesn't match the previous string 55 | self.smartBackspace = self.options.smartBackspace; 56 | 57 | // amount of time to wait before backspacing 58 | self.backDelay = self.options.backDelay; 59 | 60 | // Fade out instead of backspace 61 | self.fadeOut = self.options.fadeOut; 62 | self.fadeOutClass = self.options.fadeOutClass; 63 | self.fadeOutDelay = self.options.fadeOutDelay; 64 | 65 | // variable to check whether typing is currently paused 66 | self.isPaused = false; 67 | 68 | // input strings of text 69 | self.strings = self.options.strings.map((s) => s.trim()); 70 | 71 | // div containing strings 72 | if (typeof self.options.stringsElement === 'string') { 73 | self.stringsElement = document.querySelector(self.options.stringsElement); 74 | } else { 75 | self.stringsElement = self.options.stringsElement; 76 | } 77 | 78 | if (self.stringsElement) { 79 | self.strings = []; 80 | self.stringsElement.style.display = 'none'; 81 | const strings = Array.prototype.slice.apply(self.stringsElement.children); 82 | const stringsLength = strings.length; 83 | 84 | if (stringsLength) { 85 | for (let i = 0; i < stringsLength; i += 1) { 86 | const stringEl = strings[i]; 87 | self.strings.push(stringEl.innerHTML.trim()); 88 | } 89 | } 90 | } 91 | 92 | // character number position of current string 93 | self.strPos = 0; 94 | 95 | // current array position 96 | self.arrayPos = 0; 97 | 98 | // index of string to stop backspacing on 99 | self.stopNum = 0; 100 | 101 | // Looping logic 102 | self.loop = self.options.loop; 103 | self.loopCount = self.options.loopCount; 104 | self.curLoop = 0; 105 | 106 | // shuffle the strings 107 | self.shuffle = self.options.shuffle; 108 | // the order of strings 109 | self.sequence = []; 110 | 111 | self.pause = { 112 | status: false, 113 | typewrite: true, 114 | curString: '', 115 | curStrPos: 0 116 | } 117 | 118 | // When the typing is complete (when not looped) 119 | self.typingComplete = false; 120 | 121 | // Set the order in which the strings are typed 122 | for (let i in self.strings) { 123 | self.sequence[i] = i; 124 | } 125 | 126 | // If there is some text in the element 127 | self.currentElContent = this.getCurrentElContent(self); 128 | 129 | self.autoInsertCss = self.options.autoInsertCss; 130 | 131 | this.appendAnimationCss(self); 132 | } 133 | 134 | getCurrentElContent(self) { 135 | let elContent = ''; 136 | if (self.attr) { 137 | elContent = self.el.getAttribute(self.attr); 138 | } else if (self.isInput) { 139 | elContent = self.el.value; 140 | } else if (self.contentType === 'html') { 141 | elContent = self.el.innerHTML; 142 | } else { 143 | elContent = self.el.textContent; 144 | } 145 | return elContent; 146 | } 147 | 148 | appendAnimationCss(self) { 149 | const cssDataName = 'data-typed-js-css'; 150 | if (!self.autoInsertCss) { return; } 151 | if (!self.showCursor && !self.fadeOut) { return; } 152 | if (document.querySelector(`[${cssDataName}]`)) { return; } 153 | 154 | let css = document.createElement('style'); 155 | css.type = 'text/css'; 156 | css.setAttribute(cssDataName, true); 157 | 158 | let innerCss = ''; 159 | if (self.showCursor) { 160 | innerCss += ` 161 | .typed-cursor{ 162 | opacity: 1; 163 | } 164 | .typed-cursor.typed-cursor--blink{ 165 | animation: typedjsBlink 0.7s infinite; 166 | -webkit-animation: typedjsBlink 0.7s infinite; 167 | animation: typedjsBlink 0.7s infinite; 168 | } 169 | @keyframes typedjsBlink{ 170 | 50% { opacity: 0.0; } 171 | } 172 | @-webkit-keyframes typedjsBlink{ 173 | 0% { opacity: 1; } 174 | 50% { opacity: 0.0; } 175 | 100% { opacity: 1; } 176 | } 177 | `; 178 | } 179 | if (self.fadeOut) { 180 | innerCss += ` 181 | .typed-fade-out{ 182 | opacity: 0; 183 | transition: opacity .25s; 184 | } 185 | .typed-cursor.typed-cursor--blink.typed-fade-out{ 186 | -webkit-animation: 0; 187 | animation: 0; 188 | } 189 | `; 190 | } 191 | if (css.length === 0) { return; } 192 | css.innerHTML = innerCss; 193 | document.body.appendChild(css); 194 | } 195 | } 196 | 197 | export let initializer = new Initializer(); 198 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | 2 | //variables for the visualization instance 3 | var toyalgo; 4 | var typed; 5 | 6 | 7 | //initialize selections for the toy algo 8 | 9 | var toyAlgoSelections={ 10 | age:0, 11 | sq_footage:0, 12 | neighborhood:0, 13 | no_occupants:0, 14 | business:0, 15 | no_windows:0, 16 | dollar_value:0, 17 | height:0 18 | }; 19 | 20 | 21 | 22 | 23 | function toggleDefinitions(id){ 24 | 25 | if (id === "dollar_value") { 26 | $("#dollar_value_text").removeClass("definitions_hidden"), 27 | $("#building_age_text").addClass("definitions_hidden"), 28 | $("#neighborhood_text").addClass("definitions_hidden"), 29 | $("#sq_footage_text").addClass("definitions_hidden"), 30 | $("#no_occupants_text").addClass("definitions_hidden"), 31 | $("#business_text").addClass("definitions_hidden"), 32 | $("#height_text").addClass("definitions_hidden") 33 | } 34 | 35 | if (id==="age") { 36 | $("#building_age_text").removeClass("definitions_hidden"), 37 | $("#dollar_value_text").addClass("definitions_hidden"), 38 | $("#neighborhood_text").addClass("definitions_hidden"), 39 | $("#sq_footage_text").addClass("definitions_hidden"), 40 | $("#no_occupants_text").addClass("definitions_hidden"), 41 | $("#business_text").addClass("definitions_hidden"), 42 | $("#height_text").addClass("definitions_hidden") 43 | } 44 | if (id==="height") { 45 | $("#building_age_text").addClass("definitions_hidden"), 46 | $("#dollar_value_text").addClass("definitions_hidden"), 47 | $("#neighborhood_text").addClass("definitions_hidden"), 48 | $("#sq_footage_text").addClass("definitions_hidden"), 49 | $("#no_occupants_text").addClass("definitions_hidden"), 50 | $("#business_text").addClass("definitions_hidden"), 51 | $("#height_text").removeClass("definitions_hidden") 52 | } 53 | 54 | if (id==="neighborhood") { 55 | $("#building_age_text").addClass("definitions_hidden"), 56 | $("#dollar_value_text").addClass("definitions_hidden"), 57 | $("#neighborhood_text").removeClass("definitions_hidden"), 58 | $("#sq_footage_text").addClass("definitions_hidden"), 59 | $("#no_occupants_text").addClass("definitions_hidden"), 60 | $("#business_text").addClass("definitions_hidden"), 61 | $("#height_text").addClass("definitions_hidden") 62 | } 63 | if (id==="sq_footage") { 64 | $("#building_age_text").addClass("definitions_hidden"), 65 | $("#dollar_value_text").addClass("definitions_hidden"), 66 | $("#neighborhood_text").addClass("definitions_hidden"), 67 | $("#sq_footage_text").removeClass("definitions_hidden"), 68 | $("#no_occupants_text").addClass("definitions_hidden"), 69 | $("#business_text").addClass("definitions_hidden"), 70 | $("#height_text").addClass("definitions_hidden") 71 | } 72 | if (id==="no_occupants") { 73 | $("#building_age_text").addClass("definitions_hidden"), 74 | $("#dollar_value_text").addClass("definitions_hidden"), 75 | $("#neighborhood_text").addClass("definitions_hidden"), 76 | $("#sq_footage_text").addClass("definitions_hidden"), 77 | $("#no_occupants_text").removeClass("definitions_hidden"), 78 | $("#business_text").addClass("definitions_hidden"), 79 | $("#height_text").addClass("definitions_hidden") 80 | } 81 | if (id==="business") { 82 | $("#building_age_text").addClass("definitions_hidden"), 83 | $("#dollar_value_text").addClass("definitions_hidden"), 84 | $("#neighborhood_text").addClass("definitions_hidden"), 85 | $("#sq_footage_text").addClass("definitions_hidden"), 86 | $("#no_occupants_text").addClass("definitions_hidden"), 87 | $("#business_text").removeClass("definitions_hidden"), 88 | $("#height_text").addClass("definitions_hidden") 89 | } 90 | 91 | 92 | if (toyAlgoSelections.dollar_value === 0) { 93 | $("#dollar_value_text").addClass("definitions_hidden"); 94 | }; 95 | if (toyAlgoSelections.age === 0) { 96 | $("#building_age_text").addClass("definitions_hidden"); 97 | }; 98 | if (toyAlgoSelections.height === 0) { 99 | $("#height_text").addClass("definitions_hidden"); 100 | }; 101 | if (toyAlgoSelections.no_occupants === 0) { 102 | $("#no_occupants_text").addClass("definitions_hidden"); 103 | }; 104 | if (toyAlgoSelections.sq_footage === 0) { 105 | $("#sq_footage_text").addClass("definitions_hidden"); 106 | }; 107 | if (toyAlgoSelections.business === 0) { 108 | $("#business_text").addClass("definitions_hidden"); 109 | }; 110 | if (toyAlgoSelections.neighborhood === 0) { 111 | $("#neighborhood_text").addClass("definitions_hidden"); 112 | }; 113 | } 114 | 115 | $(window).scroll(function(){ 116 | $(".fadeOut").css("opacity", 1 - $(window).scrollTop() / 250); 117 | 118 | }); 119 | 120 | 121 | //load toy algo data 122 | d3.csv("data/firecast_test.csv", function(data){ 123 | var toyAlgoData=data; 124 | convertString(toyAlgoData); 125 | createToyAlgoViz(toyAlgoData); 126 | }); 127 | 128 | function convertString(data){ 129 | for (var i=0; i700) { 147 | toyalgo = new ToyAlgorithm("toy-algo-houses-area", data, toyAlgoSelections, window.innerWidth/2, window.innerHeight/2); 148 | } 149 | else if (window.innerWidth<=700) { 150 | toyalgo = new ToyAlgorithm("toy-algo-houses-area", data, toyAlgoSelections, .8*window.innerWidth, window.innerHeight/2); 151 | } 152 | } 153 | 154 | 155 | window.onresize=function() { 156 | if (window.innerWidth>700) { 157 | toyalgo.resizeSVG(window.innerWidth/2, window.innerHeight/2) 158 | } 159 | else if (window.innerWidth<=700) { 160 | toyalgo.resizeSVG(.8*window.innerWidth, window.innerHeight/2) 161 | } 162 | } 163 | 164 | function updateToyAlgo(id){ 165 | if (document.getElementById(id).checked == true){ 166 | toyAlgoSelections[id]=1; 167 | } 168 | 169 | if (document.getElementById(id).checked == false){ 170 | toyAlgoSelections[id]=0; 171 | } 172 | 173 | toyalgo.wrangleData(toyAlgoSelections); 174 | toggleDefinitions(); 175 | } 176 | 177 | window.addEventListener("resize", reshape); 178 | 179 | function reshape(){ 180 | 181 | } 182 | 183 | 184 | //load scrollspy 185 | $('body').scrollspy({ target: '#navbar-side' }) 186 | 187 | //initialize tooltips 188 | $(document).ready(function(){ 189 | $('.tooltipped').tooltip(); 190 | }); 191 | 192 | //enable popover 193 | $("[data-toggle=popover]") 194 | .popover( 195 | {html:true, 196 | trigger: 'hover focus', 197 | placement: 'auto'}) 198 | 199 | 200 | 201 | 202 | $(window).bind("scroll", function() { 203 | if ($(this).scrollTop() > 500) { 204 | $("#navbar-side").fadeIn(); 205 | //$(".ads_alert").fadeIn(); 206 | $("#banner").fadeIn(); 207 | $("#navbar-side").removeClass("definitions_hidden"); 208 | //$(".ads_alert").removeClass("definitions_hidden"); 209 | $("#banner").removeClass("hidden"); 210 | } else { 211 | $("#navbar-side").stop().fadeOut(); 212 | //$(".ads_alert").stop().fadeOut(); 213 | $("#banner").stop().fadeOut(); 214 | } 215 | }); 216 | 217 | //$(".alert_text").delay(10000).fadeOut(); 218 | 219 | $(document).ready(function(){ 220 | $('.collapsible').collapsible(); 221 | }); 222 | 223 | makeDrawings(); 224 | function makeDrawings(){ 225 | 226 | new Vivus('skyline_drawing', { 227 | duration: 200, 228 | file: 'img/newyork2.svg', 229 | onReady: function (myVivus) { 230 | myVivus.el.setAttribute('width', '75%'); 231 | }, 232 | type: 'sync', 233 | start: 'autostart' 234 | }); 235 | 236 | 237 | 238 | new Vivus('bodega_drawing', { 239 | duration: 200, 240 | file: 'img/PLDeli.svg', 241 | onReady: function (myVivus) { 242 | myVivus.el.setAttribute('width', '100%'); 243 | }, 244 | }); 245 | 246 | new Vivus('mejia_drawing', { 247 | duration: 50, 248 | file: 'img/mejia_drawing.svg', 249 | onReady: function (myVivus) { 250 | myVivus.el.setAttribute('width', '100%'); 251 | }, 252 | }); 253 | 254 | new Vivus('mejia_drawing_mobile', { 255 | duration: 50, 256 | file: 'img/mejia_drawing.svg', 257 | onReady: function (myVivus) { 258 | myVivus.el.setAttribute('width', '80%'); 259 | }, 260 | }); 261 | 262 | 263 | 264 | } 265 | 266 | $(".card-hover").hover( 267 | function(){ 268 | $(this).addClass('z-depth-4')}, 269 | function(){ 270 | $(this).removeClass('z-depth-4') 271 | }) 272 | 273 | jQuery(document).ready(function($) { 274 | var alterClass = function() { 275 | var ww = document.body.clientWidth; 276 | if (ww < 700) { 277 | $('.sticky_card_section').removeClass('sticky'); 278 | } else if (ww >= 700) { 279 | $('.sticky_card_section').addClass('sticky'); 280 | }; 281 | }; 282 | $(window).resize(function(){ 283 | alterClass(); 284 | }); 285 | //Fire it when the page first loads: 286 | alterClass(); 287 | }); 288 | 289 | 290 | $('.modal-backdrop').click(function(){ 291 | 292 | $('.learn_modal').modal('hide'); 293 | }) 294 | 295 | 296 | 297 | document.addEventListener('DOMContentLoaded', function() { 298 | var elems = document.querySelectorAll('.fixed-action-btn'); 299 | 300 | var taskforce_alert = M.FloatingActionButton.init(elems, { 301 | direction: 'left' 302 | }); 303 | 304 | 305 | }); 306 | -------------------------------------------------------------------------------- /js/pathformer.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * Pathformer 5 | * Beta version 6 | * 7 | * Take any SVG version 1.1 and transform 8 | * child elements to 'path' elements 9 | * 10 | * This code is purely forked from 11 | * https://github.com/Waest/SVGPathConverter 12 | */ 13 | 14 | /** 15 | * Class constructor 16 | * 17 | * @param {DOM|String} element Dom element of the SVG or id of it 18 | */ 19 | function Pathformer(element) { 20 | // Test params 21 | if (typeof element === 'undefined') { 22 | throw new Error('Pathformer [constructor]: "element" parameter is required'); 23 | } 24 | 25 | // Set the element 26 | if (element.constructor === String) { 27 | element = document.getElementById(element); 28 | if (!element) { 29 | throw new Error('Pathformer [constructor]: "element" parameter is not related to an existing ID'); 30 | } 31 | } 32 | if (element instanceof window.SVGElement || 33 | element instanceof window.SVGGElement || 34 | /^svg$/i.test(element.nodeName)) { 35 | this.el = element; 36 | } else { 37 | throw new Error('Pathformer [constructor]: "element" parameter must be a string or a SVGelement'); 38 | } 39 | 40 | // Start 41 | this.scan(element); 42 | } 43 | 44 | /** 45 | * List of tags which can be transformed 46 | * to path elements 47 | * 48 | * @type {Array} 49 | */ 50 | Pathformer.prototype.TYPES = ['line', 'ellipse', 'circle', 'polygon', 'polyline', 'rect']; 51 | 52 | /** 53 | * List of attribute names which contain 54 | * data. This array list them to check if 55 | * they contain bad values, like percentage. 56 | * 57 | * @type {Array} 58 | */ 59 | Pathformer.prototype.ATTR_WATCH = ['cx', 'cy', 'points', 'r', 'rx', 'ry', 'x', 'x1', 'x2', 'y', 'y1', 'y2']; 60 | 61 | /** 62 | * Finds the elements compatible for transform 63 | * and apply the liked method 64 | * 65 | * @param {object} options Object from the constructor 66 | */ 67 | Pathformer.prototype.scan = function (svg) { 68 | var fn, element, pathData, pathDom, 69 | elements = svg.querySelectorAll(this.TYPES.join(',')); 70 | 71 | for (var i = 0; i < elements.length; i++) { 72 | element = elements[i]; 73 | fn = this[element.tagName.toLowerCase() + 'ToPath']; 74 | pathData = fn(this.parseAttr(element.attributes)); 75 | pathDom = this.pathMaker(element, pathData); 76 | element.parentNode.replaceChild(pathDom, element); 77 | } 78 | }; 79 | 80 | 81 | /** 82 | * Read `line` element to extract and transform 83 | * data, to make it ready for a `path` object. 84 | * 85 | * @param {DOMelement} element Line element to transform 86 | * @return {object} Data for a `path` element 87 | */ 88 | Pathformer.prototype.lineToPath = function (element) { 89 | var newElement = {}, 90 | x1 = element.x1 || 0, 91 | y1 = element.y1 || 0, 92 | x2 = element.x2 || 0, 93 | y2 = element.y2 || 0; 94 | 95 | newElement.d = 'M' + x1 + ',' + y1 + 'L' + x2 + ',' + y2; 96 | return newElement; 97 | }; 98 | 99 | /** 100 | * Read `rect` element to extract and transform 101 | * data, to make it ready for a `path` object. 102 | * The radius-border is not taken in charge yet. 103 | * (your help is more than welcomed) 104 | * 105 | * @param {DOMelement} element Rect element to transform 106 | * @return {object} Data for a `path` element 107 | */ 108 | Pathformer.prototype.rectToPath = function (element) { 109 | var newElement = {}, 110 | x = parseFloat(element.x) || 0, 111 | y = parseFloat(element.y) || 0, 112 | width = parseFloat(element.width) || 0, 113 | height = parseFloat(element.height) || 0; 114 | 115 | if (element.rx || element.ry) { 116 | var rx = parseInt(element.rx, 10) || -1, 117 | ry = parseInt(element.ry, 10) || -1; 118 | rx = Math.min(Math.max(rx < 0 ? ry : rx, 0), width/2); 119 | ry = Math.min(Math.max(ry < 0 ? rx : ry, 0), height/2); 120 | 121 | newElement.d = 'M ' + (x + rx) + ',' + y + ' ' + 122 | 'L ' + (x + width - rx) + ',' + y + ' ' + 123 | 'A ' + rx + ',' + ry + ',0,0,1,' + (x + width) + ',' + (y + ry) + ' ' + 124 | 'L ' + (x + width) + ',' + (y + height - ry) + ' ' + 125 | 'A ' + rx + ',' + ry + ',0,0,1,' + (x + width - rx) + ',' + (y + height) + ' ' + 126 | 'L ' + (x + rx) + ',' + (y + height) + ' ' + 127 | 'A ' + rx + ',' + ry + ',0,0,1,' + x + ',' + (y + height - ry) + ' ' + 128 | 'L ' + x + ',' + (y + ry) + ' ' + 129 | 'A ' + rx + ',' + ry + ',0,0,1,' + (x + rx) + ',' + y; 130 | } 131 | else { 132 | newElement.d = 'M' + x + ' ' + y + ' ' + 133 | 'L' + (x + width) + ' ' + y + ' ' + 134 | 'L' + (x + width) + ' ' + (y + height) + ' ' + 135 | 'L' + x + ' ' + (y + height) + ' Z'; 136 | } 137 | return newElement; 138 | }; 139 | 140 | /** 141 | * Read `polyline` element to extract and transform 142 | * data, to make it ready for a `path` object. 143 | * 144 | * @param {DOMelement} element Polyline element to transform 145 | * @return {object} Data for a `path` element 146 | */ 147 | Pathformer.prototype.polylineToPath = function (element) { 148 | var newElement = {}, 149 | points = element.points.trim().split(' '), 150 | i, path; 151 | 152 | // Reformatting if points are defined without commas 153 | if (element.points.indexOf(',') === -1) { 154 | var formattedPoints = []; 155 | for (i = 0; i < points.length; i+=2) { 156 | formattedPoints.push(points[i] + ',' + points[i+1]); 157 | } 158 | points = formattedPoints; 159 | } 160 | 161 | // Generate the path.d value 162 | path = 'M' + points[0]; 163 | for(i = 1; i < points.length; i++) { 164 | if (points[i].indexOf(',') !== -1) { 165 | path += 'L' + points[i]; 166 | } 167 | } 168 | newElement.d = path; 169 | return newElement; 170 | }; 171 | 172 | /** 173 | * Read `polygon` element to extract and transform 174 | * data, to make it ready for a `path` object. 175 | * This method rely on polylineToPath, because the 176 | * logic is similar. The path created is just closed, 177 | * so it needs an 'Z' at the end. 178 | * 179 | * @param {DOMelement} element Polygon element to transform 180 | * @return {object} Data for a `path` element 181 | */ 182 | Pathformer.prototype.polygonToPath = function (element) { 183 | var newElement = Pathformer.prototype.polylineToPath(element); 184 | 185 | newElement.d += 'Z'; 186 | return newElement; 187 | }; 188 | 189 | /** 190 | * Read `ellipse` element to extract and transform 191 | * data, to make it ready for a `path` object. 192 | * 193 | * @param {DOMelement} element ellipse element to transform 194 | * @return {object} Data for a `path` element 195 | */ 196 | Pathformer.prototype.ellipseToPath = function (element) { 197 | var newElement = {}, 198 | rx = parseFloat(element.rx) || 0, 199 | ry = parseFloat(element.ry) || 0, 200 | cx = parseFloat(element.cx) || 0, 201 | cy = parseFloat(element.cy) || 0, 202 | startX = cx - rx, 203 | startY = cy, 204 | endX = parseFloat(cx) + parseFloat(rx), 205 | endY = cy; 206 | 207 | newElement.d = 'M' + startX + ',' + startY + 208 | 'A' + rx + ',' + ry + ' 0,1,1 ' + endX + ',' + endY + 209 | 'A' + rx + ',' + ry + ' 0,1,1 ' + startX + ',' + endY; 210 | return newElement; 211 | }; 212 | 213 | /** 214 | * Read `circle` element to extract and transform 215 | * data, to make it ready for a `path` object. 216 | * 217 | * @param {DOMelement} element Circle element to transform 218 | * @return {object} Data for a `path` element 219 | */ 220 | Pathformer.prototype.circleToPath = function (element) { 221 | var newElement = {}, 222 | r = parseFloat(element.r) || 0, 223 | cx = parseFloat(element.cx) || 0, 224 | cy = parseFloat(element.cy) || 0, 225 | startX = cx - r, 226 | startY = cy, 227 | endX = parseFloat(cx) + parseFloat(r), 228 | endY = cy; 229 | 230 | newElement.d = 'M' + startX + ',' + startY + 231 | 'A' + r + ',' + r + ' 0,1,1 ' + endX + ',' + endY + 232 | 'A' + r + ',' + r + ' 0,1,1 ' + startX + ',' + endY; 233 | return newElement; 234 | }; 235 | 236 | /** 237 | * Create `path` elements form original element 238 | * and prepared objects 239 | * 240 | * @param {DOMelement} element Original element to transform 241 | * @param {object} pathData Path data (from `toPath` methods) 242 | * @return {DOMelement} Path element 243 | */ 244 | Pathformer.prototype.pathMaker = function (element, pathData) { 245 | var i, attr, pathTag = document.createElementNS('http://www.w3.org/2000/svg','path'); 246 | for(i = 0; i < element.attributes.length; i++) { 247 | attr = element.attributes[i]; 248 | if (this.ATTR_WATCH.indexOf(attr.name) === -1) { 249 | pathTag.setAttribute(attr.name, attr.value); 250 | } 251 | } 252 | for(i in pathData) { 253 | pathTag.setAttribute(i, pathData[i]); 254 | } 255 | return pathTag; 256 | }; 257 | 258 | /** 259 | * Parse attributes of a DOM element to 260 | * get an object of attribute => value 261 | * 262 | * @param {NamedNodeMap} attributes Attributes object from DOM element to parse 263 | * @return {object} Object of attributes 264 | */ 265 | Pathformer.prototype.parseAttr = function (element) { 266 | var attr, output = {}; 267 | for (var i = 0; i < element.length; i++) { 268 | attr = element[i]; 269 | // Check if no data attribute contains '%', or the transformation is impossible 270 | if (this.ATTR_WATCH.indexOf(attr.name) !== -1 && attr.value.indexOf('%') !== -1) { 271 | throw new Error('Pathformer [parseAttr]: a SVG shape got values in percentage. This cannot be transformed into \'path\' tags. Please use \'viewBox\'.'); 272 | } 273 | output[attr.name] = attr.value; 274 | } 275 | return output; 276 | }; 277 | -------------------------------------------------------------------------------- /js/popper.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (C) Federico Zivolo 2017 3 | Distributed under the MIT License (license terms are at http://opensource.org/licenses/MIT). 4 | */(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.Popper=t()})(this,function(){'use strict';function e(e){return e&&'[object Function]'==={}.toString.call(e)}function t(e,t){if(1!==e.nodeType)return[];var o=getComputedStyle(e,null);return t?o[t]:o}function o(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function n(e){if(!e)return document.body;switch(e.nodeName){case'HTML':case'BODY':return e.ownerDocument.body;case'#document':return e.body;}var i=t(e),r=i.overflow,p=i.overflowX,s=i.overflowY;return /(auto|scroll)/.test(r+s+p)?e:n(o(e))}function r(e){var o=e&&e.offsetParent,i=o&&o.nodeName;return i&&'BODY'!==i&&'HTML'!==i?-1!==['TD','TABLE'].indexOf(o.nodeName)&&'static'===t(o,'position')?r(o):o:e?e.ownerDocument.documentElement:document.documentElement}function p(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||r(e.firstElementChild)===e)}function s(e){return null===e.parentNode?e:s(e.parentNode)}function d(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return document.documentElement;var o=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,i=o?e:t,n=o?t:e,a=document.createRange();a.setStart(i,0),a.setEnd(n,0);var l=a.commonAncestorContainer;if(e!==l&&t!==l||i.contains(n))return p(l)?l:r(l);var f=s(e);return f.host?d(f.host,t):d(e,s(t).host)}function a(e){var t=1=o.clientWidth&&i>=o.clientHeight}),l=0i[e]&&!t.escapeWithReference&&(n=_(p[o],i[e]-('right'===e?p.width:p.height))),pe({},o,n)}};return n.forEach(function(e){var t=-1===['left','top'].indexOf(e)?'secondary':'primary';p=se({},p,s[t](e))}),e.offsets.popper=p,e},priority:['left','right','top','bottom'],padding:5,boundariesElement:'scrollParent'},keepTogether:{order:400,enabled:!0,fn:function(e){var t=e.offsets,o=t.popper,i=t.reference,n=e.placement.split('-')[0],r=X,p=-1!==['top','bottom'].indexOf(n),s=p?'right':'bottom',d=p?'left':'top',a=p?'width':'height';return o[s]r(i[s])&&(e.offsets.popper[d]=r(i[s])),e}},arrow:{order:500,enabled:!0,fn:function(e,o){var i;if(!F(e.instance.modifiers,'arrow','keepTogether'))return e;var n=o.element;if('string'==typeof n){if(n=e.instance.popper.querySelector(n),!n)return e;}else if(!e.instance.popper.contains(n))return console.warn('WARNING: `arrow.element` must be child of its popper element!'),e;var r=e.placement.split('-')[0],p=e.offsets,s=p.popper,d=p.reference,a=-1!==['left','right'].indexOf(r),l=a?'height':'width',f=a?'Top':'Left',m=f.toLowerCase(),h=a?'left':'top',g=a?'bottom':'right',u=L(n)[l];d[g]-us[g]&&(e.offsets.popper[m]+=d[m]+u-s[g]),e.offsets.popper=c(e.offsets.popper);var b=d[m]+d[l]/2-u/2,w=t(e.instance.popper),y=parseFloat(w['margin'+f],10),E=parseFloat(w['border'+f+'Width'],10),v=b-e.offsets.popper[m]-y-E;return v=J(_(s[l]-u,v),0),e.arrowElement=n,e.offsets.arrow=(i={},pe(i,m,Math.round(v)),pe(i,h,''),i),e},element:'[x-arrow]'},flip:{order:600,enabled:!0,fn:function(e,t){if(k(e.instance.modifiers,'inner'))return e;if(e.flipped&&e.placement===e.originalPlacement)return e;var o=y(e.instance.popper,e.instance.reference,t.padding,t.boundariesElement),i=e.placement.split('-')[0],n=x(i),r=e.placement.split('-')[1]||'',p=[];switch(t.behavior){case le.FLIP:p=[i,n];break;case le.CLOCKWISE:p=q(i);break;case le.COUNTERCLOCKWISE:p=q(i,!0);break;default:p=t.behavior;}return p.forEach(function(s,d){if(i!==s||p.length===d+1)return e;i=e.placement.split('-')[0],n=x(i);var a=e.offsets.popper,l=e.offsets.reference,f=X,m='left'===i&&f(a.right)>f(l.left)||'right'===i&&f(a.left)f(l.top)||'bottom'===i&&f(a.top)f(o.right),g=f(a.top)f(o.bottom),b='left'===i&&h||'right'===i&&c||'top'===i&&g||'bottom'===i&&u,w=-1!==['top','bottom'].indexOf(i),y=!!t.flipVariations&&(w&&'start'===r&&h||w&&'end'===r&&c||!w&&'start'===r&&g||!w&&'end'===r&&u);(m||b||y)&&(e.flipped=!0,(m||b)&&(i=p[d+1]),y&&(r=K(r)),e.placement=i+(r?'-'+r:''),e.offsets.popper=se({},e.offsets.popper,S(e.instance.popper,e.offsets.reference,e.placement)),e=C(e.instance.modifiers,e,'flip'))}),e},behavior:'flip',padding:5,boundariesElement:'viewport'},inner:{order:700,enabled:!1,fn:function(e){var t=e.placement,o=t.split('-')[0],i=e.offsets,n=i.popper,r=i.reference,p=-1!==['left','right'].indexOf(o),s=-1===['top','left'].indexOf(o);return n[p?'left':'top']=r[o]-(s?n[p?'width':'height']:0),e.placement=x(t),e.offsets.popper=c(n),e}},hide:{order:800,enabled:!0,fn:function(e){if(!F(e.instance.modifiers,'hide','preventOverflow'))return e;var t=e.offsets.reference,o=T(e.instance.modifiers,function(e){return'preventOverflow'===e.name}).boundaries;if(t.bottomo.right||t.top>o.bottom||t.rightp;){var u=a++,e=c[u],o=t.call(e,1);o.push(l(u)),++p,e[0].apply(null,o)}}function l(n){return function(u,t){--p,null==s&&(null!=u?(s=u,a=d=0/0,o()):(c[n]=t,--d?i||e():o()))}}function o(){null!=s?m(s):f?m(s,c):m.apply(null,[s].concat(c))}var r,i,f,c=[],a=0,p=0,d=0,s=null,m=u;return n||(n=1/0),r={defer:function(){return s||(c.push(arguments),++d,e()),r},await:function(n){return m=n,f=!1,d||o(),r},awaitAll:function(n){return m=n,f=!0,d||o(),r}}}function u(){}var t=[].slice;n.version="1.0.7","function"==typeof define&&define.amd?define(function(){return n}):"object"==typeof module&&module.exports?module.exports=n:this.queue=n}(); -------------------------------------------------------------------------------- /js/vivus.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vivus - JavaScript library to make drawing animation on SVG 3 | * @version v0.4.4 4 | * @link https://github.com/maxwellito/vivus 5 | * @license MIT 6 | */ 7 | "use strict";!function(){function t(t){if("undefined"==typeof t)throw new Error('Pathformer [constructor]: "element" parameter is required');if(t.constructor===String&&(t=document.getElementById(t),!t))throw new Error('Pathformer [constructor]: "element" parameter is not related to an existing ID');if(!(t instanceof window.SVGElement||t instanceof window.SVGGElement||/^svg$/i.test(t.nodeName)))throw new Error('Pathformer [constructor]: "element" parameter must be a string or a SVGelement');this.el=t,this.scan(t)}function e(t,e,n){r(),this.isReady=!1,this.setElement(t,e),this.setOptions(e),this.setCallback(n),this.isReady&&this.init()}t.prototype.TYPES=["line","ellipse","circle","polygon","polyline","rect"],t.prototype.ATTR_WATCH=["cx","cy","points","r","rx","ry","x","x1","x2","y","y1","y2"],t.prototype.scan=function(t){for(var e,r,n,i,a=t.querySelectorAll(this.TYPES.join(",")),o=0;oo?s:o,0),i/2),s=Math.min(Math.max(0>s?o:s,0),a/2),e.d="M "+(r+o)+","+n+" L "+(r+i-o)+","+n+" A "+o+","+s+",0,0,1,"+(r+i)+","+(n+s)+" L "+(r+i)+","+(n+a-s)+" A "+o+","+s+",0,0,1,"+(r+i-o)+","+(n+a)+" L "+(r+o)+","+(n+a)+" A "+o+","+s+",0,0,1,"+r+","+(n+a-s)+" L "+r+","+(n+s)+" A "+o+","+s+",0,0,1,"+(r+o)+","+n}else e.d="M"+r+" "+n+" L"+(r+i)+" "+n+" L"+(r+i)+" "+(n+a)+" L"+r+" "+(n+a)+" Z";return e},t.prototype.polylineToPath=function(t){var e,r,n={},i=t.points.trim().split(" ");if(-1===t.points.indexOf(",")){var a=[];for(e=0;e=this.duration)throw new Error("Vivus [constructor]: delay must be shorter than duration")},e.prototype.setCallback=function(t){if(t&&t.constructor!==Function)throw new Error('Vivus [constructor]: "callback" parameter must be a function');this.callback=t||function(){}},e.prototype.mapping=function(){var t,e,r,n,i,o,s,h;for(h=o=s=0,e=this.el.querySelectorAll("path"),t=0;t1?e.length-1:1),this.reverseStack&&this.map.reverse(),t=0;t=this.frameLength))return this.trace(),this.handle=n(function(){t.drawer()}),void 0;this.stop(),this.currentFrame=this.frameLength,this.trace(),this.selfDestroy&&this.destroy()}this.callback(this),this.instanceCallback&&(this.instanceCallback(this),this.instanceCallback=null)},e.prototype.trace=function(){var t,e,r,n;for(n=this.animTimingFunction(this.currentFrame/this.frameLength)*this.frameLength,t=0;t=o+a*e&&s>=r},e.prototype.getViewportH=function(){var t=this.docElem.clientHeight,e=window.innerHeight;return e>t?e:t},e.prototype.scrollY=function(){return window.pageYOffset||this.docElem.scrollTop},r=function(){e.prototype.docElem||(e.prototype.docElem=window.document.documentElement,n=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){return window.setTimeout(t,1e3/60)}}(),i=function(){return window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.oCancelAnimationFrame||window.msCancelAnimationFrame||function(t){return window.clearTimeout(t)}}())},a=function(t,e){var r=parseInt(t,10);return r>=0?r:e},"function"==typeof define&&define.amd?define([],function(){return e}):"object"==typeof exports?module.exports=e:window.Vivus=e}(); --------------------------------------------------------------------------------