t-sne d3

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
  
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}
  
.tooltip {
	position: absolute;
	opacity:0.8;
	z-index:1000;
	text-align:left;
	border-radius:4px;
	padding:8px;
	color:#fff;
	background-color:#000;
	font: 12px sans-serif;
	max-width: 300px;
}

</style>

var margin = {top: 20, right: 20, bottom: 20, left: 20},
    scatter_width = 400 - margin.left - margin.right,
    scatter_height = 500 - margin.top - margin.bottom,
    scatter_x = d3.scaleLinear().range([0, scatter_width]),
    scatter_y = d3.scaleLinear().range([scatter_height - 100, 0]);
 
var scatter_color = d3.scaleSequential(d3.interpolateViridis);

var scatter = d3.select("#scatter").append("svg")
    .attr("width", scatter_width + margin.left + margin.right)
    .attr("height", scatter_height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

d3.csv("tsne.csv", function(error, data) {
  if (error) throw error;

data.forEach(d => {
    d.X = +d.X
    d.Y = +d.Y
    d.Pos = +d.Pos
  })

scatter_x.domain(d3.extent(data, d => d.X)).nice();
  scatter_y.domain(d3.extent(data, d => d.Y)).nice();
  //color.domain(d3.extent(data, d => d.Pos )).nice();
  scatter_color.domain([1, 413]);

scatter.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (scatter_height -100) + ")")
      .call(d3.axisBottom(scatter_x))
    .append("text")
      .attr("class", "label")
      .attr("x", scatter_width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Sepal Width (cm)");

scatter.append("g")
      .attr("class", "y axis")
      .call(d3.axisLeft(scatter_y))
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Sepal Length (cm)");

scatter.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", d => scatter_x(d.X))
      .attr("cy", d => scatter_y(d.Y))
      .style("fill", d => scatter_color(d.Pos))
      .on("mouseover", function(d) {
    		tooltip.transition()
               .duration(150)
          		 .style("opacity", .9);
        tooltip.html("<b>Position:</b> " + d.Pos)
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(300)
               .style("opacity", 0);
      });
  
	scatter.append("g")
  	.attr("class", "legendLinear")
  	.attr("transform", "translate(0,380)");

var legendLinear = d3.legendColor()
  	.shapeWidth(26)
   	.cells(12)
  	.labelFormat(d3.format(",.0f"))
  	.orient('horizontal')
  	.scale(scatter_color);

scatter.select(".legendLinear")
  		.call(legendLinear);

});

</script>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js