CS/INFO 4154 › courses › cs4154 › 2018fa › sessions › lecture20… · Session 2. Task 1. Task 2. Task 3. Task 4. Task 5. Action 1. Action 2. Action 3. Action 1. Action 2

CS/INFO 4154:Analytics-driven Game Design

Data Visualization

Class 20:

Mon Wed Fri10/12

Data Visualization

10/19Friends Release

10/17Balance?

10/15SQL

11:59pm: Midterm Peer Evaluationsby 10:10am: Upload to CMS




by 2pm: Friends Release Report

Logging in to gdiac You will need to be behind the Cornell firewall to

login to gdiac.cs.cornell.edu Easiest way to do this is to install the VPN:

http://www.it.cornell.edu/services/vpn/howto/. Connect to: cuvpn.cuvpn.cornell.edu Username: @en-cs-vpn-acad Password = your netid password For more information, see:

http://www.it.cornell.edu/support/coecis/vpn.cfm.

http://www.it.cornell.edu/services/vpn/howto/http://www.it.cornell.edu/support/coecis/vpn.cfm

Logging in: SFAM Set your SFAM password:

1. Open a VPN connection to the department VPN2. Visit https://unixcfg.serverfarm.cornell.edu/3. Click SFAM4. Set password5. Wait a little bit (30-60 minutes) for server to update

With the VPN active, SSH into gdiac: ssh @gdiac.cs.cornell.edu replace with your netid you can use PuTTY from Windows machines:

http://www.putty.org/

https://unixcfg.serverfarm.cornell.edu/http://www.putty.org/

Review: Logging

User 1

Session 1

Session 2

Task 1

Task 2

Task 3

Task 4

Task 5

Action 1Action 2Action 3Action 1Action 2

Action 1

Action 1

Action 1Action 2

User 2 Session 1 Task 1 Action 1

Today: data visualization

Burndown Charts Heatmaps

State transition diagrams

Outline Burndown charts Heatmaps State transition diagrams

Burndown Charts

After x levels/seconds, how many people are playing?

Level

% of players

100

0

Burndown Chart

Level

% of players

100

0

Unexpected Drop

4

Usage: find unexpected drop

Source: Sleep Fighter

Usage: track releases

Source: That’s How We Roll

Making a burndown chart Microsoft Excel works well

Making a Burndown ChartPlayer Levels Completed Level % Remaining

1 12 2 0.777777782 16 4 0.555555563 8 6 0.444444444 3 8 0.333333335 5 10 0.222222226 7 12 0.222222227 2 14 0.11111111

= percentage of with more than levels

Sheet1

PlayerLevels CompletedLevel% Remaining

11220.7777777778

21640.5555555556

3860.4444444444

4380.3333333333

55100.2222222222

67120.2222222222

72140.1111111111

COUNTIF(range, criteria)

B2:B8 “>=” &D2


1 12 2 12 16 4 0.777777783 8 6 0.666666674 3 8 0.444444445 5 10 0.222222226 7 12 0.222222227 2 14 0.111111118 9 16 0.111111119 7 18 0= COUNTIF(B2:B8, “>=” &D2)

Sheet1


11221

21640.7777777778

3860.6666666667

4380.4444444444

55100.2222222222

67120.2222222222

72140.1111111111

89160.1111111111

97180

101520


1 12 2 12 16 4 0.777777783 8 6 0.666666674 3 8 0.444444445 5 10 0.222222226 7 12 0.222222227 2 14 0.111111118 9 16 0.111111119 7 18 0= COUNTIF($B$2:$B$8, “>=” &D2)

Sheet1


11221

21640.7777777778

3860.6666666667

4380.4444444444

55100.2222222222

67120.2222222222

72140.1111111111

89160.1111111111

97180

101520


1 12 2 12 16 4 0.777777783 8 6 0.666666674 3 8 0.444444445 5 10 0.222222226 7 12 0.222222227 2 14 0.111111118 9 16 0.111111119 7 18 0= COUNTIF($B$2:$B$8, “>=” &D2) / 7

Sheet1


11221

21640.7777777778

3860.6666666667

4380.4444444444

55100.2222222222

67120.2222222222

72140.1111111111

89160.1111111111

97180

101520

0

40

80

2 4 6 8 10 12 14

Completed Burndown Chart?

0102030405060708090

100

2 4 6 8 10 12 14

% R

emai

ning

Level

Burndown Chart for Levels Completed

Completed Burndown Chart

0102030405060708090

100

2 4 6 8 10 12 14

% R

emai

ning

Level

Burndown Chart for Levels Completed

Important Notes

Must be able to read the font

Must have axis label

