Exoplanets Scatterplot by syntagmatic

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
body {
  margin: 0;
  font-family: arial, sans;
}

.label {
  font-size: 15px;
}

.legend text,
.axis text {
  font-size: 13px;
  fill: #333;
}

.axis path,
.axis line {
  fill: none;
  stroke-width:1px;
  stroke: #777;
}

circle {
  fill-opacity: 0.65;
}

.bubble {
  opacity: 1;
  transition: opacity 0.3s;
}

.bubble text {
  opacity: 0;
  pointer-events: none;
  font-size: 12px;
}

.bubble:hover text {
  opacity: 1;
}

.bubble:hover circle {
  fill-opacity: 1;
}

.legend rect {
  fill-opacity: 0.75;
}

.legend:hover rect {
  fill-opacity: 1;
}
</style>
<body>
</body>

<script src="//d3js.org/d3.v4.0.0-alpha.35.min.js"></script>
<script>
var margin = { top: 30, right: 50, bottom: 40, left: 40 };
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;

var svg = d3.select("body")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xscale = d3.scaleLog()
  .domain([0.5, 500000])
  .range([0,width]);

var yscale = d3.scaleLinear()
  .range([height,0]);

var radius = d3.scaleSqrt()
  .range([3,20]);

var xAxis = d3.axisBottom()
  .scale(xscale)
  .tickValues([0.5,1,3,10,100,365,1000,10000,100000,500000])
  .tickFormat(d3.format(","));

var yAxis = d3.axisLeft()
  .scale(yscale)

var color = d3.scaleOrdinal()
  .range(["#b3b3b3", "#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d"])
  .domain(["non-habitable", "psychroplanet", "mesoplanet", "hypopsychroplanet"]);

d3.csv("phl_hec_all_confirmed.csv", function(error, data) {
  console.log(data);
  // data pre-processing
  data = data.filter(function(d) {
    return +d["P. Eccentricity"] !== 0
        && d["P. Period (days)"].length > 0;
  });

  data.forEach(function(d) {
    d.y = +d["P. Eccentricity"];
    d.x = +d["P. Period (days)"];
    d.r = +d["P. Mass (EU)"];
  });

  data.sort(function(a,b) { return b.r - a.r; });

  yscale.domain(d3.extent(data, function(d) {
    return d.y;
  })).nice()

  radius.domain(d3.extent(data, function(d) {
    return d.r;
  })).nice()

  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .attr("class", "x axis")
    .call(xAxis);

  svg.append("g")
    .attr("transform", "translate(0,0)")
    .attr("class", "y axis")
    .call(yAxis);

  var group = svg.selectAll("g.bubble")
    .data(data)
    .enter().append("g")
    .attr("class", "bubble")
    .attr("transform", function(d) {
      return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")"
    });

  group
    .append("circle")
    .attr("r", function(d) { return radius(d.r);  })
    .style("fill", function(d) {
      return color(d["P. Habitable Class"]);
    })

  group
    .append("text")
    .attr("x", function(d) { return radius(d.r); })
    .attr("alignment-baseline", "middle")
    .text(function(d) {
      return d["P. Name"];  
    });

  svg.append("text")
    .attr("x", 10)
    .attr("y", 10)
    .attr("class", "label")
    .text("Eccentricity");

  svg.append("text")
    .attr("x", width)
    .attr("y", height-10)
    .attr("text-anchor", "end")
    .attr("class", "label")
    .text("Period (days)");

  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 6)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

  legend.on("mouseover", function(type) {
      d3.selectAll(".bubble")
        .style("opacity", 0.15)
        .filter(function(d) { return d["P. Habitable Class"] == type; })
        .style("opacity", 1);
    })
    .on("mouseout", function(type) {
      d3.selectAll(".bubble")
        .style("opacity", 1);
    });
});
</script>