Create a Data Dashboard visualising a dataset using D3.js and DC.js

• Description

• UX

• Technologies Used

• Local Development

• Local Testing

• Cross Browser Testing

• Deploy

• Credits

• LICENSE

(Back to top)

1. This project visualises an expense dataset for the year 2019. The data was generated using the website Mockaroo.com. There are 265 transactions with each having a date, id, account name and amount.
2. Daily, weekly, monthly, quarterly pie charts have been prepared using D3, DC and Crossfilter. Total amount by account and amount by day are also presented visually.

(Back to top)

1. As a user, I want to view a dashboard, so that I can analyse an expense dataset.
2. As a user, I want to interact with an expense dashboard, so that I can discover interesting trends in the data.
3. As a user, I want to view an expense dataset using desktop devices.
4. As a user, I want to load an expense dataset into the browser to create a new dashboard, so that the dashboard can be reused.
5. As a user, I want to create a pdf of the dashboard, so that I can print the dashboard.
6. As a user, I want to view descriptive statistics of the dataset, so that I can easily characterise my outgoing expenses.

1. What is the average expense amount for each account?
2. How many transactions are there for each account?
3. How many transactions are there in total?
4. What is the total expense amount for each account?
5. How many accounts are there?

(Back to top)

1. HTML5

2. CSS3

3. Git

4. Github

5. D3

6. DC

7. Cross Browser Testing

8. Node v10.15.1

9. NPM 6.4.1

10. Cypress.io

11. HTML5 Validator

12. CSS3 Validator

13. Online Converter

(Back to top)

git clone https://github.com/DamianMcNulty/project2interactive.git
npm i
npm run build
open http://127.0.0.1:5500/build/index.html with live-server in vscode

(Back to top)

(in separate terminals)
npm run buildandwatch
npm run test_open

(Back to top)

see cbt folder

(Back to top)

git push

note: Integration tests are carried out using Cypress and Netlify. A staging server is deployed to https://project2interactive.netlify.com/ .

(Back to top)

git tag -a v1.0.0 -m "version 1.0.0"

(in git bash terminal)
sh ./publish.sh 1.0.0

The production version is hosted at https://damianmcnulty.github.io/project2interactive

1. https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
2. https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
3. https://codepen.io/DamianMcNulty/pen/BqyZQq
4. dc-js/dc.js#731 (comment)
5. https://www.cssmatic.com/box-shadow

(Back to top)

• https://fractures.space/ Krisztian Puska
• https://www.linkedin.com/learning/dc-js-for-data-science-essential-training Emma Saunders
• ToolBox

(Back to top)

See LICENSE.