HTML5 Data Visualizations "“ Part 4 "“ Creating a component with RaphaÃ«l and TypeScript
In the last article we created a simple little hard coded graph with RaphaÃ«l. I also insulted the Germans. That wasn’tentirelyfair because RaphaÃ«l is really an Italian name and we never thrashed them in a war, probably because they were too busy being defeated by the French. The French. Oh, and we did thrash the Italians too. That’s why you come to this blog: friendly racism, code and an inability to forget wars which happened 40 years before the author was born. So we’re’ still going to call the library Ralph.
I’m going to dive right in and rewrite this puppy as a component in TypeScript
Another great feature in the component is the use of ES5 style loops on line 29. This is basically an iterator syntax.
The final thing to which I wanted to draw your attention was the lambda style anonymous functions. You can see this inside the same loop on line 29. I’ve always found this syntax cleaner than a full function. The => is sort of the official syntax now for lambda functions with C# and Java both adopting it.
To make use of our new graph component is easy. We just call
I find the TypeScript to be way more readable.
In the next part we’re going to look at an alternative library which might be better suited for creating data visualizations.