├── Layouts.pdf ├── visna.png ├── EDAV2Notes.pdf ├── LineCharts.pdf ├── ReadingFiles.pdf ├── Transitions.pdf ├── EDAV6Lect-Axes.pdf ├── Interactivity.pdf ├── cartogramfinal.png ├── EDAV6Lect-Scales.pdf ├── ObjectConstancy.pdf ├── UpdateEnterExit.pdf ├── .gitignore ├── Test2SampleSolutions.md ├── porosity.csv ├── docs ├── porosity.csv ├── EDAV3.html ├── D3template.html ├── read.md ├── HorizontalBarChart.md ├── HorizontalBarChart.html ├── EDAV2.html ├── SixBlueCircles.html ├── SixBlueCircles.md ├── DataBindwithKeys.md ├── DataBindwithKeys.html ├── ScaleBand.html ├── EDAV1.html ├── EventListener.md ├── EventListener.html ├── index.md ├── EDAV8_1_linegen.html ├── EDAV5_1.html ├── EDAV5_2.html ├── line.html ├── EDAV8_2_linechart.html ├── EDAV5_3.html ├── EDAV8_3_readfile.html ├── EDAV5_4_scaleBand.html ├── EDAV5_5_scaleLinear.html ├── MultipleTransitions.html ├── EDAV6_1_margins.html ├── EDAV4Sol.html ├── EDAV6_2_yaxis.html ├── CorrelationCoefficient.md ├── EDAV7_1_axes.html ├── EDAV7_2_transitions.html ├── EDAV7_3_obj_constancy.html ├── BestFittingLine.md ├── Boxplot.md └── Boxplot.html ├── D3.Rproj ├── EDAV3.html ├── D3template.html ├── EDAV5_Solutions.md ├── HorizontalBarChart.html ├── SixBlueCircles.html ├── EDAV2.html ├── DataBindwithKeys.html ├── ScaleBand.html ├── EDAV6Notes.md ├── EventListener.html ├── EDAV1.html ├── EDAV8_1_linegen.html ├── EDAV5_1.html ├── Tips4D3debugging.md ├── EDAV5_2.html ├── line.html ├── README.md ├── EDAV8_2_linechart.html ├── EDAV5_3.html ├── EDAV9Notes.md ├── EDAV8_3_readfile.html ├── EDAV5_4_scaleBand.html ├── EDAV5_5_scaleLinear.html ├── EDAV6_1_margins.html ├── EDAV4Sol.html ├── EDAV6_2_yaxis.html ├── EDAV7_1_axes.html ├── EDAV7_2_transitions.html ├── EDAV1Notes.md ├── EDAV7_3_obj_constancy.html ├── Test2SampleQuestions.md ├── EDAV3Notes.md ├── R └── EDAV3Notes.Rmd ├── EDAV7Notes.md ├── EDAV8Notes.md ├── EDAV4Notes.md ├── EDAV5Notes.md ├── ExerciseSolutions.md └── EDAV2Notes.md /Layouts.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtr13/D3/master/Layouts.pdf -------------------------------------------------------------------------------- /visna.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtr13/D3/master/visna.png -------------------------------------------------------------------------------- /EDAV2Notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtr13/D3/master/EDAV2Notes.pdf -------------------------------------------------------------------------------- /LineCharts.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtr13/D3/master/LineCharts.pdf -------------------------------------------------------------------------------- /ReadingFiles.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtr13/D3/master/ReadingFiles.pdf -------------------------------------------------------------------------------- /Transitions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtr13/D3/master/Transitions.pdf -------------------------------------------------------------------------------- /EDAV6Lect-Axes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtr13/D3/master/EDAV6Lect-Axes.pdf -------------------------------------------------------------------------------- /Interactivity.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtr13/D3/master/Interactivity.pdf -------------------------------------------------------------------------------- /cartogramfinal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtr13/D3/master/cartogramfinal.png -------------------------------------------------------------------------------- /EDAV6Lect-Scales.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtr13/D3/master/EDAV6Lect-Scales.pdf -------------------------------------------------------------------------------- /ObjectConstancy.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtr13/D3/master/ObjectConstancy.pdf -------------------------------------------------------------------------------- /UpdateEnterExit.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jtr13/D3/master/UpdateEnterExit.pdf -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .Rproj.user 2 | .Rhistory 3 | .RData 4 | .Ruserdata 5 | *copy* 6 | *Lect* 7 | Untitled.* 8 | -------------------------------------------------------------------------------- /Test2SampleSolutions.md: -------------------------------------------------------------------------------- 1 | 1. D 2 | 3 | 2. B 4 | 5 | 3. C 6 | 7 | 4. A 8 | 9 | 5. A 10 | 11 | 6. C 12 | 13 | 7. D 14 | 15 | 8. B 16 | 17 | 9. A 18 | 19 | 10. B 20 | -------------------------------------------------------------------------------- /porosity.csv: -------------------------------------------------------------------------------- 1 | x,y 2 | 99,28.8 3 | 101.1,27.9 4 | 102.7,27 5 | 103,25.2 6 | 105.4,22.8 7 | 107,21.5 8 | 108.7,20.9 9 | 110.8,19.6 10 | 112.1,17.1 11 | 112.4,18.9 12 | 113.6,16 13 | 113.8,16.7 14 | 115.1,13 15 | 115.4,13.6 16 | 120,10.8 -------------------------------------------------------------------------------- /docs/porosity.csv: -------------------------------------------------------------------------------- 1 | x,y 2 | 99,28.8 3 | 101.1,27.9 4 | 102.7,27 5 | 103,25.2 6 | 105.4,22.8 7 | 107,21.5 8 | 108.7,20.9 9 | 110.8,19.6 10 | 112.1,17.1 11 | 112.4,18.9 12 | 113.6,16 13 | 113.8,16.7 14 | 115.1,13 15 | 115.4,13.6 16 | 120,10.8 -------------------------------------------------------------------------------- /D3.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: knitr 13 | LaTeX: XeLaTeX 14 | 15 | AutoAppendNewline: Yes 16 | StripTrailingWhitespace: Yes 17 | -------------------------------------------------------------------------------- /EDAV3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV3 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /D3template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV3 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/EDAV3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV3 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/D3template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV3 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/read.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | EDAV5_3 5 | 6 | 7 | 8 | 9 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /docs/HorizontalBarChart.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bar Chart 5 | 6 | 7 | 8 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /EDAV5_Solutions.md: -------------------------------------------------------------------------------- 1 | EDAV 5 SOLUTIONS 2 | ============== 3 | 4 | ### Sample standard deviation 5 | 6 | ``` js 7 | var x = [3, 5, 7, 8, 9] 8 | ``` 9 | 10 | Deviations from mean: 11 | 12 | ``` js 13 | var dev = x.map(d => d - d3.mean(x)) 14 | ``` 15 | 16 | Squared deviations: 17 | 18 | ``` js 19 | var devsq = dev.map(d => Math.pow(d, 2)); 20 | ``` 21 | 22 | Sum of squared deviations: 23 | 24 | ``` js 25 | var sumdevsq = d3.sum(devsq); 26 | ``` 27 | 28 | Sample variance: 29 | 30 | ``` js 31 | var variance = sumdevsq/(x.length - 1); 32 | ``` 33 | 34 | Sample standard deviation: 35 | 36 | ``` js 37 | var sd = Math.sqrt(variance); 38 | ``` 39 | 40 | OR 41 | 42 | ``` js 43 | var sd = Math.sqrt(d3.sum(x.map(d => Math.pow(d - d3.mean(x), 2)))/(x.length-1)); 44 | ``` 45 | 46 | or 47 | ``` js 48 | d3.deviation(x); 49 | ``` 50 | 51 | :-) 52 | -------------------------------------------------------------------------------- /HorizontalBarChart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bar Chart 6 | 7 | 8 | 9 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /docs/HorizontalBarChart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bar Chart 6 | 7 | 8 | 9 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /docs/EDAV2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /SixBlueCircles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Six Blue Circles 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /docs/SixBlueCircles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Six Blue Circles 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /EDAV2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EDAV2 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /docs/SixBlueCircles.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Six Blue Circles 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Six Blue Circles (online version)

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /docs/DataBindwithKeys.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Data Bind with Keys 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /DataBindwithKeys.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Data Bind with Keys 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /docs/DataBindwithKeys.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Data Bind with Keys 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /ScaleBand.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | d3.scaleBand 6 | 7 | 8 | 9 | 10 | 11 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /docs/ScaleBand.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | d3.scaleBand 6 | 7 | 8 | 9 | 10 | 11 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /docs/EDAV1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV1 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 |

h1 header

18 |

h2 header

19 |

h3 header

20 |

paragraph

21 | 22 | 23 | 24 | 25 | 26 | (150, 200) 27 | 28 | 29 | 30 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /docs/EventListener.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Six Blue Circles 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /EDAV6Notes.md: -------------------------------------------------------------------------------- 1 | EDAV6 Notes 2 | ================ 3 | 4 | Scales 5 | ======= 6 | [EDAV6Lect-Scales.pdf](EDAV6Lect-Scales.pdf) 7 | 8 | Practice creating an ordinal scale (function) in the Console: 9 | 10 | ``` js 11 | var ordscale = d3.scaleBand() 12 | .domain([0, 1, 2, 3, 4]) 13 | .range([0, 100]) 14 | 15 | ordscale(1); 16 | 17 | ordscale(3); 18 | 19 | ordscale(2.5); 20 | 21 | ordscale(7); 22 | ``` 23 | 24 | Add inner padding and try again. 25 | 26 | See diagram here: https://github.com/d3/d3-scale#band-scales 27 | 28 | (Do not use `d3.scaleOrdinal()` for this purpose.) 29 | 30 | 31 | Ordinal scale for x-axis 32 | 33 | Simple example [ScaleBand.html](ScaleBand.html) 34 | 35 | [EDAV5_4_scaleBand.html](EDAV5_4_scaleBand.html) 36 | 37 | Linear scale for y-axis 38 | [EDAV5_5_scaleLinear.html](EDAV5_5_scaleLinear.html) 39 | 40 | Axes 41 | ======= 42 | [EDAV6Lect-Axes.pdf](EDAV6Lect-Axes.pdf) 43 | 44 | Margins [EDAV6_1_margins.html](EDAV6_1_margins.html) 45 | 46 | y-axis [EDAV6_2_yaxis.html](EDAV6_2_yaxis.html) 47 | 48 | Practice 49 | ======= 50 | Add an x-axis to the previous file. 51 | -------------------------------------------------------------------------------- /EventListener.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Event Listener 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /EDAV1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EDAV1 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 |

h1 header

19 |

h2 header

20 |

h3 header

21 |

paragraph

22 | 23 | 24 | 25 | 26 | 27 | (150, 200) 28 | 29 | 30 | 31 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /docs/EventListener.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Event Listener 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | [BestFittingLine.html](BestFittingLine.html) 2 | 3 | [Boxplot.html](Boxplot.md) 4 | 5 | [CorrelationCoefficient.html](CorrelationCoefficient.md) 6 | 7 | [DataBindwithKeys.html](DataBindwithKeys.md) 8 | 9 | [EDAV5_1.html](EDAV5_1.html) 10 | 11 | [EDAV5_2.html](EDAV5_2.html) 12 | 13 | [EDAV5_3.html](EDAV5_3.html) 14 | 15 | [EDAV5_4_scaleBand.html](EDAV5_4_scaleBand.html) 16 | 17 | [EDAV5_5_scaleLinear.html](EDAV5_5_scaleLinear.html) 18 | 19 | [EDAV6_1_margins.html](EDAV6_1_margins.html) 20 | 21 | [EDAV6_2_yaxis.html](EDAV6_2_yaxis.html) 22 | 23 | [EDAV7_1_axes.html](EDAV7_1_axes.html) 24 | 25 | [EDAV7_2_transition.html](EDAV7_2_transitions.html) 26 | 27 | [EDAV7_3_obj_constancy.html](EDAV7_3_obj_constancy.html) 28 | 29 | [EDAV8_1_linegen.html](EDAV8_1_linegen.html) 30 | 31 | [EDAV8_2_linechart.html](EDAV8_2_linechart.html) 32 | 33 | [EDAV8_3_readfile.html](EDAV8_3_readfile.html) 34 | 35 | [EventListener.html](EventListener.md) 36 | 37 | [HorizontalBarChart.html](HorizontalBarChart.md) 38 | 39 | [MultipleTransitions.html](MultipleTransitions.html) 40 | 41 | [SixBlueCircles.html](SixBlueCircles.md) 42 | 43 | [read.html](read.md) 44 | -------------------------------------------------------------------------------- /EDAV8_1_linegen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Line generator 6 | 7 | 14 | 15 | 16 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /docs/EDAV8_1_linegen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Line generator 6 | 7 | 14 | 15 | 16 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /EDAV5_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV5_1 6 | 7 | 8 | 9 | 10 | 11 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /docs/EDAV5_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV5_1 6 | 7 | 8 | 9 | 10 | 11 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /Tips4D3debugging.md: -------------------------------------------------------------------------------- 1 | Debugging Tips 2 | ================ 3 | 4 | ### Submit a pull request to add to this file. 5 | 6 | SVG elements don't appear 7 | ======= 8 | Strategy: Click Elements in Javascript Console to see what happened 9 | 10 | ### Example 1: 11 | ``` js 12 | 27 | ``` 28 | 29 | #### Elements 30 | ``` html 31 | ... 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | ``` 40 | 41 | #### Diagnosis 42 | The circles appear but are in the wrong place. Why? Because `svg` was never selected. With `append()` items are added to the parent node of the selection, so you must specify what that is with a selection before selectAll. If you don't -- as in this case -- the default parent is the document element (``), which explains why the circles appear after the `` tag. Selections are explained in more detail here: ["How Selections Work"](https://bost.ocks.org/mike/selection/) 43 | 44 | #### Solution 45 | Change `d3.selectAll("circle")` to `d3.select("svg").selectAll("circle")` 46 | -------------------------------------------------------------------------------- /EDAV5_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV5_2 6 | 7 | 8 | 9 | 10 | 11 | 60 | 61 |

