Skip to content

Instantly share code, notes, and snippets.

@lorenzopub

lorenzopub/.block

Created July 18, 2017 06:28
Show Gist options
  • Save lorenzopub/f1278f68cd20201ff83e19c8c8d99e2d to your computer and use it in GitHub Desktop.
Save lorenzopub/f1278f68cd20201ff83e19c8c8d99e2d to your computer and use it in GitHub Desktop.
Download ZIP
Force-Directed Scatterplot
Raw
.block
license: mit
Raw
README.md
Raw
data_tsv2.csv
bank pagina looptijd vormen nhg mw_vanaf mw_tm rente
abn 1 0 1.1 1 0 0 0.0175
abn 1 1 1.1 1 0 0 0.0154
abn 1 1.1 2 1 0 0 0.0154
abn 1 3 1.1 1 0 0 0.0154
abn 1 5 1.1 1 0 0 0.0164
abn 1 6 1.1 1 0 0 0.0169
abn 1 7 1.1 1 0 0 0.0174
abn 1 10 1.1 1 0 0 0.0178
abn 1 12 1.1 1 0 0 0.022
abn 1 15 1.1 1 0 0 0.0235
abn 1 17 1.1 1 0 0 0.0266
abn 1 20 1.1 1 0 0 0.0266
abn 1 25 1.1 1 0 0 0.0385
abn 1 30 1.1 1 0 0 0.0395
abn 1 0 1.1 0 0 0.65 0.017
abn 1 1 1.1 0 0 0.65 0.0149
abn 1 1.1 2 0 0 0.65 0.0149
abn 1 3 1.1 0 0 0.65 0.0149
abn 1 5 1.1 0 0 0.65 0.0159
abn 1 6 1.1 0 0 0.65 0.0164
abn 1 7 1.1 0 0 0.65 0.0169
abn 1 10 1.1 0 0 0.65 0.0173
abn 1 12 1.1 0 0 0.65 0.0215
abn 1 15 1.1 0 0 0.65 0.023
abn 1 17 1.1 0 0 0.65 0.0261
abn 1 20 1.1 0 0 0.65 0.0261
abn 1 25 1.1 0 0 0.65 0.038
abn 1 30 1.1 0 0 0.65 0.039
abn 1 0 1.1 0 0.65 0.85 0.019
abn 1 1 1.1 0 0.65 0.85 0.0169
abn 1 1.1 2 0 0.65 0.85 0.0169
abn 1 3 1.1 0 0.65 0.85 0.0169
abn 1 5 1.1 0 0.65 0.85 0.0179
abn 1 6 1.1 0 0.65 0.85 0.0184
abn 1 7 1.1 0 0.65 0.85 0.0189
abn 1 10 1.1 0 0.65 0.85 0.0193
abn 1 12 1.1 0 0.65 0.85 0.0235
abn 1 15 1.1 0 0.65 0.85 0.025
abn 1 17 1.1 0 0.65 0.85 0.0281
abn 1 20 1.1 0 0.65 0.85 0.0281
abn 1 25 1.1 0 0.65 0.85 0.04
abn 1 30 1.1 0 0.65 0.85 0.041
abn 1 0 1.1 0 0.85 0 0.023
abn 1 1 1.1 0 0.85 0 0.0209
abn 1 1.1 2 0 0.85 0 0.0209
abn 1 3 1.1 0 0.85 0 0.0209
abn 1 5 1.1 0 0.85 0 0.0219
abn 1 6 1.1 0 0.85 0 0.0224
abn 1 7 1.1 0 0.85 0 0.0229
abn 1 10 1.1 0 0.85 0 0.0233
abn 1 12 1.1 0 0.85 0 0.0275
abn 1 15 1.1 0 0.85 0 0.029
abn 1 17 1.1 0 0.85 0 0.0321
abn 1 20 1.1 0 0.85 0 0.0321
abn 1 25 1.1 0 0.85 0 0.044
abn 1 30 1.1 0 0.85 0 0.045
aeg 1 0 0 1 0 0 0.019
aeg 1 1.1 0 1 0 0 0.0154
aeg 1 5 0 1 0 0 0.0189
aeg 1 10 0 1 0 0 0.0209
aeg 1 15 0 1 0 0 0.0229
aeg 1 20 0 1 0 0 0.0249
aeg 1 25 0 1 0 0 0.0264
aeg 1 30 0 1 0 0 0.0264
aeg 1 0 0 0 0 0.675 0.019
aeg 1 1.1 0 0 0 0.675 0.0154
aeg 1 5 0 0 0 0.675 0.0189
aeg 1 10 0 0 0 0.675 0.0209
aeg 1 15 0 0 0 0.675 0.0229
aeg 1 20 0 0 0 0.675 0.0249
aeg 1 25 0 0 0 0.675 0.0264
aeg 1 30 0 0 0 0.675 0.0264
aeg 1 0 0 0 0.675 0.81 0.021
aeg 1 1.1 0 0 0.675 0.81 0.0174
aeg 1 5 0 0 0.675 0.81 0.0209
aeg 1 10 0 0 0.675 0.81 0.0229
aeg 1 15 0 0 0.675 0.81 0.0249
aeg 1 20 0 0 0.675 0.81 0.0259
aeg 1 25 0 0 0.675 0.81 0.0289
aeg 1 30 0 0 0.675 0.81 0.0289
aeg 1 0 0 0 0.81 0 0.0255
aeg 1 1.1 0 0 0.81 0 0.0219
aeg 1 5 0 0 0.81 0 0.0254
aeg 1 10 0 0 0.81 0 0.0274
aeg 1 15 0 0 0.81 0 0.0284
aeg 1 20 0 0 0.81 0 0.0294
aeg 1 25 0 0 0.81 0 0.0324
aeg 1 30 0 0 0.81 0 0.0324
all 1 5 1.1 1 0 0 0.015
all 1 10 1.1 1 0 0 0.0179
all 1 15 1.1 1 0 0 0.0214
all 1 20 1.1 1 0 0 0.023
all 1 30 1.1 1 0 0 0.025
all 1 5 5 1 0 0 0.015
all 1 10 5 1 0 0 0.0174
all 1 15 5 1 0 0 0.0209
all 1 20 5 1 0 0 0.0225
all 1 30 5 1 0 0 0.0245
all 1 5 1 1 0 0 0.015
all 1 10 1 1 0 0 0.0194
all 1 15 1 1 0 0 0.0229
all 1 20 1 1 0 0 0.024
all 1 30 1 1 0 0 0.0275
all 1 5 1.1 0 0 0 0.016
all 1 10 1.1 0 0 0 0.0189
all 1 15 1.1 0 0 0 0.0224
all 1 20 1.1 0 0 0 0.024
all 1 30 1.1 0 0 0 0.026
all 1 5 5 0 0 0 0.016
all 1 10 5 0 0 0 0.0184
all 1 15 5 0 0 0 0.0219
all 1 20 5 0 0 0 0.0235
all 1 30 5 0 0 0 0.0255
all 1 5 1 0 0 0 0.016
all 1 10 1 0 0 0 0.0204
all 1 15 1 0 0 0 0.0239
all 1 20 1 0 0 0 0.025
all 1 30 1 0 0 0 0.0285
arg 1 1 1 0 0 0.65 0.0135
arg 1.1 1 1.1 0 0 0.65 0.0135
arg 3 1 5 0 0 0.65 0.0135
ing 1 1 2;5 1 0 0 0.0144
ing 1 5 2;5 1 0 0 0.0155
ing 1 10 2;5 1 0 0 0.0169
ing 1 15 2;5 1 0 0 0.0235
ing 1 20 2;5 1 0 0 0.0245
ing 1 1 2;5 0 0 0.55 0.0139
ing 1 5 2;5 0 0 0.55 0.015
ing 1 10 2;5 0 0 0.55 0.0159
ing 1 15 2;5 0 0 0.55 0.023
ing 1 20 2;5 0 0 0.55 0.024
ing 1 1 2;5 0 0.55 0.6 0.0144
ing 1 5 2;5 0 0.55 0.6 0.0155
ing 1 10 2;5 0 0.55 0.6 0.0164
ing 1 15 2;5 0 0.55 0.6 0.0235
ing 1 20 2;5 0 0.55 0.6 0.0245
ing 1 1 2;5 0 0.6 0.65 0.0149
ing 1 5 2;5 0 0.6 0.65 0.016
ing 1 10 2;5 0 0.6 0.65 0.0169
ing 1 15 2;5 0 0.6 0.65 0.024
ing 1 20 2;5 0 0.6 0.65 0.025
ing 1 1 2;5 0 0.65 0.7 0.0154
ing 1 5 2;5 0 0.65 0.7 0.0165
ing 1 10 2;5 0 0.65 0.7 0.0174
ing 1 15 2;5 0 0.65 0.7 0.0245
ing 1 20 2;5 0 0.65 0.7 0.0255
ing 1 1 2;5 0 0.7 0.75 0.0159
ing 1 5 2;5 0 0.7 0.75 0.017
ing 1 10 2;5 0 0.7 0.75 0.0179
ing 1 15 2;5 0 0.7 0.75 0.025
ing 1 20 2;5 0 0.7 0.75 0.026
ing 1 1 2;5 0 0.75 0.8 0.0164
ing 1 5 2;5 0 0.75 0.8 0.0175
ing 1 10 2;5 0 0.75 0.8 0.0184
ing 1 15 2;5 0 0.75 0.8 0.0255
ing 1 20 2;5 0 0.75 0.8 0.0265
ing 1 1 2;5 0 0.8 0.85 0.0169
ing 1 5 2;5 0 0.8 0.85 0.018
ing 1 10 2;5 0 0.8 0.85 0.0189
ing 1 15 2;5 0 0.8 0.85 0.026
ing 1 20 2;5 0 0.8 0.85 0.027
ing 1 1 2;5 0 0.85 0.9 0.0179
ing 1 5 2;5 0 0.85 0.9 0.019
ing 1 10 2;5 0 0.85 0.9 0.0199
ing 1 15 2;5 0 0.85 0.9 0.027
ing 1 20 2;5 0 0.85 0.9 0.028
ing 1 1 2;5 0 0.9 0.95 0.0194
ing 1 5 2;5 0 0.9 0.95 0.0205
ing 1 10 2;5 0 0.9 0.95 0.0214
ing 1 15 2;5 0 0.9 0.95 0.0285
ing 1 20 2;5 0 0.9 0.95 0.0295
ing 1 1 2;5 0 0.95 1.01 0.0214
ing 1 5 2;5 0 0.95 1.01 0.0225
ing 1 10 2;5 0 0.95 1.01 0.0234
ing 1 15 2;5 0 0.95 1.01 0.0305
ing 1 20 2;5 0 0.95 1.01 0.0315
ing 1 1 2;5 0 1.01 0 0.0269
ing 1 5 2;5 0 1.01 0 0.028
ing 1 10 2;5 0 1.01 0 0.0289
ing 1 15 2;5 0 1.01 0 0.036
ing 1 20 2;5 0 1.01 0 0.037
ing 1.1 1 1;3 1 0 0 0.0149
ing 1.1 5 1;3 1 0 0 0.0182
ing 1.1 10 1;3 1 0 0 0.0194
ing 1.1 15 1;3 1 0 0 0.0305
ing 1.1 20 1;3 1 0 0 0.033
ing 1.1 1 1;3 0 0 0.55 0.0144
ing 1.1 5 1;3 0 0 0.55 0.0177
ing 1.1 10 1;3 0 0 0.55 0.0189
ing 1.1 15 1;3 0 0 0.55 0.03
ing 1.1 20 1;3 0 0 0.55 0.0325
ing 1.1 1 1;3 0 0.55 0.6 0.0149
ing 1.1 5 1;3 0 0.55 0.6 0.0182
ing 1.1 10 1;3 0 0.55 0.6 0.0194
ing 1.1 15 1;3 0 0.55 0.6 0.0305
ing 1.1 20 1;3 0 0.55 0.6 0.033
ing 1.1 1 1;3 0 0.6 0.65 0.0154
ing 1.1 5 1;3 0 0.6 0.65 0.0187
ing 1.1 10 1;3 0 0.6 0.65 0.0199
ing 1.1 15 1;3 0 0.6 0.65 0.031
ing 1.1 20 1;3 0 0.6 0.65 0.0335
ing 1.1 1 1;3 0 0.65 0.7 0.0159
ing 1.1 5 1;3 0 0.65 0.7 0.0192
ing 1.1 10 1;3 0 0.65 0.7 0.0204
ing 1.1 15 1;3 0 0.65 0.7 0.0315
ing 1.1 20 1;3 0 0.65 0.7 0.034
ing 1.1 1 1;3 0 0.7 0.75 0.0164
ing 1.1 5 1;3 0 0.7 0.75 0.0197
ing 1.1 10 1;3 0 0.7 0.75 0.0209
ing 1.1 15 1;3 0 0.7 0.75 0.032
ing 1.1 20 1;3 0 0.7 0.75 0.0345
ing 1.1 1 1;3 0 0.75 0.8 0.0169
ing 1.1 5 1;3 0 0.75 0.8 0.0202
ing 1.1 10 1;3 0 0.75 0.8 0.0214
ing 1.1 15 1;3 0 0.75 0.8 0.0325
ing 1.1 20 1;3 0 0.75 0.8 0.035
ing 1.1 1 1;3 0 0.8 0.85 0.0174
ing 1.1 5 1;3 0 0.8 0.85 0.0207
ing 1.1 10 1;3 0 0.8 0.85 0.0219
ing 1.1 15 1;3 0 0.8 0.85 0.033
ing 1.1 20 1;3 0 0.8 0.85 0.0355
ing 1.1 1 1;3 0 0.85 0.9 0.0184
ing 1.1 5 1;3 0 0.85 0.9 0.0217
ing 1.1 10 1;3 0 0.85 0.9 0.0229
ing 1.1 15 1;3 0 0.85 0.9 0.034
ing 1.1 20 1;3 0 0.85 0.9 0.0365
ing 1.1 1 1;3 0 0.9 0.95 0.0199
ing 1.1 5 1;3 0 0.9 0.95 0.0232
ing 1.1 10 1;3 0 0.9 0.95 0.0244
ing 1.1 15 1;3 0 0.9 0.95 0.0355
ing 1.1 20 1;3 0 0.9 0.95 0.038
ing 1.1 1 1;3 0 0.95 1.01 0.0219
ing 1.1 5 1;3 0 0.95 1.01 0.0252
ing 1.1 10 1;3 0 0.95 1.01 0.0264
ing 1.1 15 1;3 0 0.95 1.01 0.0375
ing 1.1 20 1;3 0 0.95 1.01 0.04
ing 1.1 1 1;3 0 1.01 0 0.0274
ing 1.1 5 1;3 0 1.01 0 0.0307
ing 1.1 10 1;3 0 1.01 0 0.0319
ing 1.1 15 1;3 0 1.01 0 0.043
ing 1.1 20 1;3 0 1.01 0 0.0455
rab 1 1 2;5 1 0 0 0.012
rab 1 5 2;5 1 0 0 0.016
rab 1 10 2;5 1 0 0 0.017
rab 1 15 2;5 1 0 0 0.024
rab 1 20 2;5 1 0 0 0.025
rab 1 30 2;5 1 0 0 0.034
rab 1 1 2;5 0 0.675 0.9 0.016
rab 1 5 2;5 0 0.675 0.9 0.02
rab 1 10 2;5 0 0.675 0.9 0.021
rab 1 15 2;5 0 0.675 0.9 0.028
rab 1 20 2;5 0 0.675 0.9 0.029
rab 1 30 2;5 0 0.675 0.9 0.038
rab 1 1 2;5 0 0.9 1.1 0.019
rab 1 5 2;5 0 0.9 1.1 0.023
rab 1 10 2;5 0 0.9 1.1 0.024
rab 1 15 2;5 0 0.9 1.1 0.031
rab 1 20 2;5 0 0.9 1.1 0.032
rab 1 30 2;5 0 0.9 1.1 0.041
rab 1 1 2;5 1 0 0 0.014
rab 1 5 2;5 1 0 0 0.018
rab 1 10 2;5 1 0 0 0.019
rab 1 15 2;5 1 0 0 0.026
rab 1 20 2;5 1 0 0 0.028
rab 1 30 2;5 1 0 0 0.036
rab 1 1 2;5 0 0.675 0.9 0.018
rab 1 5 2;5 0 0.675 0.9 0.022
rab 1 10 2;5 0 0.675 0.9 0.023
rab 1 15 2;5 0 0.675 0.9 0.03
rab 1 20 2;5 0 0.675 0.9 0.032
rab 1 30 2;5 0 0.675 0.9 0.04
rab 1 1 2;5 0 0.9 1.1 0.021
rab 1 5 2;5 0 0.9 1.1 0.025
rab 1 10 2;5 0 0.9 1.1 0.026
rab 1 15 2;5 0 0.9 1.1 0.033
rab 1 20 2;5 0 0.9 1.1 0.035
rab 1 30 2;5 0 0.9 1.1 0.043
rab 1 1 1;3 1 0 0 0.014
rab 1 5 1;3 1 0 0 0.019
rab 1 10 1;3 1 0 0 0.021
rab 1 15 1;3 1 0 0 0.028
rab 1 20 1;3 1 0 0 0.031
rab 1 30 1;3 1 0 0 0.039
rab 1 1 1;3 0 0.675 0.9 0.018
rab 1 5 1;3 0 0.675 0.9 0.023
rab 1 10 1;3 0 0.675 0.9 0.025
rab 1 15 1;3 0 0.675 0.9 0.032
rab 1 20 1;3 0 0.675 0.9 0.035
rab 1 30 1;3 0 0.675 0.9 0.043
rab 1 1 1;3 0 0.9 1.1 0.021
rab 1 5 1;3 0 0.9 1.1 0.026
rab 1 10 1;3 0 0.9 1.1 0.028
rab 1 15 1;3 0 0.9 1.1 0.035
rab 1 20 1;3 0 0.9 1.1 0.038
rab 1 30 1;3 0 0.9 1.1 0.046
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 14px sans-serif;
}
path,
.xaxis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
path,
.yaxis line {
fill: none;
stroke: none;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
stroke-opacity: .7;
fill-opacity: .7;
}
/*start gridlines*/
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
/* end gridlines */
#controls {
font-size: 14px;
position: absolute;
top: 20px;
left: 80px;
}
input {
margin: 4px 4px 0;
}
div.tooltip {
position: absolute;
text-align: center;
width: 150px;
height: 30px;
padding: 5px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
padding = 1, // separation between nodes
radius = 6;
var formatAsPercentage = d3.format("%");
var formatAsPercentageOneDec = d3.format(",.1%");
var formatAsInteger = d3.format("0");
var x = d3.scale.linear() // transformatie van range naar pixels
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x) // uitrekken schaal, labels en punten
.orient("bottom") // positie as labels
.tickFormat(function(d, i) {
if (d == 0) { return "variabel" ;}
else { return d + " jaar" ;}
});
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickFormat(formatAsPercentage);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var controls = d3.select("body").append("label")
.attr("id", "controls");
var checkbox = controls.append("input")
.attr("id", "collisiondetection")
.attr("type", "checkbox")
.attr("checked", "true");
controls.append("span")
.text("...");
var checkbox2 = controls.append("input")
.attr("id", "changexvar")
.attr("type", "button");
controls.append("span")
.text("Wissel marktwaarde / looptijd");
d3.csv("data_tsv2.csv", function(error, data) {
var xVar = "looptijd",
yVar = "rente";
data.forEach(function(d) {
d[xVar] = +d[xVar];
d[yVar] = +d[yVar];
});
var force = d3.layout.force()
.nodes(data)
.size([width, height])
.on("tick", tick)
.charge(-5)
.gravity(0)
.chargeDistance(20);
//x.domain(d3.extent(data, function(d) { return d[xVar]; })).nice();
x.domain([-2,32]);
//y.domain(d3.extent(data, function(d) { return d[yVar]; })).nice();
y.domain([0, d3.max(data, function(d) { return d[yVar]; }) * 1.2])
// Set initial positions
data.forEach(function(d) {
//d.x = x(d[xVar]);
//d.y = y(d[yVar]);
//d.x = x(-1);
//d.y = y(-1);
d.color = color(d.bank);
d.radius = radius;
});
svg.append("g")
.attr("class", "xaxis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("id", "x-as")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("looptijd");
svg.append("g")
.attr("class", "yaxis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("rente")
svg.append("g")
.attr("class", "grid")
.call(yAxis
.tickSize(-width, 0, 0)
.tickFormat("")
)
var node = svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", radius)
.attr("cx", function(d) { return x(d[xVar]); })
.attr("cy", function(d) { return y(d[yVar]); })
.style("fill", function(d) { return d.color; })
.attr("data-bank", function (d) {
return d.bank;
})
.style("opacity", 1)
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div
.html("<strong>" + d.bank + "</strong>, " +
d.looptijd + " jaar, " + formatAsPercentageOneDec(d.rente) +
",</br>NHG = " + d.nhg + ", MWtm = " + formatAsPercentage(d.mw_tm))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) - 50 + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color)
.on("click", function (d) {
node.filter(function () {
return this.dataset.bank === d;
})
.transition().duration(750)
.style("opacity", function () {
console.log(this.style.opacity);
return (parseInt(this.style.opacity)) ? 0 : 1;
});
});
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
d3.select("#collisiondetection").on("change", function() {
force.resume();
});
///////////////////////
d3.select("#changexvar").on("click", function() {
if (xVar == "looptijd") {
xVar = "mw_tm";
d3.select('#x-as')
.text("% van de marktwaarde");
x.domain([0.5,1.2]); // herschalen van de punten
xAxis.tickFormat(formatAsPercentage);
svg.select(".xaxis")
.transition().duration(1000).ease("sin-in-out") // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease
.call(xAxis);
} else {
xVar = "looptijd";
d3.select('#x-as').text("looptijd");
x.domain([-2,32]);
xAxis.tickFormat(function(d, i) {
if (d == 0) { return "variabel" ;}
else { return d + " jaar" ;}
})
svg.select(".xaxis")
.transition().duration(1000).ease("sin-in-out") // https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease
.call(xAxis);
};
force.resume();
});
force.start();
function tick(e) {
node.each(moveTowardDataPosition(e.alpha));
if (checkbox.node().checked) node.each(collide(e.alpha));
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
function moveTowardDataPosition(alpha) {
return function(d) {
d.x += (x(d[xVar]) - d.x) * 0.1 * alpha;
d.y += (y(d[yVar]) - d.y) * 0.1 * alpha;
};
}
// Resolve collisions between nodes.
function collide(alpha) {
var quadtree = d3.geom.quadtree(data);
return function(d) {
var r = d.radius + radius + padding,
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.color !== quad.point.color) * padding;
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;
});
};
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment