My Formula 1 Championship Standings

<!DOCTYPE html>
<body>
    <script src='https://d3js.org/d3.v5.min.js'></script>
    <script src="https://colorbrewer2.org/export/colorbrewer.js"></script>
    <script>
        var margin = {left: 20, top: 20, right: 20, bottom: 20},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
        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] + ')');

var x = d3.scaleBand()
            .range([0,width])
            .padding(.05);

var y = d3.scaleBand()
            .range([height,0])
            .padding(.05);

var nums = [];
                for (var i = 20; i > 0; i--) {
                    nums.push(i);
                }
                x.domain(allRaces.map(d => d.name));
                y.domain(nums);

var color = d3.interpolateRainbow;

var line = d3.line()
                    .x(d => x(d.name) + x.bandwidth()/2)
                    .y(d => y(d.rank) + y.bandwidth()/2)

svg.append('g')
                    .attr('transform', 'translate(0,' + 0 + ')')
                    .call(d3.axisBottom(x).tickSize(height))
                svg.append('g')
                    .attr('transform', 'translate(' + width + ',0)')
                    .call(d3.axisRight(y))
                svg.append('g')
                    .call(d3.axisLeft(y))

var driverLines = svg.selectAll('g.driverLine')
                    .data(drivers)
                    .enter().append('g')
                    .attr('class', 'driverLine');
                driverLines.append('path')
                    .datum(d=>d.races)
                    .attr('d', line)
                    .attr('fill', 'none')
                    .attr('stroke', (d,i) => color(i/25))
                    .attr('stroke-width', 4)
                    .on('mouseover', function(d) {
                        d3.select(this).attr('stroke-width', 7)
                    })
                    .on('mouseout', function(d) {
                        d3.select(this).attr('stroke-width', 4)
                    })
                driverLines.append('text')
                    .attr('x', d => x(d.currentRace) + x.bandwidth()/2 + 7)
                    .attr('y', d => y(d.currentRank) + y.bandwidth()/2 + 3)
                    .text(d => d.name)

var circles = svg.selectAll('circle')
                    .data(allRaces)
                    .enter().append('circle')
                    .attr('cx', d=> x(d.name) + x.bandwidth()/2)
                    .attr('cy', d=> y(d.rank) + y.bandwidth()/2)
                    .attr('r', 6)
                    .attr('fill', d => {
                        if (d.position == '1') return '#C98910';
                        else if (d.position == '2') return '#A8A8A8';
                        else if (d.position == '3') return '#965A38';
                        else return 'none'
                    })
            })
        
    </script>
</body>

Modified http://colorbrewer2.org/export/colorbrewer.js to a secure url

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

https://colorbrewer2.org/export/colorbrewer.js