ldelbeccaro/mixpanel_cq_platform_step_3.html Secret

## mixpanel_cq_platform_step_3.html
<!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>
  </head>
  <body class="mixpanel-platform-body">
    <div class="mixpanel-platform-section">
        <div id="dates"></div>
        <div class="events">
            <div class="label">Funnel Steps:</div>
            <input id="event_list" value="App Install,Game Played,In-App Purchase">
            <div class="label">Alt Path Length:</div>
            <input id="path_length" value="3">
            <div id="run">RUN</div>
        </div>
        <div id="graph"></div>
    </div>
    <div class="mixpanel-platform-section flow">
        <div class="header">Alternative Paths</div>
        <div id="path">
            <div class="description">Click the "dropped" section of any of the above events to view paths those users took after completing the previous funnel step (i.e., what the users did when they didn't convert).</div>
        </div>
    </div>
    <script>
    // Set a global variable for the Custom Query result
    var cqResult;

    // We'll need to convert dates to strings to include them in our query
    function date_to_string(d) {
        return d.toISOString().split('T')[0];
    }

    var datepicker = $('#dates').MPDatepicker();
    var event_list_input;
    var path_length_input;
    var graph = $('#graph').MPChart({
        // chart options
        chartType: 'bar',
        stacked: true,
        highchartsOptions: {
            colors: ['#cccccc', '#65afe7'],
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                if (this.series_name == 'dropped') {
                                    // enable clicking on the dropoff portion of the funnel bar to see the alternative paths for users
                                    var clicked_event = this.category;
                                    var index = event_list_input.indexOf(clicked_event);
                                    // show dropoff paths originating from the previous event
                                    // we'll define this function later
                                    mapFlow(index-1);
                                }
                            }
                        }
                    }
                }
            }
        }
    });

    function runQuery() {
        event_list_input = $('#event_list').val().split(',');
        path_length_input = $('#path_length').val();
        if (isNaN(parseInt(path_length_input))) {
            alert('Error: Alternative path length must be a number');
            return;
        }

        var dates = datepicker.val();
    }

    // D3 tree setup
    var margin = {top: 20, right: 40, bottom: 20, left: 40},
        width = 960 - margin.right - margin.left,
        height = 920 - margin.top - margin.bottom;

    var i = 0,
        duration = 750,
        treeRoot;

    var tree = d3.layout.tree()
        .size([height, width]);

    var diagonal = d3.svg.diagonal()
        .projection(function(d) { return [d.y, d.x]; });

    var svg = d3.select("#path").append("svg")
        .attr("width", width + margin.right + margin.left)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.select(self.frameElement).style("height", height + "px");

    function createFlow(flowObject) {
        treeRoot = flowObject;

        // initialize path flow with the root event
        treeRoot.x0 = height / 2;
        treeRoot.y0 = 0;

        function collapse(d) {
            if (d.children) {
                d._children = d.children;
                d._children.forEach(collapse);
                d.children = null;
            }
        }

        treeRoot.children.forEach(collapse);
        update(treeRoot);
        $('#path svg').show();
    }

    function update(source) {
        // Update the tree from a source node

        var flow_length = 4;
        // Compute the new tree layout
        var nodes = tree.nodes(treeRoot).reverse(),
            links = tree.links(nodes);

        // Normalize for fixed-depth
        nodes.forEach(function(d) { d.y = width / flow_length * d.depth; });

        // Find max count
        var maxCount = 0;
        nodes.forEach(function(d) { if (d.depth > source.depth) maxCount = d.count > maxCount ? d.count : maxCount; });

        var ratio = calculateFlowLine(maxCount);

        // Update the nodes
        var node = svg.selectAll("g.node")
            .data(nodes, function(d) { return d.id || (d.id = ++i); });

        // Enter any new nodes at the parent's previous position
        var nodeEnter = node.enter().append("g")
            .attr("class", function(d) {return d.parent ? "node" : "root node"; })
            .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
            .style("-webkit-clip-path", "polygon(-3px 0, " + width / flow_length + "px 0, " + width / flow_length + "px 100%, -3px 100%")
            .style("clip-path", "polygon(-3px 0, " + width / flow_length + "px 0, " + width / flow_length + "px 100%, -3px 100%")
            .style("cursor", "pointer")
            .on("click", click);

        nodeEnter.append("circle")
            .attr("r", 1e-6)
            .style("stroke", "steelblue")
            .style("stroke-width", "1.5px")
            .style("fill", function(d) { return d.children ? "#fff" : "lightsteelblue"; });

        nodeEnter.append("text")
            .attr("dx", 10)
            .attr("dy", 3)
            .attr("text-anchor", "start")
            .text(function(d) { return d.name; })
            .style("fill-opacity", 1e-6)
            .style("font", "10px sans-serif")
            .style("text-overflow", "ellipsis")
            .style("overflow", "hidden")
            .style("white-space", "nowrap");

        nodeEnter.append("title")
            .text(function(d) { return d.name; });

        // Transition nodes to their new position
        var nodeUpdate = node.transition()
            .duration(duration)
            .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

        nodeUpdate.select("circle")
            .attr("r", 4.5)
            .style("fill", function(d) { return d.children ? "#fff" : "lightsteelblue"; });

        nodeUpdate.select("text")
            .style("fill-opacity", 1)
            .style("font-weight", function(d) {return d.children ? "bold" : "normal"; });

        // Transition exiting nodes to the parent's new position
        var nodeExit = node.exit().transition()
            .duration(duration)
            .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
            .remove();

        nodeExit.select("circle")
            .attr("r", 1e-6);

        nodeExit.select("text")
            .style("fill-opacity", 1e-6);

        // Update the links
        var link = svg.selectAll("path.link")
            .data(links, function(d) { return d.target.id; });

        // Enter any new links at the parent's previous position
        link.enter().insert("path", "g")
            .attr("class", "link")
            .style("stroke-width", function(d) {
                var width = d.target.count * ratio > 1 ? d.target.count * ratio : 1;
                return width;
            })
            .style("fill", "none")
            .style("stroke", "#ccc")
            .style("stroke-linecap", "round")
            .attr("d", function(d) {
                var o = {x: source.x0, y: source.y0};
                return diagonal({source: o, target: o});
            });

        // Transition links to their new position
        link.transition()
            .duration(duration)
            .attr("d", diagonal);

        // Transition exiting nodes to the parent's new position
        link.exit().transition()
            .duration(duration)
            .attr("d", function(d) {
                var o = {x: source.x, y: source.y};
                return diagonal({source: o, target: o});
            })
            .remove();

        // Stash the old positions for transition
        nodes.forEach(function(d) {
            d.x0 = d.x;
            d.y0 = d.y;
        });
    }

    function click(d) {
        // Toggle children on click
        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else {
            d.children = d._children;
            d._children = null;
        }
        update(d);
    }

    function calculateFlowLine(count) {
        // Calculate a ratio normalize width of path links
        count = count || 1;
        return 15/count;
    }

    function generateFunnel(results) {
        var funnel = {
            dropped: {},
            converted: {}
        };
        _.each(results, function(funnel_step, i) {
            // loop through each of the event objects in the Custom Query result
            // assign the total count to the "converted" object in our funnel object
            funnel.converted[funnel_step.step] = funnel_step.count;
            // if there is a preceding event in the funnel, assign the difference between the preceding and current step to the "dropped" object
            funnel.dropped[funnel_step.step] = results[i-1] ? results[i-1].count - funnel_step.count : 0;
        });

        return funnel;
    }

    function getChildren(parentObject, flowParent, prevFlowParent, event) {
        // loop through our result to get the children of each event and add them to the applicable parent
        var eventObject = {
            'name': flowParent.count + ': ' + event,
            'count': flowParent.count,
            'parent': prevFlowParent,
            'children': []
        };

        // find the next events completed in a path after the parent event
        var next = flowParent.next;
        if ($.isEmptyObject(next) === false) {
            // continue to get the next events in the path
            for (var eventName in next) {
                if (next.hasOwnProperty(eventName)) {
                    getChildren(eventObject, next[eventName], event, eventName);
                }
            }
        }
        // add all next events as children of the parent event
        parentObject.children.push(eventObject);
    }

    function mapFlow(index) {
        // create the object to be passed into the D3 visualization
        var flows = cqResult[index];
        var root = event_list_input[index];
        var flowObject = {
          'name': flows.count + ': ' + root,
          'count': flows.count,
          'children': [],
        };

        _.each(_.keys(flows.next), function(eventName) {
          getChildren(flowObject, flows.next[eventName], '', eventName);
        });
        createFlow(flowObject);
    }
    </script>
  </body>
