Skip to content

Instantly share code, notes, and snippets.

@MNoichl
Last active January 28, 2018 21:43
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 MNoichl/27f3efcb410ba77bdfde1f1f8890703f to your computer and use it in GitHub Desktop.
Save MNoichl/27f3efcb410ba77bdfde1f1f8890703f to your computer and use it in GitHub Desktop.
Scatterplot basic
license: mit
id cluster x y
1.0 cluster_0 -1.9079458769869453 -2.075060780587529
2.0 cluster_0 -0.5841304990049297 -0.6007408163785174
3.0 cluster_6 -0.2790426197660639 0.03734857396908692
4.0 cluster_2 -0.7609497859141965 0.4067527003258465
5.0 cluster_6 -0.06616626436110884 -0.044042032906473
6.0 cluster_6 -0.8359586128417164 -0.8216766113546754
7.0 cluster_2 -0.5462504253078485 0.2448547383618138
8.0 cluster_6 -0.5095647824945387 -0.3156211347448184
9.0 cluster_6 -0.8175068014319339 -0.8518448290374879
10.0 cluster_0 -0.7664379794172259 -0.7558956981667694
11.0 cluster_6 -0.8445095871133399 -1.0230553931568493
12.0 cluster_6 -0.37789164213440246 -0.3612960989989086
13.0 cluster_0 -0.6984714814705432 -0.7354254817289264
14.0 cluster_6 -0.4449261219640731 -0.5020929001106372
15.0 cluster_0 -0.7841893687579691 -0.6970819886406676
16.0 cluster_6 -0.18836500369782078 -0.1577132393351561
17.0 cluster_6 -0.17481916062213088 -0.19179208904054612
18.0 cluster_6 -0.08094329475146993 -0.024253766678287707
19.0 cluster_0 -0.32114650976140485 -0.2839219902096705
20.0 cluster_0 -0.6234699653972764 -0.4177943902929359
21.0 cluster_0 -1.0475561709862051 -0.8747414781611541
22.0 cluster_6 -0.22819452201086285 -0.261104059533509
23.0 cluster_2 -0.5671985306956926 0.1900985058006701
24.0 cluster_6 -0.18044000517324146 -0.154472970092794
25.0 cluster_2 -0.9793219681258069 0.060053411682036144
26.0 cluster_2 -0.5761414966818806 -0.0140000697423254
27.0 cluster_6 -0.44376923121921186 -0.22921391060961283
28.0 cluster_0 -0.01393919309306619 0.03258123521118737
29.0 cluster_0 -0.02834988629065053 0.04525650653253732
30.0 cluster_0 -0.7439472029925007 -0.6741408620014182
31.0 cluster_3 -0.09876139333982867 0.34969337258583827
32.0 cluster_4 0.32848755501413207 -0.7657142471942869
33.0 cluster_6 -0.2549884130399796 -0.24932603894115823
34.0 cluster_6 -0.12281603757325138 -0.126861781804842
35.0 cluster_6 -0.09402130544463502 -0.09638359476761114
36.0 cluster_2 0.03550979028825464 0.08307378495238324
37.0 cluster_2 -0.1521456903024924 0.04741164302905074
38.0 cluster_0 -1.8250393996705796 -2.1298546391369113
39.0 cluster_6 -0.4130756075348035 -0.5894909894504379
40.0 cluster_3 -0.39439339827655384 0.9835078187569389
41.0 cluster_2 -0.07305032681387677 0.06187869197010179
42.0 cluster_6 -0.48974216532665693 -0.2905264324998928
43.0 cluster_6 -0.48819945637198037 -0.5563508985949368
44.0 cluster_6 -0.489451951053194 -0.5161040723523015
45.0 cluster_6 -0.3865843767213269 -0.42270895141821996
46.0 cluster_6 -0.5203325950038856 -0.6501744770098856
47.0 cluster_6 -0.4634760958739974 -0.5190511608669546
48.0 cluster_0 -0.6476800654306508 -0.49551459536369136
49.0 cluster_4 0.3158666062001201 -0.47988907218157134
50.0 cluster_0 -0.5294753922908229 -0.522767688500297
51.0 cluster_0 -0.8010326888449203 -0.7094224060090127
<!DOCTYPE html>
<meta charset="utf-8">
<p id="g1"></p>
<head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var data = d3.csv('data.csv', function(error, data){
data.forEach(function(d){
d.x = +d.x;
d.y =+d.y; });
var color = d3.scaleOrdinal(d3.schemeCategory20);
var margin = { top: 30, right: 100, bottom: 30, left: 30 };
width = 900 - margin.left - margin.right,
height = 480 - margin.top - margin.bottom;
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var x = d3.scaleLinear()
.range([0, width])
.nice();
var y = d3.scaleLinear()
.range([height, 0]);
var xAxis = d3.axisBottom(x).ticks(12),
yAxis = d3.axisLeft(y).ticks(12 * height / width);
var brush = d3.brush().extent([[0, 0], [width, height]]).on("end", brushended),
idleTimeout,
idleDelay = 350;
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 clip = svg.append("defs").append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("width", width )
.attr("height", height )
.attr("x", 0)
.attr("y", 0);
var xExtent = d3.extent(data, function (d) { return d.x; });
var yExtent = d3.extent(data, function (d) { return d.y; });
x.domain(d3.extent(data, function (d) { return d.x; })).nice();
y.domain(d3.extent(data, function (d) { return d.y; })).nice();
var scatter = svg.append("g")
.attr("id", "scatterplot")
.attr("clip-path", "url(#clip)");
scatter.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 5)
.attr("cx", function (d) { return x(d.x); })
.attr("cy", function (d) { return y(d.y); })
.attr("opacity", 0.7)
.style("fill", function(d) { return color(d.cluster); });
// x axis
svg.append("g")
.attr("class", "x axis")
.attr('id', "axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text")
.style("text-anchor", "end")
.attr("x", width)
.attr("y", height - 8)
.text("PC 2l");
// y axis
svg.append("g")
.attr("class", "y axis")
.attr('id', "axis--y")
.call(yAxis);
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "1em")
.style("text-anchor", "end")
.text("PC 1");
scatter.append("g")
.attr("class", "brush")
.call(brush);
function brushended() {
var s = d3.event.selection;
if (!s) {
if (!idleTimeout) return idleTimeout = setTimeout(idled, idleDelay);
x.domain(d3.extent(data, function (d) { return d.x; })).nice();
y.domain(d3.extent(data, function (d) { return d.y; })).nice();
} else {
x.domain([s[0][0], s[1][0]].map(x.invert, x));
y.domain([s[1][1], s[0][1]].map(y.invert, y));
scatter.select(".brush").call(brush.move, null);
}
zoom();
}
function idled() {
idleTimeout = null;
}
function zoom() {
var t = scatter.transition().duration(750);
svg.select("#axis--x").transition(t).call(xAxis);
svg.select("#axis--y").transition(t).call(yAxis);
scatter.selectAll("circle").transition(t)
.attr("cx", function (d) { return x(d.x); })
.attr("cy", function (d) { return y(d.y); });
}
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate("+(width+70)+"," + i * 30 + ")"; });
var clicked = null
legend.append("circle")
.attr("r", 7)
.style("fill", function(d) { return color(d); })
.attr("transform", function(d, i) { return "translate(-68,1)"; })
.on("click", function(d) {
d3.selectAll(".dot").style("opacity", .7)
if(clicked !== d) {
d3.selectAll(".dot")
.filter(function(e) {
return e.cluster !== d
})
.style("opacity", 0.1)
clicked = d;
} else {
clicked = null;
}
})
legend.append("text")
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; })
.on("click", function(d) {
d3.selectAll(".dot").style("opacity", .7)
if(clicked !== d) {
d3.selectAll(".dot")
.filter(function(e) {
return e.cluster !== d
})
.style("opacity", 0.1)
clicked = d;
} else {
clicked = null;
}
});
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment