Creating a chart with D3 (v4) and TypeScript (or ES6)


A while ago, I posted a series of articles about creating a chart using D3 and TypeScript. The goal of this article will be to create the same kind of chart, using the latest versions of the two products.

At the end of this article, we should be getting something similar to this:



D3 v4 and TypeScript: getting set up


A while ago, I wrote a couple of articles about creating charts with D3 and TypeScript. However, as time is flying by, those articles are now out of date, as both TypeScript and D3 got major updates since then.

This first article will just be about setting everything up to be able to use D3 v4 and TypeScript together, and creating a project basis that you can reuse, the same kind as what you can find here.


Making a D3 chart responsive


Building charts and data visualization is awesome. D3 provides amazing capabilities in that domain.

I previously explained how to create the various building blocks of a chart, but one thing is lacking: how to make the chart behave properly at all screen resolutions, aka responsive? Starting from where I left off in the previous post, I will explain how to make a chart responsive. Code can be found on GitHub. (more…)

Keeping up-to-date and training

In today’s world, keeping up with all the things going on in the various fields of development is a big challenge. So how not to get lost? What resources are available to learn new technologies? In this post I will share my favourite learning channels, hoping some of you will find it interesting, and share their favourite resources as well.


Responding to D3 events in TypeScript

This article refers to TypeScript 1.x and is now outdated.


D3 offers a great way of interacting with created DOM elements by responding to various events. Binding to events and intercepting data is easy enough. In native JavaScript, the element firing the event can directly be accessed via the this keyword. However, TypeScript has its own way of dealing with this that makes the interaction trickier. In this article, I will try guiding you to a way of responding to events with TypeScript.

Creating a chart with D3 and TypeScript – part 3

In the previous article, we managed to get data displayed on a time-based chart. Though interesting, this chart is a bit monolithic and quite hard to reuse. The chart class is far from respecting the single responsibility principle, as it fetches the data, renders these, manipulates axes, etc. This article will focus on refactoring the code and somehow improve the lookout of the chart.


Creating a chart with D3 and TypeScript – part 2

In the previous article, we ended up with a nice axis drawn using d3, as a starting point to a fully working chart. We will continue to build on what we did previously.


Creating a chart with D3 and TypeScript – part 1


This article series refers to D3 version 3 and TypeScript 1. It is therefore recommended to refer to the newer version to get updated information.

This series of articles is basically about creating a JavaScript chart from scratch, using D3 and TypeScript. I will take it that you don’t know much about D3 and TypeScript, but know what those two are and do. I will also assume that you already used JavaScript previously, and that your box is ready for web development (see what I mean in my previous articles). As a teaser, here is the result we will try to achieve:


Through this series of articles, I will try to get you:

  • understanding how D3 works and how easy it can be to create simple things
  • seeing an added value in using TypeScript
  • creating a basic build process that will help your development
  • structuring a JavaScript framework

You can find the completed code for this article here.

Updated on 2016-04-12 to use the new D3 types (generics).


Getting set up for web development – part 3: useful libraries

In the previous article, I spoke about the different tools needed or recommended to develop a web site/application.

This article will present different libraries that can help you being more efficient in developing your application.