index.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
  2. <html> <head>
  3. <title>Support Vector Machines</title>
  4. <style>
  5. .slide {
  6. border: 2px solid #000066;
  7. background-color: #CCCCFF;
  8. position: absolute;
  9. padding: 5%;
  10. width: 85%;
  11. height: 80%;
  12. }
  13. </style>
  14. <script>
  15. var slides = new Array();
  16. var currentSlide = 0;
  17. function initializeSlideshow() {
  18. var divs = document.getElementsByTagName("div");
  19. for (i=0; i < divs.length; i++) {
  20. var div = divs[i];
  21. if (div.className && (div.className == "slide")) {
  22. div.style.display = "none";
  23. div.addEventListener("click", showSlide, false);
  24. slides.push(div);
  25. }
  26. }
  27. showSlide();
  28. }
  29. function showSlide() {
  30. for (var i in slides) {
  31. slides[i].style.display = "none";
  32. }
  33. slides[currentSlide].style.display = "inline";
  34. currentSlide++;
  35. if (currentSlide >= slides.length) {
  36. currentSlide = 0;
  37. }
  38. }
  39. </script>
  40. </head>
  41. <body onload="initializeSlideshow();">
  42. <div class='slide'>
  43. <h1>Support Vector Machines</h1>
  44. <p>(lightning talk)</p>
  45. <p>(LPW '07) (john melesky)</p>
  46. </div>
  47. <div class='slide'>
  48. <h1>Presupposing:</h1>
  49. <ul>
  50. <li>You have a bunch of something.</li>
  51. <li>You can transform relevant attributes of those things into numbers.</li>
  52. <li>You can connect those numbers into vectors (think coordinates in an attribute space).</li>
  53. <li>You want to categorise them base on those numbers.</li>
  54. </ul>
  55. </div>
  56. <div class='slide'>
  57. <h1>The problem: find a line that separates these two categories of thing</h1>
  58. <img style="float: right;" src="basedata.png" />
  59. </div>
  60. <div class='slide'>
  61. <h1>For humans, this is easy.</h1>
  62. <img style="float: right;" src="cleansep.png" />
  63. <p>For mathematicians, it's actually not too hard.</p>
  64. </div>
  65. <div class='slide'>
  66. <h1>For humans, this is easy.</h1>
  67. <img style="float: right;" src="cleansep.png" />
  68. <p>For <del>mathematicians</del> computers, it's actually not too hard.</p>
  69. </div>
  70. <div class='slide'>
  71. <h1>There are two problems, though.</h1>
  72. </div>
  73. <div class='slide'>
  74. <h1>Problem, the first:</h1>
  75. <img style="float: right;" src="badline1.png" />
  76. </div>
  77. <div class='slide'>
  78. <h1>Problem, the first:</h1>
  79. <img style="float: right;" src="badline2.png" />
  80. </div>
  81. <div class='slide'>
  82. <h1>Problem, the second:</h1>
  83. <img style="float: right;" src="badset1.png" />
  84. </div>
  85. <div class='slide'>
  86. <h1>Problem, the second:</h1>
  87. <img style="float: right;" src="badset2.png" />
  88. </div>
  89. <div class='slide'>
  90. <h1>Problem, the second:</h1>
  91. <img style="float: right;" src="badset3.png" />
  92. </div>
  93. <div class='slide'>
  94. <h1>Conveniently, Support Vector Machines address both of the problems i've identified.</h1>
  95. <p></p>
  96. </div>
  97. <div class='slide'>
  98. <h1>Solution, the first:</h1>
  99. <p></p>
  100. </div>
  101. <div class='slide'>
  102. <h1>Solution, the first:</h1>
  103. <img style="float: right;" src="bordervectors.png" />
  104. <ul>
  105. <li>Create "border" vectors, parallel to eachother, touching the outermost edge of each category dataset.</li>
  106. </ul>
  107. </div>
  108. <div class='slide'>
  109. <h1>Solution, the first:</h1>
  110. <img style="float: right;" src="bordervectors.png" />
  111. <ul>
  112. <li>Create "border" vectors, parallel to eachother, touching the outermost edge of each category dataset.</li>
  113. <li>As you add new items, ensure these "borders" stay parallel.</li>
  114. </ul>
  115. </div>
  116. <div class='slide'>
  117. <h1>Solution, the first:</h1>
  118. <img style="float: right;" src="supportvectors.png" />
  119. <ul>
  120. <li>Create "border" vectors, parallel to eachother, touching the outermost edge of each category dataset.</li>
  121. <li>As you add new items, ensure these "borders" stay parallel.</li>
  122. <li>Create your categorizing vector equidistant from your two "borders".</li>
  123. </ul>
  124. </div>
  125. <div class='slide'>
  126. <h1>Solution, the first:</h1>
  127. <img style="float: right;" src="supportvectors.png" />
  128. <ul>
  129. <li>Create "border" vectors, parallel to eachother, touching the outermost edge of each category dataset.</li>
  130. <li>As you add new items, ensure these "borders" stay parallel.</li>
  131. <li>Create your categorizing vector equidistant from your two "borders".</li>
  132. <li>These "borders" are called "support vectors".</li>
  133. </ul>
  134. </div>
  135. <div class='slide'>
  136. <h1>A joke:</h1>
  137. <p>Q: How many mathematicians does it take to change a lightbulb?</p>
  138. <p></p>
  139. </div>
  140. <div class='slide'>
  141. <h1>A joke:</h1>
  142. <p>Q: How many mathematicians does it take to change a lightbulb?</p>
  143. <p>A: One, who hands it to 127 Londoners, thus reducing it to an earlier joke.</p>
  144. <p></p>
  145. </div>
  146. <div class='slide'>
  147. <h1>A question:</h1>
  148. <p>Q: How do mathematicians categorize non-linearly-separable data?</p>
  149. <p></p>
  150. </div>
  151. <div class='slide'>
  152. <h1>A question:</h1>
  153. <p>Q: How do mathematicians categorize non-linearly-separable data?</p>
  154. <p>A: Munge the data until it's linearly separable, thus reducing it to an earlier slide.</p>
  155. <p></p>
  156. </div>
  157. <div class='slide'>
  158. <h1>A question:</h1>
  159. <p>Q: How do mathematicians categorize non-linearly-separable data?</p>
  160. <p>A: Munge the data until it's linearly separable, thus reducing it to an earlier slide.</p>
  161. <p>Seriously. The munging is done using what are known as "kernel methods".</p>
  162. </div>
  163. <div class='slide'>
  164. <h1>Kernel Methods</h1>
  165. <ul>
  166. <li>Functions that munge data</li>
  167. <li>Very faintly magical (because i have no idea how they were derived)</li>
  168. <li>Require some skill to choose the right one for the problem</li>
  169. <ul>
  170. </div>
  171. <div class='slide'>
  172. <h1>Kernel Methods + Support Vectors = Support Vector Machines</h1>
  173. </div>
  174. <div class='slide'>
  175. <h1>In Perl:</h1>
  176. <p>Algorithm::SVM - bindings to libsvm</p>
  177. <p>(Also wrapped by AI::Categorizer)</p>
  178. </div>
  179. </body></html>