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 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.

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 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.

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
77% 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
75% match
Loading thumbnail…

D3 Starter Updating scatter plot

This example demonstrates how to build an updating scatter plot with D3 v5, visualizing the budget and revenue of the top 100 films by budget from 2000–2009. The plot uses `d3.csv` to load movie data, `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks, with circles representing each film. Axes include formatted tick labels and dashed gridlines. Hovering over a point changes its fill to red, though no tooltip is implemented. The visualization is rendered as SVG within a container, styled via an external CSS file.

Mmaxthamt
75% 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
75% match
Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes movie budgets against domestic gross earnings, with each circle representing a film. The chart uses D3 v6 to load CSV data and render SVG circles, with linear scales mapping budget to the x-axis and domestic gross to the y-axis. The code includes axis labels in red, a title, and interactive margins. D3’s `d3.csv` and `d3.autoType` handle data parsing, while `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` construct the visualization.

Mmadipadiga.raviteja@gmail.com
74% match
Loading thumbnail…

D3 Starter Updating scatter plot brush v2

This example demonstrates an interactive scatter plot of movie budget versus revenue, using data from the Movies dataset filtered to years 2000–2009 and the top 100 films by budget. Users can brush over the plot to select points, which highlights matching circles in coral and updates a side panel listing selected movie titles, release years, budgets, and revenues. Hovering over a list item highlights its corresponding circle in red. The visualization uses D3 v5 with scaleLinear, brush, and transition APIs, rendering SVG with enter/update/exit joins for the selection list.

Mmaxthamt
73% 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
73% match