62 | 63 |

64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /docs/EDAV5_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV5_2 6 | 7 | 8 | 9 | 10 | 11 | 60 | 61 |

62 | 63 |

64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /line.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | line 6 | 7 | 8 | 9 | 10 | 11 |

Click anywhere on the blue rectangle.

12 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /docs/line.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | line 6 | 7 | 8 | 9 | 10 | 11 |

Click anywhere on the blue rectangle.

12 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Resources for learning D3 2 | 3 | **This is out-of-date and has been replaced by [D3 for R Users](https://jtr13.github.io/d3book/).** 4 | 5 | Please feel free to add detail to this README by making edits and submitting a pull request. In particular it would be helpful to include a) a summary of contents and b) references to pages in [Interactive Data Visualization for the Web, 2nd ed.](https://www.amazon.com/Interactive-Data-Visualization-Web-Introduction/dp/1491921285/) 6 | 7 | Link to IDVW source code (2nd edition): https://github.com/alignedleft/d3-book/releases 8 | 9 | [EDAV 1](EDAV1Notes.md) 10 | * Introduction: Selections, transitions, interactivity 11 | * `d3.select()`, `d3.mouse()` 12 | * `.on("click", function() {});` (or `"mouseover"`, `"mouseout"`) 13 | 14 | [EDAV 2](EDAV2Notes.md) 15 | * Crash course in HTML, CSS, SVG, JavaScript 16 | * `d3.append()`, `d3.remove()` 17 | 18 | [EDAV 3](EDAV3Notes.md) 19 | * Binding data (same # of DOM elements and data values) 20 | * Store selections in variables 21 | * Add JavaScript/D3 script to an html file 22 | * Create `svg` and elements from JavaScript script 23 | 24 | [EDAV 4](EDAV4Notes.md) 25 | * Update, enter, exit selections 26 | * General Update Pattern (enter/append/merge; exit/remove) 27 | 28 | [EDAV 5](EDAV5Notes.md) 29 | * JavaScript functions 30 | * General Update Pattern function 31 | * Add and remove buttons 32 | 33 | [EDAV 6](EDAV6Notes.md) 34 | * Scales `d3.scaleLinear()`, `d3.scaleOrdinal()` 35 | * Axes `d3.axisTop()` etc. 36 | * Margin convention 37 | 38 | [EDAV 7](EDAV7Notes.md) 39 | * Transitions: `delay()`, `on("end", function () {});` 40 | * Transitions: common problems 41 | * Keys 42 | * Object constancy 43 | 44 | [EDAV 8](EDAV8Notes.md) 45 | * Debugging tips 46 | * Line Charts `d3.line()` 47 | * Layouts 48 | * Reading Files 49 | 50 | -------------------------------------------------------------------------------- /EDAV8_2_linechart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 | 17 | 18 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /docs/EDAV8_2_linechart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 | 17 | 18 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /EDAV5_3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV5_3 6 | 7 | 8 | 9 | 10 | 11 | 57 | 58 | 59 | 60 |

Add an element.

61 | 62 |

Remove a element.

63 | 64 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /docs/EDAV5_3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV5_3 6 | 7 | 8 | 9 | 10 | 11 | 57 | 58 | 59 | 60 |

Add an element.

61 | 62 |

Remove a element.

63 | 64 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /EDAV9Notes.md: -------------------------------------------------------------------------------- 1 | EDAV9 Notes 2 | ================ 3 | 4 | ## Reading 5 | 6 | Add x-a 7 | [EDAV7_1_axes.html](EDAV7_1_axes.html) 8 | 9 | ## Interactivity 10 | 11 | [Interactivity.pdf](Interactivity.pdf) 12 | 13 | ## Transitions 14 | 15 | [Transitions.pdf](Transitions.pdf) 16 | 17 | ### First attempt 18 | 19 | [EDAV7_2_transitions.html](EDAV7_2_transitions.html) 20 | 21 | **Of note:** 22 | 23 | * Rather than smoothly transitioning off to the left, all bars are resized when "Remove bar (left)" is clicked 24 | 25 | * When "Remove bar (right) is clicked, the bar on the right immediately disappears, and then the remaining bars transition to their new places to the right. 26 | 27 | ## Object constancy 28 | 29 | [ObjectConstancy.pdf](ObjectConstancy.pdf) 30 | 31 | [EDAV7_3_obj_constancy.html](EDAV7_3_obj_constancy.html) 32 | 33 | **Of note:** 34 | 35 | * Bars now smoothly transition off to the left and right 36 | 37 | ### Practice joining data by key 38 | 39 | Download and open [DataBindwithKeys.html](DataBindwithKeys.html) 40 | 41 | (or open [this online version](https://jtr13.github.io/D3/DataBindwithKeys.html)) in a new tab. 42 | 43 | 44 | Try the following: 45 | 46 | 1. 47 | 48 | ``` js 49 | var svg = d3.select("svg"); 50 | 51 | var dataset = [{key: 12, x: 100, y: 200}, 52 | {key: 16, x: 250, y: 300}]; 53 | 54 | svg.selectAll("text") 55 | .data(dataset, d => d.key) 56 | .exit() 57 | .remove(); 58 | ``` 59 | 60 | Then: 61 | 62 | ``` js 63 | svg.selectAll("text") 64 | .attr("x", d => d.x) 65 | .attr("y", d => d.y); 66 | ``` 67 | 68 | 2. 69 | 70 | (Refresh) 71 | 72 | ``` js 73 | var dataset = [{key: 23, x: 300, y: 150}, 74 | {key: 5, x: 450, y: 270}]; 75 | 76 | var databind = svg.selectAll("text") 77 | .data(dataset, d => d.key) 78 | 79 | databind.exit().remove(); 80 | ``` 81 | 82 | Then: 83 | ``` js 84 | databind.enter().append("text") 85 | .attr("x", d => d.x) 86 | .attr("y", d => d.y) 87 | .text(d => `key: ${d.key}`); 88 | ``` 89 | 90 | 3. Experiment with other data binds. 91 | 92 | -------------------------------------------------------------------------------- /EDAV8_3_readfile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV8_3_readfile 6 | 7 | 8 | 9 | 10 | 11 | 12 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /docs/EDAV8_3_readfile.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV8_3_readfile 6 | 7 | 8 | 9 | 10 | 11 | 12 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /EDAV5_4_scaleBand.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV5_4 6 | 7 | 8 | 9 | 10 | 11 |

Add xScale

12 | 13 | 63 | 64 |

Add an element

65 | 66 |

Remove bar (left)

67 | 68 |

Remove bar (right)

69 | 70 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /docs/EDAV5_4_scaleBand.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV5_4 6 | 7 | 8 | 9 | 10 | 11 |

Add xScale

12 | 13 | 63 | 64 |

Add an element

65 | 66 |

Remove bar (left)

67 | 68 |

Remove bar (right)

69 | 70 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /EDAV5_5_scaleLinear.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV5_5 6 | 7 | 8 | 9 | 10 | 11 |

Add yScale

12 | 13 | 71 | 72 |

Add an element

73 | 74 |

Remove bar (left)

75 | 76 |

Remove bar (right)

77 | 78 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /docs/EDAV5_5_scaleLinear.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV5_5 6 | 7 | 8 | 9 | 10 | 11 |

Add yScale

12 | 13 | 71 | 72 |

Add an element

73 | 74 |

Remove bar (left)

75 | 76 |

Remove bar (right)

77 | 78 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /docs/MultipleTransitions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV5_3 6 | 7 | 8 | 9 | 10 | 11 | 73 | 74 | 75 |

Add an element.

76 | 77 |

Remove a element.

78 | 79 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /EDAV6_1_margins.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV6_1_margins 6 | 7 | 8 | 9 | 10 | 11 |

Add plot margins

12 | 13 | 83 | 84 |

Add an element

85 | 86 |

Remove bar (left)

87 | 88 |

Remove bar (right)

89 | 90 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /docs/EDAV6_1_margins.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV6_1_margins 6 | 7 | 8 | 9 | 10 | 11 |

Add plot margins

12 | 13 | 83 | 84 |

Add an element

85 | 86 |

Remove bar (left)

87 | 88 |

Remove bar (right)

89 | 90 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /EDAV4Sol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV 4 Solution 6 | 7 | 8 | 9 | 10 | 11 |

EDAV 4 Practice

12 | 13 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /docs/EDAV4Sol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV 4 Solution 6 | 7 | 8 | 9 | 10 | 11 |

EDAV 4 Practice

12 | 13 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /EDAV6_2_yaxis.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV6_2_yaxis 6 | 7 | 8 | 9 | 10 | 11 |

Add y-axis

12 | 13 | 96 | 97 |

Add an element

98 | 99 |

Remove bar (left)

100 | 101 |

Remove bar (right)

102 | 103 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /docs/EDAV6_2_yaxis.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV6_2_yaxis 6 | 7 | 8 | 9 | 10 | 11 |

Add y-axis

12 | 13 | 96 | 97 |

Add an element

98 | 99 |

Remove bar (left)

100 | 101 |

Remove bar (right)

102 | 103 | 125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /EDAV7_1_axes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV7_1_axes 6 | 7 | 8 | 9 | 10 | 11 |

Add x-axis

12 | 13 | 107 | 108 |

Add an element

109 | 110 |

Remove bar (left)

111 | 112 |

Remove bar (right)

113 | 114 | 136 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /docs/CorrelationCoefficient.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 |

Correlation Coefficient

9 | 10 |

The correlation coefficient (r) is a measure of the linear relationship 11 | between two variables x and y. To get a sense of the connection between the 12 | appearance of points -- (x,y) pairs -- in a scatterplot and the value of r, 13 | click anywhere on the graph to add points. To remove points, click the Remove 14 | points button and then mouseover points. The correlation coefficient is shown below.

15 | 16 |
17 | 18 |

19 |  Add points 20 |  Remove points 21 |

22 | 23 |

Two points are needed to calculate r.

24 | 25 | 139 | -------------------------------------------------------------------------------- /docs/EDAV7_1_axes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV7_1_axes 6 | 7 | 8 | 9 | 10 | 11 |

Add x-axis

12 | 13 | 107 | 108 |

Add an element

109 | 110 |

Remove bar (left)

111 | 112 |

Remove bar (right)

113 | 114 | 136 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /EDAV7_2_transitions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV7_2_transitions 6 | 7 | 8 | 9 | 10 | 11 |

Back to transitions

12 | 13 | 121 | 122 |

Add an element

123 | 124 |

Remove bar (left)

125 | 126 |

Remove bar (right)

127 | 128 | 150 | 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /docs/EDAV7_2_transitions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV7_2_transitions 6 | 7 | 8 | 9 | 10 | 11 |

Back to transitions

12 | 13 | 121 | 122 |

Add an element

123 | 124 |

Remove bar (left)

125 | 126 |

Remove bar (right)

127 | 128 | 150 | 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /EDAV1Notes.md: -------------------------------------------------------------------------------- 1 | EDAV1.html: Overview 2 | ================ 3 | 4 | ### Part A: Chrome Developer Tools, `d3.select()` 5 | 6 | 1. Open a *downloaded version* of EDAV1.html. You can download the file: 7 | 8 | 1. from the Courseworks Files folder 9 | 10 | 2. from this repo by clicking [here](https://raw.githubusercontent.com/jtr13/D3/master/EDAV1.html) and then File, Save Page As... 11 | 12 | 3. by downloading a ZIP of the whole repo by clicking [here](https://github.com/jtr13/D3/archive/master.zip) 13 | 14 | 2. Click View, Developer, Developer Tools, then the Elements tab. 15 | 16 | 3. Hover the mouse over various elements in the ` ... ` section. 17 | 18 | 4. Click the Console tab. Type `d3.select("circle").attr("cx", "200");` at the prompt (`>`), press enter and see what happens. 19 | 20 | 5. Now try some of the following and/or experiment on your own with changing attributes of the circle: 21 | 22 | ``` javascript 23 | d3.select("circle").attr("cx", "300"); 24 | 25 | d3.select("circle").attr("cx", "400"); 26 | 27 | d3.select("circle").attr("cx", "500"); 28 | 29 | d3.select("circle").attr("cx", "600"); 30 | 31 | d3.select("circle").attr("cx", "100"); 32 | 33 | d3.select("circle").attr("r", "30"); 34 | 35 | d3.select("circle").attr("r", "130"); 36 | 37 | d3.select("circle").attr("r", "3"); 38 | 39 | d3.select("circle").attr("r", "30"); 40 | 41 | d3.select("circle").attr("fill", "red"); 42 | 43 | d3.select("circle").attr("fill", "aliceblue"); 44 | 45 | d3.select("circle").attr("fill", "lightseagreen"); 46 | ``` 47 | 48 | 6. Refresh the page. What happened? 49 | 50 | 7. Go to Elements. Look at the value of the `y1` attribute of the SVG `` element. Go back to the Console and enter the following: 51 | 52 | ``` javascript 53 | d3.select("line").attr("y1", "10"); 54 | ``` 55 | 56 | 8. Go back to Elements and observe. What happened? 57 | 9. Stay in Elements and refresh the page. What happened to `y1`? 58 | 59 | 10. Now back to the Console to make style changes to the HTML elements: 60 | 61 | ``` javascript 62 | d3.select("h1").style("color", "purple"); 63 | 64 | d3.select("h2").style("font-size", "50px"); 65 | 66 | d3.select("h2").style("font-family", "Impact"); 67 | ``` 68 | 69 | ### Part B: Transitions (Ch. 9) 70 | 71 | 1. Try these: 72 | 73 | ``` javascript 74 | d3.select("circle").transition().duration(2000).attr("cx", "400"); 75 | 76 | d3.select("ellipse").transition().duration(2000).attr("transform", "translate (400, 400)"); 77 | 78 | d3.select("line").transition().duration(2000).attr("x1", "400"); 79 | 80 | d3.select("line").transition().duration(2000).attr("y1", "250"); 81 | 82 | d3.select("p").transition().duration(2000).style("font-size", "72px"); 83 | ``` 84 | 85 | 2. Experiment with more transitions. 86 | 87 | ### Part C: Interactivity (Ch. 10) 88 | 89 | 1. Set up a function to turn the fill color to yellow: 90 | 91 | ``` javascript 92 | function goyellow() {d3.select(this).attr("fill", "yellow")}; 93 | ``` 94 | 95 | 2. Add an event listener to the circle that will be trigger a call to `goyellow()` on a mouseover: 96 | 97 | ``` javascript 98 | d3.select("circle").on("mouseover", goyellow); 99 | ``` 100 | 101 | 3. Test it out. 102 | 103 | 4. Add the same event listener to the ellipse. Test it out. 104 | 105 | 5. Create a function `goblue()` that changes the fill color to blue. 106 | 107 | 6. Add event listeners to the circle and ellipse that will trigger a call to `goblue()` on a *mouseout*. Test out your code. 108 | 109 | 7. Try out a click event. (Note the use of an anonymous function.) 110 | 111 | ``` javascript 112 | d3.select("line").on("click", function() 113 | {d3.select(this).attr("stroke-width", "10");}); 114 | ``` 115 | 116 | 8. Try another click event. What's happening? 117 | 118 | ``` javascript 119 | d3.select("svg").on("click", function() 120 | {d3.select("text").text(`(${d3.mouse(this)})`)}); 121 | ``` 122 | 123 | ### Part D: Student Submissions 124 | 125 | Share your code! Submit a pull request to this file. 126 | 127 | (You don't have to know any git to do this. Just click the "edit this file" button on the top right -- the one that looks like a pencil. Add some code, add a note, and click Commit Changes. I will review your proposed changes before merging. Fear not, you can't mess anything up no matter what you do. It's a good chance to practice.) 128 | 129 | 130 | -------------------------------------------------------------------------------- /EDAV7_3_obj_constancy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV7_3_obj_constancy 6 | 7 | 8 | 9 | 10 | 11 |

Object constancy

12 | 13 |

Add an element

14 | 15 |

Remove bar (left)

16 | 17 |

Remove bar (right)

18 | 19 | 156 | 157 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /docs/EDAV7_3_obj_constancy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EDAV7_3_obj_constancy 6 | 7 | 8 | 9 | 10 | 11 |

Object constancy

12 | 13 |

Add an element

14 | 15 |

Remove bar (left)

16 | 17 |

Remove bar (right)

18 | 19 | 156 | 157 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /Test2SampleQuestions.md: -------------------------------------------------------------------------------- 1 | GR5702 Test 2 Sample Questions 2 | ================ 3 | 4 | NOTES: 5 | 6 | * The actual test will contain 25 multiple questions. 7 | 8 | * It is not cumulative. 9 | 10 | * The style of the coding questions will be similar to these questions. That is, the focus will be on understanding concepts and being able to read D3 code, rather than syntax. 11 | 12 | 13 | 14 | 15 | ### Questions 16 | 17 | 1) The data frame `schooldata` contains 349 rows of data (1 row per school) and 6 columns: `DBN`, `School Name`, `Number of Test Takers`, `Reading`, `Math`, and `Writing`. A graph of missing values was produced as follows: 18 | 19 | `> extracat::visna(schooldata)` 20 | 21 | ![](visna.png) 22 | 23 | Based on the graph, which of the following is a true statement? 24 | 25 | *a*) There is no missing data. 26 | 27 | *b*) All rows are missing data for `Number of Test Takers`, `Reading`, `Math`, and `Writing`. 28 | 29 | *c*) Each of the columns, `Number of Test Takers`, `Reading`, `Math`, and `Writing`, is missing the same number of data values, but we cannot tell if the missing data is in the same rows or different rows. 30 | 31 | *d*) About 80% of the rows are not missing any data, and about 20% are missing all of the following: `Number of Test Takers`, `Reading`, `Math`, and `Writing`. 32 | 33 |
34 | 35 | 2) In the cartogram below, land area is adjusted to be proportional to \_\_\_\_\_\_\_\_\_. 36 | 37 | ![](cartogramfinal.png) 38 |
39 | 40 | *a*) ratio of Democratic to Republican voters 41 | 42 | *b*) number of voters 43 | 44 | *c*) population density 45 | 46 | *d*) share of Democratic voters 47 | 48 |
49 | 50 | *Note: unless specified otherwise, assume that JavaScript code chunks are run as scripts (not line by line in the console).* 51 | 52 |
53 | 54 | 55 | 3) D3 selection methods, `d3.select()` and `d3.selectAll()`, can be used: 56 | 57 |
58 | 59 | **I**. to select SVG graphical elements 60 | 61 | **II**. to select HTML nodes 62 | 63 |
64 | 65 | *a*) I only 66 | 67 | *b*) II only 68 | 69 | *c*) I & II 70 | 71 | *d*) neither I nor II 72 | 73 |
74 | 75 | 4) Given: 76 | 77 | **DOM SVG** 78 | 79 | ``` svg 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | ``` 88 | 89 | Which of the following represents the *enter selection* returned by: 90 | 91 | `> d3.select("g").selectAll("circle").data([10, 23, 42, 15, 18]).enter();` 92 | 93 | *a*) `[empty × 3, q, q]` 94 | 95 | *b*) `[empty × 4, q]` 96 | 97 | *c*) `[empty × 5]` 98 | 99 | *d*) `[q, q, q, q, q]` 100 | 101 |
102 | 103 | 5) Given the same DOM SVG as in the previous question, `d3.select("circle").remove()` will remove the circle with which `cx` value? 104 | 105 | *a*) 50 106 | 107 | *b*) 100 108 | 109 | *c*) 200 110 | 111 | *d*) 250 112 | 113 |
114 | 115 | 6) Given: 116 | 117 | **DOM SVG** 118 | 119 | ``` svg 120 | hello 121 | ``` 122 | 123 | **JavaScript** 124 | 125 | ``` js 126 | d3.select("svg").on("click", function() 127 | {d3.select("text").text(`(${d3.mouse(this)})`)}); 128 | ``` 129 | 130 | What will be the value of the text element after clicking on the SVG? 131 | 132 | *a*) `this` 133 | 134 | *b*) `hello` 135 | 136 | *c*) `(`*x, y*`)` *(where x & y are the coordinates of the mouse click position on the SVG)* 137 | 138 | *d*) `(250, 200)` 139 | 140 |
141 | 142 | 7) Fill in the blanks to make a true statement. 143 | 144 | When passed a \_\_\_\_\_\_\_\_, the D3 axis component `d3.axisTop()` \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_. 145 | 146 | *a*) selection / creates SVG axis elements. 147 | 148 | *b*) selection / constructs an axis generator. 149 | 150 | *c*) scale / creates SVG axis elements. 151 | 152 | *d*) scale / constructs an axis generator. 153 | 154 |
155 | 156 | 8) Given: 157 | 158 | **JavaScript** 159 | 160 | ``` js 161 | xScale = d3.scaleBand() 162 | .domain(["yes", "no", "maybe"]) 163 | .range([0, 300]); 164 | ``` 165 | 166 | What will be returned if 167 | 168 | `> xScale("no")` 169 | 170 | is executed in the console? 171 | 172 | *a*) `0` 173 | 174 | *b*) `100` 175 | 176 | *c*) `200` 177 | 178 | *d*) `300` 179 | 180 |
181 | 182 | 9) In D3, the default coordinates for an axis appended to an SVG of width 500 and height 400 are: 183 | 184 | *a*) `(0, 0)` 185 | 186 | *b*) `(0, 400)` 187 | 188 | *c*) `(500, 400)` 189 | 190 | *d*) `(500, 0)` 191 | 192 |
193 | 194 | 10) Given: 195 | 196 | **DOM SVG** 197 | 198 | ``` svg 199 | 200 | ``` 201 | 202 | Which of the following will **not** add an SVG circle to the DOM? 203 | 204 | *a*) `d3.select("svg").append("circle");` 205 | 206 | *b*) `d3.select("svg").selectAll("circle").data([7]).enter().append("circle");` 207 | 208 | *c*) `d3.select("svg").selectAll("circle").data([7, 4]).enter().append("circle");` 209 | 210 | *d*) `d3.select("svg").append("g").append("circle");` 211 | -------------------------------------------------------------------------------- /EDAV3Notes.md: -------------------------------------------------------------------------------- 1 | EDAV3 Notes 2 | ================ 3 | 4 | 5 | 6 | ## Add elements with `.append()` 7 | 8 | 9 | 10 | ``` js 11 | > d3.select("body").append("svg").attr("width", "500") 12 | .attr("height", "400"); 13 | 14 | > d3.select("svg").append("rect").attr("x", "0").attr("y", "0") 15 | .attr("width", "500").attr("height", "400").attr("fill", "lightblue"); 16 | 17 | > d3.select("svg").append("circle").attr("cx", "200") 18 | .attr("cy", "100").attr("r", "25").attr("fill", "orange"); 19 | 20 | > d3.select("svg").append("circle").attr("cx", "300") 21 | .attr("cy", "150").attr("r", "25").attr("fill", "red"); 22 | ``` 23 | 24 | ## Binding data… *finally\!* (Console) 25 | 26 | Open your local copy of `SixBlueCircles.html` in Chrome, or use the 27 | [online version](https://jtr13.github.io/D3/SixBlueCircles.html) (right 28 | click to open in a new tab). 29 | 30 | Bind 31 | data: 32 | 33 | ``` js 34 | > d3.select("svg").selectAll("circle").data([90, 230, 140, 75, 180, 25]); 35 | ``` 36 | 37 | Check data binding: 38 | 39 | ``` js 40 | > d3.select("svg").selectAll("circle").data(); 41 | ``` 42 | 43 | Set x-coordinate of each circle to data value using arrow function: 44 | 45 | ``` js 46 | > d3.select("svg").selectAll("circle").attr("cx", d => d); 47 | ``` 48 | 49 | Set x-coordinate of each circle to data value using traditional 50 | JavaScript 51 | function: 52 | 53 | ``` js 54 | > d3.select("svg").selectAll("circle").attr("cx", function(d) {return d;}); 55 | ``` 56 | 57 | ## Store selection in a variable 58 | 59 | Open `SixBlueCircles.html` in Chrome, or use the [online 60 | version](https://jtr13.github.io/D3/SixBlueCircles.html) (Right click to 61 | open in a new tab.) 62 | 63 | Store the `svg` selection: 64 | 65 | ``` js 66 | > var mysvg = d3.select("svg"); 67 | ``` 68 | 69 | ## 70 | 71 | Note: the JavaScript community is moving toward using `let` and `const` 72 | instead of `var`; we will stick with `var` as in *IDVW*. 73 | 74 | ## 75 | 76 | Examine `mysvg`: 77 | 78 | ``` js 79 | > mysvg; 80 | ``` 81 | 82 | \-\> Look at the `_groups` and `_parents` objects. 83 | 84 | ## 85 | 86 | Use the selection to create a new 87 | element: 88 | 89 | ``` js 90 | > mysvg.append("circle").attr("cx", "250").attr("cy", "250").attr("r", "50") 91 | .attr("fill", "green"); 92 | ``` 93 | 94 | Store circle selection in a variable: 95 | 96 | ``` js 97 | > var dataset = [90, 230, 140, 75, 180, 25]; 98 | 99 | > var svg = d3.select("svg"); 100 | 101 | > var circ = svg.selectAll("circle"); 102 | 103 | > circ; 104 | ``` 105 | 106 | ## Bind data using stored selections 107 | 108 | ``` js 109 | > circ.data(); // nothing there 110 | ``` 111 | 112 | You should get: `(6) [undefined, undefined, undefined, undefined, 113 | undefined, undefined]` since we have not bound any data yet. 114 | 115 | ``` js 116 | > circ.data(dataset); // check Elements, nothing changed 117 | 118 | > circ.data(); // now we see data 119 | ``` 120 | 121 | ## Modify elements w/ stored selections, bound data 122 | 123 | ``` js 124 | > circ.attr("cx", function(d) {return d;}); 125 | 126 | > circ.attr("cx", function(d) {return d/2;}); 127 | 128 | > circ.attr("cx", function(d) {return d/4;}).attr("r", "10"); 129 | ``` 130 | 131 | ## Arrow functions 132 | 133 | Same as above, using arrow functions: 134 | 135 | ``` js 136 | > circ.attr("cx", d => d); 137 | 138 | > circ.attr("cx", d => d/2); 139 | 140 | > circ.attr("r", d => d/4).attr("r", "10"); 141 | ``` 142 | 143 | Note that if we bind a new set of data to the DOM elements, the original 144 | set will be overwritten: 145 | 146 | ``` js 147 | > var newdata = [145, 29, 53, 196, 200, 12]; 148 | 149 | > circ.data(newdata); 150 | 151 | > circ.transition() 152 | .duration(2000) 153 | .attr("cx", d => 2*d); 154 | ``` 155 | 156 | ## Practice 1 157 | 158 | With `SixBlueCircles.html` open in Chrome, practice binding data to the 159 | circles and modifying the circles based on the data as in the examples 160 | above. 161 | 162 | ## Adding D3 to `html` file 163 | 164 | ``` html 165 | 166 | 167 | 168 | 169 | Change the title! 170 | 171 | 172 | 173 | 174 | 177 | 178 | 179 | 180 | ``` 181 | 182 | ## Add svg 183 | 184 | ``` js 185 | 188 | ``` 189 | 190 | ## Add a circle 191 | 192 | ``` js 193 | 199 | ``` 200 | 201 | ## Practice 2 202 | 203 | Start with bare minimum `html` (w/ D3 link): 204 | [D3template.html](https://raw.githubusercontent.com/jtr13/D3/master/D3template.html). 205 | 206 | Open the file in your text editor. Then add code to the ` 8 | 9 |
10 | 11 |

