DYNAMIC D VISUALIZATION IN A C PLATFORM FOR H T -B E … · for her continuous support,...

i

SANEA'A PLATFORM

DYNAMIC DATA VISUALIZATION IN A CROWDSOURCING

PLATFORM FOR HACKATHONS AND TIME-BOUND EVENTS IN THE

MENA REGION

By:

Haila Mohammed Al-Qaffary

Taghreed Morizeq Al-Khammash

Amal Mohammed Al-Robayea

Maha Saleh Al-Nasrallah

Supervised By

Dr. Areej Suleiman Al-Wabil

DELL EMC Envision the Future Competition

Final Report

2017 -2018

ii

Acknowledgments

We would like to extend our highest gratitude to Allah Almighty, for illuminating the path

we walked through, and opening the doors of science to our minds, and helping us to

complete our project with satisfaction. And marking this project as to be the end of our

journey of education from Bachelor, we hope it will be useful application to our society.

We would especially like to acknowledge our tremendous supervisor “Dr. Areej Al-Wabil”

for her kind guidance and directions for helping us achieve all we have, academically, and

for her continuous support, encouragement, vision, guidance, advice, trust, invaluable

contributions, proposed ideas and constructive suggestions during the course of this project

and encourage us to improving our craft to make this project moves forward in a much

efficient way .

Sincerely thank goes to Princess Nourah Bint Abdulrahman University specialize college

of Computer Science and Information for all the effort they made to give us great education

and memorable days in our college life. It is also essential to thank my lecturers and

teachers throughout our academic journey as they have made it reward.

Sincere thanks to the HCI Lab at King Abdulaziz City for Science and Technology

(KACST) for joint collaboration and impact support. Working with such a project is a great

opportunity and honor for us.

Lastly, our sincerest gratefulness to our family and friends who overwhelmed us with their

favors and continues encouragement to keep us optimistic, focused and excited to extend

our reach. With their help and unwavering support we have been able to overcome

obstacles and reach where we are.

iii

Abstract

The rise of hackathons has led the acceleration of technological progress and redefine the

technology innovation lifecycle. Time-bounded events have spawned a creativity that is

rarely seen elsewhere in the digital innovation landscape. Efficient track and analysis of

data emerging from time-bounded events - and trends in the technology innovation process

that emerge from encouraging developers, designers and entrepreneurs to track, process,

and communicate data about the phenomenon of hackathons and time-bounded events and

how they contribute toward innovation eco-systems in the region is of interest to both

professional analysts and the general public. This project identifies the distinguishing

characteristics and patterns of hackathons in the Middle East and North Africa (MENA)

region. It introduces a visual analytics application for uniquely identifying patterns in the

technical, socio-cultural and contextual differences that define hackathon practices and the

emerging hacking communities in the region. The benefit of such understanding not only

supports the continued growth of such activities in the region, but it also helps to

disambiguate hackathon activities from other productive practices for software

development, entrepreneurship and computing education. The aim of this project is design

and develop the first Arabic platform for interactive information visualizations for time-

bounded events such as hackathons, startup weekend, coding competitions, and ideations.

The contribution of this work outlines the trends and issues relevant to hackathons in the

MENA region and focuses on how insights can be sought by dynamically exploring

information visualizations that are crowdsourced from the community. This work has shed

light on insights that can be drawn from collaborative development of digital systems in a

concentrated time period. Themes from technology-centric and social-centric hackathons

are often aligned with global trends. Data-driven analytics from our MENA Hackathon

platform suggest that time-bounded events in the MENA region contribute beyond

producing digital artifacts, with building capacity and technical expertise, building

community and expanding social networks, exposing participants to different modes of

design thinking, and shaping cross-domain identities for the human capital in these regions.

Keywords: MENA , Time-bounded, Hackathon, HCI, Information Visualization, Annalistic

data, Knowledge Engineering.

iv

Table of Contents

Acknowledgments .................................................................................................................................................... ii

Abstract .................................................................................................................................................................. iii

Table of Contents ..................................................................................................................................................... iv

List of Tables ............................................................................................................................................................ vi

List of Figures ........................................................................................................................................................ vii

List of Abbreviations ................................................................................................................................................ x

Chapter 1: Introduction ........................................................................................................................................... 1

1.1 Problem Statement & Significance ......................................................................................................... 2

1.2 Proposed Solution ..................................................................................................................................... 2

1.3 User characteristics ................................................................................................................................. 3

1.4 Definitions of New Terms ........................................................................................................................ 4

Chapter 2: Background Information & Related Work ........................................................................................ 6

2.1 Background Information .............................................................................................................................. 6

2.2 Related Work ................................................................................................................................................. 7

2.2.1 Major League Hacking ........................................................................................................................... 8

2.2.2 Devpost Platform: .................................................................................................................................... 9

2.2.3 Hackathon.io: ......................................................................................................................................... 10

2.2.3 Hackathon.com: ..................................................................................................................................... 10

2.2.5 NY Hackathons ...................................................................................................................................... 12

2.2.6 HackEvent .............................................................................................................................................. 13

2.2.7 Hackathons Near Me ............................................................................................................................. 14

2.3 Proposed & Similar Systems Comparison ................................................................................................ 15

Chapter 3: System Analysis ................................................................................................................................... 18

3.1 Requirements Specification ........................................................................................................................ 18

3.1.1 Benefits of creating personas ................................................................................................................ 18

3.1.2 Creation process .................................................................................................................................... 19

3.1.3 Personas usage ....................................................................................................................................... 23

3.1.4 Stakeholders ........................................................................................................................................... 23

3.1.5 User requirements ................................................................................................................................. 23

3.2 Challenges and Limitations ........................................................................................................................ 24

3.2.1 Technical challenges .............................................................................................................................. 24

v

3.2.2 Non-technical challenges ...................................................................................................................... 24

3.2.3 Project limitations ................................................................................................................................. 24

3.3 Functional Requirements ............................................................................................................................ 25

3.4 Nonfunctional Requirements ...................................................................................................................... 26

3.5 System Specifications .................................................................................................................................. 28

3.5.1 Initial specification ................................................................................................................................ 27

3.5.2 Final specification .................................................................................................................................. 28

Chapter 4: System Architecture ............................................................................................................................ 30

4.1 System diagrams ..................................................................................................................................... 31

4.1.1 Flowchart ............................................................................................................................................. 31

4.1.2 Sequence Diagram .............................................................................................................................. 33

4.1.3 Use-Cases ............................................................................................................................................. 36

4.1.4 Data Modeling ..................................................................................................................................... 41

4.2 User Interface Design .................................................................................................................................. 42

4.2.1 Interface Flow ........................................................................................................................................ 43

4.2.2 User interface .................................................................................................................................. 45

4.2.3 Admin interface .............................................................................................................................. 56

4.2.4 Platform message ............................................................................................................................ 57

Chapter 5: Implementation ................................................................................................................................... 60

5.1 Introduction ............................................................................................................................................ 60

5.2 Implementation Requirements .............................................................................................................. 60

5.2.1 Hardware requirements ................................................................................................................. 60

5.2.2 Software requirements ................................................................................................................... 60

5.3 Implementation Phases .......................................................................................................................... 62

5.3.1 First phase: Collecting the data ..................................................................................................... 62

5.3.2 Second phase: Building the database ............................................................................................ 63

5.3.3 Third phase: Designing the interfaces ......................................................................................... 72

5.3.4 Fourth phase: Building functionality ............................................................................................ 75

5.3.5 Fifth phase: Implementing visual analytics platform .................................................................. 79

5.3.6 Sixth phase: Integrating all the previous parts ............................................................................ 90

Chapter 6: Testing .................................................................................................................................................. 92

6.1 Test Plan ....................................................................................................................................................... 92

6.1.1 Test objective ......................................................................................................................................... 93

6.1.2 Platform testing life cycle ...................................................................................................................... 93

6.1.3 Platform testing strategy ....................................................................................................................... 93

vi

6.1.4 Black box testing plan ........................................................................................................................... 93

6.1.5 Main test plan ......................................................................................................................................... 94

6.2 Test Cases ..................................................................................................................................................... 95

6.2.1 Black box test cases ............................................................................................................................... 95

6.2.2 Database test cases ................................................................................................................................. 95

6.2.3 Functional test cases .............................................................................................................................. 98

6.2.4 Non-Functional (Graphical User Interface) test cases ..................................................................... 104

6.3 Test Result .................................................................................................................................................. 106

6.3.1 Summary result of black box testing ................................................................................................. 106

6.3.2 Summary result of main plan testing ................................................................................................. 107

6.4 Usability and Social Impact ...................................................................................................................... 108

6.4.1 Social impact ........................................................................................................................................ 108

6.4.2 Usability and user acceptance ............................................................................................................ 109

Chapter 7: Conclusions ........................................................................................................................................ 113

7.1 Evaluation .................................................................................................................................................. 113

7.2 Future work ............................................................................................................................................... 114

REFERENCES ..................................................................................................................................................... 115

Appendix A: Project Management Plan ............................................................................................................. 118

Team Communication Information ............................................................................................................... 118

Project Communication Matrix ..................................................................................................................... 118

Project Publication Management ................................................................................................................... 119

Gantt Chart ...................................................................................................................................................... 120

Contingency and Risk Mitigation Plan ......................................................................................................... 122

Methodology .................................................................................................................................................... 122

Agile life -cycle ................................................................................................................................................. 122

Agile sprint iterations ...................................................................................................................................... 123

Appendix B: Personas Card ................................................................................................................................ 125

List of Tables Table 0-1: Abbreviations list ...................................................................................................................... ix

Table 1-1: Definitions of all new terms ........................................................................................................... 4

Table 2-1: MLH platform .......................................................................................................................... 8

Table 2-2: Devpost platform ..................................................................................................................... 9

Table 2-3: Hackathon.io platform ........................................................................................................... 10

Table 2-4: Hackathon .com platform ....................................................................................................... 11

vii

Table 2-5: NY Hackathons platform ....................................................................................................... 12

Table 2-6: HackEvent platform ............................................................................................................... 13

Table 2-7: Hackathons Near Me platform ............................................................................................... 14

Table 2-8: Proposed and similar systems comparison 1 .................................................................... 15

Table 2-9: Proposed and similar systems comparison 2 ................................................................... 15

Table 4-1: Signup use case scenario ................................................................................................... 36

Table 4-2: Login use case scenario ...................................................................................................... 37

Table 4-3: Tree map chart use case scenario ...................................................................................... 37

Table 4-4: Bar chart use case scenario ................................................................................................ 37

Table 4-5: Bubbles chart use case scenario ....................................................................................... 38

Table 4-6: Geographic map chart use case scenario ......................................................................... 38

Table 4-7: MENA map chart use case scenario ................................................................................ 39

Table 4-8: Doughnut chart use case scenario ..................................................................................... 39

Table 4-9: Radial chart use case scenario ............................................................................................. 40

Table 4-10: Add new event use case scenario .................................................................................... 40

Table 4-11: Update events use case scenario ...................................................................................... 40

Table 4-12: Filter time-bounded events theme use case scenario .................................................... 41

Table 4-13: Validate use case scenario ................................................................................................ 41

Table 6-1: Black box testing plan ............................................................................................... 93

Table 6-2: Main test plan .......................................................................................................... 94

Table 6-3: Black box test cases .................................................................................................... 95

Table 6-4: Data base test cases .................................................................................................. 96

Table 6-5: User registration test cases ...................................................................................... 98

Table 6-6: User login test cases ................................................................................................ 99

Table 6-7: User forget password test cases ............................................................................... 99

Table 6-8: Contact us test cases ................................................................................................ 99

Table 6-9: User profile test cases ............................................................................................. 100

Table 6-10: Control panel system administration test cases ..................................................... 100

Table 6-11: Spatial and temporal visualization chart test casess ............................................. 101

Table 6-12: Statistical visualization charts test cases .............................................................. 102

Table 6-13: MENA map visualization chart test cases ............................................................. 102

Table 6-14: Integration between three different charts test cases .............................................. 103

Table 6-15: GUI overview test cases ....................................................................................... 104

Table 6-16: GUI colors standard test cases .............................................................................. 104

Table 6-17: GUI consistency of webpages content test cases ................................................. 105

Table 6-18: GUI navigation test cases ....................................................................................... 105

Table 6-19: GUI usability test cases .......................................................................................... 106

Table 6-20: Summary result of black box testing ...................................................................... 107

Table 6-21: Summary result of main plan testing ...................................................................... 107

Table 6-22: User evaluation ..................................................................................................... 110

List of Figures Figure 2-1: Rise of the hackathon culture ................................................................................................... 6

viii

Figure 3-1: Persona card ............................................................................................................................ 19

Figure 3-2: Brainstorming session with the team…………………………………………………... …….20

Figure 3-3: Persona card of researcher and graduate student .......................................................................... 21

Figure 3-4: Behavioral Archetypes ........................................................................................................... 22

Figure 4-1: System Archticture ................................................................................................................. 30

Figure 4-2: System Flow chart .................................................................................................................. 31

Figure 4-3: Visualization process sequence diagram ................................................................................. 33

Figure 4-4: System Sequence diagram ...................................................................................................... 33 Figure 4-5: Verfication of adimasiterations information ........................................................................... 34 Figure 4-6: Sequence diagram of signup process ...................................................................................... 34 Figure 4-7: Sequence diagram of rest password process ........................................................................... 35

Figure 4-8: Use Case (UC) diagram ......................................................................................................... 36

Figure 4-9: Entity Relation (ER) Diagram ................................................................................................ 42

Figure 4-10: Guest User Interface Flow ................................................................................................... 43

Figure 4-11: User Interface Flow ............................................................................................................... 44

Figure 4-12 : Admin Interface Flow .......................................................................................................... 45

Figure 4-13 : Shows landing page to the platform .................................................................................... 46

Figure 4-14: Shows explore events webpage ............................................................................................ 46

Figure 4-15: Select specific pin .................................................................................................................. 47

Figure 4-16: Filtering time-bounded events ................................................................................................ 47

Figure 4-17: Shows form to add event information .................................................................................. 48

Figure 4-18: Statistical dynamic charts visualization webpage ............................................................ 49

Figure 4-19: Shows visulaiztion chart depending on theme on each country in the MENA .................... 50 Figure 4-20: Shows visulaiztion chart depending on events theme and prize in the MENA .................... 50

Figure 4-21: Shows visualization chart depending on events theme and date in the MENA ..................... 51

Figure 4-22:Shows visualization chart depending on sponsors of events and theme in the MENA .......... 51

Figure 4-23: Shows about us page ............................................................................................................. 52

Figure 4-24: Shows frequently asked questions page ............................................................................... 53

Figure 4-25: Shows platform header ........................................................................................................ 54

Figure 4-26: Shows pop-up window to Sign up ....................................................................................... 54

Figure 4-27: Shows pop-up window to Sign in ........................................................................................ 54

Figure 4-28: Shows user page ................................................................................................................... 55

Figure 4-29: Shows admin page ................................................................................................................ 56

Figure 4-30: Shows pop-up message of empty field .................................................................... 57

Figure 4-31: Shows pop-up message of add new event ................................................................ 57

Figure 4-32: Shows pop-up message of wrong enters. ................................................................. 57

Figure 4-33: Shows pop-up message Email used previously ....................................................... 57

Figure 4-34: Shows pop-up message of change password successfully. ...................................... 57

Figure 4-35: Shows pop-up message of edit event. ...................................................................... 58

Figure 4-36: Shows notification by email for accepted evet. ....................................................... 58

Figure 4-37: Shows notification by email for rejected event ........................................................ 57

