Visual explanation of the importance of examining your data before trying to predict / run an algorithm.

@JayMahabal / @H2Oai

Forked from 1wheel's block: you-draw-it

<!DOCTYPE html>

<!--

- Mobile text size

Maybe:
- Table for raw data, or download link
- Add background rect for clarity for temperature axis label
- also add tooltip for original chart

Questions:
- How to deal with background text box without duplicating calls?

-->

</head>
<body>

<div class="row">
	<div class="col-md-6 col-md-offset-3">
		<h1>Confounding Variables</h1>
		<h4><a href="https://www.twitter.com/jaymahabal" target="_blank">Jay Mahabal</a></h3>
		<hr>
	</div>
</div>

<div class="row">
	<div class="col-md-6 col-md-offset-3">
		<p>One goal of machine learning algorithms is to use past information to predict the future. The advantage of machine learning over traditional analytics is the ability for the machine-learning algorithm to automatically build a good model, saving time, preventing <a href="https://en.wikipedia.org/wiki/Overfitting" target="_blank">overfitting</a>, and generally being more robust. To do this the algorithm builds a model, calculates the error rate of the model, adjusts parameters to lower the error rate, and iterates again, 'learning' from its mistakes. </p>
		<p>There's a step in between: calculating the error rate requires us to split our dataset into a <span class="training">training</span> and <span class="testing">test</span> dataset, in which we train the model on the training dataset, and calculate the error rate on the test dataset. We need to do this because if we calculate the error rate while training on the entire dataset we would get a low error rate since the model is trained on that specific data, and this would be misleading for predicting future, unknown data. So using a separate test data set is better measure of how a model actually performs.</p>
		<p>Below, we've split a dataset into the testing and training sets already; if you were to build a rudimentary model on the following data, how would you <span class="your-line">draw</span> it?</p>
		<br>
	</div>
</div>

<div class="row">
	<div class="col-md-6 col-md-offset-3">
		<h6 class="hiddenuntilcomplete" style="visibility: hidden;">Number of Days into the Year vs. Avg. Daily Temperature</h6>
	</div>
</div>

<div class="row">
	<div class="col-md-8 col-md-offset-2">
		<div id="chart"></div>
	</div>
</div>
<div class="row">
	<div class="col-md-12">
		<button type="button" id="done" class="btn btn-primary" disabled>I'm Done <span>✅</span></button>
	</div>
</div>
<div class="row">
	<div class="col-md-6 col-md-offset-3">
		<span class="hiddenuntilcomplete residual-original" id="errorrate" style="display: none;"></span>
		<br><br>
		<p class="hiddenuntilcomplete" style="display: none;">Most people draw a monotonic line trending upwards, but the reality is that this particular dataset was of temperature readings from San Francisco, which have a generally defined cycle over the course of a year (we had plotted the number of days into the year against temperature). When we looked at the data in two dimensions way we missed out on a <span class="highlight">another factor</span>: time (seasonality). This should influence our model. Examples like this are why it's important to inspect your dataset, think about your problem, and have the necessary domain knowledge, before throwing an algorithm at a dataset.</p>
		<p class="hiddenuntilcomplete" style="display: none;">This process is also incredibly important for feature generation, which can reveal aspects of your dataset leading to better prediction and classification results. One other important processing step is to <a href="https://en.wikipedia.org/wiki/Cross-validation_(statistics)" target="_blank">cross-validate</a> your data while building a model. This step can be more difficult for time-series datasets, like our example, but it is relatively painless to shuffle your data or to add in k-fold cross-validation. </p>
	</div>
</div>
<div class="row">
	<div class="col-md-6 col-md-offset-3"><br>
		<h6 class="hiddenuntilcomplete" style="display: none;">Date vs. Avg. Daily Temperature</h6>
	</div>
</div>
<div class="row">
	<div class="col-md-12">
		<div class="hiddenuntilcomplete" id="yearly" style="display: none;"></div>
	</div>
</div>

<div class="row">
	<div class="col-md-6 col-md-offset-3">
		<p class="hiddenuntilcomplete" style="display: none;">Weather data was sourced from the <a href="https://www.ncdc.noaa.gov/" target="_blank">National Oceanic and Atmospheric Administration</a>, and the animation and visualization draws from <a href="https://github.com/1wheel" target="_blank">Adam Pearce</a> at the <a href="https://www.nytimes.com/interactive/2017/01/15/us/politics/you-draw-obama-legacy.html" target="_blank">New York Times</a>.</p>
	</div>
</div>

<br>

</div>
</body>

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js