Estimate the best fitting line

12 | 13 |

Drag the endpoints of the blue line to estimate the best fitting line through the data points. Then click the button to see how you did. Refresh the page to try again.

14 | 15 |    

 

16 | 17 |
18 | 19 | 191 | -------------------------------------------------------------------------------- /R/EDAV3Notes.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "EDAV3 Notes" 3 | output: slidy_presentation 4 | --- 5 | 6 | 7 | ```{r setup, include=FALSE} 8 | knitr::opts_chunk$set(echo = TRUE) 9 | LECTURE <- TRUE 10 | ``` 11 | 12 | ```{r, echo = FALSE, results = "asis"} 13 | cat("") 14 | ``` 15 | 16 | 17 | 18 | ## Add elements with `.append()` 19 | 20 | 21 | 22 | ```{js} 23 | > d3.select("body").append("svg").attr("width", "500") 24 | .attr("height", "400"); 25 | 26 | > d3.select("svg").append("rect").attr("x", "0").attr("y", "0") 27 | .attr("width", "500").attr("height", "400").attr("fill", "lightblue"); 28 | 29 | > d3.select("svg").append("circle").attr("cx", "200") 30 | .attr("cy", "100").attr("r", "25").attr("fill", "orange"); 31 | 32 | > d3.select("svg").append("circle").attr("cx", "300") 33 | .attr("cy", "150").attr("r", "25").attr("fill", "red"); 34 | 35 | ``` 36 | 37 | ## Binding data... _finally!_ (Console) 38 | 39 | 40 | Open your local copy of `SixBlueCircles.html` in Chrome, or use the [online version](https://jtr13.github.io/D3/SixBlueCircles.html) (right click to open in a new tab). 41 | 42 | 43 | Bind data: 44 | ```{js} 45 | > d3.select("svg").selectAll("circle").data([90, 230, 140, 75, 180, 25]); 46 | ``` 47 | 48 | Check data binding: 49 | 50 | ```{js} 51 | > d3.select("svg").selectAll("circle").data(); 52 | ``` 53 | 54 | Set x-coordinate of each circle to data value using arrow function: 55 | 56 | ```{js} 57 | > d3.select("svg").selectAll("circle").attr("cx", d => d); 58 | ``` 59 | 60 | Set x-coordinate of each circle to data value using traditional JavaScript function: 61 | 62 | ```{js} 63 | > d3.select("svg").selectAll("circle").attr("cx", function(d) {return d;}); 64 | ``` 65 | 66 | 67 | 68 | ## Store selection in a variable 69 | 70 | Open `SixBlueCircles.html` in Chrome, or use the [online version](https://jtr13.github.io/D3/SixBlueCircles.html) (Right click to open in a new tab.) 71 | 72 | Store the `svg` selection: 73 | 74 | ```{js} 75 | > var mysvg = d3.select("svg"); 76 | ``` 77 | 78 | Note: the JavaScript community is moving toward using `let` and `const` instead of `var`; we will stick with `var` as in *IDVW*. 79 | 80 | ## 81 | 82 | Examine `mysvg`: 83 | 84 | ```{js} 85 | > mysvg; 86 | ``` 87 | 88 | -> Look at the `_groups` and `_parents` objects. 89 | 90 | ## 91 | 92 | Use the selection to create a new element: 93 | 94 | ```{js} 95 | > mysvg.append("circle").attr("cx", "250").attr("cy", "250").attr("r", "50") 96 | .attr("fill", "green"); 97 | ``` 98 | 99 | Store circle selection in a variable: 100 | 101 | ```{js} 102 | > var dataset = [90, 230, 140, 75, 180, 25]; 103 | 104 | > var svg = d3.select("svg"); 105 | 106 | > var circ = svg.selectAll("circle"); 107 | 108 | > circ; 109 | ``` 110 | 111 | ## Bind data using stored selections 112 | 113 | ```{js} 114 | > circ.data(); // nothing there 115 | ``` 116 | 117 | You should get: 118 | `(6) [undefined, undefined, undefined, undefined, undefined, undefined]` since we have not bound any data yet. 119 | 120 | ```{js} 121 | > circ.data(dataset); // check Elements, nothing changed 122 | 123 | > circ.data(); // now we see data 124 | ``` 125 | 126 | ## Modify elements w/ stored selections, bound data 127 | 128 | ```{js} 129 | > circ.attr("cx", function(d) {return d;}); 130 | 131 | > circ.attr("cx", function(d) {return d/2;}); 132 | 133 | > circ.attr("cx", function(d) {return d/4;}).attr("r", "10"); 134 | ``` 135 | 136 | ## Arrow functions 137 | 138 | Same as above, using arrow functions: 139 | 140 | ```{js} 141 | > circ.attr("cx", d => d); 142 | 143 | > circ.attr("cx", d => d/2); 144 | 145 | > circ.attr("r", d => d/4).attr("r", "10"); 146 | ``` 147 | 148 | 149 | Note that if we bind a new set of data to the DOM elements, the original set will be overwritten: 150 | 151 | ```{js} 152 | > var newdata = [145, 29, 53, 196, 200, 12]; 153 | 154 | > circ.data(newdata); 155 | 156 | > circ.transition() 157 | .duration(2000) 158 | .attr("cx", d => 2*d); 159 | ``` 160 | 161 | 162 | ## Practice 1 163 | 164 | With `SixBlueCircles.html` open in Chrome, practice binding data to the circles and modifying the circles based on the data as in the examples above. 165 | 166 | 167 | ## Adding D3 to `html` file 168 | 169 | 170 | ```{html} 171 | 172 | 173 | 174 | 175 | Change the title! 176 | 177 | 178 | 179 | 180 | 183 | 184 | 185 | 186 | ``` 187 | 188 | ## Add svg 189 | 190 | ```{js} 191 | 194 | ``` 195 | 196 | 197 | ## Add a circle 198 | 199 | ```{js} 200 | 206 | ``` 207 | 208 | ## Practice 2 209 | 210 | Start with bare minimum `html` (w/ D3 link): [D3template.html](https://raw.githubusercontent.com/jtr13/D3/master/D3template.html). 211 | 212 | Open the file in your text editor. Then add code to the ` 32 | ``` 33 | 34 | ### Let's make them go back... not quite! 35 | 36 | ``` js 37 | 55 | ``` 56 | 57 | ### Sequencing transitions with delay 58 | 59 | ``` js 60 | 78 | ``` 79 | 80 | ## Sequencing transitions with `.on("end", function() {})` 81 | 82 | ``` js 83 | 105 | ``` 106 | 107 | ### More on transition do's and don'ts: 108 | 109 | [Transitions.pdf](Transitions.pdf) 110 | 111 | Multiple transitions [example online](https://jtr13.github.io/D3/MultipleTransitions.html) 112 | 113 | [code for download](docs/MultipleTransitions.html) 114 | 115 | 116 | ### First attempt 117 | 118 | [EDAV7_2_transitions.html](EDAV7_2_transitions.html) 119 | 120 | **Of note:** 121 | 122 | * Rather than smoothly transitioning off to the left, all bars are resized when "Remove bar (left)" is clicked 123 | 124 | * When "Remove bar (right) is clicked, the bar on the right immediately disappears, and then the remaining bars transition to their new places to the right. 125 | 126 | ## Object constancy 127 | 128 | [ObjectConstancy.pdf](ObjectConstancy.pdf) 129 | 130 | [EDAV7_3_obj_constancy.html](EDAV7_3_obj_constancy.html) 131 | 132 | **Of note:** 133 | 134 | * Bars now smoothly transition off to the left and right 135 | 136 | ### Practice joining data by key 137 | 138 | Download and open [DataBindwithKeys.html](DataBindwithKeys.html) 139 | 140 | (or open [this online version](https://jtr13.github.io/D3/DataBindwithKeys.html)) in a new tab. 141 | 142 | 143 | Try the following: 144 | 145 | 1. 146 | 147 | ``` js 148 | var svg = d3.select("svg"); 149 | 150 | var dataset = [{key: 12, x: 100, y: 200}, 151 | {key: 16, x: 250, y: 300}]; 152 | 153 | svg.selectAll("text") 154 | .data(dataset, d => d.key) 155 | .exit() 156 | .remove(); 157 | ``` 158 | 159 | Then: 160 | 161 | ``` js 162 | svg.selectAll("text") 163 | .attr("x", d => d.x) 164 | .attr("y", d => d.y); 165 | ``` 166 | 167 | 2. 168 | 169 | (Refresh) 170 | 171 | ``` js 172 | var dataset = [{key: 23, x: 300, y: 150}, 173 | {key: 5, x: 450, y: 270}]; 174 | 175 | var databind = svg.selectAll("text") 176 | .data(dataset, d => d.key) 177 | 178 | databind.exit().remove(); 179 | ``` 180 | 181 | Then: 182 | ``` js 183 | databind.enter().append("text") 184 | .attr("x", d => d.x) 185 | .attr("y", d => d.y) 186 | .text(d => `key: ${d.key}`); 187 | ``` 188 | 189 | 3. Experiment with other data binds. 190 | 191 | -------------------------------------------------------------------------------- /EDAV8Notes.md: -------------------------------------------------------------------------------- 1 | EDAV8 Notes 2 | ================ 3 | 4 | ## Debugging Tips 5 | 6 | * Make extensive use of Elements to see what's being added to the DOM. 7 | 8 | * Make extensive use of Console to check the values of variables and/or test code. 9 | 10 | * Use `console.log()` esp. in functions 11 | 12 | * Post Minimal Working Examples on Piazza. See: 13 | 14 | ["How to create a Minimal, Complete, and Verifiable example"](https://stackoverflow.com/help/mcve) 15 | 16 | ["So you’ve been asked to make a reprex"](https://www.jessemaegan.com/post/so-you-ve-been-asked-to-make-a-reprex/) 17 | 18 | * Use a text editor that helps you identify unmatched () {} []. 19 | 20 | [LineCharts.pdf](LineCharts.pdf) (or see below) 21 | 22 | [Layouts.pdf](Layouts.pdf) 23 | 24 | [ReadingFiles.pdf](ReadingFiles.pdf) 25 | 26 | ## Lines (2 points) 27 | 28 | ### SVG `` element 29 | 30 | ex. 31 | 32 | ``` html 33 | 34 | ``` 35 | 36 | ``` js 37 | var x1 = 0; 38 | var y1 = 80; 39 | var x2 = 100; 40 | var y2 = 20; 41 | 42 | d3.select("svg") 43 | .append("line") 44 | .attr("x1", x1) 45 | .attr("x2", x2) 46 | .attr("y1", y1) 47 | .attr("y2", y2); 48 | ``` 49 | 50 | Example: [line.html](line.html) [online version](https://bl.ocks.org/jtr13/cecefce61040db70c408c052ce6ceb9c/) 51 | 52 | 53 | 54 | ## Line Charts (More than 2 points) 55 | 56 | 57 | ### SVG `` element 58 | 59 | ex. 60 | ``` html 61 | 62 | 65 | 66 | 67 | ``` 68 | 69 | `d` attribute: 70 | 71 | M = move to 72 | 73 | L = line to 74 | 75 | More options: [https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) 76 | 77 | ### SVG editors 78 | 79 | ex. [SVG-edit](https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html) 80 | 81 | ### Save plots as SVG files in R 82 | 83 | Save plots as SVG files: 84 | 85 | ``` r 86 | > svg("xsquared.svg") 87 | > plot(1:10, (1:10)^2, axes=F) 88 | > dev.off() 89 | 90 | > library(svglite) 91 | > svglite("xsquared2.svg") 92 | > plot(1:10, (1:10)^2, axes=F) 93 | > dev.off() 94 | ``` 95 | 96 | Set graphics device to svg in code 97 | chunk options: 98 | 99 | ``` r 100 | ```{r, dev="svg"} 101 | 102 | 103 | ```{r, dev="svglite"} 104 | ``` 105 | 106 | Back to line charts 107 | ======= 108 | 109 | ### What we have: 110 | 111 | Day|High Temp 112 | ----|---- 113 | April 1|60 114 | April 2|43 115 | April 3|43 116 | April 4|56 117 | April 5|45 118 | April 6|62 119 | April 7|49 120 | 121 | ### What we need 122 | 123 | Something like this: 124 | 125 | ``` html 126 | 131 | ``` 132 | 133 | ### Step 1: Create a line generator 134 | 135 | Expects data in an array of 2-dimensional arrays, that is, an array of (x,y) pairs: 136 | 137 | ``` js 138 | > var dataset = [ [0, 60], [1, 43], [2, 43], [3, 56], [4, 45], [5, 62], [6, 49] ]; 139 | 140 | > var mylinegen = d3.line() 141 | ``` 142 | Test it in the Console: 143 | 144 | ``` js 145 | > mylinegen(dataset); 146 | ``` 147 | 148 | ### Let's add scales 149 | 150 | An ordinal scale for x: 151 | 152 | ``` js 153 | > var xScale = d3.scaleBand() 154 | .domain(d3.range(dataset.length)) 155 | .range([0, 500]) 156 | ``` 157 | 158 | A linear scale for y: 159 | 160 | ``` js 161 | > var yScale = d3.scaleLinear() 162 | .domain([d3.min(dataset, d => d[1]) - 20, 163 | d3.max(dataset, d => d[1]) + 20]) 164 | .range([400, 0]); 165 | ``` 166 | 167 | *Why `d[1]` instead of `d`? (See p. 122) 168 | 169 | ### Add accessor functions `.x()` and `.y()` to the line generator 170 | 171 | ``` js 172 | mylinegen 173 | .x(d => xScale(d[0])) 174 | .y(d => yScale(d[1])); 175 | ``` 176 | 177 | Test again: 178 | 179 | ``` js 180 | > mylinegen(dataset); 181 | ``` 182 | 183 | Now let's add a `` element with that `d` attribute: (this step is just for learning purposes...) 184 | 185 | ``` js 186 | > var mypath = mylinegen(dataset); 187 | 188 | > d3.select("svg").append("path").attr("d", mypath) 189 | .attr("fill", "none").attr("stroke", "red") 190 | .attr("stroke-width", "5"); 191 | ``` 192 | 193 | ### Step 2: Put the line generator to work 194 | 195 | Now let's do it the direct way: bind the *datum* and calculate the path in one step: 196 | 197 | ``` js 198 | > d3.select("svg").append("path") 199 | .datum(dataset) 200 | .attr("d", mylinegen) 201 | .attr("fill", "none") 202 | .attr("stroke", "teal") 203 | .attr("stroke-width", "5"); 204 | ``` 205 | 206 | Finally, we'll add a class and style definitions: 207 | 208 | ``` html 209 | 216 | ``` 217 | 218 | The `append("path")` line becomes: 219 | 220 | ``` js 221 | svg.append("path") 222 | .datum(dataset) 223 | .attr("d", mylinegen) 224 | .attr("class", "linestyle"); 225 | ``` 226 | 227 | Putting it all together, we have: [EDAV8_1_linegen.html](EDAV8_1_linegen.html) 228 | 229 | And another example with axes [EDAV8_2_linechart.html](EDAV8_2_linechart.html) 230 | 231 | (Also uses: `d3.timeParse()` and JavaScript [`Array.foreach()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) ) 232 | 233 | ## Additional Resources 234 | 235 | [Multiple Time Series in D3](https://medium.com/@ecb2198/multiple-time-series-in-d3-5562b981236c) by Eric Boxer (EDAV 2018) 236 | 237 | 238 | 239 | -------------------------------------------------------------------------------- /EDAV4Notes.md: -------------------------------------------------------------------------------- 1 | EDAV4 Notes 2 | ================ 3 | 4 | ### Update, Enter, and Exit Selections 5 | 6 | [UpdateEnterExit.pdf](UpdateEnterExit.pdf) 7 | 8 | 9 | ### More DOM elements than data values (Removing elements) 10 | 11 | Open `SixBlueCircles.html` in Chrome. 12 | 13 | Let's bind four data values to the six circles: 14 | 15 | ``` js 16 | var svg = d3.select("svg"); 17 | 18 | svg.selectAll("circle") 19 | .data([123, 52, 232, 90]); 20 | ``` 21 | 22 | Click the black triangle to view the `_enter`, `_exit`, and `_groups` fields. 23 | 24 | 25 | We can store the selection in a variable: 26 | 27 | ``` js 28 | var circ = svg.selectAll("circle") 29 | .data([123, 52, 232, 90]); 30 | ``` 31 | 32 | Let's look at the exit selection: 33 | 34 | ``` js 35 | circ.exit(); 36 | ``` 37 | 38 | Try this: 39 | ``` js 40 | circ.attr("fill", "red"); 41 | ``` 42 | 43 | What happened and why? 44 | 45 | Now try this: 46 | ``` js 47 | circ.exit().attr("fill", "purple"); 48 | ``` 49 | 50 | What happened and why? 51 | 52 | What do you think this will do? Try it. 53 | 54 | ``` js 55 | circ.exit().transition().duration(2000).remove(); 56 | ``` 57 | 58 | Create a new variable `circ2` and compare it to `circ`: 59 | ``` js 60 | var circ2 = d3.selectAll("circle"); 61 | 62 | circ.data(); 63 | 64 | circ2.data(); 65 | 66 | circ.exit(); 67 | 68 | circ2.exit(); 69 | ``` 70 | 71 | What's going on? 72 | 73 | 74 | ### More data values than DOM Elements (Adding elements) 75 | 76 | Let's bind new data to the circles: 77 | 78 | ``` js 79 | var circ = svg.selectAll("circle") 80 | .data([123, 52, 232, 90, 34, 12, 189, 110]); 81 | ``` 82 | 83 | And look at the enter selection: 84 | 85 | ``` js 86 | circ.enter(); 87 | ``` 88 | 89 | How many placeholders are in the enter selection? 90 | 91 | Let's add circles for each of these placeholders: 92 | 93 | ``` js 94 | circ.enter() 95 | .append("circle") 96 | .attr("cx", "100") 97 | .attr("cy", (d, i) => i * 50 + 25) 98 | .attr("r", "20") 99 | .attr("fill", "blue"); 100 | ``` 101 | 102 | Try this: 103 | ``` js 104 | circ.transition() 105 | .duration(3000) 106 | .attr("cx", "400"); 107 | ``` 108 | 109 | What do you need to do to act on *all* of the circles? 110 | 111 | ``` 112 | svg.selectAll("circle") 113 | .transition() 114 | .duration(2000) 115 | .attr("cy", (d, i) => (i * 50) + 25) 116 | .attr("cx", "200"); 117 | ``` 118 | 119 | ### Combining update and enter selections with `.merge()` 120 | 121 | Refresh the screen to get a clean version of [SixBlueCircles.html](https://raw.githubusercontent.com/jtr13/D3/master/SixBlueCircles.html), or use this [online version](https://jtr13.github.io/D3/SixBlueCircles.html). (Right click to open in a new tab.) 122 | 123 | ``` js 124 | var svg = d3.select("svg"); 125 | var circ = svg.selectAll("circle"); 126 | var allcirc = circ.data([123, 52, 232, 90, 34, 12, 189, 110]) 127 | .enter() // 2 placeholders 128 | .append("circle") // placeholders -> circles 129 | .attr("cx", "100") // acts on enter selection only 130 | .attr("cy", (d, i) => (i - 5) * 50) 131 | .attr("r", "20") 132 | .attr("fill", "red") 133 | .merge(circ) // combines enter and update selections 134 | 135 | allcirc.transition() // acts on all 8 circles 136 | .duration(3000) 137 | .attr("cx", "400") 138 | .attr("fill", "purple"); 139 | 140 | allcirc.transition() // acts on all 8 circles 141 | .duration(3000) 142 | .attr("cx", "50"); 143 | ``` 144 | 145 | ### Adding elements with data / enter / append sequence 146 | 147 | Refresh the screen to get a clean version of [SixBlueCircles.html](https://raw.githubusercontent.com/jtr13/D3/master/SixBlueCircles.html), or use this [online version](https://jtr13.github.io/D3/SixBlueCircles.html). (Right click to open in a new tab.) 148 | 149 | ``` js 150 | var svg = d3.select("svg"); 151 | 152 | var specialdata = [100, 250, 300]; 153 | 154 | var bars = svg.selectAll("rect") 155 | .data(specialdata) 156 | .enter() 157 | .append("rect") 158 | .attr("x", d => d) 159 | .attr("y", d => d) 160 | .attr("width", "50") 161 | .attr("height", "30") 162 | .attr("fill", "red"); 163 | ``` 164 | 165 | What's going on? 166 | 167 | Refresh the page, and try the following instead: 168 | 169 | 170 | ``` js 171 | var svg = d3.select("svg"); 172 | 173 | var specialdata = [100, 250, 300]; 174 | 175 | var bars = svg.append("g") 176 | .attr("id", "rects") 177 | .selectAll("rect") 178 | .data(specialdata) 179 | .enter() 180 | .append("rect") 181 | .attr("x", d => d) 182 | .attr("y", d => d) 183 | .attr("width", "50") 184 | .attr("height", "30") 185 | .attr("fill", "red"); 186 | ``` 187 | 188 | Compare: 189 | 190 | ``` js 191 | d3.select("svg") 192 | .select("g#rects") 193 | .selectAll("rect") 194 | .attr("fill", "purple"); 195 | ``` 196 | 197 | and 198 | 199 | ``` js 200 | d3.select("svg") 201 | .selectAll("rect") 202 | .attr("fill", "purple"); 203 | ``` 204 | 205 | ### Practice 1: Horizontal Bar Chart 206 | 207 | 1. Create a new html file (try to recreate the template without looking... or use [this one](https://raw.githubusercontent.com/jtr13/D3/master/D3template.html)). Add a script that adds an svg element and horizontal bars of the lengths (in pixels) specified in `bardata`. Create the bars with the data / enter / append sequence. 208 | 209 | `var bardata = [300, 100, 150, 225, 75, 275];` 210 | 211 | 212 | ### Practice 2: Merge 213 | 214 | Start with the bar chart you created in Practice 1. 215 | 216 | *Note: it's best to work in the Console for the following so you don't have to sequence the changes.* 217 | 218 | 1. Change the data to any six other values and update the lengths of the bars. 219 | 220 | 1. Bind a new dataset, `newbardata` to the bars, update the bar lengths, and remove any extra bars. 221 | 222 | `newbardata = [250, 125, 80, 100];` 223 | 224 | 1. Bind a new dataset, `reallynewbardata`, to the bars, then add additional bars so each data value has a bar. Make the outline (stroke) of the new bars a different color. 225 | 226 | `reallynewbardata = [300, 100, 250, 50, 200, 150, 325, 275];` 227 | 228 | 1. Use `.merge()` to combine the update and enter selections into one selection and then transition the height of all of the bars to half their current height. 229 | 230 | 1. Add text labels inside the bars at the right end with the length of the bar in pixels.

