1

Sanea'a Platform

Dynamic Data Visualization in a Crowdsourcing Platform for Hackathons

and Time- Bound Events in the MENA Region

Team Members:

Haila Mohammed Al-Qaffary, HailahAlqaffary@gmail.com

Maha Saleh Al-Nasrallah, Maha.Alnasrallah@gmail.com

Taghreed Morizeq Al-Khammash, Taghreedalkhmmash@gmail.com

Amal Mohammed Al-Robayea, AmalAlrobayea@gmail.com

Supervised by:

Dr. Areej Suleiman Al-Wabil

2017 – 2018

ALL RIGHTS RESERVED BY HCI LAB AT KASCT AND COMPUTER SCIENCE DEPARTMENT AT PNU

2

List of Contacts

SECTION 1: Project Description .................................................................................................................................... 4

1.1 Problem Statement & Significance ................................................................................................. 4

1.2 Project Scope ..................................................................................................................................... 4

1.3 Project Outcomes .............................................................................................................................. 4

SECTION 2: Project Plan ................................................................................................................................................ 5

2.1 Adopted Methodology ...................................................................................................................... 5

2.2 Contingency and Risk Mitigation Plan ........................................................................................... 7

SECTION 3: System Requirements ................................................................................................................................ 8

3.1 Requirements Elicitation Process: .................................................................................................. 8

3.1.1 List and categorization of system stakeholders: ......................................................................................... 10

3.2 System Requirements: .................................................................................................................... 11

3.2.1 Function requirements ..................................................................................................................................... 11

3.2.2 Non-functional requirements ........................................................................................................................... 11

SECTION 4: System Analysis and Design ................................................................................................................... 12

4.1 High Level System Architecture: .................................................................................................. 12

4.2 System Analysis: ............................................................................................................................. 13

4.2 User Interface Design: .................................................................................................................... 17

4.2.1 User interface flow .......................................................................................................................................... 17

4.3 Implementation Requirements: ..................................................................................................... 18

4.3.1 Hardware requirements:................................................................................................................................... 18

4.3.2 Software and development tools: ..................................................................................................................... 18

4.3.2 Websites used in graphics: ............................................................................................................................... 18

SECTION 5: Challenges ................................................................................................................................................ 19

5.1 Technical Challenges: ..................................................................................................................... 19

5.2 Non-technical Challenges: ............................................................................................................. 19

References ....................................................................................................................................................................... 20

3

List of Tables

Table 1 : Anticipated risks & contingency plan ................................................................................................................ 7

Table 2 : Use-Cases data visualization charts ................................................................................................................ 16

List of Figures

Figure 1 : Agile sprint ....................................................................................................................................................... 5

Figure 2 : Brainstorming session with the team ............................................................................................................... 8

Figure 3 : Personas card ...................................................................................................................................................... 9

Figure 4 : Behavioral archetypes ....................................................................................................................................... 10

Figure 5 : System flowchart ............................................................................................................................................. 12

Figure 6 : Data visualization process ................................................................................................................................. 13

Figure 7 : Content crowdsourcing in the Sanea’a platform .................................................................................................. 13

Figure 8 : Spatial Visualization of Time-Bounded Events in the MENA rejoin ............................................................ 14

Figure 9 : User interface flow............................................................................................................................................ 19

4

SECTION 1: Project Description

1.1 Problem Statement & Significance

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 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, community building, and accelerated

technology development. However, our understanding of the trends and challenges in organizing time-

bounded events in the MENA region is inadequate for the burgeoning analytics-driven strategic

planning, decision making that is taking place in innovation-oriented organizations in these countries.

Sophisticated tools for analysts, policy makers and researchers were needed 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.

1.2 Project Scope

In the context of data science, our aim is to develop an Interactive visualizations website to help

Explore, interact and discover patterns of hackathon and time-bounded events in the MENA region. In

