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.

(more…)

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.

(more…)

Creating a chart with D3 and TypeScript – part 1

Introduction

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:

chart

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

(more…)