- worldmap, where do the products come from
- color to indicate how much?
- data from db?
- snap svg barchart
- plain rects
- left to right
- bottom towards top
- plain rects
- "infographic story"
- like theme 2, when this happens, do that, repeat
- animating stroke-dash stuff
Good morning ER
INNER JOIN's
GROUP BY
- COUNT
- SUM
- Show the rest briefly
Have a .php document that outputs json from json_encode
It should be ready for tomorrow
- let variables
- forEach
- fetch
- polyfills
- <Template>
Create a website that uses fetch & <template> to output data
Use the database you've created in the previous week
Read YDKJS chapter 1 & 2
- DOM Manipulation
- What is HTML, CSS & JS
- With JS everything can be changed, get/setAttribute
- events
- event.target
- Hand-Writing SVG's
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes
- Skim: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Texts
- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Transformations
- Skim: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking
- https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/ ?
- http://tutorials.jenkov.com/svg/svg-and-css.html#svg-css-properties
JavaScript + data vis
JS & SVG's
Exercises: TODO
JavaScript + data vis
Snap.svg
Get as far as you can in http://snapsvg.io/start/
JavaScript + data vis
Problem Solving
JavaScript + Data vis Rounding off Supervision available
NOT MINE
Project time
Supervision available
Presentation