All examples By author By category About

mayblue9

Full window Github gist

powermap_layout

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

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>

<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>

</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

<result-info ng-repeat="c in filteredResult" result="c" selected-item="selectedItem"></result-info>

</div>

<bubble-chart data="chartData"></bubble-chart>

</div>

<map-net data="result"></map-net>
            
        </div>

</div>
</div>

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 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>

Modified http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.15/angular.min.js