Visualization of Student Migration Data Using Google Charts Sankey Diagrams

Transcription

1 Visualizatin f Student Migratin Data Using Ggle Charts Sankey Diagrams Sean V. Hffman Institutinal Research Analyst Office f Institutinal Research, Planning & Effectiveness

2 GOALS Gals T learn the basics f Sankey diagrams T gain an understanding f hw Sankey diagrams can be used in Institutinal Research T be able t create a basic Sankey diagram in Ggle Charts, using Excel data T review an example f a Sankey diagram created t visualize student migratin at Stny Brk

3 AGENDA Intrductin t Sankey diagrams Sankey Diagrams and Institutinal Research Building an Example Sankey Discuss the prcess behind cllecting data and creating a basic Sankey diagram Lk further int hw a mre cmplex diagram is created Ggle Charts fr Institutinal Research Other charts available Dashbards in Ggle Charts

4 WHAT IS A SANKEY DIAGRAM? Originally created t shw efficiency f a steam engine by Captain Matthew Henry Phineas Riall Sankey in 1898 (Surce: Wikipedia) Flw diagram Used t visualize flw f a system, transfer f items, mvement f gds Thickness f line represents magnitude f flw

5 EXAMPLES OF SANKEY DIAGRAMS Simple Sankey Diagram f a Lightbulb Multi Level Sankey Energy Diagram

6 BASIC VOCABULARY Ndes: Represent surces and destinatins f flws Cities, Universities, Academic Departments, Accunts Links: Links indicate that there exists flw between the ndes it cnnects Weight: Als knwn as the thickness. The higher the weight f the link, the thicker it is

7 SANKEY DIAGRAMS FOR IR Useful where there is mvement Student transitins Majr changes, Time t degree, Transfer destinatins Transactinal data Finance, Student Financial Aid, Research Expenditures, HR Data Example: Tracking a chrt (Fall 2010 SBU FTFT t their 4 th Fall) Example 1

8 SANKEY EXAMPLE: IPEDS SFA IPEDS SFA Data frm Stny Brk Ttal financial aid Schlarships/Grants vs Lans Aid surce Example 2

9 MAJOR CHANGES AT STONY BROOK UNIVERSITY Clser lk at Stny Brk University FTFT 2010 students Lking by Majr grupings Lking fr retentin/graduatin interventins: undeclared? Fr nw, lk at ne year change (Fall t Fall) Immediate bservatins Majrity d nt leave Questins abut thse nt returning: In line with ther majrs? Example 1.1

10 MAJOR CHANGES AT STONY BROOK UNIVERSITY T answer this questin, let s lk at students wh dn t return Observatins Nt ut f line with ther majrs Benefits Nt a list f numbers and percentages Easy t visualize Example 1.2

11 MAJOR MIGRATION AT STONY BROOK UNIVERSITY Add majr grupings t initial chrt tracking example (Example 1) Example 1.3

12 MAJOR MIGRATION TAKEAWAYS What des this diagram shw us? What des it shw decisin makers? Helps t shw cmplexity t decisin makers and thse making requests Demnstrate trends in flw, r currents Highlight prblem areas: high transfer ut, high attritin, Can als shw successes Prmpt further investigatin int previusly unnticed subgrups r trends SBU case specific examples SOMAS High ut, lw in CEAS AMS in, engineering ut Undeclared students persist, d nt leave at as significantly different rates as thught Majr alne will nt give us a target What des the Sankey help t shw

13 CREATING SANKEY DIAGRAMS Several ptins fr creating Sankey diagrams (sme thers listed at end) Sankey diagram included as part f Ggle Charts Clean, straightfrward, and des nt require a backgrund in cding (I am nt a prgrammer!) Replicable and easily editable t accmmdate data changes r new prject Can be cmbined t create dashbards with ther Ggle Charts We will examine the cde behind sme simple Sankey diagrams Creating the diagram nly invlves changing ne sectin f the cde prvided by Ggle Users can mdify mre if they like

14 THE CODE FOR EXAMPLE 1.2

15 CREATING YOUR OWN SANKEY DIAGRAM This is the nly sectin that needs t change: The links and weights Sme example cde can be fund n Ggle s webpage

16 HOW TO CREATE YOUR OWN SANKEY DIAGRAM Basic Steps 1. Define ndes, links, and weights 2. Gather data (enrllments fr this example) 3. Create cde fr ndes and links using data 4. Insert the cde, replacing ld ndes and links 5. Run cde in HTML editr, yu re dne! Ging Further Edit Ggle chart ptins Edit HTML ptins (nt cvered in this presentatin) Let s try it

