GJHazelaar

@GJHazelaar·5 public vizzes

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.

Feb 8, 2018

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.

Feb 8, 2018

Loading thumbnail…

Goed voorbeeld

A clustered dot plot arranges 50 circles around a central point, with each circle's distance from the center determined by how its randomly generated count differs from a selected circle's count. Clicking any circle increments its count and causes it to move to the center while all other circles reposition based on the new distance metric. The visualization uses d3.scaleSqrt for sizing, d3.scaleLinear for both radial distance and color mapping from steelblue to red, and transitions with an 800-millisecond duration to animate the repositioning. An SVG container with concentric gray guide rings provides a static backdrop for the interactive data.

Feb 8, 2018

Loading thumbnail…

fresh block

This example displays a circular arrangement of ten circles, each with a radius of 50 pixels, positioned around a central point using a computed angle function. The visualization is built with D3.v4, rendering SVG elements onto a 960x500 canvas, with circles placed via an angular distribution formula. The code includes a mouseover event that is intended to change the circle's style, though the specific styling action is not defined. The data comes from a simple generated range of ten values.

Feb 8, 2018

Loading thumbnail…

Intro D3 Workshop

Fifty red circles radiate from the center of an SVG canvas, each sized by a random count value and positioned by distance from a clicked circle. Clicking a circle increments its count and re-renders the layout, animating all circles to new positions via `transition()` over 800 milliseconds. The example uses D3 v4 scales (`d3.scaleSqrt`, `d3.scaleLinear`) to map counts to circle radius and color, with a color gradient from steelblue to red based on proximity to the clicked circle. A gray ring backdrop and trigonometric positioning complete the interactive workshop demo.

Feb 8, 2018