Recommended way to visualize data with AngularJS and D3.js?

http://stackoverflow.com/questions/23147617/a-current-recommended-way-to-visualize-data-with-angularjs-and-d3-js

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<div ng-app="phonesListApp">
    
    <div ng-controller="itemsListCtrl">
        <span ng-repeat="d in data">
            <a href="#" ng-click="toggle(d.model)" ng-class="{'selected': d.selected}">{{d.model}}</a>&nbsp;
        </span>
    </div>
    
    <div ng-controller="itemsGraphCtrl">
        <svg class="canvas" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
        </svg>
    </div>
    
</div>

CSS

.canvas{
    border: 1px black solid;
}

.selected{
    font-weight: bold;
}

JavaScript

angular.module('phonesListApp', [])

    .factory('dataStore', function(){
    
        return {
            data: [{
                model: 'Item 1',
                selected: false
            }, {
                model: 'Item 2',
                selected: false
            }, {
                model: 'Item 3',
                selected: false
            }, {
                model: 'Item 4',
                selected: false
            }]
        };
        
    })

    .controller("itemsListCtrl", function($scope, dataStore){
        
        $scope.data = dataStore.data;
        
        $scope.toggle = function(model){
            for (var i = 0 ; i < dataStore.data.length ; i++){
                if (dataStore.data[i].model === model){
                    dataStore.data[i].selected = !dataStore.data[i].selected;
                    break;
                }
            }
        }
        
    })

    .controller("itemsGraphCtrl", function($scope, dataStore){

       $scope.data = dataStore.data;
        
       var canvas = d3.select(".canvas");
        
        //enter:
        canvas.selectAll('circle').data($scope.data)
            .enter().append('circle')
            .attr('cx', function(d, i){
                return i * 30 + 10;
            })
            .attr('cy', 50)
            .attr('r', 5)
            .style('fill','white')
            .style('stroke', 1)
            .on('click', function(d){
                $scope.$apply(function(){
                    d.selected = !d.selected;
                });
            });
        
       function update(){
           canvas.selectAll('circle').data($scope.data)
               .style('fill', function(d){
                   return d.selected ? 'black' : 'white';
               });
       }
        
       $scope.$watch('data',update,true);
        
    });