Figure 5-1: Content crowdsourcing in the Sanea’a platform ........................................................ 63

Figure 5-2: Platform users accessibility ........................................................................................ 64

Figure 5-3: Add new event information........................................................................................ 64

Figure 5-4: Add new event information form ............................................................................... 65

Figure 5-5: User view ................................................................................................................... 66

ix

Figure 5-6: View event information ............................................................................................. 66

Figure 5-7: Update event information........................................................................................... 67

Figure 5-8: Update notification massage ...................................................................................... 67

Figure 5-9: Control panel of administration system ..................................................................... 68

Figure 5-10: Delete notification massage ..................................................................................... 68

Figure 5-11: Query of visualize button ......................................................................................... 69

Figure 5-12: User add new event information .............................................................................. 70

Figure 5-13: Store event information in the database tables......................................................... 70

Figure 5-14: User dashboard ......................................................................................................... 71

Figure 5-15: Review event information ........................................................................................ 71

Figure 5-16: Visualize event information ..................................................................................... 72

Figure 5-17: Homepage interface ................................................................................................. 72

Figure 5-18: About us webpage .................................................................................................... 73

Figure 5-19: Contact us webpage ................................................................................................. 74

Figure 5-20: FAQ webpage .......................................................................................................... 74

Figure 5-21: Registration webpage ............................................................................................... 75

Figure 5-22: Activation process .................................................................................................... 76

Figure 5-23: Login webpage ......................................................................................................... 76

Figure 5-24: Reset the password webpage ................................................................................ 77

Figure 5-25: Webmail control panel ................................................................................................... 78

Figure 5-26: Spatial Visualization of Time-Bounded Events in the Arab World......................... 80

Figure 5-27: visual analytics webpage. ......................................................................................... 81

Figure 5-28: Interactive d3 map visualization for event trends analysis. ..................................... 82

Figure 5-29: Case study-1 ............................................................................................................ 83

Figure 5-30: Case study -2 ........................................................................................................... 83

Figure 5-31: Dyamic bar charts that facilitate data manipulation to generate bespoke charts using d3 libraries. 84

Figure 5-32: Determine specific category ..................................................................................... 84

Figure 5-33: Tree map visualization chart .................................................................................... 85

Figure 5-34: Bubble chart visualization for events’ sponsors ...................................................... 86

Figure 5-35: Radial chart visualization for trend event among cities. .......................................... 87

Figure 5-36: Growth of hackathon phenomenon chart visualization among MENA ................... 88

Figure 5-37: Growth of hackathon phenomenon chart visualization between 2014-2018 ........... 88

Figure 5-38: Progress bar .............................................................................................................. 89

Figure 5-39: User interaction ........................................................................................................ 89

Figure 5-40: Filter dataset according to the user needs ................................................................ 90

Figure 6-1: Agile testing methodology ......................................................................................... 93

Figure 6-2: Platform testing strategy ............................................................................................ 93

x

List of Abbreviations

MENA Middle East and North Africa

HTML Hypertext Markup Language

PHP Hypertext Preprocessor

D3.js JavaScript library for producing dynamic, interactive

data visualization.

JS Java Script

CSV Comma-Separated Values

DOM Document Object Model

JSON JavaScript Object Notation

TSV Tab Separated Values

SVG Scalable Vector Graphics

SDLC Systems Development Life Cycle

UC Use Case

ER Entity Relationship

HCI Human Computer Interaction

UI User Interface

xi

Table 0-1: Abbreviations list

1

Chapter 1: Introduction

Information visualization is defined as “the use of computer-supported, interactive, visual representations

of abstract data to amplify cognition”. It plays a key role in exploring and understanding large datasets.

The principle behind information visualization is to improve the understanding of data using graphical

presentations. The growth of computing power, lower computing costs, development of user interaction

technologies, and large amounts of information accumulated within databases have contributed to the

growth of information visualization [1].

Visual analytics is the most recent field in information visualization. It has been defined as “the science

of analytical reasoning supported by the interactive visual interface”. It provides visual tools that enable

reasoning and decision-making from data with interactive visualizations, optimized for efficient human

perception. The information is now the essential part of human life, which encourage new ways to think

and evolve new advancement. Huge amount of information or data are generated from different sources,

these information are of diverse types and stored in various format.

A lot of data being generated, access, and use for individual, collective benefits. Because of such versatility

of information heave significant issues that how to represent these information in more useful manner that

the user can use it efficiently and extract knowledge from stored data or information. The basic purpose

of visualization is to create interactive visual representations of the information that exploit human’s

perceptual and cognitive capabilities of problem solving [2].

As increasing volumes of data for time-bounded events are captured and become available, new

opportunities arise for data-driven analysis that can lead to insights for researchers interested in the social

dynamics and computer supported collaborative work in time-bounded events such as hackathons. In

recent years, a growing momentum of events for leveraging the power of hackers to deliver an accelerated

digital product has emerged to redefine the technology innovation lifecycle [3].

Innovation with digital technologies continues to emerge, but increasingly there are efforts to help nurture

such innovation. A hackathon is an event in which computer programmers and others involved in software

development collaborate intensively over a short period of time on software projects. These hackathons

2

are encouraging of experimentation and creativity and can be challenge orientated. From holding large

numbers of these events, the hackathon phenomenon has emerged as an effective approach to encouraging

innovation with digital technologies in a large range of different spaces (education, open data, health,

academia, and more) [4].

1.1 Problem Statement & Significance

In the MENA region, the emergence of time-bounded events that are typically focused on the creation of

a software application or hardware prototype development was slower than the global trend. Sustained

growth in the past decade has been supported by an increasing appreciation of the contributions of time-

bounded event towards innovation and technology development. However, our understanding of the trends

and challenges in organizing time-bounded events is inadequate for the burgeoning analystics-driven

strategic planning and decision making.

Sophisticated tools were needed for analysts, policy makers and researchers to track, process, and

communicate data about the phenomenon of hackathons and time-bounded events and how they contribute

toward innovation eco-systems in the region. This motivated us to develop an interactive platform,

described in Section 5, to visualize the phenomenon of hackathons in the MENA region and to provide

the capability to visually explore the crowdsourced data sets.

Focuses on how insights can be sought by dynamically exploring information visualizations that are

crowd-sourced from the community. Themes from technology-centric and social-centric hackathons are

often aligned with data-driven analytics from our platform suggest that time-bounded events in the MENA

region contribute beyond producing digital artifacts, with building capacity and technical expertise,

building community and expanding social networks, and exposing participants to different modes of

design and shaping cross-domain multidisciplinary identities. Future directions for research include

reporting insights from the typology of hackathons in the regions and the trends in spatial and temporal

dynamics of these time-bounded events.

1.2 Proposed Solution

Data-driven visualizations are becoming more abundant in the visual experience of online hackathon

communities and the general public. Interactive information visualization take advantage of the relatively

broad bandwidth between a human’s eyes and the mind which helps users to not only see and visually

3

explore, but also understand information in large amounts, all at once. Information visualization has been

shown to be an effective tool for spatial and temporal exploration of dynamics datasets. Aligned with the

emerging hackathon phenomenon, the need arises for interactive information visualizations to aid in the

processing, comprehension, tracking, and retention of data on time-bounded events in static, animated,

dynamic and interactive visuals [5].

One of the best ways to explore and try to understand the large datasets of hackathons is with visualization.

The data visualizations serve the purpose of facilitating access to scattered information of hackathons in

the MENA region, fostering the recognition of structures in abstract data about the hackathons across

different regions, and supporting information retrieval and exploratory analytics of these events and trends

related to the emerging phenomenon of hackathon-led innovation programs, strategies and initiatives. The

spatial-temporal visualization of time-bounded events in the Arab region facilitates closely coupled human

and machine analysis.

We are motivated to develop an interactive platform, to visualize the phenomenon of hackathons in the

MENA region and to provide the capability to visually understand and explore the crowdsourced datasets

(a) spatially by zooming in and out of regions and countries, and (b) temporally by exploring the data sets

across different time frames. (c) visual representation of the patterns and trends translate data gathered

from the crowd into a visible form that highlights important features, including commonalities and

anomalies for time-bounded events in time and space. These visual representations of time-bounded events

make it easy for users to perceive salient aspects of regional distribution of events as well as the density

of events across time. The visualizations augment the cognitive reasoning process with perceptual

reasoning through color-coded visual representations of these time-bounded events.

The platform is an openly-editable website where users can contribute to the content of hackathon events

in the MENA region. This content crowdsourcing approach is considered to facilitate a sustainable

dynamic data set and to encourage users to contribute towards maintaining the accuracy and quality of

data submitted through the platform's frontend.

1.3 User characteristics

• User group: General public, Administrator.

• User group size: Arabs and those interested in the Middle East and North Africa events.

• Age: 12 upward.

4

• Gender: Males & Female.

• Language: English & Arabic.

• Educational background: Designed to be usable by people who have reading skills.

1.4 Definitions of New Terms

no Term Definition

1 D3

D3 stands for Data-Driven Documents. It is a high-quality JavaScript (JS) library to

create data visualization graphics, and also a data visualization processing technology.

It combines the data from a database system with HTML, SVG, and CSS. The

combination of data with the web standards allows the original two-dimensional data

to become an interconnected three-dimensional data architecture, and to display the

relationship between the data and visual effects.

D3 plays a key role of driver in connecting data and documents in the data

visualization process. The core of its solution is efficient data-based document

manipulation.

2

D3

Visualization

The process of representing abstract business of scientific data as images that can aid

in understanding the meaning of the data.

3 Crowdsourcing The act if soliciting contribution from undefined (and generally large) network of

people especially an online community, to obtain needed services via the web.

4

Time-bounded

Events

Time-bounded collaborative events in which teams work together under intense time

pressure in aim to accelerate the innovation and build up a business. The most popular

example about this phenomenon is hackathons [5].

5 Personas

Package behaviors and motivations of a customer group into a believable caricature.

Personas focus on the “who” of your audience research. They are useful to provide

insight into the characteristics of a target audience.

6

A Behavioral

Archetype

Describes common behavior and tasks exhibited by customers with similar needs.

Archetypes are steeped in user behavior. They contain details from user interviews

around a group’s needs, motivations and pain-points. Archetypes focus on the “who

does what, when they do it, and why” of your audience research. They provide insight

into behavior patterns and how a customer is using a product or service currently to

determine the approach and functionality of a user experience.

Table 1-1: Definitions of all new terms

6

Chapter 2: Background Information & Related Work

2.1 Background Information

The term hackathon was coined in 1999, It’s a portmanteau of “hack” and “marathon”, the hackathon

phenomenon has emerged as an effective approach to encouraging innovation with digital technologies in

a large range of different spaces (education, open data, health, academia, and more). A hackathon has been

described as a problem-focused computer programming event, as well as a contest to pitch, program, and

present instances of prototype digital innovation (e.g. a prototype mobile application).They bring together

programmers and others (interface designers, graphic designers and others) to collaborate intensively over

a short period of time on software projects, increasingly to compete for funding and other forms of support

(e.g. travel to attend events) for further development.

The meaning has since expanded to cover any design event that involves a specific challenge or set of

challenges, a fixed design period, and generally in a limited amount of time and location [4][5].

The popularity of such events started in the early 2000s, as they were sponsored by companies or

investment entities in the tech industry for facilitating rapid development of software technologies along

with exploring new avenues of funding and innovation [3].

Figure 2-1: Rise of the hackathon culture

In the recent, the rise of the hackathon culture in the global context was fast and utilitarian. The

interests of such events are gaining more popularity as shown in the figure (2-1) of google trends.

The phenomenon of hackathons has arisen from their growing global occurrence, professionally organized

corporate sponsored bespoke events. They have become an activity for many software companies, as well

as cultural organizations and government agencies as an approach to encourage digital innovation with

7

their assets and resources. This has lead to the rise of hackathon events being considered to have had a

significant impact of the culture of digital innovation.

The rise of the hackathons might appear inevitable but may also have benefitted from being an effective

form of innovation under austerity, which may also help to explain the apparent greater growth of

hackathons in some parts of the developing world (e.g. Brazil, India, etc.) [3].

2.2 Related Work

In recent years, interactive platforms for promoting and participating in hackathons have been introduced;

where hackathons are featured, and interactive tools provide event-related information (e.g. scope,

schedules, rules, prizes and judging criteria) as well as computer-mediated communication tools for team

formation and community building prior to the event and after the events [3].

8

2.2.1 Major League Hacking

Platform

About

Major League Hacking, officially abbreviated as MLH, is an organization built on

empowering hackers and operates a league for student hackathons. Founded in 2013 by

former developer evangelists Mike Swift and Jonathan Gottfried. In March 2016, it

became a Certified B-Corporation. B Corps are for-profit enterprises that are legally

required to consider the impact of their decisions on their community, not just their

shareholders. MLH platform provide the universities’ students a tool for finding and

sponsoring the upcoming hackathons in North America, Mexico and Europe.

Features

1. MLH it is a navigation platform where you can browse for upcoming events by

filtering based on location.

2. In addition, it provides a subscription system.

Limitations

1. Covers hackathons in North America and Europe regions only.

2. It doesn't exploration the historical events.

3. It is not crowdsourced platform.

4. It designed only for college students.

5. Disable search feature for the events.

Web-Pages

Upcoming Event

Reference https://mlh.io/

Table 2 -1: MLH platform

https://en.wiktionary.org/wiki/league

https://en.wikipedia.org/wiki/B_Corporation_(certification)

https://hackcon.mlh.io/events/north-america/

https://hackcon.mlh.io/events/europe/

https://mlh.io/

9

2.2.2 Devpost Platform:

Platform

About

Devpost is a platform that helps software engineers participate in software competitions

(hackathons) and find engineering jobs. Customers market their developer tools and jobs to

the Devpost community. Devpost now powers the majority of the world's in-person and

online hackathons. The company was founded by Brandon Kessler in 2009. Devpost users

can create profiles, share software projects they have worked on, and create and participate

in online and in-person hackathons.

Features

1. Devpost it is a navigation platform where you can browse and search for upcoming

events by filtering based on location , prize amount, recently added, event type and

submission deadline.

2. Furthermore, event organizers can post hackathons determining the information like

hackathon rules or guidelines, and award any prizes advertised on their hackathon

site.


Limitations

1. It takes long time to validate data entry.

2. It does not send any notification to the user to confirm data entry.

Web-Pages

Historical and Upcoming Events

Reference https://devpost.com/

Table 2-2: Devpost platform

https://devpost.com/

10

2.2.3 Hackathon.io:

Table 2-3: Hackathon.io platform

Platform

About

Hackathon.io is a platform to discover, share and manage hackathons. It provides

information about technology events mainly hackathons including information about their

attendees, sponsor and projects. Provide tools for event organizers. It’s been first produced

in 2012 because the need of systems for communicating with attendees and keeping track

of the things they built. Hackathon.io was a beautiful tool for helping organizers push

notifications, showcase attendees, prizes, and sponsors, and get essential metrics on the

technologies used and being developed at the event.

Features

1. It also had a judging platform built in, which allowed people to create multiple user

profiles for different access levels to each feature of an event.

2. Users could create teams, find team-mates, creep on other team’s projects and even

give teams anonymous feedback on their project.

3. Hackathon.io it is a navigation platform where you can browse and search for

upcoming events by filtering based on location, date, submission deadline and

theme.

4. Furthermore, public users must sign up to post hackathons determining the

information like hackathon rules or guidelines, and award any prizes advertised on

their hackathon site.


Limitations




Web-Pages

Upcoming Events

Reference http://greggopman.com/hackathonio/



