Taking a network view of EHR and Biobank data to find explainable multivariate patterns

# Taking a network view of EHR and Biobank data to find explainable multivariate patterns
### Nick Strayer
### 2019-04-03

---

# Talk outline

![:space 6]()
- Electronic medical records

- PheWAS

- Changing how we ![:colorText orangered](think about) these data

- Multimorbidity explorer

- Changing how we ![:colorText orangered](model) these data

- The stochastic block model

- Applying to real data

- Future directions

---

# Electronic medical records (EHR)

![:space 1]()

In an effort to make healthcare more efficient EHR systems have become common in the US.

![:space 3]()
.pull-left[
<i class="fas  fa-file-invoice-dollar fa-lg fa-fw " style="color:#e34a33;"></i> While originally made for billing purposes there is still a huge sum of information that, with careful effort, _hopefully_, can be extracted for research.

]
.pull-right[

<i class="fas  fa-search fa-lg fa-fw " style="color:#e34a33;"></i> In this presentation I will focus on the subset of EHR pertaining to billing codes: ICD9, ICD10, and Phecodes.
]
![:space 4]()

![:centerPic 35](https://securecdn.pymnts.com/wp-content/uploads/2018/03/bigdata.jpg) ![:small 0.6]([image source](https://www.pymnts.com/data/2018/datatorrent-jeff-bettencourt-real-time-big-data/))

---
# Biobanks

![:space 6]

<i class="fas  fa-piggy-bank fa-lg fa-fw " style="color:#e34a33;"></i> Some hospitals have repositories of biological samples that can be matched to their EHR.

![:space 8]

<i class="fas  fa-syringe fa-lg fa-fw " style="color:#e34a33;"></i> Data could be anything from plain unprocessed-plasma all the way to full single-cell sequencing.

![:space 8]

<i class="fas  fa-dna fa-lg fa-fw " style="color:#e34a33;"></i> Here I will focus on plain SNP-chip readings, aka presence or absence of a given marker at multiple points on the genome.

---

# PheWAS

![:space 5]

In an effort to extract information from these data the technique PheWAS was made.

![:space 8]

![:borderedCenterPic 80](figures/phewas-paper-head.png)

---

## Concept
![:space 5]

![:centerPic 90](figures/phewas-explainer.svg)

---

## The univariate problem

![:space 15]()

<i class="fas  fa-hand-point-up fa-lg fa-fw " style="color:#e34a33;"></i> PheWAS looks at one genotype <i class="fas  fa-arrow-right "></i> phenotype association at a time.

![:space 12]()

.pull-left[
<i class="fas  fa-stream fa-lg fa-fw " style="color:#e34a33;"></i> This gives us the multiple-comparisons problem.
]
.pull-right[
<i class="fas  fa-project-diagram fa-lg fa-fw " style="color:#e34a33;"></i>Also, does the world work like this? 
]

---

# Changing how we  ![:colorText orangered](think about) these data

![:centerPic 95](figures/obs-2-network.svg)

---
# Multimorbidity explorer

![:space 14]()

![:borderedCenterPic 80](figures/me_paper_abstract.png)

---
## What it is

Application that allows researchers to explore the results of PheWAS studies along with investigating individual-level data that produced those results using ![:colorText orangered](interactive visualizations.) 
    
    
<div id="htmlwidget-de66f792df0d44653f48" style="width:100%;height:60%;" class="r2d3 html-widget"></div>
<script type="application/json" data-for="htmlwidget-de66f792df0d44653f48">{"x":{"data":{"edges":[{"source":124,"target":201},{"source":4,"target":202},{"source":14,"target":202},{"source":46,"target":202},{"source":94,"target":202},{"source":114,"target":202},{"source":131,"target":202},{"source":133,"target":202},{"source":134,"target":202},{"source":143,"target":202},{"source":166,"target":202},{"source":167,"target":202},{"source":185,"target":202},{"source":196,"target":202},{"source":197,"target":202},{"source":14,"target":203},{"source":85,"target":203},{"source":109,"target":203},{"source":112,"target":203},{"source":137,"target":203},{"source":155,"target":203},{"source":156,"target":203},{"source":170,"target":203},{"source":188,"target":203},{"source":4,"target":204},{"source":7,"target":204},{"source":10,"target":204},{"source":20,"target":204},{"source":28,"target":204},{"source":36,"target":204},{"source":42,"target":204},{"source":47,"target":204},{"source":53,"target":204},{"source":54,"target":204},{"source":57,"target":204},{"source":60,"target":204},{"source":62,"target":204},{"source":63,"target":204},{"source":77,"target":204},{"source":78,"target":204},{"source":81,"target":204},{"source":84,"target":204},{"source":94,"target":204},{"source":109,"target":204},{"source":111,"target":204},{"source":116,"target":204},{"source":120,"target":204},{"source":127,"target":204},{"source":131,"target":204},{"source":135,"target":204},{"source":141,"target":204},{"source":145,"target":204},{"source":159,"target":204},{"source":165,"target":204},{"source":172,"target":204},{"source":177,"target":204},{"source":192,"target":204},{"source":194,"target":204},{"source":33,"target":205},{"source":38,"target":205},{"source":58,"target":205},{"source":64,"target":205},{"source":70,"target":205},{"source":124,"target":205},{"source":125,"target":205},{"source":129,"target":205},{"source":143,"target":205},{"source":169,"target":205},{"source":177,"target":205},{"source":189,"target":205},{"source":200,"target":205},{"source":2,"target":206},{"source":7,"target":206},{"source":28,"target":206},{"source":78,"target":206},{"source":154,"target":206},{"source":165,"target":206},{"source":169,"target":206},{"source":173,"target":206},{"source":200,"target":206}],"vertices":[{"index":2,"snp_status":0,"name":"case 2","color":"#bdbdbd","size":0.1,"selectable":false,"id":2},{"index":4,"snp_status":0,"name":"case 4","color":"#bdbdbd","size":0.1,"selectable":false,"id":4},{"index":7,"snp_status":0,"name":"case 7","color":"#bdbdbd","size":0.1,"selectable":false,"id":7},{"index":10,"snp_status":0,"name":"case 10","color":"#bdbdbd","size":0.1,"selectable":false,"id":10},{"index":14,"snp_status":0,"name":"case 14","color":"#bdbdbd","size":0.1,"selectable":false,"id":14},{"index":20,"snp_status":0,"name":"case 20","color":"#bdbdbd","size":0.1,"selectable":false,"id":20},{"index":28,"snp_status":0,"name":"case 28","color":"#bdbdbd","size":0.1,"selectable":false,"id":28},{"index":33,"snp_status":1,"name":"case 33","color":"orangered","size":0.1,"selectable":false,"id":33},{"index":36,"snp_status":0,"name":"case 36","color":"#bdbdbd","size":0.1,"selectable":false,"id":36},{"index":38,"snp_status":0,"name":"case 38","color":"#bdbdbd","size":0.1,"selectable":false,"id":38},{"index":42,"snp_status":1,"name":"case 42","color":"orangered","size":0.1,"selectable":false,"id":42},{"index":46,"snp_status":0,"name":"case 46","color":"#bdbdbd","size":0.1,"selectable":false,"id":46},{"index":47,"snp_status":0,"name":"case 47","color":"#bdbdbd","size":0.1,"selectable":false,"id":47},{"index":53,"snp_status":0,"name":"case 53","color":"#bdbdbd","size":0.1,"selectable":false,"id":53},{"index":54,"snp_status":0,"name":"case 54","color":"#bdbdbd","size":0.1,"selectable":false,"id":54},{"index":57,"snp_status":0,"name":"case 57","color":"#bdbdbd","size":0.1,"selectable":false,"id":57},{"index":58,"snp_status":1,"name":"case 58","color":"orangered","size":0.1,"selectable":false,"id":58},{"index":60,"snp_status":0,"name":"case 60","color":"#bdbdbd","size":0.1,"selectable":false,"id":60},{"index":62,"snp_status":0,"name":"case 62","color":"#bdbdbd","size":0.1,"selectable":false,"id":62},{"index":63,"snp_status":0,"name":"case 63","color":"#bdbdbd","size":0.1,"selectable":false,"id":63},{"index":64,"snp_status":0,"name":"case 64","color":"#bdbdbd","size":0.1,"selectable":false,"id":64},{"index":70,"snp_status":0,"name":"case 70","color":"#bdbdbd","size":0.1,"selectable":false,"id":70},{"index":77,"snp_status":0,"name":"case 77","color":"#bdbdbd","size":0.1,"selectable":false,"id":77},{"index":78,"snp_status":0,"name":"case 78","color":"#bdbdbd","size":0.1,"selectable":false,"id":78},{"index":81,"snp_status":0,"name":"case 81","color":"#bdbdbd","size":0.1,"selectable":false,"id":81},{"index":84,"snp_status":0,"name":"case 84","color":"#bdbdbd","size":0.1,"selectable":false,"id":84},{"index":85,"snp_status":0,"name":"case 85","color":"#bdbdbd","size":0.1,"selectable":false,"id":85},{"index":94,"snp_status":0,"name":"case 94","color":"#bdbdbd","size":0.1,"selectable":false,"id":94},{"index":109,"snp_status":0,"name":"case 109","color":"#bdbdbd","size":0.1,"selectable":false,"id":109},{"index":111,"snp_status":0,"name":"case 111","color":"#bdbdbd","size":0.1,"selectable":false,"id":111},{"index":112,"snp_status":0,"name":"case 112","color":"#bdbdbd","size":0.1,"selectable":false,"id":112},{"index":114,"snp_status":0,"name":"case 114","color":"#bdbdbd","size":0.1,"selectable":false,"id":114},{"index":116,"snp_status":0,"name":"case 116","color":"#bdbdbd","size":0.1,"selectable":false,"id":116},{"index":120,"snp_status":0,"name":"case 120","color":"#bdbdbd","size":0.1,"selectable":false,"id":120},{"index":124,"snp_status":0,"name":"case 124","color":"#bdbdbd","size":0.1,"selectable":false,"id":124},{"index":125,"snp_status":0,"name":"case 125","color":"#bdbdbd","size":0.1,"selectable":false,"id":125},{"index":127,"snp_status":0,"name":"case 127","color":"#bdbdbd","size":0.1,"selectable":false,"id":127},{"index":129,"snp_status":0,"name":"case 129","color":"#bdbdbd","size":0.1,"selectable":false,"id":129},{"index":131,"snp_status":0,"name":"case 131","color":"#bdbdbd","size":0.1,"selectable":false,"id":131},{"index":133,"snp_status":0,"name":"case 133","color":"#bdbdbd","size":0.1,"selectable":false,"id":133},{"index":134,"snp_status":0,"name":"case 134","color":"#bdbdbd","size":0.1,"selectable":false,"id":134},{"index":135,"snp_status":0,"name":"case 135","color":"#bdbdbd","size":0.1,"selectable":false,"id":135},{"index":137,"snp_status":0,"name":"case 137","color":"#bdbdbd","size":0.1,"selectable":false,"id":137},{"index":141,"snp_status":0,"name":"case 141","color":"#bdbdbd","size":0.1,"selectable":false,"id":141},{"index":143,"snp_status":1,"name":"case 143","color":"orangered","size":0.1,"selectable":false,"id":143},{"index":145,"snp_status":0,"name":"case 145","color":"#bdbdbd","size":0.1,"selectable":false,"id":145},{"index":154,"snp_status":1,"name":"case 154","color":"orangered","size":0.1,"selectable":false,"id":154},{"index":155,"snp_status":0,"name":"case 155","color":"#bdbdbd","size":0.1,"selectable":false,"id":155},{"index":156,"snp_status":0,"name":"case 156","color":"#bdbdbd","size":0.1,"selectable":false,"id":156},{"index":159,"snp_status":0,"name":"case 159","color":"#bdbdbd","size":0.1,"selectable":false,"id":159},{"index":165,"snp_status":0,"name":"case 165","color":"#bdbdbd","size":0.1,"selectable":false,"id":165},{"index":166,"snp_status":1,"name":"case 166","color":"orangered","size":0.1,"selectable":false,"id":166},{"index":167,"snp_status":0,"name":"case 167","color":"#bdbdbd","size":0.1,"selectable":false,"id":167},{"index":169,"snp_status":0,"name":"case 169","color":"#bdbdbd","size":0.1,"selectable":false,"id":169},{"index":170,"snp_status":0,"name":"case 170","color":"#bdbdbd","size":0.1,"selectable":false,"id":170},{"index":172,"snp_status":0,"name":"case 172","color":"#bdbdbd","size":0.1,"selectable":false,"id":172},{"index":173,"snp_status":0,"name":"case 173","color":"#bdbdbd","size":0.1,"selectable":false,"id":173},{"index":177,"snp_status":0,"name":"case 177","color":"#bdbdbd","size":0.1,"selectable":false,"id":177},{"index":185,"snp_status":0,"name":"case 185","color":"#bdbdbd","size":0.1,"selectable":false,"id":185},{"index":188,"snp_status":0,"name":"case 188","color":"#bdbdbd","size":0.1,"selectable":false,"id":188},{"index":189,"snp_status":0,"name":"case 189","color":"#bdbdbd","size":0.1,"selectable":false,"id":189},{"index":192,"snp_status":0,"name":"case 192","color":"#bdbdbd","size":0.1,"selectable":false,"id":192},{"index":194,"snp_status":0,"name":"case 194","color":"#bdbdbd","size":0.1,"selectable":false,"id":194},{"index":196,"snp_status":1,"name":"case 196","color":"orangered","size":0.1,"selectable":false,"id":196},{"index":197,"snp_status":0,"name":"case 197","color":"#bdbdbd","size":0.1,"selectable":false,"id":197},{"index":200,"snp_status":0,"name":"case 200","color":"#bdbdbd","size":0.1,"selectable":false,"id":200},{"index":201,"snp_status":0,"name":"071.00","color":"#7245ce","tooltip":"<h2>071.00<\/h2>","inverted":false,"size":0.3,"selectable":true,"id":201},{"index":202,"snp_status":0,"name":"401.22","color":"#d54c3b","tooltip":"<h2>401.22<\/h2>","inverted":false,"size":0.3,"selectable":true,"id":202},{"index":203,"snp_status":0,"name":"401.30","color":"#d54c3b","tooltip":"<h2>401.30<\/h2>","inverted":false,"size":0.3,"selectable":true,"id":203},{"index":204,"snp_status":0,"name":"411.00","color":"#d54c3b","tooltip":"<h2>411.00<\/h2>","inverted":false,"size":0.3,"selectable":true,"id":204},{"index":205,"snp_status":0,"name":"411.10","color":"#d54c3b","tooltip":"<h2>411.10<\/h2>","inverted":false,"size":0.3,"selectable":true,"id":205},{"index":206,"snp_status":0,"name":"578.90","color":"#73d54a","tooltip":"<h2>578.90<\/h2>","inverted":false,"size":0.3,"selectable":true,"id":206}]},"type":"json","container":"div","options":{"viz_type":"free","update_freq":1},"script":"var d3Script = function(d3, r2d3, data, div, width, height, options, theme, console) {\nthis.d3 = d3;\n/* R2D3 Source File:  /Users/nick/Dropbox/research/presentations/department_seminar/js/helpers.js */\n// Helper functions for network plot\n\nfunction unique(data, key){\n  return d3.set(data).values();\n};\n\n// Sets up size object given a width and height and the constants object for sizing viz\nfunction setup_sizes(width, height, C){\n  return {\n    width: width,\n    height: height,\n    margin: C.margin,\n    w: width - (C.margin.left + C.margin.right),\n    h: height - (C.margin.top + C.margin.bottom),\n  };\n}\n\n\n// Function to make sure data conforms to the format we want\nfunction sanitize_data(data){\n  const data_props = Object.keys(data);\n\n  return {\n    nodes: data_props.includes('vertices') ? data.vertices : data.nodes,\n    links: data_props.includes('edges') ? data.edges : data.links,\n  };\n};\n\n\n// Function to add a dx or dy point to nodes for fixing them on a line in force simulation\nfunction fix_nodes_to_line(data, C){\n  data.nodes.forEach(d => {\n    if(d.selectable){\n      d.fx = -1;\n    } else {\n      d.fx = 1;\n    }\n\n  });\n  return data;\n}\n\n\n// Function to find all nodes that a given node is connected to.\nfunction find_connections(node_id, edges){\n  return edges\n    .filter(d => (d.target.name === node_id) || (d.source.name === node_id))\n    .map(d => d.source.name === node_id ? d.target.name : d.source.name);\n}\n\n\n// Function to send a message back to shiny\nfunction send_to_shiny(type, codes, C){\n\n  // Only try and send a message if we have codes to do so.\n  if(codes.length === 0) return;\n\n  // Build message\n  const message_body = {\n    type: type,\n    // append the date to the begining so sent value always changes.\n    payload: [Date.now().toString(), ...codes]\n  };\n\n  // Send message off to server\n  if(typeof Shiny !== 'undefined'){\n    Shiny.onInputChange(C.msg_loc, message_body);\n  } else {\n    console.log('sending message to shiny');\n  }\n};\n\n\n// Function to setup overlaid canvas and svg\nfunction setup_dom_elements(div, C, on_message){\n  // Make div relatively positioned so we can overlay svg and canvas\n  div.style('position', 'relative');\n\n  // Append the svg and padded g element\n  const svg = div.selectAppend('svg')\n    .html('') // wipe svg content if need be\n    .style('position', 'absolute');\n\n  // Append the canvas\n  const canvas = div.selectAppend('canvas');\n  const context = canvas.node().getContext('2d');\n\n  const tooltip = setup_tooltip(div, C);\n\n  const message_buttons = setup_message_buttons(div, on_message);\n\n  const resize = function({width, height}){\n    const viz_sizing = {\n      height: height,\n      width: width,\n    };\n\n    svg.at(viz_sizing)\n       .st(viz_sizing);\n\n    canvas.at(viz_sizing);\n  };\n\n  return {svg, canvas, context, tooltip, message_buttons, resize};\n}\n\n\n// Function to initialize a tooltip for showing mousover info\n// Appends a tooltip to a div and opens up methods to move it around, show, hide, and update contents\nfunction setup_tooltip(div, C){\n\n  const tip = div.selectAppend('div.tooltip')\n    .st({\n      background: 'white',\n      borderRadius: '10px',\n      padding: '0px 15px',\n      boxShadow: '1px 1px 3px black',\n      position: 'absolute',\n    });\n\n  const tip_body = tip.selectAppend('div.body');\n\n  const move = function(pos){\n    tip\n      .style('left', `${pos[0] + C.tooltip_offset}px`)\n      .style('top',  `${pos[1]}px`);\n\n    return this;\n  };\n\n  const show = function(){\n    tip.style('display', 'block');\n    return this;\n  };\n\n  const hide = function(){\n    tip.style('display', 'none');\n    return this;\n  };\n\n  const update = function(content){\n    tip_body.html(content);\n    return this;\n  };\n\n  // start with tooltip hidden\n  hide();\n\n  return {move, show, hide, update};\n}\n\n\n// Function to setup the message sending buttons to send codes to shiny\nfunction setup_message_buttons(div, message_send_func){\n  const button_span = {\n    border: \"1px solid black\",\n    padding: \"5px\",\n    borderRadius: \"8px\",\n    boxShadow: \"black 1px 1px 0px\",\n    background: \"lightyellow\",\n    cursor: \"pointer\",\n    paddingRight: \"5px\"\n  };\n\n  const hidden_style = {\n    display: 'none',\n    left: -1000\n  };\n\n  const displayed_style = {\n    bottom: '10px',\n    left: '10px',\n    display:'block'\n  };\n\n  const node_interaction_popup = div.selectAppend('div.node_message_buttons')\n    .attr('class', 'node_interaction_popup')\n    .st({\n      background:'white',\n      position:'absolute',\n      display: 'none'\n    });\n\n  const delete_codes_button = node_interaction_popup\n    .selectAppend('span#delete_button')\n    .attr('id', 'delete_button')\n    .st(button_span)\n    .text('Delete Codes')\n    .on('click', () => {\n      message_send_func('delete');\n    });\n\n  const isolate_codes_button = node_interaction_popup\n    .selectAppend('span#isolate_button')\n    .attr('id', 'isolate_button')\n    .st(button_span)\n    .text('Isolate Codes')\n    .on('click', () => {\n      message_send_func('isolate');\n    });\n\n  const invert_codes_button = node_interaction_popup\n    .selectAppend('span#invert_button')\n    .attr('id', 'invert_button')\n    .st(button_span)\n    .text('Invert Codes')\n    .on('click', () => {\n      message_send_func('invert');\n    });\n\n  return {\n    show: () => node_interaction_popup.st(displayed_style),\n    hide: () => node_interaction_popup.st(hidden_style),\n  };\n}\n\n\n// Function to setup a progress meter\nfunction setup_progress_meter(svg, C){\n  const roundness = 5;\n\n  // Append a g for holding meter\n  const meter = svg.append('g.progress_meter');\n\n  const calculating_message = meter.selectAppend('text.message')\n    .text('Calculating network layout')\n    .at({\n      y: C.progress_bar_height + 5,\n      opacity: 0,\n    })\n    .st({\n      alignmentBaseline: 'hanging',\n      textAnchor: 'middle',\n      fontSize: '1.5em',\n      userSelect: \"none\",\n    });\n\n  // Add a rectangle to act as background showing finishing point\n  const background = meter.append('rect.background')\n    .at({\n      height: C.progress_bar_height,\n      fill: 'lightgrey',\n      stroke: 'grey',\n      strokeWidth: 1,\n      rx: roundness,\n    });\n\n  // Add rectangle to 'fill up'\n  const fill_bar = meter.append('rect.fill_bar')\n    .at({\n      height: C.progress_bar_height,\n      fill: C.progress_bar_color,\n      rx: roundness,\n    });\n\n  // For easy transitioning of both bars on show/hide\n  const all_bars = meter.selectAll('rect');\n\n  // Add text that write's out progress\n  const progress_text = meter.append('text.progress_text')\n    .at({\n      y: C.progress_bar_height - 3,\n    })\n    .st({\n      alignmentBaseline: 'bottom',\n      fontSize: 20,\n    });\n\n  // Function to update meter with new progress\n  const update = (prop_done) => {\n\n    const full_width = +background.attr('width');\n    const fill_position = full_width*prop_done;\n\n    // Raise meter to top of viz;\n    meter.raise();\n\n    // Make sure all bars are visible\n    all_bars.attr('height', C.progress_bar_height);\n\n    // Update width of fill bar\n    fill_bar.attr('width', fill_position);\n\n\n    // Update text\n    progress_text\n      .attr('x', fill_position + 2)\n      .text(d3.format(\".0%\")(prop_done));\n\n    // Make sure all text is visible\n    meter.selectAll('text').attr('opacity', 1);\n  };\n\n  const resize = ({width, height}) => {\n    // Update the general size of progress bar in case we have resized viz.\n    background.attr('width', width);\n    calculating_message.attr('x', width/2);\n  };\n\n  // Function to hide meter\n  const hide = () => {\n\n    const t = d3.transition()\n      .duration(750)\n      .ease(d3.easeLinear);\n\n    meter.selectAll('rect')\n      .transition(t)\n      .attr('height', 0);\n\n    meter.selectAll('text')\n      .transition(t)\n      .attr('opacity', 0)\n      .text('');\n  };\n\n  return {update, hide, resize};\n}\n\n\n// Simulation webworker function\nfunction sim_webworker(update_freq){\n  importScripts(\"https://d3js.org/d3-collection.v1.min.js\");\n  importScripts(\"https://d3js.org/d3-dispatch.v1.min.js\");\n  importScripts(\"https://d3js.org/d3-quadtree.v1.min.js\");\n  importScripts(\"https://d3js.org/d3-timer.v1.min.js\");\n  importScripts(\"https://d3js.org/d3-force.v1.min.js\");\n\n  onmessage = function(event) {\n    const nodes = event.data.nodes;\n    const links = event.data.links;\n    const centering_force = d => d.selectable ? 0.5: 0;\n\n    const simulation = d3.forceSimulation(nodes)\n      .force(\n        \"link\",\n        d3.forceLink(links)\n          .id(d => d.id)\n          .distance(0.2)\n          .strength(0.8)\n      )\n      .force(\n        'collision',\n        d3.forceCollide()\n          .radius(d => d.selectable ? 10: 3)\n          .strength(0.4)\n      )\n      .force(\n        \"charge\",\n        d3.forceManyBody()\n      )\n      .force(\n        \"X\",\n        d3.forceX()\n          .strength(centering_force)\n      )\n      .force(\n        \"Y\",\n        d3.forceY()\n          .strength(centering_force)\n      );\n\n    const num_itts = Math.ceil((Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())));\n    let i = 0;\n\n    // How often in terms of number of iterations do we send current progress back?\n    simulation.on('tick', () => {\n      i++;\n      postMessage({type: \"progress_report\", progress: i / num_itts});\n      if((i % update_freq) === 0){\n        postMessage({type: 'layout_data', nodes: nodes, links: links});\n      }\n    });\n\n    simulation.on('end', () => {\n      postMessage({type: \"end\", nodes: nodes, links: links});\n    });\n  };\n}\n\n// Function to draw canvas parts of network\nfunction draw_canvas_portion({nodes, links}, scales, {canvas, context}, C, highlighted_nodes = []){\n\n  // Clear canvas\n  context.clearRect(0, 0, +canvas.attr('width'), +canvas.attr('height'));\n  context.save();\n  // Scale edge opacity based upon how many edges we have\n  context.globalAlpha = d3.scaleLinear().domain([0,5000]).range([0.5, 0.01])(links.length);\n\n  context.beginPath();\n  links.forEach(d => {\n    context.moveTo(scales.X(d.source.x), scales.Y(d.source.y));\n    context.lineTo(scales.X(d.target.x), scales.Y(d.target.y));\n  });\n\n  // Set color of edges\n  context.strokeStyle = C.edge_color;\n\n  // Draw to canvas\n  context.stroke();\n\n  // Draw patient nodes\n  context.globalAlpha = C.case_opacity;\n\n  // Function to assign node highlights\n  // Only check for highlight modification if we need to to avoid expensive calculations\n  const node_border = d => highlighted_nodes.length != 0 ?\n    `rgba(0, 0, 0, ${highlighted_nodes.includes(d.name) ? 1 : 0})` :\n    `rgba(0, 0, 0, 0)`;\n\n\n  nodes.forEach( d => {\n    if(!d.selectable){\n\n      // Border around the nodes.\n      context.strokeStyle = node_border(d);\n\n      context.fillStyle = d.color;\n\n      context.beginPath();\n      context.arc(scales.X(d.x), scales.Y(d.y), C.case_radius, 0, 2 * Math.PI);\n      context.fill();\n      context.stroke();\n    }\n  });\n\n}\n\n\n// Function to draw svg parts of network\nfunction draw_svg_nodes({nodes, links}, scales, {svg, canvas, context, tooltip}, C, on_click, on_mouseover){\n\n  const x_max = scales.X.range()[1];\n  const y_max = scales.Y.range()[1];\n\n  const choose_stroke_width = (d) => {\n    const selected = selected_codes.includes(d.name);\n\n    return d.inverted ? 3:\n           selected ? 2 : 0;\n  };\n\n  const node_attrs = {\n    r: d => C.case_radius*(d.selectable ? C.code_radius_mult: 1),\n    cx: d => scales.X(d.x),\n    cy: d => scales.Y(d.y),\n    stroke: d => d.inverted ?  d.color: 'black',\n    strokeWidth: choose_stroke_width,\n    fill: d => d.inverted ? 'white': d.color,\n  };\n\n  // Bind data but only the phenotype nodes\n  const node_circles = svg.selectAll('circle')\n    .data(nodes.filter(d => d.selectable), d => d.id);\n\n\n  const all_nodes = node_circles.enter()\n    .append('circle')\n    .at({\n      r: 0,\n      cx: d => Math.random()*x_max,\n      cy: d => Math.random()*y_max,\n    })\n    .merge(node_circles)\n    .at(node_attrs);\n\n  // Add mouseover behavior for nodes that are selectable\n  all_nodes\n    .on('mouseover', function(d){\n      on_mouseover(d);\n\n      // Redraw the canvas part of the viz with these highlights\n      //draw_canvas_portion({nodes, links}, scales, {canvas, context}, C, connected_nodes);\n\n      tooltip\n        .move([scales.X(d.x), scales.Y(d.y)])\n        .update(d.tooltip)\n        .show();\n    })\n    .on('mouseout', function(d){\n      tooltip.hide();\n\n      // Reset nodes that may have been highlighted\n      draw_canvas_portion({nodes, links}, scales, {canvas, context}, C);\n    })\n    .on('click', on_click);\n}\n\n\n// Logic for what is done when a node is clicked.\nfunction on_node_click(d){\n  const node = d3.select(this);\n\n  // Is code already selected?\n  if(selected_codes.includes(d.name)){\n    // pull code out of selected list\n    selected_codes = selected_codes.filter(code => code !== d.name);\n\n    // reset the style of node\n    node.attr(\"stroke-width\", 0);\n\n  } else {\n    // add code to selected codes list\n    selected_codes = [d.name, ...selected_codes];\n\n    // Outline node to emphasize highlight\n     node.attr(\"stroke-width\", 2);\n  }\n\n  // do we have selected codes currently? If so display the action popup.\n  if(selected_codes.length > 0){\n    dom_elements.message_buttons.show();\n  } else {\n    dom_elements.message_buttons.hide();\n  }\n};\n\n\n// Finds which patient nodes contain a given pattern of codes.\nfunction find_patients_by_pattern({nodes, links}, pattern){\n\n  if(pattern.length === 1){\n    return find_connections(pattern[0], links);\n  }\n\n  return Object.values(\n    links.reduce(\n      (acc, d) => {\n        const patient = d.source.name;\n        const code = d.target.name;\n        // Only add the code if we need to.\n        if(pattern.includes(code)){\n          patient_info = acc[patient] || {};\n          patient_codes = patient_info.codes || [];\n          patient_info.codes = [...patient_codes, code];\n          patient_info.name = patient;\n          acc[patient] = patient_info;\n        }\n        return acc;\n      },{} )\n  ).filter(d => d.codes.length == pattern.length)\n   .map(d => d.name);\n\n}\n\n// Builds array of patient to phecode pattern for use in filtering\nfunction build_patient_patterns(data){\n  const nodes = data.nodes || data.vertices;\n  const links = data.links || data.edges;\n\n  const id_to_code = nodes.reduce(\n    (acc, d) => {\n      if(d.selectable){\n        acc[d.id] = d.name;\n      }\n      return acc;\n    },\n    {}\n  );\n\n\n  const patient_to_codes = {};\n\n  for(let i = 0; i < links.length; i++){\n    patient_to_codes[links[i].source] = [...(patient_to_codes[links[i].source] || []), id_to_code[links[i].target]];\n  }\n\n  return nodes.filter(d => !d.selectable).map(d => ({name: d.name, pattern: patient_to_codes[d.id]}));\n}\n\n\n// Test if two datasets are equal for determining if we have new data from render call\nfunction is_new_data(old_data, new_data) {\n  const old_nodes = old_data.nodes || old_data.vertices,\n        new_nodes = new_data.nodes || new_data.vertices;\n\n  if(typeof old_nodes === 'undefined')\n    return true;\n\n  // If node vecs are different lengths data must be new\n  if(old_nodes.length !== new_nodes.length)\n    return true;\n\n  // Next, test if both node sets combined unique nodes is same length as old data\n  const combined_names = unique([...old_nodes, ...new_nodes].map(d => d.name));\n\n  // If we have a different length then we have new data somewhere\n  return combined_names.length !== old_nodes.length;\n}\n\nfunction arrays_equal(arr_1, arr_2){\n  // If vecs are different lengths data must different\n  if(arr_1.length !== arr_1.length)\n    return false;\n\n  // If the union of the two arrays is the same size as both they're the same.\n  const size_of_union = unique([...arr_1, ...arr_2]).length\n  return (size_of_union === arr_1.length) && (size_of_union === arr_2.length);\n}\ndiv = d3.select(div.node());\n/* R2D3 Source File:  /Users/nick/Dropbox/research/presentations/department_seminar/js/network.js */\n// !preview r2d3 data= jsonlite::toJSON(readr::read_rds(here::here('fake_network_data.rds'))), options = list(viz_type = 'free', update_freq = 1, highlighted_pattern = c('401.22', '411.00')), container = 'div', dependencies = c(\"d3-jetpack\",here::here('js/helpers.js'))\n\n\n// Constants object for viz, all can be overwritten if passed a different value\n// with the options argument of r2d3\nconst C = Object.assign(\n  {\n    padding: 20,\n    tooltip_offset: 13,\n    tooltip_height: 60,\n    margin: {right: 20, left: 20, top: 20, bottom: 5},\n    case_radius: 3,\n    code_radius_mult: 4,\n    case_opacity: 1,\n    edge_color: '#aaa',\n    progress_bar_height: 20,\n    progress_bar_color: 'orangered',\n    msg_loc: 'shiny_server',\n    viz_type: 'bipartite',\n    update_freq: 5, // How often do we send back layout simulation progress?\n  },\n  options);\n\n\nfunction setup_webworker(C){\n  let worker;\n\n  // Wrap up function into a fake script to call\n  const worker_url = URL.createObjectURL(\n    new Blob(['('+sim_webworker+`)(${C.update_freq})`])\n  );\n\n  const send_new_job = function(network_data, callbacks){\n\n    if(worker){\n      // If we already have a webworker running make sure to\n      // terminate it so we don't have multiple going at the\n      // same time.\n      worker.terminate();\n    }\n\n    const {on_progress_report, on_finish, on_layout_data} = callbacks;\n\n    // Initialize the worker\n    worker = new Worker(worker_url);\n\n    // Send worker the data we are working with\n    worker.postMessage(network_data);\n\n\n    // Control what is done when a message is received from the webworker\n    worker.onmessage = function(event) {\n      switch (event.data.type) {\n        case \"progress_report\": return on_progress_report(event.data.progress);\n        case \"layout_data\": return on_layout_data(event.data);\n        case \"end\": return on_finish(event.data);\n      }\n    };\n  };\n\n  return send_new_job;\n}\n\n\n// Function to entirely setup network viz.\n// Exposes methods for adding new data and updating the size\nfunction setup_network_viz(dom_elements, on_node_click){\n\n  let layout_data = null,\n      been_sized = false,\n      current_zoom = null,\n      scales = null,\n      patient_patterns = null,\n      nodes_to_highlight = [];\n\n  const X = d3.scaleLinear();\n  const Y = d3.scaleLinear();\n\n  const new_data = function(data){\n\n    const nodes = data.nodes || data.vertices;\n    const links = data.links || data.edges;\n\n    // Remove old network nodes\n    dom_elements.svg.selectAll('circle').remove();\n\n    // Update scale domains\n    X.domain(d3.extent(nodes, d => d.x));\n    Y.domain(d3.extent(nodes, d => d.y));\n\n    // Update function scope's copy of data\n    layout_data = {nodes, links};\n\n    if(been_sized){\n      draw();\n    }\n  };\n\n  const resize = function({width, height, margin}){\n\n    // Update scale ranges\n    X.range([margin.left, width - margin.right]);\n    Y.range([height - margin.bottom, margin.top]);\n\n    // Let scope know we have set a size for the viz.\n    been_sized = true;\n\n    if(layout_data){\n      draw();\n    }\n  };\n\n  const update_scales = function(){\n     // Update scales with the zoom if we have any\n    scales = {\n      X: current_zoom ? current_zoom.rescaleX(X) : X,\n      Y: current_zoom ? current_zoom.rescaleY(Y) : Y,\n    };\n  };\n\n  const draw = function(){\n    // Update scales with the zoom if we have any\n    update_scales();\n\n    // Draw svg nodes of network\n    draw_svg_nodes(layout_data, scales, dom_elements, C, on_node_click, d => highlight([d.name]));\n    draw_canvas_portion(layout_data, scales, dom_elements, C, nodes_to_highlight);\n  };\n\n  const new_patterns = function(patterns){\n    patient_patterns = patterns;\n  };\n\n  const highlight = function(codes_to_highlight){\n    if(layout_data){\n\n      const single_code = typeof codes_to_highlight === 'string';\n\n      // Find the patient nodes who have the pattern we want to highlight\n      const to_highlight = patient_patterns\n        .filter(d => arrays_equal(d.pattern, single_code ? [codes_to_highlight] : codes_to_highlight))\n        .map(d => d.name);\n\n      // Make sure scales are update width current zoom\n      update_scales();\n\n      // Update the canvas to highlight these nodes\n      draw_canvas_portion(layout_data, scales, dom_elements, C, to_highlight);\n    }\n  };\n\n  dom_elements.svg.call(\n    d3.zoom()\n    .scaleExtent([0.5, 5])\n    .on(\"zoom\", () => {\n      // Record the zoom event to function scope.\n      current_zoom = d3.event.transform;\n\n      // Redraw network with this zoom scale\n      draw();\n    })\n  );\n\n  return {new_data, resize, new_patterns, highlight};\n};\n\n\n//------------------------------------------------------------\n// On initialization.\n//------------------------------------------------------------\n// This code gets run once and sets up the basic\n// neccesities for the visualization.\n\n// Setup all the dom elements for the viz. This includes\n// the svg, canvas, context, tooltip, and message buttons.\nconst dom_elements = setup_dom_elements(\n  div, C,\n  // Function that is called when a message button is pressed. Passed the type of message\n  function(type){\n    send_to_shiny(type, selected_codes, C);\n  });\n\n// Setup the progress bar for network simulation progress\nconst progress_meter = setup_progress_meter(dom_elements.svg, C);\n\n// Setup the actual network viz itself.\nconst network_viz = setup_network_viz(dom_elements, on_node_click);\nnetwork_viz.new_data(data);\n\nconst webworker = setup_webworker(C);\n\n// Holds the currently selected codes.\nlet selected_codes = [],\n    viz = {\n      data: {},\n      width,\n      height,\n      options,\n      patient_patterns: null,\n    };\n\n\n\n\n//------------------------------------------------------------\n// On Render\n//------------------------------------------------------------\n// This is code that runs whenever new data is received by the\n// visualization.\nr2d3.onRender(function(data, div, width, height, options){\n  draw_viz(data, div, width, height, options)\n\n});\n\nfunction draw_viz(data, div, width, height, options){\n  \n  const new_data = is_new_data(viz.data, data);\n\n  if(new_data){\n     // Update the global viz info object\n    viz.data = data;\n  } else {\n    network_viz.highlight(options.highlighted_pattern);\n  }\n\n  viz.options = options;\n\n  if(new_data){\n    // Build a patient pattern array and send to network viz\n    viz.patient_patterns = build_patient_patterns(viz.data);\n    network_viz.new_patterns(viz.patient_patterns);\n\n    // Prepare data based upon the desired format from options\n    const data_for_viz = C.viz_type === 'bipartite' ?\n      fix_nodes_to_line(sanitize_data(viz.data), C):\n      sanitize_data(viz.data);\n\n    // Make sure viz is correct size.\n    size_viz(viz.width, viz.height);\n\n    // Launch webworker to calculate layout and kickoff network viz after finishing\n    webworker(\n      data_for_viz,\n      {\n        on_progress_report: progress_meter.update,\n        on_layout_data: (d) => {\n          network_viz.new_data(d);\n        },\n        on_finish: () => {\n          progress_meter.hide();\n        },\n      }\n    );\n  }\n}\n\n\n// Tell r2d3 what to do when we resize the viz\nr2d3.onResize((width, height) => {\n  // Update the global viz info object\n  viz.width = width;\n  viz.height = height;\n\n  size_viz(viz.width, viz.height);\n});\n\n\nfunction size_viz(width, height){\n  // Adjust size of svg and canvas elements\n  const sizes = setup_sizes(width, height, C);\n  dom_elements.resize(sizes);\n  progress_meter.resize(sizes);\n  network_viz.resize(sizes);\n}\n\n\n\n};","style":[],"version":5,"theme":{"default":{"background":"#FFFFFF","foreground":"#000000"},"runtime":null},"useShadow":true},"evals":[],"jsHooks":[]}</script>

---
## Why it is

![:space 15]()

.pull-left[
#### <i class="fas  fa-hand-point-up fa-lg fa-fw " style="color:#e34a33;"></i> Interact with results

PheWAS results are typically delivered with static plots and tables. ME allows researchers to interact with those results.

]

.pull-right[
#### <i class="fas  fa-expand-arrows-alt fa-lg fa-fw " style="color:#e34a33;"></i> Expand past plain associations

By giving researcher's the ability to look at the network behavior of genotype-phenotype associations, it can provide more nuanced insights from the data than a table. 
]

---
## How it is

![:space 4]()

<i class="fas  fa-box-open fa-lg fa-fw " style="color:#e34a33;"></i> Central package contains all the building blocks of a typical ME deployment.

![:indent]()  <i class="fab  fa-js-square fa-lg fa-fw " style="color:#e34a33;"></i> Visualizations custom built in Javascript.
![:space 5]()

<i class="fas  fa-puzzle-piece fa-lg fa-fw " style="color:#e34a33;"></i> Creating a custom app is an exercise in combining the neccesary components.

![:space 5]()

<i class="fas  fa-cloud fa-lg fa-fw " style="color:#e34a33;"></i> Hosted on lab RStudio Connect instance running on AWS.
  
![:indent]()  <i class="fab  fa-docker fa-lg fa-fw " style="color:#e34a33;"></i> If more security is desired, Docker image is available.

---

## Demo

---

# Changing how we ![:colorText orangered](model) these data
![:space 8]()

<i class="fas  fa-project-diagram fa-lg fa-fw " style="color:#e34a33;"></i> If visualizing the data as a network can help us understand them, why not model them as a network, too?
![:space 4]()

<i class="fas  fa-level-up-alt fa-lg fa-fw " style="color:#e34a33;"></i> Mathematical and statistical models of networks are a diverse and booming field. 
![:space 4]()

<i class="fas  fa-frown-open fa-lg fa-fw " style="color:#e34a33;"></i> Unfortunately, many of the methods sit on fragile methodological foundations.

![:indent]() <i class="fas  fa-grin fa-lg fa-fw " style="color:#e34a33;"></i> Luckily, a new model type has taken the stage recently...

---

## The ![:colorText orangered](S)tochastic ![:colorText orangered](B)lock ![:colorText orangered](M)odel

![:space 3]()

![:centerPic 90](figures/the-sbm.svg)

---
## SBM formula

![:centerPic 100](figures/sbm-formula.svg)

---
## Bipartite expansion

![:space 2]()

In its basic form the SBM only works with a single type of node, but we have two (phenotype and patients)...

![:space 4]()

![:borderedCenterPic 80](figures/bipartite-sbm-paper.png)

![:space 6]()

<i class="fas  fa-wrench fa-lg fa-fw " style="color:#e34a33;"></i> To fix this we can add a constraint to the model to only cluster nodes of the same type.

![:indent]()  <img src='figures/bell-curve.svg' width = 40px/> This is equivalent to an infinitely strong prior on cluster 'types'.

---
## ![:colorText orangered](Bi)partite ![:colorText orangered](SBM) formula

![:centerPic 100](figures/bipartite-sbm-formula.svg)

---
## Statistical features

Model is fit in a bayesian manor

![:borderedCenterPic 55](figures/bayesian_sbm_paper.png)
![:space 2]()

### Priors 
![:centerPic 40](figures/bayes.svg)

Priors are set on both the group/cluster structure and the edge counts between groups.
]

