├── .gitignore
├── LICENSE
├── MONTAGE.html
├── README.md
├── archive
    ├── index.html
    ├── index.json
    ├── montage.html
    ├── package.json
    ├── retab.sh
    └── units
    │   ├── unit-01
    │       ├── module-01
    │       │   └── example-01
    │       │   │   └── index.html
    │       ├── module-02
    │       │   ├── example-01
    │       │   │   └── index.html
    │       │   ├── example-02
    │       │   │   └── index.html
    │       │   ├── example-03
    │       │   │   └── index.html
    │       │   ├── example-04
    │       │   │   └── index.html
    │       │   ├── example-05
    │       │   │   └── index.html
    │       │   ├── example-06
    │       │   │   └── index.html
    │       │   ├── example-07
    │       │   │   └── index.html
    │       │   ├── example-08
    │       │   │   └── index.html
    │       │   ├── example-09
    │       │   │   └── index.html
    │       │   ├── example-10
    │       │   │   └── index.html
    │       │   ├── example-11
    │       │   │   └── index.html
    │       │   ├── example-12
    │       │   │   └── index.html
    │       │   ├── example-13
    │       │   │   └── index.html
    │       │   ├── example-14
    │       │   │   └── index.html
    │       │   └── example-15
    │       │   │   └── index.html
    │       ├── module-03
    │       │   ├── example-01
    │       │   │   └── index.html
    │       │   ├── example-02
    │       │   │   └── index.html
    │       │   ├── example-03
    │       │   │   └── index.html
    │       │   ├── example-04
    │       │   │   └── index.html
    │       │   ├── example-05
    │       │   │   └── index.html
    │       │   ├── example-06
    │       │   │   └── index.html
    │       │   ├── example-07
    │       │   │   └── index.html
    │       │   ├── example-08
    │       │   │   └── index.html
    │       │   ├── example-09
    │       │   │   └── index.html
    │       │   ├── example-10
    │       │   │   └── index.html
    │       │   ├── example-11
    │       │   │   └── index.html
    │       │   ├── example-12
    │       │   │   └── index.html
    │       │   ├── example-13
    │       │   │   └── index.html
    │       │   ├── example-14
    │       │   │   └── index.html
    │       │   ├── example-15
    │       │   │   └── index.html
    │       │   ├── example-16
    │       │   │   └── index.html
    │       │   ├── example-17
    │       │   │   └── index.html
    │       │   ├── example-18
    │       │   │   └── index.html
    │       │   └── example-19
    │       │   │   └── index.html
    │       ├── module-04
    │       │   ├── example-01
    │       │   │   └── index.html
    │       │   ├── example-02
    │       │   │   └── index.html
    │       │   ├── example-03
    │       │   │   └── index.html
    │       │   ├── example-04
    │       │   │   └── index.html
    │       │   ├── example-05
    │       │   │   └── index.html
    │       │   ├── example-06
    │       │   │   └── index.html
    │       │   ├── example-07
    │       │   │   └── index.html
    │       │   ├── example-08
    │       │   │   └── index.html
    │       │   ├── example-09
    │       │   │   └── index.html
    │       │   └── example-10
    │       │   │   └── index.html
    │       ├── module-05
    │       │   ├── example-01
    │       │   │   └── index.html
    │       │   ├── example-02
    │       │   │   └── index.html
    │       │   ├── example-03
    │       │   │   └── index.html
    │       │   ├── example-04
    │       │   │   └── index.html
    │       │   ├── example-05
    │       │   │   └── index.html
    │       │   ├── example-06
    │       │   │   └── index.html
    │       │   ├── example-07
    │       │   │   └── index.html
    │       │   ├── example-08
    │       │   │   └── index.html
    │       │   ├── example-09
    │       │   │   └── index.html
    │       │   └── example-10
    │       │   │   └── index.html
    │       └── module-06
    │       │   ├── example-01
    │       │       └── index.html
    │       │   ├── example-02
    │       │       └── index.html
    │       │   ├── example-03
    │       │       └── index.html
    │       │   ├── example-04
    │       │       └── index.html
    │       │   ├── example-05
    │       │       └── index.html
    │       │   ├── example-06
    │       │       └── index.html
    │       │   └── example-07
    │       │       └── index.html
    │   ├── unit-02
    │       ├── module-01
    │       │   ├── example-01
    │       │   │   └── index.html
    │       │   ├── example-02
    │       │   │   └── index.html
    │       │   ├── example-03
    │       │   │   └── index.html
    │       │   ├── example-04
    │       │   │   ├── babelrc.json
    │       │   │   ├── bundle.js
    │       │   │   ├── index.html
    │       │   │   ├── index.js
    │       │   │   ├── package.json
    │       │   │   └── rollup.config.js
    │       │   └── example-05
    │       │   │   └── index.html
    │       ├── module-02
    │       │   ├── example-01
    │       │   │   └── index.html
    │       │   ├── example-02
    │       │   │   ├── data.csv
    │       │   │   └── index.html
    │       │   ├── example-03
    │       │   │   ├── data.csv
    │       │   │   └── index.html
    │       │   ├── example-04
    │       │   │   ├── data.csv
    │       │   │   └── index.html
    │       │   ├── example-05
    │       │   │   ├── data.csv
    │       │   │   └── index.html
    │       │   └── example-06
    │       │   │   ├── data.csv
    │       │   │   └── index.html
    │       ├── module-03
    │       │   ├── example-01
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-02
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-03
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-04
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-05
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-06
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-07
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-08
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-09
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-10
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-11
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-12
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-13
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   └── example-14
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       ├── module-04
    │       │   ├── example-01
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-02
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-03
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-04
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-05
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-06
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-07
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-08
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   └── example-09
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       ├── module-05
    │       │   ├── example-01
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-02
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-03
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-04
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-05
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-06
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-07
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-08
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-09
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-10
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-11
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   └── example-12
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       ├── module-06
    │       │   ├── example-01
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-02
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-03
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-04
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-05
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-06
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-07
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-08
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-09
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-10
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   └── example-11
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       ├── module-07
    │       │   ├── example-01
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-02
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-03
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-04
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-05
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   └── example-06
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       ├── module-08
    │       │   ├── example-01
    │       │   │   └── index.html
    │       │   ├── example-02
    │       │   │   └── index.html
    │       │   ├── example-03
    │       │   │   └── index.html
    │       │   ├── example-04
    │       │   │   └── index.html
    │       │   ├── example-05
    │       │   │   └── index.html
    │       │   ├── example-06
    │       │   │   └── index.html
    │       │   └── example-08
    │       │   │   ├── index.html
    │       │   │   ├── iris.csv
    │       │   │   ├── preview.png
    │       │   │   └── thumbnail.png
    │       ├── module-09
    │       │   ├── example-01
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-02
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   ├── example-03
    │       │   │   └── index.html
    │       │   ├── example-04
    │       │   │   └── index.html
    │       │   ├── example-05
    │       │   │   └── index.html
    │       │   ├── example-06
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       │   └── example-07
    │       │   │   ├── index.html
    │       │   │   └── iris.csv
    │       └── module-10
    │       │   ├── example-01
    │       │       ├── index.html
    │       │       └── iris.csv
    │       │   ├── example-02
    │       │       └── index.html
    │       │   ├── example-03
    │       │       └── index.html
    │       │   ├── example-04
    │       │       └── index.html
    │       │   ├── example-05
    │       │       ├── index.html
    │       │       └── iris.csv
    │       │   ├── example-06
    │       │       ├── index.html
    │       │       └── iris.csv
    │       │   └── example-07
    │       │       ├── index.html
    │       │       └── iris.csv
    │   └── unit-03
    │       └── module-01
    │           ├── example-01
    │               └── index.html
    │           ├── example-02
    │               ├── data.csv
    │               └── index.html
    │           ├── example-03
    │               ├── data.csv
    │               └── index.html
    │           ├── example-04
    │               ├── data.csv
    │               └── index.html
    │           ├── example-05
    │               ├── data.csv
    │               └── index.html
    │           ├── example-06
    │               ├── data.csv
    │               └── index.html
    │           ├── example-07
    │               ├── data.csv
    │               └── index.html
    │           ├── example-08
    │               ├── data.csv
    │               └── index.html
    │           ├── example-09
    │               ├── data.csv
    │               └── index.html
    │           ├── example-10
    │               ├── data.csv
    │               └── index.html
    │           ├── example-11
    │               ├── data.csv
    │               └── index.html
    │           ├── example-12
    │               ├── data.csv
    │               └── index.html
    │           ├── example-13
    │               ├── data.csv
    │               └── index.html
    │           ├── example-14
    │               ├── data.csv
    │               └── index.html
    │           ├── example-15
    │               ├── data.csv
    │               └── index.html
    │           └── example-16
    │               ├── data.csv
    │               └── index.html
├── data
    ├── README.md
    ├── UN-Population-Estimates
    │   ├── README.md
    │   ├── africa.csv
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── processAfrica.js
    │   ├── wpp2017-medium-variant.csv
    │   └── wpp2017.csv
    ├── africa.csv
    ├── cars.csv
    └── iris.csv
└── images
    ├── Idempotent.gif
    ├── ScaleChromatic.png
    ├── SchemeCategory10.png
    ├── U02-M01-CSV-Flow
        ├── .block
        ├── diagram.svg
        └── index.html
    ├── U02-M08-Scatter-Plot-No-Legend.png
    ├── U02-M08-Scatter-Plot-With-Legend.png
    ├── U02-M09-Area-Formula.png
    ├── U02-M09-Bubble-Sizing.png
    ├── U02-M09-Radius-Formula.png
    └── U02-M09-Scatter-Plot-With-SizeLegend.png


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | libs
3 | npm-debug.log
4 | example-viewer-dist
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Curran Kelleher
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/MONTAGE.html:
--------------------------------------------------------------------------------
 1 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/42ecc75c88515b382bacda3a525b20b6/thumbnail.png">
 2 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/f4ca72a38bcbb5893d37ce48ed9d4796/thumbnail.png">
 3 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/2f01f668410da7b0ea657b67cd461209/thumbnail.png">
 4 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/cd1da26cf42aea4429cf5e0d2406134f/thumbnail.png">
 5 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/966ac9f212a8ceb1ea153fd1ee9f72c4/thumbnail.png">
 6 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/ecb09f2605c7fbbadf0eeb75da5f0a6b/thumbnail.png">
 7 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/76d8a075dee5420c01e35742f8598332/thumbnail.png">
 8 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/d867264d468b323c2e76886d44e7e8f9/thumbnail.png">
 9 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/372137cb593503f2f40a7aecc0f1cd4e/thumbnail.png">
10 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/167495acd7fcca38f697b683436cf6a2/thumbnail.png">
11 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/e842c1b64974666c60fc3e437f8c8cf9/thumbnail.png">
12 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/3f2ff2e32652397de94d406460e240ce/thumbnail.png">
13 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/ba21316eafc6b84b22d1a5d49ad2a798/thumbnail.png">
14 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/90240a6d88bdb1411467b21ea0769029/thumbnail.png">
15 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/74005576875677d78d73687e46fae030/thumbnail.png">
16 | <img width="230" height="120" src="http://bl.ocks.org/curran/raw/fe735c750f55491c1ea80f022ba7d7cd/thumbnail.png">
17 | 


--------------------------------------------------------------------------------
/archive/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width">
 6 |     <title>Example Viewer</title>
 7 | 
 8 |     <!--
 9 |       This file came from
10 |       https://github.com/curran/example-viewer
11 |     -->
12 | 
13 |     <!-- TODO use unpkg everywhere -->
14 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.min.js"></script>
15 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/javascript/javascript.min.js"></script>
16 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/css/css.min.js"></script>
17 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/xml/xml.min.js"></script>
18 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/mode/htmlmixed/htmlmixed.min.js"></script>
19 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.23.0/codemirror.min.css">
20 |     <script src="https://enjalot.github.io/Inlet/inlet.min.js"></script>
21 |     <link rel="stylesheet" href="https://enjalot.github.io/Inlet/inlet.css">
22 | 
23 |     <link rel="stylesheet" href="https://unpkg.com/example-viewer@1.2.3/example-viewer-dist/styles.css">
24 |   </head>
25 |   <body>
26 |     <script src="https://unpkg.com/example-viewer@1.2.3/example-viewer-dist/bundle.min.js"> </script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/archive/montage.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Montage</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       function parseHash(){
10 |         const raw = window.location.hash.substr(1).split("/");
11 |         return { unit: +raw[0], module: +raw[1] };
12 |       }
13 | 
14 |       function twoDigits(number){
15 |         return number.toString().length === 1 ? "0" + number : number;
16 |       }
17 | 
18 |       function examplePath(params){
19 |         return [
20 |           "units",                   
21 |           "unit-" + twoDigits(params.unit),
22 |           "module-" + twoDigits(params.module),
23 |           "example-" + twoDigits(params.example)
24 |         ].join("/");                 
25 |       }
26 | 
27 |       const width = 960;
28 |       const height = 500;
29 | 
30 |       d3.json("index.json", (data) => {
31 |         const { unit, module } = parseHash();
32 |         const moduleData = data.units[unit - 1].modules[module - 1];
33 |         const examples = moduleData.examples.map((d, i) => ({ unit, module, example: i + 1 }));
34 |         d3.select("body").selectAll("iframe").data(examples)
35 |           .enter().append("iframe")
36 |             .attr("src", examplePath)
37 |             .attr("frameborder", "none")
38 |             .attr("width", width)
39 |             .attr("height", height)
40 |             .attr("marginwidth", 0)
41 |             .attr("marginheight", 0)
42 |             .attr("scrolling", "no")
43 |             .style("pointer-events", "none");
44 |       });
45 |       window.addEventListener("mousemove", (event) => {
46 |         if(event.shiftKey){
47 |           const scale = event.clientX / window.innerWidth;
48 |           const transform = `scale(${scale})`;// translate(-${scale*width}, -${scale*height})`;
49 |           const marginTB = (scale * height - height)/2 + "px";
50 |           const marginLR = (scale * width - width)/2 + "px";
51 |           d3.selectAll("iframe")
52 |               .style("transform", transform)
53 |               .style("margin-top", marginTB)
54 |               .style("margin-bottom", marginTB)
55 |               .style("margin-left", marginLR)
56 |               .style("margin-right", marginLR);
57 |         }
58 |       })
59 | 
60 |       let current = -1;
61 |       const RIGHT_ARROW = 39;
62 |       const LEFT_ARROW = 37;
63 |       const highlight = (event) => {
64 |         if(event.keyCode === RIGHT_ARROW){
65 |           current++;
66 |         }
67 |         if(event.keyCode === LEFT_ARROW){
68 |           current--;
69 |         }
70 |         d3.selectAll("iframe")
71 |             .style("border", (d, i) => "solid 8px " + (i === current ? "red" : "white"))
72 |       }
73 |       window.addEventListener("keyup", highlight)
74 |       highlight({ keyCode: 0 }); // Set initial border for layout.
75 |     </script>
76 |   </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/archive/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "d3-in-motion",
 3 |   "version": "0.0.1",
 4 |   "description": "Code examples and references for the course \"D3.js in Motion\".",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "example-viewer",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/curran/d3-in-motion.git"
