Giter VIP home page Giter VIP logo

project2interactive's Introduction

Project2Interactive

GitHub stars

CircleCI

Goal

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

Table of Contents

Description

(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.

UX

(Back to top)

User Stories

  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.

Questions

  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?

Technologies Used

(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

Local Development

(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

Local testing

(Back to top)

(in separate terminals)
npm run buildandwatch
npm run test_open

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

Research

  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

Credits

(Back to top)

License

(Back to top)

See LICENSE.

project2interactive's People

Contributors

damianmcnulty avatar dependabot[bot] avatar

Watchers

 avatar  avatar

project2interactive's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.