The scope of this project focused on building a website with data visualisations, learning how to use D3 and other industry tools. However, i I were to continue working on this project (which I would definitely like to at some point!), there are a few more features to implement.

Accessibility

The tests undertaken focused on colour blindness and showed room for definite improvement. However, there are other aspects of accessibility that should be considered. For example, rather than relying on users being able to scroll or drag to interact with the graphs, visual controls should be added.

Using D3 means that SVGs are used to draw the graphics, this is good from an accessibility perspective, as they can be drawn on any screen size and still be clear and sharp. However, there are still improvements to be made, such as the use of ARIA attributes, which give more information to screen readers (e.g. ‘roles’ which define what an element does). Making the graphs truly accessible is arguably the trickiest part. A recent case study by Bulb Energy discussed their approach to making the graphs included in their graphs…


There are many different types of testing which check different aspects of a project. As this project focuses mostly on the technical aspects of web development, I decided to concentrate on functional and unit tests.

Once I’d written the tests, I added them to the package.json, meaning they could be run with more meaningful commands from the terminal. For example, instead of running ./node_modules/.bin/mocha ./test/unit-tests/unit-tests.js, the command npm run mocha can be run instead.

Unit Tests

Unit tests are written from a programmer’s perspective. They ensure that a particular method successfully produces the expected output when given a specified input.

I wrote the unit tests in JavaScript, using the Mocha test framework. Inputs and expected outputs are declared, and then parameters are passed to the function being tested. The recorded output is then compared to the expected output, using the Chai assertion library. If they match, the test passes. An example of the tests for capitalising each word in a string is…


This part of the series takes a look at the development process of my final year project A visual analysis of UK number 1s. It covers every step, including hosting, setup, Spotify integration, the Scrollama library and fighting with D3.

Hosting

The website is hosted using GitHub pages, as this is an easy, affordable and time sensitive method of hosting a project online. Changes are updated quickly, without needing to FTP files.

Project Set Up

The project was initialised with NPM, which creates a file called package.json. …

About

Becky Rush

Software Engineer at BBC News Visual Journalism. Brightonian living in London.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store