D3 Tips and Tricks v6: Interactive Data Visualization Online Course

Wednesday, 22 September 2021

What do we mean when we describe d3.js as an API?

Overview

An application programming interface (API) is a connection between computers or applications that allows specified interactions to expose services to be provided.

D3.js (where 'D3' is short for 'Data Driven Documents') is a JavaScript library which is designed to produce data visualisations. It does this by binding data to the Domain Object Model (DOM) which can be presented in the browser.

D3 provides the specification for a data driven approach to DOM manipulation and as such the d3.js library provides the API for the interaction between the data and the DOM.

API structure

The D3.js API contains several hundred functions, and they can be grouped into following logical units:

  • Arrays: Array manipulation, ordering, searching, summarizing, etc.
  • Axes: Human-readable reference marks for scales.
  • Brushes: Select a one- or two-dimensional region using the mouse or touch.
  • Chords: Visualize relationships or network flow with a circular layout
  • Colors: Color manipulation and color space conversion.
  • Color Schemes: Color ramps and palettes for quantitative, ordinal and categorical scales.
  • Contours: Compute contour polygons using marching squares.
  • Voronoi Diagrams: Compute the Voronoi diagram of a set of two-dimensional points.
  • Dispatches: Separate concerns using named callbacks.
  • Dragging: Drag and drop SVG, HTML or Canvas using mouse or touch input.
  • Delimiter-Separated Values: Parse and format delimiter-separated values, most commonly CSV and TSV.
  • Easings: Easing functions for smooth animation.
  • Fetches: Convenience methods on top of the Fetch API.
  • Forces: Force-directed graph layout using velocity Verlet integration.
  • Number Formats: Format numbers for human consumption.
  • Geographies: Geographic projections, shapes and math.
  • Hierarchies: Layout algorithms for visualizing hierarchical data.
  • Interpolators: Interpolate numbers, colors, strings, arrays, objects, whatever!
  • Paths: Serialize Canvas path commands to SVG.
  • Polygons: Geometric operations for two-dimensional polygons.
  • Quadtrees: Two-dimensional recursive spatial subdivision.
  • Random Numbers: Generate random numbers from various distributions.
  • Scales: Encodings that map abstract data to visual representation.
  • Selections: Transform the DOM by selecting elements and joining to data.
  • Shapes: Graphical primitives for visualization.
  • Time Formats: Parse and format times, inspired by strptime and strftime.
  • Time Intervals: A calculator for humanity’s peculiar conventions of time.
  • Timers: An efficient queue for managing thousands of concurrent animations.
  • Transitions: Animated transitions for selections.
  • Zooming: Pan and zoom SVG, HTML or Canvas using mouse or touch input.

Each of these categories provides access to standard specified interactions that allow data bound to the DOM elements to be manipulated and presented to the user.

Example

For example, the manipulation of data in an array is a common function to allow analyzing and visualizing data.

To access the d3-array function in an html document we can either load the d3.js library in full or just the specific module. If we were doing this from a traditional CDN service that might look something like the following when loading the full library;

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

... or like the following when loading just the d3-array module ...

<script src="https://cdn.jsdelivr.net/npm/d3-array@3"></script>

To test the function to find the mean value of an array of numbers, we can use the d3.mean function like so;

<script>

var a = [10, 53, 8, 99, 1, 6];
new_size = d3.mean(a);
console.log(new_size);

</script>

The output to the console will be the value 29.5 which is the mean value of the numbers 10, 53, 8, 99, 1 and 6.

To extend the example slightly the following adds two paragraph lines to an html page, computes the mean value of an array and then selects the first of our paragraphs and changes the size of the text to the mean value;

<body>

<!-- load the d3.js library -->        
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>

<p>This is the first line</p>
<p>This is the second line</p>

<script>

var a = [10, 53, 8, 99, 1, 6];
new_size = d3.mean(a);
console.log(new_size);

d3.select("p").style("font-size", new_size + "px");

