IMDB-Rating vs Facebook-Likes (zoomable)

IMDB-Rating vs Facebook-Likes

This scatter plot shows how IMDB rating of a movie relates to Facebook likes.

You can zoom in to see the dots closely. This chart is remade from the original version.

### Data Source: The data is from [TMDB 5000 Movie Dataset | Kaggle](https://www.kaggle.com/tmdb/tmdb-movie-metadata/data).

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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <title>IMDB-Rating vs Facebook-Likes</title>
    <style>
        body {
            background: #dfffdf
        }

.domain {
            display: none;
        }

.tick line {
            stroke: #b4d9b4;
        }

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>zoomimg</b> in!</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)
            .tickPadding(margin.left / 10)
            .tickSize(-innerWidth);

var g = svg.selectAll("g").data([null]);
        g = g.enter().append("g").merge(g);

var xAxisG = svg.selectAll("#x-axis-g").data([null]);
        xAxisG = xAxisG.enter().append("g").merge(xAxisG)
            .attr('id', 'x-axis-g')
            .attr('transform', 'translate(' + margin.left + ',' + (innerHeight + margin.top) + ')');
        var yAxisG = svg.selectAll("#y-axis-g").data([null]);
        yAxisG = yAxisG.enter().append("g").merge(yAxisG)
            .attr('id', 'y-axis-g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
        ;
        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", outerHeight / 35 + 'pt')
            .style("fill", "#3b69a8")
            .text(yLabel);

xAxisG.call(xAxis);
        yAxisG.call(yAxis);

d3.selectAll("text:not(.axis-label)").style("font-size", outerHeight / 40 + 'pt');

var circles = svg.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)) + margin.left)
            .attr('cy', d => yScale(yValue(d)) + margin.top)
            .attr('fill-opacity', 0.05)
            .attr('r', outerHeight / 60)
            .style("fill", "#4357e9")
            .append('title')
            .text(d => d.title + ' [IMDB: ' + xValue(d) + '] ' + ' (' + d3.format(',')(yValue(d) * 1000) + ' likes)');

svg.call(d3.zoom()
            .scaleExtent([0.9, 500])
            .translateExtent([[-10, -10], [innerWidth + 100, innerHeight + 100]])
            .on("zoom", d => {
                var k = d3.event.transform.k;
                var xScaleNew = d3.event.transform.rescaleX(xScale);
                var yScaleNew = d3.event.transform.rescaleY(yScale);
                xAxisG.call(xAxis.scale(xScaleNew).tickPadding(margin.bottom / 3));
                yAxisG.call(yAxis.scale(yScaleNew).tickPadding(margin.bottom / 10));
                g.attr("transform", d3.event.transform);
                svg.selectAll('circle')
                    .attr('cx', d => {
                        var result = xScaleNew(xValue(d)) + margin.left;
                        return result < margin.left ? -100 : result;
                    })
                    .attr('cy', d => {var result = yScaleNew(yValue(d)) + margin.top;
                        return result > innerHeight+margin.top*1.5 ? -100 : result})
                    .attr('r', outerHeight / 60 / Math.pow(k, 1 / 20))
                    .attr('fill-opacity', 0.05 * Math.pow(k, 1 / 2));
                d3.selectAll("text:not(.axis-label)").style("font-size", outerHeight / 40 + 'pt');
            }));

}

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

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://d3js.org/d3-drag.v1.min.js