D3: Explanation of the Attention Hungry UK Ministers App

A Visualisation of Attention Hungry UK Government Cabinet Ministers

Introduction:

This is an explanation of the "Attention Hungry Ministers" application. A few notes about the app, code, etc:

Description of the SVG Elements in Use:

Main SVG Elements in Use in the Attention Hungry UK Government Cabinet Ministers App

We've got one SVG element, and a 'g' element for each 'face'. Each 'face' breaks down as follows:

Detail of the SVG Elements in Use in the Attention Hungry UK Government Cabinet Ministers App

So for the most part, each face is rendered as a vertical stack of two circles (one for the pupil ontop of one for the eye), which themselves are ontop of an image, which are all ontop of a circle.

When a face (government minister in this case) becomes the centre of attention, i.e. when it's clicked on, or when the it's randomly chosen (via a timer and random selection), for a brief period of time that particular 'face' 'g' element is augmented with a couple of things:

Components and Modules:

The structure of the app is as follows, with one central controller module running the show:

Components and Modules Used By the Attention Hungry UK Government Cabinet Ministers App
  • There is in fact really only one component (i.e. chunk of code that actually really renders anything), and that's the faceManager component (although the "progress display" component does exist briefly at the beginning). This takes an array of data, passed to it from the controller, and renders the individual 'face' 'g' elements. The controller periodically calls the "transform" function of the faceManager component, which whizzes through each of the 'faces', renders the eyes, and renders the faces.
  • The controller module contains a whole slew of other modules - and one component: initially the "progress display" component is loaded up to show The Queen whilst images, sounds, etc are loading. There are timer modules used to control the random changing of the minister at the centre of attention, control the emanating circles, and randomly choose eye targets for each minister.
  • But the core of the controller is a force layout and associated code to control the collisions, much of which was taken from a few Mike Bostock examples: http://mbostock.github.io/d3/talk/20111018/collision.html, http://bl.ocks.org/mbostock/1021841, http://bl.ocks.org/mbostock/1748247.
  • The controller also handles events that arise from selections of the checkboxes, and the Sound On/Off button.

Sources of Code, Examples, Information:

Many examples, demos, forum posts were looked at, absorbed, and used in this code. Here's a list:

Sound:

For sound, I used the howler.js library, not because it's the most amazing library, but primarily because it seems simple to use, and seems to work.

That's It!

Code-reuse in action, as many of the bits'n'pieces here were also used in the D3: Reusable D3 With The Queen, Prince Charles, a Corgi and Pie Charts demo. If you have any comments, do go ahead and leave a comment at the bottom of this page, or if you've got any questions, do get in touch!.