CPSC 436V Project : World Development Indicators

Notes:

• Visualization designed for larger screens (preferably 1920px x 1080px and above). (Though there is some responsiveness for smaller screens, it's not 100% completely responsive)
• Project Structure & Implementation below

Table of Contents

• CPSC 436V Project : World Development Indicators
  • Notes:
  • Table of Contents
  • The Team
  • Overview
    • Goal and Purpose
  • Dataset
    • Sources
    • Pre-processing
  • Implementation
    • Project File Structure
    • Current Status (as of April 14, 2021)
      • High-level Tasks (Not fully inclusive)
        • Complete:
        • Todo's from M2
        • Stretch Goals
  • External Resources
    • Data Sources
    • Referenced Material
      • Data Processing
      • Map
      • Year slider
      • Multi-line chart
      • Comparison Section
      • Styling
      • Colour Palette
      • Scrolling

The Team

Group 24:

Team Member	Github Id (School's)	Github Id Personal
Amy	(NA for privacy reasons)	(NA for privacy reasons)
Brett	(NA for privacy reasons)	(NA for privacy reasons)
Jacqueline	yjackie	jacquelineyin

Overview

Goal and Purpose

Inequality is, sadly, pervasive throughout all domains of life - and countries are not exempt. Countries fall under the categories of “developed” vs “developing”, with “developed” countries seeking to expand their sphere of influence by donating and funding the development of those that are “developing”. But what does that mean, exactly? What are the factors that determine whether a country is "developed" or "developing", and how do countries fare on each indicator of development?

The data visualization for this project leverages data consolidated from the World Bank and seeks to allow users to explore the different regions of the world and see how well they do in different areas of development as compared to a global average. Furthermore, we hope to allow users to investigate similarities or discrepancies between different areas of the world by juxtapositioning countries of interest in terms of indicators of development.

Demo:

• 

App: Click Here to Explore the App

Dataset

Sources

• Kaggle: Indicators.csv
• Kaggle: continents2.csv

Pre-processing

1. Filtered dataset Indicators.csv of all rows containing irrelevant IndicatorName values and created a temporary dataset Dataset.csv that held the results
2. Joined two datasets (Dataset.csv and continents2.csv)
3. From the result of the join, removed all rows that assigned anything other than a country to CountryName column (unless the value was "World")
4. Finally, we populate missing years for {country, indicator} pairs and set the values as NULL
5. Note: For a more detailed breakdown of how we pre-processed our data, please refer to the README.md in ./data

Implementation

Project File Structure

Our project repo separates all visual components where the bar chart, line chart, map and wedges have their own css file. General styling all belongs in the style.css file. All stylesheets are under the css folder.

In our js folder, we have a constants, widgets and visualizations folder. The constants folder contains all constants used in our project. These constants include our colour palette colors, indicator names, country names, and our mappers.

The widgets folder contains all the code for our selectors. The selectors include the selector for comparison areas and selecting the focus country.

The visualizations folder contains all code for our visualizations which include: bar chart, line chart, map, wedges and year slider.

Aside from these three folders, all other files such as libraries and util classes reside in the js file.

A util file of particular use is selected.js. We created a new class in selected.js which keeps track of which values are currently selected. The selector class holds the value of selected country of focus and its region, selected comparison countries, selected indicators and selected time interval. This class is instantiated once in main.js, and that instance of the selected object is then fed into and shared across all views. When the instance of selected is updated and the view's updateVis() method gets called, the view updates as appropriate to reflect the change (if related to that view).

📦436v-project_g8y9a_r6s1b_s4g1b
┣ 📂css
 ┃ ┣ 📜barChart.css
 ┃ ┣ 📜comparisonWidget.css
 ┃ ┣ 📜focusAreaWidget.css
 ┃ ┣ 📜leaflet.css
 ┃ ┣ 📜lineChart.css
 ┃ ┣ 📜map.css
 ┃ ┣ 📜style.css
 ┃ ┣ 📜wedges.css
 ┃ ┗ 📜yearSlider.css
 ┣ 📂data
 ┃ ┣ 📜countries.json 
 ┃ ┣ 📜Dataset.csv
 ┃ ┗ 📜README.md
 ┣ 📂images
 ┃ ┣ ...
 ┣ 📂js
 ┃ ┣ 📂constants
 ┃ ┃ ┣ 📜colourPalette.js
 ┃ ┃ ┣ 📜countries.js
 ┃ ┃ ┣ 📜countryCodeMapper.js
 ┃ ┃ ┣ 📜dispatcherEvents.js
 ┃ ┃ ┣ 📜indicators.js
 ┃ ┃ ┣ 📜keyEventMapper.js
 ┃ ┃ ┣ 📜regionMapper.js
 ┃ ┃ ┣ 📜regions.js
 ┃ ┃ ┗ 📜warningType.js
 ┃ ┣ 📂visualizations
 ┃ ┃ ┣ 📜barChart.js
 ┃ ┃ ┣ 📜geoMap.js
 ┃ ┃ ┣ 📜lineChart.js
 ┃ ┃ ┣ 📜wedgeView.js
 ┃ ┃ ┗ 📜yearSlider.js
 ┃ ┣ 📂widgets
 ┃ ┃ ┣ 📜autocomplete.js
 ┃ ┃ ┣ 📜comparisonWidget.js
 ┃ ┃ ┗ 📜focusAreaWidget.js
 ┃ ┣ 📜d3.v6.min.js
 ┃ ┣ 📜inputSanitizer.js
 ┃ ┣ 📜leaflet.js
 ┃ ┣ 📜leaflet.js.map
 ┃ ┣ 📜main.js
 ┃ ┗ 📜selected.js
 ┣ 📜.gitignore
 ┣ 📜index.html
 ┗ 📜README.md

Current Status (as of April 14, 2021)

High-level Tasks (Not fully inclusive)

Complete:

• View: Choropleth Map (Basic)
• View: Pie Wedges (Basic)
• View: Bar-chart (Basic)
• View: Line-chart (Basic)
• View/UI widget: Year slider
• UI widget: Select Country Dropdown + Radio Buttons
• UI widget: Select Comparison Countries + Tags
• Link: Select Country --> Bar-chart, Line-chart, Wedges
• Link: Select Comparison --> Bar-chart, Line-chart
• Link: Wedges (Select Indicator) --> Bar-chart, Line-chart, Map
• Link: Year slider (Select Time Interval) --> Bar-chart, Line-chart, Wedges, Map

Todo's from M2

• Link: Select Country --> Map
• Link: Bar-chart --> Line-chart
• Widget: Bar-chart tooltip (Changed to displaying value when hover on bar)
• Widget: Wedge tooltip
• BugFix: Stacked rendering of Line-chart's y-axis title
• UI: Warning message when adding over 4 comparison countries
• UI: Warning when trying to add invalid country as comparison country
• UI: Move year slider to left and change to vertical slider
• Others

Stretch Goals

• Link: Bar-chart --> Map
• Link: Wedge (ability to select more than one indicator?)
• UI: Styling
• Others

External Resources

Data Sources

• See Dataset: Sources
• World Map Topojson

Referenced Material

Data Processing

• Create Table And Put Data In SQL Server Using CSV File

Map

• How-to add a Leaflet map
• 436V Leaflet example
• Countries GeoJSON
• Loading GeoJSON files in Leaflet with leaflet-ajax
• StackOverflow: Auto-zoom to a Polygon in Leaflet
• Leaflet: GeoJSON layer documentation
• Stack Exchange: Create FeatureCollection from GeoJSON...
• Stack Exchange: Getting bounds of layer group in leaflet
• Github: Horizontal Lines in World
• Observable: Intro to leaflet+d3 + interactivity

Year slider

• D3 brushing linking
• D3 snapping brush

Multi-line chart

• D3 Mouseover Multi-line Chart
• Multi-line Chart Example
• Tooltip tracking by data points

Comparison Section

• W3School: How To - Autocomplete
• Slack Overflow: Chrome ignores autocomplete="off"
• W3School: How To - Contact Chips

Styling

• A Complete Guide to Flexbox
• A Simple Way to Make D3.js Charts Responsive
• D3-format
• D3: Formatting tick value. To show B (Billion) instead of G (Giga)
• Viewbox
• Observable: Rounding 'rect' element borders

Colour Palette

• Cooler.co for choosing a colour palette
• Cooler: Link to choosen colour palette
• ColBlinder as a Colour Blindness Simulator

Scrolling

• Smooth scrolling