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:
Posted by huguesstefanski on August 15, 2017
https://hstefanski.wordpress.com/2017/08/15/creating-a-chart-with-d3-v4-and-typescript-or-es6/
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.
Posted by huguesstefanski on July 23, 2017
https://hstefanski.wordpress.com/2017/07/23/d3-v4-and-typescript-getting-set-up/
Keeping up with a project progress is hard and can easily become a pain. How do I know if I progress? What’s the remaining work? How should I sort my ideas to deliver? And how much time did I spend on developing that feature? Was it worth it?
Fortunately, a couple of free tools (yes, I said FREE) can help you get a better grasp on your project.
Posted by huguesstefanski on March 28, 2016
https://hstefanski.wordpress.com/2016/03/28/managing-your-development-project/
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. Read the full post »
Posted by huguesstefanski on January 23, 2016
https://hstefanski.wordpress.com/2016/01/23/making-a-d3-chart-responsive/
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.
Posted by huguesstefanski on December 13, 2015
https://hstefanski.wordpress.com/2015/12/13/keeping-up-to-date-and-training/
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.
Read the full post »
Posted by huguesstefanski on October 25, 2015
https://hstefanski.wordpress.com/2015/10/25/responding-to-d3-events-in-typescript/
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.
Posted by huguesstefanski on October 4, 2015
https://hstefanski.wordpress.com/2015/10/04/creating-a-chart-with-d3-and-typescript-part-3/
In the previous article, I explained how to configure the build process and convert an Angular 1 controller to TypeScript. This article will continue building from where we left, and explain how to convert a service and a directive.
Posted by huguesstefanski on August 19, 2015
https://hstefanski.wordpress.com/2015/08/19/converting-an-angular-app-to-typescript-part-2/
In this post, I will try to set the basics on how to convert an Angular 1 application to TypeScript. Converting applications to TypeScript/ES6 is a first step towards migrating applications to Angular 2.
I build all my front-end apps using TypeScript, as I think it has a high added-value, and makes my life way easier. I actually know TypeScript better than native JavaScript.
This post uses my personal opinions and patterns (if I may use that word). I hope you enjoy reading it; feel free to ask me any question you might have.
As I am focusing on converting an app and not building an app from scratch, I will use John Papa‘s HotTowel generator as the basis for this application. I will therefore keep the spirit and structure of the application, the focus being to move the app to TypeScript.
The interest of this generator is that it is well structured and already comprises a well-established build process.
Code for the completed tutorial can be found on GitHub.
If you are here, I guess you are familiar with Angular. I will assume that you know what TypeScript is, but not much more than that. I will also take it that you know what yeoman is and how it works, as well as npm. Finally, some experience with build processes and gulp is advised.
Posted by huguesstefanski on July 22, 2015
https://hstefanski.wordpress.com/2015/07/22/converting-an-angular-app-to-typescript/
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.
Posted by huguesstefanski on June 28, 2015
https://hstefanski.wordpress.com/2015/06/28/creating-a-chart-with-d3-and-typescript-part-2/
Wandering in the community 