D3 Examples - IMDB-Rating vs Facebook-Likes (zoomable)

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://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!--<script src="https://d3js.org/d3-drag.v1.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 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)
            .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>
​
    