http://greggopman.com/hackathonio/

11

2.2.4 Hackathon.com

Platform

About

Hackathon.com is platform for Hackathons and creative programming challenges. It is a

place for optimized visibility, professional mentorship and engage IT community and

invite talents from all around the World to work on their projects.

Features

1. Hackathon.com it is a navigation platform where you can browse and search for

historical and upcoming events by filtering based on location and event type.

2. Furthermore, public users must sign up to post hackathons determining the

information like hackathon rules or guidelines, and award any prizes advertised

on their hackathon site.


Limitations 1. It takes long time to validate data entry.


Web-Pages

Historical and Upcoming Events Add New Event

Reference https://www.hackathon.com/

Table 2-4: Hackathon.com platform



https://www.hackathon.com/

12

2.2.5 NY Hackathons

Platform

About

NY Hackathons platform that provides a venue for self-expression and creativity through

technology. People with technical backgrounds come together, form teams around a

problem or idea, and collaboratively code a unique solution from scratch — these generally

take shape in the form of websites, mobile apps, and robots.

Features

1. NY Hackathons it is a navigation platform where you can browse and search for

historical and upcoming events by filtering based on date, cheapest price, longest

duration and most people attending hackathons.

2. Furthermore, public users can post hackathons determining the information like


site.

3. In addition, it provides a subscribe feature.

Limitations

1. Covers hackathons in New York region only



Web-Pages

Add new event Historical and Upcoming Events

Reference https://nyhackathons.com/

Table 2-5: NY Hackathons platform

https://nyhackathons.com/

13

2.2.6 HackEvent

Platform

About Hackevents is a search engine for hackathons. It's a place for hackers and developers to

discover and share the latest hackathons around the world.

Features

1. Hackevents it is a navigation platform where you can browse and search for

upcoming events by filtering based on location.



site.

Limitations



3. It does not send any notification to the user to confirm data entry .

Web-Pages

Search for upcoming events and add new event

Reference https://hackevents.co/hackathon/saudi-arabia/riyadh/2492-misk-hackathon-riyadh

Table 2-6: HackEvent platform

https://hackevents.co/hackathon/saudi-arabia/riyadh/2492-misk-hackathon-riyadh

14

2.2.7 Hackathons Near Me

Table 2-7: Hackathons Near Me platform

Platform

About

Hackathons Near Me is a platform to discover, share and manage hackathons. It provides

information about technology events mainly hackathons including information about

their attendees, sponsor and fees for participant .

Features

1. Hackathons Near Me it is a navigation platform where you can browse and

search for upcoming events by filtering based on location.


hackathon rules or guidelines, and award any prizes advertised on their

hackathon site.

Limitations





Web-Pages

Search for upcoming events and add new event

Reference http://www.hackathonsnear.me



http://hackathonsnear.me/

15

2.3 Proposed & Similar Systems Comparison

Table 2-8: proposed and similar systems comparison 1

Table 2-9: proposed and similar systems comparison 2

Hackathon.io DevPost MLH Sanea'a

/ Allow users add time-

bounded events. /

Allow users add and

edit time-bounded

events for scaling up

the content of

hackathons.

Crowdsourced

Static exploration for

up-coming time-

bounded events.


up-coming and

historical time-bounded

events.

Static exploration

for up-coming

time-bounded

events.

Interactive exploration

for up-coming and


events.

Data

exploration

/ / /

Representing abstract

data as images by using

D3 high-quality

JavaScript library.

Data

visualization

United states and

Europe

United states and

Europe

North America and

Europe MENA region Region

- Location

- Date

- Theme

- Submission

deadline

- Location

- Prize amount

- Recently added

- Event type

- Submission deadline

Location

- Location

- Date

- Theme

- Gender

- Prize

- Sponsors

- Participant fee

- Final product

- Technology platforms

Search

based-on

Hackathons Near

Me HackEvent NY Hackathons Hackathon.com

Allow users add

time-bounded

events.

Allow users add time-

bounded events. /

Allow users add time-

bounded after signup. Crowdsourced


up-coming time-

bounded events.


up-coming time-

bounded events.

Static exploration

for up-coming

time-bounded

events.


up-coming and


events.

Data

exploration

/ / / / Data

visualization

United states and

Europe

United states and

Europe New York city

United states and

Europe Region

Location Location

- Date

- Cheapest price

- Longest duration

- Location

- Event type

Search

based-on

16

In the context of an ongoing data-driven research study on social dynamics in time-bounded events for the

MENA region, existing web platforms are not sufficient for analysis-driven recommendations these

systems are focused on finding hackathons and time bounded events rather than understanding the

historical events that happened. Sophisticated tools were needed for analysts, policy makers and

researchers to track, process, and communicate data about the phenomenon of hackathons and time-

bounded events and how they contribute toward innovation eco-systems in the region [3].

18

Chapter 3: System Analysis

In this section, we describe the system analysis process, which is often referred to as “the process

of studying a procedure or business in order to identify its goals, purpose and create systems and

procedure that will achieve them in an efficient way”, as defined by Merriam-Webster dictionary

[6].

That was done in the light of the end-user, to determine Requirements Specification of the Sanea’a

Platform. These requirements include functional and nonfunctional requirements, these

requirements shall be described in detail. The analysis was done by understanding the user needs

and behaviors while using the platform. Predicting user behavior is a very critical component, as

both marketing and design processes depend on it to build a product that meets users’ expectations

and achieves success in the market.

3.1 Requirements Specification

Before embarking on any intranet or website design project, it is important to understand the needs of our

users. It is then possible to identify the features and functionality that will make the platform a success,

and how the design can support users with different goals and levels of skill.

If we understand and empathizes with the people we are designing for, it can have a profound effect on

the decisions we make. It broadens our perspective and forces us to challenge our own biases and

conventions in favor of approaches that align to the people’s goals, needs and pain-points.

The target audience influences nearly every decision we make for a digital experience. This includes

technology selection, look and feel, interaction design patterns and use cases. In order to facilitate these

decisions, we aggregate and interpret our user research into representational customer profiles – Personas

and Archetypes.

The purpose of personas is to create reliable and realistic representations of our key audience segments

for reference. These representations should be based on qualitative and some quantitative user research

and web analytics [14].

3.1.1 Benefits of creating personas:

Personas help to focus decisions surrounding site components by adding a layer of real-world

consideration to the conversation. They also offer a quick and inexpensive way to test and prioritize those

features throughout the development process.

19

In addition, creating well-documented behavioral archetypes can set you up to make decisions with

confidence as well as lead you into future activities, such as:

• Give a clear picture of the user's expectations and how they're likely to use the site.

• They are relatively quick to develop and replace the need to canvass the whole user community

and spend months gathering user requirements.

• They help avoid the trap of building what users ask for rather than what they will actually use.

• Disagreements over design decisions can be sorted out by referring back to the personas.

• Aid in uncovering universal features and functionality.

• Aligning all stakeholders on who our primary archetypes are.

• Gaining more empathy for our users as we make decisions from their viewpoint instead of our own

• Identifying features that will resonate with our core users.

• Creating an experience map with each of our primary archetypes to understand how they currently

use our platform.

• Conducting usability testing with users that represent our primary archetypes.

3.1.2 Creation process:

Personas focus on the “who” of your audience research. As shown in

figure (3-3), they include demographic details such as age, gender,

occupation, education, interests, etc. They are useful to provide insight

into the characteristics of a target audience, but often don’t include

details on behavioral patterns. Personas are helpful for visualizing

customer segments, so project teams can relate to those segments and

build solutions for them. They help the team avoid designing a product

from a client-as-customer or us-as-customer perspective [23].

Figure 3-1: Personas card

Personas creation belongs at the beginning of the project, as personas can inform site functionality, help

uncover gaps, or highlight new opportunities. To ensure the personas are accurate representations of our

users and have the support of our stakeholders throughout the process.

20

• Conduct user research: Answer the following questions: Who are our users and why are they using

the platform? What behaviors, assumptions, and expectations color their view of the platform?

• Condense the research: Look for themes/characteristics that are specific, relevant, and universal to

the system and its users.

• Brainstorm: Organize elements into persona groups that represent our target users.

Figure 3-2: Brainstorming session with the team

• Refine: Combine and prioritize the rough personas. Separate them into primary, secondary, and, if

necessary, complementary categories.

• Make them realistic: Develop the appropriate descriptions of each personas background,

motivations, and expectations.

For this project, we interviewed 38 users to identify the 9 archetypes shown in figure(3-4).

Mapping each archetype’s behavioral landscape helped to guide the project team’s – and the

client’s – decisions around features, functionality and content, and resulted in a more meaningful

and valuable outcome.

21

Figure 3-3: Persona scenario of researcher and graduate student

Behavioral Archetypes: focus on the “who does what, when they do it, and why” of your audience

research. Archetypes most directly help determine the approach and functionality of a user

experience, as well as contributing to determining, validating, and prioritizing product features

[23]. Examples of behavioral archetypes are shown in figure (3-4).

22

Figure 3-4: Behavioral Archetypes

23

3.1.3 Personas usage:

• Identify the features, functionality and content to develop for an intranet or website release,

ensuring that value is delivered to users from day one of the release.

• Determine whether one user interface will meet the goals of all users, or whether there needs to be

two or more user interfaces developed.

• Communicate to senior executives the vision for the new intranet or website and how it will meet

the needs of the staff or customer base.

• Make design decision about how a piece of functionality will work or about the creative design of

the web solution.

• Guide the content development so that content supports the goals of the users and answers their

common questions.

• Develop scenarios for usability testing.

• Contribute to the marketing efforts for the intranet or website.

3.1.4 Stakeholders

1. Investors

2. Academic

3. Companies

4. Organizers

5. Freelancers

6. Pre-collegiate

7. Sponsors

8. Participation

9. Researchers and higher students

10. Business and Technology Incubator

11. Business and Technology Accelerator