231 | 232 | Submit / view solutions here: [ExerciseSolutions.md](ExerciseSolutions.md) 233 | -------------------------------------------------------------------------------- /docs/Boxplot.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Boxplots 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 |

Create a boxplot

15 |

Click in the center of the blue strip to add points.

16 |  Add points 17 |  Remove points 18 |
19 | 20 |
21 |

How to Read a Boxplot

22 |

A boxplot visualizes the distribution of a dataset. 23 | Although we show only one boxplot here for explanatory purposes, boxplots are 24 | particularly useful for comparative purposes. They are not helpful for small datasets. 25 | Boxplot calculations are based on fourths: the data values are divided in four groups, 26 | each with approximately the same number of values. To see an example, add a bunch of 27 | points to the boxplot by clicking. The turquoise box in the middle shows the middle 28 | 50% of the data values, i.e. the middle two groups, divided by the median line in the 29 | middle. The area below the box down to the lowest marking represents the bottom fourth 30 | of the data, while the area above the box up to the highest marking represents the top 31 | fourth of the data. Outliers are points that are more than one and a half times the 32 | interquartile range above the upper whisker or below the lower whisker. If any exist, 33 | they are marked in red. 34 |

35 |

Data values:

36 |

Outliers:

37 |

Upper whisker:

38 |

