Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdn.mxpnl.com/libs/mixpanel-platform/css/reset.css">
<link rel="stylesheet" type="text/css" href="https://cdn.mxpnl.com/libs/mixpanel-platform/build/mixpanel-platform.v0.latest.min.css">
<script src="https://cdn.mxpnl.com/libs/mixpanel-platform/build/mixpanel-platform.v0.latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <!-- Add this line -->
</head>
<body class="mixpanel-platform-body">
<div class="mixpanel-platform-section">
<div id="eventSelect"></div>
</div>
<script>
var eventsArray = ['Signup'];
var eventSelect = $('#eventSelect').MPEventSelect();
var runQuery = function(events) {
console.log('Making a funnel query with events:', events);
// Call the funnel endpoint passing events
// If events is ['A', 'B', 'C'], this is equivalent to calling
// MP.api.funnel('A', 'B', 'C') ...
MP.api.funnel.apply(MP.api, events).done(function(funnelData) {
console.log('Results:');
console.log(funnelData);
});
};
// Do an initial query to render the first event node
runQuery(eventsArray);
// When the event select changes, re-query
eventSelect.on('change', function() {
var event = eventSelect.MPEventSelect('value');
// Only add events that we aren't already querying on
if (!_.contains(eventsArray, event)) {
eventsArray.push(event); // add the new event to our events array
runQuery(eventsArray);
}
});
var width = 960; // SVG element width
var height = 640; // SVG element height
var svg = d3.select('body').append('svg') // the SVG element
.attr('width', width)
.attr('height', height);
var linkElements = svg.selectAll('.link'); // the link elements
var nodeElements = svg.selectAll('.node'); // the node elements
var colorScale = d3.scale.category20(); // used with colorIndex to select a different color for each node
var countScale = d3.scale.linear().range([0, 40]); // maps our link widths to values from 0px to 40px
var strengthScale = d3.scale.linear().range([0, 1]); // maps our link strengths to values from 0 to 1
var colorIndex = 0; // incremented to select a different color for each node
var nodeIndex = 0; // incremented to be display a funnel step number in node labels
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment