sss

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Line Chart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
    <h1>Line Chart</h1>
    <div id="chart"></div>
</body>
</html>

CSS

.dot {
    fill: white;
    stroke-width: 2
}

JavaScript

d3.json("https://cors.io/?https://canvasjs.com/data/gallery/javascript/daily-sales-data.json", function (dataArr) {

    let margin = { top: 20, right: 20, bottom: 30, left: 40 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    let data = JSON.parse(JSON.stringify(dataArr));

    let svg = d3.select("#chart")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom);

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

    let x = d3.scaleTime().rangeRound([0, width - (margin.right)]);

    let y = d3.scaleLinear()
        .rangeRound([height, 0]);

    let line = d3.line()
        .x(function (d) { return x(d.date); })
        .y(function (d) { return y(d.units); });

    let all = [];
    for (let i = 0; i < data.length; i++) {
        let stringDate = new Date(data[i].date);
        all.push({ date: stringDate, units: data[i].units })
    }

    x.domain(d3.extent(all, function (d) { return d.date; }));
    y.domain([0, d3.max(all, d => d.units)]);

    g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .select(".domain")

    g.append("g")
        .call(d3.axisLeft(y))


    g.append("path")
        .datum(all)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", line);

    g.selectAll("dot")
        .data(all)
        .enter()
        .append("circle")
        .attr("r", 6)
        .attr("cx", function (d) { return x(d.date) })
        .attr("cy", function (d) { return y(d.units) })
        .attr("class", "dot")
        .attr("stroke", "steelblue")
        .on("mouseover", function (d) {
            d3.select(this).transition().duration(100)
           ...