<commit_before><!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-US" dir="ltr"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <title>Demo | Collusion</title>
    <base target="_blank">
    <script src="d3.js"></script>
<link href="index.css" rel="stylesheet" type="text/css"/>
    <link href="branding/css/tabzilla.css" rel="stylesheet">
    <script src="branding/js/modernizr-2.5.0.min.js"></script>
        <link rel="stylesheet" media="screen,projection,tv" href="branding/css/common-min.css" />
      <link rel="stylesheet" media="screen,projection,tv" href="branding/css/template.css" />
    <link rel="shortcut icon" type="image/png" href="/media/img/favicon.png">
  </head>

  <body id="collusion" class="html-ltr demo">

    <div id="outer-wrapper">
    <div id="wrapper">

                            <header id="masthead">
            <a href="http://www.mozilla.org/" id="tabzilla">Mozilla</a>

              <nav id="nav-main" role="navigation">
  <ul>
      <li><a href="../" target="_self">Home</a></li>

      <li><b>Demo</b></li>
  </ul>
  </nav>
                        <h1><img src="branding/img/header-mozilla.png" alt="mozilla"><img src="branding/img/ford_foundation.gif" alt="Ford Foundation" /></h1>
          </header>
                  
        
<h1 id="main-feature" class="large">Collusion</h1>

<section class="container">
<div id="page">
<div id="sidebar" class="box">
  <div class="byline">By <a href="http://twitter.com/toolness">@toolness</a></div>

  <div id="sidebar-content">
  <div class="exposition">
    <blockquote>If you're not paying for something, you're not the customer; you're the product being sold.</blockquote><span class="attribution">- <NAME></span>
    <p>This page provides an interactive, real-time visualization of the entities that track your behavior across the web.</p>
  </div> <!-- end of exposition -->
  <div class="live-data" style="display: none;">
    <p>Keep browsing the web. As you do so, a graph on this page will change. Each dot represents a website.</p>
    <p>Sites in <span class="tracker">red</span> are confirmed trackers by <a href="http://privacychoice.org">privacychoice.org</a>. Sites in <span class="site">gray</span> are not, but may still track you.</p>
    <p>Sites with a halo are sites that you have visited. Sites without a halo are sites you have not visited.</p>
    <p>Hover your mouse over the dots to learn more about them.</p>
    <div class="settings-menu">
      <ul>
        <li id="reset-graph">Reset Graph</li>
        <li id="export-graph">Export Graph</li>
        <li id="hide-ui">Hide UI</li>
      </ul>
    </div> <!-- end of settingsmenu -->
    <p class="privacy-policy"><strong>Privacy Policy</strong> When you're using the add-on, we collect information from sites you visit solely to show you how they're connected. This information is stored locally on your computer and you can delete it by resetting the graph. We don't give away this information to anyone except you.</p>
  </div> <!-- end of live-data -->
  <div class="demo" style="display: none;">
    <div class="step 0">
    <a href="https://secure.toolness.com/xpi/collusion.xpi" class="button download">Download the Collusion add-on for Firefox</a>
      <p>Since you don't seem to have the <a href="https://secure.toolness.com/xpi/collusion.html" class="xpi-download">Collusion Firefox add-on</a> installed, we'll show you a demo of the software.</p>
      <p><span class="next">Click here</span> to see what happens when you start your browser and visit the Internet Movie Database at imdb.com.</p>
    </div>
    <div class="step 1">
      <p>Each dot in this graph represents a website. The gray dot in the middle is imdb.com; the red dots near it are advertising sites that have created <a href="http://en.wikipedia.org/wiki/HTTP_cookie">cookies</a> in your browser and are now tracking your behavior on the IMDB.</p>
      <p>The advertising sites are colored red because <a href="http://privacychoice.org">privacychoice.org</a> has determined that they're behavioral tracking sites.  Non-red sites may still track you.</p>
      <p>Hover your mouse over any of the sites to learn more about them.</p>
      <p>When you're done, <span class="next">click here</span> to continue your web adventure. Our next stop is the New York Times website.</p>
    </div>
    <div class="step 2">
      <p>It looks like the New York Times is affiliated with some of the same advertising companies as the IMDB.</p>
      <p>Because the same cookies were transmitted to the same advertisers when you visited both sites, those advertisers effectively track you <em>across</em> them. That's valuable data for their market research.</p>
      <p>When you're ready, <span class="next">click here</span> to visit our next stop, the Huffington Post.</p>
    </div>
    <div class="step 3">
      <p>Some companies are already using their knowledge about you to determine what you see on the sites they're affiliated with&mdash;not just the ads you see, but the actual content you read. <NAME> examines what this could mean for society at large in his book <a href="http://www.amazon.com/Filter-Bubble-Internet-Hiding-Pariser/dp/067092038X/ref=tmm_pap_title_0">The Filter Bubble</a>.</p>
      <p>By the way, if the graph is starting to look a bit confusing, try dragging the dots around with your mouse to get a better view.</p>
      <p>Then, <span class="next">click here</span> to go to our next stop, gamespot.com.</p>
    </div>
    <div class="step 4">
      <p>If you haven't realized it yet, companies are tracking you across most of the sites you visit daily on the web. It's quite likely that these companies know more about you than your government. Some of them might even know more about you than your best friends.</p>
      <p><span class="next">Click here</span> to visit our final stop, reference.com.</p>
    </div>
    <div class="step 5">
      <p>Thanks for trying out this demo. If you'd like to see this graph change in real time based on the sites you visit in your own browser, feel free to try the <a href="https://secure.toolness.com/xpi/collusion.html" class="xpi-download">Collusion Firefox add-on</a>. Even visiting the sites mentioned in the demo will probably give you different visualizations, because some services you may be logged into&mdash;like Facebook&mdash;can also track you across sites.</p>
      <p>If you want to block companies from tracking you on the internet, you can install <a href="http://www.privacychoice.org/trackerblock/firefox">TrackerBlock</a> for Firefox and Internet Explorer.</p>
      <p>For more information about the making of this demo, check out the <a href="http://www.toolness.com/wp/2011/07/collusion/">blog post</a> and <a href="https://github.com/toolness/collusion">code repository</a>. Feel free to tweet at <a href="http://twitter.com/toolness">toolness</a> if you have any feedback!</p>
    </div>
  </div> <!-- End of .demo -->
  <div id="domain-infos">Mouse over any circle to see how that site is involved in tracking.</div> <!-- Templates are copied into here -->
  </div> <!-- End of #sidebar-content -->
