Skip to content

Instantly share code, notes, and snippets.

@ko31
Forked from john-guerra/.block
Last active Aug 3, 2018
Embed
What would you like to do?
第100回全国高校野球選手権記念大会の出場校の野球部員数をバブルチャートで可視化
license: gpl-3.0

第100回全国高校野球選手権記念大会の出場校の野球部員数をバブルチャートで可視化

forked from john-guerra's block: Bubble Chart d3 v4

<!DOCTYPE html>
<meta charset="utf-8">
<style>
text {
font: 12px sans-serif;
}
</style>
<body>
<script src="//d3js.org/d3.v4.js"></script>
<script>
var diameter = 960,
format = d3.format(",d"),
color = d3.scaleOrdinal(d3.schemeCategory20c);
var bubble = d3.pack()
.size([diameter, diameter])
.padding(1.5);
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");
d3.json("member.json", function(error, data) {
if (error) throw error;
var root = d3.hierarchy(classes(data))
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value; });
bubble(root);
var node = svg.selectAll(".node")
.data(root.children)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.data.className + ": " + format(d.value) + "人"; });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) {
return color(d.data.packageName);
});
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.className.substring(0, d.r / 3); });
});
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, value: node.size});
}
recurse(null, root);
return {children: classes};
}
d3.select(self.frameElement).style("height", diameter + "px");
</script>
{"name":"member","children":[{"name":"\u5317\u6d77\u9053","children":[{"name":"\u65ed\u5ddd\u5927\u9ad8","size":"62"},{"name":"\u5317\u7167","size":"60"}]},{"name":"\u6771\u5317","children":[{"name":"\u516b\u6238\u5b66\u9662\u5149\u661f","size":"118"},{"name":"\u82b1\u5dfb\u6771","size":"120"},{"name":"\u91d1\u8db3\u8fb2","size":"50"},{"name":"\u7fbd\u9ed2","size":"76"},{"name":"\u4ed9\u53f0\u80b2\u82f1","size":"121"},{"name":"\u8056\u5149\u5b66\u9662","size":"117"}]},{"name":"\u95a2\u6771","children":[{"name":"\u571f\u6d66\u65e5\u5927","size":"91"},{"name":"\u4f5c\u65b0\u5b66\u9662","size":"92"},{"name":"\u524d\u6a4b\u80b2\u82f1","size":"70"},{"name":"\u82b1\u54b2\u5fb3\u6804","size":"163"},{"name":"\u6d66\u548c\u5b66\u9662","size":"100"},{"name":"\u6728\u66f4\u6d25\u7dcf\u5408","size":"60"},{"name":"\u4e2d\u592e\u5b66\u9662","size":"80"},{"name":"\u4e8c\u677e\u5b66\u820e\u5927\u4ed8","size":"64"},{"name":"\u65e5\u5927\u4e09","size":"71"},{"name":"\u6176\u5fdc","size":"105"},{"name":"\u6a2a\u6d5c","size":"66"},{"name":"\u5c71\u68a8\u5b66\u9662","size":"74"}]},{"name":"\u5317\u4fe1\u8d8a","children":[{"name":"\u4e2d\u8d8a","size":"94"},{"name":"\u4f50\u4e45\u9577\u8056","size":"160"},{"name":"\u9ad8\u5ca1\u5546","size":"72"},{"name":"\u661f\u7a1c","size":"77"},{"name":"\u6566\u8cc0\u6c17\u6bd4","size":"88"}]},{"name":"\u6771\u6d77","children":[{"name":"\u5e38\u8449\u5927\u83ca\u5ddd","size":"84"},{"name":"\u611b\u7523\u5927\u4e09\u6cb3","size":"71"},{"name":"\u611b\u5de5\u5927\u540d\u96fb","size":"52"},{"name":"\u5927\u57a3\u65e5\u5927","size":"49"},{"name":"\u767d\u5c71","size":"56"}]},{"name":"\u8fd1\u757f","children":[{"name":"\u8fd1\u6c5f","size":"104"},{"name":"\u9f8d\u8c37\u5927\u5e73\u5b89","size":"95"},{"name":"\u5927\u962a\u6850\u852d","size":"63"},{"name":"\u8fd1\u5927\u4ed8","size":"65"},{"name":"\u5831\u5fb3\u5b66\u5712","size":"113"},{"name":"\u660e\u77f3\u5546","size":"129"},{"name":"\u5948\u826f\u5927\u4ed8","size":"100"},{"name":"\u667a\u5f01\u548c\u6b4c\u5c71","size":"34"}]},{"name":"\u4e2d\u56fd","children":[{"name":"\u5275\u5fd7\u5b66\u5712","size":"98"},{"name":"\u5e83\u9675","size":"130"},{"name":"\u9ce5\u53d6\u57ce\u5317","size":"135"},{"name":"\u76ca\u7530\u6771","size":"138"},{"name":"\u4e0b\u95a2\u56fd\u969b","size":"51"}]},{"name":"\u56db\u56fd","children":[{"name":"\u4e38\u4e80\u57ce\u897f","size":"46"},{"name":"\u9cf4\u9580","size":"45"},{"name":"\u6e08\u7f8e","size":"54"},{"name":"\u9ad8\u77e5\u5546","size":"71"}]},{"name":"\u4e5d\u5dde","children":[{"name":"\u6298\u5c3e\u611b\u771f","size":"47"},{"name":"\u6c96\u5b66\u5712","size":"67"},{"name":"\u4f50\u8cc0\u5546","size":"57"},{"name":"\u5275\u6210\u9928","size":"123"},{"name":"\u6771\u6d77\u5927\u661f\u7fd4","size":"102"},{"name":"\u85e4\u852d","size":"83"},{"name":"\u65e5\u5357\u5b66\u5712","size":"115"},{"name":"\u9e7f\u5150\u5cf6\u5b9f","size":"114"},{"name":"\u8208\u5357","size":"125"}]}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment