imt-561-homeworks/index.html at main · bcsaldias/imt-561-homeworks · GitHub

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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>IMT 561 Portfolio | Data Visualization: Design And Development</title>
</head>

<body>
  <main>
    <button id="tabs-visibility-toggle" class="tabs-visibility-toggle" type="button" aria-controls="main-tabs"
      aria-pressed="false">Hide tabs</button>
    <nav id="main-tabs" class="tabs" role="tablist" aria-label="Main tabs">
      <button type="button" class="tab-btn active" data-target="tab1" role="tab" aria-selected="true">Welcome</button>

      <!-- Homework 4 -->
      <button type="button" class="tab-btn" data-target="tab2" data-sketch="sk2" role="tab">HWK 4.1</button>
      <button type="button" class="tab-btn" data-target="tab3" data-sketch="sk3" role="tab">HWK 4.2</button>

      <!-- Examples -->
      <button type="button" class="tab-btn" data-target="tab5" data-sketch="sk5" role="tab">Ex 1</button>
      <button type="button" class="tab-btn" data-target="tab6" data-sketch="sk6" role="tab">Ex 2</button>
      <button type="button" class="tab-btn" data-target="tab8" data-sketch="sk8" role="tab">Ex 3</button>
      <button type="button" class="tab-btn" data-target="tab9" data-sketch="sk9" role="tab">Ex 4</button>
      <button type="button" class="tab-btn" data-target="tab10" data-sketch="sk10" role="tab">Ex 5</button>
      <button type="button" class="tab-btn" data-target="tab11" data-sketch="sk11" role="tab">Ex 6</button>
      <button type="button" class="tab-btn" data-target="tab12" data-sketch="sk12" role="tab">Ex 7</button>
      <button type="button" class="tab-btn" data-target="tab13" data-sketch="sk13" role="tab">Ex 8</button>
      <button type="button" class="tab-btn" data-target="tab14" data-sketch="sk14" role="tab">Ex 9</button>
      <button type="button" class="tab-btn tab-btn-highlight" data-target="tab16" data-sketch="sk16" role="tab">Ex 10 **</button>
      <button type="button" class="tab-btn tab-btn-highlight" data-target="tab17" data-sketch="sk17" role="tab">Ex 11 **</button>
      <button type="button" class="tab-btn tab-btn-highlight" data-target="tab18" data-sketch="sk18" role="tab">Ex 12 **</button>
      <button type="button" class="tab-btn" data-target="tab15" data-sketch="sk15" role="tab">HWK 5</button>
    </nav>

    <!-- Welcome: Homepage -->
    <section id="tab1" class="tab-content active" role="tabpanel">
      <div class="welcome-template" aria-labelledby="welcome-title">
        <h2 id="welcome-title">Welcome to My IMT 561 Portfolio</h2>

        <div class="welcome-profile">
          <div class="welcome-photo" role="img" aria-label="Profile photo placeholder">
            <!-- Replace with your own photo -->
            <!-- <img src="images/your-photo.jpg" alt="Photo of [Your name]" /> -->
            <span>Add a photo</span>
          </div>

          <div class="welcome-copy">
            <p><strong>[Your name]</strong> ([optional pronouns])</p>
            <p>I am a master’s student in [program], focused on [interest area or domain].</p>
            <p>This quarter I want to get better at [analysis, storytelling, interaction design, etc.].</p>
            <p>One dataset or topic I am excited to visualize is [topic], because [short reason].</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Homework 4: Sketch 1 -->
    <section id="tab2" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk2" class="sketch-container"></div>
      <div id="sketch-drawing-sk2" class="sketch-evolution">
        <div class="welcome-template hwk-template" aria-labelledby="sk2-notes-title">
          <h3 id="sk2-notes-title">Documenting iterative process</h3>
          <p class="small-note">Replace placeholders with your own notes and images.</p>
          <p>
            Context of use: Explain where your clocks/timers would be used, by whom, and what problem they help solve. [add 2-3 sentences]
          </p>

          <article class="clock-template">
            <h4>Final Clock 1</h4>
            <p class="small-note">Sketch iteration documentation (paper/hand-drawn photos)</p>
            <div class="iteration-grid">
              <figure class="iteration-item">
                <!-- <img src="images/clock1-sketch1.jpg" alt="Clock 1 sketch iteration 1" /> -->
                <div class="image-placeholder">Clock 1 sketch photo 1</div>
              </figure>
              <figure class="iteration-item">
                <!-- <img src="images/clock1-sketch2.jpg" alt="Clock 1 sketch iteration 2" /> -->
                <div class="image-placeholder">Clock 1 sketch photo 2</div>
              </figure>
            </div>
            <p>
              Design process: In 1–2 paragraphs (or bullet points), explain how this clock evolved from sketches to final
              form. Name the information visualization principles you applied (readability, hierarchy, color, layout,
              interaction, accessibility). [mention 2-3 design decisions and why]
            </p>
            <p>
              Self-reflection / future work: What would you improve next, and why? [add two improvements you'd make and explain why]
            </p>
          </article>
        </div>
      </div>
    </section>

    <!-- Homework 4: Sketch 1 -->
    <section id="tab3" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk3" class="sketch-container"></div>
      <div id="sketch-drawing-sk3" class="sketch-evolution">
        <div class="welcome-template hwk-template" aria-labelledby="sk3-notes-title">
          <h3 id="sk3-notes-title">Documenting iterative process</h3>
          <p class="small-note">Replace placeholders with your own notes and images.</p>
          <p>
            Context of use: Explain where your clocks/timers would be used, by whom, and what problem they help solve. [add 2-3 sentences]
          </p>

          <article class="clock-template">
            <h4>Final Clock 2</h4>
            <p class="small-note">Sketch iteration documentation (paper/hand-drawn photos)</p>
            <div class="iteration-grid">
              <figure class="iteration-item">
                <!-- <img src="images/clock2-sketch1.jpg" alt="Clock 2 sketch iteration 1" /> -->
                <div class="image-placeholder">Clock 2 sketch photo 1</div>
              </figure>
              <figure class="iteration-item">
                <!-- <img src="images/clock2-sketch2.jpg" alt="Clock 2 sketch iteration 2" /> -->
                <div class="image-placeholder">Clock 2 sketch photo 2</div>
              </figure>
            </div>
            <p>
              Design process: In 1–2 paragraphs (or bullet points), explain your iterations and final decisions. Make
              explicit which visualization considerations shaped the result. [mention 2-3 design decisions and why]
            </p>
            <p>
              Self-reflection / future work: What would you improve next, and why? [add two improvements you'd make and explain why]
            </p>
          </article>
        </div>
      </div>
    </section>

    <!-- Examples -->
    <section id="tab5" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk5" class="sketch-container"></div>
    </section>

    <section id="tab6" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk6" class="sketch-container"></div>
    </section>

    <section id="tab7" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk7" class="sketch-container"></div>
    </section>

    <section id="tab8" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk8" class="sketch-container"></div>
    </section>

    <section id="tab9" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk9" class="sketch-container"></div>
    </section>

    <section id="tab10" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk10" class="sketch-container"></div>
    </section>

    <section id="tab11" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk11" class="sketch-container"></div>
      <p>Adapted from Golan Levin, 2016-2018</p>
    </section>

    <section id="tab12" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk12" class="sketch-container"></div>
    </section>

    <section id="tab13" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk13" class="sketch-container"></div>
    </section>

    <section id="tab14" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk14" class="sketch-container"></div>
    </section>

    <section id="tab16" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk16" class="sketch-container"></div>
      <div id="sketch-drawing-sk16" class="sketch-evolution">
        <div class="welcome-template hwk-template" aria-labelledby="sk16-notes-title">
          <h3 id="sk16-notes-title">Documenting iterative process</h3>
          <p class="small-note">
            by Raizel Lagunero —
            <a href="https://github.com/lagunra/interactive_info_vis_474/blob/main/sketches/sketch4.js" target="_blank" rel="noopener noreferrer">source code</a>
          </p>
          <p>
            Context of use: This clock is based on a bookshelf that adds to the cozy, focused ambiance of studying.
          </p>

          <article class="clock-template">
            <h4>Ex 10</h4>
            <p>
              Design process: Each shelf represents either the hour, minute, or second of the day. The number of books
              per shelf represents that amount, and the potted plant shows the time for quick understanding. The
              background color represents AM and PM by light and dark shades, respectively, helping users intuitively
              recognize the time while maintaining a relaxed study atmosphere. This design is meant to be used as a
              background webpage to use while studying.
            </p>
            <p>
              Self-reflection / future work: Improve this design by adding more visual details, textures, and lighting
              effects that enhance a peaceful and studious scene.
            </p>
          </article>

          <h4>Sketch evolution</h4>
          <div class="iteration-grid">
            <figure class="iteration-item">
              <img src="images/lagunra/sk4-evolution-1.png" alt="Ex 10 sketch evolution step 1" />
              <figcaption>
                Step 1 — This sketch depicts timer that is represented by books on a bookshelf. It had features of
                representing a student's classes and the amount of time that was studied per class. However, this design
                was too cluttered and did not fit the ambiant visualization that I had envisioned.
              </figcaption>
            </figure>
            <figure class="iteration-item">
              <img src="images/lagunra/sk4-evolution-2.png" alt="Ex 10 sketch evolution step 2" />
              <figcaption>
                Step 2 — I simplified the design to only include three simple bookshelves, and instead of a timer, I
                implemented a clock. However, I recieved feedback that it was difficult to immediately count how many
                books were in each shelf, and it the clock did not show whether it was in the AM or PM.
              </figcaption>
            </figure>
            <figure class="iteration-item">
              <img src="images/lagunra/sk4-evolution-3.png" alt="Ex 10 sketch evolution step 3" />
              <figcaption>
                Step 3 — I added numeric labels on potted plants at the end of each shelf to allow the user to quickly
                understand what time it was. I also added a background feature that reflected what time of day it is;
                light background represents AM, and dark represents PM.
              </figcaption>
            </figure>
          </div>
        </div>
      </div>
    </section>

    <section id="tab17" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk17" class="sketch-container"></div>
      <div id="sketch-drawing-sk17" class="sketch-evolution">
        <div class="welcome-template hwk-template" aria-labelledby="sk17-notes-title">
          <h3 id="sk17-notes-title">Documenting iterative process</h3>
          <p class="small-note">
            by Yongxi Chen —
            <a href="https://github.com/yongxi1202/interactive_info_vis/blob/main/sketches/sketch2.js" target="_blank" rel="noopener noreferrer">source code</a>
          </p>
          <p>
            Context of use: This sketch represents the rhythm of box breathing, a meditation technique used to calm
            the mind and reduce stress by maintaining a steady 4-4-4-4 breathing cycle: breathe in, hold, breathe out,
            hold. It is designed for mindfulness practice, stress management sessions, and focus exercises where users
            need visual and temporal guidance to regulate their breathing.
          </p>

          <article class="clock-template">
            <h4>Ex 11</h4>
            <p>
              Design process:
            </p>
            <ol>
              <li>
                <strong>Square path visualization:</strong> The breathing cycle is represented by a square with four
                edges, where each edge corresponds to one breathing phase. A colored line progressively draws around
                the square, providing clear visual tracking of the 4-second intervals. The square shape reinforces the
                "box breathing" concept.
              </li>
              <li>
                <strong>Color-coded phases:</strong> Each of the four phases uses a distinct teal-to-gray gradient
                color (teal for inhale, light blue for first hold, mint for exhale, gray for second hold).
              </li>
              <li>
                <strong>Countdown timer with neon glow:</strong> Large text displays the current phase label. The neon
                glow effect on the lines creates a calming, modern aesthetic while maintaining high visibility against
                the starry background.
              </li>
            </ol>
            <p>
              Self-reflection / future work: Add customizable breathing durations (e.g., 3-3-3-3 or 5-5-5-5 cycles) to
              accommodate different skill levels. Include audio cues or gentle sound at phase transitions to support
              eyes-closed practice.
            </p>
          </article>

          <h4>Sketch evolution</h4>
          <div class="iteration-grid">
            <figure class="iteration-item">
              <img src="images/yongxi1202/IMG_2226.jpg" alt="Ex 11 sketch evolution step 1" />
              <figcaption><strong>Step 1 — Initial layout</strong></figcaption>
            </figure>
            <figure class="iteration-item">
              <img src="images/yongxi1202/IMG_2227.jpg" alt="Ex 11 sketch evolution step 2" />
              <figcaption><strong>Step 2 — After peer feedback</strong></figcaption>
            </figure>
            <figure class="iteration-item">
              <img src="images/yongxi1202/IMG_2228.jpg" alt="Ex 11 sketch evolution step 3" />
              <figcaption><strong>Step 3 — Final refined version</strong></figcaption>
            </figure>
          </div>
        </div>
      </div>
    </section>

    <section id="tab18" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk18" class="sketch-container"></div>
      <div id="sketch-drawing-sk18" class="sketch-evolution">
        <div class="welcome-template hwk-template" aria-labelledby="sk18-notes-title">
          <h3 id="sk18-notes-title">Documenting iterative process</h3>
          <p class="small-note">
            by Teresa Wang —
            <a href="https://github.com/TeresaWww/interactive_info_vis/blob/main/sketches/sketch2.js" target="_blank" rel="noopener noreferrer">source code</a>
          </p>
          <p>
            Context: This clock is designed for people who love making pancakes. It works as a fun, visual timer to use
            while cooking, helping users track how long their pancakes have been frying through animation and color
            changes.
          </p>

          <article class="clock-template">
            <h4>Ex 12</h4>
            <p>
              Design process: For my pancake clock, I designed the layout as a pancake cooking simulator. It shows a
              pan frying pancakes and then dropping them onto a plate, which makes the whole clock feel like a small
              kitchen scene. The animation was an intentional choice because it imitates a real cooking environment and
              makes the passage of time more visual and engaging.
            </p>
            <p>
              The color change of the pancakes is another key design choice. They start light and gradually turn golden
              brown as time passes. This helps people understand how long the pancake has been cooking without needing
              to read numbers, giving a more natural sense of time. I also added a countdown counter below the plate to
              give users a clear, easy-to-read time reference, balancing fun visuals with functional feedback.
            </p>
            <p>
              Since I wasn’t able to hand-draw detailed pancakes due to limited time, the visuals could have looked
              more polished if I had more time to refine them. I also chose warm, high-contrast colors (browns and
              yellows) for better visibility and accessibility.
            </p>
            <p>
              Self-reflection / future work: In the future, I would like to add more realistic pancake textures and
              steam effects to make the cooking scene feel livelier. I also plan to add features like letting users
              flip the pancakes with a click to include simple interactivity.
            </p>
          </article>

          <h4>Sketch evolution</h4>
          <div class="iteration-grid">
            <figure class="iteration-item">
              <img src="images/TeresaWww/pancakev1.png" alt="Ex 12 sketch evolution step 1" />
              <figcaption>Step 1 — initial layout and annotated design decisions</figcaption>
            </figure>
            <figure class="iteration-item">
              <img src="images/TeresaWww/pancakev2.png" alt="Ex 12 sketch evolution step 2" />
              <figcaption>Step 2 — second layout after peer feedback</figcaption>
            </figure>
            <figure class="iteration-item">
              <img src="images/TeresaWww/pancakev3.png" alt="Ex 12 sketch evolution step 3" />
              <figcaption>Step 3 — refined visuals and annotations</figcaption>
            </figure>
          </div>
        </div>
      </div>
    </section>

    <!-- Homework 5 -->
    <section id="tab15" class="tab-content" role="tabpanel">
      <div id="sketch-container-sk15" class="sketch-container"></div>
      <div id="sketch-drawing-sk15" class="sketch-evolution">
        <div class="welcome-template hwk-template" aria-labelledby="sk15-notes-title">
          <p>more details next week</p>
        </div>
      </div>
    </section>

  </main>

  <script src="script.js"></script>
</body>

</html>