[unlisted] NOT WORKING

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

The data is from Kaggle: IMDB 5000 Movie Dataset.

Built with blockbuilder.org

forked from BruceHenry's block: IMDB-Rate vs Facebook-Likes

forked from BruceHenry's block: NOT WORKING

<!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');

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>

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

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.3/jquery.csv.min.js