Creating a chart with D3 and TypeScript – part 1

Introduction

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:

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

Read the full post »

Advertisements

Setting up your environment A to Z

Introduction

In the previous series of articles, I explained about the different pieces required to get started with web development. This article will walk you through all the steps to go  from a blank machine to a full-fledged web development box. It will cover the installation of the different tools you will need, but will not get into the details of  what those tools do (see here) or how they work.

Read the full post »

Getting set up for web development – part 5: CSS pre-processors

In the previous article, I talked about JavaSript. This article will talk about CSS pre-processors. Not really being the CSS guy, This article will be shorter that the previous ones.

Pre-processors?

CSS pre-processors are kind of the same thing as JavaScript supersets, in the sense that they provide a layer above CSS to help fill some holes in native CSS. While allowing you to do more than native CSS, your output file will still be a CSS file understood by the browser.

Read the full post »

Getting set up for web development – part 4: JavaScript supersets

In the previous article, I talked about the different libraries I like to use in my projects. This article will talk about JavaScript supersets, with more emphasis on TypeScript.

Supersets?

By JavaScript supersets I mean a language that compiles to JavaScript but is not just JavaScript. Yes, they do exist. There is actually a lot of them, as you can see there.

Read the full post »

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.

Read the full post »

Getting set up for web development – part 2: the tools

In the previous article, I spoke about the different editors that can be used to develop a web site/application.

This article will present different tools that are pretty useful, some almost required, when you start digging into web development.

Read the full post »

Getting set up for web development – part 1: choosing an editor

Foreword

Getting started with web development can seem overwhelming at first, as there are so many choices, for everything. This article is the first of a series that I plan to write on getting started with web development on Windows. The topics covered will be:

  1. Choosing an editor
  2. Tooling: node, bower, yeoman, etc.
  3. Useful libraries
  4. JavaScript supersets/TypeScript
  5. CSS preprocessors: LESS/SASS

Through these articles, I will try to share my experience with web development so far, show different options and explain the choices I made.

The big jump

So you decided to start web development? Great! You have an idea, and would like to see it become a reality. You know some basic html/css/javascript, but would like to start building a web site in a more structured manner.

Through this article I will try to give some paths to help you set up a convenient environment to start developing web sites.

The focus of this article is not to give training on the technologies. There are a lot of excellent resources on the web; if you wish to get a structured training, I strongly suggest that you visit Pluralsight.

Read the full post »