Part 6: Utility functions

d3 offers lots of utility functions to help us calculate properties and coordinates. On that note, it's time we used some proper data!

Coffee data

☕ We have a json file called 'coffee-data.json' full of data about coffee prices and consumption. Go take a look!

Here's are the countries we have data for:

To get the remote data and list these items, we use d3's .json() function

Coffee data

🤦 The below SVG should visualise the data for the UK, but something has gone wrong. What is it? Try inspecting it with your browser dev-tools.

Coffee viz, take 2

To fix it, we need to scale the values down to fit the SVG. We need to convert from data to sensible pixel coordinates.

Coffee viz, take 3

The above is nice, but it could do with some axes and labels!

It could do with some labels. Try adding them in using an SVG text element. You could do this with d3, or simply update the markup.