Data Visualisation

Understanding

What I cannot create, I do not understand.

Richard Feynman

If you can’t explain it simply, you don’t understand it well enough.

Einstein

Introduction

Dear reader,

Thank you for your time and your interest. The focus of this page will be on data visualisations and graphic design explorations where I will share my understanding and learnings. Simultaneously, I am maintaining an Instagram blog called Data Today  I share my own work and work from other data designers and software developers on this blog.

If you are interested in sharing your work on the Data Today feed, I would love to hear from you. You can contact me on this email address: offdatatoday [at] gmail.com.

All the best,

Sietze

1.Donut Chart

The goal of this pen, was to get a better understanding on how to create different interactions and transitions for a donut chart. My main takeaway of the process was; in order to create good transitions, you need to plan the animations i.e., define the different states that the animation can be in before programming it. For instance, sketching the states first on paper already helped me in this process. This helped me to understand what state A is and what state B is. For me the transition function, just like an interpolation function(which it is also using), is in the end just a mapping from one state to another, F : A –> B.

See the Pen Interactive Donut Chart by supernova (@supernovaa) on CodePen.

2.Octopus Chart

This chart is a bit of an odd one. It is a combination of a slope chart with Bezier curves and an area graph. Inspired by the Instagram post of Lucas I have decided to translate it to code in order to understand the d3 path generators a bit better. First I struggled in making the lines like Beziers but I found out that you can do that easily with the linkHorizontal function.

See the Pen OctopusChart by supernova (@supernovaa) on CodePen.

3.Cubic Bezier Curve

In the following pen, I have created a custom cubic bezier function to draw a single cubic bezier curve. The points P1 and P2 are the so called directional vertices. These vertices can move by clicking and replacing them. No drag and drop functionality as this was not the aim of the project. Referencing Wikipedia the formula of the curve is as follows:

{\displaystyle \mathbf {B} (t)=(1-t)\mathbf {B} _{\mathbf {P} _{0},\mathbf {P} _{1},\mathbf {P} _{2}}(t)+t\mathbf {B} _{\mathbf {P} _{1},\mathbf {P} _{2},\mathbf {P} _{3}}(t){\mbox{ , }}0\leq t\leq 1.}

Where the curve starts at vertex P0 and ends at the vertex P3 through the vertices P1 and P2.

See the Pen Cubic Bezier Curve by supernova (@supernovaa) on CodePen.

4.Sunburst Chart

The main takeaway of this pen was to understand how to structure the data in order to produce a hierarchal structure.

See the Pen dwapeL by supernova (@supernovaa) on CodePen.

5.Trig and D3 – Unit Circle / Polar Graph /Radar Chart

Today I was a bit more focussed on math and I wanted to create a polar graph which eventually resulted in a unit circle and then in a radar chart accidentally.

I want to work towards a circular bar chart but I first have to understand how to work with the polar system in D3 in order to create it. These are the first steps. My learnings included a refresher of my trigonometry skills(always good) and calculating a fraction from a decimal using Euler’s algorithm. Pretty basic and straightforward in the end.

See the Pen Trig and D3 – Unit Circle / Polar Graph by supernova (@supernovaa) on CodePen.

6. Polar Chart

See the Pen Radial Barchart D3 V4 by supernova (@supernovaa) on CodePen.