19 |
20 | Other books
21 |
22 | * [Visualization Analysis and Design](https://www.cs.ubc.ca/~tmm/vadbook/) by Tamara Munzner
23 | * [Design for Information](http://isabelmeirelles.com/book-design-for-information/) by Isabel Meirelles
24 | * [Making Data Visual: A Practical Guide to Using Visualization for Insight](http://shop.oreilly.com/product/0636920041320.do) by Danyel Fisher & Miriah Meyer
25 |
26 | ## Grading
27 |
28 | * 30% Final exam
29 | * 60% Final projects
30 | * 10% Homeworks/Submitted assignments (pass/fail policy)
31 | * 10% Bonus (class participation, best homeworks/assignments)
32 |
33 | ---
34 | ## Submissions
35 |
36 | All homeworks/assignements/reports are due the **day before** the class at 23.59pm Lyon Time (GMT+1). Using [this form](https://goo.gl/forms/YAMADA2erDsaNpIA3).
37 |
38 | ---
39 |
40 | ## **Lecture 1 - Introduction to Data Visualization**
41 | *Friday 10/01/2020 13:30-15:30*
42 |
43 | * Overview: Class organization ([slides](https://docs.google.com/presentation/d/1YaPshJZLDj6M0XBMtmHqANeH17JINdB3Ie5G8RdC74U/edit#slide=id.p))
44 |
45 | * Basics of Data Visualization: Perception, cognition, Visual mapping, Standard charts ([slides](https://docs.google.com/presentation/d/1YY8h1wjfaAv172LVa8kVAnxCyEB547HRL43JlEOvCH0/edit#slide=id.p))
46 |
47 | * Authoring visualizations: Libraries, Tools, Tableau Software ([slides](https://docs.google.com/presentation/d/18b-B9wAYpq93nbROxRe9u6-7xexuBLM7T-yapqGoYdo/edit#slide=id.g2f7ee94efd_0_45))
48 |
49 | * Introduction to D3.js ([slides](https://docs.google.com/presentation/d/1BtnZZoSmrafigZLbsFqPGwBlhPZHee19SJpUtcHKuCU/edit#slide=id.g2fcdab4196_0_131))
50 |
51 | * Final projects description ([slides](https://docs.google.com/presentation/d/1r96OLz_yDkkAsq6segP360Vnr_PJrboO5XEJb0lHgw4/edit?usp=sharing))
52 |
53 | ## **Tutorial 1 - Tableau Software**
54 | *Friday 10/01/2020 15:45-17:45*
55 |
56 | *Tableau Tutorial*
57 |
58 | 1. The goal is to have a first experience with Tableau and build standard charts using a simple dataset.
59 | 2. Download and install [Tableau Public](https://public.tableau.com/) (Free) on your machine.
60 | 3. Altenartive for Linux users is the [Online version of Tableau](https://online.tableau.com/)
61 | 4. Other(simple) alternative to Tableau: [Polestar](http://vega.github.io/polestar/)
62 |
63 | *Problem 1: Iris flowers visualization*
64 |
65 | 1. Download the [`iris.csv`](data/iris.csv) and load it in Tableau; convert data types (if needed)
66 | 2. Plot a **scatterplot** with X:sepal_length, Y:sepal_width, color:species and a trend line
67 | 3. Save as a tab and save the workbook
68 |
69 | *Problem 2: Elections map*
70 |
71 | 1. Download the [`us-elections-history.csv`](data/us-elections-history.csv) and load it in Tableau; convert data types (if needed)
72 | 2. Plot a grid plot with `Year` as columns, `State` as rows and `State Winner` as color/marks.
73 | 3. Save as a tab
74 | 4. Plot a **geo-map** with colors winning party in 2012 `Latitude (generated)` et `Longitude (generated)`, with `State` as shapes and color `ATTR([State Winner])`
75 | 5. Save as a tab and save the workbook
76 | 6. Tips: make sure you parse the dataset correctly (FR version of Tableau automatically splits comas)
77 |
78 | *Problem 3: Stock markets visualizations*
79 |
80 | 1. Download the [`stocks.csv`](data/stocks.csv) and load it in Tableau; convert data types (if needed)
81 | 2. Plot a **multiple line chart** over time, for all stocks in a different color, grouped by company
82 | 3. Plot a **grouped bar chart** (companies as categories, grouped by year or by companies)
83 | 4. **Your own chart**!
84 | 5. Save as a tab and save the workbook
85 |
86 | *Problem 4: Global Superstore Dataset*
87 |
88 | 1. Download the [`Global-Superstore-Orders-2016.xlsx`](data/Global-Superstore-Orders-2016.xlsx) and load it in Tableau; join datasets (if needed)
89 | 2. Find an interesting story / selection with this dataset
90 | 3. Create a Dashboard and explain your story/finding
91 | 4. BONUS: Add storytelling (Tableau Feature)
92 | 5. BONUS: Join other datasets (e.g. People, ..)
93 |
94 |
95 | 📅 **For next class (17/01/2020)**
96 |
97 | ✍ Assignments
98 |
99 | * PROJECT: Group proposal of 2 or 3 students
100 |
101 | * Submit a project topic (1-paragraph): what is the question you expect to answer? which data do you need? how do you plan to collect your data? what are the main risk in collecting/visualizing it? what are the privacy/ethical issues?
102 |
103 | * Create a GitHub account
104 |
105 | 📖 Readings and preparation
106 |
107 | * Read introductions to JavaScript, D3 and Git
108 |
109 | * Interactive Data Visualization for the Web [Chapter 1. Introduction
110 | ](https://web.archive.org/web/20160307043159/http://chimera.labs.oreilly.com/books/1230000000345/ch01.html), [Chapter 2. Introducing D3](https://web.archive.org/web/20160307043159/http://chimera.labs.oreilly.com/books/1230000000345/ch02.html) and [Chapter 3. Technology Fundamentals](https://web.archive.org/web/20160307043159/http://chimera.labs.oreilly.com/books/1230000000345/ch03.html)
111 |
112 | * Get familiar with [JavaScript](https://learnxinyminutes.com/docs/javascript/)
113 |
114 | * [Inside look at modern web browser](https://developers.google.com/web/updates/2018/09/inside-browser-part1)
115 |
116 | * [Lear how to inspect the DOM tree](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom)
117 |
118 | * Get familiar with [GitHub](https://try.github.io/levels/1/challenges/1)
119 |
120 | ## **Tutorial 2 (1/2) - Building visualizations with D3.js**
121 | *Friday 17/01/2020 13:30-15:30*
122 |
123 |
124 |
125 |
126 |
127 | * Cheatsheet [intro to D3](https://romsson.github.io/intro-to-d3/)
128 | * [Margin conventions](https://blockbuilder.org/mbostock/3019563)
129 |
130 | ```
131 | var margin = {top: 20, right: 10, bottom: 20, left: 10};
132 |
133 | var width = 960 - margin.left - margin.right,
134 | height = 500 - margin.top - margin.bottom;
135 | ```
136 |
137 | ***Assignment:** draw a red rectangle (like the gray one above) in the center of the page (using `margin`, `width` and `height`).*
138 |
139 | [SOLUTION](https://blockbuilder.org/romsson/b32fddb798bafb7f78427cba22912a8d)
140 |
141 | ---
142 |
143 | **Bar chart** | [SVG](http://blockbuilder.org/romsson/36b1cdc599e8f341a33892f143cf087f)
144 |
145 |
146 |
147 |
148 |
149 | * Mark: ``
150 | * Position: `x` and `width`
151 | * Height: `y` and `height`
152 | * Color: `fill` (style)
153 | * Scales: quantitative `d3.scaleLinear()` and categorical `d3.scaleBand()`
154 |
155 | ***Assignment:** build a bar chart with a random dataset*
156 |
157 | * How to generate a random list of integers: `d3.range(n).map(Math.random)`
158 | * The `x.bandwidth()` function generates the` width` attribute for the ``
159 |
160 | [SOLUTION](https://blockbuilder.org/romsson/4e431453beb5c92ff6eb029771b3b8d3)
161 |
162 | ---
163 |
164 | **Line chart** | [SVG](https://blockbuilder.org/romsson/2ff1ee674420b71dc1d3c9731c19ee46)
165 |
166 |
167 |
168 |
169 |
170 | * Mark: ``
171 | * Position: `d3.line().x(function(d) { }).y(function(d) { })` to generate attribute `d`
172 | * Color: style `fill`
173 | * Interpolate: `d3.line().curve(d3.curveCardinal)`
174 | * Scales: `d3.scaleLinear()`
175 |
176 | ***Assignment:** build a line chart using a simple JSON temporal dataset add circles for each time point.*
177 |
178 | * Create a `dataset.json` file in blockbuilder:
179 |
180 | `
181 | [{"id" : 1, "name": "A", "value": 10, "date": "2016-01"},
182 | {"id" : 2, "name": "B", "value": 30, "date": "2016-02"},
183 | {"id" : 3, "name": "C", "value": 20, "date": "2016-03"}
184 | ]
185 | `
186 |
187 | * Be careful: one single mark (a line) to draw for the whole dataset!
188 | * Load a JSON dataset: `d3.json("dataset.json", function(error, data) {}`
189 | * Data parsing: `d3.timeParse("%Y-%m")`
190 | * Temporal scale `d3.scaleTime()`
191 | * Data display: `d3.timeFormat("%b %y")`
192 |
193 | [SOLUTION](https://blockbuilder.org/romsson/653eaaf6f6b5655af0ebb1e67d3be986)
194 |
195 | ---
196 |
197 | **Scatterplot** | [SVG](https://blockbuilder.org/romsson/7961b125a188ad1167039e4103ff69bf)
198 |
199 |
200 |
201 |
202 |
203 | * Mark: ``
204 | * Position: `cx` and `cy`
205 | * Area: `r` (radius) and `d3.scaleSqrt()`
206 | * Color: `fill` (style) and `d3.scaleOrdinal(d3.schemeCategory20)` color scale
207 |
208 | ***Assignment:** build a scatterplot using the Iris dataset and load the chart using a function that takes the chart visual mapping and dimensions as input parameters.*
209 |
210 | * [`iris.csv`](data/iris.csv)
211 | * Load a CSV dataset: `d3.csv('iris.csv', function(error, data){}`
212 |
213 | [SOLUTION](https://blockbuilder.org/romsson/f1569bab4188ca15974d90d373f1aad0)
214 |
215 | ## **Tutorial 2 (2/2) - Building visualizations with D3.js**
216 | *Friday 17/01/2020 15:45-17:45*
217 |
218 | * Advanced D3.js: page layout, d3.nests, legends, scatterplot and grouped bar chart ([slides](https://docs.google.com/presentation/d/14pYKK2dYGnPS6iZ9l1gw1vuiPOGXjjCfeJlArMYRLBs/edit#slide=id.p))
219 |
220 | ---
221 | **Axis** | SVG
222 |
223 |
224 |
225 |
226 |
227 | ```
228 | var xAxis = d3.axisBottom()
229 | .scale(x);
230 |
231 | var yAxis = d3.axisLeft()
232 | .scale(y);
233 |
234 | svg.append("g")
235 | .attr("class", "x axis")
236 | .attr("transform", "translate(0," + height + ")")
237 | .call(xAxis)
238 | ```
239 | ---
240 | **Interaction**
241 |
242 | * Mouse click: `.on("click", function(d){})`
243 | * Mouse hover: `.on("mouseover", function(d){})` and `.on("mouseout", function(d) {})`
244 |
245 | * Drag & drop `d3.drag`, tooltip ([example](http://bl.ocks.org/romsson/3fe361c8b3ce9e722c1d19f6c55a6d00))
246 |
247 | ---
248 | **Legends**
249 |
250 | * Display the unique values of an attribute (e.g. use the `color.domain()` to retrieve them)
251 | * Show the visual mapping for those values (color, shape, etc.) as rows (create a group `` and then fill the rows with the mappings)
252 | * You have to do it yourself!
253 |
254 |
255 | ---
256 | **Multiple views**
257 |
258 | * Load and coordinate multiple visualizations
259 | * Charts coordination
260 |
261 |
262 | ---
263 | ***Assignment:** build a coordinated scatterplot matrix using the Iris dataset.*
264 |
265 |
266 |
267 | Submit the blockbuilder link to [submit here](https://docs.google.com/forms/d/e/1FAIpQLSdcv-t-feJ6_BG0I326ymeF7YCK8gltbGvsdMecKCUcwyv77g/viewform) at the end of the class (17h45)
268 |
269 | ---
270 | 📅 **For next class (24/01/2020)**
271 |
272 | * CODE: Submit your blockbuilder for scatterplot matrix [✉️ submission form](https://docs.google.com/forms/d/e/1FAIpQLSdcv-t-feJ6_BG0I326ymeF7YCK8gltbGvsdMecKCUcwyv77g/viewform)
273 | * CODE: Extend the line chart using the [`stocks.csv`](data/stocks.csv) where each line is a different symbol (and a different color). BONUS: add a title, legend and interactivity (e.g. tooltip, show time points, etc.) [submission form](https://docs.google.com/forms/d/e/1FAIpQLSdcv-t-feJ6_BG0I326ymeF7YCK8gltbGvsdMecKCUcwyv77g/viewform)
274 |
275 | * PROJECT: Write a document that describes the dataset(s) for your project, mechanism to collect the data and expected model (as a table, use Excel). Add more informations:
276 | * Project full name, project description and members names
277 | * Data you plan to use, does it exist, if not how you collect it?
278 | * 3-5 questions you want to answer using your project
279 | * 5-10 visualizations that are related to your project (screenshot and link sources)
280 | * **Wait for validation by instructor before any design/coding**
281 |
282 | * READINGS: [Chapter 4. Setup](https://web.archive.org/web/20160307043159/http://chimera.labs.oreilly.com/books/1230000000345/ch04.html), [Chapter 5. Data](https://web.archive.org/web/20160307043159/http://chimera.labs.oreilly.com/books/1230000000345/ch05.html), [Chapter 6. Drawing with Data](https://web.archive.org/web/20160307043159/http://chimera.labs.oreilly.com/books/1230000000345/ch06.html), [Chapter 7. Scales](https://web.archive.org/web/20160307043159/http://chimera.labs.oreilly.com/books/1230000000345/ch07.html).
283 |
284 | * What is visualization [research](https://medium.com/multiple-views-visualization-research-explained/what-is-visualization-research-what-should-it-be-8840a9ba658)? [literacy](https://medium.com/multiple-views-visualization-research-explained/what-does-visualization-literacy-mean-anyway-22f3b3badc0)?
285 |
286 | ## **Lecture 3 - Advanced D3.js and Layouts**
287 | *Friday 24/01/2020 13:30-15:30*
288 |
289 | * Visualization of [geo](https://docs.google.com/presentation/d/1fY3EHmalb53aZVNYqv2UHjg9_kbtR26saexPTgPKKJs/edit#slide=id.g26ba174e93_0_616) and [temporal data](https://docs.google.com/presentation/d/1HPwRnoc5SvvuhCmxyKnljgqa0oRH6ugDlhM0JQ8qLmM/edit#slide=id.g26b255eefc_0_1105)
290 |
291 | * Introduction to [data cleaning tools and methods](https://docs.google.com/presentation/d/1lFAG926PhlkL9Zt-L6pK7zz0EPOlMkhY9prQxE4UbJU/edit#slide=id.g6e08cd9023_0_0)
292 |
293 | * Advanced data visualization concepts: Animation, Interaction, Multiple Views ([slides](https://docs.google.com/presentation/d/1g2ZT3LHUnCSmEUIrxow_4APTlnuiMGgID8XxMyt8mz4/edit#slide=id.p))
294 |
295 | * Solution for interactive [scatterplot matrix and legend](https://blockbuilder.org/romsson/af97a2bad698ab0c07863015b8ef4622) and multiple line-chart. *How would you improve this chart? by adding [brushing interactions](https://bl.ocks.org/Fil/6d9de24b31cb870fed2e6178a120b17d), including legends in diagonal and [distribution in diagonal](https://www.kylebradbury.org/visualizations/scattermatrix/).*
296 |
297 | * Solution for [stocks line chart](https://blockbuilder.org/romsson/7d94b8925f4c8cb832770921aee23f88). *How would you improve this chart?*
298 |
299 | * Advanced D3 layouts ([slides](https://docs.google.com/presentation/d/1a79MLat-ftU25Uk7uM2JYfDSlKS-9hp94EnmegvcLg0/edit#slide=id.p))
300 |
301 | ## Tutorial 3: More D3.js grouping and layouts
302 | *Friday 24/01/2020 15:45-17:45*
303 |
304 | * Grouping data with `d3.nest`
305 |
306 | ```
307 | {symbol: "MSFT", date: Sat Jan 01 2000 00:00:00 GMT+0100 (CET), price: 39.81}
308 | {symbol: "MSFT", date: Tue Feb 01 2000 00:00:00 GMT+0100 (CET), price: 36.35}
309 | {symbol: "MSFT", date: Wed Mar 01 2000 00:00:00 GMT+0100 (CET), price: 43.22}
310 | ```
311 |
312 | ***Assignment:* Nest stocks by symbol and calculate aggregated values (max/min/sum) over price; parse dates.**
313 |
314 | Expected result:
315 |
316 | ```
317 | 0: {key: "MSFT", values: Array(123), maxPrice: 43.22, sumPrice: 3042.6}
318 | 1: {key: "AMZN", values: Array(123), maxPrice: 135.91, sumPrice: 5902.4}
319 | 2: {key: "IBM", values: Array(123), maxPrice: 130.32, sumPrice: 11225.13}
320 | ```
321 |
322 | * [Tutorial on `d3.nest`](http://bl.ocks.org/phoebebright/raw/3176159/)
323 | * [More examples using `d3.nest`](http://learnjsdata.com/group_data.html)
324 |
325 | [SOLUTION](https://bl.ocks.org/romsson/e5c0bdd599a2a51a133e02d3200bcd9c)
326 |
327 | ---
328 |
329 |
330 | **Grouped bar chart** |
331 |
332 |
333 |
334 |
335 |
336 | * Grouping: `d3.nest`
337 | * Mark: ``
338 | * Positions: using two categorical scales `d3.scaleBand()`
339 | * Color: style `fill`
340 |
341 | ***Assignment:** build a grouped bar chart using the [`stocks.csv`](data/stocks.csv) .*
342 |
343 | Start using random data
344 |
345 | ```
346 | var n = 10, // number of samples
347 | m = 5; // number of series
348 |
349 | var data = d3.range(m).map(function() {
350 | return d3.range(n).map(Math.random);
351 | });
352 | ```
353 |
354 | [SOLUTION](https://blockbuilder.org/romsson/a78f70f6624184fd33b4dc385a495e75)
355 |
356 | ---
357 |
358 | **Stacked bar chart** |
359 |
360 |
361 |
362 |
363 |
364 | * Grouping: [`d3.stack`](https://github.com/d3/d3-shape/blob/master/README.md#stack)
365 | * Mark: ``
366 | * Positions: nested categorical scales `d3.scaleBand()`
367 | * Color: style `fill`
368 | * Scales: `d3.scaleLinear()`
369 |
370 | ***Assignment:** build a stacked bar chart using the [`stocks.csv`](data/stocks.csv) .*
371 |
372 | * Start with random data (see grouped bar chart)
373 | * Nest data
374 | * by `year` `d.date.getFullYear()`
375 | * by `symbol`
376 | * Calculate sum
377 | * Flatten the dataset to be used by the `d3.stack` layout
378 |
379 | ```
380 | 0: {MSFT: 356.07999999999987, AMZN: 527.17, IBM: 1162.97, AAPL: 260.98, year: "2000"}
381 | 1: {MSFT: 304.17, AMZN: 140.87, IBM: 1163.6200000000001, AAPL: 122.11000000000003, year: "2001"}
382 | 2: {MSFT: 261.92, AMZN: 200.68, IBM: 901.4999999999999, AAPL: 112.89999999999998, year: "2002"}
383 | ```
384 |
385 | * Apply the `d3.stack()` layout using the list of unique symbols as `keys` and the flat dataset as data
386 |
387 |
388 | [SOLUTION](https://blockbuilder.org/romsson/8aea86fddcf01380eb96a341509f394f)
389 |
390 | ---
391 | **Animated transitions**
392 |
393 | * Add animation using: `.transition(duration)`, and `.delay(duration)`
394 | * Triggered by a widget, e.g. a `radio` button
395 | * Examples of transitions: [bar chart](https://bl.ocks.org/romsson/3de5bef36f106673278b7ec182c262a6), [D3 show reel](https://bl.ocks.org/mbostock/1256572)).
396 |
397 |
398 | ***Assignment (BONUS):** build an animated transition between grouped bar chart and stacked bar chart.*
399 |
400 | * Isolate each layout as two function `grouped` and `stack`
401 | * Add a swap function between each other
402 |
403 | ```
404 |
405 |
406 |
407 |
408 | ```
409 |
410 | * Bind events using ```d3.selectAll("input").on("change", function() {})```
411 |
412 | [SOLUTION](https://blockbuilder.org/romsson/f49647330eeeebdd3487fcc3b0222d00)
413 |
414 | ---
415 |
416 | 📅 **For next class (31/01/2020)**
417 |
418 | 1. Write a document for your project data cleaning and preparation: data source, data shaping, processing, etc. If you use external tools (e.g. Excel, DataWrangler, Tableau) add some details of the role and steps performed using those.
419 |
420 | 2. Load a clean data sample using d3 and descriptive charts (histogram, scatterplot, ..) in a wepage showing the characteristics of the dataset: distribution, statistics, trends, etc. Add this link to your analysis in the class document (the page should be hosted on GitHub).
421 |
422 | 3. Draw a mockup of your project using pen and paper and add this link to the class document (the page should be hosted on GitHub).
423 |
424 | * Read principles of the Five design sheets [methodology](http://fds.design/wp-content/uploads/2015/06/five-design-sheet-approach-JCR.pdf)
425 |
426 | * Reading: [Chapter 8. Axes](https://web.archive.org/web/20160307043159/http://chimera.labs.oreilly.com/books/1230000000345/ch08.html), [Chapter 9. Updates, Transitions, and Motion
427 | ](https://web.archive.org/web/20160307043159/http://chimera.labs.oreilly.com/books/1230000000345/ch09.html), [Chapter 10. Interactivity](https://web.archive.org/web/20160307043159/http://chimera.labs.oreilly.com/books/1230000000345/ch10.html), [Chapter 11. Layouts](https://web.archive.org/web/20160307043159/http://chimera.labs.oreilly.com/books/1230000000345/ch11.html).
428 |
429 |
430 | ## Lecture 4 - Advanced Layout, Data Cleaning and Case studies
431 | *Friday 31/01/2020 13:30-15:30*
432 |
433 | * Design and case studies in visualization ([slides](https://docs.google.com/presentation/d/1RxFTHrEDvGTJiHZ7AmOyX7WQ82o7FEJFs0kosvlD4bg/edit))
434 |
435 | * Introduction to Sketching, Rapid Prototyping, Development cycles ([slides](https://docs.google.com/presentation/d/11kEkZK12C893qzyEDvkIjgFKPmRKFf-KDDOKiwGw6ys/edit)) and using the [Five Design Sheet](http://fds.design/) methodology
436 |
437 |
438 | ## Tutorial 4: Geo-maps, design project setup
439 | *Friday 31/01/2020 15:45-17:45*
440 |
441 | * [Apply the 5DS](http://fds.design/index.php/resources-and-publications/) to your project (paper and pen!)
442 |
443 | * Project setup using modern web development tools: local server, package managers ([slides](https://docs.google.com/presentation/d/1Uz3ZjX1f9DJgH73VOrJwi7cgVqwlKIwFPmM4eubUIb8/edit#slide=id.g32bdb64449_0_18))
444 |
445 | ---
446 | **Geo-Map** | [Example](https://blockbuilder.org/romsson/a4df41c5b46da7a0635c7cf393df96e3)
447 |
448 |
449 |
450 |
451 |
452 | * Mark: `` + `d3.geoPath()`
453 | * Position: `d3.geoPath()`
454 | * Color: `fill` (style)
455 |
456 | ***Assignment:** build a geo-map [following those instructions](https://lyondataviz.github.io/teaching/lyon1-m2/2017/tp4.html).*
457 |
458 | [SOLUTION](https://blockbuilder.org/romsson/969c4ee91b5c436a36053fee592d8b17)
459 | * [Interactive geo-map in D3](https://blockbuilder.org/romsson/bfb974bfd600573d763c405d20921b7c)
460 |
461 | ---
462 |
463 | At the end of the tutorial:
464 |
465 | * Update your proposal after feedback from instructor
466 | * Add the link to (a pdf of all) the design sheets in the class document
467 |
468 | 📅 **For next class (07/02/2020)**
469 |
470 | ✍ Assignments
471 |
472 | * Website fully functional with full dataset
473 | * Implement the page layouts
474 | * Implement graphics specific to your project
475 |
476 | ## Lecture 5 - Graphs
477 | *Friday 07/02/2020 13:30-15:30*
478 |
479 | * Graphs, Networks and Tree visualizations ([slides](https://docs.google.com/presentation/d/1zhbOrcbVMEfnl8tx07TPNuY8oEIeGyuYVeCR5Rb4h9g/edit#slide=id.p))
480 |
481 | **Node-Link Graph** | [Example](https://blockbuilder.org/romsson/613e64af0ea1fb1567aeac5d29e9ac35)
482 |
483 |
13 | 
125 | 
147 | 
168 | 
201 | 
225 | 
334 | 
362 | 
450 | 
485 |