</div> <!-- End of #sidebar -->
<div id="chart"></div><!-- The d3 layout graph will go inside this div -->
</div>
<div id="templates">
  <div class="info" style="display: none;">
    <h2 class="domain"></h2>

    <div class="referrees">
      <p>When you visit <a class="domain"></a>, it informs the following websites about your visit.</p>
      <ul></ul>
    </div>
    <div class="referrers">
      <p>The site <a class="domain"></a> tracks your behavior across the following websites.</p>
      <ul></ul>
    </div>
  </div>
</div>
</section>          
</div><!-- close #wrapper -->

<footer id="colophon"><commit_msg>Bug 64 - rewrote some of the demo text to be more appropriate to the context in which it now appears.<commit_after><!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-US" dir="ltr"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <title>Demo | Collusion</title>
    <base target="_blank">
    <script src="d3.js"></script>
<link href="index.css" rel="stylesheet" type="text/css"/>
<link href="demo.css" rel="stylesheet" type="text/css"/>
    <link href="branding/css/tabzilla.css" rel="stylesheet">
    <script src="branding/js/modernizr-2.5.0.min.js"></script>
        <link rel="stylesheet" media="screen,projection,tv" href="branding/css/common-min.css" />
      <link rel="stylesheet" media="screen,projection,tv" href="branding/css/template.css" />
    <link rel="shortcut icon" type="image/png" href="/media/img/favicon.png">
  </head>

  <body id="collusion" class="html-ltr demo">

    <div id="outer-wrapper">
    <div id="wrapper">

                            <header id="masthead">
            <a href="http://www.mozilla.org/" id="tabzilla">Mozilla</a>

              <nav id="nav-main" role="navigation">
  <ul>
      <li><a href="../" target="_self">Home</a></li>

      <li><b>Demo</b></li>
  </ul>
  </nav>
                        <h1><img src="branding/img/header-mozilla.png" alt="mozilla"><img src="branding/img/ford_foundation.gif" alt="Ford Foundation" /></h1>
          </header>
                  
        
<h1 id="main-feature" class="large">Collusion</h1>

