D3 Examples - Trivariate Scatterplot (d3)

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
  <style>
​
    .dot { 
      stroke: steelblue;
      fill: steelblue; 
    }
​
  </style>
<body>
    
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
​
// Set graph dimensions and margins
var margin = {top: 50, right: 100, bottom: 65, left: 150},
    width = 1400 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom;
​
var targetLabel = "2003/10";
​
// Set ranges
var x = d3.scaleLinear()
          .range([0, width])
var y = d3.scaleLinear()
          .range([height, 0]);
var r = d3.scaleLinear()
          .range([1, 15]);
          
// Appends an svg to the body and a group which is moved to the top left margin
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 + ")");
​
// Get data
d3.csv("airlines.csv", function(error, data) {
  if (error) throw error;
​
  // Filter data
  var newData = data.filter(function filterCriteria(d) {
    return d.Label == targetLabel;
  })
​
  // Format data
  newData.forEach(function(d) {
    d.Code = d.Code;
    d.OnTime = +d.OnTime;
    d.TotalFlights = +d.TotalFlights;
    d.Delayed = +d.Delayed;
  });
    
  // Scale the range of the data in the domains
  x.domain([0, d3.max(newData, function(d) {
    return d.TotalFlights;
  })]);
  y.domain([0, d3.max(newData, function(d) {
    return d.TotalFlights; 
  })]);
  r.domain(d3.extent(newData, function(d) {
    return d.Delayed;
  }));
​
  // Append dots for each point
  svg.selectAll(".dot")
      .data(newData)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("cx", function(d) {
        return x(d.OnTime);
      })
      .attr("cy", function(d) {
        return y(d.TotalFlights);
      })
      .attr("r", function(d) {
        return r(d.Delayed);
      });
​
  // Make legend
  svg.append("circle")
    .attr("class", "dot")
    .attr("cx", width + (margin.right / 2))
    .attr("cy", (height / 2) - 50)
    .attr("r", 1);
​
  svg.append("circle")
    .attr("class", "dot")
    .attr("cx", width + (margin.right / 2))
    .attr("cy", (height / 2) + 50)
    .attr("r", 15);
​
  svg.append("text")
    .data(newData)
    .text(d3.max(newData, function(d) {
      return d.Delayed;
    }))
    .attr("x", width + (margin.right / 2))
    .attr("y", (height / 2) + 80)
    .style("text-anchor", "middle")
    .style("font-size", "12px");
​
  svg.append("text")
    .text("0")
    .attr("x", width + (margin.right / 2))
    .attr("y", (height / 2) - 35)
    .style("text-anchor", "middle")
    .style("font-size", "12px");
​
  svg.append("text")
    .text("# of Delayed Flights")
    .attr("x", width + (margin.right / 2))
    .attr("y", (height / 2))
    .style("text-anchor", "middle")
    .style("font-size", "14px");
​
  // Create point labels
  svg.selectAll("text")
      .data(newData)
      .enter().append("text")
      .text(function(d) {
        return d.Code;
      })
      .attr("x", function(d) {
        return (x(d.OnTime) + 10);
      })
      .attr("y", function(d) {
        return y(d.TotalFlights) + 10;
      })
      .attr("font-size", "10px")
      .attr("text-anchor", "left");
​
  // X axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
         .selectAll("text") 
     .style("text-anchor", "middle")
        .attr("dx", ".0em")
  .style("font-size", "12px") 
        .attr("dy", ".75em");
​
  // Label x axis
  svg.append("text")
      .attr("x", (width / 2))
      .attr("y", height + (margin.bottom / 2))
      .attr("text-anchor", "middle")
      .style("font-size", "14px")
      .text("Total # of Flights");
​
  // Y axis
  svg.append("g")
      .call(d3.axisLeft(y));
​
  // Label y axis
  svg.append("text")
      .attr("x", 0 - margin.left)
      .attr("y", (height / 3))
      .attr("text-anchor", "left")
      .style("font-size", "14px")
      .text("# of On Time Flights");
​
  // Make a title
  svg.append("text")
      .attr("x", (width / 2))
      .attr("y", 0 - (margin.top / 2))
      .attr("text-anchor", "middle")
      .style("font-size", "20px")
      .text("On Time Flights Over Total Flights for " + targetLabel);
​
});
​
</script>
</body>
​
    