affinity-propagation/index.html at master · pfdevilliers/affinity-propagation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Visualizing Affinity Propagation</title>
  <meta name="description" content="A visualization of the affinity propagation
  clustering algorithm. It is visualized using the HTML5 canvas element. The goal of
  this implementation is to illustrate how affinity propagation works on a simple
  set of points in 2d. The implementation uses the canvas element to draw the
  nodes and type of messages which consists of the availability and responsibility.">

  <meta name="author" content="Francois de Villiers">

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <!-- For the facebook thumbnail -->
  <link rel="image_src" href="/ap.jpg">


  <!-- CSS: implied media="all" -->
  <link rel="stylesheet" href="css/style.css?v=2">

  <!-- Uncomment if you are specifically targeting less enabled mobile browsers
  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">  -->

  <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
  <script src="js/libs/modernizr-1.7.min.js"></script>

</head>

<body>

  <div id="container">
    <header>
    <div id="center">
      <h1>Visualizing Affinity Propagation</h1>
    </div>
    </header>
    <div id="main" role="main" style="">

      <canvas id="canvasLegend" width="800" height="40">
        Your browser does not support HTML5.
      </canvas>

            <!-- <p>This is an message that I am writing</p> -->
      <section id="affinity">
        <canvas style="position:absolute;"
                id="canvas" width="400" height="300">
        Your browser does not support HTML5.
        </canvas>
        <canvas style="position:absolute;"
                id="canvas2" width="400" height="300">
        Your browser does not support HTML5.
        </canvas>
        <canvas style="position:absolute;"
                id="canvas3" width="400" height="300">
        Your browser does not support HTML5.
        </canvas>

        </section>

        <section id="legend">
        <div id="twitter" style="float:left;">
        <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://affinitypropagation.com" data-count="horizontal" data-via="pfdevilliers">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
      </div>

      <div style="float:left">
        <div id="fb-root" style="float:left;" ></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://affinitypropagation.com" send="false" layout="button_count" width="80" show_faces="false" font=""></fb:like>
      </div>

        <div style="float:left">
        <!-- Place this tag in your head or just before your close body tag -->
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'en-GB'}</script><!-- Place this tag where you want the +1 button to render --><g:plusone size="medium"></g:plusone>
      </div>
      </section>

    </div>

    <div id="aftercanvas">
      <h2>What is it?</h2>
      <article id="definition">
        Affinity Propagation form clusters of data points around a exemplar by
          considering all the data points as potential exemplars simultaneously.
          Messages are passed between data points until suitable clusters and
          exemplars are found.
      </article>

      <h2>How does it work?</h2>
      <article id="definition">
      <ol>
        <li>
        Each data point i sends a <span>responsibility r(i,k)</span> to a candidate exemplar indicating how much it favours the candidate exemplar over other candidates.
        </li>
        <li>
        <span>Availabilities a(i,k)</span> are sent from candidate exemplars to data points indicating how well the candidate exemplar can act as a cluster center for the data points.
        </li>
        <li>
        After each iteration availability and responsibility can be combined to identify the exemplars, <span>a(i,k) + r(i,k)</span>.
        </li>
      </ol>
      </article>

      <h2>Further Reading</h2>
      <article id="definition">
      Dueck, D. and Frey, B.J.,Clustering by Passing Messages between Data points, University of Toronto Science 315, p. 972-976, February 2007
      </article>
      <article id="definition">
      For a in depth discussion about Affinity Propagation check out the official
      site at the
      <a href="http://www.psi.toronto.edu/index.php?q=affinity%20propagation">University of Toronto</a>
      </article>
    </div>

    <footer>
    <div class="center">
      <div id="finfo">
        <p>Pattern from <a href="http://dinpattern.com">DinPattern</a></p>
        <span id="copy"><p>Copyright &copy 2011 affinitypropagation.com</p></span>
    </div>
    <a href="http://twitter.com/pfdevilliers"><img id="twitter" src="img/twitter.png" style="height: 40px;"/></a>
    <p>Safari 5.0.4+, Firefox 5.0+, Chrome 12.0+, Opera 11.11+</p>
  </div>
    </footer>
  </div> <!--! end of #container -->


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>


    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

  <!-- scripts concatenated and minified via ant build script-->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <!--<script src="js/controller.js"></script>
  <script src="js/graphics.js"></script>
  <script src="js/affinity_propagation.js"></script>
  <script src="js/init.js"></script>-->
  <!-- end scripts-->


  <!--[if lt IE 7 ]>
    <script src="js/libs/dd_belatedpng.js"></script>
    <script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
  <![endif]-->


  <!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
  <script>
    var _gaq=[["_setAccount","UA-24225862-2"],["_setDomainName", ".affinitypropagation.com"],["_trackPageview"]];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
    s.parentNode.insertBefore(g,s)}(document,"script"));
  </script>

</body>
</html>