You can view the website here
The site was created for the Code Institute Full Stack Web Development course Stream 2 project. It is based on code provided by Code Institute which provides an interactive data visualisation using a dataset from DonorsChoose.org, a body which promotes and arranges donations to classroom projects in the United States.
For the purpose of the project, I have assumed the identity of a graduate who benefited from DonorsChoose.org’s funding whilst at high school. I have changed some of the visualisations to show different data to the original code and expanded their functionality. I have enhanced their appearance and incorporated them into a website which promotes the good work that DonorsChoose.org does.
The website is an interactive tool to allow people to look more closely at the projects supported. The visualisations show different attributes of the money raised and projects supported with users of the site being able to manipulate them to show information of interest.
To support users of the site there is an interactive guide on how to manipulate the data shown.
Functionality of the website has been tested on Google Chrome, Microsoft Edge and Mozilla Firefox at screen sizes down to 320px. The final code has been deployed to Heroku.
D3.js: A JavaScript based visualization engine, which render interactive charts and graphs based on the data.
Dc.js: A JavaScript based wrapper library for D3.js, which makes plotting the charts a lot easier.
Crossfilter.js: A JavaScript based data manipulation library that enables two way data binding.
Queue.js: An asynchronous helper library for JavaScript.
Mongo DB: NoSQL Database used to convert and present the data in JSON format.
Flask: A Python based micro – framework used to serve the data from the server to the web based interface.
Intro.js: A tool for attaching pop-up tooltips to provide an interactive tour of the website
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent