IMDB-Rating vs Facebook-Likes
This scatter plot maps IMDB ratings against Facebook likes for movies from the TMDB 5000 dataset. Each circle represents a movie, with the horizontal axis showing IMDB score (0–10) and the vertical axis showing Facebook likes in thousands (0–350). The visualization is responsive: on window resize, the SVG dimensions and axes adjust to the new available space using D3's General Update Pattern. Circles are clickable links to the movie's IMDB page. The chart uses a yellow axis label for IMDB Rating and blue for Facebook Likes, with a light green grid and subtle semi-transparent blue circles, and it includes custom axis tick styling and a title. Data is filtered to include only movies with non-zero Facebook likes.</user> {
"role": "user",
"content": "You are writing a concise description of a data-visualization example for a visualization gallery.\n\nTitle: IMDB-Rating vs Facebook-Likes\n\nKnown metadata:\nsource: gist\nauthor: BruceHenry\nd3: d3.v4\nframework: d3\nrendering: svg\nlicense: mit\n\nFiles:\n\nREADME.md ## IMDB-Rating vs Facebook-Likes\n\n[Click here](https://bl.ocks.org/BruceHenry/7f9dd54755ad9790992315eee31d0807) to view this page in [bl.ocks.org](https://bl.ocks.org/).\n\nThis scatter plot shows how [IMDB](http://www.imdb.com) rating of a movie relates to Facebook likes. \n\nThe visualization responds to page resize, changing the width and height of the marks area to fill the available space, using the [General Update Pattern](https://github.com/d3/d3-selection#selection_merge) in D3.\n\nThis chart is remade. The original version is [here](https://bl.ocks.org/BruceHenry/5546412df245dcca170f90a523978f40).\n\n---\n\n_Data Source:_ The data is from [TMDB 5000 Movie Dataset | Kaggle](https://www.kaggle.com/tmdb/tmdb-movie-metadata/data).\n\nBuilt with [blockbuilder.org](http://blockbuilder.org)\n\n\nindex.html <!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")
.a
}
d3.csv('movie_metadata.csv', row, function (error, data) {
d3.select('svg').style('background-color', '#fffddb')
render();
window.addEventListener("resize", render);
});
</script>
</body>
</html>
IMDB-Rating vs Facebook-Likes
[Click here](https://bl.ocks.org/BruceHenry/7f9dd54755ad9790992315eee31d0807) 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
For the viz gallery entry, write a concise description that covers the essential aspects of the visualization and highlights what makes it noteworthy. You are writing for a general audience. Avoid technical jargon and aim for one or two clear paragraphs.
In your answer, write in complete sentences.
The description should be 100-150 words. Use 125 words.
Do not include the Title in the description. Do not include the subtitle or any section headings. Do not include markdown formatting like `#` or `*` or similar. Do not use links.
Do not include the title (e.g. "IMDB-Rating vs Facebook-Likes") in the description.
This is your only output; do not include any other text.This interactive scatter plot from D3 examines the relationship between a movie's IMDB rating and its Facebook likes. Each circle represents a film, positioned by its rating on the x-axis and its popularity (in thousands of likes) on the y-axis, with a yellow-to-blue color coding in the labels. The visualization is responsive, adjusting the chart's dimensions to fill the available viewport on resize through D3's General Update Pattern. Users can click any circle to open the movie’s IMDB page in a new tab. The chart’s axes and labels adapt to the resized dimensions, ensuring readability across devices. The design uses a soft cream background, green tick lines, and sans-serif text to keep the focus on the data.