D3 Examples - powermap

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js"></script>
    <script src="bubble-chart.js"></script>
    <script src="bar-chart1.js"></script>
​
​
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <style>
        /* base */
        body {
            font-family: sans-serif;
            width: 800px;
            margin: 1em auto;
        }
​
        body, a, a:focus, a:active {
            color: #333;
        }
​
        .nav {
            text-align: center;
            margin-bottom: 2em;
        }
        .nav h1 {
            margin-bottom: .5em;
        }
​
        .nav a {
            width: 10px;
            height: 10px;
            display: inline-block;
            border-radius: 50%;
            border: 2px solid #555;
        }
​
        .nav a:hover {
            background-color: #bbb;
        }
        .nav a.active {
            background-color: #555;
        }
​
        /*
        text {
            fill: white !important;
        }*/
​
        /*angular */
        h1 {
            color:  #68b5dd;
        }
        .left-panel {
            float: left;
            width: 300px;
        }
​
        result-info div {
            border: 2px solid #68b5dd;
            border-radius: 4px;
            padding: 0 1em;
            margin: 1em 0;
        }
​
        result-info h3 {
            color:  #68b5dd;
        }
​
        .chart-panel {
            border: 1px solid #999;
            padding: 1em;
            float: right;
            width: 430px;
            height: 450px;
        }
​
        .chart-panel circle {
            /*fill: #f8f8f8 !important;
            stroke: #bbb;*/
            fill: #68b5dd !important;
            stroke: #7ae1f1;
            stroke-width: 2px;
        }
​
        .chart-panel .node text {
            fill: white;
        }
​
        .chart-panel .message {
            fill: #47b4b3 !important;
            font-weight: bold;
        }
​
​
        .chart-panel2 {
            width: 430px;
            height:450px;
            margin-top: 20px;
​
            border: 1px solid #999;
            padding: 1em;
            float: right;
            svg:  #654e75;
​
        }
