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
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.
All the best,
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.
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.
3.Cubic Bezier Curve
In the following pen, I have created a custom cubic bezier function to draw a single cubic
Where the curve starts at vertex P0 and ends at the vertex P3 through the vertices P1 and P2.
The main takeaway of this pen was to understand how to structure the data in order to produce a hierarchal structure.
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.