12. Small and Medium Enterprise (SME's)

3.1.5 User requirements

1. User can view upcoming events. 2. User can view trendy events.

24

3. User can view historical events. 4. User can add new time-bound events. 5. User can update exist events information. 6. User can create account and log in to edit data entry.

7. User can spatial-temporal visualization and exploration of time-bounded events.

8. User can be filtering time-bound events based on : o Event theme whether if it is for health, humanity, technical and sport etc.

3.2 Challenges and Limitations

3.2.1 Technical challenges

• Education and Training is requires for the researchers and practitioners to share the basic principles

and skills about information visualization methods.

• The lack of Intrinsic quality measures means there is no common evaluation and selection

mechanism plus the unavailability of bench marks undermine advances in visualization methods.

• Scalability, how to manage huge visualization in available space.

• Information visualization changes over time, means there is dynamism in visualization [24].

3.2.2 Non-technical challenges

• Usability issues are critical issues for visualization, which means how to make it easy to use and

efficient.

• Understanding elementary perceptual– cognitive tasks is the basic step regarding information

visualization engineering, providing it according to human capability

3.2.3 Project limitations

• Database access limitation: The platform is an openly-editable website where users can

contribute for scaling up the content of hackathon events in the MENA region.

• Users verification: The insertion and edition in the platform is validated by administrator who

will validate the user by the institution’s email.

• Event’s information verification: The insertion and edition in the platform is validated by

administrator. The administrator validate the event information by URL event’s website.

• Time-bounded events limitation: Events in computing and information technologies that solve a

problem or build a business (e.g. hackathons, competitions, startup weekend tech incubator events,

accelerators and innovation contests).

• Geographic scope: Our proposed scope of work is the geographic region of the MENA region.

• Internet accesses limitation: Users need to have an internet access to run the visualization charts.

25

3.3 Functional Requirements

Functional requirements capture the intended behavior of the system “what the system should do“. This

behavior maybe expressed as services, tasks or functions the system is required to perform.

1. The platform will allow user to visualize the phenomenon of hackathons in the geographically

scope of the MENA region which embeds information visualizations that can be explored spatially

and temporally.

2. The platform will provide a clear view to the user of regional events and when he clicks on

a specific pin the map will retrieve all related events along with detailed information about

each event.

3. The platform will allow user to exploring the data sets across a timeline using a lever/slider

to move from one-time frame to another.

4. The platform will support information retrieval and exploratory analytics of these events

and trends related to the phenomenon.

5. The platform will facilitates closely coupled human and machine analysis by spatiotemporal

visualization of time-bounded events in the MENA region.

6. Platform supports dynamic chart visualizations overlaid on the spatial plots of events were

designed to amplify viewers' cognitive capabilities by enhancing the recognition of patterns of

when and where time-bounded events are held.

7. The platform's data visualization can be filtered across time and geographic locations such as the

country of the event. As well as, demographic filters are also applied to search the time-bounded

events by event themes whether if it is for health, humanity, technical and sport etc. Any used filter

will reflect the data retrieval of all other filters automatically.

o Tree map visualizations chart to enable user to understand patterns of themes over

countries and genders.

o Bar chart visualizations chart to enable user to understand patterns the number of

participants in specific theme over given period of time.

o Bubbles chart visualizations chart to enable user to understand patterns of sponsors

over time-bound event.

26

o Doughnut chart visualization chart to enable user to understand prizes of themes of

time-bound event in MENA region.

o Geographic map chart visualization to enable user to understand time line of time

bound events in MENA, know the location and description about the event.

o MENA visualization map to enable user to understand the rate of hackathon events

over the MENA region and explore dataset to understand of the growth of

phenomenon hackathon between 2014 to 2018.

o Radial visualization chart to enable user to understand the number events over the

MENA region.

8. The platform is a crowdsourced event by allowing users to add new time-bound events for scaling

up the content of hackathon events. In addition, the administrators will validate these events “data

entry” by email and URL of the event.

9. Platform provide secure registration system that validates email addresses, sends confirmation

emails, provides forgotten password functionality, stores passwords securely, validates input

forms. In order to allow user to edit entered information of events.

10. Platform provide CRUD application used to manipulate data in the database. It is user-interface

conventions that allow viewing, searching and modifying information through computer-based

forms and reports. In essence, entities are read, created, updated and deleted. Those same entities

can be modified by taking the data from a service and changing the setting properties before

sending the data back to the service for an update.

3.4 Nonfunctional Requirements

Nonfunctional requirements are requirement that describes not “what the system will do, but “How the

system will do it “. One could also think of it as quality attributes of system.

1. Security: Platform have two rolls of authorization

• Administrator authorized to post events on the platform and validate user entry.

• User authorized to add event, visualize data, search and view upcoming event and historical

event.

2. Usability: The user enters event information into a single form, finds searches and finds events

on a single page, reducing time to move between pages. The user enters the data, it will be

verified by the admin to reduce the errors.

27

3. Safety: The used system shall not cause any harm to human users.

4. Probability: Ability and ease of using the platform in different configurations or

environments.

5. Maintainability: The system must be maintained frequently to ensure the good improvement

of functionality and reliability of the system.

6. Accuracy: Data should be free from mistakes or error and having the value that the end user

expects.

7. Reliability: Ability to do a required function under stated conditions with a specified period of

time without failing.

3.5 System Specification

3.5.1 Initial specification

Visualization projects with high visibility focus on two main purposes: inspiration and explanation.

Visualization can be used to increase understanding of complex problems through data analysis. As

increasing volumes of data for time-bounded events are captured and become available, and scattered

on multiple websites and social medias, new opportunities arise for data-driven analysis that can lead

to insights for researchers, analysts, policy makers to track, process, and communicate data about the

phenomenon of hackathons and time-bounded events and how they contribute toward innovation

ecosystems in the region.

This motivated us to develop the first Arabic interactive platform that harness the time-bounded events

data and facilitates obtaining the historical information to provide new innovation and new insights.

User interface will reflect the main goal of the website and the identity of Sanea’a. Users will able

view and access the platform from any device due to the responsive design provided. It will ensure a

unified user experience across the different page and sections as will be described in the following

sections. In addition to the seamless user experience, the platform will provide data visualizations in

different patterns to provide a better understanding to the users while navigating through the different

datasets through the portal. Users platform can perform many tasks, such as upload new datasets, view

or edit existing datasets that available on the platform. Visualization and explore the existing dataset

in different ways through dynamic interactive charts. Analysis and view summary of datasets, compare

different datasets or filter the data.

28

3.5.2 Final Specification

The visualizations augment the cognitive reasoning process with perceptual reasoning through color-

coded visual representations of these time-bounded events and support relatively easy perceptual

inferences of relationships that are otherwise more difficult to induce. visualizing information, allow

us to see the patterns and connections that matter and then designing that information to so it makes

more sense, or it tells a story, or allows us to focus only on the information that's important. Data is

the kind of ubiquitous resource that we can shape to provide new innovations and new insights.

In Sanea’a the user can navigation through the platform and choose between searching, exploring or

interacting with the different components and visualizations. This will provide different routes for the

user to reach the information they are looking for depending on the preference and their navigation

behavior. When users identify the piece of information they are interested in, they will be directed to

the visualization charts. The charts serve as a story consisting of different informational components

and data visualization that will help users make sense out the datasets.

Different patterns of visualizations will be used in order to support the compatibility of the datasets:

treemap, bar chart, network, geographical, heatmap etc. Also, components that allow the users to

interact with the visualizations will be provided e.g. filters, compare, sort etc. The sections will always

start with a general view and sparklines to give an overview of the dataset before diving into the

visualizations.

30

Chapter 4: System Architecture

System Architecture based on understanding how a system should be organized, behavior and

designing the overall structure of the system. We choose Model- View-Controller pattern (MVC)

is use for web development and implementation user interface. MVC is structured into three logical

components that interact with each other, as shown in figure (4-1).

Figure 4-1: System Architecture

The MVC is made up of three parts:

1. View: The view component it’s a user interface (UI) defines and manages how the data is

presented to user. It deals with the data presentation from the model to the user.

2. Model: The Model component manages the system data and associated operations on that

data. It is responsible for the encapsulation of the underlying data.

3. Controller: The controller component manages user interaction and pass these interaction

to the view and the model. It is a software code that controls all the action between the

Model and View.

31

4.1 System diagrams

4.1.1 Flowchart

A flowchart is a graphically representation of the structure of process or system, algorithm or the

step-by-step solution of the problem. The Flowchart describes the flow of data through an

information processing system and the parts of the flows. The flow is a set of the logic operations

that meet the certain requirements.

Figure 4-2: System Flow Chart

The Flowchart diagram above shows the system process where the data insertion and updating

process are correlative with the process of D3 data-driven visualization, it demonstrates the process

initially when the user insert or sign up for update the data then the administrator verify the user

for posting and updating data into the platform [7].

D3 data-driven visualization model consists of a three-tier structure:

• Data processing layer

• Data application layer

• Data visualization layer

32

Correspondingly, the user follows three steps to use D3: loading data, binding data to graphic

elements, and rendering. Finally, users will be thankfully notified of the completion of posting and

updating.

1. Loading data: to convert the raw data into the format suitable for rendering and to load it

into the web browser. D3 supports loading data from an array or the local data files in JSON,

CSV, TSV formats. For instance, D3 provides d3. json () function to parse a JSON file and

load data into the browser. However, except for column charts, line charts, and scatter

charts, D3 needs to work on the layout of data before generating complex diagrams. D3

provides 12 functions for layout. They are not for traditional visualization. Instead, they are

committed to mapping the raw data to the format for a specific type of charts, namely data

conversion.

2. Binding data: to bind data to the specific DOM elements, and to update, create, or delete

elements accordingly. Function data () binds a data set (e.g., an array) to the select graphic

set, with each array value bound to each element in select graphic set. Binding data to DOM

elements is the key to implement interactivity. After data binding, the user can perform the

operations such as change, add, delete on graphic elements based on keyboard and mouse

events.

3. Rendering: The user analyzes the value scope of DOM objects, sets their corresponding

visual properties, and renders graphics in SVG canvas. The last step changes the view from

abstract data into intuitive graphics. D3 places visualization in the web page. Before

rendering, it gets the position and size of the canvas that define SVG area in the web page.

Basically, web-based visualization process is divided into two parts, client side contain user and

browser and the other one is server side contain web server and data base both of theme responds

with D3 visualization library. Figure (4-3) shows the process of web-based visualization where a

web-based server fetches the data from data storage, processes it to a graphical format, rendering

to client side then visualize data to user [8].

33

4.1.2 Sequence Diagram

A sequence diagram shows object interactions arranged in time sequence. It depicts the objects and

classes involved in the scenario and the sequence of messages exchanged between the objects

needed to carry out the functionality of the scenario. Sequence diagrams are typically associated

with use case realizations in the Logical View of the system under development.

Figure 4-3: Visualization process

Figure 4-4: System sequence diagram

34

Figure (4-4), shows the sequence of how the user interact with the platform.

Figure (4-5), shows the sequence of the verification of the administrator's information,

whether true or not.

Figure 4-5: Verification of the administrator's information

Figure 4-6: Signup process

35

In figure (4-6), the user steps when you want to create an account to modify data of events in

the platform, and make sure that the email is correct.

Figure 4-7: Rest password

In the figure (4-7), the sequence diagram shows steps to reset the user's password when they

are lost or forgotten.

36

4.1.3 Use-Cases

Figure 6-8: Use Case (UC) Diagram

Figure 4-8: Use Case (UC) Diagram

Figure 4-8 shows the use case diagram that describes interactions between an actor and the

system, which is used as a method in system analysis to identify, clarify and organize system

requirements.

4.1.3.1 Use cases description

Table 4-1: Signup use case scenario

Sign up Use case

User Actor

This use case begins when the user wants to update information of entered

events.

Brief

Description

User entered information for time-bound events. Precondition

User can update and review data entry of events. Trigger

User is successfully signed up and log-in information is stored on the

database.

Post

condition

37

Table 4-2: Login use case scenario

Table 4-3: Tree map chart use case scenario

Log in Use case

User Actor

This use case enables user to sign in, include information of username or

email and password.

Brief

description

The user had an account Precondition

User log in to update and review data entry of events information. Trigger

If the use case was successful, the user is now logged into the platform. If

it's not, the system rejects the user login and it will display an error

screen.

Post

condition

Patterns of themes over countries and genders. Use case

User Actor

A Tree map chart provides a hierarchical view of the data and makes it easy

to spot patterns. The tree branches are represented by rectangles and each

sub-branch is shown as a smaller rectangle so, this chart can help to

visualizing the patterns for the number of time-bounded events, themes and

genders over the MENA region. To help our main stakeholders like the

organizers of the events to understand the paucity of theme over the

countries. Where they can explore this map by clicking the rectangles (the

number of events in each country) to zoom to the next level (the number of

events in each theme).as for the last level it can represent the percentage of

both genders male and female in each theme.

Brief

description

Run the tree map chart and click rectangles to zoom into next level. Precondition

User can understand patterns of themes over countries and genders of

event. Trigger

The platform visualization events dependent on what user determine. Post

condition

Patterns the number of participants in specific theme over given period of

time. Use case

User Actor

A bar chart is a style of chart used by some technical analysts on which

different amounts of data are represented by thin vertical or horizontal

rectangles that have the same width but different heights or lengths. A

single bar represents number of participants in specific theme over given

period of time.

Brief

description

https://www.investopedia.com/terms/t/technical-analyst.asp

https://dictionary.cambridge.org/dictionary/english/amount

https://dictionary.cambridge.org/dictionary/english/represent

https://dictionary.cambridge.org/dictionary/english/thin

https://dictionary.cambridge.org/dictionary/english/vertical

https://dictionary.cambridge.org/dictionary/english/horizontal

https://dictionary.cambridge.org/dictionary/english/rectangle

https://dictionary.cambridge.org/dictionary/english/rectangle

https://dictionary.cambridge.org/dictionary/english/width

https://dictionary.cambridge.org/dictionary/english/height

38

Table 4-4: Bar chart use case scenario

Table 4-5: Bubbles chart use case scenario

This chart can help to visualizing the patterns for the number of participants

and themes over period of time. To help our main stakeholders to

understand the community interests for each theme over period of time.

Where they can explore that by clicking on the specific bar (the number of

participants in specific theme).

Run the bar chart by choosing bars to clarify and classify community

interests for each theme over period of time. Precondition

User can understand patterns of the number of participants in specific

theme over given period of time. Trigger


condition

Patterns of sponsors over time-bound event. Use case

User Actor

Bubble charts encode data in the area of a circle, the bubble branches were

represented by a circle and each sub-branch was shown as a smaller circle.

In our platform, we'll use it to visualizing the popular sponsors in the

MENA region. To help stakeholders to understand the pattern of sponsors

of time-bound event in the MENA region. In this chart in high level, that'll

visualize a number of more bubbles "circle" each bubble represents a

sponsor by clicking a bubble, for example, IBM bubble it will represent all

events that sponsored by it.

Brief

description

Run the bubble chart by click bubbles to zoom into next level. Precondition

User can understand patterns of the popular sponsors over time-bound

events. Trigger


condition

View time- bound event based on geographic location. Use case

User Actor

Geographic map chart visualize the phenomenon of time-bounded events in

the geographically scope of the MENA region. Its provide a clear view to the

user of regional events and when he clicks on a specific pin the map will

retrieve all related events along with detailed information about each event

also, there a timeline slider that enable to see historical and upcoming events.

this chart will help user to understand time line of time bound events in the

MENA region

Brief

description

Run the chart by zooming in specific country or movement on timeline

slider Precondition

39

Table 4-6: Geographic map chart use case scenario

Table 4-7: MENA map chart use case scenario

Table 4-8: Doughnut chart use case scenario

User can understand time bound event depend in geographic location or

timeline. Trigger

The platform visualization events dependent on what user determine. Post condition

View the rate of hackathon events over the MENA region Use case

User Actor

MENA visualization map shows the rate of hackathon events over the

MENA region. It has a 4 demotions to explore, the technology used and the

type of the events either in- person or virtual and the top even’s organizers

and sponsors.

Users can toggle on or off over the map to filter the event’s type by clicking

on the colored circles and the technology used name to filter the

technologies. Moreover, users can filter by select on the specified country.

Brief

description

Run the chart by zooming in specific country. Precondition

User can understand rate of hackathon events over the MENA region. Trigger


Patterns of prizes for each theme in time-bound event. Use case

User Actor

Doughnut chart is a chart that displays data in rings, where each ring represents

data series. Besides, Doughnut charts can give you a great perspective of the

relative changes., you can get a bird's-eye view of the relative change in each

item of the series.

In our platform we will use donut chart to visualizing prizes for each them

(Education, health …etc.). In high level of this chart will visualizing themes

by clicking on one theme for example education you will move to the next

level, in second level you will explore the prizes of each event in this theme.

Brief

description

Run the doughnut chart and click rings to zoom into next level. Precondition

User can understand type and quantity of prizes in each theme over time-

bound events. Trigger


40

Table 4-9: Radial chart use case scenario

Table 4-10: Add event scenario

Table 4-11: Update event scenario

Patterns of events for each city in MENA region. Use case

User Actor

The interactive radial chart represents the number of the events in each city

in the Middle East and North Africa countries , while you can hover the

mouse over the radials to explore the number of the events in each city.

Brief

description

Run the radial chart and click radials to zoom into next level. Precondition

User can understand type and number of events in each city over MENA

region. Trigger


Add new event Use case

User Actor

The user accesses the platform to add new events. Brief

description

Enter to the platform. Precondition

The user adds new events. Trigger

If the use case was successful, the administrator sends approval notification

to the user then visualizing event information into platform, if not

administrator send reject notification to the user and allow him to modify

data entry.

Post condition

Update information of the entry events. Use case

User Actor

This use case enables user to add /edit information about entry events. Brief

description

Administrator shall verification the URL of the event on the web along

with an institutional email address. Precondition

User insert new information about event or edit information of event. Trigger

If the use case was successful, the administrator send approval notification

to the user then visualizing event information into platform, if not

administrator send reject notification to the user and allow him to modify

data entry.

Post condition

41

Table 4-12: Filter time-bounded events theme

Table 4-13: Validation data scenario

4.1.4 Data Modeling

Entity-Relationship (ERD), that describing a proposed structure of database, which data

will be stored in database and showing the relationships among the database tables

references.

Filter time-bounded events. Use case

User Actor

The platform's data visualization can be filtered by event theme . Brief

description

Enter to the platform Precondition

The user determines categories of events Trigger


Validation of the data entry by users. Use case

Administrator Actor

This allow administrator to validate data entry that related to each event

then, accepted the data or not. Brief

description

The administrator should open the platform. Precondition

This use case allow administrator to accept data that will visualization in

platform. Trigger

If data are accepted, store data in database and visualization into platform. Post condition

42

Figure 4-9: ER-Diagram

4.2 User Interface Design

User interface (UI) is a part of Human Computer Interaction (HCI), it’s a visual part of computer

application which a user interacts with a computer or a software.

In platform we focus to design UI easy to access all component and understanding by user.

43

4.2.1 Interface Flow

4.2.1.1 User interface flow

1. Guest user interface flow

Figure 4-10: Guest user interface flow

Figure (4-10) shows navigation structure to give an overview of linking and transfers between

internal platform webpages.

44

2. User interface flow

Figure 4-11: User interface flow


transfers between internal platform webpages after user sign in.

45

3. Admin interface flow

Figure 4-12: Admin Interface Flow


admin webpages.

4.2.2 User interface

1. Homepage

User can explore the data to gain insights from the data visualizations and analysis. The user can

gain insights in different levels and scales and can view the data geospatially. Information about

time-bounded events, event themes, prizes and the number of participants for each theme all could

be explored through visualization. In addition, to the seamless user experience, the platform will

provide data visualizations in different patterns to provide a better understanding to the users while

navigating through the different datasets through the portal. Different patterns of visualizations will

be used in order to support the compatibility of the datasets: tree map, line chart, bar chart, network,

geographical, heatmap etc. Also, components that allow the users to interact with the visualizations

will be provided e.g. filters, compare, sort etc. The sections will always start with a general view

and spark lines to give an overview of the dataset before diving into the visualizations. It will ensure

a unified user experience across the different pages and sections. The home page provides different

views and access depending on the type of users. As shown in figure (4-13).

46

Figure 4-13: Landing page for the platform

2. Explore events information

This page (إكتشف الفعاليات) give user many features to trigger the sense of exploration for the events

information, as shown in figure (4-14).

Figure 4-14: Explore events page

47

1. View historical and upcoming events on the map by moving the slider to right or left.

2. Select specific pin to see more details about event information, as shown in figure (4-15).

Figure 4-7: Search by specific word

Figure 4-15: Select specific pin

3. Accordion help user to filtering the events based on event theme, as shown in figure (4-16).

Figure 4-16: Filtering time-bounded events

48

4. Add event button ( إضافة فعالية جديدة ) allow user add new event if user select this button platform

will move to another page to insert data about event, as shown in figure (4-17).

Figure 4-17: Form to add event information

49

In this page we have three scenarios:

1. User insert the information and select (إرسال) platform will display pop-up message, as

shown in Figure 4-31 (page 57)

2. User doesn’t insert one of the required field (اسم الفعالية,البريد اإللكتروني,الموقع اإللكتروني) platform

will display pop-up message, as shown in Figure 4-30. (page 57)

3. User press (إلغاء) platform move user to previous page.

3. Statistical dynamic charts visualization webpage

To navigation through the platform the users can choose between exploring or interacting with the

different components and visualization charts. This will provide different routes for the user to

reach the information they are looking for depending on the preference and their navigation

behavior. When users identify the piece of information they are interested in, they will be directed

to the visualization page. The page serves as a story consisting of different informational

components and data visualization that will help users make sense out the datasets. This page

see statistic, analysis and visualization about time-bounded events depend on (إكتشف اإلحصائيات)

different dataset (Figure 4-18).

Figure 4-18: Statistical dynamic charts visualization webpage

50

Depending on this page, we have another sub-webpages:

.Figure (4-19) (المحاور المتداولة للفعاليات في دول الشرق األوسط وشمال أفريقيا) .1

.Figure (4-20) (محور الفعالية والجوائز المطروحة) .2

3. ( مختلف المحاورعدد المشاركين في ) Figure (4-21).

.Figure (4-22) (الفعاليات والرعاة لهذا الفعالية) .4

Figure 4-19: Visualization chart depending on them on each country in the MENA

Figure 4-20: Visualization chart depending on events theme and prize in the MENA

51

Figure 4-21: Visualization chart depending on events theme and date in the MENA

Figure 4-22: Visualization chart depending on sponsors of events and theme in the MENA

52

4. About us page

In this page you will find a brief paragraph about Sanea’a platform and objective of this

platform, as shown in figure (4-23).

Figure 4-23: About us page

5. Frequently asked questions (األسئلة الشائعة )

This page display a listed of all expected questions and answers , as shown in figure (4-24).

53

Figure: 4-24: Frequently asked questions page

All features and functionality above user can use it as guest user - without sign up - but if the user

want to edit entry events information he/she should sign up before. User can sign in/sign up from

header of platform, as shown in figure (4-25).

54

6. Registration

Figure 4-25: platform header

If user select sign up(تسجيل) platform open a pop-up window, as shown in figure (4-26).

Figure 4-26: Pop-up window to sign up

If user have account can select sign in (تسجيل دخول), the platform will open a pop-up window, as

shown in figure (4-27)

Figure 4-27: Pop-up window to sign in

55

7. User page

This page contains all events information inserted by user.

Figure:4-28: User page

If user select (تعديل) platform will display a form to edit event information, as shown in figure (4-

17) on (page 49).

Finally, all platform pages have:

1. Header contain six navigations to link all internal platform webpages together and sign in and

sign up.

2. Footer contain social media accounts and copyright.

56

4.2.3 Admin interface

Control panel of administration page. This page allow admin to login by using ID and password.

Figure 4-29: Admin events page

This page display previous events, admin can edit, delete or see more details about each event,

figure (4-29).

57

4.2.4 Platform message

1. Platform will display this pop-up message if user submit an empty

required field.

2. Platform will display this message if user add new event.

3. Platform will display this message if user enter wrong email or password.

4. Platform will display this message if user try to sign up by email used

previously by another user.

5. Platform will display this message if user change password successfully.

6. Platform will display this message if user edit event information.

Figure 4-30: Pop-up message of empty field

Figure 4-31: Pop-up message of

add new event

Figure 4-32: Pop-up

message of wrong enters.

Figure 4-33: Pop-up message

Email used previously

Figure 4-34: Pop-up message of

change password successfully

Figure 4-35: Pop-up message of edit event

58

7. Notification by email after admin verify event information and accept it.

Figure 4-36: Notification by email for accepted event

8. Entry events information is rejected by admin

Figure 4-37: Notification by email for rejected event

60

Chapter 5: Implementation

5.1 Introduction

The connected intelligence platform Sanea’a that we are developing is built with the standard software

lifecycle. First, identifying the problem, determining the requirements, analyzing the system, designing the

system, implementing the system and finally testing and evaluating the system.

5.2 Implementation Requirements

5.2.1 Hardware requirements

1. Personal computer: with sufficient processor speed and hard drive capacity for installing and

developing the platform.

o Operating system Windows 7, 10 ( 32 / 64 ) bit).

o 64 bit CPU , with VT-x or AMD-V capability.

o 400 MB disk space.

o 2GB RAM.

2. Internet connection.

3. Smart phone.

5.2.2 Software requirements

1. Global host: we used the Bluehost for hosting our website and domain, It provides many features

and advantages :

o Security: With CloudFlare, Bluehost provides enhanced security features. CloudFlare is

suitable for webmasters that require SSL to make sure better security against DDOS

attacks on their site.

o Customer Support: Every website admin would like to get support from the hosting

provider without any delays. It is here that Bluehost proves more advantageous than other

hosting providers.

o Performance – Speed And Uptime: With Bluehsot’s claims of 99.99% uptime backed

by similar reviews of site owners who have used their hosting plans, this service provider

appears to have delivered the most important feature effectively.

o Control Panel: It provides a very easy to use control panel that is developed as per

industry standards. The intuitive UI assists users manage websites all alone very easily. It

61

is possible to manage emails, domains, databases and install vital software like Joomla and

WordPress, from the control panel itself.

2. cPanel: is a UNIX web-based control panel that offers a control and access tools to manage and

monitor our website effortlessly. It provides many features for managing our website include file

management, Domain management database administrator, email and software configurations,

etc.

3. GitHub: is a code hosting platform for version control and collaboration.

4. phpMyAdmin: for handling the administration of MySQL over the Web. It supports a wide range

of operations on MySQL. Frequently used operations (managing databases, tables, columns,

relations, indexes, users, permissions, etc) can be performed via the user interface, or we can

directly execute any SQL statement.

5. CRUD application: used to manipulate data in the database.

6. Text Editors: for web development, We have used different code editors such as Notepad++ and

Atom.

7. Bootstrap: framework for developing responsive, mobile-first websites.

8. Web languages: for the implementation of the website we used the web development languages

such as

o HTML: Hyper Text Markup Language (HTML) is a computer language which developed

to create a website. Then, the website can be viewed by any user connected to the Internet.

Hyper means that you can browse any page on the Internet whenever you want by clicking

on links. Markup is what HTML tags do to the text inside them. They mark it as a certain

type of text. Its Developed to meet the demands and requirements of the growing Internet

o PHP: Hypertext Preprocessor is an open source scripting language that is widely used for

web development and can be embedded into HTML. PHP scripts are executed on the

server. It is powerful enough to be at the core of the biggest blogging system on the web.

It is deep enough to run the largest social network.

o JAVASCRIPT: JavaScript is a programming language used to make interactive web

pages. It runs on your visitor's computer and doesn't require constant downloads from your

website.

https://www.mysql.com/

62

o CSS: stands for Cascading Style Sheets its is used to define styles for your web pages,

including the design, layout and variations in display for different devices and screen sizes.

It can control the layout of multiple web pages all at once.

o ASP.NET: is an open source web framework for building modern web apps and services

with .NET ASP.NET creates websites based on HTML, CSS and JavaScript that are

simple, fast and can scale to millions of users.

9. JavaScript Object Notation (JSON): For exchanging data between a browser and a server.

10. Java script libraries:

o D3.js: library for producing dynamic, interactive data visualizations in web browsers. It

creates an interactive graphics combining the data from a database system with HTML,

SVG, and CSS.

o Leaflet: for mobile-friendly interactive maps.

o jQuery: is used to navigate a document, select DOM elements, create animations,

handle events.

o Google maps API: including the google maps in the website is by adding a script to refer

to the Google Maps API with a callback to the myMap function. The functionality of the

map is provided by a JavaScript library located at Google.

11. Tools for graphics:

o Creately.com: online website used to create flowcharts, organization charts, mind maps,

project charts, and other visuals.

o Fluidui.com: online website used to create web prototypes.

o Gantt team: online website used to create Gantt chart.

5.3 Implementation Phases

In this section we will mention the details of the implementation phase in our project.

5.3.1 First phase: Collecting the data

The intelligent visual analytics platform that we are developing is designed in six main phases. The

first phase is the data collection, where the platform’s contents are crowdsourced from the

community. This crowdsourcing approach was considered to facilitate a sustainable dynamic data

set and to encourage users to contribute towards maintaining the accuracy and quality of data

submitted through the platform's frontend.

https://en.wikipedia.org/wiki/Data_visualization

https://en.wikipedia.org/wiki/Web_browser

https://en.wikipedia.org/wiki/Document_Object_Model

https://en.wikipedia.org/wiki/Animation

https://en.wikipedia.org/wiki/Event_(computing)

63

Figure 5-1: Content crowdsourcing in the Sanea’a platform

The content crowdsourcing architecture of Sanea’a platform, depicted in figure (5-1), is the bridge

between the often abstract goals of a crowdsourcing application and the final concrete resulting web

platform. While the path from abstract to concrete can be complex, the block diagram in figure (5-1)

shows the set of structures needed to reason about the hackathon platform (i.e. software elements of

location data and event-oriented data, the relations among them and the properties of both) and the

administrator should verify the contents that are going to be embedded for visualization by checking

the event’s website URL and institutional email.

5.3.2 Second phase: Building the database

In this phase, we have developed CRUD application stands for Create/Read/Update/Delete. It is

user-interface conventions that allow viewing, searching and modifying data through computer-

based forms and reports. It enables user to create/read/update/delete data and directly stored in

MySQL Database. PHP will be the server-side language that manipulates MySQL Database tables

to give front-end users power to perform CRUD actions. Those same data can be modified by

taking the data from a service and changing the setting properties before sending the data back to

the service for an update. After creating database tables to store user data entry. We have been built

the CRUD operations to enable users and admin to directly interact with database by useful,

friendly and responsive interface.

64

CRUD Operation:

Users could be admin or consumer and the

interface will adapt to their needs respectively.

The administrator has full access to perform all

CRUD operations (create , read , update , delete

, visualize) while the consumer can perform tree

of them (create , read , update),as shown in

figure (5-2).

Figure 5-2: Platform users accessibility

1. Create — This is called up by pressing the create “ اضافة فعالية جديدة” button and enables user

to enter event information. The script makes sure all of the entered data such as the address,

date and the detailed information about the event, as shown in the form figure (5-4) are

recorded, that error messages appear when the wrong entry is given, and that the data is

forwarded to a declared database. The new entry is assigned a unique id, which can be used

to access this information later.

Figure 5-3: Add new event information

65

At the data collection phase, the users can contribute to scaling up the content of the hackathon events

by adding events information such as the address, date and the detailed information about the event,

as shown in the form figure (5-4).

Figure 5-4: Add new event information form

2. Read — This is called up by pressing the view “ button. Its would consist of ” عرض البيانات

a function which would be called to view the entry events information. This function call

would not alter the events information in the database - it would simply retrieve the data

and display the results.

66

Figure 5-5: User view

Figure 5-12: View event information

Figure 5-6: View event information

3. Update — This is called up by pressing update " البيانات تعديل " button to enable the users and

the admin for modify entry events information, as shown in figure (5-7) . The application

67

calling the function would supply the new values for address, date and the detailed

information about the event. After the function call, the corresponding entry in the database

would contain the new fields supplied.

Figure 5-7: Update event information

Application will display this message after

successfully update event information.

Figure 5-8: Update notification massage

• Delete — This is called up by pressing the delete " البيانات حذف " button that enable administration

to delete specific event information, as shown in figure (5-9). The script makes sure that all

information of the selected event has been deleted from the database.

68

Figure 5-9: Control panel of administration system

Application will display this message after successfully delete event information .

Figure 5-10: Delete notification massage

The administrator should verify the contents that are going to be embedded for visualization by

checking the event’s website URL and institutional email.

4. Visualize — The administrator will click the visualize data “تمثيل البيانات” button after

verifying the event. then, the content of the database will be transformed into a data file like

JSON file, TSV and CSV files depending on file type used for each chart. Every chart and

graph embedded a data file created by a different query, as shown in the figure (5-11).

69

Figure 5-11: Query of visualize button

Case study:

a. Allow user to add event information for Hajj Hackathon.

70

Figure 5-12: User add new event information

b. Entry information will have stored directly in the database.

Figure 5-13: Store event information in the database tables

71

c. Entry event information will have display directly in the user dashboard and the user can

edit and review inserted contents.

Figure 5-14: User dashboard

Figure 5-15: Review event information

d. After the administration verify the contents by checking event’s URL and institutional

email. Event information will be directly visualizing into map by clicking visualize

button form admin control panel.

72

Figure 5-16: Visualize event information

5.3.3 Third phase: Designing the interfaces

1. Homepage webpage

Figure (5-17) shows the main interface when user open Saneaa.com URL. It contains

global navigation bar for the rest of platform webpages. Additionally, user can easily

login to his/her account form home page by click login button.

Figure 5-17: Homepage interface

73

2. About Sanea’a webpage

Figure (5-18) shows a brief description of the platform, full project report and

information about each member in our project.

Figure 5-18: About us webpage

3. Contact us webpage

Figure (5-19) shows contact us page that allow users to communicate with us.

74

Figure 5-19: Contact us webpage

4. FAQ webpage

Figure (5-20) shows frequently asked questions about our website.

Figure 5-20: FAQ webpage

75

5.3.4 Fourth phase: Building functionality

1. Registration

Registration and log in process contain many functionalities such as:

Figure 5-21: Registration webpage

❖ Errors messages for:

• Exist usernames.

• Short username if it's less than 3 characters.

• short password if it's less than 3 characters.

• Created password and the confirming one do not match.

• A password must be entered

• Username must be entered

❖ Validate email characters, must contain @character.

❖ After completing the registrations, users should activate their accounts, they will be receiving an

email that contains a link for the activation figures(5-22).

❖ Once the data has been verified the users record is updated, the column active is changed from

the token to hold 'Yes' to say they are active, this will only happen if the id and token passed

match what's stored against that user.

76

❖ The link contains a token generated for each user when registers.

❖ The password provided cannot be stored as it is, that would be a huge security concern instead it's

hashed by passing it to the user object inside a password_hash call this returns a hashed password

which can then be stored in the database, this way no one can know what the password was apart

from the user who entered it.

Figure 5-22: Activation process

1. Login:

Figure 5-23: Login webpage

77

❖ Errors messages for:

• Check if an existent account.

• Empty email and password.

• Short username if it's less than 3 characters.

• short password if it's less than 3 characters.

5. Reset the password:

Figure 5-24: Reset the password webpage

78

➢ Every system need the ability to reset a password in case it's forgotten, how this will work is a user

enters their email address, a check is made to make sure its belongs to a user.

➢ Next a token is created and saved to the users record, an email is sent to them containing a link to

when clicked the token from the link is verified, if it passed the user is provided with a form to enter

their new password, its then saved to the database.

6. Contact us function:

Blue host provides a webmail, or web-based email, is portable and accessible anywhere that has an internet

connection because the application that sends and reads our mail is accessed on a website from the browser.

A few advantages of using webmail to access platform email are:

• Simplicity. No setup required.

• Portable and accessible anywhere.

• Great if you can’t install software on your work or school computer.

• Save space on your computer; email is stored online.

• Accessible offline.

• Immediate notifications to your device.

• Manage multiple email addresses in one interface.

• Easily back up your mail and store it on your computer.

Figure 5-25: Webmail control panel

79

5.3.5 Fifth phase: Implementing visual analytics platform

The forth phase is launching the interactive visualizations to the general public (historical data)

to enable decision makers to explore the data sets and interact with the visual analytics, so they

