A Dashboard for visualizing fictitious sales data has been developed using technologies that have been learned throughout the Interactive Frontend Development section of this full stack web developer course.
Fictitious Sales records data was downloaded from the following location
http://eforexcel.com/wp/downloads-18-sample-csv-files-data-sets-for-testing-sales
and year 2013 was selected from the data.
The layout of the data is as follows
Variable | Format |
---|---|
Sub_Region | Alphabetic |
Sub_Region_Code | Alphabetic |
Country | Alphabetic |
Country_Code | Alphabetic |
Item_Type | Alphabetic |
Sales_Channel | Alphabetic |
Order_Priority | Alphabetic |
Order_Date | dd/mm/yyyy |
Order_ID | Alphabetic |
Ship_Date | dd/mm/yyyy |
Units_Sold | Numeric |
Unit_Price | Numeric |
Unit_Cost | Numeric |
Total_Revenue | Numeric |
Total_Cost | Numeric |
Total_Profit | Numeric |
The purpose of the dashboard is to visualize fictitious sales data with the following
DC.js NumberDisplays, Charts & Table.
01) dc.numberDisplay ("#dc-total-cost-display");
02) dc.numberDisplay ("#dc-total-profit-display");
03) dc.numberDisplay ("#dc-total-revenue-display");
04) dc.numberDisplay ("#dc-total-unit-count-display");
05) dc.rowChart ("#dc-units-sold-sub-region-chart");
06) dc.selectMenu ("#country-units-sold-selector")
07) dc.rowChart ("#dc-units-sold-item-type-chart");
08) dc.rowChart ("#dc-total-units-sold-chart");
09) dc.compositeChart ("#dc-totals-chart");
10) dc.pieChart ("#dc-pie-chart");
11) dc.dataTable ("#dc-data-table");
A Wireframe Mock-up has been created using Mockup Pro
Please see Dashboard_Mockup.pdf
The Dashboard was developed in AWS Cloud9 workspace using a mobile first approach.
To test this approach Google Chrome DevTools 'device mode' was used for the following devices.
Iphone 5/SE, Iphone 6/7/8, Iphone 6/7/8 Plus, Iphone x, Ipad, and Ipad Pro.
All changes commited to Git, Then when complete the website was pushed to GitHub.
The following software is required to be able to create the Dashboard and was uploaded to the workspace and envoked via the INDEX.HTML file.
Versions of the software are documented in the brackets below.
<!-- BOOTSTRAP minified CSS file (v4.1.3) --> <link rel="stylesheet" type="text/css" href="./static/css/bootstrap.min.css"/>
<!-- DC.js minified CSS file (v2.1.10) --> <link rel="stylesheet" type="text/css" href="./static/css/dc.min.css"/>
<!-- FONT AWESOME minified CSS file (v4.7.0) --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!-- GOOGLE FONT CSS file --> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:200,400"/>
<!-- My dashboard CSS file --> <link rel="stylesheet" type="text/css" href="./static/css/main.css">
<!-- D3.js minified JavaScript file (v3.5.17) --> <script type="text/javascript" src="./static/js/d3.min.js"> </script>
<!-- D3.js time-format minified JavaScript file (v2.1.1) --> <script type="text/javascript" src="./static/js/d3-time-format.min.js"> </script>
<!-- CROSSFILTER minified JavaScript file (v1.4.6) --> <script type="text/javascript" src="./static/js/crossfilter.min.js"> </script>
<!-- DC.js minified JavaScript file (v2.1.10) --> <script type="text/javascript" src="./static/js/dc.min.js"> </script>
<!-- JQUERY minified JavaScript file (v3.3.1) --> <script type="text/javascript" src="./static/js/jquery-3.3.1.min.js"> </script>
<!-- BOOTSTRAP minified JavaScript file (v4.1.3) --> <script type="text/javascript" src="./static/js/bootstrap.bundle.min.js"> </script>
<!-- QUEUE minified JavaScript file (v1.0.7) --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"> </script>
<!-- My dashboard JavaScript file --> <script type="text/javascript" src="./static/js/main.js"> </script>
- AWS Cloud9 - Cloud-based integrated development environment (IDE)
- Bootstrap - Front-end component library
- Crossfilter.js - Crossfilter javascript library
- Dc.js - Multi-Dimensional charting javascript library
- D3.js - Data-Driven Documents javascript library
- D3.schemeSet3 - Color Scheme
- Fontawesome - Icon set
- Git - Version Control
- GitHub - Remote Repository
- Google Font - Font set
- JQuery.js - jQuery javascript library
- Mockup Pro - Wireframe mockup
- Queue.js - Evaluate asynchronous tasks javascript library
D3.js is a JavaScript library for manipulating documents based on data using
- HTML (Hypertext Markup Language)
- SVG (Scalable Vector Graphics)
- CSS (Cascade Style Sheets)
And a data-driven approach to DOM (Document Object Model) manipulation.
DC.js is a specific library for charting with native “crossfilter” support and is called “Dimensional Charting”
it sits on top of D3.js and uses D3.js to render the charts in CSS-friendly SVG format.
Crossfilter.js is another helper library and allows you to work with the data to make the charts rendered by DC.js interactive.
So if you click on a particular chart on the dashboard, another related chart, that is a chart bound to the same dataset, can react to that click and maybe represent a subset of the data that was represented in another chart.
To use these three libraries, you should import them into your script in a following order,
- D3.js
- Crossfilter.js
- DC.js
This function to remove empty bins is used to create data processed by the piechart and was taken from
https://github.com/dc-js/dc.js/wiki/FAQ
// Remove empty bins Function (if value = 0), before passing to Chart(s)
function remove_empty_bins(source_group) {
return {
all: function () {
return source_group.all().filter(function (d) {
//return Math.abs(d.value) > 0.00001; // if using floating-point numbers
return d.value !== 0; // if integers only
});
}
};
}
This function helped in checking data was correct and was taken from the following article
https://www.codeproject.com/Articles/693841/Making-Dashboards-with-Dc-js-Part-1-Using-Crossfilter
// Print Filter Function Tip
function print_filter(filter) {
var f = eval(filter);
if (typeof f.length != "undefined") {} else { }
if (typeof f.top != "undefined") {f = f.top(Infinity);} else { }
if (typeof f.dimension != "undefined") {
f = f.dimension(function (d) { return ""; })
.top(Infinity);
} else { }
console.log(filter + "(" + f.length + ") = " +
JSON.stringify(f)
.replace("[", "[\n\t")
.replace(/}\,/g, "},\n\t")
.replace("]", "\n]")
);
}
Paul Edward Bennett