├── .gitignore ├── 00_empty_page_template.html ├── 01_selecting_elements.html ├── 02_chain_syntax.html ├── 03_svg.html ├── 04_svg_with_d3.html ├── 05_data_values.html ├── 06_circles.html ├── 07_transition.html ├── 08_scales.html ├── 09_axes.html ├── 10_scatterplot.html ├── D3 Cheat Sheet.pdf ├── LICENSE ├── README.md └── d3.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /00_empty_page_template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3: Empty page template 6 | 7 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /01_selecting_elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3: Selecting elements 6 | 7 | 8 | 9 | 10 |

I'm a paragraph, and I'm okay. I sleep all night, and I work all day.

11 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /02_chain_syntax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3: Chain syntax 6 | 7 | 8 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /03_svg.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3: SVG 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | Lorem ipsum 27 | 28 | 29 | 32 | 33 | -------------------------------------------------------------------------------- /04_svg_with_d3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3: Create an SVG with D3 6 | 7 | 18 | 19 | 20 | 66 | 67 | -------------------------------------------------------------------------------- /05_data_values.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3: Using data values 6 | 7 | 8 | 9 | 44 | 45 | -------------------------------------------------------------------------------- /06_circles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3: Data-driven circles 6 | 7 | 18 | 19 | 20 | 100 | 101 | -------------------------------------------------------------------------------- /07_transition.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3: Transitions 6 | 7 | 18 | 19 | 20 | 104 | 105 | -------------------------------------------------------------------------------- /08_scales.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3: Scales 6 | 7 | 18 | 19 | 20 | 114 | 115 | -------------------------------------------------------------------------------- /09_axes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3: Axes 6 | 7 | 30 | 31 | 32 | 104 | 105 | -------------------------------------------------------------------------------- /10_scatterplot.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | D3: Scatterplot! 6 | 7 | 34 | 35 | 36 | 37 |
38 | 39 |
40 | 41 | 160 | 161 | -------------------------------------------------------------------------------- /D3 Cheat Sheet.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scotthmurray/scattered-scatterplot/6b3acfa36417e5aac5797a5719f8d826f91588dc/D3 Cheat Sheet.pdf -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | ## SCATTERED-SCATTERPLOT CODE SAMPLES LICENSE 2 | 3 | This work is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/). 4 | 5 | ## D3.JS LICENSE 6 | 7 | Copyright (c) 2010-2015, Michael Bostock 8 | All rights reserved. 9 | 10 | Redistribution and use in source and binary forms, with or without 11 | modification, are permitted provided that the following conditions are met: 12 | 13 | * Redistributions of source code must retain the above copyright notice, this 14 | list of conditions and the following disclaimer. 15 | 16 | * Redistributions in binary form must reproduce the above copyright notice, 17 | this list of conditions and the following disclaimer in the documentation 18 | and/or other materials provided with the distribution. 19 | 20 | * The name Michael Bostock may not be used to endorse or promote products 21 | derived from this software without specific prior written permission. 22 | 23 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 24 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 25 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 26 | DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT, 27 | INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, 28 | BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 29 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY 30 | OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 31 | NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, 32 | EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # scattered-scatterplot 2 | 3 | These code examples accompany the video course “[An Introduction to d3.js: From Scattered to Scatterplot](http://shop.oreilly.com/product/110000632.do)”. 4 | 5 | **NOTE:** Since that video was recorded, I have updated these files with a newer version of D3 (3.5.6). Everything you see in the video is still accurate, but you will notice that `src` links in the HTML now point to `d3.js` instead of `d3.v3.js`, as seen in the video. 6 | 7 | These examples have also been used for similar workshops, which were presented on: 8 | 9 | - 2015 July 21 at [OSCON](http://www.oscon.com/open-source-2015/public/schedule/detail/42458) in Portland, Oregon 10 | - 2014 August 29 at [The Graphical Web](http://graphicalweb.org/2014/) in Winchester, England 11 | - 2014 February 11 at the [Strata Conference](http://strataconf.com/strata2014/public/schedule/detail/32866) in Santa Clara, California 12 | - 2014 January 8 as an [O’Reilly Webcast](http://oreillynet.com/pub/e/2952) 13 | 14 | Inline versions of these examples are also hosted on Atlas (no download required): 15 | 16 | - [All inline examples](http://chimera.labs.oreilly.com/books/1234000002001/ch01.html) 17 | - [Presentation slides with inline examples](http://scatteredtoscatterplot.strataconf.com) (experimental!) 18 | 19 | Some of these examples are adapted from the sample code files for *Interactive Data Visualization for the Web* (O’Reilly, March 2013). 20 | 21 | - [O’Reilly book page](http://shop.oreilly.com/product/0636920026938.do) 22 | - [Online preview](http://chimera.labs.oreilly.com/books/1230000000345/) 23 | - [All code samples for the book](https://github.com/alignedleft/d3-book) 24 | --------------------------------------------------------------------------------