Giter VIP home page Giter VIP logo

data-visualization-dashboard's Introduction

Data-Visualization-Dashboard

This is web application that fetches data from JSONPlaceholder and displays it in a user-friendly dashboard using only vanilla JavaScript.

This project receives data using the JSONPlaceholder API, you can see the details of how it works here:

https://jsonplaceholder.typicode.com/

This project is hosted using the Vecel.com platform, you can see how it works here:

https://data-visualization-dashboard-by-shist.vercel.app/

Video demo:

video-demo.mp4

Instruction for launching this project

  1. Go to the folder on your PC where you want to install the project: cd "your-folder"
  2. Download and install files of this project: git clone https://github.com/Shist/Data-Visualization-Dashboard
  3. Go to the app folder: cd Data-Visualization-Dashboard
  4. Run the app with some server. You can use VS Code Live Server or MAMP.

Description of folder structure

  • The assets folder stores all fonts, pictures, scripts and icons
    • The fonts folder stores all local fonts
    • The images folder stores all static pictures
    • The icons folder stores all icons (including favicon)
  • The scripts folder stores all the scripts
    • The modules folder contains all modules of the project: modules for charts (barChart.js, lineChart.js, pieChart.js) and additional modules (setListeners.js, setColorsGenerator.js, setDatesGenerator.js)
    • The service folder stores *.js files with code that handles data exchange between app and other services (e.g. JSONPlaceholder)
  • The styles folder stores all the application styles
    • The global folder stores style variables, as well as templates and general styles
    • The main folder stores the styles of the main part of the page

Technologies used in the project

  • HTML
  • CSS / SCSS
  • Javascript
  • HTML Canvas
  • JSONPlaceholder API
  • Fetch API
  • Promise
  • Async / Await
  • HTTP-Requests
  • Modules
  • Imports / Exports

data-visualization-dashboard's People

Contributors

shist avatar

Watchers

avatar

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.