D3 Examples - Basic scatterplot

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
  <style>
    body { 
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 12px;
      color: #696969;
    }
    
    .axis path, .axis line {
      fill: none;
      stroke: #dcdcdc;
      stroke-dasharray: 2, 2;
      shape-rendering: crispEdges;
    }
    
    .axis text {
            font-size: 10px;
            fill: #6b6b6b;
        }
    
    .title {
      font-size: 14px;
      fill: #6b6b6b;
    }
    
    .legendText {
      fill: #6b6b6b;
    }
    
    .shadow {
      text-shadow: 2px 2px 2px #fff, -2px -2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff, -2px 0px 2px #fff, 2px 0px 2px #fff;
      }
    
    circle {
      fill-opacity: 0.55;
    }
    </style>
</head>
​
<body>
<script>
  var w = 960;
  var h = 500;
  var margin = {top: 40, right: 60, bottom: 30, left: 60};
  
  var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
  
  // colour scale for regions
  var colours = d3.scaleOrdinal()
    .domain(["Asia Pacific", "North America", "Europe", "Latin America", "Middle East and Africa"])
    .range(["#E01A25", "#2074A0", "#10A66E", "#66489F", "#EFB605"]);
  
  var xScale = d3.scaleLinear()
  // var xScale = d3.scaleLog()
    .range([margin.left, w - margin.left - margin.right]);
  
  var yScale = d3.scaleLinear()
    .range([h - margin.bottom, margin.top]);
  
  var xAxis = d3.axisBottom()
    .scale(xScale)
    .tickFormat(d3.format(","))
    .tickSize(-(h - (margin.top+margin.bottom)))
    .ticks(10);
  
  var yAxis = d3.axisLeft()
    .scale(yScale)
    .tickFormat(d3.format(".0%"))
    .tickSize(-(w - (margin.left+margin.right)))
    .ticks(5);
  
    // load data
  d3.csv("delays_1704.csv", prepare, function(data) {
    dataset = data;
    
    // xScale.domain([400, 40000])
    xScale.domain([0, d3.max(dataset, function(d) { return d.flights; })]);
    yScale.domain([0, d3.max(dataset, function(d) { return d.delay; })]);
    
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + (h - margin.bottom) + ")")
        .call(xAxis)
  
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + margin.left + ",0)")
        .call(yAxis)
    
    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function(d) { return xScale(d.flights); })
            .attr("cy", function(d) { return yScale(d.delay); })
            .attr("r", 3.5)
        .style("fill", function(d) { return colours(d.region); });
    
    svg.append("g")
        .append("text")
        .attr("class", "x title shadow")
        .attr("text-anchor", "end")
        .attr("transform", "translate(" + (w - margin.right - 5) + "," + (h - margin.bottom - 7) + ")")
        .text("x-axis title here")
  
    svg.append("g")
        .append("text")
        .attr("class", "y title shadow")
        .attr("text-anchor", "end")
        .attr("transform", "translate(" + (margin.left+15) + "," + (margin.top+5) + ") rotate(-90)")
        .text("y-axis title here")
    
        // legend
    var legendMargin = {top:12, right:5, bottom:10, left:5};
    var legendW = 160;
    var legendH = 200;
  
    var svgLegend = svg.append("svg")
      .attr("width", legendW)
      .attr("height", legendH)
      .attr("x", w - margin.right - legendW)
      .attr("y", margin.top);
  
  var legendContainer = svgLegend.append("g")
    .attr("class", "legendContainer")
    .attr("transform", "translate(" + legendMargin.left + "," + legendMargin.top + ")");
  
    var rectSize = 10;
    var rowHeight = 20;
    var maxWidth = 125;
​
    var legend = legendContainer.selectAll(".legendSquare")
      .data(colours.range())
      .enter()
      .append("g")
      .attr("class", "legendSquare")
      .attr("transform", function(d, i) {
        return "translate(0," + (i*rowHeight) + ")";
      })
​
    // append squares to legend
    legend.append("rect")
      .attr("width", rectSize)
      .attr("height", rectSize)
      .style("fill", function(d) { return d; })
​
    // append text to legend
    legend.append("text")
      .attr("transform", "translate(20," + rectSize/2 + ")")
      .attr("class", "legendText shadow")
      .attr("dy", ".35em")
      .text(function(d, i) { return colours.domain()[i]; }) 
  })
  
​
  
  
  
  function prepare(d) {
    d.code = d.airport_code;
    d.city = d.airport_city;
    d.region = d.region;
    d.flights = +d.flights;
    d.delay = +d.delayed_15min;
    return d;
  }
  
</script>
</body>
    