"Storytelling with your data" by Aysegul Yonet

## Overview The speaker introduces themselves as 'Aisha' (noting potential transcription discrepancy with title), a Senior Software Engineer at Autodesk A360 Cloud Platform and Google Developer Expert in Angular. This was their first Strange Loop presentation. Beyond their primary role, they educate through Girl Develop It, Black Girls Code, AnyCanons (teaching human trafficking survivors to code), and mentoring programs including Last Mile at San Quentin prison. The core topic: how to help users understand complex data through visualization and storytelling.

## The Problem: Data Without Context Autodesk's 3D viewer is powerful but reveals a critical gap: providing access to complex models and robust tools is insufficient if users don't understand what they're seeing. Complex 3D models (more intricate than the Golden Gate Bridge) leave users confused about how to interact with or interpret the data. The Autodesk Forge platform offers open APIs that developers have used creatively—one example displays building sensor data (heat and gas inefficiencies) overlaid as green dots on 3D models; another created an animated Ikea furniture assembly guide. These demonstrated that visualizations need narrative context to be useful.

## Angular 2: Modern Architecture for Data Apps Angular 2 had just released (beta completion the week of the conference). Key improvements include: modular code organization making applications easier to understand; performance improvements; eliminating the need to ship the compiler to clients (60% reduction in shipped Angular code). Angular CLI provides scaffolding and project management. NG modules organize components, services, and functionality into reusable units. Angular's animation system allows defining reusable triggers for state transitions and keyframe animations. The speaker emphasized treating parent-level "smart components" as data handlers while keeping child components application-agnostic—preventing tight coupling between backend data structure and component implementation.

## D3.js: Flexible Data Visualization D3.js (Data Driven Documents) underwent major changes in version 4. Key features: modular architecture allowing developers to load only needed parts; new merge function for managing enter/exit patterns with dynamic datasets (crucial for real-time data); scales for mapping data ranges to display dimensions; transitions and the enter/append/exit/remove pattern for data binding. TypeScript integration is valuable because D3 is "very picky"—missing or incorrectly-typed data points cause silent visualization failures. RxJS (originally Microsoft, now Netflix-maintained) enables observables instead of promises for more efficient asynchronous operations.

## Angular + D3 Pattern Wrapping D3 functions into reusable Angular components allows parameterized visualizations (bar charts, scatter plots) that can be reused across applications. Angular's component structure and change detection mesh seamlessly with D3's data-driven approach. A practical example: a bar chart component sets up SVG, populates data, and draws axes—repeating these operations whenever data changes. This combination avoids code repetition while building sophisticated visualization libraries.

## Case Study: Syrian Refugee Data The speaker demonstrated storytelling with multiple perspectives on the same dataset: refugee count by country, GDP comparison (showing wealthy nations aren't accepting proportionally), country area, population impact, and GDP per capita. Each visualization revealed different aspects; together they provided genuine insight. The principle: complex visualizations shouldn't attempt showing everything simultaneously—multiple focused views help audiences understand data meaning.

## Takeaways Use appropriate tools: D3 for truly complex custom visualizations, simpler libraries for straightforward needs. Angular 2's maturity, tooling (CLI, Chrome DevTools, open source charts), and component architecture excel for data-driven applications. TypeScript prevents type errors before visualization failures. The fundamental message: storytelling matters. Raw data access and complex tools mean nothing without helping users perceive and understand information.