Mitosis & Cancer: When Making New Cells Goes Terribly Wrong!
What goes into making a Data Visualization?
-
Upload
gabriel-gaster -
Category
Data & Analytics
-
view
252 -
download
1
description
Transcript of What goes into making a Data Visualization?
![Page 1: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/1.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
Design Choices to Visualize Transportation
in Chicago
![Page 2: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/2.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
Design Choices to Visualize Transportation
in Chicago
why I like Divvy
or
![Page 9: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/9.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
Difficult
Public Transit on the grid
=+ Diagonals
![Page 10: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/10.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
Difficult
Public Transit on the grid
=+ Diagonals
2+ buses = FAIL
![Page 12: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/12.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
show how has divvy changed where people can go
viz Goal:
![Page 13: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/13.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
show how has divvy changed where people can goshow where people actually go
viz Goal:
![Page 15: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/15.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
one way is with an arrow
A B
How to show where people go from here?
![Page 16: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/16.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
good for abstract relationships
one way is with an arrow
![Page 20: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/20.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
@flowingdata
maybe notbut the map here sure is great
lines between pts?
![Page 21: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/21.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
how else to represent stations?
lines between pts?
![Page 22: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/22.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
how else to represent stations?
on a map
lines between pts?
![Page 23: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/23.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
how else to represent stations?
on a mapbut how?
lines between pts?
![Page 24: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/24.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
how else to represent stations?
on a mapbut how? • nodes?
lines between pts?
![Page 25: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/25.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
can use gradient — to show gradual differences between stationsLondon transit map
@mySociety
![Page 26: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/26.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
how else to represent stations?
on a mapbut how? • nodes?
• regions?
lines between pts?
![Page 27: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/27.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
@mySociety
@mbostock
or use natural borders?
London transit map
![Page 29: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/29.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
each point is related to the closest station
what regions?
![Page 30: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/30.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
each point is related to the closest station
what regions?
—> Voronoi
![Page 31: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/31.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
each point is related to the closest station
what regions?
—> Voronoihuh?
http://alexbeutel.com/webgl/voronoi.html
![Page 32: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/32.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
each point is related to the closest station
what regions?
—> Voronoihuh?
http://alexbeutel.com/webgl/voronoi.htmlFind the closest station — that’s my region!
![Page 37: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/37.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
recap: stations are voronoi tiles
too many edges to show…
![Page 38: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/38.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
recap: stations are voronoi tiles
too many edges to show… what about using color?
![Page 42: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/42.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
how touse color?
• two colors for value
colors v colors
![Page 43: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/43.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
how touse color?
binned v gradient
colors v colors
• two colors for value
![Page 44: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/44.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
• hard to read • differences subtle
gradient
![Page 45: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/45.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
how touse color?
• two colors not many • binned not gradient
binned v gradient
colors v colors
![Page 46: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/46.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
how touse color?
• two colors not many • binned not gradient
binned v gradient
colors v colors
binned
![Page 47: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/47.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
how touse color?
• two colors not many • binned not gradient • transparent empty bin
binned v gradient
colors v colors
binned
![Page 48: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/48.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
how touse color?
• two colors not many • binned not gradient • transparent empty bin • iterate
binned v gradient
colors v colors
binned
![Page 49: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/49.jpg)
@gabegaster | http://bitly.com/bundles/gabegaster/1
• dispersion (where people can / do go)
with these choices, the viz emphasizes:
• exploration
![Page 50: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/50.jpg)
@gabegaster | http://bitly.com/bundles/gabegaster/1
lookbubbles
cool
![Page 51: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/51.jpg)
@gabegaster | http://bitly.com/bundles/gabegaster/1
what can we learn from this?
urban vs lake frontcommute vs party
vs train
there’s me, too.hipster vs yuppie
![Page 61: What goes into making a Data Visualization?](https://reader033.fdocuments.us/reader033/viewer/2022051818/54c28e8c4a7959832a8b459c/html5/thumbnails/61.jpg)
@gabegaster | http://bit.ly/1pdP2Tb
Thanks
check out the blog post with more detail