can grasp difficult concepts aligned with the insights that they are looking for and to identify

new patterns. With interactive visualization, they can take the concept a step further by using

technology to drill down into charts and graphs for more details, interactively changing what

data they see and how it’s processed.

5.3.5.1 Process of visualization

The approach of designing well disciplined visualization the process can be divided into

six different steps i.e. mapping, selection, presentation, interactivity, usability, and

evaluation, which identifies major activities involving visualization, to aim precise and

error less design [24].

The following subsection explains briefly these six activities:

1. First step of visualization process is known is Mapping. Mapping means how to visualize

information or how to encode information into visual form. In mapping data or information

transform into graphical form under assumption of visual features. Good mapping produce

accurate visual representation, and can achieve when there is accurate relationship between

data objects and visual objects to be describe.

2. Second step of visualization process is called Selection. Selection means to select data

among those data which is available according to the given task or job. Selection of data

is directly dependent on the aim to get through visual graphics or pictorial representation.

This task in the process is the most important task, because the selection of wrong data

misleads the user to take crucial decisions and suffer through huge loss (financial, time.

etc), should avoid the inclusion of unnecessary data.

3. Third phase of the process is Presentation. In visualization perspective presentation means

how to manage, organize information in the available space on the screen effectively. After

intuitive mapping, clear and precise selection of data items it is really important to present

it in more meaningful and understandable form.

80

4. Forth step of visualization process is called Interactivity. Interactivity means what are the

provided facilities to organize, explore, and rearrange the visualization. User friendly

interactivity enables a user to best explore, understand, and interpret the data or

information, which improve their exploration capabilities.

5. Human factors are fifth visualization feature to be considered. Human factor involve to

two broad categories, usability, and accessibility factors. The visualization is easy to use

for the end user. /Visual perception knowledge and cognitive aspects make it very easy to

design an effective visualization. These factors are the common practice of Human

Computer Interaction.

6. After creating usable visualization interface, the last step is to evaluate the created visual

form. Evaluation is equally important, to find out whether the visualization method has

effectiveness or not, the goal is achieved or not.

In the Sanea’a platform, the visualization has two modes of operation: filter/search mode and statistical

mode. The first mode allows the users to explore spatially by zooming in and out of regions and countries,

and temporally by exploring the data sets across a timeline using a lever/slider to move from one-time

frame to another. Moreover, the data can be filtered across time by location and theme (e.g. health,

humanitarian aid, sport). Filters are applied to explore subsets of datasets, as shown in the scenario

captured in figure (5-26).

Figures 5-26: Spatial Visualization of Time-Bounded Events in the Arab World

81

The second mode is the Data Visualization and Exploration mode. In this mode the user can explore the

data to gain insights from the data visualizations and analysis. We had implemented more than 5 dynamic

interactive data-driven analytics charts for decision making by addressing the main components of time

bounded events (i.e. date, time, technology used, themes, and prizes, gender and number of participants).

The user can gain insights in different levels and scales and view the data geospatially. All categories

could be explored through this mode.

Figures 5-27: visual analytics webpage

Figure (5-28) is dynamic visualization map shows the rate of hackathon events along the MENA region.

It has interactive linking between 3 charts geo-graphic map for MENA region and vertical bar for statistical

information about number of events in each type for the selected country and horizontal bar for technology

used. Information can be mapped differently to different views to reveal or expose different perspectives

(viewpoint) or different portions of the information. On the bases of selection criteria the user can select

entities in one structure, which then shows the distribution the selected entities in another structure.

Additionally, It has 4 dimensions to discover. The technology used either IoT, Blockchain, Roberts or

other, the type of the events either in- person or virtual and the top event’s organizers and sponsors. Users

can toggle on or off over the map to filter the event’s type by clicking on the colored circles and the

technology used name to filter the technologies. Moreover, users can filter by selecting on the specified

country.

82

Figure 5-28: Interactive d3 map visualization for event trends analysis.

Case study-1 : a. when the user selected specific type of event " بعد عن ", the linking charts will interact

with user needs all at once by filtering the b. rate of technology used in the selected type, c. display

more statistical information about the total number of the events, event’s organizers and sponsors

within selected type, as shown in figure (5-29).

Case study-2: a. when the user selected specific country "Oman", the linking charts will interact with

user needs all at once by filtering the b. rate of technology used in the selected country, c. more

statistical information about the total number of the events, event’s organizers and sponsors within

selected country. d. Furthermore, the user can compare between two countries “Oman and Saudi

Arabia” to discover analysis statistical information, as shown in figure (5-30).

83

Figure 5-29 : Case study -1

Figure 5-30: Case study - 2

a

b

c

a

b

c d

84

Figure (5-31) shows a sample of the statistical mode in which users can toggle on or off the categories and

the dynamic visualization shows the amount of number of participants refreshes on-screen in the platform

to provide instantaneous data tailored to the needs of stakeholders. Additionally, it helps to discover the

community interest in each category over period of time and which category that needs to be more

expanded.

Figures 5-31: Dynamic bar charts that facilitate data manipulation to generate bespoke charts using d3 libraries.

Figures 5-32: Determine specific category

85

The following figure (5-33) show Tree map is also known as tree mapping. In information visualization,

tree mapping is a technique is use to display hierarchical data in the form of nested or layered rectangles.

It is used to visualize hierarchical structures. And facilitate users to compare nodes and sub nodes at

various depth and help to recognize patterns and expected results.

To help the stakeholders understand the amount of the events such hackathons visually and relatively we

implemented the tree map below figure (5-33). It contains 4 zoomable levels, the scaled rectangles

according to the rate of events. The first level colors and shades are definite the regions in the Middle East

and North Africa and. The second level for the cities. Next level shows the amount of events themes of

the clicked city. Finally, the amount of the event that support which gender in this theme.

Users can see straight away a different relationship to the numbers. They can literally see them. But more

importantly, it shows them patterns and connections between numbers that would otherwise be scattered

across multiple websites and social medias.

Figure 5-33: Tree map visualization chart

86

Figure (5-34) is a visualization chart that can bring insights for the sponsors and the organizers to find

patterns and connections for all the sponsors of the events in the Middle East and North Africa region.

This kind of diagram is called a bubble chart. the bubbles size corresponds to sponsors rate as regards to

the collected data. And you can hover over the sponsor's bubbles to see the most relevant events categories

they sponsored. Furthermore, it helps event organizer to discover the appropriate sponsors for the

organized event.

Figure 5-34: Bubble chart visualization for events’ sponsors.

The interactive radial chart in figure (5-35) represents the number of the events in each city in the Middle

East and North Africa region, while you can hover the mouse over the radials to explore the number of the

events in each city. Additionally, it helps to discover the community interest for each city in participation

in time-bounded events .

87

Figure 5-35: Radial chart visualization for trend event among cities.

Maps are based on our physical world. We create maps using abstract shapes and colors to reveal

geographic patterns and tell stories. At Sanea’a, we leverage data visualization to better understand the

growth of hackathons as shown in figure (5-36), is dynamic visualization map to visualize the growth of

hackathon phenomenon between 2014 and 2018 in the Middle East and North Africa region. It aims to

provide you with a clear view of the extent of changes that can occur in just four years and expand the

thinking about the impact of this phenomenon on over the coming years.

The users are interested in the abstract data about which they have desire to understand, the user don’t

have sufficient pre-knowledge about that data. Hence for the exploration, analysis, and for the

representation of data or information visualization interactive techniques are exceptionally momentous.

The challenge in information visualization is to provide data visually in order to the user effectively

understand the information for which the user is looking for, for this purpose provide interaction

mechanism that make is possible to manipulate visualization effectively and effortlessly as probable.

88

Figure 5-36: Growth of hackathon phenomenon chart visualization among MENA

Figure 5-37: Growth of hackathon phenomenon chart visualization between 2014-2018

89

Users can interact with interfaces or visualization chart in different ways:

• Progress bar “story telling”: In this chart, we focus to connect the data with words and then through a

story-like form, it would take the users through the analysis process. It gives a completely different picture

of the data and even addresses the different concerns of different users, helping users draw meaningful

conclusions.

Figure 5-38: Progress bar

• Zoom in and Zoom out or Zooming: Sometimes user interfaces need to bring it closer in order to view

of contents clear or in details. The content display of user interface must not be each user’s choice, so

required fair scaling techniques which enable user to make it according to their wish. User toggle on

or off over the map to view more statistical details for specified city by hover the mouse over bubbles

on the map or over the bar chart, as shown in figure (5-39).

Figure 5-39: User interaction

90

• Filtering: enable users to dynamically adjust amount of information to display, means to decrease or

increase information quantity that need to display, and focus on information of interest. User can

interactive selection of data entities or subset or part of whole data , that is interest to the user. This is

useful to view detail information about the selected entities, highlight entities that are covered or

hidden, cluster entities that are related and extracting entities that may be use in future [24]. This

technique enable user to quickly adjust query parameters and instantaneously view filtered results in

the visualization in real time, as shown in figure (5-40).

Figure 5-40: Filter dataset according to the user needs

These visual representations of time-bounded events make it easy for users to perceive salient aspects of regional

distribution of events as well as the density of events across time. The visualizations augment the cognitive

reasoning process with perceptual reasoning through color-coded visual representations of these time-bounded

events and support relatively easy perceptual inferences of relationships that are otherwise more difficult to

induce. Visualizing information allow us to see the patterns and connections that matter and then designing that

information to, so it makes more sense, or it tells a story, or allows us to focus only on the information that's

important. Data is the kind of ubiquitous resource that we can shape to provide new innovations and new insights.

5.3.6 Sixth phase: Integrating all the previous parts

The final phase of implementation, integrate physical and logical components of the website.

Additionally, deploying and updating the database on the global host.

92

Chapter 6: Testing

After Sanea’a implementation was completed and its component were integrated, a testing phase was conducted.

The purpose of this test is to evaluate the system’s compliance with specified requirements. In testing phase the

behavior of whole platform is tested as defined by the scope of the development project. platform testing should

investigate both functional and non-functional requirements of the test, which in turn will help to identify errors

position and vulnerabilities areas.

6.1 Test Plan

Test plan is a very important step. It ensures that we conform to a specific path, on the course of which we

are going to develop the software. Test planning determines the list tasks and milestones which will be

used to track the progress of process. Where a successful test is a test that makes the system perform

incorrectly and so exposes a defect in the system, here we create main test plan to test our system by

different strategy.

Test scope: Testing will cover both of the database component and the platform features, functionality

and performance. We will test the system using the following testing strategies as shown in the table below

(unit, functional and acceptance testing).

Test version: The platform tested several times during the implementation, but this consider the first

formal documented testing version.

6.1.1 Test objectives

• Find as many errors as possible.

• Find many bugs that a user may face in the future.

• Makes you feel confident that the platform will work perfectly as desired.

• Help in finding how the requirement does match the implementation.

• Having a details description of sent information and the expected outcome.

• Discovers problems that may show up to users while using the website.

• Setting set of acceptance for the built website.

• Improve the quality of platform.

93

6.1.2 Platform testing life cycle

During designing and development Sanea’a platform we

followed Agile methodology also in testing phase we used

Agile Testing is a software testing practice that follows the

principles of agile software development.

Agile Testing involves all members of the project team, with

special expertise contributed by testers. Testing is not a

separate phase and is interwoven with all the development

phases such as requirements, design, coding and test case

generation. Testing takes place simultaneously through the Figure 6-1: Agile testing methodology

Development Life Cycle (Figure:6-1) show the life cycle of Agile testing [18].

6.1.3 Platform testing strategy

The figure declare testing strategy for Sanea’a platform the first

one is unit testing we used black box for testing the integration

between the interface and the database ,the second plan test is the

functional of platform including the database and the interface

separately, the third one is testing Graphical User Interface testing

involves checking the screens with the controls like menus,

buttons, icons, and all types of bars - toolbar, menu bar, dialog

boxes and windows, etc. Last one is the acceptance testing which is a

level of software testing where a system is tested for acceptability.

6.1.4 Black box testing plan

Black box testing involves testing the integration of the database with the interfaces.

Verifying outgoing data

(data comes from database to

represent at the interface )

Verifying incoming data

(data that entered through that interface

and stored at the database)

Task Duration Task Duration

Apply the process of data

retrieval cases from the

database in more than

one request

3 days

Apply the process of

enter the data retrieval

from the interface to the

database in more than

one request

3 days

Table 6 - 1: Black box testing plan

Testing strategy

Unit

Testing

Functional

Testing

GUI

Testing

Acceptance

Testing

Figure 6-2: Platform testing strategy

94

6.1.5 Main test plan

Database Testing

Testing strategy Feature to be tested Test activities Duration

Unit

1. Individual tables

2. Constraint and independence

between tables

3. Attribute size

4. Operating system

compatibility

5. Database Max size

6. Procedures validation

7. Type validation

Checking the validity of

all database components

by applying different test

case

2 Day

Acceptance

1. Accessibility

2. Navigation

3. Appearance

4. Operating system

compatibility

Test the interface and

database performance to

reach acceptance results of

ease of use

4 Days

Platform Testing

Testing strategy Feature to be tested Test activities Duration

Functional

All platform features:

1. Registration

2. Export dataset from different

charts.

3. Dynamic data visualizations

4. Control panel system

administration

5. User dashboard for review and

update of data entry

6. Direct contact with the Sanea’a

team

7. Log out

Checking the validity

of all platform functions

by applying different test

cases

3 Days

Non-functional

“Graphical User

Interface”

1. Responsive interfaces for

different screens

2. Navigation between internal

webpages

3. Appearance

4. Consistency of webpages

content

5. Usability

Test platform interfaces to

reach acceptance results of

ease of use

2 Days

Table 6-2 : Main test plan

95

6.2 Test Cases

6.2.1 Black box test cases

No Test cases Pass/

Fail

Type of

raised

error

Attempted solutions

1. Open the platform Pass

None

Load platform correctly

2. Retrieve events information from database Pass Retrieve event data correctly

3. Retrieve user data from database Pass Retrieve user data succeed

4. Retrieve admin data from database Pass Retrieve admin data succeed

5. Control panel for the system administration Pass Successful

6. Add new event information correctly

Pass Add new information in

database succeed

7. Login Pass Logged in

8. Logout Pass Logged out

9. Sign in Pass Signed in

Table 6-3: Black box test cases

6.2.2 Database test cases

The database is a software subsystem which provides an efficient way to store user data and allows

requesting it via a structured query. Not only does it stores the critical business information but also

functions as the backbone of an entire application. Hence, database testing is essential for software testers

to ensure the system is working correctly. Database testing is a means to validate the data stored in the

database, objects controlling data, and the functionality wrapped around it. The databases use objects to

manage data like tables for storage, views for representation, and functions/triggers for manipulation.

96

No Test cases Pass/ Fail

Type of

raised

error

Attempted solutions

1.

Database

schema

Table names Pass

None

All table name set correctly

2. Field names Pass All field name set correctly

3. Data types Pass

Length and data type of keys

and indexes are maintained

as per requirement.

4. Size of each attribute Pass All size is suitable field

name.

5. Primary keys Pass All primary keys were set

correctly.

6. Foreign keys Pass

All foreign keys between

tables set correctly and

completely indexed for easy

retrieval and search.

7.

Data

Mapping

Check whether the

fields in the UI/front-

end forms are mapped

consistently with the

corresponding fields in

the database tables.

Pass None

All of the entered data are

stored in the database, that

error messages appear when

the wrong entry is given, and

that the data is forwarded to

a declared database. The

new entry is assigned a

unique id, which can be used

to access this information

later.

8.

