├── img ├── .gitignore ├── F.png ├── FF.png ├── M.png ├── MF.png ├── MM.png ├── crime.png ├── male.png ├── pay.png ├── female.png └── relationship.png ├── .gitignore ├── favicon.ico ├── README.md ├── js ├── plugins.js ├── vendor │ ├── modernizr-2.6.2.min.js │ └── jquery-1.9.0.min.js └── infographic.js ├── index.html └── css ├── main.css ├── normalize.css └── infographic.css /img/.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/* 2 | PlaceMe.iml 3 | -------------------------------------------------------------------------------- /img/F.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h4rrydog/placeMe/HEAD/img/F.png -------------------------------------------------------------------------------- /img/FF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h4rrydog/placeMe/HEAD/img/FF.png -------------------------------------------------------------------------------- /img/M.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h4rrydog/placeMe/HEAD/img/M.png -------------------------------------------------------------------------------- /img/MF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h4rrydog/placeMe/HEAD/img/MF.png -------------------------------------------------------------------------------- /img/MM.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h4rrydog/placeMe/HEAD/img/MM.png -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h4rrydog/placeMe/HEAD/favicon.ico -------------------------------------------------------------------------------- /img/crime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h4rrydog/placeMe/HEAD/img/crime.png -------------------------------------------------------------------------------- /img/male.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h4rrydog/placeMe/HEAD/img/male.png -------------------------------------------------------------------------------- /img/pay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h4rrydog/placeMe/HEAD/img/pay.png -------------------------------------------------------------------------------- /img/female.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h4rrydog/placeMe/HEAD/img/female.png -------------------------------------------------------------------------------- /img/relationship.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h4rrydog/placeMe/HEAD/img/relationship.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | PlaceMe 2 | ======= 3 | 4 | GDG London hackathon. Prototype for Android app to get display public data on your location in an info-graphic style. 5 | 6 | Components: 7 | - This repository contains the D3.js implementation of three infographic templates. 8 | See it in action: http://h4rrydog.github.io/placeMe 9 | 10 | - Android app is at: https://github.com/mvarnagiris/PlaceMe 11 | 12 | - Google App Engine backend is at: https://github.com/stestagg/placemeapp 13 | 14 | - Data API consumer is at: https://github.com/Rshomali/datagrubber 15 | -------------------------------------------------------------------------------- /js/plugins.js: -------------------------------------------------------------------------------- 1 | // Avoid `console` errors in browsers that lack a console. 2 | (function() { 3 | var method; 4 | var noop = function () {}; 5 | var methods = [ 6 | 'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 7 | 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 8 | 'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd', 9 | 'timeStamp', 'trace', 'warn' 10 | ]; 11 | var length = methods.length; 12 | var console = (window.console = window.console || {}); 13 | 14 | while (length--) { 15 | method = methods[length]; 16 | 17 | // Only stub undefined methods. 18 | if (!console[method]) { 19 | console[method] = noop; 20 | } 21 | } 22 | }()); 23 | 24 | // Place any jQuery/helper plugins in here. 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Place.Me Infographics 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

Place.Me Infographics: d3 implementation

22 |

NOTE: This is using mock data!

23 |
24 |

crime

25 |
26 |
27 |

relationship

28 |
29 |
30 |

pay

31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | * HTML5 Boilerplate 3 | * 4 | * What follows is the result of much research on cross-browser styling. 5 | * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 6 | * Kroc Camen, and the H5BP dev community and team. 7 | */ 8 | 9 | /* ========================================================================== 10 | Base styles: opinionated defaults 11 | ========================================================================== */ 12 | 13 | html, 14 | button, 15 | input, 16 | select, 17 | textarea { 18 | color: #222; 19 | } 20 | 21 | body { 22 | font-size: 1em; 23 | line-height: 1.4; 24 | } 25 | 26 | /* 27 | * Remove text-shadow in selection highlight: h5bp.com/i 28 | * These selection declarations have to be separate. 29 | * Customize the background color to match your design. 30 | */ 31 | 32 | ::-moz-selection { 33 | background: #b3d4fc; 34 | text-shadow: none; 35 | } 36 | 37 | ::selection { 38 | background: #b3d4fc; 39 | text-shadow: none; 40 | } 41 | 42 | /* 43 | * A better looking default horizontal rule 44 | */ 45 | 46 | hr { 47 | display: block; 48 | height: 1px; 49 | border: 0; 50 | border-top: 1px solid #ccc; 51 | margin: 1em 0; 52 | padding: 0; 53 | } 54 | 55 | /* 56 | * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 57 | */ 58 | 59 | img { 60 | vertical-align: middle; 61 | } 62 | 63 | /* 64 | * Remove default fieldset styles. 65 | */ 66 | 67 | fieldset { 68 | border: 0; 69 | margin: 0; 70 | padding: 0; 71 | } 72 | 73 | /* 74 | * Allow only vertical resizing of textareas. 75 | */ 76 | 77 | textarea { 78 | resize: vertical; 79 | } 80 | 81 | /* ========================================================================== 82 | Chrome Frame prompt 83 | ========================================================================== */ 84 | 85 | .chromeframe { 86 | margin: 0.2em 0; 87 | background: #ccc; 88 | color: #000; 89 | padding: 0.2em 0; 90 | } 91 | 92 | /* ========================================================================== 93 | Author's custom styles 94 | ========================================================================== */ 95 | 96 | .chart div { 97 | font: 10px sans-serif; 98 | background-color: #4682b4; 99 | text-align: right; 100 | padding: 3px; 101 | margin: 1px; 102 | color: white; 103 | } 104 | 105 | .chart2 rect { 106 | stroke: white; 107 | fill: red; 108 | } 109 | 110 | .chart2 text { 111 | font: 10px sans-serif; 112 | fill: white; 113 | } 114 | 115 | .enter { 116 | fill: red; 117 | } 118 | 119 | .update { 120 | fill: #333; 121 | } 122 | 123 | .exit { 124 | fill: brown; 125 | } 126 | 127 | 128 | /* ========================================================================== 129 | Helper classes 130 | ========================================================================== */ 131 | 132 | /* 133 | * Image replacement 134 | */ 135 | 136 | .ir { 137 | background-color: transparent; 138 | border: 0; 139 | overflow: hidden; 140 | /* IE 6/7 fallback */ 141 | *text-indent: -9999px; 142 | } 143 | 144 | .ir:before { 145 | content: ""; 146 | display: block; 147 | width: 0; 148 | height: 150%; 149 | } 150 | 151 | /* 152 | * Hide from both screenreaders and browsers: h5bp.com/u 153 | */ 154 | 155 | .hidden { 156 | display: none !important; 157 | visibility: hidden; 158 | } 159 | 160 | /* 161 | * Hide only visually, but have it available for screenreaders: h5bp.com/v 162 | */ 163 | 164 | .visuallyhidden { 165 | border: 0; 166 | clip: rect(0 0 0 0); 167 | height: 1px; 168 | margin: -1px; 169 | overflow: hidden; 170 | padding: 0; 171 | position: absolute; 172 | width: 1px; 173 | } 174 | 175 | /* 176 | * Extends the .visuallyhidden class to allow the element to be focusable 177 | * when navigated to via the keyboard: h5bp.com/p 178 | */ 179 | 180 | .visuallyhidden.focusable:active, 181 | .visuallyhidden.focusable:focus { 182 | clip: auto; 183 | height: auto; 184 | margin: 0; 185 | overflow: visible; 186 | position: static; 187 | width: auto; 188 | } 189 | 190 | /* 191 | * Hide visually and from screenreaders, but maintain layout 192 | */ 193 | 194 | .invisible { 195 | visibility: hidden; 196 | } 197 | 198 | /* 199 | * Clearfix: contain floats 200 | * 201 | * For modern browsers 202 | * 1. The space content is one way to avoid an Opera bug when the 203 | * `contenteditable` attribute is included anywhere else in the document. 204 | * Otherwise it causes space to appear at the top and bottom of elements 205 | * that receive the `clearfix` class. 206 | * 2. The use of `table` rather than `block` is only necessary if using 207 | * `:before` to contain the top-margins of child elements. 208 | */ 209 | 210 | .clearfix:before, 211 | .clearfix:after { 212 | content: " "; /* 1 */ 213 | display: table; /* 2 */ 214 | } 215 | 216 | .clearfix:after { 217 | clear: both; 218 | } 219 | 220 | /* 221 | * For IE 6/7 only 222 | * Include this rule to trigger hasLayout and contain floats. 223 | */ 224 | 225 | .clearfix { 226 | *zoom: 1; 227 | } 228 | 229 | /* ========================================================================== 230 | EXAMPLE Media Queries for Responsive Design. 231 | Theses examples override the primary ('mobile first') styles. 232 | Modify as content requires. 233 | ========================================================================== */ 234 | 235 | @media only screen and (min-width: 35em) { 236 | /* Style adjustments for viewports that meet the condition */ 237 | } 238 | 239 | @media print, 240 | (-o-min-device-pixel-ratio: 5/4), 241 | (-webkit-min-device-pixel-ratio: 1.25), 242 | (min-resolution: 120dpi) { 243 | /* Style adjustments for high resolution devices */ 244 | } 245 | 246 | /* ========================================================================== 247 | Print styles. 248 | Inlined to avoid required HTTP connection: h5bp.com/r 249 | ========================================================================== */ 250 | 251 | @media print { 252 | * { 253 | background: transparent !important; 254 | color: #000 !important; /* Black prints faster: h5bp.com/s */ 255 | box-shadow: none !important; 256 | text-shadow: none !important; 257 | } 258 | 259 | a, 260 | a:visited { 261 | text-decoration: underline; 262 | } 263 | 264 | a[href]:after { 265 | content: " (" attr(href) ")"; 266 | } 267 | 268 | abbr[title]:after { 269 | content: " (" attr(title) ")"; 270 | } 271 | 272 | /* 273 | * Don't show links for images, or javascript/internal links 274 | */ 275 | 276 | .ir a:after, 277 | a[href^="javascript:"]:after, 278 | a[href^="#"]:after { 279 | content: ""; 280 | } 281 | 282 | pre, 283 | blockquote { 284 | border: 1px solid #999; 285 | page-break-inside: avoid; 286 | } 287 | 288 | thead { 289 | display: table-header-group; /* h5bp.com/t */ 290 | } 291 | 292 | tr, 293 | img { 294 | page-break-inside: avoid; 295 | } 296 | 297 | img { 298 | max-width: 100% !important; 299 | } 300 | 301 | @page { 302 | margin: 0.5cm; 303 | } 304 | 305 | p, 306 | h2, 307 | h3 { 308 | orphans: 3; 309 | widows: 3; 310 | } 311 | 312 | h2, 313 | h3 { 314 | page-break-after: avoid; 315 | } 316 | } 317 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v1.1.0 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | *display: inline; 35 | *zoom: 1; 36 | } 37 | 38 | /** 39 | * Prevent modern browsers from displaying `audio` without controls. 40 | * Remove excess height in iOS 5 devices. 41 | */ 42 | 43 | audio:not([controls]) { 44 | display: none; 45 | height: 0; 46 | } 47 | 48 | /** 49 | * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. 50 | * Known issue: no IE 6 support. 51 | */ 52 | 53 | [hidden] { 54 | display: none; 55 | } 56 | 57 | /* ========================================================================== 58 | Base 59 | ========================================================================== */ 60 | 61 | /** 62 | * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using 63 | * `em` units. 64 | * 2. Prevent iOS text size adjust after orientation change, without disabling 65 | * user zoom. 66 | */ 67 | 68 | html { 69 | font-size: 100%; /* 1 */ 70 | -webkit-text-size-adjust: 100%; /* 2 */ 71 | -ms-text-size-adjust: 100%; /* 2 */ 72 | } 73 | 74 | /** 75 | * Address `font-family` inconsistency between `textarea` and other form 76 | * elements. 77 | */ 78 | 79 | html, 80 | button, 81 | input, 82 | select, 83 | textarea { 84 | font-family: sans-serif; 85 | } 86 | 87 | /** 88 | * Address margins handled incorrectly in IE 6/7. 89 | */ 90 | 91 | body { 92 | margin: 0; 93 | } 94 | 95 | /* ========================================================================== 96 | Links 97 | ========================================================================== */ 98 | 99 | /** 100 | * Address `outline` inconsistency between Chrome and other browsers. 101 | */ 102 | 103 | a:focus { 104 | outline: thin dotted; 105 | } 106 | 107 | /** 108 | * Improve readability when focused and also mouse hovered in all browsers. 109 | */ 110 | 111 | a:active, 112 | a:hover { 113 | outline: 0; 114 | } 115 | 116 | /* ========================================================================== 117 | Typography 118 | ========================================================================== */ 119 | 120 | /** 121 | * Address font sizes and margins set differently in IE 6/7. 122 | * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, 123 | * and Chrome. 124 | */ 125 | 126 | h1 { 127 | font-size: 2em; 128 | margin: 0.67em 0; 129 | } 130 | 131 | h2 { 132 | font-size: 1.5em; 133 | margin: 0.83em 0; 134 | } 135 | 136 | h3 { 137 | font-size: 1.17em; 138 | margin: 1em 0; 139 | } 140 | 141 | h4 { 142 | font-size: 1em; 143 | margin: 1.33em 0; 144 | } 145 | 146 | h5 { 147 | font-size: 0.83em; 148 | margin: 1.67em 0; 149 | } 150 | 151 | h6 { 152 | font-size: 0.67em; 153 | margin: 2.33em 0; 154 | } 155 | 156 | /** 157 | * Address styling not present in IE 7/8/9, Safari 5, and Chrome. 158 | */ 159 | 160 | abbr[title] { 161 | border-bottom: 1px dotted; 162 | } 163 | 164 | /** 165 | * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. 166 | */ 167 | 168 | b, 169 | strong { 170 | font-weight: bold; 171 | } 172 | 173 | blockquote { 174 | margin: 1em 40px; 175 | } 176 | 177 | /** 178 | * Address styling not present in Safari 5 and Chrome. 179 | */ 180 | 181 | dfn { 182 | font-style: italic; 183 | } 184 | 185 | /** 186 | * Address differences between Firefox and other browsers. 187 | * Known issue: no IE 6/7 normalization. 188 | */ 189 | 190 | hr { 191 | -moz-box-sizing: content-box; 192 | box-sizing: content-box; 193 | height: 0; 194 | } 195 | 196 | /** 197 | * Address styling not present in IE 6/7/8/9. 198 | */ 199 | 200 | mark { 201 | background: #ff0; 202 | color: #000; 203 | } 204 | 205 | /** 206 | * Address margins set differently in IE 6/7. 207 | */ 208 | 209 | p, 210 | pre { 211 | margin: 1em 0; 212 | } 213 | 214 | /** 215 | * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. 216 | */ 217 | 218 | code, 219 | kbd, 220 | pre, 221 | samp { 222 | font-family: monospace, serif; 223 | _font-family: 'courier new', monospace; 224 | font-size: 1em; 225 | } 226 | 227 | /** 228 | * Improve readability of pre-formatted text in all browsers. 229 | */ 230 | 231 | pre { 232 | white-space: pre; 233 | white-space: pre-wrap; 234 | word-wrap: break-word; 235 | } 236 | 237 | /** 238 | * Address CSS quotes not supported in IE 6/7. 239 | */ 240 | 241 | q { 242 | quotes: none; 243 | } 244 | 245 | /** 246 | * Address `quotes` property not supported in Safari 4. 247 | */ 248 | 249 | q:before, 250 | q:after { 251 | content: ''; 252 | content: none; 253 | } 254 | 255 | /** 256 | * Address inconsistent and variable font size in all browsers. 257 | */ 258 | 259 | small { 260 | font-size: 80%; 261 | } 262 | 263 | /** 264 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 265 | */ 266 | 267 | sub, 268 | sup { 269 | font-size: 75%; 270 | line-height: 0; 271 | position: relative; 272 | vertical-align: baseline; 273 | } 274 | 275 | sup { 276 | top: -0.5em; 277 | } 278 | 279 | sub { 280 | bottom: -0.25em; 281 | } 282 | 283 | /* ========================================================================== 284 | Lists 285 | ========================================================================== */ 286 | 287 | /** 288 | * Address margins set differently in IE 6/7. 289 | */ 290 | 291 | dl, 292 | menu, 293 | ol, 294 | ul { 295 | margin: 1em 0; 296 | } 297 | 298 | dd { 299 | margin: 0 0 0 40px; 300 | } 301 | 302 | /** 303 | * Address paddings set differently in IE 6/7. 304 | */ 305 | 306 | menu, 307 | ol, 308 | ul { 309 | padding: 0 0 0 40px; 310 | } 311 | 312 | /** 313 | * Correct list images handled incorrectly in IE 7. 314 | */ 315 | 316 | nav ul, 317 | nav ol { 318 | list-style: none; 319 | list-style-image: none; 320 | } 321 | 322 | /* ========================================================================== 323 | Embedded content 324 | ========================================================================== */ 325 | 326 | /** 327 | * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. 328 | * 2. Improve image quality when scaled in IE 7. 329 | */ 330 | 331 | img { 332 | border: 0; /* 1 */ 333 | -ms-interpolation-mode: bicubic; /* 2 */ 334 | } 335 | 336 | /** 337 | * Correct overflow displayed oddly in IE 9. 338 | */ 339 | 340 | svg:not(:root) { 341 | overflow: hidden; 342 | } 343 | 344 | /* ========================================================================== 345 | Figures 346 | ========================================================================== */ 347 | 348 | /** 349 | * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. 350 | */ 351 | 352 | figure { 353 | margin: 0; 354 | } 355 | 356 | /* ========================================================================== 357 | Forms 358 | ========================================================================== */ 359 | 360 | /** 361 | * Correct margin displayed oddly in IE 6/7. 362 | */ 363 | 364 | form { 365 | margin: 0; 366 | } 367 | 368 | /** 369 | * Define consistent border, margin, and padding. 370 | */ 371 | 372 | fieldset { 373 | border: 1px solid #c0c0c0; 374 | margin: 0 2px; 375 | padding: 0.35em 0.625em 0.75em; 376 | } 377 | 378 | /** 379 | * 1. Correct color not being inherited in IE 6/7/8/9. 380 | * 2. Correct text not wrapping in Firefox 3. 381 | * 3. Correct alignment displayed oddly in IE 6/7. 382 | */ 383 | 384 | legend { 385 | border: 0; /* 1 */ 386 | padding: 0; 387 | white-space: normal; /* 2 */ 388 | *margin-left: -7px; /* 3 */ 389 | } 390 | 391 | /** 392 | * 1. Correct font size not being inherited in all browsers. 393 | * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, 394 | * and Chrome. 395 | * 3. Improve appearance and consistency in all browsers. 396 | */ 397 | 398 | button, 399 | input, 400 | select, 401 | textarea { 402 | font-size: 100%; /* 1 */ 403 | margin: 0; /* 2 */ 404 | vertical-align: baseline; /* 3 */ 405 | *vertical-align: middle; /* 3 */ 406 | } 407 | 408 | /** 409 | * Address Firefox 3+ setting `line-height` on `input` using `!important` in 410 | * the UA stylesheet. 411 | */ 412 | 413 | button, 414 | input { 415 | line-height: normal; 416 | } 417 | 418 | /** 419 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 420 | * All other form control elements do not inherit `text-transform` values. 421 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. 422 | * Correct `select` style inheritance in Firefox 4+ and Opera. 423 | */ 424 | 425 | button, 426 | select { 427 | text-transform: none; 428 | } 429 | 430 | /** 431 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 432 | * and `video` controls. 433 | * 2. Correct inability to style clickable `input` types in iOS. 434 | * 3. Improve usability and consistency of cursor style between image-type 435 | * `input` and others. 436 | * 4. Remove inner spacing in IE 7 without affecting normal text inputs. 437 | * Known issue: inner spacing remains in IE 6. 438 | */ 439 | 440 | button, 441 | html input[type="button"], /* 1 */ 442 | input[type="reset"], 443 | input[type="submit"] { 444 | -webkit-appearance: button; /* 2 */ 445 | cursor: pointer; /* 3 */ 446 | *overflow: visible; /* 4 */ 447 | } 448 | 449 | /** 450 | * Re-set default cursor for disabled elements. 451 | */ 452 | 453 | button[disabled], 454 | html input[disabled] { 455 | cursor: default; 456 | } 457 | 458 | /** 459 | * 1. Address box sizing set to content-box in IE 8/9. 460 | * 2. Remove excess padding in IE 8/9. 461 | * 3. Remove excess padding in IE 7. 462 | * Known issue: excess padding remains in IE 6. 463 | */ 464 | 465 | input[type="checkbox"], 466 | input[type="radio"] { 467 | box-sizing: border-box; /* 1 */ 468 | padding: 0; /* 2 */ 469 | *height: 13px; /* 3 */ 470 | *width: 13px; /* 3 */ 471 | } 472 | 473 | /** 474 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 475 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 476 | * (include `-moz` to future-proof). 477 | */ 478 | 479 | input[type="search"] { 480 | -webkit-appearance: textfield; /* 1 */ 481 | -moz-box-sizing: content-box; 482 | -webkit-box-sizing: content-box; /* 2 */ 483 | box-sizing: content-box; 484 | } 485 | 486 | /** 487 | * Remove inner padding and search cancel button in Safari 5 and Chrome 488 | * on OS X. 489 | */ 490 | 491 | input[type="search"]::-webkit-search-cancel-button, 492 | input[type="search"]::-webkit-search-decoration { 493 | -webkit-appearance: none; 494 | } 495 | 496 | /** 497 | * Remove inner padding and border in Firefox 3+. 498 | */ 499 | 500 | button::-moz-focus-inner, 501 | input::-moz-focus-inner { 502 | border: 0; 503 | padding: 0; 504 | } 505 | 506 | /** 507 | * 1. Remove default vertical scrollbar in IE 6/7/8/9. 508 | * 2. Improve readability and alignment in all browsers. 509 | */ 510 | 511 | textarea { 512 | overflow: auto; /* 1 */ 513 | vertical-align: top; /* 2 */ 514 | } 515 | 516 | /* ========================================================================== 517 | Tables 518 | ========================================================================== */ 519 | 520 | /** 521 | * Remove most spacing between table cells. 522 | */ 523 | 524 | table { 525 | border-collapse: collapse; 526 | border-spacing: 0; 527 | } 528 | -------------------------------------------------------------------------------- /css/infographic.css: -------------------------------------------------------------------------------- 1 | /* 2 | * HTML5 Boilerplate 3 | * 4 | * What follows is the result of much research on cross-browser styling. 5 | * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 6 | * Kroc Camen, and the H5BP dev community and team. 7 | */ 8 | 9 | /* ========================================================================== 10 | Base styles: opinionated defaults 11 | ========================================================================== */ 12 | 13 | html, 14 | button, 15 | input, 16 | select, 17 | textarea { 18 | color: #222; 19 | } 20 | 21 | body { 22 | font-family: "Roboto", sans-serif; 23 | font-size: 1em; 24 | line-height: 1.4; 25 | } 26 | 27 | /* 28 | * Remove text-shadow in selection highlight: h5bp.com/i 29 | * These selection declarations have to be separate. 30 | * Customize the background color to match your design. 31 | */ 32 | 33 | ::-moz-selection { 34 | background: #b3d4fc; 35 | text-shadow: none; 36 | } 37 | 38 | ::selection { 39 | background: #b3d4fc; 40 | text-shadow: none; 41 | } 42 | 43 | /* 44 | * A better looking default horizontal rule 45 | */ 46 | 47 | hr { 48 | display: block; 49 | height: 1px; 50 | border: 0; 51 | border-top: 1px solid #ccc; 52 | margin: 1em 0; 53 | padding: 0; 54 | } 55 | 56 | /* 57 | * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 58 | */ 59 | 60 | img { 61 | vertical-align: middle; 62 | } 63 | 64 | /* 65 | * Remove default fieldset styles. 66 | */ 67 | 68 | fieldset { 69 | border: 0; 70 | margin: 0; 71 | padding: 0; 72 | } 73 | 74 | /* 75 | * Allow only vertical resizing of textareas. 76 | */ 77 | 78 | textarea { 79 | resize: vertical; 80 | } 81 | 82 | /* ========================================================================== 83 | Chrome Frame prompt 84 | ========================================================================== */ 85 | 86 | .chromeframe { 87 | margin: 0.2em 0; 88 | background: #ccc; 89 | color: #000; 90 | padding: 0.2em 0; 91 | } 92 | 93 | /* ========================================================================== 94 | Author's custom styles 95 | ========================================================================== */ 96 | 97 | .listTitle { 98 | font-weight: 100; 99 | font-size: 2.5em; 100 | margin: 10px 20px; 101 | padding-left: 50px; 102 | } 103 | 104 | .listTitle--crime { 105 | color: #ff8800; 106 | background: url(../img/crime.png) no-repeat left center; 107 | } 108 | 109 | .listTitle--relationship { 110 | color: #9933cc; 111 | background: url(../img/relationship.png) no-repeat left center; 112 | } 113 | 114 | .listTitle--pay { 115 | color: #669900; 116 | background: url(../img/pay.png) no-repeat left center; 117 | } 118 | 119 | .infoGFX { 120 | width: 600px; 121 | height: 400px; 122 | position: relative; 123 | margin: 30px; 124 | border-radius: 10px; 125 | } 126 | 127 | .infoGFX--crime { 128 | border: 1px solid #ff8800; 129 | } 130 | 131 | .infoGFX--relationship { 132 | border: 1px solid #9933cc; 133 | } 134 | 135 | .infoGFX--pay { 136 | border: 1px solid #669900; 137 | } 138 | 139 | .crimeSVG { 140 | 141 | } 142 | 143 | .citySVG { 144 | font-weight: 100; 145 | font-size: 1.5em; 146 | fill: #fff; 147 | text-anchor: middle; 148 | } 149 | 150 | .percentageSVG { 151 | font-size: 3em; 152 | fill: #ff8800; 153 | text-anchor: middle; 154 | } 155 | 156 | .regionSVG { 157 | fill: #ffbb33; 158 | text-anchor: middle; 159 | } 160 | 161 | .legend { 162 | position: absolute; 163 | right: 20px; 164 | top: 160px; 165 | } 166 | 167 | .legendItem { 168 | font-size: 1.2em; 169 | text-align: right; 170 | color: #777777; 171 | } 172 | 173 | .relationshipSVG { 174 | float: left; 175 | } 176 | 177 | .peopleSVG { 178 | font-size: 2em; 179 | fill: #9933cc; 180 | text-anchor: middle; 181 | } 182 | 183 | .partnerPictogram { 184 | margin-left: 20px; 185 | } 186 | 187 | .pictogramRow { 188 | 189 | } 190 | 191 | .partnersLabel { 192 | color: #9933cc; 193 | } 194 | 195 | .singlesLabel { 196 | color: #ba9bc9; 197 | } 198 | 199 | .partnerGraph { 200 | display: inline-block; 201 | margin-right: 10px; 202 | margin-bottom: 5px; 203 | height: 35px; 204 | 205 | } 206 | 207 | .partnerGraph--MF { 208 | background: url("../img/MF.png") no-repeat left center; 209 | } 210 | 211 | .partnerGraph--FF { 212 | background: url("../img/FF.png") no-repeat left center; 213 | } 214 | 215 | .partnerGraph--MM { 216 | background: url("../img/MM.png") no-repeat left center; 217 | } 218 | 219 | .singleGraph { 220 | display: inline-block; 221 | margin-right: 10px; 222 | margin-bottom: 5px; 223 | height: 35px; 224 | } 225 | 226 | .singleGraph--M { 227 | background: url("../img/M.png") no-repeat left center; 228 | } 229 | 230 | .singleGraph--F { 231 | background: url("../img/F.png") no-repeat left center; 232 | } 233 | 234 | .payGraph { 235 | width: 90%; 236 | margin: 10px auto 30px auto; 237 | -webkit-box-sizing: border-box; 238 | -moz-box-sizing: border-box; 239 | box-sizing: border-box; 240 | line-height: 0; 241 | } 242 | 243 | .payBorder { 244 | display: inline-block; 245 | width: 50%; 246 | height: 10px; 247 | -webkit-box-sizing: border-box; 248 | -moz-box-sizing: border-box; 249 | box-sizing: border-box; 250 | background-color: #ededed; 251 | } 252 | 253 | .payBorder--left { 254 | border-left: 1px solid white; 255 | border-right: 1px dotted black; 256 | } 257 | 258 | .payBorder--right { 259 | border-left: 1px dotted black; 260 | border-right: 1px solid white; 261 | } 262 | 263 | .menGraph { 264 | display: inline-block; 265 | position: relative; 266 | } 267 | 268 | .menGraph--parts { 269 | -webkit-box-sizing: border-box; 270 | -moz-box-sizing: border-box; 271 | box-sizing: border-box; 272 | background-color: #669900; 273 | display: inline-block; 274 | height: 70px; 275 | border: 1px solid white; 276 | border-top: 2px solid white; 277 | border-bottom: 2px solid white; 278 | } 279 | 280 | .menGraph--parts:first-child { 281 | border-right: 1px dotted black; 282 | } 283 | 284 | .menGraph--parts:nth-child(2) { 285 | border-left: 1px dotted black; 286 | } 287 | 288 | .womenGraph { 289 | display: inline-block; 290 | position: relative; 291 | } 292 | 293 | .womenGraph--parts { 294 | -webkit-box-sizing: border-box; 295 | -moz-box-sizing: border-box; 296 | box-sizing: border-box; 297 | background-color: #99cc00; 298 | display: inline-block; 299 | height: 70px; 300 | border: 1px solid white; 301 | border-top: 2px solid white; 302 | border-bottom: 2px solid white; 303 | } 304 | 305 | .menText { 306 | position: absolute; 307 | top: 15px; 308 | left: 10px; 309 | height: 40px; 310 | font-size: 2em; 311 | color: white; 312 | line-height: 1.3em; 313 | font-weight: 100; 314 | text-align: left; 315 | padding-left: 50px; 316 | background: url("../img/male.png") no-repeat left center; 317 | } 318 | 319 | .womenText { 320 | position: absolute; 321 | top: 15px; 322 | right: 10px; 323 | height: 40px; 324 | font-size: 2em; 325 | color: white; 326 | line-height: 1.3em; 327 | font-weight: 100; 328 | text-align: right; 329 | padding-right: 50px; 330 | background: url("../img/female.png") no-repeat right center; 331 | } 332 | 333 | .payGap { 334 | font-size: 1.5em; 335 | line-height: 2em; 336 | color: #669900; 337 | width: 50%; 338 | text-align: right; 339 | margin-bottom: 10px; 340 | } 341 | 342 | .leaderboard { 343 | font-size: 1.5em; 344 | line-height: 1.2em; 345 | color: #a9a9a9; 346 | } 347 | 348 | .leaderboardLeft { 349 | display: inline-block; 350 | width: 30%; 351 | float: left; 352 | clear: left; 353 | } 354 | 355 | .leaderboardRight { 356 | display: inline-block; 357 | float: left; 358 | } 359 | 360 | 361 | /* ========================================================================== 362 | Helper classes 363 | ========================================================================== */ 364 | 365 | /* 366 | * Image replacement 367 | */ 368 | 369 | .ir { 370 | background-color: transparent; 371 | border: 0; 372 | overflow: hidden; 373 | /* IE 6/7 fallback */ 374 | *text-indent: -9999px; 375 | } 376 | 377 | .ir:before { 378 | content: ""; 379 | display: block; 380 | width: 0; 381 | height: 150%; 382 | } 383 | 384 | /* 385 | * Hide from both screenreaders and browsers: h5bp.com/u 386 | */ 387 | 388 | .hidden { 389 | display: none !important; 390 | visibility: hidden; 391 | } 392 | 393 | /* 394 | * Hide only visually, but have it available for screenreaders: h5bp.com/v 395 | */ 396 | 397 | .visuallyhidden { 398 | border: 0; 399 | clip: rect(0 0 0 0); 400 | height: 1px; 401 | margin: -1px; 402 | overflow: hidden; 403 | padding: 0; 404 | position: absolute; 405 | width: 1px; 406 | } 407 | 408 | /* 409 | * Extends the .visuallyhidden class to allow the element to be focusable 410 | * when navigated to via the keyboard: h5bp.com/p 411 | */ 412 | 413 | .visuallyhidden.focusable:active, 414 | .visuallyhidden.focusable:focus { 415 | clip: auto; 416 | height: auto; 417 | margin: 0; 418 | overflow: visible; 419 | position: static; 420 | width: auto; 421 | } 422 | 423 | /* 424 | * Hide visually and from screenreaders, but maintain layout 425 | */ 426 | 427 | .invisible { 428 | visibility: hidden; 429 | } 430 | 431 | /* 432 | * Clearfix: contain floats 433 | * 434 | * For modern browsers 435 | * 1. The space content is one way to avoid an Opera bug when the 436 | * `contenteditable` attribute is included anywhere else in the document. 437 | * Otherwise it causes space to appear at the top and bottom of elements 438 | * that receive the `clearfix` class. 439 | * 2. The use of `table` rather than `block` is only necessary if using 440 | * `:before` to contain the top-margins of child elements. 441 | */ 442 | 443 | .clearfix:before, 444 | .clearfix:after { 445 | content: " "; /* 1 */ 446 | display: table; /* 2 */ 447 | } 448 | 449 | .clearfix:after { 450 | clear: both; 451 | } 452 | 453 | /* 454 | * For IE 6/7 only 455 | * Include this rule to trigger hasLayout and contain floats. 456 | */ 457 | 458 | .clearfix { 459 | *zoom: 1; 460 | } 461 | 462 | /* ========================================================================== 463 | EXAMPLE Media Queries for Responsive Design. 464 | Theses examples override the primary ('mobile first') styles. 465 | Modify as content requires. 466 | ========================================================================== */ 467 | 468 | @media only screen and (min-width: 35em) { 469 | /* Style adjustments for viewports that meet the condition */ 470 | } 471 | 472 | @media print, 473 | (-o-min-device-pixel-ratio: 5/4), 474 | (-webkit-min-device-pixel-ratio: 1.25), 475 | (min-resolution: 120dpi) { 476 | /* Style adjustments for high resolution devices */ 477 | } 478 | 479 | /* ========================================================================== 480 | Print styles. 481 | Inlined to avoid required HTTP connection: h5bp.com/r 482 | ========================================================================== */ 483 | 484 | @media print { 485 | * { 486 | background: transparent !important; 487 | color: #000 !important; /* Black prints faster: h5bp.com/s */ 488 | box-shadow: none !important; 489 | text-shadow: none !important; 490 | } 491 | 492 | a, 493 | a:visited { 494 | text-decoration: underline; 495 | } 496 | 497 | a[href]:after { 498 | content: " (" attr(href) ")"; 499 | } 500 | 501 | abbr[title]:after { 502 | content: " (" attr(title) ")"; 503 | } 504 | 505 | /* 506 | * Don't show links for images, or javascript/internal links 507 | */ 508 | 509 | .ir a:after, 510 | a[href^="javascript:"]:after, 511 | a[href^="#"]:after { 512 | content: ""; 513 | } 514 | 515 | pre, 516 | blockquote { 517 | border: 1px solid #999; 518 | page-break-inside: avoid; 519 | } 520 | 521 | thead { 522 | display: table-header-group; /* h5bp.com/t */ 523 | } 524 | 525 | tr, 526 | img { 527 | page-break-inside: avoid; 528 | } 529 | 530 | img { 531 | max-width: 100% !important; 532 | } 533 | 534 | @page { 535 | margin: 0.5cm; 536 | } 537 | 538 | p, 539 | h2, 540 | h3 { 541 | orphans: 3; 542 | widows: 3; 543 | } 544 | 545 | h2, 546 | h3 { 547 | page-break-after: avoid; 548 | } 549 | } 550 | -------------------------------------------------------------------------------- /js/vendor/modernizr-2.6.2.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-mq-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function D(a){j.cssText=a}function E(a,b){return D(n.join(a+";")+(b||""))}function F(a,b){return typeof a===b}function G(a,b){return!!~(""+a).indexOf(b)}function H(a,b){for(var d in a){var e=a[d];if(!G(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function I(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:F(f,"function")?f.bind(d||b):f}return!1}function J(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return F(b,"string")||F(b,"undefined")?H(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),I(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d',a,""].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return y("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},A=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=F(e[d],"function"),F(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),B={}.hasOwnProperty,C;!F(B,"undefined")&&!F(B.call,"undefined")?C=function(a,b){return B.call(a,b)}:C=function(a,b){return b in a&&F(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return J("flexWrap")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!F(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!J("indexedDB",a)},s.hashchange=function(){return A("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return D("background-color:rgba(150,255,150,.5)"),G(j.backgroundColor,"rgba")},s.hsla=function(){return D("background-color:hsla(120,40%,100%,.5)"),G(j.backgroundColor,"rgba")||G(j.backgroundColor,"hsla")},s.multiplebgs=function(){return D("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return J("backgroundSize")},s.borderimage=function(){return J("borderImage")},s.borderradius=function(){return J("borderRadius")},s.boxshadow=function(){return J("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return E("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return J("animationName")},s.csscolumns=function(){return J("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return D((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),G(j.backgroundImage,"gradient")},s.cssreflections=function(){return J("boxReflect")},s.csstransforms=function(){return!!J("transform")},s.csstransforms3d=function(){var a=!!J("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return J("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var L in s)C(s,L)&&(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?"":"no-")+x));return e.input||K(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)C(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},D(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=z,e.hasEvent=A,e.testProp=function(a){return H([a])},e.testAllProps=J,e.testStyles=y,e.prefixed=function(a,b,c){return b?J(a,b,c):J(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f 3.7 -> [1, 1, 1, 0.7] 234 | // 20,000 -> 2.0 -> [1, 1] 235 | // 13,000 -> 1.3 -> [1, 0.3] 236 | var makePictoData = function(d, i, array) { 237 | var number = d / 10000, 238 | remainder, 239 | myArray = []; 240 | 241 | if (d <= 0) { 242 | myArray.push(0); 243 | } 244 | else { 245 | remainder = number - Math.floor(number); 246 | number = Math.floor(number); 247 | 248 | while (number) { 249 | myArray.push(1); 250 | --number; 251 | } 252 | 253 | if (remainder > 1e-6) myArray.push(remainder); 254 | } 255 | array[i] = myArray; 256 | }; 257 | 258 | singleData.forEach(makePictoData); 259 | partnerData.forEach(makePictoData); 260 | 261 | 262 | // Generate ordinal colormap functions 263 | var relationshipPalette = [PURPLE_LT, PURPLE_DK]; 264 | var relationshipColors = d3.scale.ordinal() 265 | .range(relationshipPalette); 266 | 267 | var genderPalette = [GRAY_LT, GRAY_DK, "#ffffff"]; 268 | var genderColors = d3.scale.ordinal() 269 | .range(genderPalette); 270 | 271 | 272 | // Generate donut graphs 273 | var relationshipArc = d3.svg.arc() 274 | .outerRadius(RADIUS - 10) 275 | .innerRadius(RADIUS - 70); 276 | 277 | var relationshipPie = d3.layout.pie() 278 | .sort(null) 279 | .value(function(d) {return d;}); 280 | 281 | var relationshipSVG = d3.select(".infoGFX--relationship").append("svg") 282 | .attr("class", "relationshipSVG") 283 | .attr("width", 300) 284 | .attr("height", HEIGHT); 285 | 286 | var relationshipPieChart = relationshipSVG.append("g") 287 | .attr("transform", "translate(" + (RADIUS + MARGIN) + "," + HEIGHT / 1.7 + ")") 288 | .selectAll("relationshipArc") 289 | .data(relationshipPie(relationshipStatusData)); 290 | 291 | relationshipPieChart.enter() 292 | .append("g") 293 | .attr("class", "relationshipArc") 294 | .append("path") 295 | .style("fill", function(d, i) {return relationshipColors(i);}) 296 | .style("stroke", "#ffffff") 297 | .style("stroke-width", 5) 298 | .attr("d", relationshipArc); 299 | 300 | var genderArc = d3.svg.arc() 301 | .outerRadius(RADIUS - 5) 302 | .innerRadius(RADIUS - 20); 303 | 304 | var genderPie = d3.layout.pie() 305 | .sort(null) 306 | .value(function(d) {return d;}); 307 | 308 | var genderPieChart = relationshipPieChart.selectAll("genderArc") 309 | .data(genderPie(genderStatusData)); 310 | 311 | genderPieChart.enter() 312 | .append("g") 313 | .attr("class", "genderArc") 314 | .append("path") 315 | .style("fill", function(d, i) {return genderColors(i);}) 316 | .style("stroke", "#ffffff") 317 | .style("stroke-width", 5) 318 | .attr("d", genderArc); 319 | 320 | relationshipSVG.append("text") 321 | .attr("class", "peopleSVG") 322 | .attr("x", (RADIUS + MARGIN)) 323 | .attr("y", HEIGHT / 1.7) 324 | .attr("dy", "0.3em") 325 | .text(relationshipTotal / 1000 + "k"); 326 | 327 | 328 | // Generate pictograms 329 | var partnerPictogram = d3.select(".infoGFX--relationship").append("div") 330 | .attr("class", "partnerPictogram"); 331 | 332 | partnerPictogram.append("div") 333 | .attr("class", "partnersLabel") 334 | .text(relationshipPartners / 1000 + "k partners"); 335 | 336 | var partnerMFgraph = partnerPictogram.append("div") 337 | .attr("class", "pictogramRow"); 338 | 339 | partnerMFgraph.selectAll(".partnerGraph--MF") 340 | .data(partnerData[0]) 341 | .enter() 342 | .append("div") 343 | .attr("class", "partnerGraph partnerGraph--MF") 344 | .style("width", function(d) {return (d * 30) + "px";}); 345 | 346 | var partnerFFgraph = partnerPictogram.append("div") 347 | .attr("class", "pictogramRow"); 348 | 349 | partnerFFgraph.selectAll(".partnerGraph--FF") 350 | .data(partnerData[1]) 351 | .enter() 352 | .append("div") 353 | .attr("class", "partnerGraph partnerGraph--FF") 354 | .style("width", function(d) {return (d * 30) + "px";}); 355 | 356 | var partnerMMgraph = partnerPictogram.append("div") 357 | .attr("class", "pictogramRow"); 358 | 359 | partnerMMgraph.selectAll(".partnerGraph--MM") 360 | .data(partnerData[2]) 361 | .enter() 362 | .append("div") 363 | .attr("class", "partnerGraph partnerGraph--MM") 364 | .style("width", function(d) {return (d * 30) + "px";}); 365 | 366 | partnerPictogram.append("div") 367 | .attr("class", "singlesLabel") 368 | .text(relationshipSingles / 1000 + "k singles"); 369 | 370 | var singleMgraph = partnerPictogram.append("div") 371 | .attr("class", "pictogramRow"); 372 | 373 | singleMgraph.selectAll(".singleGraph--M") 374 | .data(singleData[0]) 375 | .enter() 376 | .append("div") 377 | .attr("class", "singleGraph singleGraph--M") 378 | .style("width", function(d) {return (d * 20) + "px";}); 379 | 380 | var singleFgraph = partnerPictogram.append("div") 381 | .attr("class", "pictogramRow"); 382 | 383 | singleFgraph.selectAll(".singleGraph--F") 384 | .data(singleData[1]) 385 | .enter() 386 | .append("div") 387 | .attr("class", "singleGraph singleGraph--F") 388 | .style("width", function(d) {return (d * 20) + "px";}); 389 | 390 | 391 | // ***** PAY infographic ***** 392 | // Mock JSON relationship dataset 393 | 394 | var payJSON = { 395 | "leaderboard": { 396 | "croydon": 6000, 397 | "lambeth": 5500, 398 | "southwark": 5000, 399 | "camden": 4500, 400 | "chelsea": 2000 401 | }, 402 | "pay": { 403 | "men": 45000, 404 | "women": 30000 405 | } 406 | }; 407 | 408 | var payLeaderboard = payJSON["leaderboard"], 409 | payBreakdown = payJSON["pay"], 410 | payMen = payBreakdown["men"], 411 | payWomen = payBreakdown["women"], 412 | totalPay, averagePay, diffPay, 413 | payData = [], 414 | leaderboardKeys, 415 | payLeaderboardData = []; 416 | 417 | // Generate stats 418 | totalPay = payMen + payWomen; 419 | averagePay = totalPay / 2; 420 | diffPay = payMen - averagePay; // positive when payMen > payWomen 421 | 422 | var makePayData = function(pay, averagePay) { 423 | var myArray = []; 424 | 425 | if (pay < averagePay) { 426 | myArray = [pay]; 427 | } else { 428 | myArray = [averagePay, (pay - averagePay)]; 429 | } 430 | 431 | return myArray; 432 | }; 433 | 434 | payData.push(makePayData(payMen, averagePay)); 435 | payData.push(makePayData(payWomen, averagePay)); 436 | 437 | leaderboardKeys = Object.keys(payLeaderboard); 438 | 439 | for (i = 0; i < leaderboardKeys.length; i++) { 440 | payLeaderboardData.push([leaderboardKeys[i], payLeaderboard[leaderboardKeys[i]]]); 441 | } 442 | 443 | 444 | // Generate graph 445 | var payGraph = d3.select(".infoGFX--pay").append("div") 446 | .attr("class", "payGraph"); 447 | 448 | payGraph.append("div") 449 | .attr("class", "payBorder payBorder--left"); 450 | payGraph.append("div") 451 | .attr("class", "payBorder payBorder--right"); 452 | 453 | var menGraph = payGraph.append("div") 454 | .attr("class", "menGraph") 455 | .style("width", function(d) {return (payMen / totalPay * 100) + "%"}); 456 | 457 | menGraph.selectAll(".menGraph--parts") 458 | .data(payData[0]) 459 | .enter() 460 | .append("div") 461 | .attr("class", "menGraph--parts") 462 | .style("width", function(d) {return (d / payMen * 100) + "%"}); 463 | 464 | menGraph.append("div") 465 | .attr("class", "menText") 466 | .text(function(d) {return "£" + (payMen / 1000) + "k";}); 467 | 468 | var womenGraph = payGraph.append("div") 469 | .attr("class", "womenGraph") 470 | // .text("£" + Math.floor(payWomen / 1000) + "k") 471 | .style("width", function(d) {return (payWomen / totalPay * 100) + "%"}); 472 | 473 | womenGraph.selectAll(".womenGraph--parts") 474 | .data(payData[1]) 475 | .enter() 476 | .append("div") 477 | .attr("class", "womenGraph--parts") 478 | .style("width", function(d) {return (d / payWomen * 100) + "%"}); 479 | 480 | payGraph.append("div") 481 | .attr("class", "payBorder payBorder--left"); 482 | payGraph.append("div") 483 | .attr("class", "payBorder payBorder--right"); 484 | 485 | womenGraph.append("div") 486 | .attr("class", "womenText") 487 | .text(function(d) {return "£" + (payWomen / 1000) + "k";}); 488 | 489 | payGraph.append("div") 490 | .attr("class", "payGap") 491 | .text("£" + (diffPay * 2) + " gap average"); 492 | 493 | var payLeaderboardGraph = payGraph.append("div") 494 | .attr("class", "leaderboard"); 495 | 496 | for (var i = 0; i < payLeaderboardData.length; i++) { 497 | payLeaderboardGraph.append("div") 498 | .attr("class", "leaderboardLeft") 499 | .text(payLeaderboardData[i][0]); 500 | payLeaderboardGraph.append("div") 501 | .attr("class", "leaderboardRight") 502 | .text(payLeaderboardData[i][1]); 503 | } 504 | 505 | 506 | -------------------------------------------------------------------------------- /js/vendor/jquery-1.9.0.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v1.9.0 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license */(function(e,t){"use strict";function n(e){var t=e.length,n=st.type(e);return st.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}function r(e){var t=Tt[e]={};return st.each(e.match(lt)||[],function(e,n){t[n]=!0}),t}function i(e,n,r,i){if(st.acceptData(e)){var o,a,s=st.expando,u="string"==typeof n,l=e.nodeType,c=l?st.cache:e,f=l?e[s]:e[s]&&s;if(f&&c[f]&&(i||c[f].data)||!u||r!==t)return f||(l?e[s]=f=K.pop()||st.guid++:f=s),c[f]||(c[f]={},l||(c[f].toJSON=st.noop)),("object"==typeof n||"function"==typeof n)&&(i?c[f]=st.extend(c[f],n):c[f].data=st.extend(c[f].data,n)),o=c[f],i||(o.data||(o.data={}),o=o.data),r!==t&&(o[st.camelCase(n)]=r),u?(a=o[n],null==a&&(a=o[st.camelCase(n)])):a=o,a}}function o(e,t,n){if(st.acceptData(e)){var r,i,o,a=e.nodeType,u=a?st.cache:e,l=a?e[st.expando]:st.expando;if(u[l]){if(t&&(r=n?u[l]:u[l].data)){st.isArray(t)?t=t.concat(st.map(t,st.camelCase)):t in r?t=[t]:(t=st.camelCase(t),t=t in r?[t]:t.split(" "));for(i=0,o=t.length;o>i;i++)delete r[t[i]];if(!(n?s:st.isEmptyObject)(r))return}(n||(delete u[l].data,s(u[l])))&&(a?st.cleanData([e],!0):st.support.deleteExpando||u!=u.window?delete u[l]:u[l]=null)}}}function a(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(Nt,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:wt.test(r)?st.parseJSON(r):r}catch(o){}st.data(e,n,r)}else r=t}return r}function s(e){var t;for(t in e)if(("crimeJSON"!==t||!st.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}function u(){return!0}function l(){return!1}function c(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}function f(e,t,n){if(t=t||0,st.isFunction(t))return st.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return st.grep(e,function(e){return e===t===n});if("string"==typeof t){var r=st.grep(e,function(e){return 1===e.nodeType});if(Wt.test(t))return st.filter(t,r,!n);t=st.filter(t,r)}return st.grep(e,function(e){return st.inArray(e,t)>=0===n})}function p(e){var t=zt.split("|"),n=e.createDocumentFragment();if(n.createElement)for(;t.length;)n.createElement(t.pop());return n}function d(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function h(e){var t=e.getAttributeNode("type");return e.type=(t&&t.specified)+"/"+e.type,e}function g(e){var t=nn.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function m(e,t){for(var n,r=0;null!=(n=e[r]);r++)st._data(n,"globalEval",!t||st._data(t[r],"globalEval"))}function y(e,t){if(1===t.nodeType&&st.hasData(e)){var n,r,i,o=st._data(e),a=st._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)st.event.add(t,n,s[n][r])}a.data&&(a.data=st.extend({},a.data))}}function v(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!st.support.noCloneEvent&&t[st.expando]){r=st._data(t);for(i in r.events)st.removeEvent(t,i,r.handle);t.removeAttribute(st.expando)}"script"===n&&t.text!==e.text?(h(t).text=e.text,g(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),st.support.html5Clone&&e.innerHTML&&!st.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Zt.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}function b(e,n){var r,i,o=0,a=e.getElementsByTagName!==t?e.getElementsByTagName(n||"*"):e.querySelectorAll!==t?e.querySelectorAll(n||"*"):t;if(!a)for(a=[],r=e.childNodes||e;null!=(i=r[o]);o++)!n||st.nodeName(i,n)?a.push(i):st.merge(a,b(i,n));return n===t||n&&st.nodeName(e,n)?st.merge([e],a):a}function x(e){Zt.test(e.type)&&(e.defaultChecked=e.checked)}function T(e,t){if(t in e)return t;for(var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Nn.length;i--;)if(t=Nn[i]+n,t in e)return t;return r}function w(e,t){return e=t||e,"none"===st.css(e,"display")||!st.contains(e.ownerDocument,e)}function N(e,t){for(var n,r=[],i=0,o=e.length;o>i;i++)n=e[i],n.style&&(r[i]=st._data(n,"olddisplay"),t?(r[i]||"none"!==n.style.display||(n.style.display=""),""===n.style.display&&w(n)&&(r[i]=st._data(n,"olddisplay",S(n.nodeName)))):r[i]||w(n)||st._data(n,"olddisplay",st.css(n,"display")));for(i=0;o>i;i++)n=e[i],n.style&&(t&&"none"!==n.style.display&&""!==n.style.display||(n.style.display=t?r[i]||"":"none"));return e}function C(e,t,n){var r=mn.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function k(e,t,n,r,i){for(var o=n===(r?"border":"content")?4:"WIDTH"===t?1:0,a=0;4>o;o+=2)"margin"===n&&(a+=st.css(e,n+wn[o],!0,i)),r?("content"===n&&(a-=st.css(e,"padding"+wn[o],!0,i)),"margin"!==n&&(a-=st.css(e,"border"+wn[o]+"Width",!0,i))):(a+=st.css(e,"padding"+wn[o],!0,i),"padding"!==n&&(a+=st.css(e,"border"+wn[o]+"Width",!0,i)));return a}function E(e,t,n){var r=!0,i="WIDTH"===t?e.offsetWidth:e.offsetHeight,o=ln(e),a=st.support.boxSizing&&"border-box"===st.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=un(e,t,o),(0>i||null==i)&&(i=e.style[t]),yn.test(i))return i;r=a&&(st.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+k(e,t,n||(a?"border":"content"),r,o)+"px"}function S(e){var t=V,n=bn[e];return n||(n=A(e,t),"none"!==n&&n||(cn=(cn||st("