diff --git a/example/src/app/app.component.ts b/example/src/app/app.component.ts
index 99bbfd8474da9e89506b8901b699b2898d1c4258..5531090ba162d575acb90f7204920c9f67721497 100644
--- a/example/src/app/app.component.ts
+++ b/example/src/app/app.component.ts
@@ -1,9 +1,9 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { nshmpHaz } from '@ghsc/nshmp-web-utils';
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+import { nshmpHaz} from '@ghsc/nshmp-web-utils';
 import { DisaggGraphView, Disaggregation, DisaggResponse } from '@nshmp/disagg-d3/src/disagg';
 import { Collection } from '@nshmp/disagg-d3/src/mvc';
 
-import deagg from '../assets/deagg.json';
+import disagg from '../assets/disagg-response.json';
 
 @Component({
   selector: 'app-root',
@@ -12,8 +12,9 @@ import deagg from '../assets/deagg.json';
 })
 export class AppComponent implements AfterViewInit {
   title = 'Disaggregation';
-
-  data = deagg.response as nshmpHaz.disaggService.DisaggResponseData;
+  disaggCollection = new Collection<Disaggregation>([]);
+  data = disagg.response as nshmpHaz.disaggService.DisaggResponseData;
+  view: DisaggGraphView;
 
   @ViewChild('example')
   el: ElementRef<HTMLElement>;
@@ -22,13 +23,28 @@ export class AppComponent implements AfterViewInit {
 
   ngAfterViewInit(): void {
     const response = new DisaggResponse(this.data);
-    const deaggs = response.get<Collection<Disaggregation>>('disaggregations').data();
-    const collection = new Collection(deaggs);
-    collection.select(collection.data()[0]);
+    const disaggs = response.get<Collection<Disaggregation>>('disaggregations').data();
+    this.disaggCollection.addAll(disaggs);
+    this.disaggCollection.select(this.disaggCollection.data()[0]);
 
-    const view = new DisaggGraphView({
+    this.view = new DisaggGraphView({
       el: this.el.nativeElement,
-      collection,
+      collection: this.disaggCollection,
+      bounds: this.bounds(this.data),
     });
   }
+
+  bounds(data: nshmpHaz.disaggService.DisaggResponseData): number[][]{
+    const totalComponent = data.disaggs[0].data.find(d => d.component === 'Total');
+    return DisaggGraphView.calculateBounds(totalComponent.data);
+  }
+
+  onComponentChange(component: string): void {
+    const componentData = this.disaggCollection
+      .data()
+      .find(d => d.get('component') === component);
+
+   this.disaggCollection.select(componentData);
+  }
+
 }