IMDB-Rating vs Facebook-Likes

Click here to view this page in bl.ocks.org.

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.

Data Source: The data is from TMDB 5000 Movie Dataset | Kaggle.

Built with blockbuilder.org

<!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 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>

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