<section class="container">
<div id="page">
<div id="sidebar" class="box">
  <div class="byline"></a></div>

  <div id="sidebar-content">
  <div class="exposition">
    <blockquote>If you're not paying for something, you're not the customer; you're the product being sold.</blockquote><span class="attribution">- <NAME></span>
    <p>Collusion provides an interactive, real-time visualization of the entities that track your behavior across the web.</p>
  </div> <!-- end of exposition -->
  <div class="live-data" style="display: none;">
    <p>Keep browsing the web. As you do so, a graph on this page will change. Each dot represents a website.</p>
    <p>Sites in <span class="tracker">red</span> are confirmed trackers by <a href="http://privacychoice.org">privacychoice.org</a>. Sites in <span class="site">gray</span> are not, but may still track you.</p>
    <p>Sites with a halo are sites that you have visited. Sites without a halo are sites you have not visited.</p>
    <p>Hover your mouse over the dots to learn more about them.</p>
    <div class="settings-menu">
      <ul>
        <li id="reset-graph">Reset Graph</li>
        <li id="export-graph">Export Graph</li>
        <li id="hide-ui">Hide UI</li>
      </ul>
    </div> <!-- end of settingsmenu -->
    <p class="privacy-policy"><strong>Privacy Policy</strong> When you're using the add-on, we collect information from sites you visit solely to show you how they're connected. This information is stored locally on your computer and you can delete it by resetting the graph. We don't give away this information to anyone except you.</p>
  </div> <!-- end of live-data -->
  <div class="demo" style="display: none;">
    <div class="step 0">
      <p>This page will show you a demo of what you might see if you were surfing the web with Collusion.</p>
      <p><span class="next">Click here</span> to see what happens when you start your browser and visit the Internet Movie Database at imdb.com.</p>
    </div>
    <div class="step 1">
      <p>Each dot in this graph represents a website. The gray dot in the middle is imdb.com; the red dots near it are advertising sites that have created <a href="http://en.wikipedia.org/wiki/HTTP_cookie">cookies</a> in your browser and are now tracking your behavior on the IMDB.</p>
      <p>The advertising sites are colored red because <a href="http://privacychoice.org">privacychoice.org</a> has determined that they're behavioral tracking sites.  Non-red sites may still track you.</p>
      <p>Hover your mouse over any of the sites to learn more about them.</p>
      <p>When you're done, <span class="next">click here</span> to continue your web adventure. Our next stop is the New York Times website.</p>
    </div>
    <div class="step 2">
      <p>It looks like the New York Times is affiliated with some of the same advertising companies as the IMDB.</p>
      <p>Because the same cookies were transmitted to the same advertisers when you visited both sites, those advertisers effectively track you <em>across</em> them. That's valuable data for their market research.</p>
      <p>When you're ready, <span class="next">click here</span> to visit our next stop, the Huffington Post.</p>
    </div>
    <div class="step 3">
      <p>Some companies are already using their knowledge about you to determine what you see on the sites they're affiliated with&mdash;not just the ads you see, but the actual content you read. <NAME> examines what this could mean for society at large in his book <b>The Filter Bubble</b>. Watch Eli's TED talk on the Filter Bubble <a href="http://www.ted.com/talks/eli_pariser_beware_online_filter_bubbles.html">here</a>.</p>
      <p>By the way, if the graph is starting to look a bit confusing, try dragging the dots around with your mouse to get a better view.</p>
      <p>Then, <span class="next">click here</span> to go to our next stop, gamespot.com.</p>
    </div>
    <div class="step 4">
      <p>If you haven't realized it yet, companies are tracking you across most of the sites you visit daily on the web. It's quite likely that these companies know more about you than your government. Some of them might even know more about you than your best friends.</p>
      <p><span class="next">Click here</span> to visit our final stop, reference.com.</p>
    </div>
    <div class="step 5">
      <p>Thanks for trying out this demo. If you'd like to see this graph change in real time based on the sites you visit in your own browser, feel free to try the <a href="https://secure.toolness.com/xpi/collusion.html" class="xpi-download">Collusion Firefox add-on</a>. Even visiting the sites mentioned in the demo will probably give you different visualizations, because some services you may be logged into&mdash;like Facebook&mdash;can also track you across sites.</p>
      <p>If you want to block companies from tracking you on the internet, you can install <a href="http://www.privacychoice.org/trackerblock/firefox">TrackerBlock</a> for Firefox and Internet Explorer.</p>
      <p>Collusion was created as a prototype by <NAME>. For more information about the making of this demo, check out the <a href="http://www.toolness.com/wp/2011/07/collusion/">blog post</a> and <a href="https://github.com/toolness/collusion">code repository</a>.</p>
    </div>
  </div> <!-- End of .demo -->

  <a href="https://addons.mozilla.org/en-US/firefox/addon/collusion/" class="button download">Download the Collusion add-on for Firefox</a>

  <div id="domain-infos">Mouse over any circle to see how that site is involved in tracking.</div> <!-- Templates are copied into here -->
  </div> <!-- End of #sidebar-content -->
</div> <!-- End of #sidebar -->
<div id="chart"></div><!-- The d3 layout graph will go inside this div -->
</div>
<div id="templates">
  <div class="info" style="display: none;">
    <h2 class="domain"></h2>

    <div class="referrees">
      <p>When you visit <a class="domain"></a>, it informs the following websites about your visit.</p>
      <ul></ul>
    </div>
    <div class="referrers">
      <p>The site <a class="domain"></a> tracks your behavior across the following websites.</p>
      <ul></ul>
    </div>
  </div>
</div>
</section>          
</div><!-- close #wrapper -->

<footer id="colophon">
{'fraction_non_alphanumeric': 0.14960384303449997, 'fraction_numerical': 0.004990953896063385, 'mean_word_length': 3.516765285996055, 'pattern_counts': {'":': 0, '<': 450, '<?xml version=': 0, '>': 448, 'https://': 7, 'lorem ipsum': 0, 'www.': 8, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 9, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3695970', 'n_tokens_mistral': 4950, 'n_tokens_neox': 4761, 'n_words': 1803}