​
        text {
            fill: #654e75;!important;
            font: 13px sans-serif;
            pointer-events: none;
​
        }
       /* network */
        .link {
            fill: none;
            stroke: #bbb;
            stroke-width: 2px;
​
        }
        .node {
            font-color: #bbb;
        }
        svg{     background-color: #d7f1fb;}
​
​
​
    </style>
</head>
​
​
<body class='angular'>
<div class="nav">
    <h4>word2vec_powermap</h4>
</div>
​
<div ng-app="d3-demo">
​
    <div ng-controller="PowermapCtrl">
        <div class="top-panel">
​
            <!--add table2 -->
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th>Word</th>
                    <th>Score</th>
                    <th>Cost</th>
                </tr>
                <tbody>
                <tr ng-repeat="result in result |filter: query | orderBy:orderProperty">
                    <td>{{result.text}}</td>
                    <td>{{result.score}}</td>
                    <td>{{result.cost}}</td>
                </tr>
​
                </tbody>
                </thead>
            </table>
​
            <!--add table2 -->
​
        </div>
​
​
        <div class="left-panel">
            <input type="text" ng-model="query" placeholder="Filter">
            <input type="radio" ng-model="selectedItem" value="score">Score
            <input type="radio" ng-model="selectedItem" value="cost">Cost
​
           <!--share filtered result-->
            <result-info ng-repeat="c in filteredResult" result="c" selected-item="selectedItem"></result-info>
​
        </div>
​
        <div class="chart-panel">
​
            <bubble-chart data="chartData"></bubble-chart>
​
        </div>
​
        <div class="chart-panel2 ">
​
            <map-net data="result"></map-net>
            <!--
            <pink-circles data="result"></pink-circles>
            -->
        </div>
​
​
    </div>
</div>
​
​
<script>
    var data1= [  {text: "이혜훈", score: 0.879243922234, cost: 1},
        {text: "노회찬", score:  0.779243922234, cost:2},
        {text: "정동영", score:  0.679243922234, cost: 3},
        {text: "이준석", score:  0.579243922234, cost: 4},
        {text: "문재인", score:  0.479243922234, cost: 5},
      ];
​
    angular.module('d3-demo', [])
​
            .controller('PowermapCtrl', ['$scope', '$filter', function($scope, $filter) {
​
                $scope.selectedItem = "score";
​
                $scope.result = data1;
​
                //share filtered item
                $scope.$watch('query', function(q) {
                    $scope.filteredResult = $filter('filter')($scope.result, q);
                });
​
               // vis + selected_Item
                $scope.$watchCollection('[filteredResult, selectedItem]', function(arr) {
                    $scope.chartData = {
                        name: 'result', //name
                        children: arr[0].map(function(c) {
                            return {name: c.text, size: c[arr[1]] }; // c.name
​
                        })
                    };
                });
​
​
​
            }])
​
            .directive('resultInfo', function() {
                return {
                    restrict: 'E',
                    template: '<div><h3>{{result.text}}</h3><p>The {{selectedItem}} was {{result[selectedItem]}}</p></div>',
                    scope: {
                        result: '=',
                        selectedItem: '='
                    }
                };
            })
            .directive('bubbleChart', function() {
                var chart = d3.charts.bubble();
​
                return {
                    restrict: 'E',
                    scope: {
                        data: '='
                    },
​
                    link: function(scope, element, attrs) {
                      
​
                        scope.$watch('data', function(data) {
​
                            d3.select(element[0])
                                    .datum(data)
                                    .call(chart);
​
                        });
                    }
                };
            })
            .directive('barChart',function(){
                var  chart  =d3.charts.bar();
​
                return {
                    restrict: 'E',
                    scope: {
                        data: '='
                    },
                    link: function(scope,element, attrs){
                        scope.$watch('data',function(data){
​
                            d3.select(element[0])
                                    .datum(data)
                                    .call(chart);
                        });
                    }
                };
            })
            .directive('pinkCircles', function() {
                return {
                    restrict: 'E',
                    /*scope: {
                     data: '='
                     },
                     */
                    //replace: true,
                    link: function(scope, elem, attrs) {
                        try {
​
                            var data = scope.result ;
                            
                            console.log("dataset__:",data);
                            i = 0; // ctrl + D
​
                            /*
                             var num = parseInt(scope.num);
​
                             for(i=0; i<7; i++){
                             dataset.push(Math.round(Math.random()*100));
                             }
                             */
                            var sampleSVG = d3.select(elem[0]) 
                                    .append("svg")
                                    .attr("width", 400) 
                                    .attr("height", 75);
​
                            sampleSVG.selectAll("circle")
                                    .data(data)
                                    .enter().append("circle")
                                    .style("stroke", "gray")
                                    .style("fill", "pink")
                                    .attr("r", function(d){ return d.score*5; })
                                    .attr("cx", function(d, i){return (i+1)*80})
                                    .attr("cy", 35);
                        } catch (e) {
                            console.log(e);
                        }
                    }
                };
            })
            .directive('mapNet', function() {
                return {
                    restrict: 'E',
                    /*scope: {
                     data: '='
                     },
                     */
                    //replace: true,
                    link: function(scope, elem, attrs) {
                        try {
​
                            var data = scope.result ;
​
                            console.log("nodes__:",data);
​
                            var nodes = data;
                            var keyword = [{"text": "유시민", "score": 1 , "cost": 1}];
                            nodes.unshift(keyword[0]);
​
                            var links = new Array();
​
                            var index = 0;
                           //compute nodes from links
                            nodes.forEach(function(node) {
                                if (index != 0){
                                    links.push({ "source": nodes[0], "target": node}); }
                                index ++;
                            });
​
​
​
                            var width = 400;
                            var height= 400;
​
​
                            var  maxValue = d3.max(nodes, function(d) {
                                return d.score*100;
                            });
​
​
                            var  color1 = d3.scale.linear()
                                    .range(["#f7c3a7","#67001f"])
                                    .domain([0, maxValue]);
​
                            var color = d3.scale.linear()
                                    .range(['#284ff2', '#28cbf2', '#d9a238', '#d94b38', '#b91600'])
                                    .domain([1, 0.8, 0.6, 0.3, 0])
​
​
​
                            var force = d3.layout.force()
                                    .nodes(nodes)
                                    .links(links)
                                //.links(d3.values(links))
                                    .size([width, height])
                                    .linkDistance(function(d){
                                        return (100 / d.target.score);})
                                    .charge(-300)
                                    .on("tick", tick)
                                    .start();
​
                            var svg = d3.select(elem[0]).append("svg")
                                    .attr("width", width)
                                    .attr("height", height);
​
​
                            // add link or arrow
                            var path = svg.append("svg").selectAll("path")
                                    .data(force.links())
                                    .enter().append("path")
                                    .attr("class", "link")
                                    .style("stroke",  "pink");
​
​
​
                            // define node
                            var node = svg.selectAll(".node")
                                    .data(force.nodes())
                                    .enter().append("g")
                                    .attr("class", "node")
                                //.on("click", click)
                                //.on("dblclick", dblclick)
                                    .call(force.drag);
​
                            // add node
                            node.append("circle")
                                //.attr("r",3.5)
                                    .attr("r", function(d){return (30 * (d.score));} )
                                    .style("fill", function(d) { return color(d.score); }); //d.name
​
                            // add text
                            node.append("text")
                                    .attr("dy", ".35em")
                                    .attr("text-anchor", "middle")
                                    .text(function(d) { return d.text; })
                                    .style("fill","#DD3EAF")
                                    .style("font-weight", "bold")
​
                            // add curvy lines
                            function tick() {
​
                                nodes[0].x = width /2;
                                nodes[0].y = height/2;
                                //add curvy line
                                path.attr("d", function(d) {
​
                                    var dx = d.target.x - d.source.x,
                                            dy = d.target.y - d.source.y,
                                            dr = Math.sqrt(dx * dx + dy * dy);
​
                                    return "M" +
                                            d.source.x + "," +
                                            d.source.y + "A" +
                                            dr + "," + dr + " 0 0,1 " +
                                            d.target.x + "," +
                                            d.target.y;
                                });
​
                                // end curvy line
​
                                node
                                        .attr("transform", function(d) {
                                            return "translate(" + d.x + "," + d.y + ")"; });
​
​
​
                            }
​
​
                        } catch (e) {
                            console.log(e);
                        }
                    }
                };
            })
​
​
​
</script>
​
</body>
​
</html>
    