13 |   },
14 |   "keywords": [
15 |     "chart",
16 |     "d3js",
17 |     "data",
18 |     "dataviz",
19 |     "html5",
20 |     "programming",
21 |     "teaching",
22 |     "visualization",
23 |     "web"
24 |   ],
25 |   "author": "Curran Kelleher",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/curran/d3-in-motion/issues"
29 |   },
30 |   "homepage": "https://github.com/curran/d3-in-motion#readme",
31 |   "dependencies": {
32 |     "example-viewer": "1.2.3"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/archive/retab.sh:
--------------------------------------------------------------------------------
1 | # Replaces all tabs with 2 spaces.
2 | # From http://stackoverflow.com/questions/11094383/how-can-i-convert-tabs-to-spaces-in-every-file-of-a-directory
3 | 
4 | cd units
5 | find . -name 'index.html' -exec ex '+%s/\t/  /g' -cwq {} \;
6 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-01/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Nothing in this Module</title>
 5 |   </head>
 6 |   <body>
 7 |     <h1>Nothing to see...</h1>
 8 |     <p>Check out unit 2!</p>
 9 |   </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Hello HTML</title>
 5 |   </head>
 6 |   <body>
 7 |     <h1>Hello HTML</h1>
 8 |   </body>
 9 | </html>
10 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Hello DOM API</title>
 5 |   </head>
 6 |   <body>
 7 |     <h1></h1>
 8 |     <script>
 9 |       document.querySelector("h1").textContent = "Hello DOM API";
10 |     </script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Hello D3</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <h1></h1>
 9 |     <script>
10 |       d3.select("h1").text("Hello D3");
11 |     </script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Select</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <h1></h1>
 9 |     <h1></h1>
10 |     <h1></h1>
11 |     <script>
12 |       d3.select("h1").text("select finds the first match");
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Select</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <h1></h1>
 9 |     <h1></h1>
10 |     <h1></h1>
11 |     <script>
12 |       d3.selectAll("h1").text("select finds all matches");
13 |     </script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Styling with CSS</title>
 5 |     <style>
 6 |       h1 {
 7 |         font-size: 150pt;
 8 |       }
 9 |     </style>
10 |   </head>
11 |   <body>
12 |     <h1>Large Text</h1>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-07/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Styling with D3</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <h1>Large Text</h1>
 9 |     <script>
10 |       d3.select("h1").style("font-size", "150pt");
11 |     </script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-08/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Classes with CSS</title>
 5 |     <style>
 6 |       .large-title {
 7 |         font-size: 120pt;
 8 |       }
 9 |       .small-content {
10 |         font-size: 40pt;
11 |       }
12 |     </style>
13 |   </head>
14 |   <body>
15 |     <div class="large-title">Large Title</div>
16 |     <div class="small-content">This content is smaller than the title.</div>
17 |     <div class="large-title">Another Title</div>
18 |     <div class="small-content">This content is also smaller than the title.</div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-09/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Classes with D3</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <div class="large-title">Large Title</div>
 9 |     <div class="small-content">This content is smaller than the title.</div>
10 |     <div class="large-title">Another Title</div>
11 |     <div class="small-content">This content is also smaller than the title.</div>
12 |     <script>
13 |       d3.selectAll(".large-title").style("font-size", "120pt");
14 |       d3.selectAll(".small-content").style("font-size", "40pt");
15 |     </script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-10/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>IDs with D3</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <div id="title-1" class="large-title"></div>
 9 |     <div id="content-1" class="small-content"></div>
10 |     <div id="title-2" class="large-title"></div>
11 |     <div id="content-2" class="small-content"></div>
12 |     <script>
13 |       d3.selectAll(".large-title").style("font-size", "120pt");
14 |       d3.selectAll(".small-content").style("font-size", "40pt");
15 |       d3.select("#title-1").text("Large Title");
16 |       d3.select("#content-1").text("This content is set using D3.");
17 |       d3.select("#title-2").text("Another Title");
18 |       d3.select("#content-2").text("This content is also set using D3.");
19 |     </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-11/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Appending Elements</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       d3.select("body").append("div").text("This element was added by D3");
10 |     </script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-12/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>D3 Indentation</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       d3.select("body")
10 |         .append("div")
11 |           .text("This element was added by D3");
12 |     </script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-13/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Setting Classes with D3</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |     <style>
 7 |       .large-title {
 8 |         font-size: 120pt;
 9 |       }
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <script>
14 |       d3.select("body")
15 |         .append("div")
16 |           .text("This element has a class.")
17 |           .attr("class", "large-title");
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-14/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Appending Many Things</title>
 5 |     <style>
 6 |       .large-title {
 7 |         font-size: 120pt;
 8 |       }
 9 |       .small-content {
10 |         font-size: 40pt;
11 |       }
12 |     </style>
13 |     <script src="https://d3js.org/d3.v4.min.js"></script>
14 |   </head>
15 |   <body>
16 |     <script>
17 |       var body = d3.select("body");
18 |       body
19 |         .append("div")
20 |           .text("Large Title")
21 |           .attr("class", "large-title");
22 |       body
23 |         .append("div")
24 |           .text("This content is smaller than the title.")
25 |           .attr("class", "small-content");
26 |       body
27 |         .append("div")
28 |           .text("Another Title")
29 |           .attr("class", "large-title");
30 |       body
31 |         .append("div")
32 |           .text("This content is also smaller than the title.")
33 |           .attr("class", "small-content");
34 |     </script>
35 |   </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-02/example-15/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Exercise</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       var body = d3.select("body");
10 |       body
11 |         .append("div")
12 |           .text("Large Title")
13 |           .attr("class", "large-title");
14 |       body
15 |         .append("div")
16 |           .text("This content is smaller than the title.")
17 |           .attr("class", "small-content");
18 |       body
19 |         .append("div")
20 |           .text("Another Title")
21 |           .attr("class", "large-title");
22 |       body
23 |         .append("div")
24 |           .text("This content is also smaller than the title.")
25 |           .attr("class", "small-content");
26 |       
27 |       // Your task is to restore the styling to this page using D3, not CSS.
28 |       // CTRL + Left/Right arrows navigates between examples.
29 |       // (Hint: example 9 might be useful.)
30 |     </script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>SVG Rectangle</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg>
 8 |       <rect width="300" height="300"></rect>
 9 |     </svg>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>SVG Width & Height</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="960" height="500"> <!-- This size is used on bl.ocks.org. -->
 8 |       <rect width="300" height="300"></rect>
 9 |     </svg>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Coordinate System</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="960" height="500">
 8 |       <rect x="100" y="100" width="300" height="300"></rect>
 9 |     </svg>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>SVG with D3 I</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500">
 9 |       <rect y="100" width="300" height="300"></rect>
10 |     </svg>
11 |     <script>
12 |       d3.select("rect")
13 |           .attr("x", 100);
14 |     </script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>SVG with D3 II</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500">
 9 |       <rect></rect>
10 |     </svg>
11 |     <script>
12 |       d3.select("rect")
13 |           .attr("x", 100)
14 |           .attr("y", 100)
15 |           .attr("width", 300)
16 |           .attr("height", 300);
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>SVG with D3 III</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       d3.select("svg")
11 |         .append("rect")
12 |           .attr("x", 100)
13 |           .attr("y", 100)
14 |           .attr("width", 300)
15 |           .attr("height", 300);
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-07/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>SVG with D3 IV</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       d3.select("body")
10 |         .append("svg")
11 |           .attr("width", 960)
12 |           .attr("height", 500)
13 |         .append("rect")
14 |           .attr("x", 100)
15 |           .attr("y", 100)
16 |           .attr("width", 300)
17 |           .attr("height", 300);
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-08/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>SVG var Convention</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       var svg = d3.select("svg");
11 |       svg
12 |         .append("rect")
13 |           .attr("x", 100)
14 |           .attr("y", 100)
15 |           .attr("width", 300)
16 |           .attr("height", 300);
17 |     </script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-09/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>SVG Circle</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="960" height="500">
 8 |       <circle cx="480" cy="250" r="250"></circle>
 9 |     </svg>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-10/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>D3 Circle</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       var svg = d3.select("svg");
11 |       svg
12 |         .append("circle")
13 |           .attr("cx", 480)
14 |           .attr("cy", 250)
15 |           .attr("r", 250);
16 |     </script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-11/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Fill</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="960" height="500">
 8 |       <circle cx="480" cy="250" r="250" fill="red"></circle>
 9 |     </svg>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-12/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Hex Colors</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="960" height="500">
 8 |       <circle cx="480" cy="250" r="250" fill="#ff0000"></circle>
 9 |     </svg>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-13/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>RGB Colors</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="960" height="500">
 8 |       <circle cx="480" cy="250" r="250" fill="rgb(255,0,0)"></circle>
 9 |     </svg>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-14/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>RGBa (alpha) Colors</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="960" height="500">
 8 |       <rect x="100" y="100" width="300" height="300"></rect>
 9 |       <circle cx="480" cy="250" r="250" fill="rgba(255, 0, 0, 0.5)"></circle>
10 |     </svg>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-15/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Z Ordering</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="960" height="500">
 8 |       <circle cx="480" cy="250" r="250" fill="rgba(255, 0, 0, 0.5)"></circle>
 9 |       <rect x="100" y="100" width="300" height="300"></rect>
10 |     </svg>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-16/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Multiple Shapes with D3</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       var svg = d3.select("svg");
11 |       svg
12 |         .append("circle")
13 |           .attr("cx", 480)
14 |           .attr("cy", 250)
15 |           .attr("r", 250)
16 |           .attr("fill", "rgba(255, 0, 0, 0.5)")
17 |           .attr("r", 250);
18 |       svg
19 |         .append("rect")
20 |           .attr("x", 100)
21 |           .attr("y", 100)
22 |           .attr("width", 300)
23 |           .attr("height", 300);
24 |     </script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-17/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Stroke</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="960" height="500">
 8 |       <circle cx="480" cy="250" r="250" fill="none" stroke="black"></circle>
 9 |     </svg>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-18/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Stroke Width</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="960" height="500">
 8 |       <circle cx="480" cy="250" r="200"
 9 |               fill="none" stroke="black" stroke-width="50"></circle>
10 |     </svg>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-03/example-19/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Exercise</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500">
 9 |       <rect x="100" y="100" width="760" height="300"
10 |             fill="none" stroke="#0075a8" stroke-width="50"></rect>
11 |       <circle cx="400" cy="250" r="200"
12 |               fill="rgba(0, 200, 0, 0.5)" stroke="black" stroke-width="30"></circle>
13 |       <circle cx="560" cy="250" r="200"
14 |               fill="rgba(0, 200, 0, 0.5)" stroke="black" stroke-width="30"></circle>
15 |     </svg>
16 |     <script>
17 |       var svg = d3.select("svg");
18 |       
19 |       // Your task is delete the SVG shapes above and re-create them using D3.
20 |       // Feel free to play around with the colors, strokes, and coordinates.
21 |       // Hint: start with svg.append("rect")
22 |     </script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-04/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>SVG Circles</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="960" height="500">
 8 |       <circle cx="300" cy="250" r="100"></circle>
 9 |       <circle cx="500" cy="250" r="100"></circle>
10 |       <circle cx="700" cy="250" r="100"></circle>
11 |     </svg>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-04/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Data Join</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500">
 9 |       <circle cy="250" r="100"></circle>
10 |       <circle cy="250" r="100"></circle>
11 |       <circle cy="250" r="100"></circle>
12 |     </svg>
13 |     <script>
14 |       d3.select("svg")
15 |         .selectAll("circle")
16 |         .data([300, 500, 700])
17 |           .attr("cx", function (d){ return d; });
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-04/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Update</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500">
 9 |       <circle cy="250" r="100"></circle>
10 |       <circle cy="250" r="100"></circle>
11 |       <circle cy="250" r="100"></circle>
12 |     </svg>
13 |     <script>
14 |       d3.select("svg")
15 |         .selectAll("circle")
16 |         .data([300, 500, 700])
17 |           .attr("cx", function (d){ return d; })
18 |           .attr("fill", "orange"); // This color applies to the "Update" selection.
19 |     </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-04/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Enter</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500">
 9 |       <circle cy="250" r="100"></circle>
10 |       <circle cy="250" r="100"></circle>
11 |       <circle cy="250" r="100"></circle>
12 |     </svg>
13 |     <script>
14 |       d3.select("svg")
15 |         .selectAll("circle")
16 |         .data([300, 500, 700])
17 |           .attr("cx", function (d){ return d; })
18 |           .attr("fill", "orange") // This color applies to the "Update" selection.
19 |         .enter()
20 |         .append("circle")
21 |           .attr("cx", function (d){ return d; })
22 |           .attr("cy", 250)
23 |           .attr("r", 100)
24 |           .attr("fill", "green"); // This color applies to the "Enter" selection.
25 |     </script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-04/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Enter Only</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       d3.select("svg")
11 |         .selectAll("circle")
12 |         .data([300, 500, 700])
13 |         .enter()
14 |         .append("circle")
15 |           .attr("cx", function (d){ return d; })
16 |           .attr("cy", 250)
17 |           .attr("r", 100)
18 |           .attr("fill", "green");
19 |     </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-04/example-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Variable for Data</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       var data = [300, 500, 700];
11 |       d3.select("svg")
12 |         .selectAll("circle")
13 |         .data(data)
14 |         .enter()
15 |         .append("circle")
16 |           .attr("cx", function (d){ return d; })
17 |           .attr("cy", 250)
18 |           .attr("r", 100)
19 |           .attr("fill", "green");
20 |     </script>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-04/example-07/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Objects as Data</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       var data = [
11 |         { x: 300 },
12 |         { x: 500 },
13 |         { x: 700 }
14 |       ];
15 |       d3.select("svg")
16 |         .selectAll("circle")
17 |         .data(data)
18 |         .enter()
19 |         .append("circle")
20 |           .attr("cx", function (d){ return d.x; })
21 |           .attr("cy", 250)
22 |           .attr("r", 100)
23 |           .attr("fill", "green");
24 |     </script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-04/example-08/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Pseudo Scatter Plot</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       var data = [
11 |         { x: 300, y:150 },
12 |         { x: 500, y:350 },
13 |         { x: 700, y:200 }
14 |       ];
15 |       d3.select("svg")
16 |         .selectAll("circle")
17 |         .data(data)
18 |         .enter()
19 |         .append("circle")
20 |           .attr("cx", function (d){ return d.x; })
21 |           .attr("cy", function (d){ return d.y; })
22 |           .attr("r", 100)
23 |           .attr("fill", "green");
24 |     </script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-04/example-09/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Bubbles</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       var data = [
11 |         { x: 300, y:150, r: 44 },
12 |         { x: 500, y:350, r: 51 },
13 |         { x: 700, y:200, r: 33 },
14 |         { x: 583, y:114, r: 77 },
15 |         { x: 844, y:218, r: 74 },
16 |         { x: 257, y:316, r: 44 },
17 |         { x: 466, y:200, r: 31 },
18 |         { x: 179, y:414, r: 50 },
19 |         { x: 179, y:231, r: 36 },
20 |         { x: 376, y:326, r: 26 },
21 |         { x: 676, y:118, r: 68 },
22 |         { x: 626, y:199, r: 68 },
23 |         { x: 510, y:269, r: 15 },
24 |         { x: 510, y:419, r: 15 },
25 |         { x: 311, y:388, r: 15 },
26 |         { x: 50, y:388, r: 6 },
27 |         { x: 90, y:431, r: 6 },
28 |         { x: 90, y:287, r: 11 },
29 |         { x: 630, y:145, r: 11 }
30 |       ];
31 |       d3.select("svg")
32 |         .selectAll("circle")
33 |         .data(data)
34 |         .enter()
35 |         .append("circle")
36 |           .attr("cx", function (d){ return d.x; })
37 |           .attr("cy", function (d){ return d.y; })
38 |           .attr("r", function (d){ return d.r; })
39 |           .attr("fill", "rgba(255, 0, 0, 0.3)")
40 |           .attr("stroke", "black");
41 |     </script>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-04/example-10/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Exercise</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500">
 9 |       <!-- Delete these rect elements from HTML,
10 |            and write the code below to create them using D3. -->
11 |       <rect x="50" y="50" width="765" height="80"></rect>
12 |       <rect x="50" y="150" width="480" height="80"></rect>
13 |       <rect x="50" y="250" width="181" height="80"></rect>
14 |       <rect x="50" y="350" width="81" height="80"></rect>
15 |     </svg>
16 |     <script>
17 |       var data = [
18 |         // Put some objects here.
19 |       ];
20 |       d3.select("svg")
21 |         .selectAll("rect")
22 |         .data(data)
23 |         .enter()
24 |         .append("rect")
25 |           //.attr ...
26 |     </script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-05/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Update and Enter</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       var data = [300, 500, 700];
11 |       d3.select("svg")
12 |         .selectAll("circle")
13 |         .data(data)
14 |           .attr("cx", function (d){ return d; })
15 |           .attr("fill", "orange") // This color applies to the "Update" selection.
16 |         .enter()
17 |         .append("circle")
18 |           .attr("cx", function (d){ return d; })
19 |           .attr("cy", 250)
20 |           .attr("r", 100)
21 |           .attr("fill", "green"); // This color applies to the "Enter" selection.
22 |     </script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-05/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Render Function</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       function render(data){
11 |         d3.select("svg")
12 |           .selectAll("circle")
13 |           .data(data)
14 |             .attr("cx", function (d){ return d; })
15 |             .attr("fill", "orange") // This color applies to the "Update" selection.
16 |           .enter()
17 |           .append("circle")
18 |             .attr("cx", function (d){ return d; })
19 |             .attr("cy", 250)
20 |             .attr("r", 100)
21 |             .attr("fill", "green"); // This color applies to the "Enter" selection.
22 |       }
23 |       render([300, 500, 700]); // Enter
24 |     </script>
25 |   </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-05/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Multiple Invocations</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       function render(data){
11 |         d3.select("svg")
12 |           .selectAll("circle")
13 |           .data(data)
14 |             .attr("cx", function (d){ return d; })
15 |             .attr("fill", "orange") // This color applies to the "Update" selection.
16 |           .enter()
17 |           .append("circle")
18 |             .attr("cx", function (d){ return d; })
19 |             .attr("cy", 250)
20 |             .attr("r", 100)
21 |             .attr("fill", "green"); // This color applies to the "Enter" selection.
22 |       }
23 |       render([200, 400]); // Enter
24 |       render([300, 500, 700]);  // Update + Enter
25 |     </script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-05/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>The Case for Exit</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       function render(data){
11 |         d3.select("svg")
12 |           .selectAll("circle")
13 |           .data(data)
14 |             .attr("cx", function (d){ return d; })
15 |             .attr("fill", "orange") // This color applies to the "Update" selection.
16 |           .enter()
17 |           .append("circle")
18 |             .attr("cx", function (d){ return d; })
19 |             .attr("cy", 250)
20 |             .attr("r", 100)
21 |             .attr("fill", "green"); // This color applies to the "Enter" selection.
22 |       }
23 |       render([300, 500, 700]); // Enter
24 |       render([]); // Exit (not handled)
25 |     </script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-05/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Circles Variable</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       function render(data){
11 |         var circles = d3.select("svg")
12 |           .selectAll("circle")
13 |           .data(data)
14 |             .attr("cx", function (d){ return d; })
15 |             .attr("fill", "orange"); // This color applies to the "Update" selection.
16 |         circles
17 |           .enter()
18 |           .append("circle")
19 |             .attr("cx", function (d){ return d; })
20 |             .attr("cy", 250)
21 |             .attr("r", 100)
22 |             .attr("fill", "green"); // This color applies to the "Enter" selection.
23 |       }
24 |       render([300, 500, 700]); // Enter
25 |       render([]); // Exit (not handled)
26 |     </script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-05/example-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Exit</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       function render(data){
11 |         var circles = d3.select("svg")
12 |           .selectAll("circle")
13 |           .data(data)
14 |             .attr("cx", function (d){ return d; })
15 |             .attr("fill", "orange"); // This color applies to the "Update" selection.
16 |         circles
17 |           .exit()
18 |             .attr("fill", "red"); // This color applies to the "Exit" selection.
19 |         circles
20 |           .enter()
21 |           .append("circle")
22 |             .attr("cx", function (d){ return d; })
23 |             .attr("cy", 250)
24 |             .attr("r", 100)
25 |             .attr("fill", "green"); // This color applies to the "Enter" selection.
26 |       }
27 |       render([300, 500, 700]); // Enter
28 |       render([]); // Exit (not handled)
29 |     </script>
30 |   </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-05/example-07/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Removing on Exit</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       function render(data){
11 |         var circles = d3.select("svg")
12 |           .selectAll("circle")
13 |           .data(data)
14 |             .attr("cx", function (d){ return d; })
15 |             .attr("fill", "orange"); // This color applies to the "Update" selection.
16 |         circles
17 |           .exit()
18 |             .remove();
19 |         circles
20 |           .enter()
21 |           .append("circle")
22 |             .attr("cx", function (d){ return d; })
23 |             .attr("cy", 250)
24 |             .attr("r", 100)
25 |             .attr("fill", "green"); // This color applies to the "Enter" selection.
26 |       }
27 |       render([300, 500, 700]); // Enter
28 |       render([]); // Exit
29 |       //render([300, 500, 700]); // Enter
30 |       //render([300]); // Update + Exit
31 |     </script>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-05/example-08/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>The Case for Merge</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       function render(data){
11 |         var circles = d3.select("svg")
12 |           .selectAll("circle")
13 |           .data(data)
14 |             .attr("cx", function (d){ return d; }); // DUPLICATED LOGIC
15 |         circles
16 |           .exit()
17 |             .remove();
18 |         circles
19 |           .enter()
20 |           .append("circle")
21 |             .attr("cx", function (d){ return d; }) // DUPLICATED LOGIC
22 |             .attr("cy", 250)
23 |             .attr("r", 100);
24 |       }
25 |       render([300, 500, 700]); // Enter
26 |       render([200, 400, 600, 800]); // Enter + Update
27 |     </script>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-05/example-09/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Using Merge</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       function render(data){
11 |         
12 |         // General Update Pattern
13 |         var circles = d3.select("svg")
14 |           .selectAll("circle")
15 |           .data(data);
16 |         circles
17 |           .exit()
18 |             .remove();
19 |         circles
20 |           .enter()
21 |           .append("circle")
22 |             .attr("cy", 250)
23 |             .attr("r", 100)
24 |           .merge(circles)
25 |             .attr("cx", function (d){ return d; });
26 |       }
27 |       render([300, 500, 700]); // Enter
28 |       render([200, 400, 600, 800]); // Enter + Update
29 |       //render([]); // Exit
30 |     </script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-05/example-10/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Exercise</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       function render(data){
11 |         
12 |         // Modify the code in this function
13 |         // to use the General Update Pattern.
14 |         // Hint: Draw from example 9, use .exit() and .merge().
15 |         var rects = d3.select("svg")
16 |           .selectAll("rect")
17 |           .data(data);
18 |         rects
19 |           .enter()
20 |           .append("rect")
21 |             .attr("x", function (d){ return d; })
22 |             .attr("y", 100)
23 |             .attr("width", 70)
24 |             .attr("height", 300);
25 |       }
26 |       
27 |       // These invocations test the various cases (Enter, Update, Exit).
28 |       render([100]);
29 |       render([300, 500, 700, 800, 880]);
30 |       render([300, 500]);
31 |       render([]);
32 |       
33 |       // This last invocation should leave you with
34 |       // four evenly spaced rectangles.
35 |       render([200, 400, 600, 800]);
36 |     </script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-06/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Background Circle</title>
 5 |   </head>
 6 |   <body>
 7 |     <svg width="960" height="500">
 8 |       <circle cx="480" cy="250" r="250" fill="rgba(255, 0, 0, 0.5)"></circle>
 9 |     </svg>
10 |   </body>
11 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-01/module-06/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>The Case for Classes</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500">
 9 |       <circle cx="480" cy="250" r="250" fill="rgba(255, 0, 0, 0.5)"></circle>
10 |     </svg>
11 |     <script>
12 |       function render(data){
13 |         var circles = d3.select("svg")
14 |           .selectAll("circle")
15 |           .data(data);
16 |         circles
17 |           .exit()
18 |             .remove();
19 |         circles
20 |           .enter()
21 |           .append("circle")
22 |             .attr("cy", 250)
23 |             .attr("r", 100)
24 |           .merge(circles)
25 |             .attr("cx", function (d){ return d; });
26 |       }
27 |       render([300, 500]);
28 |       render([300]);
29 |       render([300, 500, 700]);
30 |       render([200, 400, 600, 800]);
31 |     </script>
32 |   </body>
33 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-01/module-06/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Using Classes</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500">
 9 |       <circle cx="480" cy="250" r="250" fill="rgba(255, 0, 0, 0.5)"></circle>
10 |     </svg>
11 |     <script>
12 |       function render(data){
13 |         var circles = d3.select("svg")
14 |           .selectAll(".point")
15 |           .data(data);
16 |         circles
17 |           .enter()
18 |           .append("circle")
19 |             .attr("class", "point")
20 |             .attr("cy", 250)
21 |             .attr("r", 100)
22 |           .merge(circles)
23 |             .attr("cx", function (d){ return d; });
24 |         circles
25 |           .exit().remove();
26 |       }
27 |       render([300, 500]);
28 |       render([300]);
29 |       render([300, 500, 700]);
30 |       render([200, 400, 600, 800]);
31 |     </script>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-06/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>The Case for One Thing</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       function render(data){
10 |         var svg = d3.select("body")
11 |           .append("svg")
12 |             .attr("width", 960)
13 |             .attr("height", 500);
14 |         
15 |         var circles = svg
16 |           .selectAll("circle")
17 |           .data(data);
18 |         circles
19 |           .enter()
20 |           .append("circle")
21 |             .attr("cy", 250)
22 |             .attr("r", 100)
23 |           .merge(circles)
24 |             .attr("cx", function (d){ return d; });
25 |         circles
26 |           .exit().remove();
27 |       }
28 |       render([300, 500]);
29 |       render([300]);
30 |       render([300, 500, 700]);
31 |       render([200, 400, 600, 800]);
32 |     </script>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-06/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Managing One Thing</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       function render(data){
10 |         var svg = d3.select("body")
11 |           .selectAll("svg")
12 |           .data([null]);
13 |         svg = svg
14 |           .enter()
15 |           .append("svg")
16 |             .attr("width", 960)
17 |             .attr("height", 500)
18 |           .merge(svg);
19 |         
20 |         var circles = svg
21 |           .selectAll("circle")
22 |           .data(data);
23 |         circles
24 |           .enter()
25 |           .append("circle")
26 |             .attr("cy", 250)
27 |             .attr("r", 100)
28 |           .merge(circles)
29 |             .attr("cx", function (d){ return d; });
30 |         circles
31 |           .exit().remove();
32 |       }
33 |       render([300, 500]);
34 |       render([300]);
35 |       render([300, 500, 700]);
36 |       render([200, 400, 600, 800]);
37 |     </script>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-06/example-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Compact Variation</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       function render(data){
10 |         var svg = d3.select("body").selectAll("svg").data([null]);
11 |         svg = svg.merge(svg.enter().append("svg")
12 |             .attr("width", 960)
13 |             .attr("height", 500));
14 |         
15 |         var circles = svg
16 |           .selectAll("circle")
17 |           .data(data);
18 |         circles
19 |           .enter()
20 |           .append("circle")
21 |             .attr("cy", 250)
22 |             .attr("r", 100)
23 |           .merge(circles)
24 |             .attr("cx", function (d){ return d; });
25 |         circles
26 |           .exit().remove();
27 |       }
28 |       render([300, 500]);
29 |       render([300]);
30 |       render([300, 500, 700]);
31 |       render([200, 400, 600, 800]);
32 |     </script>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/archive/units/unit-01/module-06/example-07/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Exercise</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       function render(data){
10 |         var svg = d3.select("body").selectAll("svg").data([null]);
11 |         svg = svg.merge(svg.enter().append("svg")
12 |             .attr("width", 960)
13 |             .attr("height", 500));
14 |         
15 |         // Your task is to modify the code
16 |         // for rendering circles
17 |         // to be more compact.
18 |         var circles = svg
19 |           .selectAll("circle")
20 |           .data(data);
21 |         circles
22 |           .enter()
23 |           .append("circle")
24 |             .attr("cy", 250)
25 |             .attr("r", 100)
26 |           .merge(circles)
27 |             .attr("cx", function (d){ return d; });
28 |         circles
29 |           .exit().remove();
30 |       }
31 |       render([300, 500]);
32 |       render([300]);
33 |       render([300, 500, 700]);
34 |       render([200, 400, 600, 800]);
35 |     </script>
36 |   </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/archive/units/unit-02/module-01/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Rendering Bubbles</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       
11 |       // A fusion of previous examples:
12 |       // Bubbles #1/4/9
13 |       // Using Merge #1/5/9
14 |       var svg = d3.select("svg");
15 |       function render(data){
16 |         const circles = svg.selectAll("circle").data(data);
17 |         circles.exit().remove();
18 |         circles
19 |           .enter().append("circle")
20 |             .attr("fill", "rgba(255, 0, 0, 0.3)")
21 |             .attr("stroke", "black")
22 |           .merge(circles)
23 |             .attr("cx", function (d){ return d.x; })
24 |             .attr("cy", function (d){ return d.y; })
25 |             .attr("r", function (d){ return d.r; });
26 |       }
27 |       
28 |       render([
29 |         { x: 300, y:150, r: 44 },
30 |         { x: 500, y:350, r: 51 },
31 |         { x: 700, y:200, r: 33 },
32 |         { x: 583, y:114, r: 77 },
33 |         { x: 844, y:218, r: 74 },
34 |         { x: 257, y:316, r: 44 },
35 |         { x: 466, y:200, r: 31 },
36 |         { x: 179, y:414, r: 50 },
37 |         { x: 179, y:231, r: 36 },
38 |         { x: 376, y:326, r: 26 },
39 |         { x: 676, y:118, r: 68 },
40 |         { x: 626, y:199, r: 68 },
41 |         { x: 510, y:269, r: 15 },
42 |         { x: 510, y:419, r: 15 },
43 |         { x: 311, y:388, r: 15 },
44 |         { x: 50, y:388, r: 6 },
45 |         { x: 90, y:431, r: 6 },
46 |         { x: 90, y:287, r: 11 },
47 |         { x: 630, y:145, r: 11 }
48 |       ]);
49 |     </script>
50 |   </body>
51 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-01/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Rendering Bubbles ES6</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const svg = d3.select("svg");
11 |       
12 |       function render(data){
13 |         const circles = svg.selectAll("circle").data(data);
14 |         circles.exit().remove();
15 |         circles
16 |           .enter().append("circle")
17 |             .attr("fill", "rgba(255, 0, 0, 0.3)")
18 |             .attr("stroke", "black")
19 |           .merge(circles)
20 |             .attr("cx", d => d.x)
21 |             .attr("cy", d => d.y)
22 |             .attr("r", d => d.r);
23 |       }
24 |       
25 |       render([
26 |         { x: 300, y:150, r: 44 },
27 |         { x: 500, y:350, r: 51 },
28 |         { x: 700, y:200, r: 33 },
29 |         { x: 583, y:114, r: 77 },
30 |         { x: 844, y:218, r: 74 },
31 |         { x: 257, y:316, r: 44 },
32 |         { x: 466, y:200, r: 31 },
33 |         { x: 179, y:414, r: 50 },
34 |         { x: 179, y:231, r: 36 },
35 |         { x: 376, y:326, r: 26 },
36 |         { x: 676, y:118, r: 68 },
37 |         { x: 626, y:199, r: 68 },
38 |         { x: 510, y:269, r: 15 },
39 |         { x: 510, y:419, r: 15 },
40 |         { x: 311, y:388, r: 15 },
41 |         { x: 50, y:388, r: 6 },
42 |         { x: 90, y:431, r: 6 },
43 |         { x: 90, y:287, r: 11 },
44 |         { x: 630, y:145, r: 11 }
45 |       ]);
46 |     </script>
47 |   </body>
48 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-01/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Using Babel Standalone</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 7 |   </head>
 8 |   <body>
 9 |     <svg width="960" height="500"></svg>
10 |     <script type="text/babel" data-presets="es2015">
11 |       const svg = d3.select("svg");
12 |       
13 |       function render(data){
14 |         const circles = svg.selectAll("circle").data(data);
15 |         circles.exit().remove();
16 |         circles
17 |           .enter().append("circle")
18 |             .attr("fill", "rgba(255, 0, 0, 0.3)")
19 |             .attr("stroke", "black")
20 |           .merge(circles)
21 |             .attr("cx", d => d.x)
22 |             .attr("cy", d => d.y)
23 |             .attr("r", d => d.r);
24 |       }
25 |       
26 |       render([
27 |         { x: 300, y:150, r: 44 },
28 |         { x: 500, y:350, r: 51 },
29 |         { x: 700, y:200, r: 33 },
30 |         { x: 583, y:114, r: 77 },
31 |         { x: 844, y:218, r: 74 },
32 |         { x: 257, y:316, r: 44 },
33 |         { x: 466, y:200, r: 31 },
34 |         { x: 179, y:414, r: 50 },
35 |         { x: 179, y:231, r: 36 },
36 |         { x: 376, y:326, r: 26 },
37 |         { x: 676, y:118, r: 68 },
38 |         { x: 626, y:199, r: 68 },
39 |         { x: 510, y:269, r: 15 },
40 |         { x: 510, y:419, r: 15 },
41 |         { x: 311, y:388, r: 15 },
42 |         { x: 50, y:388, r: 6 },
43 |         { x: 90, y:431, r: 6 },
44 |         { x: 90, y:287, r: 11 },
45 |         { x: 630, y:145, r: 11 }
46 |       ]);
47 |     </script>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-01/example-04/babelrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "es2015",
 5 |       {
 6 |         "modules": false
 7 |       }
 8 |     ]
 9 |   ]
