mixpanel-bot/d3_tutorial_2_setting_up_d3.html

## d3_tutorial_2_setting_up_d3.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> <!-- 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>
	<!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>