Class 10 – 2016-11-15: SVG and D3 (Part one)

New problem set ps-10

Review problem set 09: 6:00 – 7:00

• Review ps-09

SVG 7:00 - 7:30

• What is SVG?
• When would we use it?
• How can we use it?
  • embedded image
  • inline with <img src="foo.svg"/>
• Write some SVG by hand
• Export some SVG from figma
• Restyle it with css
• Using Snap SVG to draw & animate SVG.
• Simple code-pen example

D3 7:30 - 8:45

• What is it?
• Why or when would we use it?
• How do we use it?
• Go over the example
• Do a D3 experiment from scratch in code-pen.

UPDATE: (Important!):

In our in-class example, we added the circles width ('r') as s CSS property. This isn't supported on all browsers. Instead, its best to specify R in the SVG or using D3 sett