2015 AIR Forum - Denver, Co

2015 AIR Forum - Denver, Co

Visualization of Student Migration Data Using Google Charts Sankey Diagrams Sean V. Hoffman Institutional Research Analyst Office of Institutional Research, Planning & Effectiveness GOALS Goals o To learn the basics of Sankey diagrams o To gain an understanding of how Sankey diagrams can be used in Institutional Research o

To be able to create a basic Sankey diagram in Google Charts, using Excel data o To review an example of a Sankey diagram created to visualize student migration at Stony Brook AGENDA Introduction to Sankey diagrams Sankey Diagrams and Institutional Research Building an Example Sankey o Discuss the process behind collecting data and creating a basic Sankey diagram o Look further into how a more complex diagram is created

Google Charts for Institutional Research o Other charts available o Dashboards in Google Charts WHAT IS A SANKEY DIAGRAM? Originally created to show efficiency of a steam engine by Captain Matthew Henry Phineas Riall Sankey in 1898 (Source: Wikipedia)

Flow diagram Used to visualize flow of a system, transfer of items, movement of goods Thickness of line represents magnitude of flow EXAMPLES OF SANKEY DIAGRAMS Simple Sankey Diagram of a Lightbulb Multi Level Sankey Energy Diagram

BASIC VOCABULARY Nodes: Represent sources and destinations of flows o Cities, Universities, Academic Departments, Accounts Links: Links indicate that there exists flow between the nodes it connects Weight: Also known as

the thickness. The higher the weight of the link, the thicker it is SANKEY DIAGRAMS FOR IR Useful where there is movement Student transitions o Major changes, Time to degree, Transfer destinations Transactional data o Finance, Student Financial Aid, Research Expenditures, HR

Data Example: Tracking a cohort (Fall 2010 SBU FTFT to their 4th Fall) Example 1 SANKEY EXAMPLE: IPEDS SFA 2013 14 IPEDS SFA Data from Stony Brook Total financial aid Scholarships/Grants vs Loans Aid source Example 2

MAJOR CHANGES AT STONY BROOK UNIVERSITY Closer look at Stony Brook University FTFT 2010 students Looking by Major groupings Looking for retention/graduation interventions: undeclared? For now, look at one year change (Fall to Fall) Immediate observations o Majority do not leave Questions about those not returning: o In line with other majors? Example 1.1

MAJOR CHANGES AT STONY BROOK UNIVERSITY To answer this question, lets look at students who dont return Observations o Not out of line with other majors Benefits o Not a list of numbers and percentages o Easy to visualize Example 1.2 MAJOR MIGRATION AT STONY BROOK UNIVERSITY Add major groupings to initial

cohort tracking example (Example 1) Example 1.3 MAJOR MIGRATION TAKEAWAYS What does this diagram show us? What does it show decision makers? o Helps to show complexity to decision makers and those making requests o Demonstrate trends in flow, or currents o Highlight problem areas: high transfer out, high attrition, o Can also show successes

o Prompt further investigation into previously unnoticed subgroups or trends SBU case specific examples o SOMAS High out, low in o CEAS AMS in, engineering out o Undeclared students persist, do not leave at as significantly different rates as thought o Major alone will not give us a target

What does the Sankey help to show CREATING SANKEY DIAGRAMS Several options for creating Sankey diagrams (some others listed at end) Sankey diagram included as part of Google Charts o Clean, straightforward, and does not require a background in coding (I am not a programmer!) o Replicable and easily editable to accommodate data changes or new project o Can be combined to create dashboards with other Google Charts https://developers.google.com/chart/interactive/docs/gallery/sankey We will examine the code behind some simple Sankey diagrams o

Creating the diagram only involves changing one section of the code provided by Google o Users can modify more if they like THE CODE FOR EXAMPLE 1.2 CREATING YOUR OWN SANKEY DIAGRAM This is the only section that needs to change: The links and weights Some example code can be

found on Googles webpage HOW TO CREATE YOUR OWN SANKEY DIAGRAM Basic Steps 1. Define nodes, links, and weights 2. Gather data (enrollments for this example) 3. Create code for nodes and links using data 4. Insert the code, replacing old nodes and links 5. Run code in HTML editor, youre done! Going Further o Edit Google chart options o Edit HTML options (not covered in this presentation)

Lets try it BASIC STEPS: DEFINE NODES AND LINKS Build the Major Migration Sankey from Example 1.2 The following structure is used o Nodes: Major groups by fall terms (Ex: Engineering Fall 2010) o Links: Links represent movement between the two major groups they connect (the year of the movement is also specified by which nodes are connected we limit to one year movements) o Weights: Denotes the amount of students moving between the two program groups in the represented time frame Not all definitions will be the same. Ensure you will be able to demonstrate what you are trying to show o Initial attempts at this example led to adding a year component to the node labeling o Initial cohort node helps with start distribution BASIC STEPS: GATHER DATA Need enrollment data, stored in a spreadsheet

o Pulled from enrollment records Create a panel that shows enrollment in one fall and then subsequent fall enrollment o For SBU, data stored on major, school/college, graduation status, college/division (local grouping of majors to reduce number of links) Summary sheet for total changes: will use to create code o Pivot table BASIC STEPS: CREATE CODE Rows create nodes, links, and their relationship Columns inside each row are: o Source Where does the flow start? o Destination Where does the flow go? o Value How much flow? Row code format: [Source, Destination, Value],

o [ Source , Destination , Value Must start and end with open bracket: [ Include single quotes around node names: ], Note: ORDER MATTERS Separate source, destination and value with commas. Also, separate EACH row entry with a comma (except for the final entry): , Use a concatenate formula in your spreadsheet to create rows in this format

BASIC STEPS: INSERT CODE Leave Replace This sample is from example 1.2. You can use any previous Sankey code to start. Leave Copy basic example code from Google Sankey page or code from a previous diagram you created Place in editor (Notepad, Notepad++, HTML online editor, JSFiddle) Leave the first and last lines o data.addRow([ o ]);

Remove links in between these lines, and add your links o Make sure last link does NOT end with a comma, the code will not work BASIC STEPS: RUN CODE Notepad o Save as .htm, open file with internet browser Notepad++ o Save file, use run option to run in a browser HTML editor o http://htmledit.squarefree.com/ - updates in real time JS Fiddle

o https://jsfiddle.net/ - need some HTML experience, since Javascript and HTML is separated by this editor GOING FURTHER: OPTIONS Options are entered with the following format o Example: var options = {node: {label: {bold: true, font: Arial} } } Declare the options variable Open the node options Open label category within

node options Make label font bold Set label font to Arial Close the node and label sections Available option categories o Sankey (Node, Link, and Iterations subcategories Node and Link are shown on next page) o Height o Width

o forcelFrame o Tooltips (can be used to change hover effect) GOING FURTHER: OPTIONS Sankey Link Color Fill FillOpacity Stroke StrokeWidth Sankey Node Label FontName FontSize

Color Bold Italic LabelPadding NodePadding Width GOING EVEN FURTHER Multi level Sankey Diagrams are coded in the same manner o Keep adding links o Logical flow (Example, F10 to F11, F11 to F12,) o Add in order for organization, Google will add them in best fit SBU migration has hundreds of links o Still created in the same manner o Pivot tables and concatenate in Excel Options will be key for Visualization o Use node padding and sizing, label padding and sizing o Change chart size OTHER CHARTS AVAILABLE

FROM GOOGLE CHARTS Traditional Graphs Diagrams Area Charts (Traditional and Stepped) Bubble Charts Bar Charts Box and Whisker Plots (Candlestick Charts) Column Charts Calendar Charts Combo Charts Gauge Charts

Histograms Geographic Charts Intervals Organizational Charts Line Charts Tables Pie Charts Timelines Scatter Charts Tree Map Charts Time Series (Annotated)

Word Trees Trend lines **User created community charts are also available** DASHBOARDS Dashboards allow combination of charts and controls Controls act as filters o Category (Pick from available), String (Search), ChartRange, DateRange, NumberRange o Customizable filter options (Examples: starting states, allow one choice only)

Can use same data source across multiple charts and filters, or multiple data sources Can control one or many charts with filter; can use multiple filters per chart DASHBOARD EXAMPLE DASHBOARD EXAMPLE CONTINUED Department Category Filter set to Applied Math Year Category Filter set 2013-14 Second pie chart set to only change with Level Category Filter

OTHER SOURCES FOR CREATING SANKEY DIAGRAMS Connecting to Data Google charts allows connection to your database with php and a .json file https://developers.google.com/chart/interactive/docs/php_example Other Resources for Creating Sankey Diagrams D3.js o Javascript Visualization library o Powerful, with more options than Google Charts o More complex o http://d3js.org/

Tableau o Requires manipulation o Not flexible, very complicated Thank you! Examples will be posted on our Webpage within the next week o http:// www.stonybrook.edu/commcms/irpe/dashboards/viz.ht ml Contact information o [email protected]

Recently Viewed Presentations

  • Preparation of a Broadband Master Plan

    Preparation of a Broadband Master Plan

    Deploy fiber strategically, with focus on key economic development targets. Historic downtowns, rehab areas, business parks. Connect to Internet peering point (could be local meet point) Public entity builds & owns infrastructure, and works with a private partner who will...
  • Group Work for Interactive Teaching - University of Cambridge

    Group Work for Interactive Teaching - University of Cambridge

    Group Work for Interactive Teaching Rationale Group work for interactive teaching implies: Pupils learn by interacting with each other Teachers' role is to create a supportive environment for pupils to interact Small number of pupils work together to solve a...
  • Unit 1 - lee.k12.nc.us

    Unit 1 - lee.k12.nc.us

    Physical Map. Because color can be used differently in various maps, it is always important to look at the map key to make sure you understand the information you are reading. The map key is a box or list found...
  • Chapter 1 Introduction: Matter and Measurement

    Chapter 1 Introduction: Matter and Measurement

    A sample of a chlorohydrocarbon with a mass of 4.599 g, containing C, H and Cl, was combusted in excess oxygen to yield 6.274 g of CO 2 and 3.212 g of H 2. O.Calculate the empirical formula of the...
  • Customs Around the World In the USA, most

    Customs Around the World In the USA, most

    Images and information taken from www.mexconnect.com and www.azcentral.com Additional Pictures taken by Jan Gray, Jennifer R. Wood, and Philip Wood * Customs Around the World In the USA, most people avoid talking about death Many other cultures around the world...
  • Christ and Our Righteousness - Simple Bible Studies

    Christ and Our Righteousness - Simple Bible Studies

    Christ and Our Righteousness. Conclusion. It is dangerous to follow what simply sounds good to our ears. We must discern whether it is the truth! We should only desire God's wisdom and will, not man's! It is erroneous to claim...
  • Oedipus Rex - Seneca Valley School District

    Oedipus Rex - Seneca Valley School District

    OEDIPUS REX INTRODUCTION ... Way Crossroads Motifs Sight and Blindness AUTHOR STYLE Literary Devices Dramatic Irony Foreshadowing Imagery Allusion Stichomythic dialogue (Greek device) Author Style - Imagery References to light and darkness to predict the future Example of Imagery The...
  • Bezbednost na Internetu

    Bezbednost na Internetu

    Dobro uvek pobeđuje zlo Naučite 4 stvari Prepoznajte tehnike koje koriste online predatori da bi zaveli svoje žrtve Odbijte zahteve za personalne informacije Ako ste nekad u neprijatnoj situaciji dok ste online, odgovorite tako da zaštite svoje pravo Prijavite roditelju...