tsne-viz.html

---
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/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>&nbsp;"
    }

    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>