Must have axis label

Must have titleLine starts at 100%

Line must be visible

Reasonable intervals

Max = 100

Heatmaps

What are heat maps good for?

Death X Y 1 2 3 41 1 1 1 2 1 0 02 2 1 2 1 0 0 03 1 2 3 1 0 0 04 1 1 4 0 0 1 15 3 16 4 47 4 3

Making a heat map

Sheet1

DeathXY123456

1111210000

2212100000

3123100000

4114001100

531

644

743

COUNTIF(range, criteria)

COUNTIFS(range1, criteria1, range2, criteria2)

Making a heat mapDeath X Y 1 2 3 4

1 1 1 1 2 1 0 02 2 1 2 1 0 0 03 1 2 3 1 0 0 04 1 1 4 0 0 1 15 3 16 4 47 4 3

= COUNTIFS(B2:B8, “=” &E2,C2:C8, “=” &F1)

Sheet1

DeathXY123456

1111210000

2212100000

3123100000

4114001100

531

644

743

Making a heat mapDeath X Y 1 2 3 4

1 1 1 1 2 1 0 02 2 1 2 1 0 0 03 1 2 3 1 0 0 04 1 1 4 0 0 1 15 3 16 4 47 4 3

= COUNTIFS($B$2:$B$8, “=” &$E2,$C$2:$C$8, “=” &F$1)

Sheet1

DeathXY123456

1111210000

2212100000

3123100000

4114001100

531

644

743

Conditional Formatting

Making a heat map

Death X Y 1 2 3 41 1 1 1 2 1 0 02 2 1 2 1 0 0 03 1 2 3 1 0 0 04 1 1 4 0 0 1 15 3 16 4 47 4 3

Sheet1

DeathXY123456

1111210000

2212100000

3123100000

4114001100

531

644

743

Completed Heatmap?Level 10 Heatmap

Zombify, 2014 (with Erik’s additions)

Heat maps should support analysis Not the point themselves Support a particular point


Completed Heatmap

Many players died here

Figure 1. This heatmap shows an unexpected problem with the game design. Although this hallway was supposed to be easy, many players died here. We will try to resolve this problem by spacing the enemies further apart.

Enemies

This pathway was supposed

to be easy


Completed Heatmap

Many players died here

Figure 1. This heatmap shows an unexpected problem with the game design. Although this hallway was supposed to be easy, many players died here. We will try to resolve this problem by spacing the enemies further apart.

Enemies

This pathway was supposed

to be easy

Needs annotations

Needs explanation

Needs level context


Heat Map Examples

Source: Georg Zoeller, “MMO Rapid Content Iteration” GDC Online 2011

Optimizing Engines


Optimizing Art


How do I…


“bug”


3D Visualizations


More 3D Visualizations


What are heat maps not good for?

What about?

Napoleon’s invasion of Russia

Charles Minard, 1812

Sankey Diagram

Source: Wikipedia

State Transition Diagram

StartLose

Win!

What can we see?

Andersen et al. FDG 2010

Making State Transition Diagrams

Powerpoint works well

Completed State Transition Diagram?

Win state

Needs labels

Lose stateStart state

50 players100 players

50 players

Needs state descriptions


CS/INFO 4154:�Analytics-driven Game DesignSlide Number 2Logging in to gdiacLogging in: SFAMReview: LoggingToday: data visualizationOutlineOutlineBurndown ChartsBurndown ChartUnexpected Drop Unexpected Drop Usage: find unexpected dropUsage: track releasesSlide Number 15Making a burndown chartMaking a Burndown ChartSlide Number 18Making a Burndown ChartMaking a Burndown ChartMaking a Burndown ChartCompleted Burndown Chart?Completed Burndown ChartImportant NotesOutlineOutlineHeatmapsWhat are heat maps good for?Making a heat mapSlide Number 31Slide Number 32Making a heat mapMaking a heat mapConditional FormattingConditional FormattingMaking a heat mapCompleted Heatmap?Heat maps should support analysisCompleted HeatmapCompleted HeatmapHeat Map ExamplesOptimizing EnginesOptimizing ArtHow do I…“bug”3D VisualizationsMore 3D VisualizationsWhat are heat maps not good for?What about?OutlineOutlineNapoleon’s invasion of RussiaSankey DiagramState Transition DiagramWhat can we see?Making State Transition DiagramsCompleted State Transition Diagram?OutlineOutline

Documents

CS/INFO 4154 › courses › cs4154 › 2018fa › sessions › lecture20… · Session 2. Task 1. Task 2. Task 3. Task 4. Task 5. Action 1. Action 2. Action 3. Action 1. Action 2