A dashboard example designed using bootstrap, Jquery and D3.js
To check out live demo, Click here
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
Vector maps are json data which are binded to DOM (Document Object Model) using D3. Tables are genreated from an array of data which came from csv file. By adding some Event Listeners, Vector maps are linked to the tables and data in the table changes accordingly.
- Clone the repo:
git clone https://github.com/akashpawara/dashboard-map-d3.git.
Within the download you'll find the following directories and files:
dashboard-map-d3/
├── README.md
├── LICENCE
├── assets
│ ├── css
│ │ ├── black-dashboard.css
│ │ ├── nucleo-icons.css
│ │ └── demo.css
│ ├── data
│ │ └── test.csv
│ ├── fonts
│ │ ├── nucleo.eot
│ │ ├── nucleo.ttf
│ │ ├── nucleo.woff
│ │ └── nucleo.woff2
│ ├── js
│ │ ├── core
│ │ │ ├── bootstrap.min.js
│ │ │ ├── jquery.min.js
│ │ │ └── popper.min.js
│ │ ├── plugins
│ │ │ ├── chartjs.min.js
│ │ │ └── perfect-scrollbar.jquery.min.js
│ │ ├── black-dashboard.min.js
│ │ ├── demo.js
│ │ └── maps.js
│ └── img
│ ├── anime3.png
│ ├── anime6.png
│ └── spaceboard.gif
│ ├── maps
│ │ ├── india.json
│ │ ├── maharashtra.json
│ │ └── mum.json
└── index.html
If you have questions or need help integrating the product, contact me me on whatsapp or email me at (akashpawara29@gmail.com).
Linkedin: https://www.linkedin.com/in/akashpawara
Medium: https://medium.com/@akashpawara
Instagram: https://instagram.com/akash_pawara_