this project, we aim to bring together machine intelligence with human intelligence through Visual

Analytics.

1.3 Project Outcomes

• Take advantage of data visualization by relatively broad bandwidth between a human’s eyes

and the mind which helps users to not only see and visually explore, but also understand

information in large amounts, all at once.

• Explore and understand the large datasets of hackathons to aid in the processing,

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

dynamic and interactive visuals.

• 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 spatially and temporally.

• 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.

5

• Produce visual representations of time-bounded events easy for users to perceive salient aspects

of regional distribution of events as well as the density of events across time.

SECTION 2: Project Plan

2.1 Adopted Methodology

After examining the existing methodologies for designing “Sanea'a” platform, we decide to follow

Agile Software Development. That refers to number of different iterative and incremental software

development methodologies that share common principles and practices.

We use Agile to develop our project for these reasons:

• 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.

2.1.1 Agile life -cycle

Agile methodology promote empirical processes over 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.

2.1.2 Agile sprints iteration

Figure 1: Agile sprints

Design

6

2.1.2.1 Concept & prototyping 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.

2.1.2.2 Persona & behavioral archetypes sprint:

2.1.2.3 System analysis sprint:

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.

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, a primary studying a 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 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 crowdsourcing platform to encourage users to contribute

towards maintaining the accuracy and quality of data submitted through the platform's

frontend.

Test In this phase, we shall apply verification and validation procedures that are used together for

checking that a product, service, or system meets requirements and specifications and that it

fulfills its intended purpose.

7

2.1.2.3 Visualization chart sprint:

2.1.2.4 System architecture sprint:

2.2 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.

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.

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 produce interactive prototypes, wireframes or sketches that is simple

and easy interface for users. Designed by using (Fluidui.com) this prototyping well help

defining our website features.

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.

Table 1: Anticipated risks & contingency plan

8

SECTION 3: System Requirements

3.1 Requirements Elicitation Process:

Description of the methods that have been used to gather the project requirements, to design and build

a usability product. We use personas and behavioral archetypes activity to understand and empathize

into expected users, 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. These tools help curate seemingly faceless data points

into something relatable and serve as a tangible element that generates customer empathy and

understanding from team members and stakeholders.

Creation process:

Personas focus on the “who” of your audience research. As shown in Figure 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 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.

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

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

system?

• 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 2: Brainstorming session with the team

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

if necessary, complementary categories.

9

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

motivations, and expectations.

Figure 3: Personas card

That yields valuable information on how to customize the user experience to specific types of people

based on their attitudes, behaviors, and motivations. This exercise makes the design task at hand less

complex and Identify the features, functionality and content to develop for a platform release, ensuring

that value is delivered to users from day one of the release, they guide our ideation processes, and they

can help to achieve the goal of creating a good user experience for our target user group. This potent

combination of personas, goals and scenarios help us to avoid thinking in the abstract and to focus on

how platform could be used in an idealized yet more concrete and humanistic future.

Archetypes are steeped in user behavior. As shown in Figure-3, 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

– how a customer is using a product or service currently. Archetypes most directly help determine the

approach and functionality of a user experience, as well as contributing to determining, validating, and

prioritizing product features.

10

3.1.1 List and categorization of system 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)

Figure 4: Behavioral archetypes

11

3.2 System Requirements:

3.2.1 Function 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 facilitates closely coupled human and machine analysis by spatiotemporal

visualization of time-bounded events in the MENA region.

4. 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.

5. 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.

6. 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.

7. 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.

3.2.2 Non-functional 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.

12

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.

SECTION 4: System Analysis and Design

4.1 High Level System Architecture:

Figure 5: System flowchart

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 entry then the administrator verify the user for posting

and updating data into the platform.

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

• data processing layer

• data application layer

• data visualization layer

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.

13

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. 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. Binding data to DOM elements is the key to implement interactivity.

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.

Basically, web-based visualization process is divided into two

