scatter_plot

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.5/d3-legend.js"></script>
  <h3>Cyclist Doping</h3>
  <style>
    h3 {
      font-size: 22px;
      font-family: futura;
      font-weight: bold;
      text-align: center;
    }
    .tooltip {
      background-color: rgba(0, 0, 0, 0.8);
      color: #fafafa;
      padding: 5px;
      border-radius: 4px;
      transition: opacity 0.2s ease;
      font-size: 12px;
      text-align: left;
      font-weight: bold;
    }
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <p> <button>View by year </button> </p>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
	d3.json('cyclist-data.json', function(error, data) {

var margin = {top: 20, right: 20, bottom: 30, left: 40},
      		w = 600 - margin.left - margin.right,
      		h = 600 - margin.top - margin.bottom,
        	padding = 20,
      		space_for_label =60;
      		space_for_title =2;
    var color = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("body")
    					.append("svg")
    					.attr("width", w + margin.left + margin.right)
    					.attr("height", h + margin.top + margin.bottom)
        			.append("g")
        			.attr("transform", "translate(" + margin.left+"," +
                   margin.top+")");
      
     //scale
      
    var xScale = d3.scaleLinear()
      .domain([d3.min(data, d=>d.Seconds ),
               d3.max(data, d=>d.Seconds ) + space_for_label])
    	.rangeRound([margin.left, w + margin.left]);
          
     //want to list from 1 to max
    var yScale = d3.scaleLinear()
    	.domain([
               d3.min(data, d=>d.Place) - 
        			 space_for_title , 
               d3.max(data, d=>d.Place) +1])
    	.rangeRound([0, h]);
      
    var xAxis = d3.axisBottom()
    	.scale(xScale)
    	.ticks(5);
    var yAxis = d3.axisLeft()
    	.scale(yScale)
    	.ticks(5);
     //tooltip
    var tip =  d3.select('body')
      .append('div')
      .attr('class', 'tooltip');

//legend
    var ordinal = d3.scaleOrdinal()
    	.domain(["With Doping Allegation", "Without Doping Allegation"])
    	.range(["red","grey"]);
    svg.append("g")
      .attr("class", "legendOrdinal")
      .attr("transform", "translate(350,30)");

//text label
    svg.selectAll('text')
    	.data(data)
    	.enter()
    	.append('text')
    	.attr('x',d=>xScale(d.Seconds ) + 5)
      .attr('y',d=>yScale(d.Place) + 5)
    	.text(d => d.Name)
    	.style('font-size', '12px')
    	.style('font-family', 'futura');

//draw axis
    svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(" + padding + ",0)")
      .call(yAxis);

svg.append("g")
      .attr("class", "xaxis")
      .attr("transform", "translate(0,"+ h +")")
      .call(xAxis);

//axis label
    svg.append('text')
      .text('Seconds')
      .style('font-size', '18px')
      .attr('x', w/2 )
      .attr('y', h + margin.top + 10)
      .style('font-family', 'futura');
    svg.append('text')
      .text('places')
      .style('font-size', '18px')
      .attr('transform', 'rotate(-90)')
      .attr('y', - margin.left/2 )
      .attr('x', -h/2)
      .style('font-family', 'futura');

//add 
    
    svg.select(".legendOrdinal")
    	.call(legendOrdinal)
    	.style('font-family', 'futura')
    	.style('font-size', '12px');

//////transition		
    //switch axis
    var currentSelect = 'speed';
    d3.select("p")
      .on("click", function() {
      var xScale = d3.scaleLinear()
      .domain([d3.min(data, d=>d.Year ),
               d3.max(data, d=>d.Year ) + 10])
      .rangeRound([margin.left, w + margin.left]);
      //update circle
      svg.selectAll('circle')
        .data(data)
      	.transition(1000)
        .attr('cx',d=>xScale(d.Year))
        .attr('cy',d=>yScale(d.Place))
      //update text
      svg.selectAll('text')
    	.data(data)
    	.transition(1000)
    	.attr('x',d=>xScale(d.Year) + 5)
      .attr('y',d=>yScale(d.Place) + 5)
      
    })

})
  
  </script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.5/d3-legend.js