You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: milestones/ProcessBook.html
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -397,7 +397,7 @@ <h3>How the Sketches Evolved</h3>
397
397
<h3>Key Technical Decisions</h3>
398
398
399
399
<p>
400
-
<strong>Scrollama</strong> wraps the IntersectionObserver API to determine which narrative step is active, letting us define scroll beats as HTML divs and trigger D3 transitions declaratively. We initially used <strong>Lenis</strong> for smooth scrolling but removed it after it caused lag with D3 force simulations — native CSS <code>scroll-behavior: smooth</code> proved sufficient. We centralized tooltip logic, color scales, and note family mappings in <code>main.js</code>; each of the eight visualization modules follows the same pattern: one init function, one JSON file, one SVG. Co-occurrence and Sankey computations were moved to Python after the JavaScript version took 4+ seconds.
400
+
<strong>Scrollama</strong> wraps the IntersectionObserver API to determine which narrative step is active, letting us define scroll beats as HTML divs and trigger D3 transitions declaratively. We initially used <strong>Lenis</strong> for smooth scrolling but removed it after it caused lag with D3 force simulations, so native CSS <code>scroll-behavior: smooth</code> proved sufficient. We centralized tooltip logic, color scales, and note family mappings in <code>main.js</code>; each of the eight visualization modules follows the same pattern: one init function, one JSON file, one SVG. Co-occurrence and Sankey computations were moved to Python after the JavaScript version took 4+ seconds.
401
401
</p>
402
402
403
403
<divclass="sketch-box">
@@ -474,7 +474,7 @@ <h3>Key Challenges</h3>
474
474
</p>
475
475
476
476
<p>
477
-
<strong>SVG sizing bug.</strong> Sticky containers inside flex parents had zero computed width on page load. The fix: lazy initialization via IntersectionObserver — each visualization only initializes when its container enters the viewport.
477
+
<strong>SVG sizing bug.</strong> Sticky containers inside flex parents had zero computed width on page load. The fix was lazy initialization via IntersectionObserver, where each visualization only initializes when its container enters the viewport.
478
478
</p>
479
479
480
480
<p>
@@ -500,11 +500,11 @@ <h2>Key Insights</h2>
500
500
</div>
501
501
502
502
<divclass="insight">
503
-
<strong>Composition trends mirror culture; price does not mirror composition.</strong> The timeline reveals a clear arc from aldehydic glamour (1970s) through clean aquatic (1990s) to gourmand and oud (2010s–2020s). Yet the price scatter shows no clean correlation between ingredient sophistication and market value — brand cachet drives pricing more than raw composition.
503
+
<strong>Composition trends mirror culture; price does not mirror composition.</strong> The timeline reveals a clear arc from aldehydic glamour (1970s) through clean aquatic (1990s) to gourmand and oud (2010s–2020s). Yet the price scatter shows no clean correlation between ingredient sophistication and market value. Brand cachet drives pricing more than raw composition.
504
504
</div>
505
505
506
506
<divclass="insight">
507
-
<strong>Geography shapes scent identity.</strong> An interactive world map with radar-on-hover (added after M2 feedback) reveals that the Middle East stands apart from every other region — higher woody, spicy, and musky proportions reflect an oud-based tradition fundamentally different from the Western floral canon. Europe and North America overlap heavily, while Asia favors lighter, citrus-forward profiles.
507
+
<strong>Geography shapes scent identity.</strong> An interactive world map with radar-on-hover (added after M2 feedback) reveals that the Middle East stands apart from every other region. Higher woody, spicy, and musky proportions reflect an oud-based tradition fundamentally different from the Western floral canon. Europe and North America overlap heavily, while Asia favors lighter, citrus-forward profiles.
508
508
</div>
509
509
510
510
<h2>Peer Assessment</h2>
@@ -553,7 +553,7 @@ <h2>What We Would Do Differently</h2>
553
553
<h2>Conclusion</h2>
554
554
555
555
<p>
556
-
The Anatomy of Scent transforms 24,063 rows of perfume data into a story anyone can follow. Through eight interactive visualizations — including a world map added in response to M2 feedback — we made the hidden structure of perfumery visible and explorable across composition, gender, time, geography, and price. The project taught us that the hardest part of data visualization is not the code or the data. It is choosing what to show, when to show it, and how much to let the reader discover on their own.
556
+
The Anatomy of Scent transforms 24,063 rows of perfume data into a story anyone can follow. Through eight interactive visualizations, including a world map added in response to M2 feedback, we made the hidden structure of perfumery visible and explorable across composition, gender, time, geography, and price. The project taught us that the hardest part of data visualization is not the code or the data. It is choosing what to show, when to show it, and how much to let the reader discover on their own.
0 commit comments