This dashboard was created to present the user with a range of headline indicators covering demographic, economic, environmental and crime of each borough of the city of London.
Bringing to life some very interesting London datasets using the Javascript libraries D3.js, Dc.js and Crossfilter.js.
The design of this website was used to provide the user with a fun and interactive way to discover facts about each borough of London without over complicating things. I kept a minimalist style overall to keep the users focus on the charts.
Using D3, Dc, and Crossfilter, all charts (except for the number displays and scatter plot) will filter each other on clicking to allow the user to narrow down their selection.
The crimes per borough section is using its own seperate dataset and as a result will not filter when other chart categories are selected. This was left as is owing to the format of the two datasets and I think leads to a less confusing experience.
A few potential users are someone who:
- Is thinking of moving to London and wants to know the economic, social and safety side of the city.
- Wants to know how all London boroughs differ on key indicators.
- Wants to see how a particular borough compares on key indicators.
Initial wireframes can be found here. The sidebar that was initially designed for desktop was left out due to it taking up unnecessary screen real estate. The hamburger menu was swapped for the two individual icons to avoid having the user take a two step process to find the icons.
The dashboard, as the name suggests centres around the charts. Each chart is interactive to varied degrees.
- Four number displays head the dashboard displaying some of the key indicators to any city. These will filter accordingly based on the selected filters applied to other charts as the number displays themselves are not interactive.
- Two bar charts and pie chart focused on migration. Showcases some interesting insights into the multicultural population of London.
- Choropleth Map with accompanied row chart based on crime within each borough. My personal favourite visualisation on the dashboard. By clicking on a borough on the map you can see which crimes are most prevalent.
- Obesity vs greenspace scatter plot. Shows the correlation between the amount of greenspace a borough has and the rate of chidhood obesity. This chart is not interactive.
- Gender pay gap composite chart. Another data relationship that I was expecting but no less impactful.
- Average house price row chart. Showing the extortionate value of property in each borough.
- A tooltip will show when hovering on all charts (except for the number displays), displaying some information about the hovered selection.
All charts are fully responsive and most are interactive with the execption of the obesity scatter plot and gender pay line chart. Clicking on any interactive chart will apply filters to others allowing the user to narrow down their selection.
A reset link will appear if a chart is clicked allowing the user to reset the selected filters from the corresponding charts and all other charts. An added reset all button at the bottom of page will remove all filters and reset all charts to starting point.
A modal will render on a users arrival to the page with some information about the dashboard. Within the modal there is an option to take the tour which will run the user through the features of the dashboard and how to use it. The modal and tour can also be accessed via the info and question icons in the header.
- Something that would be useful is to display the name of the selected borough/s so the user is aware of the data being used.
The dashboard relies:
- HTML
- For markup
- CSS3
- For dashboard styles and grid layout
- SCSS
- For splitting the stylesheets into partials for ease of development. My first time using SCSS and I do need to find a work flow that suits me.
- Javascript
- All three charting libraries are based on Javascript.
- Bootstrap (version 4.3.1)
- Used for all cards, font styles and modal.
- D3.js (version 3.5.17)
- JavaScript library for manipulating documents based on data and the backbone of the dashbaord.
- Dc.js (version 2.1.8)
- Leveraging d3.js to render charts in CSS-friendly SVG format.
- Crossfilter.js (version 1.3.12)
- A dependency of dc.js to provide linked filtering and aggregation of large datasets.
- Queue.js (version 1.0.7)
- Used to load in csv and geoJson data
- Jquery (version 3.3.1)
- For the welcome/info modal.
- Font Awesome (version v5.7.2)
- For number display icons and info icon.
The dashboard was tested throughout development on all the major browsers latest versions using the developer tools and also testing on individual devices. Each chart represented a new piece of functionality and testing was performed after each chart was added. Once all charts were completed, testing was performed after adding each new subsequent feature.
The dashboard will render accordingly on all device screen widths. Content driven breakpoints were used rather than focusing on individual device width. I think this provides the most fail safe way of accomodating any screen on which the dashboard is viewed as well as keeping up with the speed at which new devices are being made.
I would have liked to incorporate some form of automated testing and TDD during the build of this project but I could not find any reliable sources showing how to use a testing framework like Jasmine on d3.js charts. Or svg testing in general...
How the potential users mentioned in the UK section can achieve their goals:
- A comparison of all boroughs across every indicator can be gained when first arriving at the dashboard as all charts are initially rendered without any filters applied.
- The user can focus on one particular section/indicator and see how all boroughs match up.
- Clicking on a particular borough on any chart will filter other indicators so the user can see how that borough compares to others.
A testing matrix can be found here showing all tests carried out on all browsers and breakpoints.
The dashboard will not work on Internet Explorer due to the use of CSS. A small sacrifice given the global usage of Internet Explorer is currently at around 4%. On my research I found a workaround for this is using the Autoprefixer tool. It does require the use of node.js and npm which is something that is outside the scope of this project but something I would like to incorporate in the future.
The project source control was handled by git and remotely on Github. Throughout the development process, I mainly worked out of a "develop" branch and at times a further "feature" branch to seperate my code and maintain a secure work flow. This is my first time using multiple branches during development. I do still need to nail down my work flow and become more familiar with working with branches.
The repository can be found here:
Repo: https://github.com/gitbush/london-boroughs
The site was eventually deployed through github pages from the master branch. The live site will be updated automatically with each commit on the master branch.
Deployed site on Github pages here.
Github Pages (master branch): https://gitbush.github.io/london-boroughs/
To run locally, you can clone this repository directly into the editor of your choice by pasting git clone https://github.com/gitbush/london-boroughs.git into your terminal. No dependencies required for local development.
The dashboard is based on two seperate datasets:
The color legend used in the Crimes per Borough section was learnt from the SVG linear gradient tutorial.
The tour used is from Intro.js