D3
14 |Data Driven Documents
15 | this = http://vadim.ogievetsky.com/IntroD3 16 |17 | github = http://github.com/vogievetsky/IntroD3 18 |
├── .gitignore ├── LICENSE ├── README.md ├── d3 ├── LICENSE └── d3.v3.js ├── data └── browsers.js ├── deck ├── deck.css ├── deck.js ├── deck.less └── slide_maker.js ├── example_bar_chart.html ├── example_sort.html ├── images ├── inspect.png └── svgbook.png ├── index.html ├── slide_maker.js ├── slides.coffee ├── slides.js └── template.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012, Vadim Ogievetsky 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | * The name Vadim Ogievetsky may not be used to endorse or promote products 15 | derived from this software without specific prior written permission. 16 | 17 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 18 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 19 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 20 | DISCLAIMED. IN NO EVENT SHALL VADIM OGIEVETSKY BE LIABLE FOR ANY DIRECT, 21 | INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, 22 | BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 23 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY 24 | OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 25 | NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, 26 | EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | D3 slides in D3 that I put together after becoming frustrated with explaining D3 using PowerPoint. 2 | 3 | Questions, comments, contributions, feedback, etc. 4 | 5 | ```javascript 6 | // base64 email for fun. 7 | sendEmailTo(atob("dmFkaW1Ab2dpZXZldHNreS5jb20=")) 8 | ``` 9 | 10 | ## License 11 | 12 | MIT © [Vadim Ogievetsky](http://vadim.ogievetsky.com) 13 | -------------------------------------------------------------------------------- /d3/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013, Michael Bostock 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | * The name Michael Bostock may not be used to endorse or promote products 15 | derived from this software without specific prior written permission. 16 | 17 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 18 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 19 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 20 | DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT, 21 | INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, 22 | BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 23 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY 24 | OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 25 | NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, 26 | EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 27 | -------------------------------------------------------------------------------- /data/browsers.js: -------------------------------------------------------------------------------- 1 | var colors = { 2 | 'IE10': "#00BBFF", 3 | 'IE9': "#003BFF", 4 | 'IE8': "#003BB2", 5 | 'IE7': "#0062C4", 6 | 'IE6': "#008ED6", 7 | 'IE5': "#00BFE5", 8 | 'IE4': "#00ddff", 9 | 'Firefox': "#E58714", 10 | 'Mozilla': "#C1650F", 11 | 'Chrome': "#FCD610", 12 | 'Safari': "#5384B1", 13 | 'Opera': "#FF3333", 14 | 'Opera 8': "#E52D2D", 15 | 'Opera 7': "#E23F3F", 16 | 'AOL': "#FFD52F", 17 | 'Netscape 7': "#00AFB5", 18 | 'Netscape 5': "#00D5D8", 19 | 'Netscape 4': "#00EFEF", 20 | 'Netscape 3': "#14FFFF", 21 | }; 22 | 23 | var stats = [ 24 | { month: "January 2012", data: { 25 | "IE10": 0.010, 26 | "IE9": 0.053, 27 | "IE8": 0.105, 28 | "IE7": 0.031, 29 | "IE6": 0.011, 30 | "Firefox": 0.371, 31 | "Chrome": 0.353, 32 | "Safari": 0.043, 33 | "Opera": 0.024 34 | }}, 35 | { month: "December 2011", data: { 36 | "IE9": 0.051, 37 | "IE8": 0.107, 38 | "IE7": 0.032, 39 | "IE6": 0.012, 40 | "Firefox": 0.377, 41 | "Chrome": 0.346, 42 | "Safari": 0.042, 43 | "Opera": 0.025 44 | }}, 45 | { month: "November 2011", data: { 46 | "IE9": 0.051, 47 | "IE8": 0.115, 48 | "IE7": 0.034, 49 | "IE6": 0.012, 50 | "Firefox": 0.381, 51 | "Chrome": 0.334, 52 | "Safari": 0.042, 53 | "Opera": 0.024 54 | }}, 55 | { month: "October 2011", data: { 56 | "IE9": 0.051, 57 | "IE8": 0.118, 58 | "IE7": 0.035, 59 | "IE6": 0.013, 60 | "Firefox": 0.387, 61 | "Chrome": 0.323, 62 | "Safari": 0.042, 63 | "Opera": 0.024 64 | }}, 65 | { month: "September 2011", data: { 66 | "IE9": 0.048, 67 | "IE8": 0.124, 68 | "IE7": 0.039, 69 | "IE6": 0.018, 70 | "Firefox": 0.397, 71 | "Chrome": 0.305, 72 | "Safari": 0.040, 73 | "Opera": 0.022, 74 | }}, 75 | { month: "August 2011", data: { 76 | "IE9": 0.042, 77 | "IE8": 0.119, 78 | "IE7": 0.042, 79 | "IE6": 0.020, 80 | "Firefox": 0.406, 81 | "Chrome": 0.303, 82 | "Safari": 0.038, 83 | "Opera": 0.023, 84 | }}, 85 | { month: "July 2011", data: { 86 | "IE9": 0.039, 87 | "IE8": 0.117, 88 | "IE7": 0.041, 89 | "IE6": 0.023, 90 | "Firefox": 0.420, 91 | "Chrome": 0.294, 92 | "Safari": 0.036, 93 | "Opera": 0.024, 94 | }}, 95 | { month: "June 2011", data: { 96 | "IE9": 0.036, 97 | "IE8": 0.129, 98 | "IE7": 0.044, 99 | "IE6": 0.023, 100 | "Firefox": 0.422, 101 | "Chrome": 0.279, 102 | "Safari": 0.037, 103 | "Opera": 0.024, 104 | }}, 105 | { month: "May 2011", data: { 106 | "IE9": 0.031, 107 | "IE8": 0.141, 108 | "IE7": 0.053, 109 | "IE6": 0.024, 110 | "Firefox": 0.424, 111 | "Chrome": 0.259, 112 | "Safari": 0.040, 113 | "Opera": 0.024, 114 | }}, 115 | { month: "April 2011", data: { 116 | "IE9": 0.021, 117 | "IE8": 0.148, 118 | "IE7": 0.049, 119 | "IE6": 0.025, 120 | "Firefox": 0.429, 121 | "Chrome": 0.256, 122 | "Safari": 0.041, 123 | "Opera": 0.026, 124 | }}, 125 | { month: "March 2011", data: { 126 | "IE9": 0.011, 127 | "IE8": 0.163, 128 | "IE7": 0.054, 129 | "IE6": 0.030, 130 | "Firefox": 0.422, 131 | "Chrome": 0.250, 132 | "Safari": 0.040, 133 | "Opera": 0.025, 134 | }}, 135 | { month: "February 2011", data: { 136 | "IE9": 0.006, 137 | "IE8": 0.167, 138 | "IE7": 0.057, 139 | "IE6": 0.035, 140 | "Firefox": 0.424, 141 | "Chrome": 0.241, 142 | "Safari": 0.041, 143 | "Opera": 0.025, 144 | }}, 145 | { month: "January 2011", data: { 146 | "IE9": 0.005, 147 | "IE8": 0.166, 148 | "IE7": 0.057, 149 | "IE6": 0.038, 150 | "Firefox": 0.428, 151 | "Chrome": 0.238, 152 | "Safari": 0.040, 153 | "Opera": 0.025, 154 | }}, 155 | { month: "December 2010", data: { 156 | "IE9": 0.005, 157 | "IE8": 0.165, 158 | "IE7": 0.061, 159 | "IE6": 0.044, 160 | "Firefox": 0.435, 161 | "Chrome": 0.224, 162 | "Safari": 0.038, 163 | "Opera": 0.022, 164 | }}, 165 | { month: "November 2010", data: { 166 | "IE9": 0.004, 167 | "IE8": 0.176, 168 | "IE7": 0.065, 169 | "IE6": 0.041, 170 | "Firefox": 0.440, 171 | "Chrome": 0.205, 172 | "Safari": 0.040, 173 | "Opera": 0.023, 174 | }}, 175 | { month: "October 2010", data: { 176 | "IE9": 0.004, 177 | "IE8": 0.173, 178 | "IE7": 0.072, 179 | "IE6": 0.048, 180 | "Firefox": 0.441, 181 | "Chrome": 0.192, 182 | "Safari": 0.039, 183 | "Opera": 0.022, 184 | }}, 185 | { month: "September 2010", data: { 186 | "IE9": 0.002, 187 | "IE8": 0.173, 188 | "IE7": 0.080, 189 | "IE6": 0.056, 190 | "Firefox": 0.451, 191 | "Chrome": 0.173, 192 | "Safari": 0.037, 193 | "Opera": 0.022, 194 | }}, 195 | { month: "August 2010", data: { 196 | "IE8": 0.162, 197 | "IE7": 0.078, 198 | "IE6": 0.067, 199 | "Firefox": 0.458, 200 | "Chrome": 0.170, 201 | "Safari": 0.035, 202 | "Opera": 0.023, 203 | }}, 204 | { month: "July 2010", data: { 205 | "IE8": 0.156, 206 | "IE7": 0.076, 207 | "IE6": 0.072, 208 | "Firefox": 0.464, 209 | "Chrome": 0.167, 210 | "Safari": 0.034, 211 | "Opera": 0.023, 212 | }}, 213 | { month: "June 2010", data: { 214 | "IE8": 0.157, 215 | "IE7": 0.081, 216 | "IE6": 0.072, 217 | "Firefox": 0.466, 218 | "Chrome": 0.159, 219 | "Safari": 0.036, 220 | "Opera": 0.021, 221 | }}, 222 | { month: "May 2010", data: { 223 | "IE8": 0.160, 224 | "IE7": 0.091, 225 | "IE6": 0.071, 226 | "Firefox": 0.469, 227 | "Chrome": 0.145, 228 | "Safari": 0.035, 229 | "Opera": 0.022, 230 | }}, 231 | { month: "April 2010", data: { 232 | "IE8": 0.162, 233 | "IE7": 0.093, 234 | "IE6": 0.079, 235 | "Firefox": 0.464, 236 | "Chrome": 0.136, 237 | "Safari": 0.037, 238 | "Opera": 0.022, 239 | }}, 240 | { month: "March 2010", data: { 241 | "IE8": 0.153, 242 | "IE7": 0.107, 243 | "IE6": 0.089, 244 | "Firefox": 0.462, 245 | "Chrome": 0.123, 246 | "Safari": 0.037, 247 | "Opera": 0.022, 248 | }}, 249 | { month: "February 2010", data: { 250 | "IE8": 0.147, 251 | "IE7": 0.110, 252 | "IE6": 0.096, 253 | "Firefox": 0.465, 254 | "Chrome": 0.116, 255 | "Safari": 0.038, 256 | "Opera": 0.021, 257 | }}, 258 | { month: "January 2010", data: { 259 | "IE8": 0.143, 260 | "IE7": 0.117, 261 | "IE6": 0.102, 262 | "Firefox": 0.463, 263 | "Chrome": 0.108, 264 | "Safari": 0.037, 265 | "Opera": 0.022, 266 | }}, 267 | { month: "December 2009", data: { 268 | "IE8": 0.135, 269 | "IE7": 0.128, 270 | "IE6": 0.109, 271 | "Firefox": 0.464, 272 | "Chrome": 0.098, 273 | "Safari": 0.036, 274 | "Opera": 0.023, 275 | }}, 276 | { month: "November 2009", data: { 277 | "IE8": 0.133, 278 | "IE7": 0.133, 279 | "IE6": 0.111, 280 | "Firefox": 0.470, 281 | "Chrome": 0.085, 282 | "Safari": 0.038, 283 | "Opera": 0.023, 284 | }}, 285 | { month: "October 2009", data: { 286 | "IE8": 0.128, 287 | "IE7": 0.141, 288 | "IE6": 0.106, 289 | "Firefox": 0.475, 290 | "Chrome": 0.080, 291 | "Safari": 0.038, 292 | "Opera": 0.023, 293 | }}, 294 | { month: "September 2009", data: { 295 | "IE8": 0.122, 296 | "IE7": 0.153, 297 | "IE6": 0.121, 298 | "Firefox": 0.466, 299 | "Chrome": 0.071, 300 | "Safari": 0.036, 301 | "Opera": 0.022, 302 | }}, 303 | { month: "August 2009", data: { 304 | "IE7": 0.151, 305 | "IE6": 0.136, 306 | "IE8": 0.106, 307 | "Firefox": 0.474, 308 | "Chrome": 0.07, 309 | "Safari": 0.033, 310 | "Opera": 0.021, 311 | }}, 312 | { month: "July 2009", data: { 313 | "IE7": 0.159, 314 | "IE6": 0.144, 315 | "IE8": 0.091, 316 | "Firefox": 0.479, 317 | "Chrome": 0.065, 318 | "Safari": 0.033, 319 | "Opera": 0.021, 320 | }}, 321 | { month: "June 2009", data: { 322 | "IE7": 0.187, 323 | "IE6": 0.149, 324 | "IE8": 0.071, 325 | "Firefox": 0.473, 326 | "Chrome": 0.06, 327 | "Safari": 0.031, 328 | "Opera": 0.021, 329 | }}, 330 | { month: "May 2009", data: { 331 | "IE7": 0.213, 332 | "IE6": 0.145, 333 | "IE8": 0.052, 334 | "Firefox": 0.477, 335 | "Chrome": 0.055, 336 | "Safari": 0.03, 337 | "Opera": 0.022, 338 | }}, 339 | { month: "April 2009", data: { 340 | "IE7": 0.232, 341 | "IE6": 0.154, 342 | "IE8": 0.035, 343 | "Firefox": 0.471, 344 | "Chrome": 0.049, 345 | "Safari": 0.03, 346 | "Opera": 0.022, 347 | }}, 348 | { month: "March 2009", data: { 349 | "IE7": 0.249, 350 | "IE6": 0.17, 351 | "IE8": 0.014, 352 | "Firefox": 0.465, 353 | "Chrome": 0.042, 354 | "Safari": 0.031, 355 | "Opera": 0.023, 356 | }}, 357 | { month: "February 2009", data: { 358 | "IE7": 0.254, 359 | "IE6": 0.174, 360 | "IE8": 0.008, 361 | "Firefox": 0.464, 362 | "Chrome": 0.04, 363 | "Safari": 0.03, 364 | "Opera": 0.022, 365 | }}, 366 | { month: "January 2009", data: { 367 | "IE7": 0.257, 368 | "IE6": 0.185, 369 | "IE8": 0.006, 370 | "Firefox": 0.455, 371 | "Chrome": 0.039, 372 | "Safari": 0.03, 373 | "Opera": 0.023, 374 | }}, 375 | { month: "December 2008", data: { 376 | "IE7": 0.261, 377 | "IE6": 0.196, 378 | "IE5": 0, 379 | "Firefox": 0.444, 380 | "Chrome": 0.036, 381 | "Safari": 0.027, 382 | "Opera": 0.024, 383 | }}, 384 | { month: "November 2008", data: { 385 | "IE7": 0.266, 386 | "IE6": 0.2, 387 | "IE5": 0, 388 | "Firefox": 0.442, 389 | "Chrome": 0.031, 390 | "Safari": 0.027, 391 | "Opera": 0.023, 392 | }}, 393 | { month: "October 2008", data: { 394 | "IE7": 0.269, 395 | "IE6": 0.202, 396 | "IE5": 0, 397 | "Firefox": 0.44, 398 | "Chrome": 0.03, 399 | "Safari": 0.028, 400 | "Opera": 0.022, 401 | }}, 402 | { month: "September 2008", data: { 403 | "IE7": 0.263, 404 | "IE6": 0.223, 405 | "IE5": 0, 406 | "Firefox": 0.426, 407 | "Chrome": 0.031, 408 | "Safari": 0.027, 409 | "Opera": 0.02, 410 | }}, 411 | { month: "August 2008", data: { 412 | "IE7": 0.26, 413 | "IE6": 0.245, 414 | "IE5": 0, 415 | "Firefox": 0.437, 416 | "Chrome": 0, 417 | "Safari": 0.026, 418 | "Opera": 0.021, 419 | }}, 420 | { month: "July 2008", data: { 421 | "IE7": 0.264, 422 | "IE6": 0.253, 423 | "IE5": 0, 424 | "Firefox": 0.426, 425 | "Chrome": 0, 426 | "Safari": 0.025, 427 | "Opera": 0.019, 428 | }}, 429 | { month: "June 2008", data: { 430 | "IE7": 0.27, 431 | "IE6": 0.265, 432 | "IE5": 0.005, 433 | "Firefox": 0.41, 434 | "Chrome": 0, 435 | "Safari": 0.026, 436 | "Opera": 0.017, 437 | }}, 438 | { month: "May 2008", data: { 439 | "IE7": 0.265, 440 | "IE6": 0.273, 441 | "IE5": 0.007, 442 | "Firefox": 0.398, 443 | "Chrome": 0, 444 | "Safari": 0.024, 445 | "Opera": 0.015, 446 | }}, 447 | { month: "April 2008", data: { 448 | "IE7": 0.249, 449 | "IE6": 0.289, 450 | "IE5": 0.01, 451 | "Firefox": 0.391, 452 | "Chrome": 0, 453 | "Safari": 0.022, 454 | "Opera": 0.014, 455 | }}, 456 | { month: "March 2008", data: { 457 | "IE7": 0.233, 458 | "IE6": 0.295, 459 | "IE5": 0.011, 460 | "Firefox": 0.37, 461 | "Chrome": 0, 462 | "Safari": 0.021, 463 | "Opera": 0.014, 464 | }}, 465 | { month: "February 2008", data: { 466 | "IE7": 0.227, 467 | "IE6": 0.307, 468 | "IE5": 0.013, 469 | "Firefox": 0.365, 470 | "Chrome": 0, 471 | "Safari": 0.02, 472 | "Opera": 0.014, 473 | }}, 474 | { month: "January 2008", data: { 475 | "IE7": 0.212, 476 | "IE6": 0.32, 477 | "IE5": 0.015, 478 | "Firefox": 0.364, 479 | "Chrome": 0, 480 | "Safari": 0.019, 481 | "Opera": 0.014, 482 | }}, 483 | { month: "November 2007", data: { 484 | "IE7": 0.208, 485 | "IE6": 0.336, 486 | "IE5": 0.016, 487 | "Firefox": 0.363, 488 | "Mozilla": 0.012, 489 | "Safari": 0.018, 490 | "Opera": 0.016, 491 | }}, 492 | { month: "September 2007", data: { 493 | "IE7": 0.208, 494 | "IE6": 0.349, 495 | "IE5": 0.015, 496 | "Firefox": 0.354, 497 | "Mozilla": 0.012, 498 | "Safari": 0.016, 499 | "Opera": 0.015, 500 | }}, 501 | { month: "July 2007", data: { 502 | "IE7": 0.201, 503 | "IE6": 0.369, 504 | "IE5": 0.015, 505 | "Firefox": 0.345, 506 | "Mozilla": 0.014, 507 | "Safari": 0.015, 508 | "Opera": 0.019, 509 | }}, 510 | { month: "May 2007", data: { 511 | "IE7": 0.192, 512 | "IE6": 0.381, 513 | "IE5": 0.016, 514 | "Firefox": 0.337, 515 | "Mozilla": 0.013, 516 | "Safari": 0.015, 517 | "Opera": 0.017, 518 | }}, 519 | { month: "March 2007", data: { 520 | "IE7": 0.18, 521 | "IE6": 0.387, 522 | "IE5": 0.02, 523 | "Firefox": 0.318, 524 | "Mozilla": 0.013, 525 | "Safari": 0.016, 526 | "Opera": 0.016, 527 | }}, 528 | { month: "January 2007", data: { 529 | "IE7": 0.133, 530 | "IE6": 0.423, 531 | "IE5": 0.03, 532 | "Firefox": 0.31, 533 | "Mozilla": 0.015, 534 | "Safari": 0.017, 535 | "Opera": 0.015, 536 | }}, 537 | { month: "November 2006", data: { 538 | "IE7": 0.071, 539 | "IE6": 0.499, 540 | "IE5": 0.036, 541 | "Firefox": 0.299, 542 | "Mozilla": 0.025, 543 | "Opera": 0.015, 544 | }}, 545 | { month: "September 2006", data: { 546 | "IE7": 0.025, 547 | "IE6": 0.556, 548 | "IE5": 0.04, 549 | "Firefox": 0.273, 550 | "Mozilla": 0.023, 551 | "Opera": 0.016, 552 | }}, 553 | { month: "July 2006", data: { 554 | "IE7": 0.019, 555 | "IE6": 0.563, 556 | "IE5": 0.042, 557 | "Firefox": 0.255, 558 | "Mozilla": 0.023, 559 | "Opera": 0.014, 560 | }}, 561 | { month: "May 2006", data: { 562 | "IE7": 0.011, 563 | "IE6": 0.574, 564 | "IE5": 0.045, 565 | "Firefox": 0.257, 566 | "Mozilla": 0.023, 567 | "Opera": 0.015, 568 | }}, 569 | { month: "March 2006", data: { 570 | "IE7": 0.006, 571 | "IE6": 0.588, 572 | "IE5": 0.053, 573 | "Firefox": 0.245, 574 | "Mozilla": 0.024, 575 | "Opera": 0.015, 576 | }}, 577 | { month: "January 2006", data: { 578 | "IE7": 0.002, 579 | "IE6": 0.603, 580 | "IE5": 0.055, 581 | "Firefox": 0.25, 582 | "Mozilla": 0.031, 583 | "Opera": 0.016, 584 | }}, 585 | { month: "November 2005", data: { 586 | "IE6": 0.627, 587 | "IE5": 0.062, 588 | "Firefox": 0.236, 589 | "Mozilla": 0.028, 590 | "Netscape 7": 0.004, 591 | "Opera 8": 0.013, 592 | "Opera 7": 0.002, 593 | }}, 594 | { month: "September 2005", data: { 595 | "IE6": 0.698, 596 | "IE5": 0.057, 597 | "Firefox": 0.18, 598 | "Mozilla": 0.025, 599 | "Netscape 7": 0.004, 600 | "Opera 8": 0.01, 601 | "Opera 7": 0.002, 602 | }}, 603 | { month: "July 2005", data: { 604 | "IE6": 0.679, 605 | "IE5": 0.059, 606 | "Firefox": 0.198, 607 | "Mozilla": 0.026, 608 | "Netscape 7": 0.005, 609 | "Opera 8": 0.008, 610 | "Opera 7": 0.004, 611 | }}, 612 | { month: "May 2005", data: { 613 | "IE6": 0.648, 614 | "IE5": 0.068, 615 | "Firefox": 0.21, 616 | "Mozilla": 0.031, 617 | "Netscape 7": 0.007, 618 | "Opera 8": 0.007, 619 | "Opera 7": 0.006, 620 | }}, 621 | { month: "March 2005", data: { 622 | "IE6": 0.636, 623 | "IE5": 0.089, 624 | "Firefox": 0.189, 625 | "Mozilla": 0.033, 626 | "Netscape 7": 0.01, 627 | "Opera 8": 0.003, 628 | "Opera 7": 0.016, 629 | }}, 630 | { month: "January 2005", data: { 631 | "IE6": 0.648, 632 | "IE5": 0.097, 633 | "Firefox": 0.166, 634 | "Mozilla": 0.034, 635 | "Netscape 7": 0.011, 636 | "Opera 8": 0, 637 | "Opera 7": 0.019, 638 | }}, 639 | { month: "November 2004", data: { 640 | "IE6": 0.66, 641 | "IE5": 0.102, 642 | "Mozilla": 0.165, 643 | "Netscape 3": 0.002, 644 | "Netscape 7": 0.012, 645 | "Netscape 4": 0.003, 646 | "Opera 7": 0.016, 647 | }}, 648 | { month: "September 2004", data: { 649 | "IE6": 0.678, 650 | "IE5": 0.112, 651 | "Mozilla": 0.137, 652 | "Netscape 3": 0.003, 653 | "Netscape 7": 0.014, 654 | "Netscape 4": 0.003, 655 | "Opera 7": 0.017, 656 | }}, 657 | { month: "July 2004", data: { 658 | "IE6": 0.672, 659 | "IE5": 0.132, 660 | "Mozilla": 0.126, 661 | "Netscape 3": 0.004, 662 | "Netscape 7": 0.014, 663 | "Netscape 4": 0.004, 664 | "Opera 7": 0.016, 665 | }}, 666 | { month: "May 2004", data: { 667 | "IE6": 0.681, 668 | "IE5": 0.138, 669 | "Mozilla": 0.095, 670 | "Netscape 3": 0.006, 671 | "Netscape 7": 0.014, 672 | "Netscape 4": 0.004, 673 | "Opera 7": 0.016, 674 | }}, 675 | { month: "March 2004", data: { 676 | "IE6": 0.682, 677 | "IE5": 0.146, 678 | "Mozilla": 0.079, 679 | "Netscape 3": 0.008, 680 | "Netscape 7": 0.014, 681 | "Netscape 4": 0.006, 682 | "Opera 7": 0.014, 683 | }}, 684 | { month: "January 2004", data: { 685 | "IE6": 0.689, 686 | "IE5": 0.158, 687 | "Mozilla": 0.055, 688 | "Netscape 3": 0.004, 689 | "Netscape 7": 0.015, 690 | "Netscape 4": 0.005, 691 | "Opera 7": 0.015, 692 | }}, 693 | { month: "November 2003", data: { 694 | "IE6": 0.712, 695 | "IE5": 0.137, 696 | "Mozilla": 0.072, 697 | "Netscape 3": 0.005, 698 | "Netscape 7": 0.016, 699 | "Netscape 4": 0.005, 700 | "Opera 7": 0.019, 701 | }}, 702 | { month: "September 2003", data: { 703 | "IE6": 0.697, 704 | "IE5": 0.169, 705 | "Mozilla": 0.062, 706 | "Netscape 3": 0.006, 707 | "Netscape 7": 0.015, 708 | "Netscape 4": 0.006, 709 | "Opera 7": 0.018, 710 | }}, 711 | { month: "July 2003", data: { 712 | "IE6": 0.669, 713 | "IE5": 0.203, 714 | "Mozilla": 0.057, 715 | "Netscape 3": 0.006, 716 | "Netscape 7": 0.015, 717 | "Netscape 4": 0.006, 718 | "Opera 7": 0.017, 719 | }}, 720 | { month: "May 2003", data: { 721 | "IE6": 0.65, 722 | "IE5": 0.227, 723 | "Mozilla": 0.046, 724 | "Netscape 3": 0.01, 725 | "Netscape 7": 0.014, 726 | "Netscape 4": 0.009, 727 | "Opera 7": 0.014, 728 | }}, 729 | { month: "March 2003", data: { 730 | "IE6": 0.634, 731 | "IE5": 0.246, 732 | "Mozilla": 0.042, 733 | "Netscape 3": 0.009, 734 | "Netscape 7": 0.014, 735 | "Netscape 4": 0.011, 736 | "Opera 7": 0.012, 737 | }}, 738 | { month: "January 2003", data: { 739 | "IE6": 0.553, 740 | "IE5": 0.293, 741 | "Mozilla": 0.04, 742 | "Netscape 3": 0.012, 743 | "Netscape 7": 0.011, 744 | "Netscape 4": 0.017, 745 | "Opera 7": 0, 746 | }}, 747 | { month: "November 2002", data: { 748 | "IE6": 0.535, 749 | "IE5": 0.299, 750 | "AOL": 0.052, 751 | "Netscape 3": 0.011, 752 | "Netscape 5": 0.049, 753 | "Netscape 4": 0.02, 754 | "IE4": 0, 755 | }}, 756 | { month: "September 2002", data: { 757 | "IE6": 0.491, 758 | "IE5": 0.344, 759 | "AOL": 0.045, 760 | "Netscape 3": 0.013, 761 | "Netscape 5": 0.045, 762 | "Netscape 4": 0.022, 763 | "IE4": 0, 764 | }}, 765 | { month: "July 2002", data: { 766 | "IE6": 0.444, 767 | "IE5": 0.401, 768 | "AOL": 0.035, 769 | "Netscape 3": 0.012, 770 | "Netscape 5": 0.035, 771 | "Netscape 4": 0.026, 772 | "IE4": 0.005, 773 | }}, 774 | { month: "May 2002", data: { 775 | "IE6": 0.407, 776 | "IE5": 0.46, 777 | "AOL": 0.028, 778 | "Netscape 3": 0.012, 779 | "Netscape 5": 0.027, 780 | "Netscape 4": 0.034, 781 | "IE4": 0.007, 782 | }}, 783 | { month: "March 2002", data: { 784 | "IE6": 0.367, 785 | "IE5": 0.494, 786 | "AOL": 0.03, 787 | "Netscape 3": 0.012, 788 | "Netscape 5": 0.024, 789 | "Netscape 4": 0.041, 790 | "IE4": 0.007, 791 | }}, 792 | { month: "January 2002", data: { 793 | "IE6": 0.301, 794 | "IE5": 0.557, 795 | "AOL": 0.028, 796 | "Netscape 3": 0.013, 797 | "Netscape 5": 0.022, 798 | "Netscape 4": 0.044, 799 | "IE4": 0.01, 800 | }}, 801 | ]; -------------------------------------------------------------------------------- /deck/deck.css: -------------------------------------------------------------------------------- 1 | *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} 2 | h1{margin:0;} 3 | .btn{display:inline-block;padding:4px 10px 4px;font-size:13px;line-height:18px;color:#333333;text-align:center;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);background-color:#fafafa;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-repeat:no-repeat;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);cursor:pointer;}.btn:hover{color:#333333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-ms-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;} 4 | .btn:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} 5 | .btn.active,.btn:active{background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);background-color:#e6e6e6;background-color:#d9d9d9 \9;color:rgba(0, 0, 0, 0.5);outline:0;} 6 | body{background:#929292;font-family:"Helvetica Neue",Arial,sans-serif;text-align:center;} 7 | section{width:1024px;height:768px;position:absolute;top:50%;left:50%;margin-left:-512px;margin-top:-384px;border-radius:8px;-o-border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;background:white;-moz-box-shadow:0px 0px 2px 2px #ccc;-webkit-box-shadow:0px 0px 2px 2px #ccc;box-shadow:0px 0px 2px 2px #ccc;}section.main_title h1{margin-top:140px;font-size:256px;} 8 | section.main_title h2{margin-top:20px;font-size:56px;} 9 | section.title h1{margin-top:310px;font-size:40px;} 10 | section.top_title h1{margin-top:22px;margin-bottom:15px;font-size:36px;} 11 | section.top_title a{display:block;margin-top:30px;font-size:28px;} 12 | section.code_title h1{font-family:"Courier New",monospace;margin-top:310px;font-size:42px;} 13 | section.code_slide h1{font-family:"Courier New",monospace;margin-top:22px;font-size:36px;} 14 | section.code_slide div.codes{position:absolute;left:10px;bottom:10px;right:517px;top:90px;}section.code_slide div.codes textarea{font-family:"Courier New",monospace;text-align:left;width:100%;height:100%;border:1px solid #ccc;font-size:16px;padding:4px 4px;resize:none;outline:none;white-space:pre;}section.code_slide div.codes textarea.init{display:none;} 15 | section.code_slide div.codes div.button_bar{position:absolute;right:16px;bottom:4px;}section.code_slide div.codes div.button_bar div.reset,section.code_slide div.codes div.button_bar div.run{margin:3px;} 16 | section.code_slide div.out{position:absolute;right:10px;bottom:10px;left:517px;top:90px;border:1px solid #ccc;}section.code_slide div.out div.error{position:absolute;background:white;top:5px;left:5px;right:5px;color:red;border:2px solid red;z-index:100;padding:10px;font-size:16px;} 17 | section.code_slide div.out pre.log{position:absolute;background:white;top:5px;left:5px;right:5px;border:2px solid black;z-index:99;padding:10px;font-size:16px;text-align:left;} 18 | section .name,section .date{position:absolute;bottom:20px;color:#999;} 19 | section .name{left:20px;} 20 | section .date{right:20px;} 21 | section svg{width:100%;height:100%;}section svg rect{fill:#ccc;stroke:gray;stroke-width:2px;} 22 | section svg text{font:16px sans-serif;} 23 | section a{color:steelblue;} 24 | section a:not(:hover){text-decoration:none;} 25 | section .mmx{position:absolute;left:50%;margin-left:-150px;bottom:3px;} 26 | -------------------------------------------------------------------------------- /deck/deck.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | "use strict"; 3 | var m, n, slide; 4 | slide = null; 5 | n = d3.selectAll('section')[0].length; 6 | 7 | function update(newSlide) { 8 | newSlide = Math.min(Math.max(newSlide, 0), n - 1); 9 | if (slide === newSlide) return; 10 | slide = newSlide; 11 | window.location.href = window.location.href.replace(/#.+$/, '') + '#' + String(slide + 1); 12 | d3.selectAll('section').style('display', function(d, i) { 13 | if (i === slide) { 14 | return null; 15 | } else { 16 | return 'none'; 17 | } 18 | }).each(function(d, i) { 19 | if (i === slide && typeof d === 'function') { 20 | d(); 21 | } 22 | }); 23 | }; 24 | 25 | if (m = window.location.href.match(/#(\d+)$/)) { 26 | update(parseInt(m[1], 10) - 1); 27 | } else { 28 | update(0); 29 | } 30 | 31 | d3.select('body').on('keydown', function() { 32 | var newSlide; 33 | switch (d3.event.keyCode) { 34 | case 40: 35 | case 34: 36 | case 39: 37 | newSlide = d3.event.metaKey ? Infinity : slide + 1; 38 | break; 39 | case 38: 40 | case 33: 41 | case 37: 42 | newSlide = d3.event.metaKey ? 0 : slide - 1; 43 | break; 44 | case 32: 45 | newSlide = d3.event.shiftKey ? slide - 1 : slide + 1; 46 | break; 47 | default: 48 | return; 49 | } 50 | update(newSlide); 51 | d3.event.preventDefault(); 52 | }); 53 | })(); 54 | -------------------------------------------------------------------------------- /deck/deck.less: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | h1 { 8 | margin: 0; 9 | } 10 | 11 | /* ---------------------------- */ 12 | 13 | .btn { 14 | display: inline-block; 15 | padding: 4px 10px 4px; 16 | font-size: 13px; 17 | line-height: 18px; 18 | color: #333333; 19 | text-align: center; 20 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 21 | background-color: #fafafa; 22 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); 23 | background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); 24 | background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); 25 | background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); 26 | background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); 27 | background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); 28 | background-repeat: no-repeat; 29 | border: 1px solid #ccc; 30 | border-bottom-color: #bbb; 31 | -webkit-border-radius: 4px; 32 | -moz-border-radius: 4px; 33 | border-radius: 4px; 34 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 35 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 36 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 37 | cursor: pointer; 38 | 39 | &:hover { 40 | color: #333333; 41 | text-decoration: none; 42 | background-color: #e6e6e6; 43 | background-position: 0 -15px; 44 | -webkit-transition: background-position 0.1s linear; 45 | -moz-transition: background-position 0.1s linear; 46 | -ms-transition: background-position 0.1s linear; 47 | -o-transition: background-position 0.1s linear; 48 | transition: background-position 0.1s linear; 49 | } 50 | &:focus { 51 | outline: thin dotted; 52 | outline: 5px auto -webkit-focus-ring-color; 53 | outline-offset: -2px; 54 | } 55 | &.active, &:active { 56 | background-image: none; 57 | -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 58 | -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 59 | box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 60 | background-color: #e6e6e6; 61 | background-color: #d9d9d9 \9; 62 | color: rgba(0, 0, 0, 0.5); 63 | outline: 0; 64 | } 65 | } 66 | 67 | 68 | /* ---------------------------- */ 69 | 70 | body { 71 | background: #929292; 72 | font-family: "Helvetica Neue", Arial, sans-serif; 73 | text-align: center; 74 | } 75 | 76 | section { 77 | width: 1024px; 78 | height: 768px; 79 | position: absolute; 80 | top: 50%; 81 | left: 50%; 82 | margin-left: -512px; 83 | margin-top: -384px; 84 | 85 | border-radius: 8px; 86 | -o-border-radius: 8px; 87 | -moz-border-radius: 8px; 88 | -webkit-border-radius: 8px; 89 | 90 | background: white; 91 | 92 | -moz-box-shadow: 0px 0px 2px 2px #ccc; 93 | -webkit-box-shadow: 0px 0px 2px 2px #ccc; 94 | box-shadow: 0px 0px 2px 2px #ccc; 95 | 96 | &.main_title { 97 | h1 { 98 | margin-top: 140px; 99 | font-size: 256px; 100 | } 101 | 102 | h2 { 103 | margin-top: 20px; 104 | font-size: 56px; 105 | } 106 | } 107 | 108 | &.title { 109 | h1 { 110 | margin-top: 310px; 111 | font-size: 40px; 112 | } 113 | } 114 | 115 | &.top_title { 116 | h1 { 117 | margin-top: 22px; 118 | margin-bottom: 15px; 119 | font-size: 36px; 120 | } 121 | 122 | a { 123 | display: block; 124 | margin-top: 30px; 125 | font-size: 28px; 126 | } 127 | } 128 | 129 | &.code_title { 130 | h1 { 131 | font-family: "Courier New", monospace; 132 | margin-top: 310px; 133 | font-size: 42px; 134 | } 135 | } 136 | 137 | &.code_slide { 138 | h1 { 139 | font-family: "Courier New", monospace; 140 | margin-top: 22px; 141 | font-size: 36px; 142 | } 143 | 144 | div.codes { 145 | position: absolute; 146 | left: 10px; 147 | bottom: 10px; 148 | right: 512px + 5px; 149 | top: 90px; 150 | 151 | textarea { 152 | font-family: "Courier New", monospace; 153 | text-align: left; 154 | width: 100%; 155 | height: 100%; 156 | border: 1px solid #ccc; 157 | font-size: 16px; 158 | padding: 4px 4px; 159 | resize: none; 160 | outline: none; 161 | white-space: pre; 162 | 163 | &.init { 164 | display: none; 165 | } 166 | } 167 | 168 | div.button_bar { 169 | position: absolute; 170 | right: 16px; 171 | bottom: 4px; 172 | 173 | div.reset, 174 | div.run { 175 | margin: 3px; 176 | } 177 | } 178 | } 179 | 180 | div.out { 181 | position: absolute; 182 | right: 10px; 183 | bottom: 10px; 184 | left: 512px + 5px; 185 | top: 90px; 186 | border: 1px solid #ccc; 187 | 188 | div.error { 189 | position: absolute; 190 | background: white; 191 | top: 5px; 192 | left: 5px; 193 | right: 5px; 194 | color: red; 195 | border: 2px solid red; 196 | z-index: 100; 197 | padding: 10px; 198 | font-size: 16px; 199 | } 200 | 201 | pre.log { 202 | position: absolute; 203 | background: white; 204 | top: 5px; 205 | left: 5px; 206 | right: 5px; 207 | border: 2px solid black; 208 | z-index: 99; 209 | padding: 10px; 210 | font-size: 16px; 211 | text-align: left; 212 | } 213 | } 214 | } 215 | } 216 | 217 | section { 218 | .name, 219 | .date { 220 | position: absolute; 221 | bottom: 20px; 222 | color: #999; 223 | } 224 | 225 | .name { 226 | left: 20px; 227 | } 228 | 229 | .date { 230 | right: 20px; 231 | } 232 | 233 | svg { 234 | width: 100%; 235 | height: 100%; 236 | 237 | rect { 238 | fill: #ccc; 239 | stroke: gray; 240 | stroke-width: 2px; 241 | } 242 | 243 | text { 244 | font: 16px sans-serif; 245 | } 246 | } 247 | 248 | a { 249 | color: steelblue; 250 | } 251 | 252 | a:not(:hover) { 253 | text-decoration: none; 254 | } 255 | 256 | .mmx { 257 | position: absolute; 258 | left: 50%; 259 | margin-left: -300px / 2; 260 | bottom: 3px; 261 | } 262 | } 263 | -------------------------------------------------------------------------------- /deck/slide_maker.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | "use strict" 3 | 4 | var slide = {}; 5 | window.slide = slide; 6 | 7 | slide.code = function(title, init, code) { 8 | var out, codeText; 9 | 10 | function myInit() { 11 | d3.selectAll('div.output').classed('output', false) 12 | out 13 | .classed('output', true) 14 | .selectAll('*').remove(); 15 | if (typeof init === 'function') init(); 16 | } 17 | 18 | var section = d3.select('body') 19 | .append('section') 20 | .data([myInit]) 21 | .attr('class', "code_slide") 22 | 23 | section.append('h1') 24 | .text(title) 25 | 26 | var codes = section.append('div') 27 | .attr('class', 'codes') 28 | 29 | function myConsoleLog() { 30 | var str = Array.prototype.slice.call(arguments).join(' ') + '\n'; 31 | var pre = out.select('pre.log'); 32 | if (pre.empty()) { 33 | out.append('pre') 34 | .attr('class', 'log') 35 | .text(str) 36 | } else { 37 | pre.text(pre.text() + str); 38 | } 39 | } 40 | 41 | function run() { 42 | var code = codeText.property('value'); 43 | code = '(function(console) { "use strict"\n' + code + '\n})({ log: myConsoleLog })'; 44 | out.select('div.error').remove(); 45 | out.select('pre.log').remove(); 46 | try { 47 | eval(code); 48 | } catch(err) { 49 | out.append('div') 50 | .attr('class', 'error') 51 | .text('Error: ' + err.message) 52 | } 53 | } 54 | 55 | codeText = codes.append('textarea') 56 | .attr('class', 'code') 57 | .attr('placeholder', 'JavaScript goes in here...') 58 | .property('value', code) 59 | .on('keydown', function() { 60 | // Run if command + enter 61 | if (d3.event.keyCode === 13 && d3.event.metaKey) run(); 62 | d3.event.stopPropagation(); 63 | }) 64 | 65 | var buttonBar = codes.append('div') 66 | .attr('class', 'button_bar') 67 | 68 | buttonBar.append('div') 69 | .attr('class', 'run btn') 70 | .text('Run') 71 | .on('click', run) 72 | 73 | buttonBar.append('div') 74 | .attr('class', 'reset btn') 75 | .text('Reset') 76 | .on('click', myInit) 77 | 78 | out = section.append('div') 79 | .attr('class', "out") 80 | } 81 | 82 | slide.code_title = function(title) { 83 | d3.select('body') 84 | .append('section') 85 | .attr('class', "code_title") 86 | .append('h1') 87 | .text(title); 88 | } 89 | 90 | slide.title = function(title) { 91 | d3.select('body') 92 | .append('section') 93 | .attr('class', "title") 94 | .append('h1') 95 | .text(title); 96 | } 97 | })(); 98 | 99 | 100 | -------------------------------------------------------------------------------- /example_bar_chart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |