Skip to main content
SimilarExport ZIP
100%

Canvas tutorial - Turn SVG scatterplot into Canvas - Normal level

✓ Published0🌍 Public
GGJHazelaar
Last edited Feb 8, 2018
Created on Feb 8, 2018

This interactive scatterplot uses a Canvas element to visualize movie data from the IMDB 5000 dataset, plotting each film’s rating against its budget on a logarithmic scale. Circle size and opacity encode the profit ratio (revenue divided by budget), while color represents release year via a sequential Viridis scale. The code uses D3 v4 for data loading, scales, and Canvas creation, then draws circles directly with the Canvas 2D API’s `ctx.arc` and `ctx.fill` methods.

AI-generated description

This scatterplot is made with d3.js and SVG - For the canvas tutorial it is now your job to turn this scatterplot into one uses canvas for the visual part (the drawing of the circles). You can still use d3's helper functions for things such as scales, d3.select, etc.

See the other two levels here: <a href='https://bl.ocks.org/nbremer/aae35b358c7450b70cc12b27e48c6196'>Medium level</a> and <a href='https://bl.ocks.org/nbremer/7eda7f35215d6a5eb2a485f645844676'>Extreme level</a>

If you're completely stuck (and please, for your own benefit, only then) you can look at the solution here

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/nbremer/'>nbremer</a>'s block: <a href='http://bl.ocks.org/nbremer/0ed7cfdca6487b8cda79af3aaedf2ec5'>Canvas tutorial - Turn SVG scatterplot into Canvas - Normal level</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Canvas tutorial - Turn SVG scatterplot into Canvas - Normal level

This scatterplot visualizes IMDb movie data, plotting each film's budget against its rating, with point size and opacity reflecting the profit ratio and color encoding the release year. The example is a tutorial that challenges the viewer to convert an existing SVG-based D3.js visualization into one rendered on an HTML5 canvas. The provided code uses D3 v4 helper functions like `d3.scaleLinear`, `d3.scaleLog`, `d3.scaleSqrt`, and `d3.scaleSequential` for data scaling, while the actual circle drawing is currently done with SVG elements, which the tutorial instructs replacing with canvas drawing commands.

GGJHazelaar
95% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes movie data, comparing three variables—budget, gross revenue, and IMDB score—through user-selectable dropdown menus. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and render the data as animated SVG circles. Each axis is controlled via a dropdown menu, and points transition smoothly into position over one second, with axis labels and tick marks generated dynamically. The data is sourced from a local CSV file.

Ssourcebox-bug
79% match
Loading thumbnail…

scatter plot v1

This scatter plot v1 example visualizes movie data from a CSV file, plotting each film’s budget against its gross earnings. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Bars are colored steelblue via CSS. The code loads data with `d3.csv`, converts population values, and renders axes using `axisLeft` and `axisBottom`. The dataset originates from a movie ratings source.

Yyqinolive
76% match
Loading thumbnail…

Canvas Scatterplot

Two thousand normally distributed points render as a steelblue canvas scatterplot. The code generates data with d3.randomNormal, binds it to custom elements with a d3 data join, and draws the points using Canvas 2D context arcs. A d3.timer repeatedly calls the draw function for 300 milliseconds, clearing and repainting the canvas to animate the visualization. The example uses d3.v4, with linear scales mapping the domain from 2 to 8 onto a 1400 by 750 pixel canvas.

JJverma
76% match
Loading thumbnail…

Scatter Plot

This interactive scatter plot explores relationships among movie budget, gross revenue, and IMDb scores using data loaded from a CSV file. Dropdown menus let users select which three measures to compare on the x-axis, y-axis, and color scale. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render animated SVG circles that transition from the chart’s center to their final positions. A modular `dropdownMenu` component and reusable `scatterPlot` function structure the code for maintainability.

Ddrmurugesh
76% match
Loading thumbnail…

Scatterplot

This scatterplot visualizes the top 50 Hollywood films released from 2007 to 2011, plotting each film’s budget (in $m) on the x-axis against audience ratings (in %) on the y-axis. Built with D3 v3, the SVG-based chart animates the circles in a cascading sequence using staggered transitions, and includes hover interactions that display a tooltip with the film’s title, budget, and audience rating. Styling features a warm cream background, rose-colored circles that darken on hover, dashed axes, and percentage-formatted y-axis tick labels.

CClevejones
75% 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?
75% 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?
75% match