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).