Check if the a

corresponding CRUD

(Create, Retrieve,

Update and Delete) is

Pass None

platform users can perform

their accessibility correctly

and efficiently.

97

invoked and whether

the invoked action in

itself is successful or

not.

9. Data

integrity

This means that

following any of the

CRUD operations, the

updated and most

recent values/status of

shared data should

appear on all the forms

and screens.

Pass None

Updated values appears

consistently the same in

different screen.

10.

Trigger

Updates the data

correctly once they

have been executed

Pass

None All CRUD operations work

in correct manner.

11.

Validation of the

required

Update/Insert/Delete

triggers functionality

in the realm of the

application under test.

Pass

12. Stored

Procedures

Perform an operation

from the front end (UI)

of the application and

check for the execution

of the stored procedure

and its results.

Pass None

All retrieve data from

database tables able to

upload data and retrieve

easily in case of requesting.

13. Field

constraints

Perform a front-end

operation which

exercises the database

object condition.

Pass None

The results are correct after

validating the constraints

with SQL queries.

14.

Accessibility

Check the

authorization of the

required user to

perform only those

levels of actions which

are required by the

application.

Pass None

All the users have required

levels of access on the

specified database as

required by the business

specifications.

98

Table 6-4: Database test cases

6.2.3 Functional test cases

6.2.3.1 User test cases

• Test case 1: Register

No. Test Cases

Pass/

Fail

Type of

raised error Attempted Solution

1. Username field empty. Pass

None

Function work correctly,

user can’t create account if

missing one of these fields.

2. Email field empty. Pass

3. Password field empty. Pass

4. Re-password field empty. Pass

5. The email has already existed Pass

Success, platform check if

user insert a registered

email before.

6. The username has already existed Pass Platform check if user insert

a username used before.

7. Password not match Pass


platform check if user insert

password and re-password,

but they didn't match.

8. Validate entry email Pass Succus

9. Validate entry password Pass Succus

10. Password encryption Pass Encryption the password.

11. Send activation link by email Pass Notification by email to the

user for active his account.

Table 6-5: User registration test cases

• Test Case 2: Login

This test case illustrates different scenarios the user may go through when he inserts his information

to login to the platform

15. Data secured from

unauthorized access Pass None

99

Precondition: users should already have an account.

No. Test Case Pass/ Fail

Type of

raised error Attempted solutions

1. Email and password are correct Pass

None

Platform check if user insert

his email and password in

each field correctly.

2. The password or email are not correct Pass

Platform check if user insert

his email or password are not

correctly.

3. Password field empty Pass Platform check if user left

the password field.

4. Email field empty Pass Platform check if user left

the email field.

Table 6-6: User login test cases

• Test Case 3: Forgot password

This test case illustrates different scenarios the user may go through when forget his password.

No. Test Case

Pass/

Fail

Type of


1. Email field empty Pass

None


platform check if user left

the email field.

2. Validate entry email Pass Platform check if user insert

correct email for his account.

3. Send reset password link by email Pass Notification by email to the

user to reset his password

Table 6-7: User forget password test cases

• Test Case 4: Contact us test cases

No. Test Case Pass/ Fail Type of


1. Validate email address before sending. Pass

Successfully.

2. Email subject should not be blank. Pass Platform check if user left

the email subject field.

100

3. Email sender name should not be blank. Pass

None

Platform check if user left

the sender name field.

4. Receive Email from user in correct

manner. Pass

Message received

successfully.

5. Check that the user can send a message. Pass Message sent successfully.

Table 6-8: Contact us test cases

• Test Case 5: User profile

No

. Test Case Pass/ Fail

Type of


1. Add new event Pass

None

Add new event information

correctly.

2. Update entry events Pass Succus, user can update

entry events information.

3. View entry events Pass

Retrieve entry events

information from database

correctly.

4. Logout Pass Logged out.

Table 6-9: User profile test cases

6.2.3.2 Admin test case

• Test Case 1: Control panel system administration


raised error Attempted solution

1. Login to admin dashboard Pass

Succus, only authorized

users can login

2. Add new events information Pass Add new event information

correctly.

3. Update events information Pass Succus, admin can update

any events information.

4. View events information Pass Succus, admin can review


101

5. Delete events information Pass None Succus, admin can delete


6. Visualize dataset of events information Pass

Succus, admin can visualize

new events information to

the platform.

7. Logout from admin dashboard Pass Logged out

Table 6-10: Control panel system administration test cases

6.2.3.3 Exploration and visualization dataset test cases

• Test Case 1: Spatial and temporal visualization chart



1. Load the chart . Pass

None

Chart work normally as well

quickly.

2. Retrieve event information from

database. Pass Retrieve data correctly.

3. Zoom-in and zoom-out in each MENA

countries and cites. Pass Successful

4. Filter the events information based on

event themes. Pass Filter work correctly

5.

Exploring the data sets across a timeline

using a lever/slider to move from one-

time frame to another.

Pass Slider work correctly

6. Tooltip for each pin Pass Successful

7. Brief description about each event when

user click on the pin Pass

Retrieve event information

from database correctly

8. All chart layers and features connected Pass All layers and features for

each event work normally

9. Data correlation and relationships

among variables. Pass Successful

10. Ease of use for novice Pass

User be able to examine

data and find patterns,

distributions, correlations.

102

11. Data storytelling. Pass

Users be able to select data

elements and filters, and

then highlight and modify

options to change data

perspectives

Table 6-11: Spatial and temporal visualization chart test cases

• Test Case 2: Statistical charts (Tree map, Bar chart , Radiable chart, Doughnut chart , Bubble chart)



1. Load the chart Pass

None


quickly.

2. Retrieve data from JSON file Pass Retrieve data correctly

3. Move to next level in the chart Pass Work correctly

4. Move to previews level in the chart Pass Work correctly

5. Tooltip for each element Pass Tooltip work correctly

6. legend of the chart Pass Successful

7. All chart layers and features connected Pass Successful


among variables. Pass

Successful





10. Data storytelling Pass





perspectives

Table 6-12: Statistical visualization charts test cases

• Test Case 3: Middle East and North Africa map visualization chart



103


None


quickly

2. Retrieve event information from JSON Pass Retrieve data correctly

3. Zoom-in and zoom-out in each MENA

counties and cites. Pass

Successful

4. Tooltip for each pin Pass Tool tip work correctly

5. legend of the chart Pass Successful




among data. Pass

Successful










perspectives

Table 6-13: MENA map visualization chart test cases

• Test Case 4: Integration between three different charts





quickly

2. Retrieve event information from

database and JSON file Pass

Retriever data

3.

Filter the data based on:

1- Selected type of events

2- Selected country

Pass

Successful

4. All three charts work together Pass Work correctly

5. Brief description about organizations

and sponsors in the region Pass

Retrieve data correctly

104

6. Tooltip for each pin Pass

None

Successful

7. Reset the chart Pass Work correctly




among data. Pass

Successful










perspectives

Table 6-14: Integration between three different charts test cases

6.2.4 Non-Functional (Graphical User Interface) test cases

• Test Case 1: Overview



1. All required objects, elements, fields,

buttons, labels and links are available. Pass

None

Successful

2. Page title of each page. Pass Successful

3. URLs of each page. Pass Successful

4. Buttons follow the platform standards

for size and position. Pass Successful

5.

Confirmation messages should be

displayed before performing any update

or delete operation.

Pass Successful

Table 6-15: GUI overview test cases

• Test Case 2: Appearance



105

1. Web page background color

distraction free & correct color Pass

None

Successful

2. Color of the warning messages should

be tested Pass

Successful

3. Hyperlink colors standard according to

platform Pass

Successful

4. Web page background color

distraction free & correct color Pass

Successful

Table 6-16: GUI appearance test cases

• Test Case 3: Consistency of webpages content



1. Content alignment Pass

None

Successful

2. Screen prompts specified in the correct

screen font Pass Successful

3. Spelling and grammar for the content

of platform webpages is correct Pass Successful

4. Terminologies used in platform

webpages are clear to the public user Pass Successful

Table 6-17: GUI consistency of webpages content test cases

• Test Case 4: Navigation between internal webpages



1. Tabs loading time Pass

None

All tabs loaded on time

2. Scroll bar is displayed when required Pass Successful

3. Screens accessible via buttons on this

screen be accessed correctly Pass Successful

4. User can access to home on every

single page Pass Successful

Table 6-18: GUI navigation test cases

• Test Case 5: Usability

106



1. Users find easily what they are looking

for Pass

None

All tabs loaded on time

2. Platform responsive and readable for all

screen resolution Pass Successful

3.

Test for the functionality of all the

controls like buttons, labels, check

boxes, radio buttons, text boxes, etc.

Pass Successful

4. Platform printed without cutting off the

text Pass Successful

Table 6-19: GUI usability test cases

6.3 Test Result

6.3.1 Summary result of black box testing

The results arranged to match the numerical order of the previous cases black box plan, the test result

represent each case after the error fixed.

Verifying outgoing data

(data comes from database to

represent at the interface)

Verifying incoming data

(data that entered through that interface

and stored at the database) All the stored data in the database are retrieved

correctly when its requested, and easily without

any messing up or tampered parts and stored in

the exact field inside the database. And the

validation message shows correctly as expected.

All the entered data across up the interface

normally and stored in the designed field inside

the database with the ability to be retrieved

only by authorized requested. And for

untheorized users the message will be shown

that nothing is retrieved, and the information

entered is wrong.

Case Result

1. The platform URL link open faster and loading operation done successfully without delay

or platform hanging or crash.

2. Retrieve events data correctly.

107

3. All retrieve data from user information table able to upload data and retrieve easily in case

of requesting.

4. All retrieve data from admin information table able to upload data and retrieve easily in

case of requesting.

5. All features of controls for system administrator work correctly.

6. Add events information from user interface to the event table able to upload data and

retrieve easily in case of requesting.

7. Logged in

8. Logged out.

9. Open platform

Table 6-20: Summary result of black box testing

6.3.2 Summary result of main plan testing

The results arranged to match the numerical order of the previous main plan test, the test result represent

each test strategy after the error fixed.

Test strategy Result

Unit

All database components set correctly including : Tables, field names, data

type, size of each attribute.

Database MAXSIZE is suitable to project.

Platform in the back-end (server-side) work correctly.

Functional

Full registration process is valid.

Log in as admin works accurate and correctly.

Log in as end-user works accurate and correctly.

Manage as admin works accurate and correctly.

Manage as end-user works accurate and correctly.

108

Non-Functional

Response time: when users request a functional requirements, the platform

should respond rapidly.

Navigation: the platform help the user to navigate easily through the

webpages and guide to navigate easily.

Appearance: Looking pleasant or even attractive, often promoting

confidence in its use.

Consistency: platform content free from mistake and having the values that

the user expects.

Usability: Platform is easy for the user to become familiar with, and achieve

their objective

Table 6-21: Summary result of main plan testing

The result of testing after applying important testing such as unit testing, system testing and acceptance

testing. Sanea’a platform has become free of errors preforming all the functional and non-functional

requirements and be able to retrieve data in an efficient way on a friendly user interfaces application and

allowing multiple approved users to use the platform at the same time working correctly and available at

any time.

6.4 Usability and Social Impact

6.4.1 Social Impact

As described above in how our platform harnessing the massive data of time-bounded events and

facilitates obtaining the historical information of such an event by soliciting contributions from

society in an effortless way.

Themes from technology-centric and social-centric hackathons are often aligned with global trends.

Data-driven analytics from our Sanea’a platform suggest that time-bounded events in the MENA

region contribute beyond producing digital artifacts, with building capacity and technical expertise,

building community and expanding social networks, accelerating the technology innovation lifecycle

and exposing participants to different modes of design thinking, and shaping cross-domain identities

for the human capital in these regions.

109

The motivation to participates in hackathons is an important element in the innovation eco-system.

Therefore, the analytical visualization in the platform motivate people to participate in hackathons,

leading to connect with like-minded people in the technology sector and seek opportunities for

meaningful contributions to digital innovation. Analytics-driven recommendations derived from

these insights can help the stakeholders including analysts, researchers and decision makers. Also

simplified for the organizer to plan for the next event.

Users are navigating through a dense information, coming across a beautiful graphic, Charts and

graphs have evolved into not just tools to detect patterns but also as vehicles to communicate ideas.

In our MENA Hackathon platform, data graphics are used to enhance exploratory search scenarios

with a different lens on the same dataset, whereas other times the graphics tell the entire story by

navigating through the graphic landscapes.

6.4.2 Usability and user acceptance

Sanea’a team attempted to address all the components of the events and achieved the requirements

enhanced from UX design done earlier (personas and behavioral architypes) to meet the user’s

satisfaction.

This table below investigates the results of an acceptance of 4 stakeholders: technology expert, a

graphic designer, hackathon organizer and business incubator measuring both perceived aesthetic as

well as the efficiency and effectiveness of retrieval tasks across a set of more than 5 different data

visualization techniques. The data visualizations represent a different component of hackathons, which

has been normalized in terms of color, typography and layout balance. This evaluation test measured

parameters such as Accessibility, Navigation, Accuracy, Response Time and Appearance.

110

User Evaluation

Users

Accessibility Navigation Response Time Appearance

Good Medium Low Good Medium Low Good Medium Low Good Medium Low Good Medium Low

User A √ √ √ √ √

User B √ √ √ √ √

User C √ √ √ √ √

User D √ √ √ √ √

Table 6-22: User evaluation

The website is freely accessible over the world wide web network it can be reached in any time through

a laptop, phone or tablet, friendly to use, users can navigate through the site very easily. Sanea’a team

and some volunteers contribute to insert a massive data into the platform more than 100 records, the

content are reliable according to the enhanced concept where the data were openly editable but now

the content verified manually by the admins of the website once record successfully verified it directly

goes for visualization live on the server, the main issue is the burdened with a verification process .

And one of the future plans is to develop the system to perform this process systematically using

modern techniques.

Moreover, the project has been evaluated under a college committee and some professors from the

conferences, competitions and exhibition that has been participated in. It shows a good expression and

we harness their feedbacks to develop our system.

One of the common problems associated with measuring the usability of information visualizations is

understanding human’s visual perception and cognitive processing in interacting with dynamic data

graphs. Hence, the team proposing a future plan is to establish a framework of eye tracking metrics

related to interacting with information visualizations, inspired by research methodologies originally

developed for analyzing graphic visualizations, explore eye-tracking methods that measure various

static and dynamic aspects of visual perception, and their relations to underlying cognitive processes.

111

The eye fixations and visual scanning patterns will allow us to analyze and quantify what information

visualization elements viewers encode, retrieve, and recall from memory.

113

Chapter 7: Conclusions

The increasingly digitized, distributed and disintermediated future of the technology industry in the

MENA region is predicted to have hackathons, hackers and potentially agile models of development

embedded as a core part of its growth strategy. Overall, time-bounded events in this region appear to

interest communities because of the opportunities for rapid collocation and the allotted time and space for

working intensively with teams in modes that are not often supported in their day-to-day environments of

work, leisure or study.

The contribution of this project outlines the trends and issues relevant to hackathons in the MENA region

and focuses on how insights can be sought by dynamically exploring information visualizations that are

crowd-sourced from the community. This project has shed light on insights that can be drawn from

collaborative development of digital systems in a concentrated time period.

Themes from technology-centric and social-centric hackathons are often aligned with Data-driven

analytics from our Sanea’a platform suggest that time-bounded events in the MENA region contribute

beyond producing digital artifacts, with building capacity and technical expertise, building community

and expanding social networks, and exposing participants to different modes of design and shaping cross-

