satellites.js

<script type="text/javascript">
  // set width/height
var w = 1000;
var h = 600;
var padding = 60;
// load csv and it only exists within the callback function!
d3.csv('d3df.csv', function(error, dataset) {
  dataset.forEach(function(d) {
    d.Distance = +d.Distance;
    d.Period = +d["Period..minutes."];
  }); 
  // Scaling functions
  var xScale = d3.scale.linear()
                       //.domain([0, d3.max(dataset, function(d) { return d.Period; })]) 
                       .domain([0,1])
                       .range([padding, w - padding * 2]);
  var yScale = d3.scale.linear()
                       .domain([0, d3.max(dataset, function(d) { return d.Distance; })])
                       .range([h - padding, padding]);
 
  // Define Axes
  var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient("bottom")
                    .ticks(5)
                    .tickFormat("");
  var yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient("left")
                    .ticks(5);
  // Create SVG
  var svg = d3.select("#wrapper")
              .append("svg")
              .attr("width", w)
              .attr("height", h);
  // Create dots
  svg.selectAll("circle")
     .data(dataset)
     .enter()
     .append("circle")
     .attr("cx", function(d) {
          //return xScale(d.Period);
          return xScale(Math.random());
     })
     .attr("cy", function(d) {
          return yScale(d.Distance);
     })
     .attr("r", 2)
     // filter colors
     .attr("fill", function(d) {
     //     return "rgb(0, 0, " + (d["Distance"]) + ")";
          return "rgb(0, 0, 0)";
     })
     .on("mouseover", function(d) {
         var xValue = parseFloat(d3.select(this).attr("cx"));
         var yValue = parseFloat(d3.select(this).attr("cy"));
         d3.select("#tooltip")
           .style("left", xValue + "px")
           .style("top", yValue + "px")
           .select("#name")
           .html(d["Name.of.Satellite..Alternate.Names"] + "<br>" + 
                   "Country: " + d["Country.Org.of.UN.Registry"] + "<br>" +
                   "Use: " + d["Users"] + "<br>" +
                   "Purpose: " + d["Purpose"]);
         console.log(d);
         d3.select("#tooltip").classed("hidden", false);
     })
     .on("mouseout", function() {
         d3.select("#tooltip").classed("hidden", true);
     });
  // Append axes to SVG
  svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + (h - padding) + ")")
      .call(xAxis);
  svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(" + padding + ",0)")
      .call(yAxis);
  // for check boxes
  d3.selectAll("[name=user]").on("change", function() {
      var selected = this.value;
      display = this.checked ? "inline" : "none";
      svg.selectAll("circle")
        .filter(function(d) {return selected == d.Users;})
        .attr("display", display);
  });
  d3.selectAll("[name=v]").on("change", function() {
      var selected = this.value;
      display = this.checked ? "inline" : "none";
      svg.selectAll("circle")
        .filter(function(d) {return selected == d["Country.Org.of.UN.Registry"];})
        .attr("display", display);
  });
}); //end d3.csv()
</script>