Skip to content

Instantly share code, notes, and snippets.

@ko31
Forked from john-guerra/.block
Last active August 3, 2018 14:52
Show Gist options
  • Save ko31/56cc872589f80ae07c402e35433c9cde to your computer and use it in GitHub Desktop.
Save ko31/56cc872589f80ae07c402e35433c9cde to your computer and use it in GitHub Desktop.
第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