10 | }


--------------------------------------------------------------------------------
/archive/units/unit-02/module-01/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Using Rollup and Babel</title>
 5 |     <!--
 6 |       No longer necessary to load
 7 |       D3 default bundle (219KB).
 8 |       <script src="https://d3js.org/d3.v4.min.js"></script>
 9 |     -->
10 |   </head>
11 |   <body>
12 |     <svg width="960" height="500"></svg>
13 |     <!--
14 |       This bundle contains our code
15 |       and the D3 functions we import (18KB).
16 |     -->
17 |     <script src="bundle.js"></script>
18 |   </body>
19 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-01/example-04/index.js:
--------------------------------------------------------------------------------
 1 | import { select } from "d3-selection";
 2 | 
 3 | const svg = select("svg");
 4 | 
 5 | function render(data){
 6 |   const circles = svg.selectAll("circle").data(data);
 7 |   circles.exit().remove();
 8 |   circles
 9 |     .enter().append("circle")
10 |       .attr("fill", "rgba(255, 0, 0, 0.3)")
11 |       .attr("stroke", "black")
12 |     .merge(circles)
13 |       .attr("cx", d => d.x)
14 |       .attr("cy", d => d.y)
15 |       .attr("r", d => d.r);
16 | }
17 | 
18 | render([
19 |   { x: 300, y:150, r: 44 },
20 |   { x: 500, y:350, r: 51 },
21 |   { x: 700, y:200, r: 33 },
22 |   { x: 583, y:114, r: 77 },
23 |   { x: 844, y:218, r: 74 },
24 |   { x: 257, y:316, r: 44 },
25 |   { x: 466, y:200, r: 31 },
26 |   { x: 179, y:414, r: 50 },
27 |   { x: 179, y:231, r: 36 },
28 |   { x: 376, y:326, r: 26 },
29 |   { x: 676, y:118, r: 68 },
30 |   { x: 626, y:199, r: 68 },
31 |   { x: 510, y:269, r: 15 },
32 |   { x: 510, y:419, r: 15 },
33 |   { x: 311, y:388, r: 15 },
34 |   { x: 50, y:388, r: 6 },
35 |   { x: 90, y:431, r: 6 },
36 |   { x: 90, y:287, r: 11 },
37 |   { x: 630, y:145, r: 11 }
38 | ]);


--------------------------------------------------------------------------------
/archive/units/unit-02/module-01/example-04/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rollup-and-babel-example",
 3 |   "version": "1.0.0",
 4 |   "scripts": {
 5 |     "build": "rollup -c && uglifyjs bundle.js --overwrite"
 6 |   },
 7 |   "devDependencies": {
 8 |     "babel-preset-es2015": "^6.24.0",
 9 |     "rollup": "^0.41.6",
10 |     "rollup-plugin-babel": "^2.7.1",
11 |     "rollup-plugin-node-resolve": "^2.0.0",
12 |     "uglify-js": "^2.8.14"
13 |   },
14 |   "dependencies": {
15 |     "d3-selection": "^1.0.5"
16 |   }
17 | }


--------------------------------------------------------------------------------
/archive/units/unit-02/module-01/example-04/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import npm from "rollup-plugin-node-resolve";
 2 | import babel from "rollup-plugin-babel";
 3 | 
 4 | export default {
 5 |   entry: "index.js",
 6 |   format: "iife",
 7 |   plugins: [
 8 |     npm(),
 9 |     babel({
10 |       exclude: "node_modules/**"
11 |     })
12 |   ],
13 |   dest: "bundle.js"
14 | };


--------------------------------------------------------------------------------
/archive/units/unit-02/module-01/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Exercise</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       
11 |       const svg = d3.select("svg");
12 |       
13 |       // Your task is to
14 |       // define the render function
15 |       // using ES6 arrow function notation.
16 |       
17 |       function render(data){
18 |         const circles = svg.selectAll("circle").data(data);
19 |         circles.exit().remove();
20 |         circles
21 |           .enter().append("circle")
22 |             .attr("fill", "rgba(255, 0, 0, 0.3)")
23 |             .attr("stroke", "black")
24 |           .merge(circles)
25 |             .attr("cx", d => d.x)
26 |             .attr("cy", d => d.y)
27 |             .attr("r", d => d.r);
28 |       }
29 |       
30 |       render([
31 |         { x: 300, y:150, r: 44 },
32 |         { x: 500, y:350, r: 51 },
33 |         { x: 700, y:200, r: 33 },
34 |         { x: 583, y:114, r: 77 },
35 |         { x: 844, y:218, r: 74 },
36 |         { x: 257, y:316, r: 44 },
37 |         { x: 466, y:200, r: 31 },
38 |         { x: 179, y:414, r: 50 },
39 |         { x: 179, y:231, r: 36 },
40 |         { x: 376, y:326, r: 26 },
41 |         { x: 676, y:118, r: 68 },
42 |         { x: 626, y:199, r: 68 },
43 |         { x: 510, y:269, r: 15 },
44 |         { x: 510, y:419, r: 15 },
45 |         { x: 311, y:388, r: 15 },
46 |         { x: 50, y:388, r: 6 },
47 |         { x: 90, y:431, r: 6 },
48 |         { x: 90, y:287, r: 11 },
49 |         { x: 630, y:145, r: 11 }
50 |       ]);
51 |     </script>
52 |   </body>
53 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-02/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Rendering Bubbles ES6</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       
11 |       // From the previous module #2/1/2
12 |       const svg = d3.select("svg");
13 |       
14 |       function render(data){
15 |         const circles = svg.selectAll("circle").data(data);
16 |         circles.exit().remove();
17 |         circles
18 |           .enter().append("circle")
19 |             .attr("fill", "rgba(255, 0, 0, 0.3)")
20 |             .attr("stroke", "black")
21 |           .merge(circles)
22 |             .attr("cx", d => d.x)
23 |             .attr("cy", d => d.y)
24 |             .attr("r", d => d.r);
25 |       }
26 |       
27 |       render([
28 |         { x: 300, y:150, r: 44 },
29 |         { x: 500, y:350, r: 51 },
30 |         { x: 700, y:200, r: 33 },
31 |         { x: 583, y:114, r: 77 },
32 |         { x: 844, y:218, r: 74 },
33 |         { x: 257, y:316, r: 44 },
34 |         { x: 466, y:200, r: 31 },
35 |         { x: 179, y:414, r: 50 },
36 |         { x: 179, y:231, r: 36 },
37 |         { x: 376, y:326, r: 26 },
38 |         { x: 676, y:118, r: 68 },
39 |         { x: 626, y:199, r: 68 },
40 |         { x: 510, y:269, r: 15 },
41 |         { x: 510, y:419, r: 15 },
42 |         { x: 311, y:388, r: 15 },
43 |         { x: 50, y:388, r: 6 },
44 |         { x: 90, y:431, r: 6 },
45 |         { x: 90, y:287, r: 11 },
46 |         { x: 630, y:145, r: 11 }
47 |       ]);
48 |     </script>
49 |   </body>
50 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-02/example-02/data.csv:
--------------------------------------------------------------------------------
 1 | x,y,r
 2 | 300,150,44
 3 | 500,350,51
 4 | 700,200,33
 5 | 583,114,77
 6 | 844,218,74
 7 | 257,316,44
 8 | 466,200,31
 9 | 179,414,50
10 | 179,231,36
11 | 376,326,26
12 | 676,118,68
13 | 626,199,68
14 | 510,269,15
15 | 510,419,15
16 | 311,388,15
17 | 50,388,6
18 | 90,431,6
19 | 90,287,11
20 | 630,145,11


--------------------------------------------------------------------------------
/archive/units/unit-02/module-02/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Loading a CSV File</title>
 5 |     <!-- CSV = Comma Separated Values -->
 6 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 7 |   </head>
 8 |   <body>
 9 |     <svg width="960" height="500"></svg>
10 |     <script>
11 |       const svg = d3.select("svg");
12 |       
13 |       function render(data){
14 |         const circles = svg.selectAll("circle").data(data);
15 |         circles.exit().remove();
16 |         circles
17 |           .enter().append("circle")
18 |             .attr("fill", "rgba(255, 0, 0, 0.3)")
19 |             .attr("stroke", "black")
20 |           .merge(circles)
21 |             .attr("cx", d => d.x) // Beware, the values here are strings!
22 |             .attr("cy", d => d.y)
23 |             .attr("r", d => d.r);
24 |       }
25 |       
26 |       d3.csv("data.csv", render);
27 |       
28 |     </script>
29 |   </body>
30 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-02/example-03/data.csv:
--------------------------------------------------------------------------------
 1 | x,y,r
 2 | 300,150,44
 3 | 500,350,51
 4 | 700,200,33
 5 | 583,114,77
 6 | 844,218,74
 7 | 257,316,44
 8 | 466,200,31
 9 | 179,414,50
10 | 179,231,36
11 | 376,326,26
12 | 676,118,68
13 | 626,199,68
14 | 510,269,15
15 | 510,419,15
16 | 311,388,15
17 | 50,388,6
18 | 90,431,6
19 | 90,287,11
20 | 630,145,11


--------------------------------------------------------------------------------
/archive/units/unit-02/module-02/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Inspecting Parsed Data</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       
10 |       function render(data){
11 |         d3.select("body")
12 |           .append("pre")
13 |             .style("font-size", "24pt")
14 |             .text(JSON.stringify(data, null, 2));
15 |       }
16 |       
17 |       d3.csv("data.csv", render);
18 |       
19 |     </script>
20 |   </body>
21 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-02/example-04/data.csv:
--------------------------------------------------------------------------------
 1 | x,y,r
 2 | 300,150,44
 3 | 500,350,51
 4 | 700,200,33
 5 | 583,114,77
 6 | 844,218,74
 7 | 257,316,44
 8 | 466,200,31
 9 | 179,414,50
10 | 179,231,36
11 | 376,326,26
12 | 676,118,68
13 | 626,199,68
14 | 510,269,15
15 | 510,419,15
16 | 311,388,15
17 | 50,388,6
18 | 90,431,6
19 | 90,287,11
20 | 630,145,11


--------------------------------------------------------------------------------
/archive/units/unit-02/module-02/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Parsing Numbers</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       
10 |       function render(data){
11 |         d3.select("body")
12 |           .append("pre")
13 |             .style("font-size", "24pt")
14 |             .text(JSON.stringify(data, null, 2));
15 |       }
16 |       
17 |       function type(d){
18 |         d.x = +d.x; // Equivalent to:  d.x = parseFloat(d.x);
19 |         d.y = +d.y;
20 |         d.r = +d.r;
21 |         return d;
22 |       }
23 |       
24 |       d3.csv("data.csv", type, render);
25 |       
26 |     </script>
27 |   </body>
28 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-02/example-05/data.csv:
--------------------------------------------------------------------------------
 1 | x,y,r
 2 | 300,150,44
 3 | 500,350,51
 4 | 700,200,33
 5 | 583,114,77
 6 | 844,218,74
 7 | 257,316,44
 8 | 466,200,31
 9 | 179,414,50
10 | 179,231,36
11 | 376,326,26
12 | 676,118,68
13 | 626,199,68
14 | 510,269,15
15 | 510,419,15
16 | 311,388,15
17 | 50,388,6
18 | 90,431,6
19 | 90,287,11
20 | 630,145,11


--------------------------------------------------------------------------------
/archive/units/unit-02/module-02/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>CSV Bubbles</title>
 5 |     <!-- CSV = Comma Separated Values -->
 6 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 7 |   </head>
 8 |   <body>
 9 |     <svg width="960" height="500"></svg>
10 |     <script>
11 |       const svg = d3.select("svg");
12 |       
13 |       function render(data){
14 |         const circles = svg.selectAll("circle").data(data);
15 |         circles.exit().remove();
16 |         circles
17 |           .enter().append("circle")
18 |             .attr("fill", "rgba(255, 0, 0, 0.3)")
19 |             .attr("stroke", "black")
20 |           .merge(circles)
21 |             .attr("cx", d => d.x) // The values here are numbers.
22 |             .attr("cy", d => d.y)
23 |             .attr("r", d => d.r);
24 |       }
25 |       
26 |       function type(d){
27 |         d.x = +d.x; // Equivalent to:  d.x = parseFloat(d.x);
28 |         d.y = +d.y;
29 |         d.r = +d.r;
30 |         return d;
31 |       }
32 |       
33 |       d3.csv("data.csv", type, render);
34 |       
35 |     </script>
36 |   </body>
37 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-02/example-06/data.csv:
--------------------------------------------------------------------------------
 1 | x,y,r,color
 2 | 300,150,44,black
 3 | 500,350,51,silver
 4 | 700,200,33,gray
 5 | 583,114,77,white
 6 | 844,218,74,maroon
 7 | 257,316,44,red
 8 | 466,200,31,purple
 9 | 179,414,50,fuchsia
10 | 179,231,36,green
11 | 376,326,26,lime
12 | 676,118,68,olive
13 | 626,199,68,yellow
14 | 510,269,15,navy
15 | 510,419,15,blue
16 | 311,388,15,teal
17 | 50,388,6,aqua
18 | 90,431,6,blueviolet 
19 | 90,287,11,brown
20 | 630,145,11,burlywood


--------------------------------------------------------------------------------
/archive/units/unit-02/module-02/example-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Exercise</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const svg = d3.select("svg");
11 |       
12 |       // Your task is to set the "fill"
13 |       // attribute of the circles to the
14 |       // values from the "color" column
15 |       // of the CSV file.
16 |       function render(data){
17 |         const circles = svg.selectAll("circle").data(data);
18 |         circles.exit().remove();
19 |         circles
20 |           .enter().append("circle")
21 |             .attr("fill", "rgba(255, 0, 0, 0.3)")
22 |             .attr("stroke", "black")
23 |           .merge(circles)
24 |             .attr("cx", d => d.x)
25 |             .attr("cy", d => d.y)
26 |             .attr("r", d => d.r);
27 |       }
28 |             
29 |       function type(d){
30 |         d.x = +d.x; // Equivalent to:  d.x = parseFloat(d.x);
31 |         d.y = +d.y;
32 |         d.r = +d.r;
33 |         return d;
34 |       }
35 |       
36 |       // Render twice, once with all pink color values,
37 |       // to show why it's necessary to set fill in merge (not enter).
38 |       d3.csv("data.csv", type, data => {
39 |         
40 |         // Clone each data element and overwrite the color as pink.
41 |         render(data.map(d => Object.assign({}, d, { color: "pink" })));
42 |         
43 |         // Render the original data after 1 second.
44 |         setTimeout(() => render(data), 1000);
45 |       });
46 |       
47 |     </script>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>The Iris Dataset</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const svg = d3.select("svg");
11 |       
12 |       function render(data){
13 |         const circles = svg.selectAll("circle").data(data);
14 |         circles.exit().remove();
15 |         circles
16 |           .enter().append("circle")
17 |             .attr("r", 1)
18 |           .merge(circles)
19 |             .attr("cx", d => d.sepalLength)
20 |             .attr("cy", d => d.petalLength);
21 |       }
22 |             
23 |       function type(d){
24 |         d.sepalLength = +d.sepalLength;
25 |         d.sepalWidth = +d.sepalWidth;
26 |         d.petalLength = +d.petalLength;
27 |         d.petalWidth = +d.petalWidth;
28 |         return d;
29 |       }
30 |       
31 |       d3.csv("iris.csv", type, render);
32 |       
33 |     </script>
34 |   </body>
35 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Scaling Position</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const svg = d3.select("svg");
11 |       
12 |       function render(data){
13 |         const circles = svg.selectAll("circle").data(data);
14 |         circles.exit().remove();
15 |         circles
16 |           .enter().append("circle")
17 |             .attr("r", 3)
18 |           .merge(circles)
19 |             .attr("cx", d => d.sepalLength * 80)
20 |             .attr("cy", d => d.petalLength * 70);
21 |       }
22 |             
23 |       function type(d){
24 |         d.sepalLength = +d.sepalLength;
25 |         d.sepalWidth = +d.sepalWidth;
26 |         d.petalLength = +d.petalLength;
27 |         d.petalWidth = +d.petalWidth;
28 |         return d;
29 |       }
30 |       
31 |       d3.csv("iris.csv", type, render);
32 |       
33 |     </script>
34 |   </body>
35 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Value Accessor Pattern</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       
13 |       const svg = d3.select("svg");
14 |       
15 |       function render(data){
16 |         const circles = svg.selectAll("circle").data(data);
17 |         circles.exit().remove();
18 |         circles
19 |           .enter().append("circle")
20 |             .attr("r", 5)
21 |           .merge(circles)
22 |             .attr("cx", d => xValue(d) * 80)
23 |             .attr("cy", d => yValue(d) * 70);
24 |       }
25 |             
26 |       function type(d){
27 |         d.sepalLength = +d.sepalLength;
28 |         d.sepalWidth = +d.sepalWidth;
29 |         d.petalLength = +d.petalLength;
30 |         d.petalWidth = +d.petalWidth;
31 |         return d;
32 |       }
33 |       
34 |       d3.csv("iris.csv", type, render);
35 |       
36 |     </script>
37 |   </body>
38 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Scaling to Bottom Right</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       
13 |       const svg = d3.select("svg");
14 |       
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       
18 |       const xMax = 7.9;
19 |       const yMax = 6.9;
20 |       
21 |       function render(data){
22 |         const circles = svg.selectAll("circle").data(data);
23 |         circles.exit().remove();
24 |         circles
25 |           .enter().append("circle")
26 |             .attr("r", 5)
27 |           .merge(circles)
28 |             .attr("cx", d => xValue(d) / xMax * width)
29 |             .attr("cy", d => yValue(d) / yMax * height);
30 |       }
31 |             
32 |       function type(d){
33 |         d.sepalLength = +d.sepalLength;
34 |         d.sepalWidth = +d.sepalWidth;
35 |         d.petalLength = +d.petalLength;
36 |         d.petalWidth = +d.petalWidth;
37 |         return d;
38 |       }
39 |       
40 |       d3.csv("iris.csv", type, render);
41 |       
42 |     </script>
43 |   </body>
44 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Using d3.max</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       
13 |       const svg = d3.select("svg");
14 |       const width = +svg.attr("width");
15 |       const height = +svg.attr("height");
16 |       
17 |       function render(data){
18 |         const xMax = d3.max(data, xValue);
19 |         const yMax = d3.max(data, yValue);
20 |         
21 |         const circles = svg.selectAll("circle").data(data);
22 |         circles.exit().remove();
23 |         circles
24 |           .enter().append("circle")
25 |             .attr("r", 5)
26 |           .merge(circles)
27 |             .attr("cx", d => xValue(d) / xMax * width)
28 |             .attr("cy", d => yValue(d) / yMax * height);
29 |       }
30 |             
31 |       function type(d){
32 |         d.sepalLength = +d.sepalLength;
33 |         d.sepalWidth = +d.sepalWidth;
34 |         d.petalLength = +d.petalLength;
35 |         d.petalWidth = +d.petalWidth;
36 |         return d;
37 |       }
38 |       
39 |       d3.csv("iris.csv", type, render);
40 |       
41 |     </script>
42 |   </body>
43 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Domain Concept</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       
13 |       const svg = d3.select("svg");
14 |       const width = +svg.attr("width");
15 |       const height = +svg.attr("height");
16 |       
17 |       function render(data){
18 |         const xDomain = [0, d3.max(data, xValue)];
19 |         const yDomain = [0, d3.max(data, yValue)];
20 |         
21 |         const circles = svg.selectAll("circle").data(data);
22 |         circles.exit().remove();
23 |         circles
24 |           .enter().append("circle")
25 |             .attr("r", 5)
26 |           .merge(circles)
27 |             .attr("cx", d => xValue(d) / xDomain[1] * width)
28 |             .attr("cy", d => yValue(d) / yDomain[1] * height);
29 |       }
30 |             
31 |       function type(d){
32 |         d.sepalLength = +d.sepalLength;
33 |         d.sepalWidth = +d.sepalWidth;
34 |         d.petalLength = +d.petalLength;
35 |         d.petalWidth = +d.petalWidth;
36 |         return d;
37 |       }
38 |       
39 |       d3.csv("iris.csv", type, render);
40 |       
41 |     </script>
42 |   </body>
43 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-07/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Range Concept</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       
13 |       const svg = d3.select("svg");
14 |       const width = +svg.attr("width");
15 |       const height = +svg.attr("height");
16 |       
17 |       const xRange = [0, width];
18 |       const yRange = [0, height];
19 |       
20 |       function render(data){
21 |         const xDomain = [0, d3.max(data, xValue)];
22 |         const yDomain = [0, d3.max(data, yValue)];
23 |         
24 |         const circles = svg.selectAll("circle").data(data);
25 |         circles.exit().remove();
26 |         circles
27 |           .enter().append("circle")
28 |             .attr("r", 5)
29 |           .merge(circles)
30 |             .attr("cx", d => xValue(d) / xDomain[1] * xRange[1])
31 |             .attr("cy", d => yValue(d) / yDomain[1] * yRange[1]);
32 |       }
33 |             
34 |       function type(d){
35 |         d.sepalLength = +d.sepalLength;
36 |         d.sepalWidth = +d.sepalWidth;
37 |         d.petalLength = +d.petalLength;
38 |         d.petalWidth = +d.petalWidth;
39 |         return d;
40 |       }
41 |       
42 |       d3.csv("iris.csv", type, render);
43 |       
44 |     </script>
45 |   </body>
46 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-08/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Using d3.scaleLinear</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       
13 |       const svg = d3.select("svg");
14 |       const width = +svg.attr("width");
15 |       const height = +svg.attr("height");
16 |       
17 |       const xRange = [0, width];
18 |       const yRange = [0, height];
19 |       
20 |       function render(data){
21 |         const xDomain = [0, d3.max(data, xValue)];
22 |         const yDomain = [0, d3.max(data, yValue)];
23 |         
24 |         const xScale = d3.scaleLinear().domain(xDomain).range(xRange);
25 |         const yScale = d3.scaleLinear().domain(yDomain).range(yRange);
26 |         
27 |         const circles = svg.selectAll("circle").data(data);
28 |         circles.exit().remove();
29 |         circles
30 |           .enter().append("circle")
31 |             .attr("r", 5)
32 |           .merge(circles)
33 |             .attr("cx", d => xScale(xValue(d)))
34 |             .attr("cy", d => yScale(yValue(d)));
35 |       }
36 |             
37 |       function type(d){
38 |         d.sepalLength = +d.sepalLength;
39 |         d.sepalWidth = +d.sepalWidth;
40 |         d.petalLength = +d.petalLength;
41 |         d.petalWidth = +d.petalWidth;
42 |         return d;
43 |       }
44 |       
45 |       d3.csv("iris.csv", type, render);
46 |       
47 |     </script>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-09/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Reorganizing</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       
13 |       const svg = d3.select("svg");
14 |       const width = +svg.attr("width");
15 |       const height = +svg.attr("height");
16 |       
17 |       function render(data){
18 |         
19 |         const xScale = d3.scaleLinear()
20 |           .domain([0, d3.max(data, xValue)])
21 |           .range([0, width]);
22 |         
23 |         const yScale = d3.scaleLinear()
24 |           .domain([0, d3.max(data, yValue)])
25 |           .range([0, height]);
26 |         
27 |         const circles = svg.selectAll("circle").data(data);
28 |         circles.exit().remove();
29 |         circles
30 |           .enter().append("circle")
31 |             .attr("r", 5)
32 |           .merge(circles)
33 |             .attr("cx", d => xScale(xValue(d)))
34 |             .attr("cy", d => yScale(yValue(d)));
35 |       }
36 |             
37 |       function type(d){
38 |         d.sepalLength = +d.sepalLength;
39 |         d.sepalWidth = +d.sepalWidth;
40 |         d.petalLength = +d.petalLength;
41 |         d.petalWidth = +d.petalWidth;
42 |         return d;
43 |       }
44 |       
45 |       d3.csv("iris.csv", type, render);
46 |       
47 |     </script>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-10/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Using d3.min</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       
13 |       const svg = d3.select("svg");
14 |       const width = +svg.attr("width");
15 |       const height = +svg.attr("height");
16 |       
17 |       function render(data){
18 |         
19 |         const xScale = d3.scaleLinear()
20 |           .domain([d3.min(data, xValue), d3.max(data, xValue)])
21 |           .range([0, width]);
22 |         
23 |         const yScale = d3.scaleLinear()
24 |           .domain([d3.min(data, yValue), d3.max(data, yValue)])
25 |           .range([0, height]);
26 |         
27 |         const circles = svg.selectAll("circle").data(data);
28 |         circles.exit().remove();
29 |         circles
30 |           .enter().append("circle")
31 |             .attr("r", 5)
32 |           .merge(circles)
33 |             .attr("cx", d => xScale(xValue(d)))
34 |             .attr("cy", d => yScale(yValue(d)));
35 |       }
36 |             
37 |       function type(d){
38 |         d.sepalLength = +d.sepalLength;
39 |         d.sepalWidth = +d.sepalWidth;
40 |         d.petalLength = +d.petalLength;
41 |         d.petalWidth = +d.petalWidth;
42 |         return d;
43 |       }
44 |       
45 |       d3.csv("iris.csv", type, render);
46 |       
47 |     </script>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-11/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Using d3.extent</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       
13 |       const svg = d3.select("svg");
14 |       const width = +svg.attr("width");
15 |       const height = +svg.attr("height");
16 |       
17 |       function render(data){
18 |         
19 |         const xScale = d3.scaleLinear()
20 |           .domain(d3.extent(data, xValue))
21 |           .range([0, width]);
22 |         
23 |         const yScale = d3.scaleLinear()
24 |           .domain(d3.extent(data, yValue))
25 |           .range([0, height]);
26 |         
27 |         const circles = svg.selectAll("circle").data(data);
28 |         circles.exit().remove();
29 |         circles
30 |           .enter().append("circle")
31 |             .attr("r", 5)
32 |           .merge(circles)
33 |             .attr("cx", d => xScale(xValue(d)))
34 |             .attr("cy", d => yScale(yValue(d)));
35 |       }
36 |             
37 |       function type(d){
38 |         d.sepalLength = +d.sepalLength;
39 |         d.sepalWidth = +d.sepalWidth;
40 |         d.petalLength = +d.petalLength;
41 |         d.petalWidth = +d.petalWidth;
42 |         return d;
43 |       }
44 |       
45 |       d3.csv("iris.csv", type, render);
46 |       
47 |     </script>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-12/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Flipping Y</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       
13 |       const svg = d3.select("svg");
14 |       const width = +svg.attr("width");
15 |       const height = +svg.attr("height");
16 |       
17 |       function render(data){
18 |         
19 |         const xScale = d3.scaleLinear()
20 |           .domain(d3.extent(data, xValue))
21 |           .range([0, width]);
22 |         
23 |         const yScale = d3.scaleLinear()
24 |           .domain(d3.extent(data, yValue))
25 |           .range([height, 0]);
26 |         
27 |         const circles = svg.selectAll("circle").data(data);
28 |         circles.exit().remove();
29 |         circles
30 |           .enter().append("circle")
31 |             .attr("r", 5)
32 |           .merge(circles)
33 |             .attr("cx", d => xScale(xValue(d)))
34 |             .attr("cy", d => yScale(yValue(d)));
35 |       }
36 |             
37 |       function type(d){
38 |         d.sepalLength = +d.sepalLength;
39 |         d.sepalWidth = +d.sepalWidth;
40 |         d.petalLength = +d.petalLength;
41 |         d.petalWidth = +d.petalWidth;
42 |         return d;
43 |       }
44 |       
45 |       d3.csv("iris.csv", type, render);
46 |       
47 |     </script>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-13/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Optimization</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       
13 |       const svg = d3.select("svg");
14 |       const width = +svg.attr("width");
15 |       const height = +svg.attr("height");
16 |       const xScale = d3.scaleLinear()
17 |         .range([0, width]);
18 |       const yScale = d3.scaleLinear()
19 |         .range([height, 0]);
20 |       
21 |       function render(data){
22 |         xScale.domain(d3.extent(data, xValue));
23 |         yScale.domain(d3.extent(data, yValue));
24 |         
25 |         const circles = svg.selectAll("circle").data(data);
26 |         circles.exit().remove();
27 |         circles
28 |           .enter().append("circle")
29 |             .attr("r", 5)
30 |           .merge(circles)
31 |             .attr("cx", d => xScale(xValue(d)))
32 |             .attr("cy", d => yScale(yValue(d)));
33 |       }
34 |             
35 |       function type(d){
36 |         d.sepalLength = +d.sepalLength;
37 |         d.sepalWidth = +d.sepalWidth;
38 |         d.petalLength = +d.petalLength;
39 |         d.petalWidth = +d.petalWidth;
40 |         return d;
41 |       }
42 |       
43 |       d3.csv("iris.csv", type, render);
44 |       
45 |     </script>
46 |   </body>
47 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-03/example-14/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Exercise</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       // Your task is to change the X value
11 |       // from petalLength to sepalWidth,
12 |       // and observe how the scaling changes.
13 |       
14 |       const xValue = d => d.sepalLength;
15 |       const yValue = d => d.petalLength;
16 |       
17 |       const svg = d3.select("svg");
18 |       const width = +svg.attr("width");
19 |       const height = +svg.attr("height");
20 |       const xScale = d3.scaleLinear()
21 |         .range([0, width]);
22 |       const yScale = d3.scaleLinear()
23 |         .range([height, 0]);
24 |       
25 |       function render(data){
26 |         xScale.domain(d3.extent(data, xValue));
27 |         yScale.domain(d3.extent(data, yValue));
28 |         
29 |         const circles = svg.selectAll("circle").data(data);
30 |         circles.exit().remove();
31 |         circles
32 |           .enter().append("circle")
33 |             .attr("r", 5)
34 |           .merge(circles)
35 |             .attr("cx", d => xScale(xValue(d)))
36 |             .attr("cy", d => yScale(yValue(d)));
37 |       }
38 |             
39 |       function type(d){
40 |         d.sepalLength = +d.sepalLength;
41 |         d.sepalWidth = +d.sepalWidth;
42 |         d.petalLength = +d.petalLength;
43 |         d.petalWidth = +d.petalWidth;
44 |         return d;
45 |       }
46 |       
47 |       d3.csv("iris.csv", type, render);
48 |       
49 |     </script>
50 |   </body>
51 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-04/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Optimization</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       
11 |       // From previous module #2/4/1
12 |       
13 |       const xValue = d => d.sepalLength;
14 |       const yValue = d => d.petalLength;
15 |       
16 |       const svg = d3.select("svg");
17 |       const width = +svg.attr("width");
18 |       const height = +svg.attr("height");
19 |       const xScale = d3.scaleLinear().range([0, width]);
20 |       const yScale = d3.scaleLinear().range([height, 0]);
21 |       
22 |       function render(data){
23 |         xScale.domain(d3.extent(data, xValue));
24 |         yScale.domain(d3.extent(data, yValue));
25 |         
26 |         const circles = svg.selectAll("circle").data(data);
27 |         circles.exit().remove();
28 |         circles
29 |           .enter().append("circle")
30 |             .attr("r", 5)
31 |           .merge(circles)
32 |             .attr("cx", d => xScale(xValue(d)))
33 |             .attr("cy", d => yScale(yValue(d)));
34 |       }
35 |             
36 |       function type(d){
37 |         d.sepalLength = +d.sepalLength;
38 |         d.sepalWidth = +d.sepalWidth;
39 |         d.petalLength = +d.petalLength;
40 |         d.petalWidth = +d.petalWidth;
41 |         return d;
42 |       }
43 |       
44 |       d3.csv("iris.csv", type, render);
45 |       
46 |     </script>
47 |   </body>
48 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-04/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Margin Concept</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
20 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
21 |       
22 |       function render(data){
23 |         xScale.domain(d3.extent(data, xValue));
24 |         yScale.domain(d3.extent(data, yValue));
25 |         
26 |         const circles = svg.selectAll("circle").data(data);
27 |         circles.exit().remove();
28 |         circles
29 |           .enter().append("circle")
30 |             .attr("r", 5)
31 |           .merge(circles)
32 |             .attr("cx", d => xScale(xValue(d)))
33 |             .attr("cy", d => yScale(yValue(d)));
34 |       }
35 |             
36 |       function type(d){
37 |         d.sepalLength = +d.sepalLength;
38 |         d.sepalWidth = +d.sepalWidth;
39 |         d.petalLength = +d.petalLength;
40 |         d.petalWidth = +d.petalWidth;
41 |         return d;
42 |       }
43 |       
44 |       d3.csv("iris.csv", type, render);
45 |       
46 |     </script>
47 |   </body>
48 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-04/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Margin Rectangle</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
20 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
21 |       
22 |       svg.append("rect")
23 |           .attr("width", innerWidth)
24 |           .attr("height", innerHeight)
25 |           .attr("fill-opacity", 0.2);
26 |       
27 |       function render(data){
28 |         xScale.domain(d3.extent(data, xValue));
29 |         yScale.domain(d3.extent(data, yValue));
30 |         
31 |         const circles = svg.selectAll("circle").data(data);
32 |         circles.exit().remove();
33 |         circles
34 |           .enter().append("circle")
35 |             .attr("r", 5)
36 |           .merge(circles)
37 |             .attr("cx", d => xScale(xValue(d)))
38 |             .attr("cy", d => yScale(yValue(d)));
39 |       }
40 |             
41 |       function type(d){
42 |         d.sepalLength = +d.sepalLength;
43 |         d.sepalWidth = +d.sepalWidth;
44 |         d.petalLength = +d.petalLength;
45 |         d.petalWidth = +d.petalWidth;
46 |         return d;
47 |       }
48 |       
49 |       d3.csv("iris.csv", type, render);
50 |       
51 |     </script>
52 |   </body>
53 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-04/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>SVG Group</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
20 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
21 |       
22 |       const g = svg.append("g")
23 |           .attr("transform", "translate(30, 50)");
24 |       
25 |       g.append("rect")
26 |           .attr("width", innerWidth)
27 |           .attr("height", innerHeight)
28 |           .attr("fill-opacity", 0.2);
29 |       
30 |       function render(data){
31 |         xScale.domain(d3.extent(data, xValue));
32 |         yScale.domain(d3.extent(data, yValue));
33 |         
34 |         const circles = g.selectAll("circle").data(data);
35 |         circles.exit().remove();
36 |         circles
37 |           .enter().append("circle")
38 |             .attr("r", 5)
39 |           .merge(circles)
40 |             .attr("cx", d => xScale(xValue(d)))
41 |             .attr("cy", d => yScale(yValue(d)));
42 |       }
43 |             
44 |       function type(d){
45 |         d.sepalLength = +d.sepalLength;
46 |         d.sepalWidth = +d.sepalWidth;
47 |         d.petalLength = +d.petalLength;
48 |         d.petalWidth = +d.petalWidth;
49 |         return d;
50 |       }
51 |       
52 |       d3.csv("iris.csv", type, render);
53 |       
54 |     </script>
55 |   </body>
56 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-04/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Margin Convention</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
20 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
21 |       
22 |       const g = svg.append("g")
23 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
24 |       
25 |       g.append("rect")
26 |           .attr("width", innerWidth)
27 |           .attr("height", innerHeight)
28 |           .attr("fill-opacity", 0.2);
29 |       
30 |       function render(data){
31 |         xScale.domain(d3.extent(data, xValue));
32 |         yScale.domain(d3.extent(data, yValue));
33 |         
34 |         const circles = g.selectAll("circle").data(data);
35 |         circles.exit().remove();
36 |         circles
37 |           .enter().append("circle")
38 |             .attr("r", 5)
39 |           .merge(circles)
40 |             .attr("cx", d => xScale(xValue(d)))
41 |             .attr("cy", d => yScale(yValue(d)));
42 |       }
43 |             
44 |       function type(d){
45 |         d.sepalLength = +d.sepalLength;
46 |         d.sepalWidth = +d.sepalWidth;
47 |         d.petalLength = +d.petalLength;
48 |         d.petalWidth = +d.petalWidth;
49 |         return d;
50 |       }
51 |       
52 |       d3.csv("iris.csv", type, render);
53 |       
54 |     </script>
55 |   </body>
56 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-04/example-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Non-idempotent Render</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
20 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
21 |       
22 |       function render(data){
23 |         
24 |         const g = svg.append("g")
25 |             .attr("transform", `translate(${margin.left}, ${margin.top})`);
26 | 
27 |         g.append("rect")
28 |             .attr("width", innerWidth)
29 |             .attr("height", innerHeight)
30 |             .attr("fill-opacity", 0.2);
31 | 
32 |         xScale.domain(d3.extent(data, xValue));
33 |         yScale.domain(d3.extent(data, yValue));
34 |         
35 |         const circles = g.selectAll("circle").data(data);
36 |         circles.exit().remove();
37 |         circles
38 |           .enter().append("circle")
39 |             .attr("r", 5)
40 |           .merge(circles)
41 |             .attr("cx", d => xScale(xValue(d)))
42 |             .attr("cy", d => yScale(yValue(d)));
43 |       }
44 |             
45 |       function type(d){
46 |         d.sepalLength = +d.sepalLength;
47 |         d.sepalWidth = +d.sepalWidth;
48 |         d.petalLength = +d.petalLength;
49 |         d.petalWidth = +d.petalWidth;
50 |         return d;
51 |       }
52 |       
53 |       d3.csv("iris.csv", type, data => {
54 |         setTimeout(() => render(data), 0);
55 |         setTimeout(() => render(data), 1000);
56 |         setTimeout(() => render(data), 2000);
57 |         setTimeout(() => render(data), 3000);
58 |         setTimeout(() => render(data), 4000);
59 |         setTimeout(() => render(data), 5000);
60 |       }); 
61 |       
62 |     </script>
63 |   </body>
64 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-04/example-07/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Idempotent Render</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
20 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
21 |       
22 |       function render(data){
23 |         let g = svg.selectAll("g").data([null]);
24 |         g = g.enter().append("g").merge(g);
25 |         g.attr("transform", `translate(${margin.left}, ${margin.top})`);
26 | 
27 |         let rect = g.selectAll("rect").data([null]);
28 |         rect = rect.enter().append("rect").merge(rect);
29 |         rect.attr("fill-opacity", 0.2)
30 |             .attr("width", innerWidth)
31 |             .attr("height", innerHeight);
32 | 
33 |         xScale.domain(d3.extent(data, xValue));
34 |         yScale.domain(d3.extent(data, yValue));
35 |         
36 |         const circles = g.selectAll("circle").data(data);
37 |         circles.exit().remove();
38 |         circles
39 |           .enter().append("circle")
40 |             .attr("r", 5)
41 |           .merge(circles)
42 |             .attr("cx", d => xScale(xValue(d)))
43 |             .attr("cy", d => yScale(yValue(d)));
44 |       }
45 |             
46 |       function type(d){
47 |         d.sepalLength = +d.sepalLength;
48 |         d.sepalWidth = +d.sepalWidth;
49 |         d.petalLength = +d.petalLength;
50 |         d.petalWidth = +d.petalWidth;
51 |         return d;
52 |       }
53 |       
54 |       d3.csv("iris.csv", type, data => {
55 |         setTimeout(() => render(data), 0);
56 |         setTimeout(() => render(data), 1000);
57 |         setTimeout(() => render(data), 2000);
58 |         setTimeout(() => render(data), 3000);
59 |         setTimeout(() => render(data), 4000);
60 |         setTimeout(() => render(data), 5000); 
61 |       }); 
62 |       
63 |     </script>
64 |   </body>
65 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-04/example-08/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Dynamic Margin</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const xScale = d3.scaleLinear();
18 |       const yScale = d3.scaleLinear();
19 |       
20 |       function render(data){
21 |         const innerWidth = width - margin.left - margin.right;
22 |         const innerHeight = height - margin.top - margin.bottom;
23 |         
24 |         let g = svg.selectAll("g").data([null]);
25 |         g = g.enter().append("g").merge(g);
26 |         g.attr("transform", `translate(${margin.left}, ${margin.top})`);
27 | 
28 |         let rect = g.selectAll("rect").data([null]);
29 |         rect = rect.enter().append("rect").merge(rect);
30 |         rect.attr("fill-opacity", 0.2)
31 |             .attr("width", innerWidth)
32 |             .attr("height", innerHeight);
33 | 
34 |         xScale
35 |           .domain(d3.extent(data, xValue))
36 |           .range([0, innerWidth]);
37 |         yScale
38 |           .domain(d3.extent(data, yValue))
39 |           .range([innerHeight, 0]);
40 |         
41 |         const circles = g.selectAll("circle").data(data);
42 |         circles.exit().remove();
43 |         circles
44 |           .enter().append("circle")
45 |             .attr("r", 5)
46 |           .merge(circles)
47 |             .attr("cx", d => xScale(xValue(d)))
48 |             .attr("cy", d => yScale(yValue(d)));
49 |       }
50 |             
51 |       function type(d){
52 |         d.sepalLength = +d.sepalLength;
53 |         d.sepalWidth = +d.sepalWidth;
54 |         d.petalLength = +d.petalLength;
55 |         d.petalWidth = +d.petalWidth;
56 |         return d;
57 |       }
58 |       
59 |       d3.csv("iris.csv", type, data => {
60 |         setTimeout(() => render(data), 0);
61 |         setTimeout(() => { margin.top    = 100; render(data); }, 1000);
62 |         setTimeout(() => { margin.right  = 330; render(data); }, 2000);
63 |         setTimeout(() => { margin.bottom = 100; render(data); }, 3000);
64 |         setTimeout(() => { margin.left   = 330; render(data); }, 4000);
65 |       });
66 |       
67 |     </script>
68 |   </body>
69 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-04/example-09/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Exercise</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       
11 |       // Your task is to adjust the margin
12 |       // to make room for axes on the bottom and left.
13 |       
14 |       const xValue = d => d.sepalLength;
15 |       const yValue = d => d.petalLength;
16 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
17 |       
18 |       const svg = d3.select("svg");
19 |       const width = +svg.attr("width");
20 |       const height = +svg.attr("height");
21 |       const xScale = d3.scaleLinear();
22 |       const yScale = d3.scaleLinear();
23 |       
24 |       function render(data){
25 |         const innerWidth = width - margin.left - margin.right;
26 |         const innerHeight = height - margin.top - margin.bottom;
27 |         
28 |         let g = svg.selectAll("g").data([null]);
29 |         g = g.enter().append("g").merge(g);
30 |         g.attr("transform", `translate(${margin.left}, ${margin.top})`);
31 | 
32 |         let rect = g.selectAll("rect").data([null]);
33 |         rect = rect.enter().append("rect").merge(rect);
34 |         rect.attr("fill-opacity", 0.2)
35 |             .attr("width", innerWidth)
36 |             .attr("height", innerHeight);
37 | 
38 |         xScale
39 |           .domain(d3.extent(data, xValue))
40 |           .range([0, innerWidth]);
41 |         yScale
42 |           .domain(d3.extent(data, yValue))
43 |           .range([innerHeight, 0]);
44 |         
45 |         const circles = g.selectAll("circle").data(data);
46 |         circles.exit().remove();
47 |         circles
48 |           .enter().append("circle")
49 |             .attr("r", 5)
50 |           .merge(circles)
51 |             .attr("cx", d => xScale(xValue(d)))
52 |             .attr("cy", d => yScale(yValue(d)));
53 |       }
54 |             
55 |       function type(d){
56 |         d.sepalLength = +d.sepalLength;
57 |         d.sepalWidth = +d.sepalWidth;
58 |         d.petalLength = +d.petalLength;
59 |         d.petalWidth = +d.petalWidth;
60 |         return d;
61 |       }
62 |       
63 |       d3.csv("iris.csv", type, render);
64 |       
65 |     </script>
66 |   </body>
67 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-05/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Margin Convention</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       // From previous module #2/4/5
11 |       const xValue = d => d.sepalLength;
12 |       const yValue = d => d.petalLength;
13 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
14 |       
15 |       const svg = d3.select("svg");
16 |       const width = +svg.attr("width");
17 |       const height = +svg.attr("height");
18 |       const innerWidth = width - margin.left - margin.right;
19 |       const innerHeight = height - margin.top - margin.bottom;
20 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
21 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
22 |       
23 |       const g = svg.append("g")
24 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
25 |       
26 |       g.append("rect")
27 |           .attr("width", innerWidth)
28 |           .attr("height", innerHeight)
29 |           .attr("fill-opacity", 0.2);
30 |       
31 |       function render(data){
32 |         xScale.domain(d3.extent(data, xValue));
33 |         yScale.domain(d3.extent(data, yValue));
34 |         
35 |         const circles = g.selectAll("circle").data(data);
36 |         circles.exit().remove();
37 |         circles
38 |           .enter().append("circle")
39 |             .attr("r", 5)
40 |           .merge(circles)
41 |             .attr("cx", d => xScale(xValue(d)))
42 |             .attr("cy", d => yScale(yValue(d)));
43 |       }
44 |             
45 |       function type(d){
46 |         d.sepalLength = +d.sepalLength;
47 |         d.sepalWidth = +d.sepalWidth;
48 |         d.petalLength = +d.petalLength;
49 |         d.petalWidth = +d.petalWidth;
50 |         return d;
51 |       }
52 |       
53 |       d3.csv("iris.csv", type, render);
54 |       
55 |     </script>
56 |   </body>
57 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-05/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Y Axis</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
20 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
21 |       const yAxis = d3.axisLeft().scale(yScale);
22 |       
23 |       const g = svg.append("g")
24 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
25 |       const yAxisG = g.append("g");
26 |       
27 |       function render(data){
28 |         xScale.domain(d3.extent(data, xValue));
29 |         yScale.domain(d3.extent(data, yValue));
30 |         
31 |         yAxis(yAxisG);
32 |         
33 |         const circles = g.selectAll("circle").data(data);
34 |         circles.exit().remove();
35 |         circles
36 |           .enter().append("circle")
37 |             .attr("r", 5)
38 |           .merge(circles)
39 |             .attr("cx", d => xScale(xValue(d)))
40 |             .attr("cy", d => yScale(yValue(d)));
41 |       }
42 |             
43 |       function type(d){
44 |         d.sepalLength = +d.sepalLength;
45 |         d.sepalWidth = +d.sepalWidth;
46 |         d.petalLength = +d.petalLength;
47 |         d.petalWidth = +d.petalWidth;
48 |         return d;
49 |       }
50 |       
51 |       d3.csv("iris.csv", type, render);
52 |       
53 |     </script>
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-05/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Using selection.call</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
20 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
21 |       const yAxis = d3.axisLeft().scale(yScale);
22 |       
23 |       const g = svg.append("g")
24 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
25 |       const yAxisG = g.append("g");
26 |       
27 |       function render(data){
28 |         xScale.domain(d3.extent(data, xValue));
29 |         yScale.domain(d3.extent(data, yValue));
30 |         
31 |         yAxisG.call(yAxis); // Equivalent to yAxis(yAxisG);
32 |         
33 |         const circles = g.selectAll("circle").data(data);
34 |         circles.exit().remove();
35 |         circles
36 |           .enter().append("circle")
37 |             .attr("r", 5)
38 |           .merge(circles)
39 |             .attr("cx", d => xScale(xValue(d)))
40 |             .attr("cy", d => yScale(yValue(d)));
41 |       }
42 |             
43 |       function type(d){
44 |         d.sepalLength = +d.sepalLength;
45 |         d.sepalWidth = +d.sepalWidth;
46 |         d.petalLength = +d.petalLength;
47 |         d.petalWidth = +d.petalWidth;
48 |         return d;
49 |       }
50 |       
51 |       d3.csv("iris.csv", type, render);
52 |       
53 |     </script>
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-05/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Y Axis on the Right</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
20 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
21 |       const yAxis = d3.axisRight().scale(yScale);
22 |       
23 |       const g = svg.append("g")
24 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
25 |       const yAxisG = g.append("g")
26 |           .attr("transform", `translate(${innerWidth}, 0)`);
27 |       
28 |       function render(data){
29 |         xScale.domain(d3.extent(data, xValue));
30 |         yScale.domain(d3.extent(data, yValue));
31 |         
32 |         yAxisG.call(yAxis);
33 |         
34 |         const circles = g.selectAll("circle").data(data);
35 |         circles.exit().remove();
36 |         circles
37 |           .enter().append("circle")
38 |             .attr("r", 5)
39 |           .merge(circles)
40 |             .attr("cx", d => xScale(xValue(d)))
41 |             .attr("cy", d => yScale(yValue(d)));
42 |       }
43 |             
44 |       function type(d){
45 |         d.sepalLength = +d.sepalLength;
46 |         d.sepalWidth = +d.sepalWidth;
47 |         d.petalLength = +d.petalLength;
48 |         d.petalWidth = +d.petalWidth;
49 |         return d;
50 |       }
51 |       
52 |       d3.csv("iris.csv", type, render);
53 |       
54 |     </script>
55 |   </body>
56 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-05/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>X Axis</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
20 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
21 |       const xAxis = d3.axisBottom().scale(xScale);
22 |       
23 |       const g = svg.append("g")
24 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
25 |       const xAxisG = g.append("g")
26 |           .attr("transform", `translate(0, ${innerHeight})`);
27 |       
28 |       function render(data){
29 |         xScale.domain(d3.extent(data, xValue));
30 |         yScale.domain(d3.extent(data, yValue));
31 |         
32 |         xAxisG.call(xAxis);
33 |         
34 |         const circles = g.selectAll("circle").data(data);
35 |         circles.exit().remove();
36 |         circles
37 |           .enter().append("circle")
38 |             .attr("r", 5)
39 |           .merge(circles)
40 |             .attr("cx", d => xScale(xValue(d)))
41 |             .attr("cy", d => yScale(yValue(d)));
42 |       }
43 |             
44 |       function type(d){
45 |         d.sepalLength = +d.sepalLength;
46 |         d.sepalWidth = +d.sepalWidth;
47 |         d.petalLength = +d.petalLength;
48 |         d.petalWidth = +d.petalWidth;
49 |         return d;
50 |       }
51 |       
52 |       d3.csv("iris.csv", type, render);
53 |       
54 |     </script>
55 |   </body>
56 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-05/example-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>X Axis on the Top</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
20 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
21 |       const xAxis = d3.axisTop().scale(xScale);
22 |       
23 |       const g = svg.append("g")
24 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
25 |       const xAxisG = g.append("g");
26 |       
27 |       function render(data){
28 |         xScale.domain(d3.extent(data, xValue));
29 |         yScale.domain(d3.extent(data, yValue));
30 |         
31 |         xAxisG.call(xAxis);
32 |         
33 |         const circles = g.selectAll("circle").data(data);
34 |         circles.exit().remove();
35 |         circles
36 |           .enter().append("circle")
37 |             .attr("r", 5)
38 |           .merge(circles)
39 |             .attr("cx", d => xScale(xValue(d)))
40 |             .attr("cy", d => yScale(yValue(d)));
41 |       }
42 |             
43 |       function type(d){
44 |         d.sepalLength = +d.sepalLength;
45 |         d.sepalWidth = +d.sepalWidth;
46 |         d.petalLength = +d.petalLength;
47 |         d.petalWidth = +d.petalWidth;
48 |         return d;
49 |       }
50 |       
51 |       d3.csv("iris.csv", type, render);
52 |       
53 |     </script>
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-05/example-07/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>X and Y Axes</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
20 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
21 |       const xAxis = d3.axisBottom().scale(xScale);
22 |       const yAxis = d3.axisLeft().scale(yScale);
23 |       
24 |       const g = svg.append("g")
25 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
26 |       const xAxisG = g.append("g")
27 |           .attr("transform", `translate(0, ${innerHeight})`);
28 |       const yAxisG = g.append("g");
29 |       
30 |       function render(data){
31 |         xScale.domain(d3.extent(data, xValue));
32 |         yScale.domain(d3.extent(data, yValue));
33 |         
34 |         xAxisG.call(xAxis);
35 |         yAxisG.call(yAxis);
36 |         
37 |         const circles = g.selectAll("circle").data(data);
38 |         circles.exit().remove();
39 |         circles
40 |           .enter().append("circle")
41 |             .attr("r", 5)
42 |           .merge(circles)
43 |             .attr("cx", d => xScale(xValue(d)))
44 |             .attr("cy", d => yScale(yValue(d)));
45 |       }
46 |             
47 |       function type(d){
48 |         d.sepalLength = +d.sepalLength;
49 |         d.sepalWidth = +d.sepalWidth;
50 |         d.petalLength = +d.petalLength;
51 |         d.petalWidth = +d.petalWidth;
52 |         return d;
53 |       }
54 |       
55 |       d3.csv("iris.csv", type, render);
56 |       
57 |     </script>
58 |   </body>
59 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-05/example-08/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Dynamic Margin</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       // From previous module #2/4/8
11 |       const xValue = d => d.sepalLength;
12 |       const yValue = d => d.petalLength;
13 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
14 |       
15 |       const svg = d3.select("svg");
16 |       const width = +svg.attr("width");
17 |       const height = +svg.attr("height");
18 |       const xScale = d3.scaleLinear();
19 |       const yScale = d3.scaleLinear();
20 |       
21 |       function render(data){
22 |         const innerWidth = width - margin.left - margin.right;
23 |         const innerHeight = height - margin.top - margin.bottom;
24 |         
25 |         let g = svg.selectAll("g").data([null]);
26 |         g = g.enter().append("g").merge(g);
27 |         g.attr("transform", `translate(${margin.left}, ${margin.top})`);
28 | 
29 |         let rect = g.selectAll("rect").data([null]);
30 |         rect = rect.enter().append("rect").merge(rect);
31 |         rect.attr("fill-opacity", 0.2)
32 |             .attr("width", innerWidth)
33 |             .attr("height", innerHeight);
34 | 
35 |         xScale
36 |           .domain(d3.extent(data, xValue))
37 |           .range([0, innerWidth]);
38 |         yScale
39 |           .domain(d3.extent(data, yValue))
40 |           .range([innerHeight, 0]);
41 |         
42 |         const circles = g.selectAll("circle").data(data);
43 |         circles.exit().remove();
44 |         circles
45 |           .enter().append("circle")
46 |             .attr("r", 5)
47 |           .merge(circles)
48 |             .attr("cx", d => xScale(xValue(d)))
49 |             .attr("cy", d => yScale(yValue(d)));
50 |       }
51 |             
52 |       function type(d){
53 |         d.sepalLength = +d.sepalLength;
54 |         d.sepalWidth = +d.sepalWidth;
55 |         d.petalLength = +d.petalLength;
56 |         d.petalWidth = +d.petalWidth;
57 |         return d;
58 |       }
59 |       
60 |       d3.csv("iris.csv", type, data => {
61 |         setTimeout(() => render(data), 0);
62 |         setTimeout(() => { margin.top    = 100; render(data); }, 1000);
63 |         setTimeout(() => { margin.right  = 330; render(data); }, 2000);
64 |         setTimeout(() => { margin.bottom = 100; render(data); }, 3000);
65 |         setTimeout(() => { margin.left   = 330; render(data); }, 4000);
66 |       });
67 |       
68 |     </script>
69 |   </body>
70 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-05/example-09/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Non-idempotent Axes</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const xScale = d3.scaleLinear();
18 |       const yScale = d3.scaleLinear();
19 |       const xAxis = d3.axisBottom().scale(xScale);
20 |       const yAxis = d3.axisLeft().scale(yScale);
21 |       
22 |       function render(data){
23 |         const innerWidth = width - margin.left - margin.right;
24 |         const innerHeight = height - margin.top - margin.bottom;
25 |         
26 |         let g = svg.selectAll("g").data([null]);
27 |         g = g.enter().append("g").merge(g);
28 |         g.attr("transform", `translate(${margin.left}, ${margin.top})`);
29 |         
30 |         xScale
31 |           .domain(d3.extent(data, xValue))
32 |           .range([0, innerWidth]);
33 |         yScale
34 |           .domain(d3.extent(data, yValue))
35 |           .range([innerHeight, 0]);
36 |         
37 |         const xAxisG = g.append("g")
38 |           .attr("transform", `translate(0, ${innerHeight})`);
39 |         xAxisG.call(xAxis);
40 |         
41 |         const yAxisG = g.append("g");
42 |         yAxisG.call(yAxis);
43 |         
44 |         const circles = g.selectAll("circle").data(data);
45 |         circles.exit().remove();
46 |         circles
47 |           .enter().append("circle")
48 |             .attr("r", 5)
49 |           .merge(circles)
50 |             .attr("cx", d => xScale(xValue(d)))
51 |             .attr("cy", d => yScale(yValue(d)));
52 |       }
53 |             
54 |       function type(d){
55 |         d.sepalLength = +d.sepalLength;
56 |         d.sepalWidth = +d.sepalWidth;
57 |         d.petalLength = +d.petalLength;
58 |         d.petalWidth = +d.petalWidth;
59 |         return d;
60 |       }
61 |       
62 |       d3.csv("iris.csv", type, data => {
63 |         setTimeout(() => render(data), 0);
64 |         setTimeout(() => { margin.top    = 100; render(data); }, 1000);
65 |         setTimeout(() => { margin.right  = 330; render(data); }, 2000);
66 |         setTimeout(() => { margin.bottom = 100; render(data); }, 3000);
67 |         setTimeout(() => { margin.left   = 330; render(data); }, 4000);
68 |       });
69 |       
70 |     </script>
71 |   </body>
72 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-05/example-10/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Idempotent Axes Fail</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.sepalLength;
11 |       const yValue = d => d.petalLength;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const xScale = d3.scaleLinear();
18 |       const yScale = d3.scaleLinear();
19 |       const xAxis = d3.axisBottom().scale(xScale);
20 |       const yAxis = d3.axisLeft().scale(yScale);
21 |       
22 |       function render(data){
23 |         const innerWidth = width - margin.left - margin.right;
24 |         const innerHeight = height - margin.top - margin.bottom;
25 |         
26 |         let g = svg.selectAll("g").data([null]);
27 |         g = g.enter().append("g").merge(g);
28 |         g.attr("transform", `translate(${margin.left}, ${margin.top})`);
29 |         
30 |         xScale
31 |           .domain(d3.extent(data, xValue))
32 |           .range([0, innerWidth]);
33 |         yScale
34 |           .domain(d3.extent(data, yValue))
35 |           .range([innerHeight, 0]);
36 |         
37 |         let xAxisG = g.selectAll("g").data([null]);
38 |         xAxisG = xAxisG.enter().append("g").merge(xAxisG);
39 |         xAxisG.attr("transform", `translate(0, ${innerHeight})`);
40 |         xAxisG.call(xAxis);
41 |         
42 |         let yAxisG = g.selectAll("g").data([null]);
43 |         yAxisG = yAxisG.enter().append("g").merge(yAxisG);
44 |         yAxisG.call(yAxis);
45 |         
46 |         const circles = g.selectAll("circle").data(data);
47 |         circles.exit().remove();
48 |         circles
49 |           .enter().append("circle")
50 |             .attr("r", 5)
51 |           .merge(circles)
52 |             .attr("cx", d => xScale(xValue(d)))
53 |             .attr("cy", d => yScale(yValue(d)));
54 |       }
55 |             
56 |       function type(d){
57 |         d.sepalLength = +d.sepalLength;
58 |         d.sepalWidth = +d.sepalWidth;
59 |         d.petalLength = +d.petalLength;
60 |         d.petalWidth = +d.petalWidth;
61 |         return d;
62 |       }
63 |       
64 |       d3.csv("iris.csv", type, data => {
65 |         setTimeout(() => render(data), 0);
66 |         setTimeout(() => { margin.top    = 100; render(data); }, 1000);
67 |         setTimeout(() => { margin.right  = 330; render(data); }, 2000);
68 |         setTimeout(() => { margin.bottom = 100; render(data); }, 3000);
69 |         setTimeout(() => { margin.left   = 330; render(data); }, 4000);
70 |       });
71 |       
72 |     </script>
73 |   </body>
74 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-06/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>X and Y Axes</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       // From previous module #2/5/7
11 |       const xValue = d => d.sepalLength;
12 |       const yValue = d => d.petalLength;
13 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
14 |       
15 |       const svg = d3.select("svg");
16 |       const width = +svg.attr("width");
17 |       const height = +svg.attr("height");
18 |       const innerWidth = width - margin.left - margin.right;
19 |       const innerHeight = height - margin.top - margin.bottom;
20 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
21 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
22 |       const xAxis = d3.axisBottom().scale(xScale);
23 |       const yAxis = d3.axisLeft().scale(yScale);
24 |       
25 |       const g = svg.append("g")
26 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
27 |       const xAxisG = g.append("g")
28 |           .attr("transform", `translate(0, ${innerHeight})`);
29 |       const yAxisG = g.append("g");
30 |       
31 |       function render(data){
32 |         xScale.domain(d3.extent(data, xValue));
33 |         yScale.domain(d3.extent(data, yValue));
34 |         
35 |         xAxisG.call(xAxis);
36 |         yAxisG.call(yAxis);
37 |         
38 |         const circles = g.selectAll("circle").data(data);
39 |         circles.exit().remove();
40 |         circles
41 |           .enter().append("circle")
42 |             .attr("r", 5)
43 |           .merge(circles)
44 |             .attr("cx", d => xScale(xValue(d)))
45 |             .attr("cy", d => yScale(yValue(d)));
46 |       }
47 |             
48 |       function type(d){
49 |         d.sepalLength = +d.sepalLength;
50 |         d.sepalWidth = +d.sepalWidth;
51 |         d.petalLength = +d.petalLength;
52 |         d.petalWidth = +d.petalWidth;
53 |         return d;
54 |       }
55 |       
56 |       d3.csv("iris.csv", type, render);
57 |       
58 |     </script>
59 |   </body>
60 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-06/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Styling Axes with CSS</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   	<style>
 7 |       .axis .tick line {
 8 |         stroke-width: 3px;
 9 |         stroke: #f7351b;
10 |       }
11 |       .axis .tick text {
12 |       	font-size: 30px;
13 |         fill: #635F5D;
14 |       }
15 |       .axis .domain {
16 |         stroke-width: 5;
17 |         stroke: #6ce2e9;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <svg width="960" height="500"></svg>
23 |     <script>
24 |       const xValue = d => d.sepalLength;
25 |       const yValue = d => d.petalLength;
26 |       const margin = {top: 50, right: 30, bottom: 50, left: 63};
27 |       
28 |       const svg = d3.select("svg");
29 |       const width = +svg.attr("width");
30 |       const height = +svg.attr("height");
31 |       const innerWidth = width - margin.left - margin.right;
32 |       const innerHeight = height - margin.top - margin.bottom;
33 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
34 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
35 |       const xAxis = d3.axisBottom().scale(xScale);
36 |       const yAxis = d3.axisLeft().scale(yScale);
37 |       
38 |       const g = svg.append("g")
39 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
40 |       const xAxisG = g.append("g")
41 |           .attr("class", "axis")
42 |           .attr("transform", `translate(0, ${innerHeight})`);
43 |       const yAxisG = g.append("g")
44 |           .attr("class", "axis");
45 |       
46 |       function render(data){
47 |         xScale.domain(d3.extent(data, xValue));
48 |         yScale.domain(d3.extent(data, yValue));
49 |         
50 |         xAxisG.call(xAxis);
51 |         yAxisG.call(yAxis);
52 |         
53 |         const circles = g.selectAll("circle").data(data);
54 |         circles.exit().remove();
55 |         circles
56 |           .enter().append("circle")
57 |             .attr("r", 5)
58 |           .merge(circles)
59 |             .attr("cx", d => xScale(xValue(d)))
60 |             .attr("cy", d => yScale(yValue(d)));
61 |       }
62 |             
63 |       function type(d){
64 |         d.sepalLength = +d.sepalLength;
65 |         d.sepalWidth = +d.sepalWidth;
66 |         d.petalLength = +d.petalLength;
67 |         d.petalWidth = +d.petalWidth;
68 |         return d;
69 |       }
70 |       
71 |       d3.csv("iris.csv", type, render);
72 |       
73 |     </script>
74 |   </body>
75 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-06/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>axis.ticks()</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   	<style>
 7 |       .axis .tick line {
 8 |         stroke-width: 3px;
 9 |         stroke: #f7351b;
10 |       }
11 |       .axis .tick text {
12 |       	font-size: 30px;
13 |         fill: #635F5D;
14 |       }
15 |       .axis .domain {
16 |         stroke-width: 5;
17 |         stroke: #6ce2e9;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <svg width="960" height="500"></svg>
23 |     <script>
24 |       const xValue = d => d.sepalLength;
25 |       const yValue = d => d.petalLength;
26 |       const margin = {top: 50, right: 30, bottom: 50, left: 63};
27 |       
28 |       const svg = d3.select("svg");
29 |       const width = +svg.attr("width");
30 |       const height = +svg.attr("height");
31 |       const innerWidth = width - margin.left - margin.right;
32 |       const innerHeight = height - margin.top - margin.bottom;
33 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
34 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
35 |       const xAxis = d3.axisBottom()
36 |         .scale(xScale);
37 |       const yAxis = d3.axisLeft()
38 |         .scale(yScale)
39 |         .ticks(5);
40 |       
41 |       const g = svg.append("g")
42 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
43 |       const xAxisG = g.append("g")
44 |           .attr("class", "axis")
45 |           .attr("transform", `translate(0, ${innerHeight})`);
46 |       const yAxisG = g.append("g")
47 |           .attr("class", "axis");
48 |       
49 |       function render(data){
50 |         xScale.domain(d3.extent(data, xValue));
51 |         yScale.domain(d3.extent(data, yValue));
52 |         
53 |         xAxisG.call(xAxis);
54 |         yAxisG.call(yAxis);
55 |         
56 |         const circles = g.selectAll("circle").data(data);
57 |         circles.exit().remove();
58 |         circles
59 |           .enter().append("circle")
60 |             .attr("r", 5)
61 |           .merge(circles)
62 |             .attr("cx", d => xScale(xValue(d)))
63 |             .attr("cy", d => yScale(yValue(d)));
64 |       }
65 |             
66 |       function type(d){
67 |         d.sepalLength = +d.sepalLength;
68 |         d.sepalWidth = +d.sepalWidth;
69 |         d.petalLength = +d.petalLength;
70 |         d.petalWidth = +d.petalWidth;
71 |         return d;
72 |       }
73 |       
74 |       d3.csv("iris.csv", type, render);
75 |       
76 |     </script>
77 |   </body>
78 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-06/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>axis.tickSizeOuter()</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   	<style>
 7 |       .axis .tick line {
 8 |         stroke-width: 3px;
 9 |         stroke: #f7351b;
10 |       }
11 |       .axis .tick text {
12 |       	font-size: 30px;
13 |         fill: #635F5D;
14 |       }
15 |       .axis .domain {
16 |         stroke-width: 5;
17 |         stroke: #6ce2e9;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <svg width="960" height="500"></svg>
23 |     <script>
24 |       const xValue = d => d.sepalLength;
25 |       const yValue = d => d.petalLength;
26 |       const margin = {top: 50, right: 30, bottom: 50, left: 63};
27 |       
28 |       const svg = d3.select("svg");
29 |       const width = +svg.attr("width");
30 |       const height = +svg.attr("height");
31 |       const innerWidth = width - margin.left - margin.right;
32 |       const innerHeight = height - margin.top - margin.bottom;
33 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
34 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
35 |       const xAxis = d3.axisBottom()
36 |         .scale(xScale)
37 |         .tickSizeOuter(30);
38 |       const yAxis = d3.axisLeft()
39 |         .scale(yScale)
40 |         .ticks(5)
41 |         .tickSizeOuter(30);
42 |       
43 |       const g = svg.append("g")
44 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
45 |       const xAxisG = g.append("g")
46 |           .attr("class", "axis")
47 |           .attr("transform", `translate(0, ${innerHeight})`);
48 |       const yAxisG = g.append("g")
49 |           .attr("class", "axis");
50 |       
51 |       function render(data){
52 |         xScale.domain(d3.extent(data, xValue));
53 |         yScale.domain(d3.extent(data, yValue));
54 |         
55 |         xAxisG.call(xAxis);
56 |         yAxisG.call(yAxis);
57 |         
58 |         const circles = g.selectAll("circle").data(data);
59 |         circles.exit().remove();
60 |         circles
61 |           .enter().append("circle")
62 |             .attr("r", 5)
63 |           .merge(circles)
64 |             .attr("cx", d => xScale(xValue(d)))
65 |             .attr("cy", d => yScale(yValue(d)));
66 |       }
67 |             
68 |       function type(d){
69 |         d.sepalLength = +d.sepalLength;
70 |         d.sepalWidth = +d.sepalWidth;
71 |         d.petalLength = +d.petalLength;
72 |         d.petalWidth = +d.petalWidth;
73 |         return d;
74 |       }
75 |       
76 |       d3.csv("iris.csv", type, render);
77 |       
78 |     </script>
79 |   </body>
80 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-06/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>axis.tickSizeInner()</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   	<style>
 7 |       .axis .tick line {
 8 |         stroke-width: 3px;
 9 |         stroke: #f7351b;
10 |       }
11 |       .axis .tick text {
12 |       	font-size: 30px;
13 |         fill: #635F5D;
14 |       }
15 |       .axis .domain {
16 |         stroke-width: 5;
17 |         stroke: #6ce2e9;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <svg width="960" height="500"></svg>
23 |     <script>
24 |       const xValue = d => d.sepalLength;
25 |       const yValue = d => d.petalLength;
26 |       const margin = {top: 50, right: 30, bottom: 50, left: 63};
27 |       
28 |       const svg = d3.select("svg");
29 |       const width = +svg.attr("width");
30 |       const height = +svg.attr("height");
31 |       const innerWidth = width - margin.left - margin.right;
32 |       const innerHeight = height - margin.top - margin.bottom;
33 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
34 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
35 |       const xAxis = d3.axisBottom()
36 |         .scale(xScale)
37 |         .tickSizeInner(20);
38 |       const yAxis = d3.axisLeft()
39 |         .scale(yScale)
40 |         .ticks(5)
41 |         .tickSizeInner(20);
42 |       
43 |       const g = svg.append("g")
44 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
45 |       const xAxisG = g.append("g")
46 |           .attr("class", "axis")
47 |           .attr("transform", `translate(0, ${innerHeight})`);
48 |       const yAxisG = g.append("g")
49 |           .attr("class", "axis");
50 |       
51 |       function render(data){
52 |         xScale.domain(d3.extent(data, xValue));
53 |         yScale.domain(d3.extent(data, yValue));
54 |         
55 |         xAxisG.call(xAxis);
56 |         yAxisG.call(yAxis);
57 |         
58 |         const circles = g.selectAll("circle").data(data);
59 |         circles.exit().remove();
60 |         circles
61 |           .enter().append("circle")
62 |             .attr("r", 5)
63 |           .merge(circles)
64 |             .attr("cx", d => xScale(xValue(d)))
65 |             .attr("cy", d => yScale(yValue(d)));
66 |       }
67 |             
68 |       function type(d){
69 |         d.sepalLength = +d.sepalLength;
70 |         d.sepalWidth = +d.sepalWidth;
71 |         d.petalLength = +d.petalLength;
72 |         d.petalWidth = +d.petalWidth;
73 |         return d;
74 |       }
75 |       
76 |       d3.csv("iris.csv", type, render);
77 |       
78 |     </script>
79 |   </body>
80 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-06/example-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>scale.nice()</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   	<style>
 7 |       .axis .tick line {
 8 |         stroke-width: 3px;
 9 |         stroke: #f7351b;
10 |       }
11 |       .axis .tick text {
12 |       	font-size: 30px;
13 |         fill: #635F5D;
14 |       }
15 |       .axis .domain {
16 |         stroke-width: 5;
17 |         stroke: #6ce2e9;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <svg width="960" height="500"></svg>
23 |     <script>
24 |       const xValue = d => d.sepalLength;
25 |       const yValue = d => d.petalLength;
26 |       const margin = {top: 50, right: 30, bottom: 50, left: 63};
27 |       
28 |       const svg = d3.select("svg");
29 |       const width = +svg.attr("width");
30 |       const height = +svg.attr("height");
31 |       const innerWidth = width - margin.left - margin.right;
32 |       const innerHeight = height - margin.top - margin.bottom;
33 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
34 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
35 |       const xAxis = d3.axisBottom()
36 |         .scale(xScale);
37 |       const yAxis = d3.axisLeft()
38 |         .scale(yScale)
39 |         .ticks(5);
40 |       
41 |       const g = svg.append("g")
42 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
43 |       const xAxisG = g.append("g")
44 |           .attr("class", "axis")
45 |           .attr("transform", `translate(0, ${innerHeight})`);
46 |       const yAxisG = g.append("g")
47 |           .attr("class", "axis");
48 |       
49 |       function render(data){
50 |         xScale
51 |           .domain(d3.extent(data, xValue))
52 |           .nice();
53 |         yScale
54 |           .domain(d3.extent(data, yValue))
55 |           .nice();
56 |         
57 |         xAxisG.call(xAxis);
58 |         yAxisG.call(yAxis);
59 |         
60 |         const circles = g.selectAll("circle").data(data);
61 |         circles.exit().remove();
62 |         circles
63 |           .enter().append("circle")
64 |             .attr("r", 5)
65 |           .merge(circles)
66 |             .attr("cx", d => xScale(xValue(d)))
67 |             .attr("cy", d => yScale(yValue(d)));
68 |       }
69 |             
70 |       function type(d){
71 |         d.sepalLength = +d.sepalLength;
72 |         d.sepalWidth = +d.sepalWidth;
73 |         d.petalLength = +d.petalLength;
74 |         d.petalWidth = +d.petalWidth;
75 |         return d;
76 |       }
77 |       
78 |       d3.csv("iris.csv", type, render);
79 |       
80 |     </script>
81 |   </body>
82 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-06/example-07/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Hiding the Domain Line</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   	<style>
 7 |       .axis .tick line {
 8 |         stroke-width: 3px;
 9 |         stroke: #f7351b;
10 |       }
11 |       .axis .tick text {
12 |       	font-size: 30px;
13 |         fill: #635F5D;
14 |       }
15 |       .axis .domain {
16 |         display: none;
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <svg width="960" height="500"></svg>
22 |     <script>
23 |       const xValue = d => d.sepalLength;
24 |       const yValue = d => d.petalLength;
25 |       const margin = {top: 50, right: 30, bottom: 50, left: 63};
26 |       
27 |       const svg = d3.select("svg");
28 |       const width = +svg.attr("width");
29 |       const height = +svg.attr("height");
30 |       const innerWidth = width - margin.left - margin.right;
31 |       const innerHeight = height - margin.top - margin.bottom;
32 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
33 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
34 |       const xAxis = d3.axisBottom()
35 |         .scale(xScale);
36 |       const yAxis = d3.axisLeft()
37 |         .scale(yScale)
38 |         .ticks(5);
39 |       
40 |       const g = svg.append("g")
41 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
42 |       const xAxisG = g.append("g")
43 |           .attr("class", "axis")
44 |           .attr("transform", `translate(0, ${innerHeight})`);
45 |       const yAxisG = g.append("g")
46 |           .attr("class", "axis");
47 |       
48 |       function render(data){
49 |         xScale
50 |           .domain(d3.extent(data, xValue))
51 |           .nice();
52 |         yScale
53 |           .domain(d3.extent(data, yValue))
54 |           .nice();
55 |         
56 |         xAxisG.call(xAxis);
57 |         yAxisG.call(yAxis);
58 |         
59 |         const circles = g.selectAll("circle").data(data);
60 |         circles.exit().remove();
61 |         circles
62 |           .enter().append("circle")
63 |             .attr("r", 5)
64 |           .merge(circles)
65 |             .attr("cx", d => xScale(xValue(d)))
66 |             .attr("cy", d => yScale(yValue(d)));
67 |       }
68 |             
69 |       function type(d){
70 |         d.sepalLength = +d.sepalLength;
71 |         d.sepalWidth = +d.sepalWidth;
72 |         d.petalLength = +d.petalLength;
73 |         d.petalWidth = +d.petalWidth;
74 |         return d;
75 |       }
76 |       
77 |       d3.csv("iris.csv", type, render);
78 |       
79 |     </script>
80 |   </body>
81 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-06/example-08/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Tick Grid</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   	<style>
 7 |       .axis .tick line {
 8 |         stroke-width: 3px;
 9 |         stroke: #f7351b;
10 |       }
11 |       .axis .tick text {
12 |       	font-size: 30px;
13 |         fill: #635F5D;
14 |       }
15 |       .axis .domain {
16 |         display: none;
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <svg width="960" height="500"></svg>
22 |     <script>
23 |       const xValue = d => d.sepalLength;
24 |       const yValue = d => d.petalLength;
25 |       const margin = {top: 50, right: 30, bottom: 50, left: 63};
26 |       
27 |       const svg = d3.select("svg");
28 |       const width = +svg.attr("width");
29 |       const height = +svg.attr("height");
30 |       const innerWidth = width - margin.left - margin.right;
31 |       const innerHeight = height - margin.top - margin.bottom;
32 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
33 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
34 |       const xAxis = d3.axisBottom()
35 |         .tickSizeInner(-innerHeight)
36 |         .scale(xScale);
37 |       const yAxis = d3.axisLeft()
38 |         .scale(yScale)
39 |         .tickSizeInner(-innerWidth)
40 |         .ticks(5);
41 |       
42 |       const g = svg.append("g")
43 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
44 |       const xAxisG = g.append("g")
45 |           .attr("class", "axis")
46 |           .attr("transform", `translate(0, ${innerHeight})`);
47 |       const yAxisG = g.append("g")
48 |           .attr("class", "axis");
49 |       
50 |       function render(data){
51 |         xScale
52 |           .domain(d3.extent(data, xValue))
53 |           .nice();
54 |         yScale
55 |           .domain(d3.extent(data, yValue))
56 |           .nice();
57 |         
58 |         xAxisG.call(xAxis);
59 |         yAxisG.call(yAxis);
60 |         
61 |         const circles = g.selectAll("circle").data(data);
62 |         circles.exit().remove();
63 |         circles
64 |           .enter().append("circle")
65 |             .attr("r", 5)
66 |           .merge(circles)
67 |             .attr("cx", d => xScale(xValue(d)))
68 |             .attr("cy", d => yScale(yValue(d)));
69 |       }
70 |             
71 |       function type(d){
72 |         d.sepalLength = +d.sepalLength;
73 |         d.sepalWidth = +d.sepalWidth;
74 |         d.petalLength = +d.petalLength;
75 |         d.petalWidth = +d.petalWidth;
76 |         return d;
77 |       }
78 |       
79 |       d3.csv("iris.csv", type, render);
80 |       
81 |     </script>
82 |   </body>
83 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-06/example-09/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>axis.tickPadding()</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   	<style>
 7 |       .axis .tick line {
 8 |         stroke-width: 2px;
 9 |         stroke: #C0C0BB;
10 |       }
11 |       .axis .tick text {
12 |       	font-size: 30px;
13 |         fill: #8E8883;
14 |       }
15 |       .axis .domain {
16 |         display: none;
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <svg width="960" height="500"></svg>
22 |     <script>
23 |       const xValue = d => d.sepalLength;
24 |       const yValue = d => d.petalLength;
25 |       const margin = {top: 50, right: 30, bottom: 50, left: 63};
26 |       
27 |       const svg = d3.select("svg");
28 |       const width = +svg.attr("width");
29 |       const height = +svg.attr("height");
30 |       const innerWidth = width - margin.left - margin.right;
31 |       const innerHeight = height - margin.top - margin.bottom;
32 |       const xScale = d3.scaleLinear().range([0, innerWidth]);
33 |       const yScale = d3.scaleLinear().range([innerHeight, 0]);
34 |       const xAxis = d3.axisBottom()
35 |         .scale(xScale)
36 |         .tickSizeInner(-innerHeight)
37 |         .tickPadding(15);
38 |       const yAxis = d3.axisLeft()
39 |         .scale(yScale)
40 |         .tickSizeInner(-innerWidth)
41 |         .ticks(5)
42 |         .tickPadding(10);
43 |       
44 |       const g = svg.append("g")
45 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
46 |       const xAxisG = g.append("g")
47 |           .attr("class", "axis")
48 |           .attr("transform", `translate(0, ${innerHeight})`);
49 |       const yAxisG = g.append("g")
50 |           .attr("class", "axis");
51 |       
52 |       function render(data){
53 |         xScale
54 |           .domain(d3.extent(data, xValue))
55 |           .nice();
56 |         yScale
57 |           .domain(d3.extent(data, yValue))
58 |           .nice();
59 |         
60 |         xAxisG.call(xAxis);
61 |         yAxisG.call(yAxis);
62 |         
63 |         const circles = g.selectAll("circle").data(data);
64 |         circles.exit().remove();
65 |         circles
66 |           .enter().append("circle")
67 |             .attr("r", 5)
68 |           .merge(circles)
69 |             .attr("cx", d => xScale(xValue(d)))
70 |             .attr("cy", d => yScale(yValue(d)));
71 |       }
72 |             
73 |       function type(d){
74 |         d.sepalLength = +d.sepalLength;
75 |         d.sepalWidth = +d.sepalWidth;
76 |         d.petalLength = +d.petalLength;
77 |         d.petalWidth = +d.petalWidth;
78 |         return d;
79 |       }
80 |       
81 |       d3.csv("iris.csv", type, render);
82 |       
83 |     </script>
84 |   </body>
85 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-08/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Color Legend Circles</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const svg = d3.select("svg");
11 |       const colorScale = d3.scaleOrdinal()
12 |         .domain(["setosa", "versicolor", "virginica"])
13 |         .range(["#eb8e37", "#1ac6cf", "#e35dd4"]);
14 |       
15 |       svg
16 |         .selectAll("circle")
17 |         .data(colorScale.domain())
18 |         .enter().append("circle")
19 |           .attr("cx", 400)
20 |           .attr("cy", (d, i) => i * 35 + 200)
21 |           .attr("r", 12)
22 |           .attr("fill", colorScale);
23 |     </script>
24 |   </body>
25 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-08/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Color Legend Text</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |     <style>
 7 |       text {
 8 |         font-size: 30px;
 9 |         fill: #8E8883;
10 |         font-family: sans-serif;
11 |         alignment-baseline: middle;
12 |       }
13 |     </style>
14 |   </head>
15 |   <body>
16 |     <svg width="960" height="500"></svg>
17 |     <script>
18 |       const svg = d3.select("svg");
19 |       const colorScale = d3.scaleOrdinal()
20 |         .domain(["setosa", "versicolor", "virginica"])
21 |         .range(["#eb8e37", "#1ac6cf", "#e35dd4"]);
22 |       
23 |       svg
24 |         .selectAll("circle")
25 |         .data(colorScale.domain())
26 |         .enter().append("circle")
27 |           .attr("cx", 400)                    // Unsightly constants.
28 |           .attr("cy", (d, i) => i * 35 + 200) // Unsightly constants.
29 |           .attr("r", 12)                      // Unsightly constants.
30 |           .attr("fill", colorScale);
31 |       
32 |       svg
33 |         .selectAll("text")
34 |         .data(colorScale.domain())
35 |         .enter().append("text")
36 |           .attr("x", 418)
37 |           .attr("y", (d, i) => i * 35 + 200)
38 |           .text(d => d);
39 |       
40 |     </script>
41 |   </body>
42 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-08/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Color Legend Variables</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |     <style>
 7 |       /* Not a very specific selector, needs improvement. */
 8 |       text {
 9 |         font-size: 30px;
10 |         fill: #8E8883;
11 |         font-family: sans-serif;
12 |         alignment-baseline: middle;
13 |       }
14 |     </style>
15 |   </head>
16 |   <body>
17 |     <svg width="960" height="500"></svg>
18 |     <script>
19 |       const svg = d3.select("svg");
20 |       const colorScale = d3.scaleOrdinal()
21 |         .domain(["setosa", "versicolor", "virginica"])
22 |         .range(["#eb8e37", "#1ac6cf", "#e35dd4"]);
23 | 
24 |       const positionX = 400;
25 |       const positionY = 200;
26 |       const tickRadius = 12;
27 |       const tickSpacing = 35;
28 |       const tickPadding = 6;
29 |       
30 |       svg
31 |         .selectAll("circle")
32 |         .data(colorScale.domain())
33 |         .enter().append("circle")
34 |           .attr("cx", positionX)
35 |           .attr("cy", (d, i) => i * tickSpacing + positionY) // Duplicated logic.
36 |           .attr("r", tickRadius)
37 |           .attr("fill", colorScale);
38 |       
39 |       svg
40 |         .selectAll("text")
41 |         .data(colorScale.domain())
42 |         .enter().append("text")
43 |           .attr("x", positionX + tickRadius + tickPadding)
44 |           .attr("y", (d, i) => i * tickSpacing + positionY) // Duplicated logic.
45 |           .text(d => d);
46 |       
47 |     </script>
48 |   </body>
49 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-08/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Color Legend Groups</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |     <style>
 7 |       .legend .tick text {
 8 |         font-size: 30px;
 9 |         fill: #8E8883;
10 |         font-family: sans-serif;
11 |         alignment-baseline: middle;
12 |       }
13 |     </style>
14 |   </head>
15 |   <body>
16 |     <svg width="960" height="500"></svg>
17 |     <script>
18 |       const svg = d3.select("svg");
19 |       const colorScale = d3.scaleOrdinal()
20 |         .domain(["setosa", "versicolor", "virginica"])
21 |         .range(["#eb8e37", "#1ac6cf", "#e35dd4"]);
22 | 
23 |       const positionX = 400;
24 |       const positionY = 200;
25 |       const tickRadius = 12;
26 |       const tickSpacing = 35;
27 |       const tickPadding = 6;
28 |       
29 |       const legendG = svg
30 |         .append("g")
31 |           .attr("class", "legend")
32 |           .attr("transform", `translate(${positionX}, ${positionY})`);
33 | 
34 |       const ticksEnter = legendG
35 |         .selectAll(".tick")
36 |         .data(colorScale.domain())
37 |         .enter().append("g")
38 |           .attr("class", "tick")
39 |           .attr("transform", (d, i) => `translate(0, ${i * tickSpacing})`);
40 | 
41 |       ticksEnter
42 |         .append("circle")
43 |           .attr("r", tickRadius)
44 |           .attr("fill", colorScale);
45 | 
46 |       ticksEnter
47 |         .append("text")
48 |           .attr("x", tickRadius + tickPadding)
49 |           .text(d => d);
50 |       
51 |     </script>
52 |   </body>
53 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-08/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Color Legend Label</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |     <style>
 7 |       .legend .tick text {
 8 |         font-size: 30px;
 9 |         fill: #8E8883;
10 |         font-family: sans-serif;
11 |         alignment-baseline: middle;
12 |       }
13 |       .legend__label {
14 |         font-size: 45px;
15 |         fill: #635F5D;
16 |         font-family: sans-serif;
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <svg width="960" height="500"></svg>
22 |     <script>
23 |       const svg = d3.select("svg");
24 |       const colorScale = d3.scaleOrdinal()
25 |         .domain(["setosa", "versicolor", "virginica"])
26 |         .range(["#eb8e37", "#1ac6cf", "#e35dd4"]);
27 | 
28 |       const positionX = 400;
29 |       const positionY = 200;
30 |       const tickRadius = 12;
31 |       const tickSpacing = 35;
32 |       const tickPadding = 6;
33 |       const label = "Species";
34 |       const labelX = -20;
35 |       const labelY = -30;
36 |       
37 |       const legendG = svg
38 |         .append("g")
39 |           .attr("class", "legend")
40 |           .attr("transform", `translate(${positionX}, ${positionY})`);
41 |       
42 |       legendG
43 |         .append("text")
44 |           .attr("class", "legend__label")
45 |           .attr("x", labelX)
46 |           .attr("y", labelY)
47 |           .text(label);
48 | 
49 |       const ticksEnter = legendG
50 |         .selectAll(".tick")
51 |         .data(colorScale.domain())
52 |         .enter().append("g")
53 |           .attr("class", "tick")
54 |           .attr("transform", (d, i) => `translate(0, ${i * tickSpacing})`);
55 | 
56 |       ticksEnter
57 |         .append("circle")
58 |           .attr("r", tickRadius)
59 |           .attr("fill", colorScale);
60 | 
61 |       ticksEnter
62 |         .append("text")
63 |           .attr("x", tickRadius + tickPadding)
64 |           .text(d => d);
65 |       
66 |     </script>
67 |   </body>
68 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-08/example-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Color Legend Function</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |     <style>
 7 |       .legend .tick text {
 8 |         font-size: 30px;
 9 |         fill: #8E8883;
10 |         font-family: sans-serif;
11 |         alignment-baseline: middle;
12 |       }
13 |       .legend__label {
14 |         font-size: 45px;
15 |         fill: #635F5D;
16 |         font-family: sans-serif;
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <svg width="960" height="500"></svg>
22 |     <script>
23 |       function colorLegend(selection, props){
24 |         const colorScale = props.colorScale;
25 |         const positionX = props.positionX;
26 |         const positionY = props.positionY;
27 |         const tickRadius = props.tickRadius;
28 |         const tickSpacing = props.tickSpacing;
29 |         const tickPadding = props.tickPadding;
30 |         const label = props.label;
31 |         const labelX = props.labelX;
32 |         const labelY = props.labelY;
33 |         
34 |         const legendG = selection
35 |           .append("g")
36 |             .attr("class", "legend")
37 |             .attr("transform", `translate(${positionX}, ${positionY})`);
38 |         
39 |         legendG
40 |           .append("text")
41 |             .attr("class", "legend__label")
42 |             .attr("x", labelX)
43 |             .attr("y", labelY)
44 |             .text(label);
45 | 
46 |         const ticksEnter = legendG
47 |           .selectAll(".tick")
48 |           .data(colorScale.domain())
49 |           .enter().append("g")
50 |             .attr("class", "tick")
51 |             .attr("transform", (d, i) => `translate(0, ${i * tickSpacing})`);
52 | 
53 |         ticksEnter
54 |           .append("circle")
55 |             .attr("r", tickRadius)
56 |             .attr("fill", colorScale);
57 | 
58 |         ticksEnter
59 |           .append("text")
60 |             .attr("x", tickRadius + tickPadding)
61 |             .text(d => d);
62 |       }
63 |       
64 |       colorLegend(d3.select("svg"), {
65 |         colorScale: d3.scaleOrdinal()
66 |           .domain(["setosa", "versicolor", "virginica"])
67 |           .range(["#eb8e37", "#1ac6cf", "#e35dd4"]),
68 |         positionX: 400,
69 |         positionY: 200,
70 |         tickRadius: 12,
71 |         tickSpacing: 35,
72 |         tickPadding: 6,
73 |         label: "Species",
74 |         labelX: -20,
75 |         labelY: -30
76 |       });
77 |       
78 |     </script>
79 |   </body>
80 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-08/example-08/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/curran/d3-in-motion/bcc652226bd1934ce161667487c582ddeaaa1e96/archive/units/unit-02/module-08/example-08/preview.png


--------------------------------------------------------------------------------
/archive/units/unit-02/module-08/example-08/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/curran/d3-in-motion/bcc652226bd1934ce161667487c582ddeaaa1e96/archive/units/unit-02/module-08/example-08/thumbnail.png


--------------------------------------------------------------------------------
/archive/units/unit-02/module-09/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Size Legend Circles</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const svg = d3.select("svg");
11 |       const sizeMax = 10;
12 |       const sizeScale = d3.scaleSqrt()
13 |         .domain([0, 2.5])
14 |         .range([0, sizeMax]);
15 |       
16 |       svg
17 |         .selectAll("circle")
18 |         .data(sizeScale.ticks(5))
19 |         .enter().append("circle")
20 |           .attr("cx", 400)
21 |           .attr("cy", (d, i) => i * 35 + 200)
22 |           .attr("r", sizeScale)
23 |           .attr("fill", "black");
24 |     </script>
25 |   </body>
26 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-09/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Size Legend Variables</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const svg = d3.select("svg");
11 |       const sizeMax = 10;
12 |       const sizeScale = d3.scaleSqrt()
13 |         .domain([0, 2.5])
14 |         .range([0, sizeMax]);
15 |       
16 |       const positionX = 400;
17 |       const positionY = 200;
18 |       const tickRadius = 12;
19 |       const tickSpacing = 35;
20 |       const tickPadding = 6;
21 |       const ticks = 5;
22 |       const tickFill = "black";
23 |       
24 |       svg
25 |         .selectAll("circle")
26 |         .data(sizeScale.ticks(ticks))
27 |         .enter().append("circle")
28 |           .attr("cx", positionX)
29 |           .attr("cy", (d, i) => i * tickSpacing + positionY)
30 |           .attr("r", sizeScale)
31 |           .attr("fill", tickFill);
32 |     </script>
33 |   </body>
34 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-10/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Complete Color Legend</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   	<style>
 7 |       .legend .tick text {
 8 |         font-size: 30px;
 9 |         fill: #8E8883;
10 |         font-family: sans-serif;
11 |         alignment-baseline: middle;
12 |       }
13 |       .legend__label {
14 |         font-size: 40px;
15 |         fill: #635F5D;
16 |         font-family: sans-serif;
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <svg width="960" height="500"></svg>
22 |     <script>
23 |       const colorLabel = "Species";
24 |       const colorLegendX = 750;
25 |       const colorLegendY = 90;
26 |       const colorLegendRadius = 10;
27 |       const colorLegendSpacing = 35;
28 |       const colorLegendLabelOffset = 20;
29 |       
30 |       const svg = d3.select("svg");
31 |       const colorScale = d3.scaleOrdinal()
32 |         .domain(["setosa", "versicolor", "virginica"])
33 |         .range(["#eb8e37", "#1ac6cf", "#e35dd4"]);
34 |       const colorLegendG = svg.append("g")
35 |           .attr("class", "legend")
36 |           .attr("transform", `translate(${colorLegendX}, ${colorLegendY})`);
37 |       
38 |       colorLegendG
39 |         .append("text")
40 |           .attr("class", "legend__label")
41 |           .attr("x", -20)
42 |           .attr("y", -30)
43 |           .text(colorLabel);
44 |       
45 |       function renderColorLegend(){
46 |         const colorLegendTick = colorLegendG
47 |           .selectAll(".tick")
48 |           .data(colorScale.domain());
49 |         colorLegendTick
50 |           .exit().remove();
51 |         const colorLegendTickEnter = colorLegendTick
52 |           .enter().append("g")
53 |             .attr("class", "tick");
54 |         colorLegendTickEnter
55 |           .merge(colorLegendTick)
56 |             .attr("transform", (d, i) => `translate(0, ${i * colorLegendSpacing})`);
57 |         
58 |         colorLegendTickEnter.append("circle")
59 |           .merge(colorLegendTick.select("circle"))
60 |             .attr("r", colorLegendRadius)
61 |             .attr("fill", colorScale);
62 | 
63 |         colorLegendTickEnter.append("text")
64 |           .merge(colorLegendTick.select("text"))
65 |             .attr("x", colorLegendLabelOffset)
66 |             .text(d => d);
67 |       }
68 |       
69 |       renderColorLegend();
70 |       
71 |     </script>
72 |   </body>
73 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-10/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Color Legend Component</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   	<style>
 7 |       .legend .tick text {
 8 |         font-size: 30px;
 9 |         fill: #8E8883;
10 |         font-family: sans-serif;
11 |         alignment-baseline: middle;
12 |       }
13 |       .legend__label {
14 |         font-size: 40px;
15 |         fill: #635F5D;
16 |         font-family: sans-serif;
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <svg width="960" height="500"></svg>
22 |     
23 |     <script>
24 |       function colorLegend(selection, props){
25 |         const { scale, x, y, label, labelX, labelY, radius, tickPadding, spacing, } = props;
26 |         
27 |         let g = selection.selectAll(".legend--color").data([null]);
28 |         g = g.merge(g.enter().append("g").attr("class", "legend legend--color"))
29 |             .attr("transform", `translate(${x}, ${y})`);
30 |         
31 |         const labelText = g.selectAll(".legend__label").data([null]);
32 |         labelText.merge(labelText.enter().append("text").attr("class", "legend__label"))
33 |             .attr("x", labelX)
34 |             .attr("y", labelY)
35 |             .text(label);
36 |         
37 |         const tick = g.selectAll(".tick").data(scale.domain());
38 |         tick.exit().remove();
39 |         
40 |         const tickEnter = tick.enter().append("g").attr("class", "tick");
41 |         tickEnter.merge(tick)
42 |             .attr("transform", (d, i) => `translate(0, ${i * spacing})`);
43 |         
44 |         tick.select("circle").merge(tickEnter.append("circle"))
45 |             .attr("r", radius)
46 |             .attr("fill", scale);
47 |         
48 |         tick.select("text").merge(tickEnter.append("text"))
49 |             .attr("x", tickPadding)
50 |             .text(d => d);
51 |       }
52 |       
53 |       function main(){
54 |         const svg = d3.select("svg");
55 |         const colorScale = d3.scaleOrdinal()
56 |           .domain(["setosa", "versicolor", "virginica"])
57 |           .range(["#eb8e37", "#1ac6cf", "#e35dd4"]);
58 |         
59 |         svg.call(colorLegend, {
60 |           scale: colorScale,
61 |           x: 750,
62 |           y: 90,
63 |           radius: 10,
64 |           spacing: 35,
65 |           tickPadding: 20,
66 |           label: "Species",
67 |           labelX: -20,
68 |           labelY: -30,
69 |         });
70 |       }
71 |       main();
72 |     </script>
73 |   </body>
74 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-02/module-10/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Size Legend Component</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   	<style>
 7 |       .legend .tick text {
 8 |         font-size: 30px;
 9 |         fill: #8E8883;
10 |         font-family: sans-serif;
11 |         alignment-baseline: middle;
12 |       }
13 |       .legend__label {
14 |         font-size: 40px;
15 |         fill: #635F5D;
16 |         font-family: sans-serif;
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <svg width="960" height="500"></svg>
22 |     
23 |     <script>
24 |       function sizeLegend(selection, props){
25 |         const {
26 |           x,
27 |           y,
28 |           scale,
29 |           spacing,
30 |           ticks,
31 |           tickPadding,
32 |           tickFill,
33 |           label,
34 |           labelX,
35 |           labelY
36 |         } = props;
37 |         
38 |         let g = selection.selectAll(".legend--size").data([null]);
39 |         g = g.merge(g.enter().append("g").attr("class", "legend legend--size"))
40 |             .attr("transform", `translate(${x}, ${y})`);
41 |         
42 |         const labelText = g.selectAll(".legend__label").data([null]);
43 |         labelText.merge(labelText.enter().append("text").attr("class", "legend__label"))
44 |             .attr("x", labelX)
45 |             .attr("y", labelY)
46 |             .text(label);
47 |         
48 |         const tick = g.selectAll(".tick")
49 |           .data(scale.ticks(ticks).filter(d => d));
50 |         tick.exit().remove();
51 |         
52 |         const tickEnter = tick.enter().append("g").attr("class", "tick");
53 |         tickEnter.merge(tick)
54 |             .attr("transform", (d, i) => `translate(0, ${i * spacing})`);
55 |         
56 |         tick.select("circle").merge(tickEnter.append("circle"))
57 |             .attr("r", scale)
58 |             .attr("fill", tickFill);
59 |         
60 |         tick.select("text").merge(tickEnter.append("text"))
61 |             .attr("x", tickPadding)
62 |             .text(d => d);
63 |       }
64 |       
65 |       function main(){
66 |         const svg = d3.select("svg");
67 |         const sizeMax = 12;
68 |         const sizeScale = d3.scaleSqrt()
69 |           .domain([0, 2.5])
70 |           .range([0, sizeMax]);
71 |         
72 |         svg.call(sizeLegend, {
73 |           scale: sizeScale,
74 |           label: "Species",
75 |           x: 750,
76 |           y: 285,
77 |           spacing: 35,
78 |           ticks: 5,
79 |           tickPadding: 20,
80 |           tickFill: "gray",
81 |           labelX: -20,
82 |           labelY: -30,
83 |         });
84 |       }
85 |       main();
86 |     </script>
87 |   </body>
88 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-01/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Drawing a Rectangle</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       d3.select("svg")
11 |         .append("rect")
12 |           .attr("x", 100)
13 |           .attr("y", 100)
14 |           .attr("width", 300)
15 |           .attr("height", 300);
16 |     </script>
17 |   </body>
18 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-02/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-02/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Population Data</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       d3.csv("data.csv", (data) => {
10 |         d3.select("body")
11 |           .append("pre")
12 |           .style("font-size", "1.4em")
13 |             .text(JSON.stringify(data, null, 2));
14 |       });
15 |     </script>
16 |   </body>
17 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-03/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-03/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Parsing Population</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <script>
 9 |       function type(d){
10 |         d.population = +d.population;
11 |         return d;
12 |       }
13 |       
14 |       d3.csv("data.csv", type, (data) => {
15 |         d3.select("body")
16 |           .append("pre")
17 |           .style("font-size", "1.4em")
18 |             .text(JSON.stringify(data, null, 2));
19 |       });
20 |     </script>
21 |   </body>
22 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-04/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-04/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Rendering Rectangles</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const svg = d3.select("svg");
11 |       
12 |       function render(data){
13 |         svg.selectAll("rect").data(data)
14 |           .enter().append("rect")
15 |             .attr("x", (d, i) => i * 150)
16 |             .attr("y", 150)
17 |             .attr("width", 50)
18 |             .attr("height", 200)
19 |       }
20 |       
21 |       function type(d){
22 |         d.population = +d.population;
23 |         return d;
24 |       }
25 |       
26 |       d3.csv("data.csv", type, render);
27 |     </script>
28 |   </body>
29 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-05/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-05/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Using d3.scaleBand</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.country;
11 |       
12 |       const svg = d3.select("svg");
13 |       const width = +svg.attr("width");
14 |       const height = +svg.attr("height");
15 |       
16 |       const xScale = d3.scaleBand()
17 |         .range([0, width]);
18 |       
19 |       function render(data){
20 |         xScale.domain(data.map(xValue));
21 |         svg.selectAll("rect").data(data)
22 |           .enter().append("rect")
23 |             .attr("x", d => xScale(xValue(d)))
24 |             .attr("y", 150)
25 |             .attr("width", xScale.bandwidth())
26 |             .attr("height", 200)
27 |             .attr("stroke", "white");
28 |       }
29 |       
30 |       function type(d){
31 |         d.population = +d.population;
32 |         return d;
33 |       }
34 |       
35 |       d3.csv("data.csv", type, render);
36 |     </script>
37 |   </body>
38 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-06/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-06/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>d3.scaleBand Padding</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.country;
11 |       
12 |       const svg = d3.select("svg");
13 |       const width = +svg.attr("width");
14 |       const height = +svg.attr("height");
15 |       
16 |       const xScale = d3.scaleBand()
17 |         .padding(0.2)
18 |         .range([0, width]);
19 |       
20 |       function render(data){
21 |         xScale.domain(data.map(xValue));
22 |         svg.selectAll("rect").data(data)
23 |           .enter().append("rect")
24 |             .attr("x", d => xScale(xValue(d)))
25 |             .attr("y", 150)
26 |             .attr("width", xScale.bandwidth())
27 |             .attr("height", 200);
28 |       }
29 |       
30 |       function type(d){
31 |         d.population = +d.population;
32 |         return d;
33 |       }
34 |       
35 |       d3.csv("data.csv", type, render);
36 |     </script>
37 |   </body>
38 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-07/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-07/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Introducing the Y Scale</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.country;
11 |       const yValue = d => d.population;
12 |       
13 |       const svg = d3.select("svg");
14 |       const width = +svg.attr("width");
15 |       const height = +svg.attr("height");
16 |       
17 |       const xScale = d3.scaleBand()
18 |         .padding(0.2)
19 |         .range([0, width]);
20 |       const yScale = d3.scaleLinear()
21 |         .range([0, height]);
22 |       
23 |       function render(data){
24 |         xScale.domain(data.map(xValue));
25 |         yScale.domain([0, d3.max(data, yValue)]);
26 |         svg.selectAll("rect").data(data)
27 |           .enter().append("rect")
28 |             .attr("x", d => xScale(xValue(d)))
29 |             .attr("y", 0)
30 |             .attr("width", xScale.bandwidth())
31 |             .attr("height", d => yScale(yValue(d)));
32 |       }
33 |       
34 |       function type(d){
35 |         d.population = +d.population;
36 |         return d;
37 |       }
38 |       
39 |       d3.csv("data.csv", type, render);
40 |     </script>
41 |   </body>
42 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-08/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-08/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Flipping Bars</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.country;
11 |       const yValue = d => d.population;
12 |       
13 |       const svg = d3.select("svg");
14 |       const width = +svg.attr("width");
15 |       const height = +svg.attr("height");
16 |       
17 |       const xScale = d3.scaleBand()
18 |         .padding(0.2)
19 |         .range([0, width]);
20 |       const yScale = d3.scaleLinear()
21 |         .range([0, height]);
22 |       
23 |       function render(data){
24 |         xScale.domain(data.map(xValue));
25 |         yScale.domain([0, d3.max(data, yValue)]);
26 |         svg.selectAll("rect").data(data)
27 |           .enter().append("rect")
28 |             .attr("x", d => xScale(xValue(d)))
29 |             .attr("y", d => height - yScale(yValue(d)))
30 |             .attr("width", xScale.bandwidth())
31 |             .attr("height", d => yScale(yValue(d)));
32 |       }
33 |       
34 |       function type(d){
35 |         d.population = +d.population;
36 |         return d;
37 |       }
38 |       
39 |       d3.csv("data.csv", type, render);
40 |     </script>
41 |   </body>
42 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-09/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-09/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Margin Convention</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.country;
11 |       const yValue = d => d.population;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 30};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       
20 |       const xScale = d3.scaleBand()
21 |         .padding(0.2)
22 |         .range([0, innerWidth]);
23 |       const yScale = d3.scaleLinear()
24 |         .range([0, innerHeight]);
25 |       
26 |       const g = svg.append("g")
27 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
28 |       
29 |       function render(data){
30 |         xScale.domain(data.map(xValue));
31 |         yScale.domain([0, d3.max(data, yValue)]);
32 |         g.selectAll("rect").data(data)
33 |           .enter().append("rect")
34 |             .attr("x", d => xScale(xValue(d)))
35 |             .attr("y", d => innerHeight - yScale(yValue(d)))
36 |             .attr("width", xScale.bandwidth())
37 |             .attr("height", d => yScale(yValue(d)));
38 |       }
39 |       
40 |       function type(d){
41 |         d.population = +d.population;
42 |         return d;
43 |       }
44 |       
45 |       d3.csv("data.csv", type, render);
46 |     </script>
47 |   </body>
48 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-10/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-10/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Adding Axes</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.country;
11 |       const yValue = d => d.population;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 88};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       
20 |       const xScale = d3.scaleBand()
21 |         .padding(0.2)
22 |         .range([0, innerWidth]);
23 |       const yScale = d3.scaleLinear()
24 |         .range([0, innerHeight]);
25 |       const xAxis = d3.axisBottom().scale(xScale);
26 |       const yAxis = d3.axisLeft().scale(yScale);
27 |       
28 |       const g = svg.append("g")
29 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
30 |       const xAxisG = g.append("g")
31 |           .attr("transform", `translate(0, ${innerHeight})`);
32 |       const yAxisG = g.append("g");
33 |       
34 |       function render(data){
35 |         xScale.domain(data.map(xValue));
36 |         yScale.domain([0, d3.max(data, yValue)]);
37 |         xAxisG.call(xAxis);
38 |         yAxisG.call(yAxis);
39 |         g.selectAll("rect").data(data)
40 |           .enter().append("rect")
41 |             .attr("x", d => xScale(xValue(d)))
42 |             .attr("y", d => innerHeight - yScale(yValue(d)))
43 |             .attr("width", xScale.bandwidth())
44 |             .attr("height", d => yScale(yValue(d)));
45 |       }
46 |       
47 |       function type(d){
48 |         d.population = +d.population;
49 |         return d;
50 |       }
51 |       
52 |       d3.csv("data.csv", type, render);
53 |     </script>
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-11/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-11/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Flipping the Y Axes</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <svg width="960" height="500"></svg>
 9 |     <script>
10 |       const xValue = d => d.country;
11 |       const yValue = d => d.population;
12 |       const margin = {top: 50, right: 30, bottom: 50, left: 88};
13 |       
14 |       const svg = d3.select("svg");
15 |       const width = +svg.attr("width");
16 |       const height = +svg.attr("height");
17 |       const innerWidth = width - margin.left - margin.right;
18 |       const innerHeight = height - margin.top - margin.bottom;
19 |       
20 |       const xScale = d3.scaleBand()
21 |         .padding(0.2)
22 |         .range([0, innerWidth]);
23 |       const yScale = d3.scaleLinear()
24 |         .range([innerHeight, 0]);
25 |       const xAxis = d3.axisBottom().scale(xScale);
26 |       const yAxis = d3.axisLeft().scale(yScale);
27 |       
28 |       const g = svg.append("g")
29 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
30 |       const xAxisG = g.append("g")
31 |           .attr("transform", `translate(0, ${innerHeight})`);
32 |       const yAxisG = g.append("g");
33 |       
34 |       function render(data){
35 |         xScale.domain(data.map(xValue));
36 |         yScale.domain([0, d3.max(data, yValue)]);
37 |         xAxisG.call(xAxis);
38 |         yAxisG.call(yAxis);
39 |         g.selectAll("rect").data(data)
40 |           .enter().append("rect")
41 |             .attr("x", d => xScale(xValue(d)))
42 |             .attr("y", d => yScale(yValue(d)))
43 |             .attr("width", xScale.bandwidth())
44 |             .attr("height", d => innerHeight - yScale(yValue(d)));
45 |       }
46 |       
47 |       function type(d){
48 |         d.population = +d.population;
49 |         return d;
50 |       }
51 |       
52 |       d3.csv("data.csv", type, render);
53 |     </script>
54 |   </body>
55 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-12/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-12/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Customizing Axes</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |     <style>
 7 |       .axis .tick line {
 8 |         stroke-width: 2px;
 9 |         stroke: #C0C0BB;
10 |       }
11 |       .axis .tick text {
12 |       	font-size: 30px;
13 |         fill: #8E8883;
14 |       }
15 |       .axis .domain {
16 |         display: none;
17 |       }
18 |       .axis__label {
19 |         text-anchor: middle;
20 |         font-size: 50px;
21 |         fill: #635F5D;
22 |       }
23 |     </style>
24 |   </head>
25 |   <body>
26 |     <svg width="960" height="500"></svg>
27 |     <script>
28 |       const xValue = d => d.country;
29 |       const yValue = d => d.population;
30 |       const margin = {top: 10, right: 30, bottom: 50, left: 210};
31 |       
32 |       const svg = d3.select("svg");
33 |       const width = +svg.attr("width");
34 |       const height = +svg.attr("height");
35 |       const innerWidth = width - margin.left - margin.right;
36 |       const innerHeight = height - margin.top - margin.bottom;
37 |       
38 |       const xScale = d3.scaleBand()
39 |         .padding(0.2)
40 |         .range([0, innerWidth]);
41 |       const yScale = d3.scaleLinear()
42 |         .range([innerHeight, 0]);
43 |       const xAxis = d3.axisBottom()
44 |         .tickSizeInner(0)
45 |         .tickPadding(10)
46 |         .scale(xScale);
47 |       const yAxis = d3.axisLeft()
48 |         .tickSizeInner(-innerWidth)
49 |         .scale(yScale);
50 |       
51 |       const g = svg.append("g")
52 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
53 |       const xAxisG = g.append("g")
54 |           .attr("class", "axis")
55 |           .attr("transform", `translate(0, ${innerHeight})`);
56 |       const yAxisG = g.append("g")
57 |           .attr("class", "axis");
58 |       
59 |       function render(data){
60 |         xScale.domain(data.map(xValue));
61 |         yScale.domain([0, d3.max(data, yValue)]);
62 |         xAxisG.call(xAxis);
63 |         yAxisG.call(yAxis);
64 |         g.selectAll("rect").data(data)
65 |           .enter().append("rect")
66 |             .attr("x", d => xScale(xValue(d)))
67 |             .attr("y", d => yScale(yValue(d)))
68 |             .attr("width", xScale.bandwidth())
69 |             .attr("height", d => innerHeight - yScale(yValue(d)));
70 |       }
71 |       
72 |       function type(d){
73 |         d.population = +d.population;
74 |         return d;
75 |       }
76 |       
77 |       d3.csv("data.csv", type, render);
78 |     </script>
79 |   </body>
80 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-13/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-13/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Custom Tick Format</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |     <style>
 7 |       .axis .tick line {
 8 |         stroke-width: 2px;
 9 |         stroke: #C0C0BB;
10 |       }
11 |       .axis .tick text {
12 |       	font-size: 30px;
13 |         fill: #8E8883;
14 |       }
15 |       .axis .domain {
16 |         display: none;
17 |       }
18 |       .axis__label {
19 |         text-anchor: middle;
20 |         font-size: 50px;
21 |         fill: #635F5D;
22 |       }
23 |     </style>
24 |   </head>
25 |   <body>
26 |     <svg width="960" height="500"></svg>
27 |     <script>
28 |       const xValue = d => d.country;
29 |       const yValue = d => d.population;
30 |       const margin = {top: 10, right: 30, bottom: 50, left: 100};
31 |       
32 |       const svg = d3.select("svg");
33 |       const width = +svg.attr("width");
34 |       const height = +svg.attr("height");
35 |       const innerWidth = width - margin.left - margin.right;
36 |       const innerHeight = height - margin.top - margin.bottom;
37 |       
38 |       const xScale = d3.scaleBand()
39 |         .padding(0.2)
40 |         .range([0, innerWidth]);
41 |       const yScale = d3.scaleLinear()
42 |         .range([innerHeight, 0]);
43 |       const xAxis = d3.axisBottom()
44 |         .tickSizeInner(0)
45 |         .tickPadding(10)
46 |         .scale(xScale);
47 |       const yAxis = d3.axisLeft()
48 |         .tickSizeInner(-innerWidth)
49 |         .tickFormat(d3.format(".2s"))
50 |         .scale(yScale);
51 |       
52 |       const g = svg.append("g")
53 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
54 |       const xAxisG = g.append("g")
55 |           .attr("class", "axis")
56 |           .attr("transform", `translate(0, ${innerHeight})`);
57 |       const yAxisG = g.append("g")
58 |           .attr("class", "axis");
59 |       
60 |       function render(data){
61 |         xScale.domain(data.map(xValue));
62 |         yScale.domain([0, d3.max(data, yValue)]);
63 |         xAxisG.call(xAxis);
64 |         yAxisG.call(yAxis);
65 |         g.selectAll("rect").data(data)
66 |           .enter().append("rect")
67 |             .attr("x", d => xScale(xValue(d)))
68 |             .attr("y", d => yScale(yValue(d)))
69 |             .attr("width", xScale.bandwidth())
70 |             .attr("height", d => innerHeight - yScale(yValue(d)));
71 |       }
72 |       
73 |       function type(d){
74 |         d.population = +d.population;
75 |         return d;
76 |       }
77 |       
78 |       d3.csv("data.csv", type, render);
79 |     </script>
80 |   </body>
81 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-14/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-14/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Finishing Touches</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |     <style>
 7 |       .axis .tick line {
 8 |         stroke-width: 2px;
 9 |         stroke: #C0C0BB;
10 |       }
11 |       .axis .tick text {
12 |       	font-size: 30px;
13 |         fill: #8E8883;
14 |       }
15 |       .axis .domain {
16 |         display: none;
17 |       }
18 |       .axis__label {
19 |         text-anchor: middle;
20 |         font-size: 50px;
21 |         fill: #635F5D;
22 |       }
23 |       .bar {
24 |         fill: #397cd5;
25 |       }
26 |     </style>
27 |   </head>
28 |   <body>
29 |     <svg width="960" height="500"></svg>
30 |     <script>
31 |       const xValue = d => d.country;
32 |       const yValue = d => d.population;
33 |       const margin = {top: 30, right: 30, bottom: 50, left: 100};
34 |       
35 |       const svg = d3.select("svg");
36 |       const width = +svg.attr("width");
37 |       const height = +svg.attr("height");
38 |       const innerWidth = width - margin.left - margin.right;
39 |       const innerHeight = height - margin.top - margin.bottom;
40 |       
41 |       const xScale = d3.scaleBand()
42 |         .paddingInner(0.4)
43 |         .paddingOuter(0.15)
44 |         .range([0, innerWidth]);
45 |       const yScale = d3.scaleLinear()
46 |         .range([innerHeight, 0]);
47 |       const xAxis = d3.axisBottom()
48 |         .tickSizeInner(0)
49 |         .tickPadding(10)
50 |         .scale(xScale);
51 |       const formatRaw = d3.format(".2s");
52 |       const format = (d) => formatRaw(d).replace("G", "B");
53 |       const yAxis = d3.axisLeft()
54 |         .tickSizeInner(-innerWidth)
55 |         .tickFormat(format)
56 |         .ticks(5)
57 |         .scale(yScale);
58 |       
59 |       const g = svg.append("g")
60 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
61 |       const xAxisG = g.append("g")
62 |           .attr("class", "axis")
63 |           .attr("transform", `translate(0, ${innerHeight})`);
64 |       const yAxisG = g.append("g")
65 |           .attr("class", "axis");
66 |       
67 |       function render(data){
68 |         xScale.domain(data.map(xValue));
69 |         yScale.domain([0, d3.max(data, yValue)]).nice();
70 |         xAxisG.call(xAxis);
71 |         yAxisG.call(yAxis);
72 |         g.selectAll("rect").data(data)
73 |           .enter().append("rect")
74 |             .attr("class", "bar")
75 |             .attr("x", d => xScale(xValue(d)))
76 |             .attr("y", d => yScale(yValue(d)))
77 |             .attr("width", xScale.bandwidth())
78 |             .attr("height", d => innerHeight - yScale(yValue(d)));
79 |       }
80 |       
81 |       function type(d){
82 |         d.population = +d.population;
83 |         return d;
84 |       }
85 |       
86 |       d3.csv("data.csv", type, render);
87 |     </script>
88 |   </body>
89 | </html>


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-15/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-16/data.csv:
--------------------------------------------------------------------------------
1 | country,population
2 | China,1376048943
3 | India,1311050527
4 | USA,321773631
5 | Indonesia,257563815
6 | Brazil,207847528


--------------------------------------------------------------------------------
/archive/units/unit-03/module-01/example-16/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Solution</title>
 5 |     <script src="https://d3js.org/d3.v4.min.js"></script>
 6 |     <style>
 7 |       .axis .tick line {
 8 |         stroke-width: 2px;
 9 |         stroke: #C0C0BB;
10 |       }
11 |       .axis .tick text {
12 |       	font-size: 30px;
13 |         fill: #8E8883;
14 |       }
15 |       .axis .domain {
16 |         display: none;
17 |       }
18 |       .axis__label {
19 |         text-anchor: middle;
20 |         font-size: 50px;
21 |         fill: #635F5D;
22 |       }
23 |       .bar {
24 |         fill: #397cd5;
25 |       }
26 |     </style>
27 |   </head>
28 |   <body>
29 |     <svg width="960" height="500"></svg>
30 |     <script>
31 |       const xValue = d => d.population;
32 |       const yValue = d => d.country;
33 |       const margin = {top: 30, right: 50, bottom: 50, left: 150};
34 |       
35 |       const svg = d3.select("svg");
36 |       const width = +svg.attr("width");
37 |       const height = +svg.attr("height");
38 |       const innerWidth = width - margin.left - margin.right;
39 |       const innerHeight = height - margin.top - margin.bottom;
40 |       
41 |       const xScale = d3.scaleLinear()
42 |         .range([0, innerWidth]);
43 |       const yScale = d3.scaleBand()
44 |         .paddingInner(0.4)
45 |         .paddingOuter(0.15)
46 |         .range([0, innerHeight]);
47 |       const formatRaw = d3.format(".2s");
48 |       const format = (d) => formatRaw(d).replace("G", "B");
49 |       const xAxis = d3.axisBottom()
50 |         .tickSizeInner(-innerHeight)
51 |         .tickFormat(format)
52 |         .ticks(5)
53 |         .scale(xScale);
54 |       const yAxis = d3.axisLeft()
55 |         .tickSizeInner(0)
56 |         .tickPadding(10)
57 |         .scale(yScale);
58 |       
59 |       const g = svg.append("g")
60 |           .attr("transform", `translate(${margin.left}, ${margin.top})`);
61 |       const xAxisG = g.append("g")
62 |           .attr("class", "axis")
63 |           .attr("transform", `translate(0, ${innerHeight})`);
64 |       const yAxisG = g.append("g")
65 |           .attr("class", "axis");
66 |       
67 |       function render(data){
68 |         xScale.domain([0, d3.max(data, xValue)]).nice();
69 |         yScale.domain(data.map(yValue));
70 |         
71 |         xAxisG.call(xAxis);
72 |         yAxisG.call(yAxis);
73 |         g.selectAll("rect").data(data)
74 |           .enter().append("rect")
75 |             .attr("class", "bar")
76 |             .attr("x", 0)
77 |             .attr("y", d => yScale(yValue(d)))
78 |             .attr("width", d => xScale(xValue(d)))
79 |             .attr("height", yScale.bandwidth());
80 |       }
81 |       
82 |       function type(d){
83 |         d.population = +d.population;
84 |         return d;
85 |       }
86 |       
87 |       d3.csv("data.csv", type, render);
88 |     </script>
89 |   </body>
90 | </html>


--------------------------------------------------------------------------------
/data/README.md:
--------------------------------------------------------------------------------
1 | * `iris.csv` is derived from [UCI Machine Learning Repository: Iris Data Set](https://archive.ics.uci.edu/ml/datasets/Iris), this small dataset from 1936 is often used for testing out machine learning algorithms and visualizations. Each row of the table represents an iris flower, including its species and dimensions of its botanical parts, sepal and petal, in centimeters.
2 | * `cars.csv` is derived from [UCI Machine Learning Repository: Auto MPG Data Set](https://archive.ics.uci.edu/ml/datasets/auto+mpg).
3 | * `africa.csv` is derived from the [United Nations World Population Prospects 2017](https://esa.un.org/unpd/wpp/Download/Standard/Population/), using the "medium" variant to predict into the future. The D3-based pre-processing script that generated this CSV file from the original two spreadsheet tables can be found under [UN-Population-Estimates](https://github.com/curran/d3-in-motion/tree/master/data/UN-Population-Estimates).
4 | 


--------------------------------------------------------------------------------
/data/UN-Population-Estimates/README.md:
--------------------------------------------------------------------------------
1 | This directory contains historical population estimates data derived from the [United Nations World Population Prospects 2017](https://esa.un.org/unpd/wpp/Download/Standard/Population/).
2 | 


--------------------------------------------------------------------------------
/data/UN-Population-Estimates/africa.csv:
--------------------------------------------------------------------------------
  1 | year,population
  2 | 1950,228670
  3 | 1951,233277
  4 | 1952,238113
  5 | 1953,243178
  6 | 1954,248471
  7 | 1955,253995
  8 | 1956,259750
  9 | 1957,265739
 10 | 1958,271965
 11 | 1959,278432
 12 | 1960,285142
 13 | 1961,292100
 14 | 1962,299309
 15 | 1963,306772
 16 | 1964,314491
 17 | 1965,322471
 18 | 1966,330720
 19 | 1967,339248
 20 | 1968,348050
 21 | 1969,357120
 22 | 1970,366459
 23 | 1971,376067
 24 | 1972,385965
 25 | 1973,396199
 26 | 1974,406828
 27 | 1975,417898
 28 | 1976,429425
 29 | 1977,441404
 30 | 1978,453835
 31 | 1979,466707
 32 | 1980,480012
 33 | 1981,493748
 34 | 1982,507910
 35 | 1983,522486
 36 | 1984,537454
 37 | 1985,552796
 38 | 1986,568506
 39 | 1987,584569
 40 | 1988,600957
 41 | 1989,617632
 42 | 1990,634567
 43 | 1991,651763
 44 | 1992,669221
 45 | 1993,686917
 46 | 1994,704821
 47 | 1995,722922
 48 | 1996,741221
 49 | 1997,759753
 50 | 1998,778592
 51 | 1999,797836
 52 | 2000,817566
 53 | 2001,837821
 54 | 2002,858623
 55 | 2003,880017
 56 | 2004,902049
 57 | 2005,924758
 58 | 2006,948156
 59 | 2007,972266
 60 | 2008,997145
 61 | 2009,1022859
 62 | 2010,1049446
 63 | 2011,1076934
 64 | 2012,1105285
 65 | 2013,1134398
 66 | 2014,1164130
 67 | 2015,1194370
 68 | 2016,1225081
 69 | 2017,1256268
 70 | 2018,1287921
 71 | 2019,1320039
 72 | 2020,1352622
 73 | 2021,1385655
 74 | 2022,1419122
 75 | 2023,1453034
 76 | 2024,1487406
 77 | 2025,1522250
 78 | 2026,1557563
 79 | 2027,1593338
 80 | 2028,1629586
 81 | 2029,1666317
 82 | 2030,1703538
 83 | 2031,1741244
 84 | 2032,1779425
 85 | 2033,1818072
 86 | 2034,1857170
 87 | 2035,1896704
 88 | 2036,1936661
 89 | 2037,1977027
 90 | 2038,2017774
 91 | 2039,2058875
 92 | 2040,2100302
 93 | 2041,2142034
 94 | 2042,2184053
 95 | 2043,2226332
 96 | 2044,2268843
 97 | 2045,2311561
 98 | 2046,2354464
 99 | 2047,2397532
100 | 2048,2440747
101 | 2049,2484094
102 | 2050,2527557
103 | 2051,2571117
104 | 2052,2614756
105 | 2053,2658451
106 | 2054,2702181
107 | 2055,2745926
108 | 2056,2789667
109 | 2057,2833388
110 | 2058,2877082
111 | 2059,2920739
112 | 2060,2964353
113 | 2061,3007907
114 | 2062,3051382
115 | 2063,3094761
116 | 2064,3138027
117 | 2065,3181161
118 | 2066,3224145
119 | 2067,3266962
120 | 2068,3309588
121 | 2069,3351999
122 | 2070,3394171
123 | 2071,3436086
124 | 2072,3477727
125 | 2073,3519072
126 | 2074,3560102
127 | 2075,3600798
128 | 2076,3641141
129 | 2077,3681117
130 | 2078,3720708
131 | 2079,3759901
132 | 2080,3798682
133 | 2081,3837035
134 | 2082,3874945
135 | 2083,3912399
136 | 2084,3949384
137 | 2085,3985887
138 | 2086,4021894
139 | 2087,4057394
140 | 2088,4092373
141 | 2089,4126818
142 | 2090,4160717
143 | 2091,4194057
144 | 2092,4226830
145 | 2093,4259027
146 | 2094,4290639
147 | 2095,4321658
148 | 2096,4352076
149 | 2097,4381886
150 | 2098,4411080
151 | 2099,4439650
152 | 2100,4467588
153 | 


--------------------------------------------------------------------------------
/data/UN-Population-Estimates/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "un-population-estimates",
 3 |   "version": "1.0.0",
 4 |   "description": "This directory contains historical population estimates data derived from the [United Nations World Population Prospects 2017](https://esa.un.org/unpd/wpp/Download/Standard/Population/).",
 5 |   "main": "processAfrica.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "d3": "^4.10.2"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/data/UN-Population-Estimates/processAfrica.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const d3 = require('d3');
 3 | const csv1In = fs.readFileSync('wpp2017.csv', 'utf8');
 4 | const csv2In = fs.readFileSync('wpp2017-medium-variant.csv', 'utf8');
 5 | const data1In = d3.csvParse(csv1In);
 6 | const data2In = d3.csvParse(csv2In);
 7 | const dataIn = data1In.map((d, i) => Object.assign(d, data2In[i]));
 8 | const name = d => d['Region, subregion, country or area *'];
 9 | const years = d3.range(1950,2100 + 1);
10 | const africa = dataIn.filter(d => name(d) === 'AFRICA')[0];
11 | const dataOut = years.map(year => ({
12 |   year,
13 |   population: +africa[year].replace(/ /g, '')
14 | }));
15 | const csvOut = d3.csvFormat(dataOut);
16 | fs.writeFileSync('africa.csv', csvOut);
17 | 


--------------------------------------------------------------------------------
/data/africa.csv:
--------------------------------------------------------------------------------
  1 | year,population
  2 | 1950,228670
  3 | 1951,233277
  4 | 1952,238113
  5 | 1953,243178
  6 | 1954,248471
  7 | 1955,253995
  8 | 1956,259750
  9 | 1957,265739
 10 | 1958,271965
 11 | 1959,278432
 12 | 1960,285142
 13 | 1961,292100
 14 | 1962,299309
 15 | 1963,306772
 16 | 1964,314491
 17 | 1965,322471
 18 | 1966,330720
 19 | 1967,339248
 20 | 1968,348050
 21 | 1969,357120
 22 | 1970,366459
 23 | 1971,376067
 24 | 1972,385965
 25 | 1973,396199
 26 | 1974,406828
 27 | 1975,417898
 28 | 1976,429425
 29 | 1977,441404
 30 | 1978,453835
 31 | 1979,466707
 32 | 1980,480012
 33 | 1981,493748
 34 | 1982,507910
 35 | 1983,522486
 36 | 1984,537454
 37 | 1985,552796
 38 | 1986,568506
 39 | 1987,584569
 40 | 1988,600957
 41 | 1989,617632
 42 | 1990,634567
 43 | 1991,651763
 44 | 1992,669221
 45 | 1993,686917
 46 | 1994,704821
 47 | 1995,722922
 48 | 1996,741221
 49 | 1997,759753
 50 | 1998,778592
 51 | 1999,797836
 52 | 2000,817566
 53 | 2001,837821
 54 | 2002,858623
 55 | 2003,880017
 56 | 2004,902049
 57 | 2005,924758
 58 | 2006,948156
 59 | 2007,972266
 60 | 2008,997145
 61 | 2009,1022859
 62 | 2010,1049446
 63 | 2011,1076934
 64 | 2012,1105285
 65 | 2013,1134398
 66 | 2014,1164130
 67 | 2015,1194370
 68 | 2016,1225081
 69 | 2017,1256268
 70 | 2018,1287921
 71 | 2019,1320039
 72 | 2020,1352622
 73 | 2021,1385655
 74 | 2022,1419122
 75 | 2023,1453034
 76 | 2024,1487406
 77 | 2025,1522250
 78 | 2026,1557563
 79 | 2027,1593338
 80 | 2028,1629586
 81 | 2029,1666317
 82 | 2030,1703538
 83 | 2031,1741244
 84 | 2032,1779425
 85 | 2033,1818072
 86 | 2034,1857170
 87 | 2035,1896704
 88 | 2036,1936661
 89 | 2037,1977027
 90 | 2038,2017774
 91 | 2039,2058875
 92 | 2040,2100302
 93 | 2041,2142034
 94 | 2042,2184053
 95 | 2043,2226332
 96 | 2044,2268843
 97 | 2045,2311561
 98 | 2046,2354464
 99 | 2047,2397532
100 | 2048,2440747
101 | 2049,2484094
102 | 2050,2527557
103 | 2051,2571117
104 | 2052,2614756
105 | 2053,2658451
106 | 2054,2702181
107 | 2055,2745926
108 | 2056,2789667
109 | 2057,2833388
110 | 2058,2877082
111 | 2059,2920739
112 | 2060,2964353
113 | 2061,3007907
114 | 2062,3051382
115 | 2063,3094761
116 | 2064,3138027
117 | 2065,3181161
118 | 2066,3224145
119 | 2067,3266962
120 | 2068,3309588
121 | 2069,3351999
122 | 2070,3394171
123 | 2071,3436086
124 | 2072,3477727
125 | 2073,3519072
126 | 2074,3560102
127 | 2075,3600798
128 | 2076,3641141
129 | 2077,3681117
130 | 2078,3720708
131 | 2079,3759901
132 | 2080,3798682
133 | 2081,3837035
134 | 2082,3874945
135 | 2083,3912399
136 | 2084,3949384
137 | 2085,3985887
138 | 2086,4021894
139 | 2087,4057394
140 | 2088,4092373
141 | 2089,4126818
142 | 2090,4160717
143 | 2091,4194057
144 | 2092,4226830
145 | 2093,4259027
146 | 2094,4290639
147 | 2095,4321658
148 | 2096,4352076
149 | 2097,4381886
150 | 2098,4411080
151 | 2099,4439650
152 | 2100,4467588
153 | 


--------------------------------------------------------------------------------
/images/Idempotent.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/curran/d3-in-motion/bcc652226bd1934ce161667487c582ddeaaa1e96/images/Idempotent.gif


--------------------------------------------------------------------------------
/images/ScaleChromatic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/curran/d3-in-motion/bcc652226bd1934ce161667487c582ddeaaa1e96/images/ScaleChromatic.png


--------------------------------------------------------------------------------
/images/SchemeCategory10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/curran/d3-in-motion/bcc652226bd1934ce161667487c582ddeaaa1e96/images/SchemeCategory10.png


--------------------------------------------------------------------------------
/images/U02-M01-CSV-Flow/.block:
--------------------------------------------------------------------------------
1 | license: mit


--------------------------------------------------------------------------------
/images/U02-M01-CSV-Flow/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <head>
 3 |   <meta charset="utf-8">
 4 |   <script src="https://d3js.org/d3.v4.min.js"></script>
 5 |   <style>
 6 |     body, div { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
 7 |   </style>
 8 | </head>
 9 | 
10 | <body>
11 |   <img src="diagram.svg">
12 |   <script>
13 |     let x = 0;
14 |     let mouseX = 0;
15 |     const div = d3
16 |       .select("body")
17 |         .on("mousemove", () => mouseX = d3.event.clientX)
18 |       .append("div")
19 |         .style("background-color", "white");
20 |     
21 |     d3.timer(() =>{
22 |       x += (mouseX - x) / 50;
23 |       div.style("left", x + "px");
24 |     });
25 | 
26 |   </script>
27 | </body>
28 | 


--------------------------------------------------------------------------------
/images/U02-M08-Scatter-Plot-No-Legend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/curran/d3-in-motion/bcc652226bd1934ce161667487c582ddeaaa1e96/images/U02-M08-Scatter-Plot-No-Legend.png


--------------------------------------------------------------------------------
/images/U02-M08-Scatter-Plot-With-Legend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/curran/d3-in-motion/bcc652226bd1934ce161667487c582ddeaaa1e96/images/U02-M08-Scatter-Plot-With-Legend.png


--------------------------------------------------------------------------------
/images/U02-M09-Area-Formula.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/curran/d3-in-motion/bcc652226bd1934ce161667487c582ddeaaa1e96/images/U02-M09-Area-Formula.png


--------------------------------------------------------------------------------
/images/U02-M09-Bubble-Sizing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/curran/d3-in-motion/bcc652226bd1934ce161667487c582ddeaaa1e96/images/U02-M09-Bubble-Sizing.png


--------------------------------------------------------------------------------
/images/U02-M09-Radius-Formula.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/curran/d3-in-motion/bcc652226bd1934ce161667487c582ddeaaa1e96/images/U02-M09-Radius-Formula.png


--------------------------------------------------------------------------------
/images/U02-M09-Scatter-Plot-With-SizeLegend.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/curran/d3-in-motion/bcc652226bd1934ce161667487c582ddeaaa1e96/images/U02-M09-Scatter-Plot-With-SizeLegend.png


--------------------------------------------------------------------------------