Viewership information scatter chart for AMC's The Walking Dead TV series

scope.episodes = [
  { season: 1, title: 'Days Gone Bye', air_date: '2010-10-31', us_viewers: 5.35 },
  { season: 1, title: 'Guts', air_date: '2010-11-07', us_viewers: 4.71 },
 // ...
];

1. Specify the X and Y accessor expressions for a scatter plot directive: accessorX and accessorY

<scatter
   data="episodes"
   accessor-x="d.air_date"
   accessor-y="d.us_viewers">
</scatter>

2. In scope configuration on the directive, use an & instead of a =

 scope: { accessorX: '&', accessorY: '&', data: '=' }

3. Use the scope expressions to access the x and y values of data

 var d = data[0];
 var xVal = scope.accessorX({ d: d});

• We can add additional variables. Ex: we could expose the index variable i

 var i = 0;
 var d = data[0];
 var xVal = scope.accessorX({ d: d, i: i});

4. Apply for other properties, like color, size,... Ex: we config scatter's color by season number

• In html file

<scatter data="episodes" color="color(d.season)" ...></scatter>

• In controller

 $scope.color = d3.scaleOrdinal(d3.schemeCategory10);