render_pack : function(){
var root = {collection : this.collection, name : "trusts", _class : "root"},
pack = d3.layout.pack()
.sort(null)
.size([SVG.width, SVG.height])
.value(function(d){
return d.collection ? d.collection.length : 1;
});
root.children = this.generate_tree(root, 0);
var svg = d3.select("#circle-pack"),
chart = svg.append("svg:svg")
.attr("width", SVG.width)
.attr("height", SVG.height),
enter = chart.selectAll("g").data(pack(root)).enter()
.append("svg:g");
enter.append("svg:circle")
.attr("r", function(d){ return d.r})
.attr("cx", function(d){ return d.x})
.attr("cy", function(d){ return d.y})
.attr("class", function(d){ return d._class})
//.attr("stroke", "black")
//.attr("fill", "black")
//.attr("stroke", "white")
//.attr("stroke-width", 1);
/*
.attr("y", function(d){ return d.y})
.attr("width", function(d){ return d.dx})
.attr("height", function(d){ return d.dy})
.attr("fill", function(d,i){ return Colors(i)});
*/
/*
enter.append("svg:text")
.text(function(d){ return d.value})
.attr("x", function (d) {return d.x+5;})
.attr("y", function (d) {return d.y+20;})
.attr("dy", ".35em")
.attr("text-anchor", "middle");
*/
},
update_pack : function(){
var root = {collection : this.collection, name : "trusts", _class : "root"},
pack = d3.layout.pack()
.sort(null)
.size([SVG.width, SVG.height])
.value(function(d){
return d.collection ? d.collection.length : 1;
});
root.children = this.generate_tree(root, 0);
var svg = d3.select("#circle-pack svg"),
circles = svg.selectAll("g");
circles.remove();
circles = svg.selectAll("g").data(pack(root));
circles.enter().append("svg:g")
.append("svg:circle")
.attr("r", function(d){ return d.r})
.attr("cx", function(d){ return d.x})
.attr("cy", function(d){ return d.y})
.attr("class", function(d){ return d._class});
},
right: 5,
left: 5
}
var topbuffer = 20;
}
var width = diameter-margin.left-margin.right;
var height = diameter-topbuffer; //because the bubbles aren't arranged so they're square
var svg = d3.select(".bubbles").append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + 0 + ")"); // giving the bubbles some padding, so that the text won't get cut off on the right and left margins
var bubble = d3.layout.pack()
//.sort(null)
.sort(function(a, b) {
return -(a.value - b.value);
}) // sorting from biggest to smallest
.size([width, height])
.padding(2)
.value(d => d.Visas);
// show tooltip
var tooltip = document.querySelector(".tooltip");
var looping = true;
var showTooltip = function(d, target) {
if (!looping) {
svg.selectAll('.node').selectAll("circle")
$('#dependency-counts-graph').each(function () {
var diameter = $(this).width()
, format = d3.format(',d')
, bubble = d3.layout.pack().sort(null).size([
diameter,
diameter
]).padding(1.5);
var svg = d3.select(this).append('svg')
.attr('width', diameter)
.attr('height', diameter)
.attr('class', 'bubble');
david.renderDependencyCountsGraph = function(data) {
if (!Object.keys(data).length) {
return;
}
// Get the max count
var max = Object.keys(data).reduce(function(max, depName) {
return data[depName] > max ? data[depName] : max;
}, 1);
var color = d3.scale.linear().domain([
1,
max
]).range([
'#b8e3f3',
'#30aedc'
]);
function transformData(data) {
return {
children: Object.keys(data).map(function(depName) {
return {
depName: depName,
value: data[depName]
};
})
};
}
var nodes = svg.selectAll('.node').data(bubble.nodes(transformData(data)).filter(function(d) {
return !d.children;
}), function(d) {
return d.depName;
});
var nodeEnter = nodes.enter()
.append('g')
.attr('class', 'node')
.attr('transform', function () {
return 'translate(' + diameter / 2 + ',' + diameter / 2 + ')';
}).on('click', function(d) {
window.location = 'http://npmjs.org/package/' + d.depName;
});
nodeEnter.append('title').text(function(d) {
return d.depName + ': ' + format(d.value);
});
nodeEnter.append('circle');
nodeEnter.append('text')
.attr('dy', '.3em')
.style('text-anchor', 'middle');
var nodeUpdate = nodes.transition().attr('transform', function(d) {
return 'translate(' + d.x + ',' + d.y + ')';
});
nodeUpdate.select('circle').attr('r', function(d) {
return d.r;
}).style('fill', function(d) {
return color(d.value);
});
nodeUpdate.select('text').text(function(d) {
return d.depName.substring(0, d.r / 3);
});
nodes.exit().transition().remove().select('circle').attr('r', 0);
};
});
module.exports = function () {
var s = d3.scale.threshold().domain([3, 5, 10, 15, 20])
.range(['Less than 3', '3 - 5', '5 - 10', '10 - 15', '15 - 20', 'More than 20'])
, tooltip = _tooltip('school-sample-summary', 300)
, range = d3.select('#thresholds')
.on('change', draw)
range.selectAll('option')
.data(s.range())
.enter()
.append('option')
.text(String)
var width = window.innerWidth
, height = 900 // TODO Drive by lookup
, s = d3.scale.threshold().domain([3, 5, 10, 15, 20])
.range(['Less than 3', '3 - 5', '5 - 10', '10 - 15', '15 - 20', 'More than 20'])
, svg = d3.select('#vis')
.append('svg')
.attr('width', width)
.attr('height', height)
, bubble = d3.layout.pack()
.sort(null)
.size([width, height])
.padding(1.5)
.value(function (d) {
return d[range.node().value]
})
draw()
function draw () {
var _data = window.data.lead.filter(function (d) {
return d[range.node().value] > 0
})
, node = svg.selectAll('.node')
.data(bubble.nodes({children: _data})
.filter(function (d) {
return !d.children
}))
, enter = node.enter()
.append('g')
.attr('class', 'node')
enter.append('circle')
.attr('fill', '#beccae')
.on('mouseover', function (d) {
d3.select(this).attr('stroke', 'black')
var html = '<span class="name">School: </span><span class="value">' + d.name + ' (' + d.ulcs + ')</span><br/>' +
'<span class="name">Year: </span><span class="value">' + d.year + '</span><br />' +
'<span class="name">Value: </span><span class="value">' + d[range.node().value] + '</span><br/>'
tooltip.show(html, d3.event)
})
.on('mouseout', function (d) {
d3.select(this)
.attr('stroke', '')
tooltip.hide()
})
node.exit().remove()
node.attr('transform', function (d) {
return 'translate(' + d.x + ',' + d.y + ')'
})
node.select('circle')
.attr('r', function (d) {
return d.r
})
enter.append('text')
.attr('dy', '.3em')
.style('text-anchor', 'middle')
.style('pointer-events', 'none')
node.select('text')
.text(function (d) {
return d[range.node().value]
})
}
}
module.controller('KbnCirclesVisController', function ($scope, $element, $rootScope, Private) {
var circlesAggResponse = Private(require('./lib/agg_response'));
var svgRoot = $element[0];
var color = d3.scale.category10();
var margin = 20;
var width = innerWidth / 2;
var height = 600;
var div;
var svg;
var r = width / 2;
var x = d3.scale.linear().range([0,r]);
var y = d3.scale.linear().range([0,r]);
var node, root;
var pack = d3.layout.pack()
.size([r, r])
.value(function (d) { return d.size; });
var _buildVis = function (data) {
if (!data.children.length) return;
div = d3.select(svgRoot);
svg = div.append('svg')
.attr('width', '100%')
.attr('height', height)
.append('g')
.attr('transform', 'translate(' + (width - r) / 2 + ',' + (height - r) / 2 + ')')
.call(d3.behavior.zoom().scaleExtent([-18,18])
.on("zoom", zoom))
.append("g");
node = root = data;
var nodes = pack.nodes(data);
svg.selectAll("circle").data(nodes).enter().append("svg:circle").attr("class", function (d) {
return d.children ? "parent" : "child";
}).attr("cx", function (d) {
return d.x;
}).attr("cy", function (d) {
return d.y;
}).attr("r", function (d) {
return d.r;
})
.attr("transform", function(d) { return "translate(" + d + ")"; })
.style("fill", function (d) {
return color(d.name);
});
if ($scope.vis.params.showLabels) {
svg.selectAll("text").data(nodes).enter().append("svg:text").attr("class", function (d) {
return d.children ? "parent" : "child";
}).attr("x", function (d) {
return d.x;
}).attr("y", function (d) {
return d.y;
}).attr("dy", function (d) {
return d.children ? ".35em" : "-0.35em";
}).attr("text-anchor", "middle").style("opacity", function (d) {
return d.r > 20 ? 1 : .5;
}).text(function (d) {
return d.name == "flare" ? "" : d.name;
});
}
if ($scope.vis.params.showValues) {
svg.selectAll("text.value").data(nodes).enter().append("svg:text").attr("class", function (d) {
return "value";
}).attr("x", function (d) {
return d.x;
}).attr("y", function (d) {
return (d.y + 15);
}).attr("dy", function (d) {
return d.children ? ".35em" : "-0.35em";
}).attr("text-anchor", "middle").style("opacity", function (d) {
return d.r > 20 ? 1 : .5;
}).text(function (d) {
return d.name == "flare" ? "" : d.value;
});
}
if ($scope.vis.params.enableZoom) {
d3.select(window).on("click", function() { zoom(root); });
}
};
function zoom() {
if ($scope.vis.params.enableZoom) {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
}
var _render = function (data) {
d3.select(svgRoot).selectAll('svg').remove();
_buildVis(data.children);
};
$scope.$watch('esResponse', function (resp) {
if (resp) {
var chartData = circlesAggResponse($scope.vis, resp);
_render(chartData);
}
});
});
/*
* View controller
*/
function Viz(selector, data) {
if (!(this instanceof Viz)) {
return new Viz($el);
}
var heirarchy = {
name: 'Root',
children: [],
size: 0
};
_.each(data, function(d) {
heirarchy.children.push({
name: d.player.firstName,
children: null,
size: d.score
});
});
var hi = data[0].score;
var lo = data[data.length - 1].score;
if(data.length < 75) {
_.each(_.range(75 - data.length), function(i) {
heirarchy.children.push({
name: 'Empty',
children: null,
size: (Math.random() * (hi - lo)) + lo
})
})
}
var $el = $(selector);
this.$el = $el;
var self = this;
var width = $el.width();
var height = $el.height();
var margin = {
left: 0,
top: 0,
right: 0,
bottom: 0
};
console.log('initializing bubbles');
console.log(width, height);
var bubble = d3.layout.pack()
.sort( function(a, b) { return a.size > b.size;} ) // basically a < b always
.size([width, height])
.padding(10);
var svg = d3.select(this.$el[0])
.append('svg:svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'leaderboard-cirle-container')
.append('svg:g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var node = svg.selectAll(".node")
.data(bubble.nodes(classes(heirarchy))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", function(d) {
return 'node ' + d.className
})
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d, i) {
return colors[Math.floor(Math.random() * colors.length)];
});
node.append("text")
.text(function(d) { return d.value; })
.attr('dy', 15)
.attr('text-anchor', 'middle');
node.append("text")
.text(function(d) { return d.className; })
.attr('dy', -5)
.attr('text-anchor', 'middle');
};
/////////////////////////////////////////////////////////////////
//
//
/////////////////////////////////////////////////////////////////
createGraph(container, root) {
var style = window.getComputedStyle(container);
var w = parseInt(style.width.replace('px', ''));
var h = parseInt(style.height.replace('px', ''));
var margin = 5,
diameter = h;
var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var pack = d3.layout.pack()
.padding(2)
.size([w - margin, h - margin])
.value(function(d) {
return 300;
//return d.size;
})
var svg = d3.select(".d3").append("svg")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
var focus = root,
nodes = pack.nodes(root),
view;
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) {
return d.parent ? (d.children && d.children.length) ?
"node" : "node node--leaf" : "node node--root";
})
.style("fill", function(d) {
return (d.children && d.children.length) ? color(d.depth) : null;
})
.on("click", function(d) {
if (focus !== d) {
zoom(d);
d3.event.stopPropagation();
}
});
var text = svg.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function(d) {
return d.parent === root ? 1 : 0;
})
.style("display", function(d) {
return d.parent === root ? "inline" : "none";
})
.text(function(d) { return d.name; });
var node = svg.selectAll("circle,text");
d3.select("body")
.on("click", function() { zoom(root); });
zoomTo([root.x, root.y, root.r * 2 + margin]);
function zoom(d) {
var focus0 = focus; focus = d;
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", function(d) {
var i = d3.interpolateZoom(view, [
focus.x, focus.y, focus.r * 2 + margin
]);
return function(t) { zoomTo(i(t)); };
});
transition.selectAll("text")
.filter(function(d) {
return d.parent === focus || this.style.display === "inline";
})
.style("fill-opacity", function(d) {
return d.parent === focus ? 1 : 0;
})
.each("start", function(d) {
if (d.parent === focus) this.style.display = "inline";
})
.each("end", function(d) {
if (d.parent !== focus) this.style.display = "none";
});
}
function zoomTo(v) {
var k = diameter / v[2]; view = v;
node.attr("transform", function(d) {
return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")";
});
circle.attr("r", function(d) { return d.r * k; });
}
d3.select(self.frameElement).style("height", diameter + "px");
}
render() {
if (this.state.ready) {
var fauxElement = Faux.createElement("div");
var diameter = 1000, //max size of the bubbles
color = d3.scale.category20b(); //color category
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(10);
var svg = d3.select(fauxElement)
.append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
//bubbles needs very specific format, convert data to this.
var nodes = bubble.nodes({children:this.d3Data}).filter(function(d) { return !d.children; });
//setup the chart
var bubbles = svg.append("g")
.attr("transform", "translate(0,0)")
.selectAll(".bubble")
.data(nodes)
.enter();
//create the bubbles
bubbles.append("circle")
.attr("r", function(d){ return d.r; })
.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; })
.attr("class", function(d){ return d["id"]; });
// .style("fill", function(d) { return color(d.value); });
//format the text for each bubble
bubbles.append("text")
.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y + 5; })
.attr("text-anchor", "middle")
.attr("class", "d3-text")
.text(function(d){ return d["name"]; })
.style({
"fill":"white",
"font-family":"Helvetica Neue, Helvetica, Arial, san-serif",
"font-size": "20px",
"text-shadow": "2px 2px #000000"
});
return (
<div>
{fauxElement.toReact()}
</div>
);
} else {
return (
<h3 className="chartLoad">
Loading chart...
</h3>
);
}
}
function draw () {
var data = d3.nest()
.key(function (d) { return d.ulcs })
.entries(window.data.lead.filter(function (sample) {
return s(sample.lead) === range.node().value
}))
, pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function (d) { return d.lead })
.children(function (d) {
return d.values
})
, root = {values: data}
, nodes = pack.nodes(root)
, focus = root
, view
var circle = g.selectAll('circle')
.data(nodes, function (d) {
return d.parent ? d.children ? d.children[0].ulcs : d.id : 'root'
})
circle.enter()
.append('circle')
circle.exit().remove()
circle.attr('class', function (d) {
return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"
})
.on('click', function (d) {
if (focus !== d) zoom(d), d3.event.stopPropagation()
})
// var text = svg.selectAll('text')
// .data(nodes)
// .enter().append("text")
// .attr("class", "label")
// .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
// .style("display", function(d) { return d.parent === root ? "inline" : "none"; })
// .text(function(d) { return d.name; });
// var node = svg.selectAll('circle,text')
zoomTo([root.x, root.y, root.r * 2 + margin])
function zoom (d) {
var focus0 = focus
focus = d
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween('zoom', function (d) {
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin])
return function(t) { zoomTo(i(t)) };
})
// transition.selectAll("text")
// .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
// .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
// .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
// .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
}
function zoomTo (v) {
var k = diameter / v[2]
view = v
circle.attr('transform', function (d) {
return 'translate(' + (d.x - v[0]) * k + ',' + (d.y - v[1]) * k + ')'
})
circle.attr('r', function (d) {
return d.r * k
})
}
}