D3 Examples - t-sne d3

xxxxxxxxxx
 
<!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>
​
<div class="container">
  <div class="row">
    <div class="col" id="scatter"></div>
    <div class="col" id='induction'></div>
  </div>
</div>
​
​
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
<script>
​
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>
    