ES6, TypeScript, and External D3.js Libraries

In this final chapter, we're going to look into a couple of usages of D3 not directly related to the main D3 provided APIs. We're going to discuss the following subjects:

• D3 and ES6: ES6, also called ECMAScript 6 or ECMAScript 2015, is the latest version of the JavaScript language used in browsers and tools such as Node.js. ES6 has a number of features that can make working with D3 easier, but also a number of items you need to take into account, when working with D3 and ES6.
• D3 and TypeScript: Besides ES6, a very popular language for web development is TypeScript. The TypeScript language adds types to JavaScript, which makes development easier and prevents a number of common runtime errors. For instance, the popular Angular 2 framework uses TypeScript as its main programming language. Working with D3 and TypeScript provides a lot of features, but also a number...

Using D3 with ES6 and TypeScript

In this section, we're going to explore D3 usage from ES6 and TypeScript. We'll start with how to use D3 from ES6.

D3 and ES6

When developing ES6, you have to take into account the browsers you're targeting. Most modern browsers have great support for the ES6 standard:

But pretty much the one subject that is barely supported is the module support. So for now we have to translate our ES6 code to ES5 so it can be loaded directly into any browser (this is often called transpiling).

We won't go through the complete ES6 specification, but look at a couple of the features which are especially interesting in combination with D3. For a complete overview of the features of ES6 you can look here: http://es6-features.org...

External charting libraries

There are many extensions and additional charting libraries built on top of D3. In this section we'll discuss a couple of the best-known and popular ones. If you want a more extensive overview of what is available for D3 you can look here: https://github.com/wbkd/awesome-d3. Note though that you should always check whether the library is made for D3 version 3 or D3 version 4, the latter of which is the version used in this book.

In this section, we'll discuss the following four of these:

• Dimple.js: Dimple.js is a charting library that aims to make the basic usage of D3 easier. It aims to make D3 available to people not highly proficient with D3, and provides a simple-to-use API for creating axis-based visualization. Dimple.js is based on D3 v4.
• MetricsGraphics.js: This library provides additional tools and charts for creating time-series-based charts, such as line charts, histograms...

Summary

In this last chapter, we've looked at a number of different subjects. We started by looking at how you can integrate D3 into languages other than JavaScript. We showed how to use it together with ES6, and how you can use the features of ES6, to make the D3 code more concise. After that, we looked at integrating D3 with TypeScript. TypeScript offers all the features of ES6, and additionally allows you to work with a typed version of D3. Using TypeScript will allow us to make better use of IDEs for code completion, and can catch many errors during compile (transpile) time instead of when you open an example in your browser. We've also looked at a couple of libraries built on top of D3 that provide us with a number of different charts and visualizations out of the box. With Dimple.js and MetricsGraphics.js, we can create charts that work with the latest version of D3, and can thus be easily combined...