Skip to content

Instantly share code, notes, and snippets.

Avatar

Nadieh Bremer nbremer

View GitHub Profile
@nbremer
nbremer / .block
Last active Jul 8, 2022
Radar Chart Redesign
View .block
height: 600
license: mit
@nbremer
nbremer / .block
Last active May 9, 2022
D3.js - Radar Chart or Spider Chart - Adjusted from radar-chart-d3
View .block
height: 650
license: mit
@nbremer
nbremer / .block
Last active Nov 8, 2021
Stretched Chord - The Final Result
View .block
height: 660
@nbremer
nbremer / .block
Last active Nov 8, 2021
Stretched Chord Diagram - From educations to occupations
View .block
height: 780
license: bsd-2-clause
@nbremer
nbremer / .block
Last active May 8, 2021
Simple click to change location scatterplot
View .block
license: mit
@nbremer
nbremer / .block
Last active Mar 28, 2021
Phyllotaxis layout in SVG
View .block
license: gpl-3.0
height: 960
@nbremer
nbremer / README.md
Last active Nov 12, 2020
Circle Packing at its most Basic - Canvas & D3.js
View README.md

This is the first 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 still uses a lot of D3 code, but eventually it is the canvas that draws it to the screen

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 1. See the next version that has less D3 but less overall code as well

If you want to see the final result, with everything up and running in canvas look [here](http://www.visualcinnamon.com/occupation

@nbremer
nbremer / .block
Last active Jun 16, 2020
Storytelling with Chord Diagram
View .block
height: 750
@nbremer
nbremer / .block
Last active Jun 9, 2020
Gooey effect - Data visualization showcase
View .block
height: 680
@nbremer
nbremer / .block
Last active May 18, 2020
Data based orientations in SVG Gradients - Final example - Avenger Movie Collaborations
View .block
height: 1000
license: mit