17 Build the Majr Migratin Sankey frm Example 1.2 BASIC STEPS: DEFINE NODES AND LINKS The fllwing structure is used Ndes: Majr grups by fall terms (Ex: Engineering Fall 2010) Links: Links represent mvement between the tw majr grups they cnnect (the year f the mvement is als specified by which ndes are cnnected we limit t ne year mvements) Weights: Dentes the amunt f students mving between the tw prgram grups in the represented time frame Nt all definitins will be the same. Ensure yu will be able t demnstrate what yu are trying t shw Initial attempts at this example led t adding a year cmpnent t the nde labeling Initial chrt nde helps with start distributin

18 BASIC STEPS: GATHER DATA Need enrllment data, stred in a spreadsheet Pulled frm enrllment recrds Create a panel that shws enrllment in ne fall and then subsequent fall enrllment Fr SBU, data stred n majr, schl/cllege, graduatin status, cllege/divisin (lcal gruping f majrs t reduce number f links) Summary sheet fr ttal changes: will use t create cde Pivt table

19 Rws create ndes, links, and their relatinship BASIC STEPS: CREATE CODE Clumns inside each rw are: Surce Where des the flw start? Destinatin Where des the flw g? Value Hw much flw? Rw cde frmat: [ Surce, Destinatin, Value], [ Surce, Destinatin, Value ], Nte: ORDER MATTERS Must start and end with pen bracket: [ Include single qutes arund nde names: Separate surce, destinatin and value with cmmas. Als, separate EACH rw entry with a cmma (except fr the final entry):, Use a cncatenate frmula in yur spreadsheet t create rws in this frmat

20 BASIC STEPS: INSERT CODE Leave Replace This sample is frm example 1.2. Yu can use any previus Sankey cde t start. Leave Cpy basic example cde frm Ggle Sankey page r cde frm a previus diagram yu created Place in editr (Ntepad, Ntepad++, HTML nline editr, JSFiddle ) Leave the first and last lines data.addrw([ ]); Remve links in between these lines, and add yur links Make sure last link des NOT end with a cmma, the cde will nt wrk

21 BASIC STEPS: RUN CODE Ntepad Save as.htm, pen file with internet brwser Ntepad++ Save file, use run ptin t run in a brwser HTML editr - updates in real time JS Fiddle - need sme HTML experience, since Javascript and HTML is separated by this editr

22 GOING FURTHER: OPTIONS Optins are entered with the fllwing frmat Example: var ptins = {nde: {label: {bld: true, fnt: Arial } } } Declare the ptins variable Open the nde ptins Open label categry within nde ptins Make label fnt bld Set label fnt t Arial Clse the nde and label sectins Available ptin categries Sankey (Nde, Link, and Iteratins subcategries Nde and Link are shwn n next page) Height Width frcelframe Tltips (can be used t change hver effect)

23 GOING FURTHER: OPTIONS Sankey Link Clr Fill FillOpacity Strke StrkeWidth Sankey Nde Label FntName FntSize Clr Bld Italic LabelPadding NdePadding Width

24 GOING EVEN FURTHER Multi level Sankey Diagrams are cded in the same manner Keep adding links Lgical flw (Example, F10 t F11, F11 t F12, ) Add in rder fr rganizatin, Ggle will add them in best fit SBU migratin has hundreds f links Still created in the same manner Pivt tables and cncatenate in Excel Optins will be key fr Visualizatin Use nde padding and sizing, label padding and sizing Change chart size

25 OTHER CHARTS AVAILABLE FROM GOOGLE CHARTS Traditinal Graphs Area Charts (Traditinal and Stepped) Bar Charts Clumn Charts Cmb Charts Diagrams Bubble Charts Bx and Whisker Plts (Candlestick Charts) Calendar Charts Gauge Charts Histgrams Intervals Line Charts Pie Charts ScatterCharts Time Series (Anntated) Trend lines Gegraphic Charts Organizatinal Charts Tables Timelines Tree Map Charts Wrd Trees **User created cmmunity charts are als available**

26 DASHBOARDS Dashbards allw cmbinatin f charts and cntrls Cntrls act as filters Categry (Pick frm available), String (Search), ChartRange, DateRange, NumberRange Custmizable filter ptins (Examples: starting states, allw ne chice nly ) Can use same data surce acrss multiple charts and filters, r multiple data surces Can cntrl ne r many charts with filter; can use multiple filters per chart

27 DASHBOARD EXAMPLE

28 DASHBOARD EXAMPLE CONTINUED Department Categry Filter set t Applied Math Year Categry Filter set Secnd pie chart set t nly change with Level Categry Filter

29 OTHER SOURCES FOR CREATING SANKEY DIAGRAMS Cnnecting t Data Ggle charts allws cnnectin t yur database with php and a.jsn file Other Resurces fr Creating Sankey Diagrams D3.js Javascript Visualizatin library Pwerful, with mre ptins than Ggle Charts Mre cmplex Tableau Requires manipulatin Nt flexible, very cmplicated

30 Thank yu! Examples will be psted n ur Webpage within the next week viz.html Cntact infrmatin [email protected]