Q3:

39 |

Median:

40 |

Q1:

41 |

Lower whisker:

42 |
43 | 44 | 45 | 244 | 245 | 246 | 247 | 248 | -------------------------------------------------------------------------------- /docs/Boxplot.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Boxplots 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |

Create a boxplot

19 |

Click in the center of the blue strip to add points.

20 |  Add points 21 |  Remove points 22 |
23 | 24 |
25 |

How to Read a Boxplot

26 |

A boxplot visualizes the distribution of a dataset. 27 | Although we show only one boxplot here for explanatory purposes, boxplots are 28 | particularly useful for comparative purposes. They are not helpful for small datasets. 29 | Boxplot calculations are based on fourths: the data values are divided in four groups, 30 | each with approximately the same number of values. To see an example, add a bunch of 31 | points to the boxplot by clicking. The turquoise box in the middle shows the middle 32 | 50% of the data values, i.e. the middle two groups, divided by the median line in the 33 | middle. The area below the box down to the lowest marking represents the bottom fourth 34 | of the data, while the area above the box up to the highest marking represents the top 35 | fourth of the data. Outliers are points that are more than one and a half times the 36 | interquartile range above the upper whisker or below the lower whisker. If any exist, 37 | they are marked in red. 38 |

39 |

Data values:

40 |

