Talk for Computer Graphics on the Web

1. Visualising Data with Code
Ri Liu

2. Science Art
Graphic Design
Information Design
Journalism
Data Science
Computer Science
Statistics
Creative Coding
Cartography
Data Visualisation

4. 5

5. mathewlucas.co.uk

6. guns.periscopic.com/

7. Tools

8. Drawing Graphing (generated)
Tableau
Highcharts
Many Eyes
Gephi (network)
Sigmajs (network)
CartoDB (mapping)
Mapbox (mapping)
D3 generators (C3, Bokeh)
D3
Processing
p5
Nodebox
Raphael
Two.s
Paper.js
Snap.svg

11. closethegap.studiometric.co
Enter/Exit
Scales
http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/

12. ri.id.au/twitter-gender
Force directed layout
ri.id.au/network-diversity-simulation

13. foreignaffairs.com/infographics/2015-10-15/china-not-rogue-donor
Streamgraph

14. motion-data.studiometric.co
Transitions

15. Process

16. 1. Look at the Data

17. 2. Make an Ugly Graph

18. 3. Ask some questions
Which countries are the best/worst for gender equality?
What is the difference between men and women in each
country?
Which countries have improved/worsened throughout
time?
How do countries compare in gender equality?

19. 4. Get Inspiration

20. 5. Play with ideas

21. www.ri.id.au/closethegap
5. Refine & Publish

22. twitter.com/riblah
studiometric.co
meetup.com/Data-Visualisation-Melbourne