nbremer

A heart created with D3 and a nice formula found on Wolfram to celebrate Valentine's Day!

• The blog can be found here
• The second example of the Spirograph heart the gets animated can be found here

nbremer

This is the second step of my first attempt to learn canvas. I want to improve a piece a made a few weeks ago about the division of occupations. The d3.js version has so many DOM elements due to all the small bar charts that it is very slow. Therefore, I hope that a canvas version might improve things.

In this block I create a static circle pack layout that only uses D3 for the initialization, scales and such. But the visual is drawn with pure canvas, based on the data supplied by the d3 pack layout

I wrote a more extensive tutorial around what I learned while doing this project in my blog Learnings from a D3.js addict on starting with Canvas in which this can be seen as step 2. See the previous step in which d3.js still played a much bigger role here and the [next step that has become a zoomable circle pack (but with

nbremer

This example is being used in my blog on Adding a subtle touch of glow to your d3.js visualizations

Simple examples of adding an SVG filter to create a glow around shapes. Click anywhere around the shapes to turn the filter on and off. Note that the filter doesn't work on line elements

Another data visualization where I use the glow filter is my redesigned radar chart

nbremer

height: 800

nbremer

height: 800

nbremer

height: 660

nbremer

height: 660

nbremer

height: 660

nbremer

height: 670

nbremer

height: 670