blob: e387e56c7f6d1cbcebcf67eb1ab2f35f3a722276 [file] [log] [blame]
<div class="ui {% if include.inverted %}inverted grey{% endif %} very padded vertical segment">
<div class="ui center aligned text container">
<h2 class="ui {% if include.inverted %}inverted{% endif %} header">The Bowie Plot</h2>
<p>
Tap uses the Bowie plot to present your users' micro-workflows and help you uncover insights into how your users interact with you apps. Start on the left, with the activity that starts the workflow, sized by the frequency of the activity. Next, the circles in the middle show the second activity in the workflow. The circles are downselected and sized by a graph metric to help uncover a particular type of insight. End on the right with the final activity of the workflow.
</p>
</div>
<div class="ui container">
<div class="ui padded grid">
<div class="four wide middle aligned column">
<div class="ui {% if include.inverted %}inverted{% endif %} form">
<h3 class="ui {% if include.inverted %}inverted{% endif %} header">Graph Metrics</h3>
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="metric" value="out_degree" checked></input>
<label>Out Degree</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="metric" value="in_degree"></input>
<label>In Degree</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="metric" value="betweenness_cent_dir_weighted"></input>
<label>Weighted Betweenness</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="metric" value="closeness_cent_dir_weighted"></input>
<label>Weighted Closeness</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="metric" value="closeness_cent_dir_unweighted"></input>
<label>Unweighted Closeness</label>
</div>
</div>
</div>
</div>
</div>
<div class="twelve wide center aligned column">
<div class="ui basic row segment">
<div id="bowie"></div>
</div>
</div>
</div>
<div id="metric-explanation" class="ui center aligned text container"></div>
</div>
</div>
<script src="/js/bowiePlot.js"></script>
<script>
$(document).ready(function () {
// Metric explanations
var metricExplanations = {
'out_degree': 'Out degree describes how often an activity was a source. How often did a micro-workflow start with this activity? This could indicate an entry point to your app or the start of a particularly common workflow.',
'in_degree': 'In degree describes how often an activity was a sink. How often did a micro-workflow end with this activity? This could indicate a final confirmation, exit navigation, or a place the user got stuck.',
'betweenness_cent_dir_weighted': 'Betweenness centrality describes how often an activity was passed through. This indicates a common intermediate activity, like a busy intersection of your app.',
'closeness_cent_dir_weighted': 'Closeness centrality indicates how "close" an activity is to all others. A higher closeness indicates an activity that was involved in more workflows. Weighted closeness focuses on closeness to the most common activities, rather than to all equally.',
'closeness_cent_dir_unweighted': 'Closeness centrality indicates how "close" an activity is to all others. A higher closeness indicates an activity that was involved in more workflows. Unweighted closeness focuses on closeness to all activities equally, regardless of how often each activity occurred.'
};
// Change metric
function changeMetric() {
var metric = $('input[name=metric]:checked').val();
$('#metric-explanation').html(metricExplanations[metric]);
Bowie.update(metric);
}
// Initialize radio buttons
$('.ui.radio.checkbox').checkbox({
onChange: changeMetric
});
// Initialize
Bowie.create();
changeMetric();
});
</script>