-
Notifications
You must be signed in to change notification settings - Fork 86
/
tsne-viz.html
116 lines (100 loc) · 3.83 KB
/
tsne-viz.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
---
layout: default
title: A Map of Publications on Machine Learning for Source Code
description: A map/visualization of the ML4Code papers.
---
<h2>2D Map of Papers</h2>
<p>Each dot represents one paper in this survey. Hover your mouse over each point to look
at the details. Click on a point to go to the paper information page.</p>
<div style="text-align: right;"><label>Search </label><input type="text" spellcheck="false" id="filtermap"/></div>
<div id="paperviz"></div>
Please consider <a href="/contributing.html">contributing</a> by updating
the information of existing papers or adding new work.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy.umd.min.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 600 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("#paperviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
//Read the data
d3.json("./tsne.json", function(data) {
// Add X axis
var x = d3.scaleLinear()
.domain([-15, 15])
.range([ 0, width ]);
// Add Y axisB
var y = d3.scaleLinear()
.domain([-15, 15])
.range([height, 0]);
// Add a tooltip div. Here I define the general feature of the tooltip: stuff that do not depend on the data point.
// Its opacity is set to 0: we don't see it by default.
var tooltip = d3.select("#paperviz")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "rgb(81, 81, 81)")
.style("width", "450px")
.style("height", "120px")
.style("color", "white")
.style("border-width", "0px")
.style("border-radius", "10px")
.style("padding", "10px")
.style("position", "absolute");
// A function that change this tooltip when the user hover a point.
// Its opacity is set to 1: we can now see it. Plus it set the text and position of tooltip depending on the datapoint (d)
var mouseover = function(d) {
tooltip
.style("opacity", 1)
}
var mousemove = function(d) {
tags = ""
for (i=0; i<d.tags.length; i++) {
tags += "<tag>" + d.tags[i] + "</tag> "
}
var boundingRect = document.getElementById("paperviz").getBoundingClientRect();
var mousePos = d3.mouse(this);
var x = mousePos[0] + boundingRect.x + 20;
var y = mousePos[1] + boundingRect.y + 30;
tooltip
.html("<p>" + d.title + " " + tags + "</p>")
.style("left", x + "px")
.style("top", y + "px");
}
var click_link = function(d) {
window.location.href = "/publications/" + d.key + "/";
}
// Add dots
svg.append('g')
.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) { return x(d.tsne_embedding[0]); } )
.attr("cy", function (d) { return y(d.tsne_embedding[1]); } )
.attr("r", 8)
.style("fill", "#69b3a2")
.style("opacity", 0.4)
.style("stroke", "white")
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("click", click_link);
var isMatch = function(d, searchTerm) {
if (searchTerm.length < 3) return false;
var allText = (d.title + " " + d.abstract + " " + d.tags.join(" ")).toLocaleLowerCase();
return allText.indexOf(searchTerm) != -1;
}
$("#filtermap").keyup(function (e) {
var searchTerm = $("#filtermap").val().toLocaleLowerCase();
var allPoints = d3.selectAll("circle");
// TODO: This seems quite inefficient...
allPoints.filter(dd => !isMatch(dd, searchTerm)).style("fill", "#69b3a2");
allPoints.filter(dd => isMatch(dd, searchTerm)).style("fill", "#aa0000");
});
});
</script>