Scatter Plot

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .dot {
        stroke: rgba(70, 131, 180, 0.3);
        stroke-width: 2px;
        fill: none;
    }

.female {
        stroke: rgba(180, 70, 162, 0.3);
    }

.selected {
        fill: rgb(175, 175, 175);
    }

.label {
        font: 10px sans-serif;
        color: black;
    }
  </style>
</head>

<body>
  <script>
        // set the dimensions and margins of the graph
        var margin = { top: 20, right: 20, bottom: 30, left: 50 },
            cWidth = 250,
            cHeight = 250,
            width = cWidth + margin.left + margin.right,
            height = cHeight + margin.top + margin.bottom;

// set the ranges
        var x = d3.scaleLinear().range([0, cWidth]);
        var y = d3.scaleLinear().range([cHeight, 0]);

// Scale the range BUT not based on the data
        x.domain([0, 1]);
        y.domain([0, 0.3]);

// append the svg obgect to the body of the page
        // appends a 'group' element to 'svg'
        // moves the 'group' element to the top left margin
        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

// Get the data
        d3.csv("unemployment-rate2.csv", function (error, data) {
            if (error) throw error;

var filtered = data.filter(function (d) { return d.Age == "Total"; });

// Add the scatterplot
            svg.selectAll(".dot")
                .data(filtered)
                .enter().append("circle")
                .classed("dot", true)
                .classed("female", function (d) { return d.Sex == "Women"; })
                .attr("r", 5)
                .attr("cx", function (d) { return x(d.EmpPop); })
                .attr("cy", function (d) { return y(d.UnempPop); })
                        .on("mouseenter", function (d, i) {
                            var selCountry = d.Country;
                            console.log("hover " + d.Country);

d3.select(this).classed("selected", true);
                        })
                        .on("mouseout", function (d, i) {
                            d3.select(this).classed("selected", false);
                        })
                .append("title").text(function (d) { return d.Country; });

// Add the X Axis
            svg.append("g")
                .attr("transform", "translate(0," + cHeight + ")")
                .call(d3.axisBottom(x));

svg.append("text")
                .attr("class", "label")
                .attr("x", cWidth)
                .attr("y", cHeight - 5)
                .style("text-anchor", "end")
                .text("employed/pop.");

// Add the Y Axis
            svg.append("g")
                .call(d3.axisLeft(y));

svg.append("text")
                .attr("class", "label")
                .attr("transform", "rotate(-90)")
                .attr("y", 10)
                .attr("x", 0)
                .style("text-anchor", "end")
                .text("unempl./pop.");

});
  </script>
</body>

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