### Fitting

Metropolis-Hastings is used to fit model using MCMC

Very similar to how a dirichlet mixture model is fit

]

---
### Prior on clusters

![:centerPic 90](figures/group-prior.svg)

---

### Prior on edge counts

![:centerPic 90](figures/edge-prior.svg)

---
### MCMC acception formula

![:centerPic 90](figures/mcmc-formula.svg)

---
## Simulation results

![:space 2]()

![:centerPic 65](figures/biSBM_simulations.png)

The BiSBM outperforms dirichlet mixture models even when the true generating distribution is dirichlet.

![:space 3]()
.right[
![:small 0.9](Figure from A network approach to topic models, Gerlach et al 2019)
]

---

# Applying in the real world

---

### Looking for [patterns in Myeloid disease](https://prod.tbilab.org/connect/#/apps/20/access)

![:centerPic 80](figures/mds_circles.png)

---

### Investigating large-scale patient structure

55k patients over 1500 phecodes, dimension reduced using BiSBM, visualized with UMAP.

![:centerPic 85](figures/hf_embeddings.png)

---
# Future directions

![:space 18]()

- Simulations!

- Turning into a semi-supervized method

- More battle-testing with real data

- Optimizing visualizations for information transfer

---
# Aknowledgements

![:space 2]()

