-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
173 lines (161 loc) · 9.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Rubik:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>MIT-4.032: Information and Visualization</title>
</head>
<body>
<div class="section">
<h1>Information and Visualization</h1>
<p>
MIT-4.032/4.033<br>
Lecturer: Richard The<br>
Fall 2017, Friday, 9-12<br>
Building: N52-337<br>
<a href="https://github.com/MIT-4.032">This site on Github</a><br>
</p>
</div>
<div class="section">
<h1>Introduction</h1>
<p>
This class provides an introduction to working with information, data and visualization in a hands-on studio learning environment. Studies the history and theory of information, followed by a series of projects in which students apply the ideas directly. Progresses though basic data analysis, visual design and presentation, and more sophisticated interaction techniques. Topics include storytelling and narrative, choosing representations, understanding audiences, and the role of designers working with data.
</p>
</div>
<div class="section">
<h1><a name="01-clock">1. The Clock</a></h1>
<p>
Create twelve different visual representations of a clock. This is a creative interpretation of the clock, focused on visual quality, aesthetics and inventiveness. Your interpretation needs to be legible to you (the author), and you need to be able to explain how the time is derived visually at any given point. Think about the different states of the clock. How do they represent the time, how does it look in different moments in time?
</p>
<h2>Code examples</h2>
<p>
<a href="02-bar-clock/index.html">02-bar-clock</a><br>
<a href="03-text-clock/index.html">03-text-clock</a><br>
<a href="04-analog-clock/index.html">04-analog-clock</a><br>
<a href="05_mapfunction/index.html">05_mapfunction</a><br>
</p>
</div>
<div class="section">
<h1><a name="02-weather">2. Weather</a></h1>
<p>
Create two designs for a weather app, one literal and one abstract. Create both of your two weather apps in P5. Design it for the mobile form factor and host it on your github.io page. It has to work and look good on your phone. Use data, design, motion and interactivity as you see fit to create the most compelling weather apps you can think of.
</p>
<h2>Code examples</h2>
<p>
<a href="06_darksky_api/index.html">06_darksky_api</a><br>
<a href="07_mobile_resolution/index.html">07_mobile_resolution</a><br>
<a href="08_mobile_states/index.html">08_mobile_states</a><br>
</p>
</div>
<div class="section">
<h1><a name="03-census">3. Census</a></h1>
<p>
In this four week assignment you will visualize US Census data from CitySDK. You have the freedom to choose any subset of the data, and represent it any way you want. The open-ended nature of the assignment means that you have the responsibility of finding your own “story in the data”– one of the core tenets of the curriculum.
</p>
<br>
<p>
<h2>Week 1: Research, Concepts, Sketches</h2>
Explore what is available as <a href="https://www.census.gov/developers/
">census data here</a>. Come up with three “stories” you are interested in. Create a name, description and sketch for each and and find visual references. Submit one presentation on Stellar either as pdf or Google slides.
</p>
<br>
<p>
<h2>Week 2: Parsing & First design iteration</h2>
Decide on one of the 3 concepts. Take a deep dive into the data. Is the data available? How is it structured and what structure do you need to create your visualization? Are there other data that would complement your story?
This might be a bit of a tedious and messy process, as likely the data is not structured exactly how you need it. <br><br>
Oftentimes you can actually download the data, then you can store the data locally as a csv or json file and don't need API calls. See <a href="https://p5js.org/reference/#/p5/loadJSON">loadJSON()</a> and remember you will need to run a <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>. See below for some code examples.
<br><br>
In parallel, start working on a first design iteration for your visualization. Consider layout, information hierarchy, typography, color, interface elements and states of your application. Consider designing for desktop and mobile.
</p>
<br>
<h2>Code examples</h2>
<p>
<a href="09-mappluto-01">09-mappluto-01</a><br>
<a href="10-mappluto-02">10-mappluto-02</a><br>
<a href="11-mappluto-03">11-mappluto-03</a><br>
<a href="12-MappingWithLeaflet">12-MappingWithLeaflet</a><br>
<a href="13-Visualize-Earthquake-Data">13-Visualize-Earthquake-Data</a><br>
</p>
<br>
<p>
<h2>Week 3: Prototype & Final design</h2>
Create a working prototype of your visualization. This should be your “minimum viable product”. All pieces should be in place, your visualization strategy clear. Also create a “pixel perfect” visual design that defines all aspects in full detail.
</p>
<br>
<h2>Code examples</h2>
<p>
The examples below show using a modified csv downloaded from census.gov. Creating a graph for it, and filtering by state. There is also a choropleth map example, and an example that combines it all: A map and the custom data set and graph in one piece.<br><br>
<a href="14-CensusData-00">14-CensusData-00</a><br>
<a href="15-CensusData-01">15-CensusData-01</a><br>
<a href="16-CensusData-02">16-CensusData-02</a><br>
<a href="17-ChoroplethMap">17-ChoroplethMap</a><br>
<a href="17b-ChoroplethMap-Nashville ">17b-ChoroplethMap-Nashville</a><br>
<a href="18-ChoroplethMap-CensusData">18-ChoroplethMap-CensusData</a><br>
</p>
<br>
<p>
<h2>Week 4: Refinement and final working app</h2>
Bring all components together in one final developed version of your visualization. Consider responsive behavior, filtering, states and animation.
</p>
<br>
<h2>Code examples</h2>
<p>
<a href="19-js-object-simple">19-js-object-simple</a><br>
</p>
<br>
<p>
<h2>Resources</h2>
<a href="https://www.census.gov/developers/">https://www.census.gov/developers/</a><br>
<a href="https://uscensusbureau.github.io/citysdk/">https://uscensusbureau.github.io/citysdk/</a>
</p>
</div>
<div class="section">
<h1><a name="04-Final">4. Final Project</a></h1>
<p>
In this six week assignment you will follow your own adventure.
</p>
<br>
<p>
<h2>Week 1: Find your own project</h2>
For your final project come up with at least one concept for the following four directions. This project should be larger in scope and complexity than the census project, as you have six weeks to complete it. It should also be something you're passionate about and are interested in. The categories are below:
<ul>
<li>Personal: some type of personal data that you’ve collected </li>
<li>Research/class: information design questions around your research, other classes, or thesis</li>
<li>Explanation: a complex idea that’s data-centric, and make sense of it</li>
<li>Curiosity: finding a data set that you think is interesting, and telling us a story about it or providing people with a way to explore it</li>
</ul>
</p>
<br>
<p>
<h2>Week 2: Sketches and Parsing</h2>
Decide for one of the four projects you came up with in the previous week. Create a first sketch of how you think you want to show the information. Think about the wireframing we talked about. Try to put everything in place that you think will be part of it. Start parsing the data. Where do you get it from? How does it look like? Can you access it computationally through an api, json, csv? Collect references that you find relevant for your projects: Graph types, visual language, typography. Prepare a short presentation on google slides, github or as pdf and submit it in Stellar
</p>
<br>
<h2>Code examples: Simple HTML</h2>
<p>
Find below a few examples of simple HTML exercises.<br>
<a href="20-html-structure/index.html">20-html-structure</a></br>
<a href="21-html-tags/index.html">21-html-tags</a></br>
<a href="22-html-css/index.html">22-html-css</a></br>
<a href="23-html-css-p5/index.html">23-html-css-p5</a></br>
<a href="25-p5-responsive/index.html">25-p5-responsive</a></br>
<a href="26-css-layout/index.html">26-css-layout</a></br>
</p>
<br>
<p>
<h2>Week 3: Second design iteration and prototype</h2>
Create a final version of your design. It should consider all the relevant elements: Graph types, typography, layout, color. Think of the wireframe discussion we had earlier. Then, build a working prototype in code that loads and parses data and displays it. It is ok if that prototype is not final as long as you have the core functionality in place. <br>
In addition to this build your github.io index page that links to all your projects hosted on github. Ultimately you will present all your work from there. </p>
<br>
<h2>Code examples</h2>
<p>
<a href="27-multipleCanvases-Simple/index.html">27-multipleCanvases-Simple</a></br>
<a href="28-multipleCanvases-Data/index.html">28-multipleCanvases-Data</a></br>
<a href="29-html-css-modals/index.html">29-html-css-modals</a></br>
</p>
<br>
</div>
</body>
</html>