IMDB-Rate vs Facebook-Likes

100%

IMDB-Rate vs Facebook-Likes

✓ Published0🌍 Public

Last edited Sep 24, 2017

Created on Sep 18, 2017

This scatter plot visualizes the relationship between a movie’s IMDB rating (x-axis) and its Facebook likes (y-axis), using data from Kaggle’s IMDB 5000 Movie Dataset. Each circle represents a movie; the x-axis shows the IMDB score, while the y-axis shows Facebook likes in thousands, with gridlines and labeled axes in green, yellow, and blue. Hovering over a circle reveals a tooltip with the movie title, IMDB score, and like count. Clicking a circle opens its IMDB page in a new tab. The chart is built with D3 v4, renders in SVG, and uses a semi-transparent blue circle mark with opacity to handle overplotting, letting denser areas appear darker.

AI-generated description

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

mit Licensed

Similar vizzes

Loading thumbnail…

IMDB-Rating vs Facebook-Likes

This scatter plot shows how IMDB ratings of movies relate to their Facebook likes. The chart is interactive—users can zoom in to inspect data points more closely. It is rendered with D3 v4 using SVG, with axes and labels for IMDB Rating (x-axis, ranging from 0 to 10) and Facebook Likes in thousands (y-axis, up to 350). The data originates from the TMDB 5000 Movie Dataset and each circle links to the corresponding IMDb page. The visualization is responsive, resizing with the window while maintaining a 16:9 aspect ratio. The color scheme uses yellow for IMDB ratings and blue for Facebook likes, matching the axis label colors. The chart is implemented in a single HTML file using D3 v4 and jQuery, with zoom capabilities enabled. The image appears to be an older version from the block's repository.

BBruceHenry

95% match

Loading thumbnail…

Basic Scatter Plot

This basic scatter plot visualizes the relationship between a movie's IMDB rating and its number of Facebook likes, using data from the Kaggle IMDB 5000 Movie Dataset. The chart uses a linear scale for the x-axis (IMDB rate) and a logarithmic scale for the y-axis (Facebook likes), with each movie represented by a semi-transparent blue circle. Built with d3.v4, the code employs `d3.scaleLinear()`, `d3.scaleLog()`, and `d3.axisBottom()`/`d3.axisLeft()` to build the axes, while `d3.csv()` loads the data and appends SVG circles with tooltips showing the movie title and like count.

CCurran Kelleher

93% match

Loading thumbnail…

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.

BBruceHenry

87% match

Loading thumbnail…

IMDB Top 250 Scatter Plot

This scatter plot visualizes the IMDb Top 250 dataset, showing each movie as a dot positioned by its release year on the x-axis and its rating on the y-axis. The dot radius encodes the number of votes a movie received, allowing viewers to compare the popularity and critical reception of these top-rated films. The visualization is built with d3.v6, using scaleLinear for all axes and the radius encoding, with data loaded via d3.csv. The SVG rendering includes axisBottom and axisLeft components, while circles are colored darksalmon with a fill-opacity of 0.3.

YYichen Li

72% match

Loading thumbnail…

Movie Stats Scatter Plot Final Iteration

This interactive visualization lets users explore IMDB movie data through a customizable scatter plot. Users select which genres or actors to display and independently choose the X and Y axes from yearly release, runtime, rating, votes, and revenue. The plot encodes genre with color and includes hover effects that reveal movie titles. Built with D3 v7, the visualization uses the `scaleLinear` and `extent` functions for scales, `axisLeft` and `axisBottom` for labeled axes, and SVG circles for data points. The project also features a separate actor network graph, though it remains incomplete. Movie data is loaded from a local CSV file.

KKyle?

71% match

Loading thumbnail…

Movie Stats Scatter Plot Iteration 5

This interactive scatter plot visualizes movie statistics from a CSV dataset, allowing users to compare variables such as IMDB rating, revenue, runtime, and year. Users can filter points by genre through colored checkboxes, search for specific actors, and switch the x- and y-axis among six quantitative fields. Clicking a circle displays the movie’s title. The visualization uses D3 v7 APIs like `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and circles, with SVG elements updated dynamically via `selectAll` and `join`.

KKyle?

71% match

Loading thumbnail…

Movie Stats Scatter Plot Iteration 7

This interactive visualization lets users explore IMDB data for roughly 1,000 movies through a customizable scatter plot. Users select which genres or a specific actor to display, and choose which metrics (year, runtime, rating, metascore, votes, or revenue) appear on each axis. Hovering over a dot reveals the movie title. Built with D3 v7, it uses `d3.scaleLinear` and `d3.axisLeft`/`axisBottom` to render an SVG chart, with data loaded from a CSV file.

KKyle?

69% match

Loading thumbnail…

Movie Stats Scatter Plot

This visualization plots movie ratings against box office revenue using a D3 v7 scatter plot, with data from a CSV file of film statistics. The plot displays each movie as a circle, and the interface includes checkboxes for filtering by genre, which dynamically update the visible data points using a bitstring representation. The code uses `d3.csvParse`, `d3.scaleLinear`, and `d3.extent` to handle data parsing and scaling, while the interactive filtering logic is implemented in the `dotAppears` function within `scatterPlot.js`.

KKyle?

69% match