domain multidisciplinary identities. Future directions for research include reporting insights from the

typology of hackathons in the regions and the trends in spatial and temporal dynamics of these time-

bounded events.

7.1 Evaluation

Working on Sanea’a platform was a great chance to explore the development environment. Furthermore,

it improved our skills in programming, self-learning, team working, analyzing problems, research skills

and decision-making.

In this project, the objective listed below were achieved:

1. Develop an Arabic version of user interface.

2. Allow user to visualize the phenomenon of historical and upcoming time-bounded events in the

geographically scope of the MENA region which embeds information visualizations that can be

explored spatially and temporally.

3. The platform is a crowdsourced event by allowing public user to add new events.

4. Design and develop more than 5 data-driven analytics charts for decision making by addressing

114

the main components of time bounded events (i.e. date, time, technology used, themes, and prizes,

gender and number of participants) for allow user to explore the data to gain insights in different

levels, scales and view the data geospatially.

5. Platform provide secure registration system to allow user to sign in /log in.

6. Allow user to edit /view all events information they add it.

7. Allow administrator to login in administrator control panel.

8. Allow administrator to add/visualize new events information.

9. Allow administrator to edit/delete/view all events information in database by develop CRUD

application used to manipulate data in the database.

10. Allow user and administrator to log out.

7.2 Future work

There are many features we planning to add it into our platform, such as:

1. Develop an English version of user interface.

2. Validate new events information automated.

3. Make platform prediction to user for best place, time, theme...etc. to organize events by using data

mining techniques.

4. Design and develop more dynamic interactive visualization charts.

115

REFERENCES

[1] N. H. Khalifa, Q. V. Nguyen, S. Simoff, and D. Catchpoole, “Interaction Visualisation of Complex

Genomic Data with Game Engines,” 2017 21st International Conference Information Visualisation (IV),

2017.

[2] T. Plank and M. Helfert, “Interactive Visualization and Big Data - A Management

Perspective,” Proceedings of the 12th International Conference on Web Information Systems and

Technologies, 2016.

[3] S. Almishari, N. Salamah, M. Alwan, N. Alkhalifa, and A. Al-Wabil, “The Rise of Hackathon-Led

Innovation in the MENA Region: Visualizing Spatial and Temporal Dynamics of Time-Bounded Events,”

Social Computing and Social Media. Applications and Analytics Lecture Notes in Computer Science, pp.

367–377, 2017.

[4] Briscoe, G. and C. Mulligan (2014). "Digital Innovation: The Hackathon Phenomenon." London:

Creativeworks London.

[5] Frey, F. J., and Luks, M. (2016). The Innovation-Driven Hackathon – one Means for accel-erating

Innovation. Proceedings of the 21st European Conference on Pattern Languages of Programs (p. N.A.).

N.A.: EuroPLoP ’16.

[6] Dictionary by Merriam-Webster: America's most-trusted online dictionary,” Merriam-Webster.

[Online]. Available: https://www.merriam-webster.com/. [Accessed: 10-Apr-2018].

[7] . Chen and H. Zhou, “Research and application of dynamic and interactive data visualization based

on D3,” 2016 International Conference on Audio, Language and Image Processing (ICALIP), 2016.

[8] S. Lee, J.-Y. Jo, and Y. Kim, “Performance testing of web-based data visualization,” 2014 IEEE

International Conference on Systems, Man, and Cybernetics (SMC), 2014.

[9] A. Draghici, T. Agiali, and C. Chilipirea, “Visualization system for human mobility analysis,” 2015

14th RoEduNet International Conference - Networking in Education and Research (RoEduNet NER),

2015, IEEE Computer Society.

[10] Chen and H. Zhou, “Research and application of dynamic and interactive data visualization based

on D3,” 2016 International Conference on Audio, Language and Image Processing (ICALIP), 2016.

116

[11]S. Ian, Software engineering, 9th ed. 2011.

[12] Buschmann,F.,Meunier,R.,Rohnert,H.,Sommerlad,P.andStal,M.(1996).“Pattern-Oriented Software

Architecture”. John Wiley and Sons. ISBN 0-471-95869-7.

[13] Shklar,L.and Rosen,R.(2003).“Web Application Architecture: Principles,Protocols and Practices”.

John Wiley and Sons. ISDN 0-471-48656-6.

[14]User Interface Elements | Usability.gov. [online] Usability.gov. Available at:

https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html [Accessed 24 Nov.

2017].

[15] BusinessDictionary.com. (2017). What is user interface? definition and meaning. [online] Available

at: http://www.businessdictionary.com/definition/user-interface.htm [Accessed 8 Dec. 2017].

[16]T. Malone, R. Laubacher and C. Dellarocas, "Harnessing Crowds: Mapping the Genome of Collective

Intelligence", 2009.

[17] Pirkka, R. (2011) '', User-Centered Design in Agile Software Development Harvard Business Review”.

Available at: http://tampub.uta.fi/bitstream/handle/10024/82310/gradu04854.pdf; (Accessed: April 2011)

[18] (2018). Agile Testing Overview. [online] Available at

https://www.tutorialspoint.com/agile_testing/agile_testing_overview.htm [Accessed 8 Apr. 2018].

[19] “Acceptance Testing,” Software Testing Fundamentals, 03-Mar-2018. [Online]. Available:

http://softwaretestingfundamentals.com/acceptance-testing/. [Accessed: 10-Apr-2018].

[20] “UI & GUI Testing | Beginners Guide for User Interface Testing,” Ranorex. [Online]. Available:

https://www.ranorex.com/resources/testing-wiki/gui-testing/. [Accessed: 10-Apr-2018].

[21] “Agile Testing – Effective, Sharp and Accurate Test Methodology ,” Software Testing Solution Blog, 23-Feb-

2016. [Online]. Available: http://softwaretestingsolution.com/blog/agile-testing-effective-sharp-and-accurate-

test-methodology/. [Accessed: 10-Apr-2018].

[22] T. M. Connolly and C. E. Beg, Database systems: a practical approach to design, implementation,

and management. Boston: Pearson, 2015.

[23] Behavioral Archetypes,” Smashing Ideas, 16-Nov-2017. [Online]. Available:

https://smashingideas.com/behavioral-archetypes/. [Accessed: 10-Apr-2018].

117

[24] Muzammil,K. and Sarwar, K. (2011) '', Data and Information Visualization Methods, and

Interactive Mechanisms: A Survey, 34(), pp. [Online]. Available

at: https://pdfs.semanticscholar.org/4ff1/f2fff62e899f4b9f507b2eb4bb297b7febc2.pdf(Accessed: ).

118

Appendix A: Project Management Plan

Team Communication Information

Name Email ID

Hailah Al-Qaffary [email protected] 433007288

Maha Al-Nasrallah [email protected] 433006866

Taghreed Al-Kammash [email protected] 434004631

Amal Al- Robayea [email protected] 434003622

Project Communication Matrix

Communication Type Objective of

Communication

Format

( Method ) Frequency Audience

Selecting project Registering and

selecting projects. Face to

face

Once 2/5/2017

Project team,

Supervisor

Kickoff meeting Introduction of project ,

and shaping our idea. Once 25/9/2017

Project team meeting

Review project status

with project team,

divide the tasks and

share ideas .

Face to

face and

conference

call

Twice a week Project team

Project status meeting Report the status of the

project to supervisor.

Face to

face

Weekly Project team,

Supervisor

Topic presentation Explain and clarification

of the project. Once 25/10/2017

Project team,

Supervisor,

Committee

Final graduation

(submission of project

proposal)

Document in accordance

to the requirement of

GP.

Hard copy Once 12/4/2018

Project team,

Supervisor,

Committee,

Coordinators

119

Project Publication Management

Contest

name

iHSI International

Conference on Intelligent

Human System Integration

URF-RTC 4rd Annual

Undergraduate Research Forum

URC 10th Annual

Undergraduate Research Conference

On Applied Computing

The 2st National Computing

Competition

EMC-Dell Envision The Future

Held at The JW Marriott Marquis Dubai

Prince Sultan University

Zayed University King Saud University

Host city,

country

Dubai , UAE Riyad, Saudi

Arabia Dubai , UAE Riyad, Saudi Arabia Dubai , UAE

Abstract

submission 5th Nov, 2017 18 Feb, 2018 20 Mar, 2018 15 Dec ,2017

Acceptance

notification 18 Oct , 2017 31 Dec, 2017 11 Mar, 2018 30 Mar, 2018 20 Feb, 2018

Design

layout

submission

ــــــــــــــــــ 6th Apr, 2018 ــــــــــــــــــ ــــــــــــــــــ ــــــــــــــــــ

Final

submission

1 Nov , 2017 1 Mar, 2018 25 – 26 Apr, 2018 1 Apr, 2018 25th Jul, 2018

Held on 7 – 9 Jan , 2018 13-14 Mar,2018 25 – 26 Apr, 2018 25 – 26 Apr, 2018 4 Sep, 2018

Submission

details

Paper “Personas and Behavioral Archetypes in

User Research: Insights from UX Design in

Crowd Sourcing Platforms for

Hackathons and Time-Bound

Events”

Paper (20 Min)

URF abstract

book

Poster Poster and video Open source

project

http://www.ihsint.org/

http://info.psu.edu.sa/URF/Abouturf.aspx

https://middle-east.emc.com/campaign/emea/envisionthefuture/index.htm

https://middle-east.emc.com/campaign/emea/envisionthefuture/index.htm

http://info.psu.edu.sa/URF/Docs/URF%20Book%20Of%20Abstracts%202018.pdf

http://info.psu.edu.sa/URF/Docs/URF%20Book%20Of%20Abstracts%202018.pdf

120

Gantt Chart

Team

Members Color

H

M

T

A

All

members

122

Contingency and Risk Mitigation Plan

Anticipated risks Contingency Plan

1 Retreat team members Increased collaboration and information sharing on

the team.

2 Misaligned expectations and scope

creep

Set prioritize functions for a website and define the

initial scope of a site based on those prioritize to

keep the project quality high.

3 Requirements inflation Constant involvement of customers and

developers.

4 Platform interfaces not responding

for different screen sizes

Use Bootstrap patterns and practices when

building the platform, to get responsive web

platform for different devices.

5 Platform got hacked Backup version of website and make security

measures up to date.

Methodology

After examining the existing methodologies for designing crowdsourcing platform, we selected to

and Agile Software Development process to follow the design of the “Sanea'a” platform.

For the related methodology

• Early testing gives higher quality and less defects.

• Team self-assessment in every sprint provide early and regular process improvement.

• Iterative life-cycle is associated with lower risk and better success, productivity and defect rete.

• Iterative development accommodates and provokes early change which is suitable for software

product development.

• Risks are mitigated and discovered early as risk-driven iterative development forces taking the

hardest features, issues and problem first.

Agile life -cycle

The Agile methodology supports flexible and creative processes prescriptive processes. Nonetheless, the

iterative and incremental life-cycle of an agile project is a defined process that require discipline to follow.

The process is composed of self-contained mini projects (sprints) and release. Each sprint iterations can

vary from 2 to 4 weeks. In other word, agile projects usually run multiple sprints before the software is

released, and the project can be divided into multiple releases that each have their own scope and schedule.

123

Agile sprint iterations

1. Concept & prototyping sprint:

2. System analysis sprint:

Discovering

In this phase, a primary study for project is done to identify the problem, requirements,

goals and define the project scope and to create communication plan, schedule to deliver

project plan.

Design In this phase, we shall design system features to distinguish between our system and similar

systems.

Develop

In this phase, we will prototype the system design and specify the functional and non-

functional requirements by analyzing the characteristic and behave of our main stakeholders

to refine the website based on their needs and requirements.

Test In this phase, summarizes the system’s perceived readiness.

Discovering

In this phase, we need to understand and empathize with our users’ needs and their behavioral

patterns so that we can anticipate how they will interact with our system. Personas are

fictional characters, representing slices of our customer base. These semi-fictional

representations of our prototypical customer are developed based on customer demographics,

along with our own understanding of their motivations and needs. Additionally, a primary

124

3. System architecture sprint:

4. Implementation sprint:

studying of the system by examining its component parts and their interactions. To organize

information gathered during requirements determination into a meaningful representation of

process, data, and logic views of the information systems.

Design In this phase, we shall design some scenarios in which the persona has needs to use the system

to create a more plausible environment.

Develop In this phase, we shall use collaborative toolkit to help us to build behavioral archetypes

based on the market profiles of our target audience

Test

In this phase, after designing relevant scenarios and motivational mindsets that influence the

behavior of our target audience, we will have the basis for behavioral archetypes. These initial

behavioral archetypes will help us to evaluate behavioral commonalities and differences

amongst our target audience that help us to determine which solutions or features to focus on.

Discovering

In this phase , we defines the structure, behavior, and more views of a system. A system

architecture primarily concentrates on the internal interfaces among the system's

components or subsystems, and on the interface(s) between the system and its external

environment, especially the user.

Design

In this phase, we shall design models and diagrams to visually represent a system that we

want to build, for better understanding the functionality of a system, data flow, set of actions,

services, structure of database, stored data and functions that the system needs to perform.

Develop In this phase, we shall develop the informational content of the elements comprising a system,

the relationships among those elements, and the rules governing those relationships.

Test In this phase, we shall test the prototype that we created to insure its initial success.

Discovering

In this phase, understand the need arises for interactive information visualizations to aid in

the processing, comprehension, tracking, and retention of data on time-bounded events in

static, animated, dynamic and interactive visuals

Design

In this phase, we shall design charts for data visualizations in different patterns to provide a

better understanding to the users while navigating through the different datasets through the

portal. Each chart provides different views and explores depending on the user needs.

Develop

In this phase, we shall be producing interactive and dynamic data visualization by using (d3.js

library) that could allow users to navigation through the platform by choosing between

searching, exploring or interacting with the different components and visualizations.

Test

In this phase, we shall test interactive platform that users can explore the data to gain insights

from the data visualizations and analysis. The idea is to trigger the sense of search and

exploration for the user needs.

https://en.wikipedia.org/wiki/Structure

https://en.wikipedia.org/wiki/Behavior

https://en.wikipedia.org/wiki/View_model

https://en.wikipedia.org/wiki/System

125

5. Testing sprint:

Appendix B: Personas Card

Discovering

Before Sanea’a platform launch, it undergoes a thorough testing process to ensure that the

platform is working in the manner in which it was intended. There are four main stages of

testing that need to be completed before a program can be cleared for use: unit testing,

integration testing, system testing, and acceptance testing.

Design

In this phase, we shall apply verification and validation procedures that are used together for

checking that a system meets requirements and specifications and that it fulfills its intended

purpose.

Develop

First, apply unit testing where the program is submitted to assessments that focus on specific

units or components of the software to determine whether each one is fully functional. The

main aim of this endeavor is to determine whether the platform functions as designed.

The next level, Integration testing allows individuals the opportunity to combine all of the

units within a program and test them as a group. This testing level is designed to find interface

defects between the modules/functions. The goal at this level is to evaluate whether the

system has complied with all of the outlined requirements and to see that it meets Quality

Standards.

After that , apply system testing is very important because it verifies that the platform meets

the technical, functional, and business requirements that were set by the personas.

Test

The final level, acceptance testing is conducted to determine whether the system is

ready for release. Once this process has been completed and the software has passed,

the platform will then be launch on the world wide web.

DYNAMIC D VISUALIZATION IN A C PLATFORM FOR H T -B E … · for her continuous support,...

Documents

Transcript of DYNAMIC D VISUALIZATION IN A C PLATFORM FOR H T -B E … · for her continuous support,...