</script>

</body>

And what we see should look like the following in the browser....

This is the first line

This is the second line

Wednesday, 1 September 2021

Raspberry Pi GPIO Pins Overview - The Movie!

 I made a thing!

It's that common lockdown story. There I was with some time on my hands and thinking of something new to learn. What about that new fangled thing that all the cool kids are talking about called Youtube? What'ts that all about?

I googled it, and apparantly it might catch on. So I thought how do I learn how to Youtube?

Like everything, try it and see....

So behold! my first ever attempt at doing some content for consumption via video.

An overview of Raspberry Pi GPIO Pins. 


So be gentle with me since this is my first time. It's very much a way to learn a new skill and perhaps someone will find it useful.

Maybe I might get excited and do more!

If so, you can expect them to appear here on my 'Channel' (Whatever that is).

Saturday, 12 June 2021

D3 Tips and Tricks v6: Online Training Now Available from Educative

D3.js is an extraordinary piece of software, but more importantly it has been a gateway to data visualisation that has enabled users to be able to turn information into storytelling.

The journey for d3 began over 10 years ago and in that time the central tenants of using pre-built functions to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document have been well established.

However, I can testify as someone that does not have a formal coding background that the barrier to entry can be daunting for some. That's why I started down the journey of writing down the things that I was learning as I started to understand d3 and why ultimately that ended up becoming the book D3 Tips and Tricks (of which there have now been 4 editions!).

That first edition was not just a journey in learning how to wrangle d3, it was also a learning experience in how to gather information into a book form and to make it available to others. My default start point was to make the information available for free to whomever wanted to read it and as it turns out, this wasn't so easy. However, cometh the hour, cometh the platform. 

Leanpub provided an excellent ecosystem for supporting the development, publishing and front-end for making the book available to others and in the process I found that I enjoyed the act of writing. I won't claim to have a particularly 'cultured' delivery style. I am frequently irreverent and prefer describing what I am learning in a fashion that makes sense to someone who might be somewhat naive about the background technical niceties.  

I'll be honest and say that I was definitely encouraged by the feedback and uptake of the book. People kindly offered advice and suggestions for improvements. Even going so far as to do proof reading and cover design work!

The end result (although this is by no means the end!) is that people have downloaded my books over 92,000 times. That is staggering and quite frankly, a pretty daunting prospect to consider that so many people might be taking my advice on something, let alone a JavaScript library that I wanted to learn about because it looked like fun :-).

Doing this has been extremely time consuming and while I don’t begrudge the effort that it entails, it isn’t my day job and I have to be careful about where I place my focus so that I can try and balance the enjoyment that I get out of writing and making sure that the end users are getting the information they need.

So the prospect of putting the quite considerable content that I have amassed over the years into a form of online learning programme has not been something that I have seriously considered because of the amount of time that it would have entailed.

But again... Cometh the hour, cometh the platform. In this case it came in the form of the team from Educative. The contacted me out of the blue to ask if I was interested in partnering with them to make the contents of the book available as an online course. I explained that I wasn’t going to be able to dedicate a considerable amount of time to support them, but they had a scheme for such partnerships that allowed me to make some alterations to the book (in particular to improve the resolution of the images) and for them to be able to deliver the content in an appropriate way.

The end result has been the publishing of D3 Tips and Tricks: Interactive Data Visualization as an online course.

It includes 144 lessons, nine separate quizzes, 18 challenge problems, 295 illustrations and over 60 code samples! The estimation for completion time is 102 hours. That's a lot of learning.

The first time that the Educative team provided me with an overview of the content I was staggered by the presentation and volume of information. It really is a great collection and I’m very glad that they have been able to make it available to a wider audience.

Will this be something that will be a different direction for me and perhaps for some of my other books? Really good question. That will definitely depend on what sort of reaction to the course there is. I am intending to be as active as possible on the Educative forum to provide assistance to students. Perhaps this will be another rewarding outlet that I will want to pursue.