The clustered force bubble chart is a combination of Mike Bostock's Clustered Force Layout III and Bubble Chart blocks. The words are clustered and colored by their group ID. This may not be the best way to display topic information, but it's one alternative to a word cloud.
Last active
June 21, 2023 21:26
-
-
Save ctufts/f38ef0187f98c537d791d24fda4a6ef9 to your computer and use it in GitHub Desktop.
Clustered Force Layout Bubble Chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 | |
| height: 500 | |
| border: yes |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style type="text/css"> | |
| text { | |
| font: 10px sans-serif; | |
| } | |
| circle { | |
| stroke: #565352; | |
| stroke-width: 1; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 500, | |
| padding = 1.5, // separation between same-color nodes | |
| clusterPadding = 6, // separation between different-color nodes | |
| maxRadius = 12; | |
| var color = d3.scale.ordinal() | |
| .range(["#7A99AC", "#E4002B"]); | |
| d3.text("word_groups.csv", function(error, text) { | |
| if (error) throw error; | |
| var colNames = "text,size,group\n" + text; | |
| var data = d3.csv.parse(colNames); | |
| data.forEach(function(d) { | |
| d.size = +d.size; | |
| }); | |
| //unique cluster/group id's | |
| var cs = []; | |
| data.forEach(function(d){ | |
| if(!cs.contains(d.group)) { | |
| cs.push(d.group); | |
| } | |
| }); | |
| var n = data.length, // total number of nodes | |
| m = cs.length; // number of distinct clusters | |
| //create clusters and nodes | |
| var clusters = new Array(m); | |
| var nodes = []; | |
| for (var i = 0; i<n; i++){ | |
| nodes.push(create_nodes(data,i)); | |
| } | |
| var force = d3.layout.force() | |
| .nodes(nodes) | |
| .size([width, height]) | |
| .gravity(.02) | |
| .charge(0) | |
| .on("tick", tick) | |
| .start(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var node = svg.selectAll("circle") | |
| .data(nodes) | |
| .enter().append("g").call(force.drag); | |
| node.append("circle") | |
| .style("fill", function (d) { | |
| return color(d.cluster); | |
| }) | |
| .attr("r", function(d){return d.radius}) | |
| node.append("text") | |
| .attr("dy", ".3em") | |
| .style("text-anchor", "middle") | |
| .text(function(d) { return d.text.substring(0, d.radius / 3); }); | |
| function create_nodes(data,node_counter) { | |
| var i = cs.indexOf(data[node_counter].group), | |
| r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius, | |
| d = { | |
| cluster: i, | |
| radius: data[node_counter].size*1.5, | |
| text: data[node_counter].text, | |
| x: Math.cos(i / m * 2 * Math.PI) * 200 + width / 2 + Math.random(), | |
| y: Math.sin(i / m * 2 * Math.PI) * 200 + height / 2 + Math.random() | |
| }; | |
| if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d; | |
| return d; | |
| }; | |
| function tick(e) { | |
| node.each(cluster(10 * e.alpha * e.alpha)) | |
| .each(collide(.5)) | |
| .attr("transform", function (d) { | |
| var k = "translate(" + d.x + "," + d.y + ")"; | |
| return k; | |
| }) | |
| } | |
| // Move d to be adjacent to the cluster node. | |
| function cluster(alpha) { | |
| return function (d) { | |
| var cluster = clusters[d.cluster]; | |
| if (cluster === d) return; | |
| var x = d.x - cluster.x, | |
| y = d.y - cluster.y, | |
| l = Math.sqrt(x * x + y * y), | |
| r = d.radius + cluster.radius; | |
| if (l != r) { | |
| l = (l - r) / l * alpha; | |
| d.x -= x *= l; | |
| d.y -= y *= l; | |
| cluster.x += x; | |
| cluster.y += y; | |
| } | |
| }; | |
| } | |
| // Resolves collisions between d and all other circles. | |
| function collide(alpha) { | |
| var quadtree = d3.geom.quadtree(nodes); | |
| return function (d) { | |
| var r = d.radius + maxRadius + Math.max(padding, clusterPadding), | |
| nx1 = d.x - r, | |
| nx2 = d.x + r, | |
| ny1 = d.y - r, | |
| ny2 = d.y + r; | |
| quadtree.visit(function (quad, x1, y1, x2, y2) { | |
| if (quad.point && (quad.point !== d)) { | |
| var x = d.x - quad.point.x, | |
| y = d.y - quad.point.y, | |
| l = Math.sqrt(x * x + y * y), | |
| r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding); | |
| if (l < r) { | |
| l = (l - r) / l * alpha; | |
| d.x -= x *= l; | |
| d.y -= y *= l; | |
| quad.point.x += x; | |
| quad.point.y += y; | |
| } | |
| } | |
| return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; | |
| }); | |
| }; | |
| } | |
| }); | |
| Array.prototype.contains = function(v) { | |
| for(var i = 0; i < this.length; i++) { | |
| if(this[i] === v) return true; | |
| } | |
| return false; | |
| }; | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Allagash | 25 | 1 | |
|---|---|---|---|
| Dogfish | 23 | 1 | |
| Flying Dog | 22 | 1 | |
| Founders | 21 | 1 | |
| Stone | 20 | 1 | |
| Bells | 19 | 1 | |
| Victory | 18 | 1 | |
| 21st Amendment | 17 | 1 | |
| Yards | 16 | 1 | |
| Lagunitas | 15 | 1 | |
| Brooklyn | 14 | 1 | |
| Duvel | 13 | 1 | |
| Rogue | 12 | 1 | |
| Full Sail | 11 | 1 | |
| Left Hand | 10 | 1 | |
| Chevy | 25 | 2 | |
| Ford | 23 | 2 | |
| Dodge | 22 | 2 | |
| BMW | 21 | 2 | |
| Mercedes | 20 | 2 | |
| VW | 19 | 2 | |
| Porsche | 18 | 2 | |
| Audi | 17 | 2 | |
| Jeep | 16 | 2 | |
| Acura | 15 | 2 | |
| Honda | 14 | 2 | |
| Toyota | 13 | 2 | |
| Bugatti | 12 | 2 | |
| Ferrari | 11 | 2 | |
| Jaguar | 10 | 2 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment