D3 Examples - IMDB-Rating vs Facebook-Likes

IMDB-Rating vs Facebook-Likes
This scatter plot shows how IMDB rating of a movie relates to Facebook likes.
The visualization responds to page resize, changing the width and height of the marks area to fill the available space, using the General Update Pattern in D3.
This chart is remade. The original version is here.
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>
    <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 dataset = [];
​
    function row(d) {
        d.movie_facebook_likes = (+d.movie_facebook_likes) / 1000;
        if (d.movie_facebook_likes > 0) {
            d.imdb_score = +d.imdb_score;
            dataset.push({
                likes: +d.movie_facebook_likes,
                imdb: +d.imdb_score,
                title: d.movie_title,
                link: d.movie_imdb_link
            });
        }
    }
​
    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 / 50, 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);
​
        d3.selectAll("text:not(.axis-label)").style("font-size", parseInt(outerHeight / 40) + 'pt');
​
​
        var circles = g.selectAll('circle').data(dataset);
        circles.exit().remove();
        circles.enter()
            .append("a")
            .attr("href", d => d.link)
            .attr("target", "_blank")
            .append('circle')
            .merge(circles)
            .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)');
    }
​
    d3.queue().defer(d3.csv, 'movie_metadata.csv', row).await(render);
    window.addEventListener("resize", render);
</script>
</body>
</html>
​
    