</html>
	<!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>
	</head>
	<body class="mixpanel-platform-body">
	<div class="mixpanel-platform-section">
	<div id="dates"></div>
	<div class="events">
	<div class="label">Funnel Steps:</div>
	<input id="event_list" value="App Install,Game Played,In-App Purchase">
	<div class="label">Alt Path Length:</div>
	<input id="path_length" value="3">
	<div id="run">RUN</div>
	</div>
	<div id="graph"></div>
	</div>
	<div class="mixpanel-platform-section flow">
	<div class="header">Alternative Paths</div>
	<div id="path">
	<div class="description">Click the "dropped" section of any of the above events to view paths those users took after completing the previous funnel step (i.e., what the users did when they didn't convert).</div>
	</div>
	</div>
	<script>
	// Set a global variable for the Custom Query result
	var cqResult;

	// We'll need to convert dates to strings to include them in our query
	function date_to_string(d) {
	return d.toISOString().split('T')[0];
	}

	var datepicker = $('#dates').MPDatepicker();
	var event_list_input;
	var path_length_input;
	var graph = $('#graph').MPChart({
	// chart options
	chartType: 'bar',
	stacked: true,
	highchartsOptions: {
	colors: ['#cccccc', '#65afe7'],
	plotOptions: {
	series: {
	cursor: 'pointer',
	point: {
	events: {
	click: function () {
	if (this.series_name == 'dropped') {
	// enable clicking on the dropoff portion of the funnel bar to see the alternative paths for users
	var clicked_event = this.category;
	var index = event_list_input.indexOf(clicked_event);
	// show dropoff paths originating from the previous event
	// we'll define this function later
	mapFlow(index-1);
	}
	}
	}
	}
	}
	}
	}
	});

	function runQuery() {
	event_list_input = $('#event_list').val().split(',');
	path_length_input = $('#path_length').val();
	if (isNaN(parseInt(path_length_input))) {
	alert('Error: Alternative path length must be a number');
	return;
	}

	var dates = datepicker.val();
	}

	// D3 tree setup
	var margin = {top: 20, right: 40, bottom: 20, left: 40},
	width = 960 - margin.right - margin.left,
	height = 920 - margin.top - margin.bottom;

	var i = 0,
	duration = 750,
	treeRoot;

	var tree = d3.layout.tree()
	.size([height, width]);

	var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });

	var svg = d3.select("#path").append("svg")
	.attr("width", width + margin.right + margin.left)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.select(self.frameElement).style("height", height + "px");

	function createFlow(flowObject) {
	treeRoot = flowObject;

	// initialize path flow with the root event
	treeRoot.x0 = height / 2;
	treeRoot.y0 = 0;

	function collapse(d) {
	if (d.children) {
	d._children = d.children;
	d._children.forEach(collapse);
	d.children = null;
	}
	}

	treeRoot.children.forEach(collapse);
	update(treeRoot);
	$('#path svg').show();
	}

	function update(source) {
	// Update the tree from a source node

	var flow_length = 4;
	// Compute the new tree layout
	var nodes = tree.nodes(treeRoot).reverse(),
	links = tree.links(nodes);

	// Normalize for fixed-depth
	nodes.forEach(function(d) { d.y = width / flow_length * d.depth; });

	// Find max count
	var maxCount = 0;
	nodes.forEach(function(d) { if (d.depth > source.depth) maxCount = d.count > maxCount ? d.count : maxCount; });

	var ratio = calculateFlowLine(maxCount);

	// Update the nodes
	var node = svg.selectAll("g.node")
	.data(nodes, function(d) { return d.id \|\| (d.id = ++i); });

	// Enter any new nodes at the parent's previous position
	var nodeEnter = node.enter().append("g")
	.attr("class", function(d) {return d.parent ? "node" : "root node"; })
	.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
	.style("-webkit-clip-path", "polygon(-3px 0, " + width / flow_length + "px 0, " + width / flow_length + "px 100%, -3px 100%")
	.style("clip-path", "polygon(-3px 0, " + width / flow_length + "px 0, " + width / flow_length + "px 100%, -3px 100%")
	.style("cursor", "pointer")
	.on("click", click);

	nodeEnter.append("circle")
	.attr("r", 1e-6)
	.style("stroke", "steelblue")
	.style("stroke-width", "1.5px")
	.style("fill", function(d) { return d.children ? "#fff" : "lightsteelblue"; });

	nodeEnter.append("text")
	.attr("dx", 10)
	.attr("dy", 3)
	.attr("text-anchor", "start")
	.text(function(d) { return d.name; })
	.style("fill-opacity", 1e-6)
	.style("font", "10px sans-serif")
	.style("text-overflow", "ellipsis")
	.style("overflow", "hidden")
	.style("white-space", "nowrap");

	nodeEnter.append("title")
	.text(function(d) { return d.name; });

	// Transition nodes to their new position
	var nodeUpdate = node.transition()
	.duration(duration)
	.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

	nodeUpdate.select("circle")
	.attr("r", 4.5)
	.style("fill", function(d) { return d.children ? "#fff" : "lightsteelblue"; });

	nodeUpdate.select("text")
	.style("fill-opacity", 1)
	.style("font-weight", function(d) {return d.children ? "bold" : "normal"; });

	// Transition exiting nodes to the parent's new position
	var nodeExit = node.exit().transition()
	.duration(duration)
	.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
	.remove();

	nodeExit.select("circle")
	.attr("r", 1e-6);

	nodeExit.select("text")
	.style("fill-opacity", 1e-6);

	// Update the links
	var link = svg.selectAll("path.link")
	.data(links, function(d) { return d.target.id; });

	// Enter any new links at the parent's previous position
	link.enter().insert("path", "g")
	.attr("class", "link")
	.style("stroke-width", function(d) {
	var width = d.target.count * ratio > 1 ? d.target.count * ratio : 1;
	return width;
	})
	.style("fill", "none")
	.style("stroke", "#ccc")
	.style("stroke-linecap", "round")
	.attr("d", function(d) {
	var o = {x: source.x0, y: source.y0};
	return diagonal({source: o, target: o});
	});

	// Transition links to their new position
	link.transition()
	.duration(duration)
	.attr("d", diagonal);

	// Transition exiting nodes to the parent's new position
	link.exit().transition()
	.duration(duration)
	.attr("d", function(d) {
	var o = {x: source.x, y: source.y};
	return diagonal({source: o, target: o});
	})
	.remove();

	// Stash the old positions for transition
	nodes.forEach(function(d) {
	d.x0 = d.x;
	d.y0 = d.y;
	});
	}

	function click(d) {
	// Toggle children on click
	if (d.children) {
	d._children = d.children;
	d.children = null;
	} else {
	d.children = d._children;
	d._children = null;
	}
	update(d);
	}

	function calculateFlowLine(count) {
	// Calculate a ratio normalize width of path links
	count = count \|\| 1;
	return 15/count;
	}

	function generateFunnel(results) {
	var funnel = {
	dropped: {},
	converted: {}
	};
	_.each(results, function(funnel_step, i) {
	// loop through each of the event objects in the Custom Query result
	// assign the total count to the "converted" object in our funnel object
	funnel.converted[funnel_step.step] = funnel_step.count;
	// if there is a preceding event in the funnel, assign the difference between the preceding and current step to the "dropped" object
	funnel.dropped[funnel_step.step] = results[i-1] ? results[i-1].count - funnel_step.count : 0;
	});

	return funnel;
	}

	function getChildren(parentObject, flowParent, prevFlowParent, event) {
	// loop through our result to get the children of each event and add them to the applicable parent
	var eventObject = {
	'name': flowParent.count + ': ' + event,
	'count': flowParent.count,
	'parent': prevFlowParent,
	'children': []
	};

	// find the next events completed in a path after the parent event
	var next = flowParent.next;
	if ($.isEmptyObject(next) === false) {
	// continue to get the next events in the path
	for (var eventName in next) {
	if (next.hasOwnProperty(eventName)) {
	getChildren(eventObject, next[eventName], event, eventName);
	}
	}
	}
	// add all next events as children of the parent event
	parentObject.children.push(eventObject);
	}

	function mapFlow(index) {
	// create the object to be passed into the D3 visualization
	var flows = cqResult[index];
	var root = event_list_input[index];
	var flowObject = {
	'name': flows.count + ': ' + root,
	'count': flows.count,
	'children': [],
	};

	_.each(_.keys(flows.next), function(eventName) {
	getChildren(flowObject, flows.next[eventName], '', eventName);
	});
	createFlow(flowObject);
	}
	</script>
	</body>
	</html>