Outliers:

41 |

Upper whisker:

42 |

Q3:

43 |

Median:

44 |

Q1:

45 |

Lower whisker:

46 |
47 | 48 | 49 | 248 | 249 | 250 | 251 | 252 | -------------------------------------------------------------------------------- /EDAV5Notes.md: -------------------------------------------------------------------------------- 1 | EDAV5 Notes 2 | ================ 3 | 4 | ### Just Enough JavaScript 5 | 6 | Basics: *IDVW*, pp. 36-52 7 | 8 | objects, arrays, arrays of objects, functions (and other things) 9 | 10 | **Array of arrays** 11 | 12 | Open https://jtr13.github.io/D3/HorizontalBarChart.html in a new tab. 13 | 14 | ``` js 15 | var array_dataset = [[100, 200, 40], [300, 150, 20]]; 16 | 17 | d3.select("svg") 18 | .selectAll("circle") 19 | .data(array_dataset) 20 | .enter() 21 | .append("circle") 22 | .attr("cx", d => d[0]) 23 | .attr("cy", d => d[1]) 24 | .attr("r", d => d[2]) 25 | .attr("fill", "red"); 26 | ``` 27 | 28 | **Array of objects** 29 | 30 | (Refresh page) 31 | 32 | ``` js 33 | var object_dataset = [ { 34 | cx: 100, 35 | cy: 200, 36 | fill: `red` 37 | }, 38 | { 39 | cx: 300, 40 | cy: 100, 41 | fill: `blue` 42 | }]; 43 | 44 | d3.select("svg") 45 | .selectAll("circle") 46 | .data(object_dataset) 47 | .enter() 48 | .append("circle") 49 | .attr("cx", d => d.cx) 50 | .attr("cy", d => d.cy) 51 | .attr("r", "50") 52 | .attr("fill", d => d.fill); 53 | ``` 54 | 55 | **JavaScript Math methods / functions** 56 | 57 | Take *one data value*, return one value. 58 | 59 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math#Methods 60 | 61 | ``` js 62 | Math.sqrt(3); 63 | 64 | var x = [3, 5, 7]; 65 | 66 | Math.sqrt(x); // oops, it's not R 67 | 68 | Math; 69 | ``` 70 | 71 | **map()** to the rescue 72 | 73 | Use map to operate on each array element separately. 74 | 75 | Analogy: 76 | 77 | R list:`lapply()` :: JavaScript array:`.map()` 78 | 79 | (What is the tidyverse equivalent of `lapply()`? `map()`!!!!!!) 80 | 81 | Do something to every element of a simple array: 82 | 83 | ``` js 84 | x.map(Math.sqrt); 85 | 86 | x.map(d => d*3); 87 | 88 | x.map(function(d) {return d*3;}); 89 | 90 | [10, 20, 30, 40].map((d, i) => d*i); 91 | ``` 92 | 93 | My nested array language: 94 | 95 | [*element1, element2*] 96 | 97 | *element1* = [*item1, item2, item3*] 98 | 99 | *element2* = [*item1, item2, item3*] 100 | 101 | Do something to the first item of every element of a nested array: 102 | 103 | ``` js 104 | array_dataset.map(d => Math.sqrt(d[0])) 105 | ``` 106 | 107 | Sum up all items in each element of the array: 108 | 109 | ``` js 110 | array_dataset.map(d => d[0] + d[1] + d[2]); 111 | ``` 112 | 113 | Created a nested array out of a simple array: 114 | 115 | ``` js 116 | [10, 20, 30].map(d => [d, Math.pow(d, 2)]); 117 | ``` 118 | 119 | Create an array of objects out of a simple array (note the parentheses around the object): 120 | 121 | ``` js 122 | [10, 20, 30].map(d => ({n: d, nsq: Math.pow(d, 2)})); 123 | 124 | [10, 20, 30].map((d, i) => ({index: i, value: d})); 125 | ``` 126 | 127 | 128 | **d3 statistics functions** 129 | 130 | Take *arrays* --> return single values (like R!) 131 | 132 | ``` js 133 | var x = [12, 34, 1, 43, 90, 72]; 134 | 135 | d3.mean(x); 136 | 137 | d3.sum(x); 138 | 139 | d3.min(x); 140 | 141 | d3.max(x); 142 | ``` 143 | 144 | Take an array, return two values: 145 | 146 | ``` js 147 | d3.extent(x); \\ Think "range" 148 | ``` 149 | 150 | Take a single value, return an array: 151 | 152 | ``` js 153 | d3.range(5); \\ Think: count from 0 to n-1 154 | ``` 155 | 156 | 157 | https://github.com/d3/d3/blob/master/API.md#statistics 158 | 159 | 160 | **Combine d3 functions with .map** 161 | 162 | Helpful when dealing with arrays of arrays, or arrays of objects 163 | 164 | ``` js 165 | var dataset = [[100, 200, 40], [300, 150, 20]]; 166 | 167 | d3.sum(dataset.map(d => d[0])); 168 | 169 | dataset.map(d => d3.sum(d)); 170 | 171 | d3.range(5).map(d => [d - 1, d, d + 1]); 172 | ``` 173 | 174 | ### Practice 175 | 176 | Use the following to find the sample standard deviation of 3, 5, 7, 8 and 9. 177 | 178 | ``` js 179 | d3.sum() 180 | d3.mean() 181 | 182 | Math.sqrt() 183 | Math.pow() 184 | 185 | .map() 186 | ``` 187 | 188 | [Solution](EDAV5_Solutions.md) 189 | 190 | ### Functions 191 | 192 | Download and open [HorizontalBarChart.html](HorizontalBarChart.html) 193 | 194 | (or use [this online version](https://jtr13.github.io/D3/HorizontalBarChart.html)). 195 | 196 | Create a function in the Console: 197 | ``` js 198 | function changedata(data) { 199 | d3.select("svg") 200 | .selectAll("rect") 201 | .data(data) 202 | .attr("width", d => d); 203 | } 204 | ``` 205 | 206 | Test it out: 207 | ``` js 208 | changedata([258, 373, 278, 9, 72, 96]); 209 | ``` 210 | 211 | What happens if there are too many data values? 212 | 213 | ``` js 214 | changedata([196, 360, 283, 390, 46, 56, 152]); 215 | ``` 216 | 217 | 218 | Let's use the enter selection to add new bars in this case: 219 | 220 | ``` js 221 | function changedata(data) { 222 | var bars = d3.select("svg") 223 | .selectAll("rect") 224 | .data(data); // bars is the update selection 225 | 226 | bars.enter() 227 | .append("rect") 228 | .attr("x", "30") // until merge, acts on 229 | .attr("y", (d, i) => i * 50) // enter selection only 230 | .attr("height", "35") 231 | .attr("fill", "lightgreen") 232 | .merge(bars) // merge in the update selection 233 | .attr("width", d => d); // acts on all bars 234 | } 235 | ``` 236 | 237 | What happens if we have more bars than data values? 238 | 239 | ``` js 240 | changedata([325, 116, 25]); 241 | ``` 242 | 243 | Let's add to the function to remove the extra bars in this case: 244 | 245 | ``` js 246 | function changedata(data) { 247 | var bars = d3.select("svg") 248 | .selectAll("rect") 249 | .data(data); // bars is the update selection 250 | 251 | bars.enter() 252 | .append("rect") 253 | .attr("x", "30") // until merge, acts on 254 | .attr("y", (d, i) => i * 50) // enter selection only 255 | .attr("height", "35") 256 | .attr("fill", "lightgreen") 257 | .merge(bars) // merge in the update selection 258 | .attr("width", d => d); // acts on all bars 259 | 260 | bars.exit() 261 | .remove(); 262 | } 263 | ``` 264 | 265 | Try: 266 | ``` js 267 | changedata([271, 49, 389]); 268 | ``` 269 | 270 | A fancy exit: 271 | ``` js 272 | function changedata(data) { 273 | var bars = d3.select("svg") 274 | .selectAll("rect") 275 | .data(data); // bars is the update selection 276 | 277 | bars.enter() 278 | .append("rect") 279 | .attr("x", "30") // until merge, acts on 280 | .attr("y", (d, i) => i * 50) // enter selection only 281 | .attr("height", "35") 282 | .attr("fill", "lightgreen") 283 | .merge(bars) // merge in the update selection 284 | .attr("width", d => d); // acts on all bars 285 | 286 | bars.exit() 287 | .attr("fill", "red") 288 | .transition() 289 | .duration(2000) 290 | .attr("width", "0") 291 | .remove(); 292 | } 293 | ``` 294 | 295 | ``` js 296 | changedata([234, 129, 432, 286, 49, 372]); 297 | 298 | changedata([401, 23, 173]); 299 | ``` 300 | 301 | VOILA! We have created the D3 General Update Pattern! 302 | 303 | More examples from Mike Bostock (creator of D3): 304 | 305 | [General Update Pattern, I](https://bl.ocks.org/mbostock/3808218) 306 | 307 | [General Update Pattern, II](https://bl.ocks.org/mbostock/3808221) 308 | 309 | [General Update Pattern, III](https://bl.ocks.org/mbostock/3808234) 310 | 311 | It is covered in *IDVW* in the "Other Kinds of Data Updates" section on pp. 178-186 in Chapter 9. (The earlier part of Chapter 9 deals with data updates in which the number of DOM elements remains the same.) 312 | 313 | **Note that the General Update Pattern changed with D3 Version 4 so avoid examples from Version 3.** 314 | 315 | 316 | ### General Update Pattern 317 | 318 | Also available here: [EDAV5_1.html](EDAV5_1.html) 319 | 320 | ``` js 321 | 322 | 323 | 324 | 325 | EDAV5_1 326 | 327 | 328 | 329 | 330 | 331 | 376 | 377 | 378 | 379 | 380 | ``` 381 | 382 | ### Practice 1 working with functions 383 | 384 | Open [EDAV5_1.html](EDAV5_1.html) locally and practice running the `update()` function with different datasets in the Console. 385 | 386 | For example: 387 | ``` js 388 | update([100, 200, 300]); 389 | ``` 390 | 391 | ### Practice 2 vertical bar chart 392 | 393 | Change the bar chart to a vertical bar chart. 394 | 395 | Solution: [EDAV5_2.html](EDAV5_2.html) 396 | 397 | ### Practice 3 buttons 398 | 399 | Add "add" and "remove" buttons. 400 | 401 | Solution: [EDAV5_3.html](EDAV5_3.html) 402 | 403 | *Hint for 4 & 5: Take out the transitions and get the scales working. Then, if you want, add transitions back in.* 404 | 405 | ### Practice 4 d3.scaleBand 406 | 407 | Up to this point, we have assumed one-to-one correspondence between pixels and data values. Scales allow flexibility in mapping data values to pixels. Add an ordinal scale to map the position of the bars appropriately given the width of the `svg` element, using `d3.scaleBand()`. 408 | 409 | ``` js 410 | var xScale = d3.scaleBand() 411 | .domain([...]) 412 | .range([...]); 413 | ``` 414 | 415 | See: *IDVW*, Chapter 9, pp. 150-153 416 | 417 | Solution: [EDAV5_4_scaleBand.html](EDAV5_4_scaleBand.html) 418 | 419 | ### Practice 5 d3.scaleLinear 420 | 421 | Add a linear scale for the y-axis using `d3.scaleLinear()`, so data will be scaled appropriately to the height of the `svg` element. 422 | 423 | ``` js 424 | var yScale = d3.scaleLinear() 425 | .domain([...]) 426 | .range([...]); 427 | ``` 428 | 429 | See: *IDVW*, Chapter 7 (Note that our dataset is one-dimensional so we only have `d`, not `d[0]` and `d[1]`.) 430 | 431 | Solution: [EDAV5_5_scaleLinear.html](EDAV5_5_scaleLinear.html) 432 | -------------------------------------------------------------------------------- /ExerciseSolutions.md: -------------------------------------------------------------------------------- 1 | Exercise Solutions 2 | ================ 3 | [EDAV 1](#edav-1) 4 | 5 | [EDAV 2](#edav-2) 6 | 7 | [EDAV 3](#edav-3) 8 | 9 | [EDAV 4](#edav-4) 10 | 11 | If you find any errors, please submit a pull request to this file. 12 | 13 | You are encouraged to add solutions. Again, submit by making a pull request to this file. Note that code chunks begin with 14 | 15 | ``` js 16 | 17 | and end with 18 | 19 | ``` 20 | 21 | (You don't have to know any git to do this. Just click the "edit this file" button on the top right -- the one that looks like a pencil. Add some code following the pattern of previous examples, add a commit note, such as "added EDAV2 solutions", and click Commit Changes. I will review your proposed changes before merging. Fear not, you can't mess anything up no matter what you do. It's a good chance to practice.) 22 | 23 | 24 | ### EDAV 1 25 | 26 | **Part C: Interactivity** 27 | 28 | 4. Add the same event listern to the ellipse. 29 | 30 | ``` js 31 | d3.select("ellipse") 32 | .on("mouseover", goyellow); 33 | ``` 34 | 35 | 5. Create a function `goblue()` that changes the fill color to blue. 36 | 37 | ``` js 38 | function goblue() { 39 | d3.select(this) 40 | .attr("fill", "blue")}; 41 | ``` 42 | 43 | 6. Add event listeners to the circle and ellipse that will trigger a call to `goblue()` on a *mouseout*. 44 | 45 | ``` js 46 | d3.select("circle") 47 | .on("mouseout", goblue); 48 | 49 | d3.select("ellipse") 50 | .on("mouseout", goblue); 51 | ``` 52 | 53 | ### EDAV 2 54 | 55 | **Practice 1** 56 | 57 | Solution 58 | 59 | On the console, type the following commands : 60 | 61 | ``` js 62 | d3.selectAll("circle") 63 | .transition() 64 | .duration(2000) 65 | .attr("cx", "400"); 66 | 67 | d3.selectAll("circle") 68 | .transition() 69 | .duration(2000) 70 | .attr("cx", "50") 71 | .attr("fill","red"); 72 | 73 | d3.select("#my_circle") 74 | .transition() 75 | .duration(2000) 76 | .attr("cx","400"); 77 | 78 | d3.selectAll("circle") 79 | .transition() 80 | .duration(2000) 81 | .attr("cx","200") 82 | .transition() 83 | .duration(2000) 84 | .attr("cy","200"); 85 | ``` 86 | 87 | **Practice 2** 88 | 89 | 90 | Step 1,2 -> Update EDAV2.html to add class to one of the circles and also add style sheet to the circle having that class 91 | Code for ` 101 | ``` 102 | 103 | ``` js 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | ``` 114 | 115 | Step 3-5 : On console as below : 116 | 117 | ``` js 118 | d3.selectAll("circle") 119 | .classed("my_circle", true); 120 | 121 | d3.select("svg") 122 | .append("text") 123 | .attr("x", 50) 124 | .attr("y",100) 125 | .text("1") 126 | .attr("fill","white"); 127 | 128 | d3.select("text") 129 | .transition() 130 | .duration(4000) 131 | .text("2") 132 | .attr("y",150); 133 | ``` 134 | 135 | ### EDAV 3 136 | 137 | **Practice 1** 138 | 139 | Solution 1 140 | 141 | ``` js 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 183 | ``` 184 | 185 | **Practice 2** 186 | 187 | Solution 1 188 | 189 | ``` js 190 | 222 | ``` 223 | 224 | Solution 2 (with multiple transitions) 225 | 226 | ``` js 227 | 275 | ``` 276 | 277 | Solution 3 (using `.data(dataset).enter().append("circle")` to create circles) 278 | 279 | ``` js 280 | 334 | ``` 335 | 336 | ### EDAV 4 337 | 338 | **Practice 1** 339 | 340 | 1. Create a new html file (try to recreate the template without looking!). Add a script that adds an `svg` element and horizontal bars of the lengths (in pixels) specified in `bardata`. Create the bars with the data / enter / append sequence. (Available here: [EDAV4BarChart.html](https://raw.githubusercontent.com/jtr13/D3/master/EDAV4BarChart.html)). 341 | 342 | var bardata = [300, 100, 150, 225, 75, 275]; 343 | 344 | ``` html 345 | 346 | 347 | 348 | Bar Chart 349 | 350 | 351 | 352 | 353 | 373 | 374 | 375 | ``` 376 | 377 | **Practice 2** 378 | 379 | Start with the bar chart you created in Practice 1. 380 | 381 | *Note: it's best to work in the Console for the following so you don't have to sequence the changes.* 382 | 383 | 1. Change the data to any six other values and update the lengths of the bars. 384 | 385 | ``` js 386 | var bardata2 = [93, 21, 250, 78, 224, 140]; 387 | 388 | var bars = svg.selectAll("rect") 389 | .data(bardata2); 390 | 391 | bars.attr("width", d => d); 392 | ``` 393 | 394 | 2. Bind a new dataset, newbardata to the bars, update the bar lengths, and remove any extra bars. 395 | 396 | newbardata = [250, 125, 80, 100]; 397 | 398 | Bind data and update bar lengths: 399 | 400 | ``` js 401 | var newbardata = [250, 125, 80, 100]; 402 | 403 | var bars = svg.selectAll("rect") 404 | .data(newbardata); 405 | 406 | bars.attr("width", d => d); 407 | ``` 408 | 409 | Remove extra bars: 410 | 411 | ``` js 412 | bars.exit() 413 | .remove(); 414 | ``` 415 | 416 | 3. Bind a new dataset, reallynewbardata, to the bars, update old bar lengths, then add additional bars so each data value has a bar. Make the outline (stroke) of the new bars a different color. 417 | 418 | reallynewbardata = [300, 100, 250, 50, 200, 150, 325, 275]; 419 | 420 | Bind data and update bar lengths: 421 | 422 | ``` js 423 | var reallynewbardata = [300, 100, 250, 50, 200, 150, 325, 275]; 424 | 425 | var bars = svg.selectAll("rect") 426 | .data(reallynewbardata); 427 | 428 | bars.attr("width", d => d); 429 | ``` 430 | 431 | Add and style new bars: 432 | 433 | ``` js 434 | var newbars = bars.enter() 435 | .append("rect") 436 | .attr("x", "30") 437 | .attr("y", (d, i) => i*50) 438 | .attr("width", d => d) 439 | .attr("height", "35") 440 | .attr("fill", "lightgreen") 441 | .attr("stroke", "purple") 442 | .attr("stroke-width", "3"); 443 | ``` 444 | 445 | 4. Use .merge() to combine the update and enter selections into one selection and then transition the height of all of the bars to half their current height. 446 | 447 | ``` js 448 | newbars.merge(bars) 449 | .attr("width", d => d/2); 450 | ``` 451 | 452 | 5. Add text labels inside the bars at the right end with the length of the bar in pixels. 453 | 454 | ``` js 455 | svg.selectAll("text") 456 | .data(reallynewbardata) 457 | .enter() 458 | .append("text") 459 | .attr("x", d => d/2 + 33) 460 | .attr("y", (d, i) => i*50 + 25) 461 | .text(d => d/2); 462 | ``` 463 | 464 | Solution 2 465 | 466 | With delays... runs as a single script: [EDAV4Sol.html](EDAV4Sol.html) 467 | -------------------------------------------------------------------------------- /EDAV2Notes.md: -------------------------------------------------------------------------------- 1 | # EDAV2 Notes 2 | 3 | Read: IDVB, Chapter 3 4 | 5 | ## Framework of an .html file 6 | 7 | 8 | 9 | ``` html 10 | 11 | 12 | 13 | 14 | EDAV1 15 | 16 | 17 | 18 | 22 | 23 | 24 | 25 | 26 |

