Tell us what works and what could be better. We read every submission.
@SocProf·5 public vizzes
A scatterplot compares IMDB scores to Rotten Tomatoes scores for 75 films, with each circle representing a movie and hovering revealing its title and both ratings. The visualization animates circles growing from tiny points into their final positions, sorted by IMDB score, using D3 v3’s `d3.csv`, `d3.scale.linear`, `d3.svg.axis`, and `transition().delay().duration()`. SVG circles and axes render in a 700×600 view, with data sourced from a provided CSV file.
A horizontal bar chart ranks selected films by their IMDB scores, sorted from highest to lowest, with each bar labeled by film title. The visualization uses D3.js v3 to bind data from a CSV file, scaling bar widths linearly and positioning rows with an ordinal scale. SVG rectangles render the bars, while D3’s axis components generate the x-axis and hidden y-axis gridlines. Hovering a bar reveals a tooltip with the film’s exact score.
This bar chart displays the IMDB scores for a selection of films, sorted in descending order from highest to lowest rating. The data, loaded from a CSV file, is used to draw a horizontal bar for each film, with the bar's length proportional to its score. Each bar includes a built-in SVG `<title>` element that displays a tooltip showing the film's name and its IMDB rating when hovered over. The visualization is created using D3.js version 3, leveraging the `d3.csv` function for data ingestion and the standard SVG `rect` element for rendering.
This example demonstrates how to load CSV data using D3.js. The page appears nearly blank, instructing viewers to check the browser console, where the parsed data from `film_data2.csv` is logged as an array of JSON objects. The code uses the `d3.csv` function to fetch and transform the remote file. The visualization itself is minimal, focusing on the data-loading mechanism rather than graphical output.
This scatterplot explores the relationship between a film's production budget and its worldwide gross revenue, using a dataset of top-earning movies. The visualization likely uses a logarithmic scale to accommodate the wide range of values, with each point representing a film. Built with the Plotly JavaScript library, the chart plots budget on the x-axis and gross on the y-axis. Hover tooltips reveal the film's title and exact figures, allowing for direct comparison of box office performance against production costs.