Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@ProQuestionAsker

ProQuestionAsker/bubbles.js

Last active January 5, 2017 11:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ProQuestionAsker/79d0228ae7161e349770e7d553cf4c94 to your computer and use it in GitHub Desktop.
Save ProQuestionAsker/79d0228ae7161e349770e7d553cf4c94 to your computer and use it in GitHub Desktop.
Download ZIP
Bubble Testing
Raw
bubbles.js
(function() {
var width = 400,
height = 300;
//padding = 1.5, // separation between same-color nodes
//clusterPadding = 6, // separation between different-color nodes
//maxRadius = 15;
//var n = 67, // total number of nodes
// m = 3; // number of distinct clusters
var svg = d3.select("#chart")
.append("svg")
.attr("height", height)
.attr("width", width)
.append("g")
.attr("transform", "translate(0,0)")
var radiusScale = d3.scaleSqrt().domain([1, 3114]).range([1, 50])
// the simulation is a collection of forces
// about where we want our circles to go
// and how we want them to interact
// STEP ONE: get them to the middle
// STEP TWO: don't have them collide!
var forceXSplit = d3.forceX(function(d){
if(d.Sex === "male") {
return (width * .30)
} else {
return (width * .70)
}
}).strength(0.15)
var forceXCombine = d3.forceX((width)/2).strength(0.1)
var forceCollide = d3.forceCollide(function(d){
return radiusScale(d.Total_Words) + 1
})
var simulation = d3.forceSimulation()
.force("x", forceXCombine)
.force("y", d3.forceY(height / 2).strength(0.09))
.force("collide", forceCollide)
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "20")
.style("visibility", "hidden")
.style("color", "white")
.style("padding", "8px")
.style("background-color", "rgba(0, 0, 0, 0.75)")
.style("border-radius", "6px")
.style("font", "12px sans-serif")
.text("");
d3.queue()
.defer(d3.csv, "data.csv")
.await(ready)
function ready (error, datapoints) {
var circles = svg.selectAll(".Character")
.data(datapoints)
.enter().append("circle")
.attr("class", "Character")
.attr("r", function(d){
return radiusScale(d.Total_Words)
})
.style("fill", function(d) {
var returnColor;
if (d.Sex === "male") { returnColor = "#355C7D";
} else if (d.Sex === "female") {returnColor = "#F67280";}
return returnColor;
})
.on("mouseover", function(d) {
tooltip.html(d.Character + "<br><br> Words Spoken: " + d.Total_Words);
tooltip.style("visibility", "visible");
})
.on("mousemove", function() {
return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
/// Adding Toggle Switches
var atRight = true
var rect = svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("rx", 22)
.attr("ry", 22)
.style("fill", "lightgray")
.attr("width", 64)
.attr("height", 40)
.on("click", function(){
if(atRight === true){
simulation
.force("x", forceXSplit)
.alphaTarget(0.2)
.force("collide", forceCollide)
setAtRight(!atRight)
} else {
simulation
.force("x", forceXCombine)
.alphaTarget(0.07)
setAtRight(!atRight)
}
});
var circle = svg.append("circle")
.attr("cx", 30)
.attr("cy", 30)
.attr("r", 16)
.style("fill", "white")
.on("click", function(){
if(atRight === true){
simulation
.restart()
.force("x", forceXSplit)
.alphaTarget(0.2)
.force("collide", forceCollide)
setAtRight(!atRight)
} else {
simulation
.restart()
.force("x", forceXCombine)
.alphaTarget(0.2)
setAtRight(!atRight)
}
});
var setAtRight = function(newValue) {
atRight = newValue;
circle.transition().duration(250)
.attr("cx", (atRight? (30) : (54)))
.style("fill", "white");
rect.transition().duration(250)
.style("fill", atRight? "lightgray" : "#C06C84");
};
var res = {
'getValue': function() { return atRight; },
'setValue': setAtRight,
'remove': function() { circle.remove(); }
};
simulation.nodes(datapoints)
.on('tick', ticked)
function ticked() {
circles
.attr("cx", function(d) {
return d.x
})
.attr("cy", function(d) {
return d.y
})
}
}
})();
Raw
data.csv
Character Sex speaking_turns Total_Words
1 Bailey male 66 510
2 Bill male 2 32
3 Bloat male 1 2
4 Carol female 2 19
5 Charlie male 58 377
6 Crush male 7 64
7 Deb female 1 5
8 Destiny female 84 497
9 Dory female 399 4210
10 Female Aquarist female 3 19
11 Female Aquarist 2 female 1 11
12 Female Blue Tang female 4 29
13 Female Blue Tang 2 female 1 4
14 Female Crab female 7 69
15 Female Driver female 5 30
16 Female Educator female 2 35
17 Female Fish female 2 14
18 Female Fish 2 female 1 5
19 Female Otter Trainer female 2 17
20 Female Worker female 2 12
21 Female Yellow Fish female 1 4
22 Fluke male 34 262
23 Gerald male 3 3
24 Giant Clam male 6 95
25 Gil male 4 36
26 Gurgle male 1 6
27 Hank male 119 1131
28 Jacques male 1 1
29 Jenny female 55 410
30 Kathy female 5 31
31 Male Aquarist male 1 4
32 Male Aquarist 2 male 2 10
33 Male Blue Tang male 1 8
34 Male Blue Tang 2 male 2 28
35 Male Worker male 2 21
36 Male Yellow Fish male 1 3
37 Male Yellow Fish 2 male 1 1
38 Marlin male 162 1612
39 Mr. Ray male 23 211
40 Nemo male 72 388
41 Peach male 1 4
42 Rudder male 25 123
43 Sea Cucumber male 3 3
44 Sea Cucumber 2 male 1 4
45 Sick Fish male 2 6
46 Sigourney Weaver female 13 124
47 Squirt male 2 15
48 Stan male 18 82
49 Wife Fish female 19 108
50 Woman 1 female 1 14
Raw
index.html
<!doctype html>
<html>
<head>
<!--The browser can use non-English-language characters (...kind of) -->
<link href="style.css" rel="stylesheet">
<meta charset="utf-8">
<style>
* {
font-family: "Helvetica Neue";
}
p, text {
font-size: 0.85em;
}
svg {
background: #f1f1f1;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="bubbles.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment