sort_testing

<!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>
  <style>
    .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>
  <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 = 500 - margin.top - margin.bottom,
        	padding = 20,
      		space_for_label =10;
      		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.Year ),
               d3.max(data, d=>d.Year ) + 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(10);
     //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.Year ) + 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('Year')
      .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');

//title
    svg.append('text')
      .text('Cyclist Doping')
      .style('font-size', '22px')
    	.style('font-weight', 'bold')
    	.style('font-family', 'futura')
      .attr('x', w/2 )
      .attr('y', 0);

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

})
  
  </script>
</body>

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

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