Posted on Aug 8, 2020 in data science d3 tutorial
Handling Raster Map Backgrounds in D3.js
One of the most popular blog post on the blog is a tutorial on making a map in d3.js. I thought it’s time to revisit the post and propose some visual improvements to it, starting with realistic backgrounds. My all time favorite interactive article from the NYT is their 2014’s How the Air Campaign Against ISIS Grew. The subtle use of terrain formation in the map’s background not only makes the graphic more interesting visually, but places the depicted countries in a real geographical context. That’s a more fitting visual vehicle for geo-political events than plain, almost cartoonish, vector-based maps. I thought my original map would benefit from this treatment too: in the following sections I will take you through generating a raster terrain background for my base vector map.
Posted on Jul 9, 2020 in opinion
Well, Scale This: Increasing Diversity in the Tech Industry
There is more that we can be doing to increase diversity in tech teams in the US and in Europe. I took the last couple of weeks to think about pragmatic ways in which we can build healthy and diverse organizations. Ideas that are based on empathy toward another human being and not on fulfilling political quotas. Initiatives that can bring people together and have a long-lasting effect. I am convinced that all of them are within the reach of our corporate reality but require focus and attention to achieve; and perhaps more importantly, a core belief that this is the right thing to do.
The key areas of improvement include sourcing candidates, hiring practices, retaining and promoting minority and female staff.
Posted on Nov 1, 2019 in d3 data science tutorial
Making an Interactive Line Chart in D3.js v.5
Static graphs are a big improvement over no graphs but we can all agree that static information is not particularly engaging. On the web there is no presenter to talk over a picture. It is the role of a visualisation to grab the reader’s attention and get its point across. Making a graph interactive is a good step towards increasing its understandability. This post in an addendum to the previous tutorial on how to make a line chart. It will explore two techniques of making the previous project interactive.
Posted on Oct 28, 2019 in data science d3 tutorial
Making a Line Chart in D3.js v.5
The time has come to step up our game and create a line chart from scratch. And not just any line chart: a multi-series graph that can accommodate any number of lines. Besides handling multiple lines, we will work with time and linear scales, axes, and labels – or rather, have them work for us. There is plenty to do, so I suggest you fire off your D3 server and let’s get cracking.
Posted on Oct 20, 2019 in data science d3 tutorial
Advanced Bar Chart in D3.js v.5
Or should I say more advanced than the construction from the previous post. This part of the tutorial will cover scales and axes. Let the fun begin!
Posted on Oct 12, 2019 in data science d3 tutorial
Simple Bar Chart in D3.js v.5
This is actually happening! I’ve put myself together (the key to more time is less Netflix, people) and wrote up a couple of examples in D3.js version 5 (yes, version 5!) that should get people started in the transition over to the tricky number 5. The guide assumes that you have some basics in D3 (you have an idea about SVG, DOM, HTML, and CSS), or better yet that you come from an earlier version. In this chapter we’ll create a simple bar chart. The objectives of the day are: data upload from a csv, data format setup, and drawing the data. As basic as this! Next time we will tackle scales and grids.
Make sure to check out my library for more fun examples!
Posted on Jul 30, 2019 in data science d3
New blocks on bl.ocks
You can now take a look at my D3 projects on bl.ocks.org! I will soon add some more visualisations in version 5 of the D3 library.
Posted on Jul 8, 2019 in data science d3 geo tutorial
Merging Historical Maps in D3.js v.5
Spoiling you as usual, I have another exciting D3 example for today: merging historical maps! I’ve been meaning to cover this topic ever since I developed a similar project for my Master’s thesis 3 years ago. Merging maps is challenge-worthy for every D3 enthusiast as it requires a number of things to be aligned: the data format should be compatible with D3.js, the maps should be drawn in the same projection, and cover the same time period as country or regional boundaries are far from static. I will demonstrate the idea by mashing up two maps: a digitalised map of II Polish Republic from 1934 with European boundaries from 1939.
Posted on Apr 19, 2019 in data science d3 tutorial
Creating fun shapes in D3.js
I’m happy to announce that more SVG fun is coming! I’ve been blown away by the stats on my previous D3-related posts and it really motivated me to keep going with this series. I’ve fell in love with D3.js for the way it transforms storytelling. I want to get better with advanced D3 graphics so I figured I will start by getting the basics right. So today you will see me doodling around with some basic SVG elements. The goal is to create a canvas and add onto it a rectangle, a line, and a radial shape.
Posted on Apr 14, 2019 in data science d3 tutorial
Drawing radial shapes in D3.js
This post demystifies one of the most feared vector functions available in D3.js: the radial line, or d3.radialLine(). Radial lines are constructed with only two attributes: an angle and a radius. The product of the function is a line, but unlike the basic line function, there are no x and y co-ordinates. I fundamentally misunderstood the radial line logic the first time I used it – in fact I had to bring in my boyfriend one late Thursday evening to help me get it right. This guide should help you avoid my mistakes.