I've been wanting to learn data visualisation since I listened to React podcast episode 15 'Data Visualization with Shirley Wu' which got me excited about trying out D3.
Recently, I got the chance to dip my toes into this framework as I was fortunate enough to be given a subscription to Frontend Masters with which I dived straight onto the learning path for Data Visualisation.
Ultimately, I tested my new skills visualising data from the dialogue of the Lord of the Rings films. Check it out here.
Here are a few things I learnt whilst dipping my toes into data visualisation for the first time:
Starting with a course is a great boost
When I first checked out the documentation for D3, I was a bit overwhelmed with the amount I needed to pick up straight away. Going back and kicking off my learning with a D3 course gave me a great base understanding so I could better pick up what the documentation was describing.
If you can, I would very much recommend Shirley Wu's courses on Frontend Masters as a great place to start.
SVG is just as important as D3
It quickly became apparent that understanding SVG can improve your game, helping to display data in interesting ways. This is why the next course I'm looking to take on is an SVG.
Leave D3 to update DOM elements
As a predominantly React developer, I decided to combine React and D3 for this project. After trying different ways to combine the two I found that leaving the visualisation updates to D3 led to cleaner code and better performance.
D3 Force can lead to infinite loops
I got caught out a few times when using D3's force as I would get caught in infinite loops while processing the visuals for my data. As I was coding on CodeSandbox this caused my browser session to crash. To reopen I had to use the URL parameter runonclick=1 to get past the crashing server to fix the problem.
Clean your data before you use it
At first, I was trying to clean the data to visualise in my component code which led down confusing code structures. This was until I realised the data wasn't dynamic so I could preprocess all of my data and store it in simple arrays already sorted ready to render. Perfect.
Mess around
I ended up learning the most and finalising ideas by messing around and trying different visualisations. CodeSandbox is great for this giving a quick platform for trying ideas out.
Top comments (0)