h1 header

27 |

h2 header

28 |

h3 header

29 |

paragraph

30 | 31 | 32 | 33 | 34 | 35 | (150, 200) 36 | 37 | 38 | 39 | 42 | 43 | 44 | 45 | 46 | ``` 47 | 48 | Sections 49 | ======== 50 | 51 | HTML 52 | 53 | 54 | 64 | 74 | 75 |
55 | HEAD 56 | 57 | 1. Title 58 | 59 | 2. Link to D3 60 | 61 | 3. CSS (styles) 62 | 63 | 65 | BODY 66 | 67 | 1. HTML (text) 68 | 69 | 2. SVG (graphics) 70 | 71 | 3. D3 / JavaScript (dynamic content) 72 | 73 |
76 | 77 | HTML 78 | ==== 79 | 80 | ``` html 81 |

h1 header

82 |

h3 header

83 |

paragraph

84 | ``` 85 | 86 |

87 | h1 header 88 |

89 |

90 | h3 header 91 |

92 |

93 | paragraph 94 |

95 | 96 | 97 | 98 | 99 | 100 | *Interactive Data Visualization for the Web* (IDVW) pp. 19-25 101 | 102 | ## CSS 103 | 104 | 105 | ``` css 106 | .myclass2 { 107 | color:red; 108 | font-size: 30px; 109 | } 110 | ``` 111 | 112 | ``` html 113 |

