D3 Examples - [unlisted] NOT WORKING

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.3/jquery.csv.min.js"></script>
    <title>IMDB-Rating vs Facebook-Likes</title>
    <style>
        body {
            background: #fffddb
        }
​
        .domain {
            display: none;
        }
​
        .tick line {
            stroke: #b4d9b4;
        }
​
        .tick text {
            fill: #63c96b;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
<h1><span style="color: #ffcb0f">IMDB-Rating</span> vs <span style="color: #3b69a8">Facebook-Likes</span></h1>
<svg></svg>
<p>Try <b>resize</b> the window!</p>
<p>(You can click the circle to go to IMDB.)</p>
<script>
    const xValue = d => d.imdb;
    const xLabel = 'IMDB Rating';
    const yValue = d => d.likes;
    const yLabel = 'Facebook Likes (thousand)';
    const svg = d3.select("body").select('svg');
​
    var csvData = [];
    $.ajax({
        type: "POST",
        url: "movie_metadata.csv",
        dataType: "text",
        async: false,
        success: function (csv) {
            csvData = $.csv.toArrays(csv, {separator: ','});
        }
    });
    var dataset = [];
    for (var i = 1; i < csvData.length; i++) {
        var line = csvData[i];
        var likes = (+line[27]) / 1000;
        if (likes > 0)
            dataset.push({likes: likes, imdb: +line[25], title: line[11], link: line[17]});
    }
​
    function resize() {
        var w = window.innerWidth;
        var h = window.innerHeight - 40;
        var height;
        var width;
        if (w / 16 * 9 > h) {//narrow the height
            height = 0.8 * h;
            width = height / 9 * 16;
        } else {//narrow the width
            width = 0.95 * w;
            height = width / 16 * 9
        }
        svg.style('width', width + 'px').style('height', height + 'px');
    }
​
​
    function render() {
        resize();
        var outerWidth = parseFloat(svg.style("width"));
        var outerHeight = parseFloat(svg.style("height"));
        var margin = {left: outerWidth / 10, right: outerWidth / 20, top: outerWidth / 50, bottom: outerHeight / 10};
        var innerWidth = outerWidth - margin.left - margin.right;
        var innerHeight = outerHeight - margin.top - margin.bottom;
​
        var xScale = d3.scaleLinear()
            .domain([0, 10])
            .range([0, innerWidth])
            .nice();
        var yScale = d3.scaleLinear()
            .domain([0, 350])
            .range([innerHeight, 0]).nice();
        var xAxis = d3.axisBottom()
            .scale(xScale)
            .tickPadding(margin.bottom / 3)
            .tickSize(-innerHeight);
        var yAxis = d3.axisLeft()
            .scale(yScale)
            .ticks(11)
            .tickPadding(margin.left / 10)
            .tickSize(-innerWidth);
​
        var g = svg.selectAll("g").data([null]);
        g = g.enter().append("g").merge(g)
            .attr('transform', `translate(${margin.left},${margin.top})`);
​
​
        var xAxisG = g.selectAll("#x-axis-g").data([null]);
        xAxisG = xAxisG.enter().append("g").merge(xAxisG)
            .attr('id', 'x-axis-g')
            .attr('transform', 'translate(0,' + innerHeight + ')');
        var yAxisG = g.selectAll("#y-axis-g").data([null]);
        yAxisG = yAxisG.enter().append("g").merge(yAxisG)
            .attr('id', 'y-axis-g');
​
        var xAxisText = svg.selectAll("#x-axis-label").data([null]);
        xAxisText = xAxisText.enter().append("text").merge(xAxisText)
            .attr('class', 'axis-label')
            .attr('id', 'x-axis-label')
            .attr('x', outerWidth / 2.4)
            .attr('y', outerHeight - margin.bottom / 10)
            .style("font-size", parseInt(outerHeight / 35) + 'pt')
            .style('fill', "#ffcb0f")
            .text(xLabel);
        var yAxisText = svg.selectAll("#y-axis-label").data([null]);
        yAxisText = yAxisText.enter().append("text").merge(yAxisText)
            .attr('class', 'axis-label')
            .attr('id', 'y-axis-label')
            .attr('x', -outerHeight / 2)
            .attr('y', margin.left / 3)
            .attr('transform', `rotate(-90)`)
            .style('text-anchor', 'middle')
            .style("font-size", parseInt(outerHeight / 35) + 'pt')
            .style("fill", "#3b69a8")
            .text(yLabel);
​
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        $("text:not(.axis-label)").css({"font-size": parseInt(outerHeight / 40) + 'pt'});
​
​
        var circles = g.selectAll('circle').data(dataset)
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('r', parseInt(outerHeight / 60));
        circles.enter()
            .append("a").attr("href", d => d.link).attr("target", "_blank")
            .append('circle')
            .attr('class', 'circle')
            .attr('cx', d => xScale(xValue(d)))
            .attr('cy', d => yScale(yValue(d)))
            .attr('fill-opacity', 0.05)
            .attr('r', parseInt(outerHeight / 60))
            .style("fill", "#4357e9")
            .append('title')
            .text(d => d.title + ' [IMDB: ' + xValue(d) + '] ' + ' (' + d3.format(',')(yValue(d) * 1000) + ' likes)');
    }
    render();
    window.addEventListener("resize", render);
</script>
</body>
</html>
    