Course: Data Visualisation and Analytics (F20DV)
Gitlab Project Link: https://gitlab-student.macs.hw.ac.uk/cr2007/f20dv-group-project
Download Cleaned Dataset Link and supporting TopoJSON files: OneDrive Link
Team Members:
- Abdul Rehman - @ar225
- Ahmed ElZubair - @AhmedElZubair38
- Chandrashekhar Ramaprasad - @cr2007
- Tamir Forawi - @tvmir
As part of our university coursework, we were tasked with designing and developing an interactive visualization application for the dataset of our choice, using HTML, CSS, JavaScript, and the D3.js library.
The dataset we chose for this project is the Electric Vehicles Population Dataset, a publicly available Kaggle dataset that contains information about electric vehicles (EVs) in the United States of America (USA).
It includes data such as the Make, Model, State, Electric Vehicle Type, and the Electric Range of the vehicles.
This setup guide is primarily for users of Visual Studio Code. If you're using a different code editor, ensure you have a local web server package like XAMPP installed.
Ensure the following are installed on your machine:
To set up the application:
- Clone the repository:
git clone https://gitlab-student.macs.hw.ac.uk/cr2007/f20dv-group-project
. Alternatively, download the ZIP file from the "Code" button. - Open the project in Visual Studio Code.
- Install the recommended extensions in
.vscode/extensions.json
. Ensure the Live Server extension is installed. - Open
index.html
and click "Go Live" to run the application on a local server. - The application will open in your default web browser at
http://localhost:5500
. - Interact with the application and view the visualizations.
- Changes to the code will reflect in the browser in real-time.
The application is a data visualization dashboard for electric vehicle data. It uses D3.js for creating various types of charts and vanilla JavaScript for data processing and event handling.
The application is styled using CSS and the layout is created using HTML.
The project is structured as follows:
data/
: Constains the CSV data file used for generating the charts.lib/
: Contains the D3.js library filed3.v7.min.js
scripts/
: Constains JavaScript file s for each type of chart, connected by the main script file:main.js
: Handles data loading, processing, and event handlingbarChart.js
: Implementation of the Bar ChartpieChart.js
: Implementation of the Pie ChartstackedBarChart.js
: Implementation the Stacked Bar ChartlineChart.js
: Implementation of the Line ChartscatterPlot.js
: Implementation of the Scatter PlotgroupedChart.js
: Implementation of the Grouped Bar Chartmap.js
: Implementation of the Map Charthelper.js
: Reusable functions that have been used throughout the development of the charts
styles/
: Contains CSS files for each type of chart and the main CSS file:main.css
: Contains the main style and imports other CSS files
index.html
: The main HTML file that includes the D3.js library, the main CSS file and placeholders for the charts
The CSV data is loaded and processed in main.js
via the d3.csv()
function.
The data processing functions transform the raw data into a format suitable for each type of chart.
The processed data is then passed to the corresponding chart's render function.
The event handling is also done in the main.js
file.
For example, it includes an event listener for the search input field.
When the user types in the search input field, the data is filtered based on the search query and the charts are updated accordingly.
Each chart is implemented as a class in its own JavaScript file.
The classes include a render
function that takes the processed data and generates the chart.
The application is styled using CSS. The main CSS file includes styles for the overall layout and imports the CSS files for each type of chart.
The main HTML file includes the D3.js library, the main CSS file, and placeholders for the charts.
The placeholders are div
elements with specific IDs corresponding to each type of chart.