This paragraph has a class.

114 | ``` 115 | 116 |

117 | This paragraph has a class. 118 |

119 | 120 | CSS rules enable styling *and* selecting. 121 | 122 | *IDVW* pp. 30-35 123 | 124 | ## SVG 125 | 126 | 127 | ``` html 128 | 129 | 130 | 131 | 132 | (150, 200) 133 | 134 | 135 | ``` 136 | 137 | *IDVW* pp. 52-61 138 | 139 | ## JavaScript 140 | 141 | 142 | *IDVW* pp. 36-52 143 | 144 | Be generally familiar with arrays, objects, functions 145 | 146 | Be aware that ES6 does things differently (not covered in *IDVW*) 147 | 148 | Arrow functions `d => d.value` 149 | 150 | Template Literals 151 | 152 | ``` js 153 | let a = 3; 154 | let b = 4; 155 | console.log(`This is an equation: ${a} + ${b} = ${a + b}`); 156 | ``` 157 | 158 | instead of: 159 | 160 | ``` js 161 | console.log("This is an equation: " + a + " + " + b + " = " + (a + b)); 162 | ``` 163 | 164 | This is an equation: 3 + 4 = 7 165 | 166 | ## Breaking it down 167 | 168 | 169 | ``` js 170 | d3.select("circle").transition().duration(2000) 171 | .attr("r", "50"); 172 | ``` 173 | 174 | 1. Chaining (IDVW, Chapter 5, pp. 70-72) 175 | 176 | 2. Selections (IDVW, Chapter 5, pp. 79-80) 177 | 178 | 3. Modifying elements (IDVW, Chapter 6, 90-93 & elsewhere) 179 | 180 | ## Chaining methods 181 | 182 | ``` html 183 |

184 | Watch me turn red and shrink.

185 | ``` 186 | 187 |

188 | Watch me turn red and shrink. 189 |

190 | D3: 191 | 192 | ``` js 193 | d3.select("#id2").transition().duration(3000) 194 | .style("font-size", "24px").style("color", "red"); 195 | ``` 196 | 197 | ## Chaining methods: two transitions 198 | 199 | 200 | ``` html 201 |

Watch me turn red, 202 | then shrink.

203 | ``` 204 | 205 |

206 | Watch me turn red, then shrink. 207 |

208 | D3: 209 | 210 | ``` js 211 | d3.select("#id3") 212 | .transition().duration(3000).style("color", "red") 213 | .transition().duration(3000).style("font-size", "24px"); 214 | ``` 215 | 216 | ## Selecting by tag 217 | 218 | 219 | Select the first one: 220 | 221 | ``` js 222 | d3.select("circle"); 223 | ``` 224 | 225 | Select all: 226 | 227 | ``` js 228 | d3.selectAll("circle"); 229 | ``` 230 | 231 | ``` js 232 | d3.selectAll("p"); 233 | ``` 234 | 235 | ## Class and ID attributes 236 | 237 | 238 | ``` html 239 |

This paragraph has a class.

240 | 241 |

This paragraph has an id.

242 | ``` 243 | 244 |

245 | This paragraph has a class. 246 |

247 |

248 | This paragraph has an id. 249 |

250 | 251 | ## Selecting by ID 252 | 253 | 254 | ``` html 255 |

Watch me grow.

256 | ``` 257 | 258 |

259 | Watch me grow. 260 |

261 | ``` js 262 | d3.select("#id1").transition().duration(3000) 263 | .style("font-size", "72px"); 264 | ``` 265 | 266 | ## Selecting by class 267 | 268 | 269 | 270 | 271 | 272 | D3: 273 | 274 | ``` js 275 | d3.selectAll("rect.trio").transition().duration(3000) 276 | .attr("y", "150").attr("fill", "orange"); 277 | ``` 278 | 279 | # PRACTICE 280 | 281 | 282 | Download and open [SixBlueCircles.html](SixBlueCircles.html) 283 | 284 | 1. Move all the circles to the right. 285 | 286 | 2. Move them back to the left *and* change their color. 287 | 288 | 3. Add an id to one circle, and then move only that circle to the right. 289 | 290 | 4. Move all the circles to the middle of the screen, *then* move them all to the same location. 291 | 292 | ## Modifying elements 293 | 294 | 295 | 1. Attributes 296 | 297 | 2. Styles 298 | 299 | 3. Text 300 | 301 | 302 | 303 | ## Attributes 304 | 305 | 306 | ### HTML 307 | 308 | ``` html 309 |

Paragraph

310 | ``` 311 | 312 | ``` js 313 | d3.select("p").attr("id", "p1"); 314 | ``` 315 | 316 | ``` html 317 |

Paragraph

318 | ``` 319 | 320 | ## Attributes 321 | 322 | 323 | ### SVG 324 | 325 | ``` svg 326 | 327 | ``` 328 | 329 | ``` js 330 | d3.select("circle").attr("r", "100"); 331 | ``` 332 | 333 | ``` svg 334 | 335 | ``` 336 | 337 | ## Styles 338 | 339 | 340 | ### HTML 341 | 342 | ``` html 343 |

It's not easy being green

344 | ``` 345 | 346 | ``` js 347 | d3.select("#id5").style("color", "red"); 348 | ``` 349 | 350 | ``` html 351 |

It's not easy being green

352 | ``` 353 | 354 | ## Styles 355 | 356 | 357 | ### Rough timeline of HTML / CSS history: 358 | 359 | ### Early 90s: 360 | 361 | ``` html 362 |

This is an h1 header.

363 | ``` 364 | 365 |

366 | This is an h1 header. 367 |

368 | 369 | 370 | 371 | ## Styles 372 | 373 | 374 | ### Mid 1990s (don't use): 375 | 376 | ``` html 377 |

This method of 378 | styling was deprecated in 1998--but it still works :-) .

379 | ``` 380 | 381 |

382 | This method of styling was deprecated in 1998--but it still works :-) . 383 |

384 | 385 | HTML tag history 386 | 387 | 388 | 389 | ## Styles: External style sheet (preferred method) 390 | 391 | 392 | ### Late 1990s - present: efforts to separate *style* from *content* 393 | 394 | ``` html 395 | 396 | 397 | 398 | ``` 399 | 400 | `style.css`: 401 | 402 | ``` css 403 | .formal {color: red; 404 | font-size: 30px; 405 | font-family: Lucida Calligraphy; 406 | } 407 | ``` 408 | 409 | Styles: External style sheet (preferred method) 410 | =============================================== 411 | 412 | Body of html file: 413 | 414 | ``` html 415 | 416 |

Styled with CSS

417 | 418 | ``` 419 | 420 |

421 | Styled with CSS 422 |

423 | 424 | (started 2003) 425 | 426 | Styles: Internal style sheet 427 | ============================ 428 | 429 | ### <style> tag in <head> section: 430 | 431 | ``` html 432 | 433 | 439 | 440 | 441 | 442 |

Styled with CSS

443 | 444 | ``` 445 | 446 |

447 | Styled with CSS 448 |

449 | 450 | Styles: Inline style attributes 451 | =============================== 452 | 453 | - Not recommended if you are adding styling manually 454 | 455 | - However, JavaScript/D3 add styling *inline* 456 | 457 | ``` html 458 |

The word 459 | blue 460 | has four letters.>

461 | ``` 462 | 463 |

464 | The word blue has four letters. 465 |

466 | 467 | - Note that style is an *attribute* (but gets handled differently by D3.) 468 | 469 | 470 | 471 | Modifying style attributes 472 | ========================== 473 | 474 | ``` html 475 |

This is a paragraph.

476 | ``` 477 | 478 | ``` js 479 | d3.select("#id4").style("color", "red"); 480 | ``` 481 | 482 | But since style is an attribute, this would also work: 483 | 484 | ``` js 485 | d3.select("#id4").attr("style", "color: red;"); 486 | ``` 487 | 488 | The change to the DOM is the same in either case: 489 | 490 | ``` html 491 |

This is a paragraph.

492 | ``` 493 | 494 | Modifying HTML text 495 | =================== 496 | 497 | ``` html 498 |

Manhatten

499 | ``` 500 | 501 |

502 | Manhatten 503 |

504 | 505 | Hover to execute this code (and fix the typo): 506 | 507 | ``` js 508 | d3.select("#typo").text("Manhattan"); 509 | ``` 510 | 511 | Modifying SVG text 512 | ================== 513 | 514 | ``` svg 515 | 516 | 517 | 519 | Web scrapping is fun. 520 | 521 | ``` 522 | 523 |

524 | svg 525 |

526 | 527 | Web scrapping is fun. 529 | 530 | Hover to execute this code (and fix the typo): 531 | 532 | ``` js 533 | d3.select("#svgtypo").text("Web scraping is fun."); 534 | ``` 535 | 536 | Moving (and modifying) SVG text 537 | =============================== 538 | 539 | ``` svg 540 | 541 | 542 | 544 | I want to move left. 545 | 546 | ``` 547 | 548 |

549 | svg 550 |

551 | 552 | I want to move left. 554 | 555 | ### Hover to execute this code: 556 | 557 | ``` js 558 | d3.select("#moveleft").attr("x", "20").text("Thanks, now I'm happy!"); 559 | ``` 560 | 561 | Modifying elements 562 | ================== 563 | 564 | Summary: 565 | 566 | ``` js 567 | d3.select("p").attr("id", "myid"); 568 | 569 | d3.select("h1").style("color", "red"); 570 | 571 | d3.select("text").text("Changing some svg text."); 572 | ``` 573 | 574 | Modifying elements heads-up 575 | =========================== 576 | 577 | ### Text color 578 | 579 | ### HTML 580 | 581 | ``` js 582 | d3.select("p").style("color", "red"); 583 | ``` 584 | 585 | ### SVG 586 | 587 | ``` js 588 | d3.select("text").style("fill", "red"); 589 | ``` 590 | 591 | Modifying elements heads-up 592 | =========================== 593 | 594 | ### SVG styles vs. attributes 595 | 596 | ``` js 597 | d3.select("circle").style("fill", "red"); 598 | ``` 599 | 600 | ``` html 601 | 602 | ``` 603 | 604 | OR 605 | 606 | ``` js 607 | d3.select("circle").attr("fill", "red"); 608 | ``` 609 | 610 | ``` html 611 | 612 | ``` 613 | 614 | (If both are specified, style takes precedence.) 615 | 616 | Adding elements 617 | =============== 618 | 619 | ### HTML 620 | 621 | ``` js 622 | d3.select("body").append("p"); 623 | ``` 624 | 625 | ### SVG 626 | 627 | ``` js 628 | d3.select("svg").append("circle"); 629 | ``` 630 | 631 | Removing elements 632 | ================= 633 | 634 | ### HTML 635 | 636 | ``` js 637 | d3.select("p").remove(); 638 | ``` 639 | 640 | ### SVG 641 | 642 | ``` js 643 | d3.select("circle").remove(); 644 | ``` 645 | 646 | PRACTICE 2 647 | ========== 648 | 649 | Download and open a fresh copy of [SixBlueCircles.html](https://raw.githubusercontent.com/jtr13/D3/master/SixBlueCircles.html) in a **text editor**. 650 | 651 | 1. Add a class to one of the circles in the SVG section of the file. 652 | 653 | 2. Use an internal style sheet in the html file to style that circle with a green fill, orange border ("stroke"), and stroke width ("stroke-width") of 5. 654 | 655 | 3. Save the file and open it in Chrome. 656 | 657 | 4. Open the JavaScript Console and use D3 to change the class of all the circles to your newly created class. 658 | 659 | 5. Use D3 to add an SVG text element so that the top circle has a "1" in white in its center. 660 | 661 | 6. Use D3 to transition the text to the second circle, changing the text to "2". (Note that the text changes immediately at the start of the transition.) 662 | 663 | 664 | 665 | 666 | 667 | --------------------------------------------------------------------------------