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

• Description

• UX

• Technologies Used

• Local Development

• Local Testing

• Credits

• LICENSE

(Back to top)

1. This project visualises an expense dataset for the year 2019.
2. The data was generated using the website Mockaroo.com.
3. There are 265 transactions with each having a date, account name and amount.
4. Graphs have been prepared using D3, DC and Crossfilter.

(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. Node v10.15.1

8. NPM 6.4.1

9. Cypress.io

10. HTML5 Validator

11. CSS3 Validator

12. csv2json

13. CircleCI

(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

python -m venv env
pip install -r requirements.txt

1. https://codepen.io/DamianMcNulty/pen/BqyZQq
2. dc-js/dc.js#731 (comment)
3. https://stackoverflow.com/questions/36494956/elasticxtrue-doesnt-work-dc-js

(Back to top)

• https://www.linkedin.com/learning/dc-js-for-data-science-essential-training Emma Saunders

(Back to top)

See LICENSE.