Line plot with mouse-over interaction (Data: UK Unemployment Rate)

Pulls the latest UK Unemployment Rate data from the Office for National Statistics, and draws a line representing the unemployment rate using a d3.line() generator.

It also draws a hidden set of bars, one for each datapoint. These bars are used to provide interaction with the data. On mouseover, the tooltip is updated with the correct values and the bar is shown. On mouseout the bar is hidden.

Concepts covered:

• Scales
  • Time Scale (x-axis)
  • Linear scale (y-axis)
• Interaction
  • Mouseover, Mouseout, Mousemove
  • Using hidden elements for interaction