D3 Examples - node.js twitter experiment module

xxxxxxxxxx
 
<!DOCTYPE html>
<title>Node Twitter Experiment</title>
<meta charset="utf-8">
<style>
​
body {
    margin: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    text-align: center;
}
​
circle-graph {
    height: 90%;
    width: 90%;
    position: relative;
    margin-top: 5%;
    display: inline-block;
}
​
.node {
  stroke-width: 1.5px;
}
​
</style>
<body ng-app="myApp" ng-controller="myAppController">
    <circle-graph data="graph"></circle-graph>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.1.5/angular-local-storage.min.js"></script>
​
<script>
​
var app = angular.module('myApp', ['LocalStorageModule']);
​
app.config(function (localStorageServiceProvider) {
​
    localStorageServiceProvider
        .setPrefix('myApp');
​
});
​
app.controller('myAppController', function($scope, $http, localStorageService){
​
    if (localStorageService.isSupported) {
​
        var now = new Date();
​
        if ( localStorageService.get('CGData') ) {
​
            $scope.graph = localStorageService.get('CGData');
            console.log("data is in storage");
​
        } else {
​
            $http.get('/actors')
                .success( function(data, status, headers, config) {
                    var requestTime = new Date();
                    localStorageService.set('CGData', data);
                    localStorageService.set('CGDataRequestTime', requestTime);
​
                    $scope.graph = localStorageService.get('CGData');
                    console.log("data is set in storage");
                })
                .error(function(data, status, headers, config) {
                    console.log("error");
                })
​
        }
​
    } else {
​
        $http.get('/actors')
            .success( function(data, status, headers, config) {
                $scope.graph = data;
                console.log("data is set without storage");
            })
            .error(function(data, status, headers, config) {
                console.log("error");
            })
​
    }
​
})
​
app.directive('circleGraph', function(){
    function link(scope, el) {
​
        var el = el[0],
            width = el.clientWidth,
            height = el.clientHeight;
​
        scope.$watch('data', function(){
​
            var actors = scope.data;
​
            var color = d3.scale.linear()
                .range(["#ece7f2", "#2b8cbe"])
                .domain(d3.extent(actors, function(d) { return d.statuses_count; }));
​
            var pack = d3.layout.pack()
                .sort(null)
                .size([width, height])
                .value(function(d) { return d.followers_count; })
                .padding(5)
​
            if (actors) {
                var svg = d3.select(el).append("svg")
                    .attr("width", width)
                    .attr("height", height);
            }
​
            svg.selectAll("circle")
                .data(pack.nodes({children: actors}).slice(1))
              .enter().append("circle")
                .attr("class", "twitter-actor")
                .attr("r", function(d) { return d.r; })
                .attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; })
                .style("fill", function(d) { return color(d.statuses_count); });
​
        });
    }
    return {
        link: link,
        restrict: 'E',
        scope: { data: '='}
    }
})
​
</script>
    