-
Notifications
You must be signed in to change notification settings - Fork 85
Expand file tree
/
Copy pathtsne-viz.html
More file actions
216 lines (177 loc) · 7.3 KB
/
tsne-viz.html
File metadata and controls
216 lines (177 loc) · 7.3 KB
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="en-us">
<head>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-107339008-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-107339008-1');
</script>
<link href="http://gmpg.org/xfn/11" rel="profile">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="machine learning, source code, big code, naturalness, software engineering, programming languages">
<title>
A Map of Publications on Machine Learning for Source Code · Machine Learning for Big Code and Naturalness
</title>
<!-- Enable responsiveness on mobile devices-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="/public/css/poole.css">
<link rel="stylesheet" href="/public/css/syntax.css">
<link rel="stylesheet" href="/public/css/hyde.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
<!-- Icons -->
<link rel="shortcut icon" href="/public/favicon.svg">
<link rel="search" href="/public/opensearchdescription.xml"
type="application/opensearchdescription+xml"
title="ML4Code" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
<body class="theme-base-0d layout-reverse">
<a href='/contributing.html' class='ribbon'>Contribute to ML4Code</a>
<div class="sidebar">
<div class="container sidebar-sticky">
<div class="sidebar-about">
<h1>
<a href="/">
Machine Learning for Big Code and Naturalness
</a>
</h1>
<p class="lead">Research on machine learning for source code.</p>
</div>
<nav class="sidebar-nav">
<div class="sidebar-item"><p style="font-size: 12px">Search related work <input type='text' id='searchTarget' size="16"/> <button onClick="search();">Go</button></p></div>
<a class="sidebar-nav-item" href="/papers.html">List of Papers</a>
<a class="sidebar-nav-item" href="/tags.html">Papers by Tag</a>
<a class="sidebar-nav-item active" href="/tsne-viz.html">2D Map of Papers</a>
<a class="sidebar-nav-item" href="/topic-viz.html">Topic-based Explorer</a>
<a class="sidebar-nav-item" href="/resources.html">Resources, Courses & Events</a>
<a class="sidebar-nav-item" href="/contributing.html">Contributing</a>
</nav>
<div class="sidebar-item">
<p style="font-size: 12px">Contact <a href="https://miltos.allamanis.com">Miltos Allamanis</a> about this survey or website.
<span style="font-size: 9px">
Made with <a href="https://jekyllrb.com">Jekyll</a> and <a href="https://github.com/poole/hyde">Hyde</a>.
</span></p>
</div>
</div></div>
<script>
$("#searchTarget").keydown(function (e) {
if (e.keyCode == 13) {
search();
}
});
function search() {
try {
ga('send', 'event', 'search', 'search', $("#searchTarget").val());
} finally {
window.location = "/papers.html#" + $("#searchTarget").val();
}
}
</script>
<div class="content container">
<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/core@2.4.0/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>
</div>
</body>
</html>