Alaska3

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

.tooltip {
  position: absolute;
  width: 150px;
  height: 60px;
  background: #f2f2f2;
  pointer-events: none;
}
</style>
  
<body>
  <h2>Scatterplot</h2>
  <div><svg id="chart1" width="700" height="400"></svg>
  <div><svg id="chart2" width="700" height="400"></svg></div>

//set up the color scale
    var colorScale = d3.scaleOrdinal(d3["schemeAccent"])

function createChart(file_name, chart_id){
        // add the graph canvas to the body of the webpage
        var svg = d3.select(chart_id)
            margin = {top: 20, right: 55, bottom: 50, left: 70},
            width = +svg.attr("width") - margin.left - margin.right,
            height = +svg.attr("height") - margin.top - margin.bottom;

var g = svg.append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv(file_name).then(function(data) {
            var xValue = function(d) { return +d["Year"];}, // data -> value
                xScale = d3.scaleLinear().range([0, width]),     // value -> display
                xMap = function(d) { return xScale(xValue(d));}; // data -> display

var yValue = function(d) { return +d["deathRank"];}, // data -> value
                yScale = d3.scaleLinear().range([height, 0]),    // value -> display
                yMap = function(d) { return yScale(yValue(d));}; // data -> display

// don't want dots overlapping axis, so add in buffer to data domain
            xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
            yScale.domain([d3.max(data, yValue)+1, 0]);

// x-axis
            g.append("g")
                .attr("class", "axis x-axis")
                .attr("transform", "translate(0," + height + ")") // move axis to bottom of chart
                .call(d3.axisBottom(xScale)
                            .ticks(5)
                            .tickFormat(d3.format("d")));

// x-axis label
            g.append("text")
                .attr("class", "label")
                .attr("x", width/2)
                .attr("y", height+(margin.bottom*0.75))
                .style("text-anchor", "middle")
                .text("Years")

// y-axis
            g.append("g")
                    .attr("class", "axis y-axis")
                    .call(d3.axisLeft(yScale)
                            .ticks(6));
            
            // y-axis label
            g.append("text") 
                .attr("class", "label")
                .attr("x", 0-(height/2))
                .attr("y", 0-(margin.left*0.55))
                .attr("transform", "rotate(-90)") // rotate text -90 degrees from x, y
                .style("text-anchor", "middle")
                .text("deathPercentage");
            // draw dots
            g.selectAll(".dot")
                .data(data)
                .enter().append("circle")
                .attr("class", "dot")
                .attr("r", 7.5)
                .attr("cx", xMap)
                .attr("cy", yMap)
                .style("fill", function(d, i) {return colorScale(d.Cause); })

// tooltip
                .on("mouseover", function(d) {
                    tooltip.transition()
                        .duration(200)         // ms delay before appearing
                        .style("opacity", .8); // tooltip appears on mouseover
                    tooltip.html(d.Cause + "<br/> " + d.Deaths + "<br/>" + d.deathPercentage)
                        .style("left", (d3.event.pageX + 10) + "px")  // specify x location
                        .style("top", (d3.event.pageY - 28) + "px");  // specify y location
                })
                .on("mouseout", function(d) {
                    tooltip.transition()
                        .duration(500)
                        .style("opacity", 0); // disappear on mouseout
                });
        });
        return g
    };

createChart("AlaskaTop5.csv", "#chart1")
    createChart("FloridaTop5.csv", "#chart2")
</script>
</body>
</html>

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

https://d3js.org/d3-scale-chromatic.v1.min.js