parts, one on the client side and the other on the server side and it

responds with D3 visualization library. Figure 5 shows the process

of web-based visualization where a web-based server fetches the

data from data storage, processes it to a graphical format, and

delivers it to a web client.

Figure 6: Data visualization process

4.2 System Analysis:

The intelligent visual analytics platform that we are developing is designed in two 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.

Figure 7: Content crowdsourcing in the Sanea’a platform

The content crowdsourcing architecture of Sanea’a platform, depicted in Figure 6, 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 6 shows the set

14

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.

The second 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, to

recognize a pattern that would help make crucial business decisions.

Figure 8: Spatial Visualization of Time-Bounded Events in the MENA rejoin

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, theme (e.g. health,

humanitarian aid, sport). Filters are applied to explore subsets of datasets, as shown in Figure 7.

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

data- driven analytics charts for decision making by addressing the main components of time bounded

events (i.e. date, time, themes, prizes, etc.) The user can gain insights in different levels, scales and

view the data geospatially. Table 3 shows a sample of the statistical mode in which users can toggle on

or off the categories and the dynamic visualization refreshes on-screen in the platform to provide

15

instantaneous data tailored to the needs of stakeholders. 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.

16

Table 2: Use-Cases data visualization charts

Data visualization emerged widely through storytelling on a global scale to show insights into complex

data and static visualizations. Through the storytelling method, a series of questions or visuals can be

Data Visualization Charts

1

2

3

4

5

6

17

created that takes the decision makers to the desired conclusion by explained the whole concept through

a story, it creates a different scenario altogether that helps to draw meaningful conclusions.

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 the platform we focus to design UI

easy to access all component and understanding by user.

4.2.1 User interface flow

Figure 9: User interface flow

18

4.3 Implementation Requirements:

To reach the highest expectation and effective implementation of Sanea’a Platform we set a varios

hardware and software requirments in order to achieve our goal.

4.3.1 Hardware requirements:

• Laptops: 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.

4.3.2 Software and development tools:

• Web development languages: HTML5, CSS3, SVG , JQuery , JavaScript, PHP.

• Bootstrap: framework for developing responsive, mobile-first websites.

• Data-Driven-Document (D3.js): is a JavaScript library for producing interactive and dynamic data

visualization in web browser.

• Leaflet: open-source JavaScript library for mobile-friendly interactive maps.

• Database: MySQL is used as database as it is easy to maintain and return records by simple

queries.

• JavaScript Object Notation (JSON): For exchanging data between a browser and a server.

4.3.2 Websites used in graphics:

• Creately.com: online website used to create flowcharts, organization charts, mind maps, project

charts, and other visuals.

• Fluidui.com: online website used to create web prototypes.

• Gantt team : online website used to create Gantt chart.

19

SECTION 5: Challenges

5.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.

5.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.

20

References

[1] 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.

[5] 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.

[3] 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.

[4] Shklar,L.and Rosen,R.(2003).“Web Application Architecture: Principles,Protocols and Practices”. John

Wiley and Sons. ISDN 0-471-48656-6.

[5]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].

[6] 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)

[7] Doneva, R. (2017). Behavioural archetypes instead of personas | Common Good.

[online]CommonGood.Availableat:https://common-good.co/behavioural-archetypes-instead-of-personas

[Accessed 9 Dec. 2017].

[8] Smashing Ideas. (2017). Behavioral Archetypes - Smashing Ideas. [online] Available at:

https://smashingideas.com/behavioral-archetypes/ [Accessed 9 Dec. 2017].

[9] Bernstein, G. (2017). How To Create UX Personas. [online] UX Mastery. Available at:

https://uxmastery.com/create-ux-personas/ [Accessed 9 Dec. 2017].

[10] K,Muzammil (2011) '', Data and Information Visualization Methods, and Interactive Mechanisms: A

Survey, 34(), pp. [Online]. Available at: (Accessed: ).