A thanks to those who have helped build these ideas to this point
- Yaomin Xu
- TBILab members
- Wells Lab
- Savona Lab
- Travis Spaulding
- Denny Lab
- Vanderbilt drug repurposing group
- Vanderbilt PheWAS group

![:space 7]()

And thanks to the funding sources who have paid me to play around with javascript
- NIH Big Data to Knowledge training grant
- Vanderbilt Biostatistics department 2018 development grant

---
# References

These slides:

![:indent]() <i class="fas  fa-eye fa-lg fa-fw " style="color:#e34a33;"></i> [nickstrayer.me/biostat_seminar](http://nickstrayer.me/biostat_seminar/)

![:indent]() <i class="fab  fa-github fa-lg fa-fw " style="color:#e34a33;"></i> [github.com/nstrayer/biostat_seminar](https://github.com/nstrayer/biostat_seminar)

![:space 8]()
Relevant papers:

- ![:small 0.7](Gerlach, Martin, Tiago P. Peixoto, and Eduardo G. Altmann. 2018. “A Network Approach to Topic Models.” Science Advances)

- ![:small 0.7](Larremore, Daniel B., Aaron Clauset, and Abigail Z. Jacobs. 2014. “Efficiently Inferring Community Structure in Bipartite Networks.” Physical Review. E, Statistical, Nonlinear, and Soft Matter Physics)

- ![:small 0.7](Peixoto, Tiago P. 2016. “Nonparametric Bayesian Inference of the Microcanonical Stochastic Block Model.” arXiv [physics.data-An]. arXiv. http://arxiv.org/abs/1610.02703.)

- ![:small 0.7](Peixoto, Tiago P. 2017. “Bayesian Stochastic Blockmodeling.” arXiv [stat.ML]. arXiv. http://arxiv.org/abs/1705.10225.)