Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justin0022/dashboard
A React SPA for creating data viz dashboards
https://github.com/justin0022/dashboard
d3 dashboard material-design react react-hooks spa visualization
Last synced: about 2 months ago
JSON representation
A React SPA for creating data viz dashboards
- Host: GitHub
- URL: https://github.com/justin0022/dashboard
- Owner: justin0022
- Created: 2019-02-06T20:52:16.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T13:25:27.000Z (about 2 years ago)
- Last Synced: 2024-11-01T13:03:55.457Z (3 months ago)
- Topics: d3, dashboard, material-design, react, react-hooks, spa, visualization
- Language: JavaScript
- Homepage: https://justin0022.github.io/dashboard/
- Size: 9.05 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://standardjs.com)
# Dashboard
**[Live Demo](https://justin0022.github.io/dashboard/)**
A React single page data visualiation app. It uses [D3](https://d3js.org/), [Material UI](https://material-ui.com/), [React Router](https://github.com/ReactTraining/react-router), and [Emoji Feedback](https://github.com/ubc/emoji-feedback).
## Getting Started
These instructions will get you a copy of the project up and running on your local machine.
### Prerequisites
1. **Install [Node 8.0.0 or greater](https://nodejs.org)**.
2. **Install [Git](https://git-scm.com/downloads)**.
### Installing and Setup
1. First, clone this repo. `git clone https://github.com/justin0022/dashboard.git`
1. Then cd into the repo. `cd dashboard`
1. Run the installation script. `npm install` (If you see `babel-node: command not found`, you've missed this step.)
1. Run using `npm start`. Webpack Dev Server will host a hot-loading webpage.
1. To build for production, `npm run build` will output the production-ready, minified, tree-shaken bundle in `/dist`.
## Responsive
Using the higher order component [withResponsiveness](https://github.com/justin0022/dashboard/blob/master/src/components/hoc/withResponsiveness.js), the graphs made in D3 is responsive in an optimized way.
