Scatterplot I - log scale toggle

Scatterplot I – with log scale checkbox.

<!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;
    }
    
    div.controls {
      float: right;
      margin-right: 128px;
    }
    
    label {
      font-size: 14px;
    }
    
    .axis path, .axis line {
      fill: none;
      stroke: #dcdcdc;
      stroke-dasharray: 2, 3;
      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>
  <div class="controls">
    <input id="logCheckbox" type="checkbox" value="logscale"></input>
	<label for="logscale">Log scale</label>
  </div>
  
<script>
  var w = 960;
  var h = 460;
  var margin = {top: 5, 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 x")
  		.attr("transform", "translate(0," + (h - margin.bottom) + ")")
  		.call(xAxis)
  
  	svg.append("g")
  		.attr("class", "axis y")
  		.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]; }) 
    
    d3.select("#logCheckbox").on("click", function() {
      if(this.checked) {
	      xScale = d3.scaleLog()
        	.domain([400,40000])
        	.range([margin.left, w - margin.left - margin.right]);
      } else {
        xScale = d3.scaleLinear()
        	.domain([0, d3.max(dataset, function(d) { return d.flights; })])
	        .range([margin.left, w - margin.left - margin.right]);
      }
      xAxis.scale(xScale);
      d3.select("g.axis.x")
      	.transition()
        .duration(500)
      	.call(xAxis);
      
      d3.selectAll("circle")
      	.transition()
      	.delay(400)
      	.duration(600)
      	.attr("cx", function(d) { return xScale(d.flights); })
    })
  })
  
  
  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>

https://d3js.org/d3.v4.min.js