commit files to HF hub

.gitattributes

@@ -25,3 +25,121 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zstandard filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/data-leak/face.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/confusing_pointiness.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/confusing_shape_name.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/confusing_size.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/data_labelers.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/dataset-worldviews-shareimg.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/interface_default.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/interface_shape_name_false.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/interface_shape_name_true.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/labels_1.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/labels_2.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/labels_3.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/labels_4.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/newspapers_01.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/newspapers_pointiness.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/newspapers_shape_name.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/newspapers_size.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/person_0.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/person_1.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/person_2.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/person_3.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/seattle.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/seattle_first_tags.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/seattle_second_tags.png filter=lfs diff=lfs merge=lfs -text
+public/dataset-worldviews/img/woman_washing_clothes.jpeg filter=lfs diff=lfs merge=lfs -text
+public/fill-in-the-blank/img/wiki-years-black.png filter=lfs diff=lfs merge=lfs -text
+public/fill-in-the-blank/img/wiki-years.png filter=lfs diff=lfs merge=lfs -text
+public/hidden-bias/over.png filter=lfs diff=lfs merge=lfs -text
+public/images/anonymization.png filter=lfs diff=lfs merge=lfs -text
+public/images/dataset-worldviews-shareimg.png filter=lfs diff=lfs merge=lfs -text
+public/images/dataset-worldviews.png filter=lfs diff=lfs merge=lfs -text
+public/images/fairness.png filter=lfs diff=lfs merge=lfs -text
+public/images/fill-in-the-blank-abstract.png filter=lfs diff=lfs merge=lfs -text
+public/images/fill-in-the-blank.png filter=lfs diff=lfs merge=lfs -text
+public/images/hidden-bias.png filter=lfs diff=lfs merge=lfs -text
+public/images/measuring-diversity.png filter=lfs diff=lfs merge=lfs -text
+public/images/measuring-fairness.png filter=lfs diff=lfs merge=lfs -text
+public/images/medical-fairness.gif filter=lfs diff=lfs merge=lfs -text
+public/images/model-inversion.png filter=lfs diff=lfs merge=lfs -text
+public/images/pair_logo_full.png filter=lfs diff=lfs merge=lfs -text
+public/images/private-and-fair-abstract.png filter=lfs diff=lfs merge=lfs -text
+public/images/private-and-fair.png filter=lfs diff=lfs merge=lfs -text
+public/images/uncertainty-calibration-abstract.png filter=lfs diff=lfs merge=lfs -text
+public/images/uncertainty-calibration.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/blue0.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/blue1.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/blue_doctor.jpg filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/bright_blue.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/construction.jpg filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/construction.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/green0.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/green2.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/green_doctor.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/white0.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/white1.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/white2.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/white3.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/white4.png filter=lfs diff=lfs merge=lfs -text
+public/measuring-diversity/img/white5.png filter=lfs diff=lfs merge=lfs -text
+source/data-leak/face.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/confusing_pointiness.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/confusing_shape_name.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/confusing_size.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/data_labelers.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/dataset-worldviews-shareimg.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/interface_default.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/interface_shape_name_false.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/interface_shape_name_true.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/labels_1.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/labels_2.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/labels_3.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/labels_4.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/newspapers_01.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/newspapers_pointiness.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/newspapers_shape_name.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/newspapers_size.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/person_0.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/person_1.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/person_2.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/person_3.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/seattle.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/seattle_first_tags.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/seattle_second_tags.png filter=lfs diff=lfs merge=lfs -text
+source/dataset-worldviews/img/woman_washing_clothes.jpeg filter=lfs diff=lfs merge=lfs -text
+source/fill-in-the-blank/img/wiki-years-black.png filter=lfs diff=lfs merge=lfs -text
+source/fill-in-the-blank/img/wiki-years.png filter=lfs diff=lfs merge=lfs -text
+source/hidden-bias/over.png filter=lfs diff=lfs merge=lfs -text
+source/images/anonymization.png filter=lfs diff=lfs merge=lfs -text
+source/images/dataset-worldviews-shareimg.png filter=lfs diff=lfs merge=lfs -text
+source/images/dataset-worldviews.png filter=lfs diff=lfs merge=lfs -text
+source/images/fairness.png filter=lfs diff=lfs merge=lfs -text
+source/images/fill-in-the-blank-abstract.png filter=lfs diff=lfs merge=lfs -text
+source/images/fill-in-the-blank.png filter=lfs diff=lfs merge=lfs -text
+source/images/hidden-bias.png filter=lfs diff=lfs merge=lfs -text
+source/images/measuring-diversity.png filter=lfs diff=lfs merge=lfs -text
+source/images/measuring-fairness.png filter=lfs diff=lfs merge=lfs -text
+source/images/medical-fairness.gif filter=lfs diff=lfs merge=lfs -text
+source/images/model-inversion.png filter=lfs diff=lfs merge=lfs -text
+source/images/pair_logo_full.png filter=lfs diff=lfs merge=lfs -text
+source/images/private-and-fair-abstract.png filter=lfs diff=lfs merge=lfs -text
+source/images/private-and-fair.png filter=lfs diff=lfs merge=lfs -text
+source/images/uncertainty-calibration-abstract.png filter=lfs diff=lfs merge=lfs -text
+source/images/uncertainty-calibration.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/blue0.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/blue1.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/blue_doctor.jpg filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/bright_blue.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/construction.jpg filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/construction.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/green0.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/green2.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/green_doctor.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/white0.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/white1.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/white2.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/white3.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/white4.png filter=lfs diff=lfs merge=lfs -text
+source/measuring-diversity/img/white5.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,14 @@
+node_modules
+yarn.lock
+watch-doc/credentials.json
+watch-doc/token.json
+server-side/fill-in-the-blank/cache/
+server-side/fill-in-the-blank/env/
+server-side/fill-in-the-blank/py/bert-large-uncased-whole-word-masking/pytorch_model.bin
+server-side/fill-in-the-blank/py/zari-bert-cda/pytorch_model.bin
+server-side/fill-in-the-blank/py/bert-large-uncased/pytorch_modecl.bin
+server-side/fill-in-the-blank/zari-convert/raw
+server-side/dp-model/cns-cache
+*.pytorch_modecl.bin
+*.DS_Store
+.vscode/*

CONTRIBUTING.md

@@ -0,0 +1,28 @@
+# How to Contribute
+
+We'd love to accept your patches and contributions to this project. There are
+just a few small guidelines you need to follow.
+
+## Contributor License Agreement
+
+Contributions to this project must be accompanied by a Contributor License
+Agreement. You (or your employer) retain the copyright to your contribution;
+this simply gives us permission to use and redistribute your contributions as
+part of the project. Head over to <https://cla.developers.google.com/> to see
+your current agreements on file or to sign a new one.
+
+You generally only need to submit a CLA once, so if you've already submitted one
+(even if it was for a different project), you probably don't need to do it
+again.
+
+## Code reviews
+
+All submissions, including submissions by project members, require review. We
+use GitHub pull requests for this purpose. Consult
+[GitHub Help](https://help.github.com/articles/about-pull-requests/) for more
+information on using pull requests.
+
+## Community Guidelines
+
+This project follows [Google's Open Source Community
+Guidelines](https://opensource.google.com/conduct/).

LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,10 +1,10 @@
 ---
-title: Private And Fair
-emoji: 🔥
-colorFrom: yellow
-colorTo: green
+title: private-and-fair
+emoji: 🪄
+colorFrom: green
+colorTo: purple
 sdk: static
 pinned: false
+license: apache-2.0
+app_file: public/private-and-fair/index.html
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces#reference

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "explorable-ml",
+  "dependencies": {
+    "chokidar": "^1.7.0",
+    "doc2txt": "^0.0.6",
+    "googleapis": "39",
+    "highlight.js": "^9.12.0",
+    "hot-server": "^0.0.18",
+    "marked": "^0.3.6",
+    "scrape-stl": "^1.0.3"
+  },
+  "scripts": {
+    "start": "mkdir -p public && node source/third_party/index.js --watch & sleep 1 && cd public/ && hot-server --port=2344",
+    "pub": "mkdir -p public && node source/third_party/index.js && gcloud --quiet app deploy --project=google.com:explorable-ml",
+    "watch": "bin/watch-doc.sh"
+  },
+  "license": "MIT"
+}

public/anonymization/annotations.js

@@ -0,0 +1,38 @@
+var annotations = 
+
+[
+]
+
+
+
+
+function addSwoop(c){
+  var swoopy = d3.swoopyDrag()
+    .x(d => c.x(d.x))
+    .y(d => c.y(d.y))
+    .draggable(0)
+    .annotations(annotations)
+
+  var swoopySel = c.svg.append('g.annotations').call(swoopy)
+
+  c.svg.append('marker#arrow')
+      .attr('viewBox', '-10 -10 20 20')
+      .attr('markerWidth', 20)
+      .attr('markerHeight', 20)
+      .attr('orient', 'auto')
+    .append('path').at({d: 'M-6.75,-6.75 L 0,0 L -6.75,6.75'})
+
+
+  swoopySel.selectAll('path').attr('marker-end', 'url(#arrow)')
+  window.annotationSel = swoopySel.selectAll('g')
+    .st({fontSize: 12, opacity: d => d.slide == 0 ? 1 : 0})
+
+  swoopySel.selectAll('text')
+    .each(function(d){
+      d3.select(this)
+        .text('')                        //clear existing text
+        .tspans(d3.wordwrap(d.text, d.width || 20), 12) //wrap after 20 char
+    })  
+}
+
+

public/anonymization/index.html

@@ -0,0 +1,268 @@
+<!--
+@license
+Copyright 2020 Google. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!DOCTYPE html>
+
+<html>
+<head>
+	<meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="apple-touch-icon" sizes="180x180" href="https://pair.withgoogle.com/images/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="https://pair.withgoogle.com/images/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="https://pair.withgoogle.com/images/favicon/favicon-16x16.png">
+  <link rel="mask-icon" href="https://pair.withgoogle.com/images/favicon/safari-pinned-tab.svg" color="#00695c">
+  <link rel="shortcut icon" href="https://pair.withgoogle.com/images/favicon.ico">
+
+  <script>
+    !(function(){
+      var url = window.location.href
+      if (url.split('#')[0].split('?')[0].slice(-1) != '/' && !url.includes('.html')) window.location = url + '/'
+    })()
+  </script>
+
+  <title>How randomized response can help collect sensitive information responsibly</title>
+  <meta property="og:title" content="How randomized response can help collect sensitive information responsibly">
+  <meta property="og:url" content="https://pair.withgoogle.com/explorables/anonymization/">
+
+  <meta name="og:description" content="The availability of giant datasets and faster computers is making it harder to collect and study private information without inadvertently violating people's privacy.">
+  <meta property="og:image" content="https://pair.withgoogle.com/explorables/images/anonymization.png">
+  <meta name="twitter:card" content="summary_large_image">
+  
+	<link rel="stylesheet" type="text/css" href="../style.css">
+
+  <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,500,700|Roboto:700,500,300' rel='stylesheet' type='text/css'>  
+  <link href="https://fonts.googleapis.com/css?family=Google+Sans:400,500,700" rel="stylesheet">
+
+	<meta name="viewport" content="width=device-width">
+</head>
+<body>
+  <div class='header'>
+    <div class='header-left'>
+      <a href='https://pair.withgoogle.com/'>
+        <img src='../images/pair-logo.svg' style='width: 100px'></img>
+      </a>
+      <a href='../'>Explorables</a> 
+    </div>
+  </div>
+  
+  <h1 class='headline'>How randomized response can help collect sensitive information responsibly</h1>
+  <div class="post-summary">Giant datasets are revealing new patterns in <a href='https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5070532/'>cancer</a>, <a href='https://opportunityinsights.org/national_trends/'>income inequality</a> and other important areas. However, the widespread availability of fast computers that can cross reference public data is making it harder to collect private information without inadvertently violating people's privacy. Modern randomization techniques can help preserve anonymity. </div>
+  <link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="style-graph-scroll.css">
+
+<div id='container' class='container-1'>
+<div id='graph'></div>
+<div id='sections'>
+<div>
+
+<h3>Anonymous Data</h3>
+
+<p>Let's pretend we're analysts at a small college, looking at anonymous survey data about plagiarism.
+
+<p>We've gotten responses from the entire student body, reporting if they've ever <span class='highlight purple'>plagiarized</span> or <span class='highlight grey'>not</span>. To encourage them to respond honestly, names were not collected. 
+<p>
+
+<p class='note'>The data here has been randomly generated</p>
+</div>
+
+
+<div>
+<p>On the survey students also report several bits of information about themselves, like their age...  
+</div>
+
+
+<div>
+<p>...and what state they're from. 
+
+<p>This additional information is critical to finding potential patterns in the data—why have so many first-years from New Hampshire plagiarized?  
+</div>
+
+
+<div>
+<h3>Revealed Information</h3>
+<p>But granular information comes with a cost. 
+
+<p>One student has a <span class='highlight box square orange'>unique</span> age/home state combination. By searching another student database for a 19-year old from Vermont we can identify one of the plagiarists from supposedly anonymous survey data.
+</div>
+
+
+<div>
+<p>Increasing granularity exacerbates the problem. If the students reported slightly more about their ages by including what season they were born in, we'd be able to <span class='highlight box square orange'>identify</span> about a sixth of them. 
+
+<p>This isn't just a hypothetical:  A <a href="https://cpg.doc.ic.ac.uk/individual-risk/">birthday / gender / zip code combination</a> uniquely identifies 83% of the people in the United States. 
+
+<p>With the spread of large datasets, it is increasingly difficult to release detailed information without inadvertently revealing someone's identity. A week of a person's location data could <a href='https://www.nytimes.com/interactive/2018/12/10/business/location-data-privacy-apps.html'>reveal</a> a home and work address—possibly enough to find a name using public records.
+</div>
+
+
+<div>
+<h3>Randomization</h3>
+<p>One solution is to randomize responses so each student has plausible deniability. This lets us buy privacy at the cost of some uncertainty in our estimation of plagiarism rates.
+
+<p><b>Step 1:</b> Each student flips a coin and looks at it without showing anyone.
+</div>
+
+
+<div>
+<p><b>Step 2:</b> Students who flip heads <span class='highlight purple-box box'>report plagiarism</span>, even if they haven't plagiarized. 
+
+<p>Students that flipped tails report the truth, secure with the knowledge that even if their response is linked back to their name, they can claim they flipped heads.
+</div>
+
+
+<div>
+<p>With a little bit of math, we can approximate the rate of plagiarism from these randomized responses. We'll skip the algebra, but doubling the reported non-plagiarism rate gives a good estimate of the actual non-plagiarism rate.    
+
+<p class='rand-text'></p>
+
+<div class='button-outer'>
+<div class='button-container flip-coins-once'>
+Flip coins
+</div>
+</div>
+
+</div>
+
+
+<div>  
+<h3>How far off can we be?</h3>
+
+<p>If we simulate this coin flipping lots of times, we can see the distribution of errors. 
+
+<p>The estimates are close most of the time, but errors can be quite large.  
+
+<div class='button-outer'>
+<div class='button-container flip-coins'>
+Flip coins 200 times
+</div>
+</div>
+
+</div>
+
+
+<div>    
+<p>Reducing the random noise (by reducing the number of students who flip heads) increases the accuracy of our estimate, but risks leaking information about students.  
+
+<p>If the coin is heavily weighted towards tails, identified students can't credibly claim they reported plagiarizing because they flipped heads.  
+
+<div class="slider-outer">
+<div class="slide-container-heads-prob"></div>
+<div class='pointer'><div></div></div>
+</div>
+
+</div>
+
+
+<div>    
+<p>One surprising way out of this accuracy-privacy tradeoff: carefully collect information from even more people. 
+
+<p>If we got students from other schools to fill out this survey, we could accurately measure plagiarism while protecting everyone's privacy. With enough students, we could even start comparing plagiarism across different age groups again—safely this time.     
+ 
+<div class="slider-outer">
+<div class="slide-container-population"></div>
+&nbsp;
+<div class="slide-container-heads-prob"></div>
+</div>
+</div>
+
+
+
+</div>
+</div>
+
+<h3>Conclusion</h3>
+
+<p>Aggregate statistics about private information are valuable, but can be risky to collect. We want researchers to be able to study things like the connection between demographics and health outcomes without revealing our entire medical history to our neighbors. The coin flipping technique in this article, called <a href='https://en.wikipedia.org/wiki/Randomized_response'>randomized response</a>, makes it possible to safely study private information.  
+
+<p>You might wonder if coin flipping is the only way to do this. It's not—<a href='https://desfontain.es/privacy/differential-privacy-in-more-detail.html'>differential privacy</a> can add targeted bits of random noise to a dataset and guarantee privacy. More flexible than randomized response, the 2020 Census will use it to <a href='https://www.youtube.com/watch?v=pT19VwBAqKA'>protect respondents' privacy</a>. In addition to randomizing responses, differential privacy also limits the impact any one response can have on the released data.
+
+
+<h3>Credits</h3>
+
+<p>Adam Pearce and Ellen Jiang // September 2020
+
+<p>Thanks to Carey Radebaugh, Fernanda Viégas, Emily Reif, Hal Abelson, Jess Holbrook, Kristen Olson, Mahima Pushkarna, Martin Wattenberg, Michael Terry, Miguel Guevara, Rebecca Salois, Yannick Assogba, Zan Armstrong and our other colleagues at Google for their help with this piece.
+
+</div>
+
+
+<h3>More Explorables</h3>
+
+<p id='recirc'></p>
+
+<div id='end'></div>
+
+<script src='../third_party/seedrandom.min.js'></script>
+<script src='../third_party/d3_.js'></script>
+<script src='../third_party/swoopy-drag.js'></script>
+<script src='../third_party/misc.js'></script>
+<script src='annotations.js'></script>
+
+
+<script src='make-axii.js'></script>
+<script src='make-students.js'></script>
+<script src='make-sel.js'></script>
+<script src='make-estimates.js'></script>
+<script src='make-sliders.js'></script>
+<script src='make-slides.js'></script>
+<script src='make-gs.js'></script>
+<script src='init.js'></script>
+
+<script src='../third_party/recirc.js'></script>
+
+</body>
+
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138505774-1"></script>
+<script>
+  if (window.location.origin === 'https://pair.withgoogle.com'){
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'UA-138505774-1');
+  }
+</script>
+
+<script>
+  // Tweaks for displaying in an iframe
+  if (window !== window.parent){
+    
+    // Open links in a new tab
+    Array.from(document.querySelectorAll('a'))
+      .forEach(e => {
+        // skip anchor links
+        if (e.href && e.href[0] == '#') return
+
+        e.setAttribute('target', '_blank')
+        e.setAttribute('rel', 'noopener noreferrer')
+      })
+
+    // Remove recirc h3
+    Array.from(document.querySelectorAll('h3'))
+      .forEach(e => {
+        if (e.textContent != 'More Explorables') return
+
+        e.parentNode.removeChild(e)
+      })
+
+    // Remove recirc container
+    var recircEl = document.querySelector('#recirc')
+    recircEl.parentNode.removeChild(recircEl)
+  }
+</script>
+
+</html>

public/anonymization/init.js

@@ -0,0 +1,77 @@
+d3.select('body').selectAppend('div.tooltip.tooltip-hidden')
+
+window.ages =   '18 19 20 21 22'.split(' ')
+window.states = 'RI NH NY CT VT'.split(' ')
+
+window.init = function(){
+  // console.clear()
+  var graphSel = d3.select('#graph').html('').append('div')
+  window.c = d3.conventions({
+    sel: graphSel,
+    width: 460,
+    height: 460,
+  })
+
+  function sizeGraphSel(){
+    var clientWidth = d3.select('body').node().clientWidth
+
+    window.scale = d3.clamp(1, (c.totalWidth + 35)/(clientWidth - 10), 2) // off by one, s is 35
+
+    graphSel.st({
+      transform: `scale(${1/scale})`,
+      transformOrigin: `0px 0px`,
+    })
+
+    d3.select('#graph').st({height: scale == 1 ? 500 : 710})
+  }
+  sizeGraphSel()
+  d3.select(window).on('resize', sizeGraphSel)
+
+
+  c.svg = c.svg.append('g').translate([.5, .5])
+
+  window.axii = makeAxii()
+  window.sliders = makeSliders()
+  window.students = makeStudents()
+  window.sel = makeSel()
+  window.slides = makeSlides()
+  window.estimates = makeEstimates()
+
+
+
+
+  var error = 0
+  while (error < .02 || error > .05){
+    estimates.flipCoin()
+    error = Math.abs(estimates.active.val - .5)
+  }
+
+  makeGS()
+}
+
+init()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

public/anonymization/make-axii.js

@@ -0,0 +1,86 @@
+window.makeAxii = function(){
+
+  var stateScale = d3.scaleBand().domain(states).range(c.x.range())
+  var stateAxis = c.svg.append('g.axis.state.init-hidden')
+
+  var bw = stateScale.bandwidth()/2
+
+  stateAxis.appendMany('text', states)
+    .translate(d => [stateScale(d) + bw, c.height + 22])
+    .text(d => d)
+    .at({
+      textAnchor: 'middle',
+    })
+    .st({fill: '#444'})
+
+  stateAxis.appendMany('path', d3.range(ages.length + 1))
+    .at({
+      d: d => ['M', d*c.width/(ages.length), '0 V', c.height].join(' '),
+      stroke: '#aaa',
+    })
+
+  stateAxis.append('text.bold').text('Home State')
+    .translate([c.width/2, c.height + 45])
+    .at({textAnchor: 'middle'})
+
+  var ageScale = d3.scaleBand().domain(ages.slice().reverse()).range(c.x.range())
+  var ageAxis = c.svg.append('g.axis.age.init-hidden')
+
+  ageAxis.appendMany('text', ages)
+    .translate(d => [-30, ageScale(d) + bw])
+    .text(d => d)
+    .at({dy: '.33em'})
+    .st({fill: '#444'})
+
+  ageAxis.appendMany('path', d3.range(ages.length + 1))
+    .at({
+      d: d => ['M 0', d*c.width/(ages.length), 'H', c.width].join(' '),
+      stroke: '#aaa',
+    })
+
+  if (scale == 1){
+    ageAxis
+      .append('g').translate([-43, c.height/2])
+      .append('text.bold').text('Age')
+      .at({textAnchor: 'middle', transform: 'rotate(-90)'})
+  } else {
+    ageAxis
+      .append('g').translate([-22, 14])
+      .append('text.bold').text('Age')
+      .at({textAnchor: 'middle'})
+  }
+
+  var seasonAxis = c.svg.append('g.axis.state.init-hidden').lower()
+  seasonAxis.appendMany('g', ages)
+    .translate(d => ageScale(d), 1)
+    .appendMany('path', d3.range(1, 4))
+    .at({
+      d: d => ['M 0', d*bw/4*2, 'H', c.width].join(' '),
+      stroke: '#ddd',
+    })
+
+  var headAxis = c.svg.append('g.axis.state.init-hidden')
+  headAxis.appendMany('text.bold', ['Heads', 'Tails'])
+    .text(d => d)
+    .translate((d, i) => [i ? c.width/4*3 + 20 : c.width/4 - 20, 88])
+    .at({textAnchor: 'middle'})
+
+
+  var headCaptionAxis = c.svg.append('g.axis.state.init-hidden')
+  headCaptionAxis.appendMany('text', ['reports plagiarism', 'reports truth'])
+    .text(d => d)
+    .translate((d, i) => [i ? c.width/4*3 + 20 : c.width/4 - 20, 88 + 15])
+    .at({textAnchor: 'middle'})
+    .st({fill: '#444'})
+
+
+  return {stateScale, stateAxis, headAxis, headCaptionAxis, ageScale, ageAxis, bw, seasonAxis}
+}
+
+
+
+
+
+
+
+if (window.init) window.init()

public/anonymization/make-estimates.js

@@ -0,0 +1,227 @@
+window.makeEstimates = function(){ 
+  var estimateScale = d3.scaleLinear()
+    .domain([.5 - .15, .5 + .15]).range([0, c.width])
+    .interpolate(d3.interpolateRound)
+
+  var jitterHeight = 90
+  var rs = 4 // rect size
+
+  var estimates = students[0].coinVals.map(d => ({val: .5, pctHead: .25, x: c.width/2, y: c.height - jitterHeight/2}))
+  var simulation = d3.forceSimulation(estimates)
+    .force('collide', d3.forceCollide(rs).strength(.1))
+    .stop()
+
+  function updateEstimates(){
+    var selectedStudents = students.all.slice(0, sliders.population)
+    
+    selectedStudents[0].coinVals.map((_, i) => {
+      estimates[i].pctHead = d3.mean(selectedStudents, d => (d.coinVals[i] < sliders.headsProb) || d.plagerized)
+
+      estimates[i].val = (1 - estimates[i].pctHead)/(1 - sliders.headsProb)
+    })
+    updateSimulation(60)
+  }  
+  updateEstimates()
+
+  function updateSimulation(ticks=80, yStrength=.005){
+    var variance = d3.variance(estimates, d => d.val)
+    var xStength = variance < .0005 ? .3 : .1
+
+    estimates.forEach(d => d.targetX = estimateScale(d.val))
+
+    simulation
+      .force('x', d3.forceX(d => d.targetX).strength(xStength))
+      .force('y', d3.forceY(c.height - jitterHeight/2).strength(yStrength))
+      .alpha(1)
+      // .alphaDecay(1 - Math.pow(0.001, 1/ticks))
+
+    for (var i = 0; i < ticks; ++i) simulation.tick()
+
+    estimates.forEach(d => {
+      d.x = Math.round(d.x)
+      d.y = Math.round(d.y)
+    })
+  }
+  updateSimulation(80, 1)
+  updateSimulation(80, .005)
+
+
+  // Set up DOM 
+  var histogramSel = c.svg.append('g').translate([0, -25])
+  var axisSel = histogramSel.append('g.axis.state.init-hidden')
+  var histogramAxis = axisSel.append('g')
+
+  var numTicks = 6
+  var xAxis = d3.axisTop(estimateScale).ticks(numTicks).tickFormat(d3.format('.0%')).tickSize(100)
+
+  histogramAxis.call(xAxis).translate([.5, c.height + 5])
+  middleTick = histogramAxis.selectAll('g').filter((d, i) => i === 3)
+  middleTick.select('text').classed('bold', 1)
+  middleTick.select('line').st({stroke: '#000'})
+  
+  histogramAxis.append('text.bold')
+    .text('actual non-plagiarism rate')
+    .translate([c.width/2, 11])
+    .st({fontSize: '10px'})
+
+  var containerSel = histogramSel.append('g#histogram').translate([0.5, .5])
+
+
+  // Selection overlay to highlight individual estimates.
+  var selectSize = rs*2 + 2
+  var selectColor = '#007276'
+  var rectFill = '#007276'
+
+  var activeSel = histogramSel.append('g.active.init-hidden.axis')
+    .st({pointerEvents: 'none'})
+
+  activeSel.append('rect')
+    .at({width: selectSize, height: selectSize, stroke: selectColor, fill: 'none', strokeWidth: 3})
+    .translate([-selectSize/2, -selectSize/2])
+
+  var activeTextHighlight = activeSel.append('rect')
+    .at({x: -32, width: 32*2, height: 18, y: -25, fill: 'rgba(255,255,255,.6)', rx: 10, ry: 10, xfill: 'red'})
+
+  var activeTextSel = activeSel.append('text.est-text.bold')
+    .text('34%')
+    .at({textAnchor: 'middle', textAnchor: 'middle', y: '-1em'})
+    .st({fill: selectColor})
+
+  var activePathSel = activeSel.append('path')
+    .st({stroke: selectColor, strokeWidth: 3})
+
+
+  // Update highlight DOM with current highlight
+  var curDrawData = {pctHead: .25, val: .5, x: c.width/2, y: c.height - jitterHeight/2}
+  function setActive(active, dur=0){
+    if (active !== estimates.active){
+      estimates.forEach(d => {
+        d.active = d == active
+        d.fy = d.active ? d.y : null
+      })
+      estimates.active = active
+    }
+
+    students.updateHeadsPos()
+
+
+    sel.flipCircle
+      .transition().duration(0).delay(d => d.i*5*(dur > 0 ? 1 : 0))
+      .at({transform: d => slides && slides.curSlide && slides.curSlide.showFlipCircle && d.coinVals[active.index] < sliders.headsProb ? 
+        'scale(1)' : 'scale(.1)'})
+
+
+    flipCoinTimer.stop()
+    if (dur){
+      var objI = d3.interpolateObject(curDrawData, active)
+
+      flipCoinTimer = d3.timer(ms => {
+        var t = d3.easeCubicInOut(d3.clamp(0, ms/dur, 1))
+        drawData(objI(t))
+        if (t == 1) flipCoinTimer.stop()
+      })
+    } else{
+      drawData(active)
+    }
+    
+    function drawData({pctHead, val, x, y}){
+      activeSel.translate([x + rs/2, y + rs/2])
+      activeTextSel.text('est. ' + d3.format('.1%')(val))
+      activePathSel.at({d: `M ${selectSize/2*Math.sign(c.width/2 - x)} -1 H ${c.width/2 - x}`})
+
+      var error = Math.abs(val - .5)
+      var fmt = d3.format(".1%")
+      var pop = sliders.population
+      d3.select('.rand-text')
+        // .html(`${fmt(1 - pctHead)} of students said they had never plagerized. Since about half the students flipped heads and automatically reported plagerizism, we double that to <span class='highlight square blue-box box'>estimate ${fmt(val)}</span> of students haven't plagerized—${error > .1 ? '' : error > .07 ? 'a little ' : 'not '}far from the actual rate of ${fmt(.5)}`)
+        // .html(`${Math.round((1 - pctHead)*pop)} of ${pop} students said they had never plagiarized. Since about half the students flipped heads and automatically reported plagiarism, we double that rate to <span class='highlight square blue-box box'>estimate ${fmt(val)}</span> of students haven't plagiarized—${error > .4 ? '' : error > .07 ? 'a little ' : 'not '}far from the actual rate of ${fmt(.5)}`)
+        .html(`Here, ${fmt(1 - pctHead)} students said they had never plagiarized. Doubling that, we <span class='highlight square blue-box box'>estimate ${fmt(val)}</span> of students haven't plagiarized—${error > .1 ? 'quite ' : error > .07 ? 'a little ' : 'not '}far from the actual rate of ${fmt(.5)}`)
+
+      curDrawData = {pctHead, val, x, y}
+    }
+  }
+  window.flipCoinTimer = d3.timer(d => d)
+
+
+
+  var estimateSel = containerSel.appendMany('rect.estimate', estimates)
+    .at({width: rs, height: rs, stroke: '#fff', fill: rectFill, strokeWidth: .5})
+    .st({fill: rectFill})
+    .translate([rs/2, rs/2])
+    .on('mouseover', (d, i) => {
+      if (window.slides.curSlide.showHistogram) {
+        setActive(d)
+      }
+    })
+
+  function setSelectorOpacity(textOpacity, strokeOpacity) {
+    activeTextSel.st({opacity: textOpacity})
+    activeSel.st({opacity: strokeOpacity})
+    activePathSel.st({opacity: strokeOpacity})
+  }
+
+  function render(transition=false){
+    estimateSel.translate(d => [d.x, d.y])
+    setActive(estimates.active)
+
+    if (transition){
+      if (window.flipAllCoinsTimer) window.flipAllCoinsTimer.stop()
+      window.flipAllCoinsTimer = d3.timer(ms => {
+        var t = d3.easeExpIn(d3.clamp(0, ms/5000, 1), 20)
+        if (flipAllCoinsTimer.forceEnd) t = 1
+        
+        if (t > .028) {
+          setSelectorOpacity(textOpacity=0, strokeOpacity=0.7)
+        }
+
+        var index = Math.floor((estimates.length - 2)*t) + 1
+        estimateSel.classed('active', (d, i) => i <= index)
+
+        setActive(estimates[index])
+        // flipCoinsSel.text('Flip coins ' + d3.format('03')(index < 100 ? index : index + 1) + ' times')
+        flipCoinsSel.text('Flip coins 200 times')
+
+        if (t == 1) {
+          flipAllCoinsTimer.stop()
+          setSelectorOpacity(textOpacity=1, strokeOpacity=1)
+        }
+      })
+    } else {
+      setSelectorOpacity(textOpacity=1, strokeOpacity=1)
+      flipCoinsSel
+    }   
+  }
+  window.flipAllCoinsTimer = d3.timer(d => d)
+
+
+  var flipCoinsSel = d3.select('.flip-coins').on('click', () => {
+    students.all.forEach(student => {
+      student.coinVals = student.coinVals.map(j => Math.random())
+    })
+
+    updateEstimates()
+    render(true)
+  })
+
+  d3.select('.flip-coins-once').on('click', flipCoin)
+  function flipCoin(){
+    active = estimates[0]
+
+    students.all.forEach(student => {
+      student.coinVals = student.coinVals.map(j => Math.random())
+    })
+
+    active.fy = active.y = c.height - jitterHeight/2
+    updateEstimates()
+
+    estimateSel.translate(d => [d.x, d.y])
+    estimates.active = null
+    setActive(active, 1000)
+  }
+
+  Object.assign(estimates, {updateEstimates, setActive, render, flipCoin, axisSel, containerSel, estimateSel, activeSel})
+
+  return estimates
+} 
+    
+if (window.init) window.init()

public/anonymization/make-gs.js

@@ -0,0 +1,105 @@
+window.makeGS = function(){
+  var prevSlideIndex = -1
+  function updateSlide(i){
+    var slide = slides[i]
+    if (!slide) return
+
+    d3.select('.tooltip').classed('tooltip-hidden', true)
+
+    var dur = 500
+
+    sel.student.transition('xKey').duration(dur).delay(dur ? slide.circleDelayFn : 0)
+      .translate(d => (d.isAdditionalStudent && slide.xKey != 'plagerizedShifted') ? [0,0]: d.pos[slide.xKey])
+
+      
+    if (sel.rectAt[slide.xKey]){
+      sel.uniqueBox.transition('at').duration(dur)
+        .delay(d => dur ? slide.circleDelayFn(d.d0) : 0)
+        .at(sel.rectAt[slide.xKey])
+        .translate(d => d.d0.group[slide.xKey].pos)
+    }
+
+    sel.uniqueBox.transition().duration(dur)
+      .st({opacity: slide.showUniqueBox ? 1 : 0})
+    
+    sel.uniqueSeasonBox.transition()
+      .delay((d, i) => slide.showUniqueSeasonBox ? dur*2 + i*40 : 0).duration(slide.showUniqueSeasonBox ? 0 : dur)
+      .st({opacity: slide.showUniqueSeasonBox ? 1 : 0})
+
+
+    if (sliders.headsProb != slide.headsProbTarget && slide.animateHeadsProbSlider != -1){
+      var headI = d3.interpolate(sliders.headsProb, slide.headsProbTarget)
+      if (window.headSliderTimer) window.headSliderTimer.stop()
+      window.headSliderTimer = d3.timer(ms => {
+        var dur = slide.animateHeadsProbSlider ? 2000 : 1
+        var t = d3.easeCubicInOut(d3.clamp(0, ms/dur, 1))
+        sliders.updateHeadsProb(headI(t))
+        if (t == 1) headSliderTimer.stop()
+      })
+    }
+
+    if (sliders.population != slide.populationTarget){
+      var popI = d3.interpolate(sliders.population, slide.populationTarget)
+      if (window.popSliderTimer) window.popSliderTimer.stop()
+      window.popSliderTimer = d3.timer(ms => {
+        var dur = slide.animatePopulationSlider ? 2000 : 1
+        var t = d3.easeCubicInOut(d3.clamp(0, ms/dur, 1))
+        sliders.updatePopulation(Math.round(popI(t)/2)*2)
+        if (t == 1) popSliderTimer.stop()
+      })
+    }
+
+    axii.stateAxis.transition().duration(dur/2)
+      .st({opacity: slide.showStateAxis ? 1 : 0})
+    axii.ageAxis.transition().duration(dur/2)
+      .st({opacity: slide.showAgeAxis ? 1 : 0})
+    axii.seasonAxis.transition().duration(dur/2)
+      .st({opacity: slide.showSeasonAxis ? 1 : 0})
+    axii.headAxis.transition().duration(dur/2)
+      .st({opacity: slide.showHeadAxis ? 1 : 0})
+    axii.headCaptionAxis.transition().duration(dur/2)
+      .st({opacity: slide.showHeadCaptionAxis ? 1 : 0})
+    estimates.axisSel.transition().delay(dur).duration(dur/2)
+      .st({opacity: slide.showHistogramAxis ? 1 : 0})
+    estimates.activeSel.transition().delay(dur).duration(dur/2)
+      .st({opacity: slide.showHistogramAxis ? 1 : 0})
+    // axii.estimateAxis.transition().delay(dur).duration(dur/2)
+    //   .st({opacity: slide.showEstimate && !slide.enterHistogram ? 1 : 0})
+    // axii.plagerizedAxis.transition().delay(dur).duration(dur/2)
+    //   .st({opacity: slide.showPlagerizedAxis ? 1 : 0})
+
+
+    annotationSel.transition().duration(dur/2)
+      .st({opacity: d => i == d.slide ? 1 : 0})
+
+    estimates.containerSel.transition('xKey').duration(dur/2)
+      .st({opacity: slide.showHistogram ? 1 : 0})
+    
+    if (slide.enterHistogram){
+      estimates.render(true)
+    } else {
+      window.flipAllCoinsTimer._time = Infinity
+    }
+    if (slide.enterHistogram === 0) estimates.estimateSel.classed('active', 1)
+
+
+    // Display the default coin flip state if the histogram is not visible.
+    sel.flipCircle.transition().duration(dur)
+      .at({transform: d => {
+        return slide.showFlipCircle && d.coinVals[estimates.active.index] < sliders.headsProb ? 'scale(1)' : 'scale(.1)'}})
+    
+    prevSlideIndex = i
+    slides.curSlide = slide
+  }
+
+  var gs = d3.graphScroll()
+    .container(d3.select('.container-1'))
+    .graph(d3.selectAll('container-1 #graph'))
+    .eventId('uniqueId1')
+    .sections(d3.selectAll('.container-1 #sections > div'))
+    .offset(300)
+    .on('active', updateSlide)
+}
+
+
+if (window.init) window.init()

public/anonymization/make-sel.js

@@ -0,0 +1,78 @@
+window.makeSel = function(){
+  function ttFmt(d){
+    var ttSel = d3.select('.tooltip').html('')
+
+    var ageStr = d.age + ' year old'
+    if (slides.curSlide.index == 4){
+      ageStr = ageStr + ' born in the ' + ['spring', 'summer', 'fall', 'winter'][d.season]
+    }
+    ttSel.append('div').html(`
+      ${ageStr} from ${d.state} who 
+      ${d.plagerized ? 
+        '<span class="highlight purple">plagiarized</span>' : 
+        '<span class="highlight grey">never plagiarized</span>'}
+    `)
+
+    if (slides.curSlide.index < 6) return
+
+    var isHeads = d.coinVals[estimates.active.index] < sliders.headsProb
+    ttSel.append('div').html(`
+      They flipped
+      ${isHeads ? 'heads' : 'tails'}
+      and said they had
+      ${d.plagerized || isHeads ? 
+        '<span class="highlight purple-box box">plagiarized</span>' : 
+        '<span class="highlight grey-box box">never plagiarized</span>'}
+    `)
+    .st({marginTop: 10})
+  }
+
+  var rectAt = {}
+  var rs = (axii.bw - 10)*2
+  rectAt.ageState = {width: rs, height: rs, x: -rs/2, y: -rs/2}
+  var uniqueBox = c.svg.appendMany('rect.unique.init-hidden', students.byAgeState.filter(d => d.length == 1))
+    .translate(d => d.pos)
+    .at(rectAt.ageState)
+
+  var rs = axii.bw/4 + 5.5
+  rectAt.ageStateSeason = {width: rs, height: rs, x: Math.round(-rs/2), y: 4}
+  var uniqueSeasonBox = c.svg.appendMany(
+    'rect.unique.init-hidden', 
+    students.byAgeStateSeason.filter(d => d.length == 1 && d[0].group.ageState.length > 1))
+    .translate(d => d.pos)
+    .at(rectAt.ageStateSeason)
+
+  // number of uniquely id'd students 
+  // console.log(uniqueSeasonBox.size())
+
+  var studentGroup = c.svg.append('g')
+    .at({width: 500, height: 500})
+
+  var student = studentGroup.appendMany('g.student', students.all)
+    .call(d3.attachTooltip)
+    .on('mouseover', ttFmt)
+    .translate(d => d.isAdditionalStudent ? [0,0]: d.pos.grid)
+    .classed('inactive', d => d.isAdditionalStudent)
+
+  var rs = 16
+  var flipCircle = student.append('circle')
+    .at({transform: 'scale(.1)'})
+    .at({r: 9, fill: '#fff'})
+    .at({stroke: '#b0b' })
+
+  var circle = student.append('circle').at({
+      r: 5,
+      fill: d => d.plagerized ? '#f0f' : '#ccc',
+      stroke: d => d.plagerized ? '#b0b' : '#aaa',
+      strokeWidth: 1,
+    })
+
+
+
+  addSwoop(c)
+  
+  return {student, studentGroup, circle, flipCircle, rectAt, uniqueBox, uniqueSeasonBox}
+}
+
+
+if (window.init) window.init()

public/anonymization/make-sliders.js

@@ -0,0 +1,139 @@
+window.makeSliders = function(){
+  var rv = {
+    population: 144,
+    headsProb: .5,
+  }
+
+  rv.updateHeadsProb = (headsProb) => {
+    rv.headsProb = headsProb
+    updateSliderPos()
+
+
+    estimates.updateEstimates()
+    estimates.render()
+  }
+
+  rv.updatePopulation = (population) => {
+    rv.population = population
+    updateSliderPos()
+
+
+    var scale = d3.clamp(0, 13 / Math.sqrt(population), 1)
+    sel.studentGroup.st({
+      transformOrigin: 'top',
+      transformOrigin: c.width/2 + 'px ' + 160 + 'px',
+      transform: `scale(${scale})`
+    })
+
+    estimates.updateEstimates()
+    estimates.render()
+
+    sel.student.classed('inactive',(d, i) => i >= population)
+  }
+
+  rv.updatePopulationSlider = (val) => {
+    rv.updatePopulation(val)
+  }
+
+  rv.updateNoiseSlider = (val) => {
+    rv.updateHeadsProb(val)
+  }
+
+  var updateSliderPos = (function(){
+    var width = d3.clamp(50, window.innerWidth/2 - 40, 145)
+    var height = 30
+    var color = '#007276'
+
+    var sliderVals = {
+      population: {
+        key: 'population',
+        textFn: d => rv.population + ' students' ,
+        r: [144, 756],
+        v: 144,
+        stepFn: d => rv.updatePopulation(Math.round(d.v/2)*2),
+      },
+      headsProb: {
+        key: 'headsProb',
+        textFn: d => d3.format('.1%')(rv.headsProb) + ' chance of heads',
+        r: [.2, .5],
+        v: .5,
+        stepFn: d => rv.updateHeadsProb(d.v),
+      }
+    }
+    var sliders = [sliderVals.headsProb, sliderVals.population, sliderVals.headsProb]
+    sliders.forEach(d => {
+      d.s = d3.scaleLinear().domain(d.r).range([0, width])
+    })
+
+    var sliderSel = d3.selectAll('.slide-container-population,.slide-container-heads-prob').html('')
+      .data(sliders)
+      .classed('slider', true)
+      .st({
+        display: 'inline-block',
+        width: width,
+        paddingRight: (d, i) => i == 1 ? 40 : 0,
+        marginTop: 20,
+      })
+
+    var textSel = sliderSel.append('div.slider-label-container')
+      .st({marginBottom: -5})
+
+    var svgSel = sliderSel.append('svg').at({width, height})
+      .on('click', function(d){
+        d.v = d.s.invert(d3.mouse(this)[0])
+        d.stepFn(d)
+      })
+      .st({
+        cursor: 'pointer'
+      })
+      .append('g').translate(height/2, 1)
+    svgSel.append('rect').at({width, height, y: -height/2, fill: 'rgba(0,0,0,0)'})
+
+    svgSel.append('path').at({
+      d: `M 0 -.5 H ${width}`, 
+      stroke: color,
+      strokeWidth: 1
+    })
+
+    var leftPathSel = svgSel.append('path').at({
+      d: `M 0 -.5 H ${width}`, 
+      stroke: color,
+      strokeWidth: 3
+    })
+
+
+    var drag = d3.drag()
+      .on('drag', function(d){
+        var x = d3.mouse(this)[0]
+        d.v = d3.clamp(d3.min(d.r), d.s.invert(x), d3.max(d.r))
+        d.stepFn(d)
+      })
+
+    var rectSel = svgSel.append('rect')
+      .at({
+        width: height/2 - 1,
+        height: height/2 - 1,
+        stroke: color, 
+        strokeWidth: 3,
+        fill: '#fff',
+      })
+      .translate([-height/4, -height/4])
+      .call(drag)
+
+    return isDrag => {
+      rectSel.at({x: d => Math.round(d.s(rv[d.key]))})
+      textSel.text(d => d.textFn(d))
+
+      leftPathSel.at({d: d => `M 0 -.5 H ${d.s(rv[d.key])}`})
+    }
+  })()
+  updateSliderPos()
+
+
+  return rv
+}
+
+
+
+
+if (window.init) window.init()

public/anonymization/make-slides.js

@@ -0,0 +1,98 @@
+window.makeSlides = function(){
+  var slides = [
+    {
+      xKey: 'grid',
+      circleDelayFn: d => axii.ageScale(d.age),
+      showFlipRect: 0,
+      populationTarget: 144,
+      headsProbTarget: .5,
+    },
+    {
+      xKey: 'age',
+      showAgeAxis: 1,
+    },
+    {
+      xKey: 'ageState',
+      showStateAxis: 1,
+    },
+    {
+      showUniqueBox: 1
+    },
+    {
+      xKey: 'ageStateSeason',
+      showUniqueBox: 1,
+      showUniqueSeasonBox: 1,
+      showSeasonAxis: 1,
+    },
+    {
+      xKey: 'heads',
+      showUniqueBox: 0,
+      showUniqueSeasonBox: 0,
+      showSeasonAxis: 0,
+      showAgeAxis: 0,
+      showStateAxis: 0,
+      showHeadAxis: 1,  
+    },
+    {
+      showFlipCircle: 1,
+      showHeadCaptionAxis: 1,
+    },
+
+    // Flip coin
+    {
+      xKey: 'plagerizedShifted',
+      showHeadAxis: 0,
+      showHeadCaptionAxis: 0,
+      showHistogramAxis: 1,
+    },
+
+    // Exactly how far off can these estimates be after adding noise? Flip more coins to see the distribution.
+    {
+      enterHistogram: 1,
+      showHistogram: 1,
+      // showPlagerizedAxis: 0,
+      showEstimate: 1,
+    },
+
+    // Reducing the random noise increases our point estimate, but risks leaking information about students.
+    {
+      animateHeadsProbSlider: 1,
+      animatePopulationSlider: 1,
+      enterHistogram: 0,
+      name: 'noise', 
+      headsProbTarget: .35,
+    },
+
+    // If we collect information from lots of people, we can have high accuracy and protect everyone's privacy.
+    {
+      showEstimate: 0,
+      showAllStudents: 1,
+      name: 'population',
+      animateHeadsProbSlider: -1,
+      animatePopulationSlider: 1,
+      populationTarget: 400,
+    },
+
+  ]
+
+  var keys = []
+  slides.forEach((d, i) => {
+    keys = keys.concat(d3.keys(d))
+    d.index = i
+  })
+  _.uniq(keys).forEach(str => {
+    var prev = null
+    slides.forEach(d => {
+      if (typeof(d[str]) === 'undefined'){
+        d[str] = prev
+      }
+      prev = d[str]
+    }) 
+  })
+
+  return slides
+}
+
+
+
+if (window.init) window.init()

public/anonymization/make-students.js

@@ -0,0 +1,184 @@
+window.makeStudents = function(){
+  var seed = new Math.seedrandom('12fbsab56')
+  var rand = d3.randomUniform.source(seed)(0, 1)
+
+  var ncols = 12
+
+  var allStudents = d3.range(756).map(i => {
+    var age = ages[Math.floor(rand()*ages.length)]
+    var state = states[Math.floor(rand()*states.length)]
+    var season = Math.floor(rand()*4)
+    var heads = rand() < .5
+
+    if (rand() < .1) state = 'NY'
+    if (rand() < .5 && state == 'RI') state = states[Math.floor(rand()*states.length)]
+    if (rand() < .5 && state == 'CT') state = states[Math.floor(rand()*states.length)]
+
+    var coinVals = d3.range(300).map(rand).slice(0, 200)
+
+    return {age, state, i, pos: {}, group: {}, season, heads, coinVals, isAdditionalStudent: true}
+  })
+
+  var students = allStudents.slice(0, 144)
+  students.forEach(student => student.isAdditionalStudent = false)
+
+  students.all = allStudents
+  students.all.forEach((d, i) => {
+    var x = (i % 25)/25*c.width
+    var y = ~~(i/25)/25*c.width
+    d.pos.all = [x, y]
+  })
+
+  var {bw, ageScale, stateScale} = axii
+  _.sortBy(students, d => -d.age).forEach((d, i) => {
+    var x = (i % ncols)/(ncols - 1)*c.width
+    var y = ~~(i/ncols)/(ncols - 1)*c.width
+    d.pos.grid = [x, y]
+    scale = .6
+    d.pos.smallGrid = [x * scale + 90, y * scale]
+  })
+
+  // Set half the student to have plagerized.
+  var studentsPlagerizedArray = _.sortBy(d3.range(students.length).map(i => i % 2 == 0), () => rand())
+  // var remainingPlagerizedArray = _.sortBy(d3.range(allStudents.length - students.length).map(i => i % 2 == 0), () => rand())
+  remainingPlagerizedArray = d3.range(students.all.length).map(i => i % 2 == 1)
+  var plagerizedArray = studentsPlagerizedArray.concat(remainingPlagerizedArray)
+  students.all.forEach((d, i) => d.plagerized = plagerizedArray[i])
+
+  students.byAge = d3.nestBy(students, d => d.age)
+  students.byAge.forEach(age => {
+    age.forEach((d, i) => {
+      d.pos.age = [i*10, ageScale(d.age) + bw]
+    })
+  })
+  students.byAgeState = d3.nestBy(students, d => d.age + d.state)
+  students.byAgeState.forEach(group => {
+    var d0 = group.d0 = group[0]
+    group.pos = [bw + stateScale(d0.state), bw + ageScale(d0.age)]
+
+    var angle = Math.PI*(3 - Math.sqrt(5))*(1 + Math.random()*.05 - .05/2)
+    group.forEach((d, i) => {
+      d.pos.ageState = addVec(phyllotaxis(i, 10.5, angle), group.pos)
+      d.group.ageState = group
+    })
+  })
+
+  students.byAgeStateSeason = d3.nestBy(students, d => d.age + d.state + d.season)
+  students.byAgeStateSeason.forEach(group => {
+    var d0 = group.d0 = group[0]
+    group.pos = [bw + stateScale(d0.state), bw*d0.season/2 + ageScale(d0.age)]
+
+    group.forEach((d, i) => {
+      d.pos.ageStateSeason = addVec([i*11 - group.length*11/2 + 6, 12], group.pos)
+      d.group.ageStateSeason = group
+    })
+  })
+
+
+  students.updateHeadsPos = function(){
+    students.byHeads = d3.nestBy(students, d => d.coinVals[estimates.active.index] < sliders.headsProb)
+    students.byHeads.forEach(group => {
+      group.pos = [group.key == 'true' ? c.width/4 -15 : c.width/4*3 +15, c.height/2]
+
+      group.forEach((d, i) => {
+        d.pos.heads = addVec(phyllotaxis(i, 12), group.pos)
+        d.group.heads = group
+      })
+    })
+  }
+
+  students.plagerizedGroup = d3.nestBy(_.sortBy(students.all, d => d.plagerized), d => d.plagerized)
+  students.plagerizedGroup.forEach((group, groupIndex) => {
+    var d0 = group.d0 = group[0]
+    var offset = -20
+    group.pos = [(d0.plagerized ? c.width/2 + offset : c.width/2 - offset), c.height/2 - 80]
+
+
+    var getOrderedPositions = function() {
+      positions = []
+
+      var step = 25
+      var top = 0
+      var bottom = 0
+      var right = 0
+
+      var addAbove = function(dirPositive=true) {
+        var y = (top + 1) * step
+        var x = 0
+        while (x <= right * step) {
+          positions.push([dirPositive ? x: (right * step - x), y])
+          x += step
+        }
+        top++
+      }
+
+      var addRight = function(dirPositive=true) {
+        var x = (right + 1) * step
+        var y = bottom * step 
+        while (y <= top * step) {
+          positions.push([x, dirPositive ? y: -y])
+          y += step
+        }
+        right++
+      }
+
+      var addBelow = function(dirPositive=true) {
+        var y = (bottom - 1) * step
+        var x = 0
+        while (x <= right * step) {
+          positions.push([dirPositive ? x: (right * step - x), y])
+          x += step
+        }
+        bottom--
+      }
+
+      var addForward = function() {
+        addAbove(true)
+        addRight(false)
+        addBelow(false)
+      }
+
+      var addBackward = function() {
+        addBelow(true)
+        addRight(true)
+        addAbove(false)
+      }
+      
+      isForward = true
+      while(positions.length < students.all.length) {
+        if (positions.length === 0) {
+          positions.push([0, 0])
+          addRight()
+          addBelow()
+        } else {
+          if (isForward) {
+            addForward()
+          } else {
+            addBackward()
+          }
+          isForward = !isForward
+        }
+      }
+      return positions
+    }
+
+    var populationPositions = getOrderedPositions()
+    var reversePositions = populationPositions.map(pos => [-pos[0], pos[1]])
+    
+    group.forEach((d, i) => {
+      var x = (i % 7)/20*c.width
+      var y = ~~(i/7)/20*c.width
+      // d.pos.plagerized = addVec([x, y], group.pos)
+      d.pos.plagerizedShifted = addVec([x, y - 50], group.pos)
+      d.group.plagerized = group
+
+      d.pos.plagerizedShifted = addVec((groupIndex === 0) ? populationPositions[i]: reversePositions[i], group.pos)
+    })
+  })
+
+  
+  students.rand = rand
+  return students
+}
+
+if (window.init) window.init()

public/anonymization/style-graph-scroll.css

@@ -0,0 +1,160 @@
+/** { border: 1px solid #f00; }*/
+
+
+#container{
+  position: relative;
+  width: auto;
+  margin-left: -25px;
+  /*margin-bottom: 100px;*/
+}
+
+#sections{
+  width: 330px;
+  pointer-events: none;
+}
+
+#sections > div{
+  background: white;
+  opacity: .2;
+  margin-bottom: 400px;
+  line-height: 1.4em;
+  transition: opacity .2s;
+  pointer-events: all;
+}
+#sections > div:last-child{
+  height: 480px;
+  margin-bottom: 0px;
+}
+#sections > div.graph-scroll-active{
+  opacity: 1;
+}
+
+#graph{
+  margin-left: 40px;
+  width: 500px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0px;
+  float: right;
+  height: 580px;
+}
+
+.slider-outer {
+  display: block;
+  max-width: 300px;
+}
+
+@media (max-width: 925px)  {
+  #container{
+    margin-left: 0px;
+  }
+  
+  #graph{
+    width: 100%;
+    float: none;
+    max-width: 500px;
+    margin: 0px auto;
+  }
+
+  #graph > div{
+    position: relative;
+    left:12px;
+  }
+
+  #sections{
+    width: auto;
+    position: relative;
+    margin: 0px auto;
+  }
+
+  #sections > div{
+    background: rgba(255,255,255,.8);
+    padding: 10px;
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    margin-bottom: 80vh;
+    width: calc(100vw - 20px);
+    margin-left: -5px;
+  }
+
+  #sections > div > *{
+    max-width: 750px;
+  }
+
+  #sections > div:first-child{
+    opacity: 1;
+    margin-top: -260px;
+  }
+
+  #sections > div:last-child{
+    height: auto;
+  }
+
+  #sections h3{
+    margin-top: .5em;
+  }
+
+  /* Adjust buttons for mobile. */
+
+  .button-container{
+    text-align: center;
+    left:0px;
+  }
+
+  /* Adjust sliders for mobile. */
+  input[type="range" i] {
+    width: 280px;
+  }
+  .slider-label-container{
+    width: 145px;
+    /* display: inline-block; */
+  }
+
+  .slide-container-heads-prob, .slide-container-population {
+    text-align: center;
+  }
+
+  .slider-container {
+    margin-bottom: 5px;
+    text-align: center;
+    width: 300px;
+    /* display:inline-block; */
+  }
+
+  .slider-outer {
+    text-align: center;
+    display: flex;
+    max-width: 300px;
+  }
+
+  .headsProb, .population {
+    margin-left: 15px;
+  }
+
+  .slide-container-population {
+    margin-bottom: -10px;
+  }
+
+  .pointer div {
+    left: 10px;
+    top: 37px;
+  }
+
+  /* Adjust post summary test for mobile. */
+  .post-summary{
+    margin-left: 8px;
+    margin-bottom: 60px;
+    margin-top: 40px;
+  }
+  
+}
+
+#graph > div{
+  margin: 20 35px;
+}
+
+
+#end{
+  height: 15vh;
+}
+

public/anonymization/style.css

@@ -0,0 +1,344 @@
+
+.tooltip {
+  top: -1000px;
+  position: fixed;
+  padding: 10px;
+  background: rgba(255, 255, 255, .90);
+  border: 1px solid lightgray;
+  pointer-events: none;
+  font-size: 14px;
+  width: 267px;
+}
+.tooltip-hidden{
+  opacity: 0;
+  transition: all .3s;
+  transition-delay: .1s;
+}
+
+@media (max-width: 590px){
+  div.tooltip{
+    bottom: -1px;
+    width: calc(100%);
+    left: -1px !important;
+    right: -1px !important;
+    top: auto !important;
+    width: auto !important;
+  }
+}
+
+
+.domain{
+  display: none;
+}
+
+text{
+  /*pointer-events: none;*/
+  /*text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;*/
+}
+
+
+
+.note{
+  font-size: 12px;
+  color: #999;
+  margin-top: 60px;
+}
+
+h1{
+	font-weight: 100;
+	font-size: 34px;
+	margin-bottom: .5em;
+  line-height: 1.3em;
+  margin-top: 1.4em;
+  text-align: center;
+  font-family: "Google Sans", sans-serif;
+}
+
+.mono{
+  font-family: monospace;
+}
+
+
+svg{
+  overflow: visible;
+}
+
+
+
+
+.axis{
+  font-size: 12px;
+  pointer-events: none;
+}
+.axis{
+  color: #888;
+
+}
+.axis text, .slider-label-container{
+  fill: #888;
+  color: #888;
+  font-family: 'Roboto', Helvetica, sans-serif;
+  font-size: 12px;
+}
+
+.axis text.bold, .slider-label-container{
+  color: #3C4043;
+  fill: #3C4043;
+  font-weight: 500;
+
+}
+.axis line{
+  stroke: #ccc;
+}
+
+div.axis b{
+  margin-bottom: -10px;
+  display: block;
+}
+
+.init-hidden{
+  opacity: 0;
+}
+
+.slider-label-container{
+  font-weight: 500;
+}
+
+
+
+.highlight{
+  color: #fff;
+  padding-left: 3px;
+  padding-right: 3px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  border-radius: 3px;
+}
+
+.highlight.blue{ background: blue; }
+.highlight.orange{ background: #ffd890; }
+.highlight.yellow{ background: #ff0; color: #000; }
+.highlight.purple{ background: #CB10CB; }
+.highlight.purple{ background: #FF7AFF; color: #000;}
+.highlight.grey{ background: #ccc; color: #000;}
+.highlight.box{ 
+  border: 1px solid #ff6200;
+  border-radius: 5px;
+  color: #000;
+  padding-bottom: 2px;
+  white-space: nowrap;
+}
+.highlight.purple-box{
+  border: 1px solid #b0b;
+}
+.highlight.grey-box{
+  border: 1px solid #ccc;
+}
+.highlight.box.square{
+  border-radius: 0px;
+}
+.highlight.blue-box{ border: 2px solid #007276; }
+
+
+
+.circle{
+  background: #eee;
+  border: 1px solid #ccc;
+  font-family: monospace;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+
+  border-radius: 100px;
+}
+
+
+.strikethrough{
+  text-decoration: line-through;
+  color: #000;
+}
+
+
+.annotations path{
+  fill: none;
+  stroke: black;
+}
+
+
+
+rect.unique{
+  stroke: #ff6200;
+  stroke-width: 1px;
+  fill: #ffd890;
+
+  animation-duration: 1s;
+  animation-name: xstrokeblink;
+  display: inline-block;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+
+@keyframes strokeblink {
+  from {
+    /*fill: black;*/
+    stroke-width: 1px;
+  }
+
+  to {
+    /*fill: green;*/
+    stroke-width: 1px;
+  }
+}
+
+
+
+
+
+.inline-line{
+  border: 1px #f0f solid;
+  width: 20px;
+  display: inline-block;
+  position: relative;
+  top: -5px;
+}
+
+.slider-label-container{
+  width: 240px;
+}
+.slider-label{
+  font-size: smaller;
+  margin-left: 2px;
+}
+
+.slider-text-label{
+  margin-left: 5px;
+  white-space: nowrap;
+}
+
+
+g.student:hover circle{
+  stroke-width: 2px;
+}
+
+g{
+  /*opacity: 1 !important;*/
+}
+
+.inactive{
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+input[type="range" i] {
+  background-color:#def5ef;
+  -webkit-appearance: none;
+  height:20px;
+  width:240px;
+  overflow: hidden;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 20px;
+  cursor: ew-resize;
+  background: #007276;
+  box-shadow: -200px 0 0 200px #7ed3c9;
+  border: 1px solid #333;
+}
+
+input:focus {
+  outline-width: 0;
+}
+
+
+
+
+.estimate{
+  opacity: 0;
+  pointer-events: none
+}
+
+.estimate.active{
+  opacity: .70;
+  pointer-events: all;
+}
+
+.est-text{
+  text-shadow: 0 2px 0 rgba(255,255,255,1), 2px 0 0 rgba(255,255,255,1), 0 -2px 0 rgba(255,255,255,1), -2px 0 0 rgba(255,255,255,1);
+}
+
+
+
+
+@media (max-width: 590px){
+  text{
+    font-size: 120% !important;
+  }
+}
+
+
+.slider{
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.button-container{
+  border: 1px solid #888;
+  display: inline-block;
+  padding: 10px 20px; 
+  cursor: pointer;
+  text-align: center;
+  border-radius: 10px;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  margin: 0px auto;
+/*  color: #888;
+  font-family: 'Roboto', Helvetica, sans-serif;
+  font-size: 12px;
+  font-weight: 500;*/
+  position: relative;
+  left: -20px;
+}
+
+.button-container:hover{
+  background: #ddd;
+}
+
+.button-outer{
+  text-align: center;
+  margin-top: 20px;
+}
+
+.pointer{
+  height: 0px;
+  position: relative;
+}
+.pointer div {
+  overflow: visible;
+  content: "";
+  background-image: url(https://pair-code.github.io/interpretability/bert-tree/pointer.svg);
+  width: 27px;
+  height: 27px;
+  position: absolute;
+  left: 165px;
+  top: -35px;
+}
+
+a{
+  color: rgb(60, 64, 67);
+}
+a:hover{
+  color: #000;
+}
+
+
+
+
+
+
+
+
+

public/base-rate/script.js

@@ -0,0 +1,317 @@
+/* Copyright 2020 Google LLC. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+
+
+
+
+console.clear()
+var ttSel = d3.select('body').selectAppend('div.tooltip.tooltip-hidden')
+
+window.renderFns = []
+
+window.m = (function(){
+  var rv = {b: .7, tpr: .8, fnr: .5, update, str: 'kids', titleStr: 'Children',}
+
+  function update(obj={}){
+    Object.assign(rv, obj)
+    window.renderFns.forEach(d => d())
+  }
+
+  return rv
+})()
+
+window.f = (function(){
+  var rv = {b: .3, tpr: .8, fnr: .5, update, str: 'adults', titleStr: 'Adults'}
+
+  function update(obj={}){
+    window.renderFns.forEach(d => d())
+  }
+
+  return rv
+})()
+
+
+var wLarge = d3.clamp(0, innerWidth/2 - 30, 300)
+
+d3.select('#big-matrix').html('')
+  .appendMany('div.big-container', [{w: wLarge, s: f, isText: 1}, {w: wLarge, s: m, isText: 1}])
+  .each(drawMatrix)
+
+
+addPattern(10, `pattern-${wLarge}-`)
+addPattern(5, 'pattern-50-')
+
+function addPattern(s, str){
+  var cColors = [colors.sick, colors.sick, colors.well, colors.well, lcolors.sick, lcolors.sick, lcolors.well, lcolors.well]
+  var rColors = [lcolors.sick, lcolors.well, lcolors.sick, lcolors.well, llcolors.sick, llcolors.well, llcolors.sick, llcolors.well]
+
+  d3.select('#big-matrix')
+    .append('svg')
+    .st({height: 0, position: 'absolute'})
+    .append('defs').appendMany('pattern', d3.range(8))
+    .at({ id: i => str + i, width: s, height: s})
+    .attr('patternUnits', 'userSpaceOnUse')
+    .append('rect')
+    .at({width: s, height: s, fill: i => rColors[i]})
+    .parent().append('circle')
+    .at({r: s == 10 ? 2.5 : 1.5, cx: s/2, cy: s/2, fill: i => cColors[i]})
+}
+
+
+var scale = d3.clamp(0, ((innerWidth - 50) / 3)/280, 1)
+var isScaled = scale != 1
+
+d3.select('#metrics').html('').st({height: 350*scale + 30})
+  .appendMany('div', [0, 1, 2])
+  .st({width: 280*scale, display: 'inline-block'})
+  .append('div')
+  .st({transform: `scale(${scale})`, transformOrigin: '0% 0%'})
+  .append('div.metrics-container').st({width: 280})
+  .each(drawMetric)
+
+d3.selectAll('rect.drag')
+  .on('mouseover.style', d => d3.selectAll('rect.' + d).st({strokeWidth: 3, stroke: '#000'}))
+  .on('mouseout.style', d => d3.selectAll('rect.' + d).st({strokeWidth: 0}))
+
+function drawMetric(i){
+  var sel = d3.select(this)
+
+  var text = [
+    // 'Percentage of <span style="background: #fcf">sick people</span><br> who <span style="background: #f0f">test positive<span>',
+    'Percentage of sick people<br> who test positive',
+    'Percentage of positive tests<br> who are actually sick',
+    'Percentage of well people <br>who test negative',
+  ][i]
+
+  var percentFn = [
+    s => s.tpr,
+    s => s.b*s.tpr/(s.b*s.tpr + (1 - s.b)*(s.fnr)),
+    s => 1 - s.fnr,
+  ][i]
+
+  var colors = [
+    ['#f0f', '#fcf', '#fff', '#fff'],
+    ['#f0f', '#fff', '#fcf', '#fff'],
+    ['#fff', '#fff', '#fcf', '#f0f'],
+  ][i]
+
+  sel.append('h3').st({marginBottom: 20, fontSize: isScaled ? 30 : 20}).html(isScaled ? text.replace('<br>', '') : text)
+
+  var h = 200
+  var width = 100
+
+  var fDiv = sel.append('div').st({position: 'relative', top: -h + 7})
+    .datum({w: 50, s: f, isText: 0, colors}).each(drawMatrix)
+
+  var svg = sel.append('svg')
+    .at({width, height: h})
+    .st({fontSize: 14, fontFamily: 'monospace'})
+
+  svg.append('path').at({stroke: '#ccc', d: `M ${width/2 + .5} 0 V ${h}`})
+
+  var errorSel = svg.append('path')
+    .translate(width/2 + .5, 0)
+    .at({stroke: 'orange', strokeWidth: 3})
+
+  var fSel = svg.append('g')
+  var mSel = svg.append('g')
+
+  mSel.append('circle').at({r: 4, cx: width/2 + .5, fill: 'none', stroke: '#000'})
+  fSel.append('circle').at({r: 4, cx: width/2 + .5, fill: 'none', stroke: '#000'})
+
+  var fTextSel = fSel.append('text').text('23%')
+    .at({dy: '.33em', textAnchor: 'middle', x: width/4 - 3, fontSize: isScaled ? 20 : 16})
+  var mTextSel = mSel.append('text').text('23%')
+    .at({dy: '.33em', textAnchor: 'middle', x: width/4*3 + 5, fontSize: isScaled ? 20 : 16})
+
+  fSel.append('text').text('Adults').st({fontSize: isScaled ? 18 : 12})
+    .at({textAnchor: 'middle', x: -23, y: -30})
+  mSel.append('text').text('Children').st({fontSize: isScaled ? 18 : 12})
+    .at({textAnchor: 'middle', x: 124, y: -30})
+
+  var mDiv = sel.append('div').st({position: 'relative', top: -h + 7})
+    .datum({w: 50, s: m, isText: 0, colors}).each(drawMatrix)
+
+
+  renderFns.push(() => {
+    var fPercent = percentFn(f)
+    fSel.translate(h - h*fPercent, 1)
+    fTextSel.text(d3.format('.0%')(fPercent))
+
+    var mPercent = percentFn(m)
+    mSel.translate(h - h*mPercent, 1)
+    mTextSel.text(d3.format('.0%')(mPercent))
+
+    fDiv.translate(h - h*fPercent, 1)
+    mDiv.translate(h - h*mPercent, 1)
+
+    errorSel.at({d: 'M 0 ' + (h - h*fPercent) + ' V ' + (h - h*mPercent) })
+  })
+}
+
+function drawMatrix({s, w, isText, colors}){
+  var svg = d3.select(this).append('svg')
+    .at({width: w, height: w})
+    
+
+  svg.append('rect').at({width: w + 1, height: w + 1})
+
+  if (!colors) colors = ['#000', '#000', '#000', '#000']
+
+  var rects = [
+    {n: 'tp', x: 0, y: 0, width: _ => s.b*w, height: _ => s.tpr*w},
+    {n: 'fn', x: 0, y: _ => 1 + s.tpr*w, width: _ => s.b*w, height: _ => w - s.tpr*w},
+    {n: 'fp', x: _ => 1 + s.b*w, y: 0, width: _ => w - s.b*w, height: _ => s.fnr*w},
+    {n: 'tn', x: _ => 1 + s.b*w, y: _ => 1 + s.fnr*w, width: _ => w - s.b*w, height: _ => w - s.fnr*w},
+  ]
+  rects.forEach((d, i) => d.i = i)
+
+  var rectSel = svg.appendMany('rect', rects)
+    .at({fill: d =>  `url(#pattern-${w}-${d.i}`})
+    // .at({opacity: d => colors[d.i] == '#fff' ? .5 : 1})
+    // .at({fill: d =>  `url(#pattern-${w}-${d.i + (colors[d.i] == '#ccc' ? 4 : 0)})`})
+    // .at({fill: d =>  colors[d.i] == '#ccc' ? '#000' : `url(#pattern-${w}-${d.i + (colors[d.i] == '#ccc' ? 4 : 0)})`})
+    .each(function(d){ d.sel = d3.select(this) })
+  rectSel.filter(d => colors[d.i] == '#fff').at({fill: '#eee'})
+
+  var bh = .5
+  svg.append('rect.tpr').at({height: bh}).translate(-bh/2, 1)
+    .datum('tpr')
+
+  svg.append('rect.fnr').at({height: bh}).translate(-bh/2, 1)
+    .datum('fnr')
+
+  svg.append('rect.b').at({width: bh, height: w}).translate(-bh/2, 0)
+    .datum('b')
+
+  var bh = 20
+  svg.append('rect.drag.tpr').at({height: bh}).translate(-bh/2, 1)
+    .call(makeDrag('tpr', 1)).datum('tpr').call(d3.attachTooltip).on('mouseover', ttFormat)
+
+  svg.append('rect.drag.fnr').at({height: bh}).translate(-bh/2, 1)
+    .call(makeDrag('fnr', 1)).datum('fnr').call(d3.attachTooltip).on('mouseover', ttFormat)
+
+  svg.append('rect.drag.b').at({width: bh, height: w}).translate(-bh/2, 0)
+    .call(makeDrag('b', 0)).datum('b').call(d3.attachTooltip).on('mouseover', ttFormat)
+
+
+  var tprRect = svg.selectAll('rect.tpr')
+  var fnrRect = svg.selectAll('rect.fnr')
+  var bRect = svg.selectAll('rect.b')
+
+  function ttFormat(str){
+    var html = ''
+    if (str == 'tpr') html = `${d3.format('.0%')(s.tpr)} of sick ${s.titleStr.toLowerCase()} test positive`
+    if (str == 'fnr') html = `${d3.format('.0%')(s.fnr)} of well ${s.titleStr.toLowerCase()} test negative`
+    if (str == 'b') html = `${d3.format('.0%')(s.b)} of ${s.titleStr.toLowerCase()} are sick`
+    ttSel.html(html) 
+  }
+
+  function makeDrag(str, index){
+
+    return d3.drag()
+      .on('drag', function(){
+        var percent = d3.mouse(this)[index]/w
+        s[str] = d3.clamp(.15, percent, .85)
+
+        window.basetimer.stop()
+        s.update()
+
+        ttMove()
+        ttFormat(str)
+      })
+      .on('start', _ => svg.classed('dragging', 1))
+      .on('end', _ => svg.classed('dragging', 0))
+  }
+
+  renderFns.push(() => {
+    rectSel.each(d => d.sel.at(d))
+
+    tprRect.at({width: w*s.b, y: w*s.tpr})
+    fnrRect.at({x: w*s.b, width: w - w*s.b, y: w*s.fnr})
+    bRect.at({x: w*s.b})
+
+    // s => s.tpr,
+    // s => s.b*s.tpr/(s.b*s.tpr + (1 - s.b)*(s.fnr)),
+    // s => 1 - s.fnr,
+    if (!isText) return
+  })
+
+
+  if (!isText) return
+
+  svg.append('text').text(s.titleStr).at({textAnchor: 'middle', x: w/2, y: -8, fontSize: 20})
+
+  if (innerWidth < 800) return
+  // if (true)  
+
+  svg.appendMany('text', d3.range(4)).each(function(i){
+    var isSick = i < 2
+    var isPos = i % 2
+
+    var pad = 5
+    d3.select(this)
+      .translate([isSick ? pad : w - pad, isPos ? 13 : w - 23])
+      .at({
+        textAnchor: isSick ? 'start' : 'end',
+        fill: '#000',
+        fontSize: 12,
+        fontFamily: 'monospace',
+        pointerEvents: 'none',
+      })
+      .tspans([
+        ' test : ' + (isPos ? 'sick' : 'well'), 
+        'truth: ' +  (isSick ? 'sick' : 'well')])
+  })
+}
+
+
+if (window.basetimer) window.basetimer.stop()
+window.basetimer = d3.timer(t => {
+
+  var val = t/1000 % (Math.PI*4)
+
+  if (val < Math.PI*2){
+    m.b = (Math.sin(val + Math.PI/2))/4 + .4
+  } else if (Math.PI*3 < val && val < Math.PI*5 || true){
+    f.tpr = (Math.sin(val + Math.PI/2))/4 + .4
+  }
+  m.update()
+})
+
+
+
+
+
+m.update()
+
+
+
+function ttMove(d){
+  if (!ttSel.size()) return;
+
+  var e = d3.event.sourceEvent,
+      x = e.clientX,
+      y = e.clientY,
+      bb = ttSel.node().getBoundingClientRect(),
+      left = d3.clamp(20, (x-bb.width/2), window.innerWidth - bb.width - 20),
+      top = innerHeight > y + 20 + bb.height ? y + 20 : y - bb.height - 20;
+
+  ttSel
+    .style('left', left +'px')
+    .style('top', top + 'px');
+}
+

public/base-rate/sliders.js

@@ -0,0 +1,103 @@
+/* Copyright 2020 Google LLC. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+
+
+
+
+var sliderVals = {}
+
+var sliders = [
+  {
+    key: 'fNoiseMag',
+    text: 'Feature Noise',
+    r: [0, 1],
+    v: .5
+  },
+  {
+    key: 'fBiasMag',
+    text: 'Feature Bias',
+    r: [0, 1],
+    v: .2
+  },
+]
+
+!(function(){
+  var width = 145
+  var height = 30
+
+  sliders.forEach(d => {
+    d.s = d3.scaleLinear().domain(d.r).range([0, width])
+    sliderVals[d.key] = d
+  })
+
+  var sliderSel = d3.select('.slider').html('')
+    .appendMany('div', sliders)
+    .at({class: d => d.key})
+    .st({
+      display: 'inline-block',
+      width: width,
+      paddingRight: 60,
+      marginTop: 20,
+      color: '#000'
+    })
+
+  sliderSel.append('div')
+    .text(d => d.text)
+    .st({marginBottom: height/2})
+
+  var svgSel = sliderSel.append('svg').at({width, height})
+    .on('click', function(d){
+      d.v = d.s.invert(d3.mouse(this)[0])
+      updatePos()
+    })
+    .st({
+      cursor: 'pointer'
+    })
+    .append('g').translate(height/2, 1)
+  svgSel.append('rect').at({width, height, y: -height/2, fill: '#fff'})
+
+  svgSel.append('path').at({
+    d: `M 0 0 H ${width}`, 
+    stroke: '#000',
+    strokeWidth: 2
+  })
+
+  var drag = d3.drag()
+    .on('drag', function(d){
+      var x = d3.mouse(this)[0]
+      d.v = d3.clamp(d3.min(d.r), d.s.invert(x), d3.max(d.r))
+
+      updatePos()
+    })
+
+  var circleSel = svgSel.append('circle')
+    .at({
+      r: height/2,
+      stroke: '#000', 
+      strokeWidth: 2,
+      fill: '#fff',
+    })
+    .call(drag)
+
+
+  function updatePos(){
+    circleSel.at({cx: d => d.s(d.v)})
+    if (sliderVals.onUpdate) sliderVals.onUpdate()
+  }
+
+  updatePos()
+  sliderVals.updatePos = updatePos
+})()

public/base-rate/style.css

@@ -0,0 +1,134 @@
+/* Copyright 2020 Google LLC. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+==============================================================================*/
+
+
+
+.tooltip {
+  top: -1000px;
+  position: fixed;
+  padding: 10px;
+  background: rgba(255, 255, 255, .90);
+  border: 1px solid lightgray;
+  pointer-events: none;
+  width: auto;
+
+}
+.tooltip-hidden{
+  opacity: 0;
+  transition: all .3s;
+  transition-delay: .1s;
+}
+
+@media (max-width: 590px){
+  div.tooltip{
+    bottom: -1px;
+    width: calc(100%);
+    left: -1px !important;
+    right: -1px !important;
+    top: auto !important;
+    width: auto !important;
+  }
+}
+
+svg{
+  overflow: visible;
+}
+
+.domain{
+  display: none;
+}
+
+#big-matrix text{
+  font-family: 'Google Sans', sans-serif;
+  /*pointer-events: none;*/
+  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
+  text-shadow: 0 1px 0 rgba(255,255,255, .6), 1px 0 0 rgba(255,255,255, .6), 0 -1px 0 rgba(255,255,255, .6), -1px 0 0 rgba(255,255,255, .6);
+}
+
+
+body{
+  max-width: 900px;
+}
+
+h1{
+}
+
+h1{
+  /*text-align: center;*/
+}
+
+h3{
+  font-size: 20px;
+}
+#big-matrix{
+  text-align: center;
+  margin-top: 40px;
+  font-family: 'Google Sans', sans-serif;
+
+}
+div.big-container{
+  display: inline-block;
+  margin: 10px;
+}
+
+#metrics{
+  text-align: center;
+}
+div.metrics-container{
+  display: inline-block;
+  margin: 10px;
+}
+
+div.metrics-container > div{
+  display: inline-block;
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+
+
+
+.drag{
+  cursor: pointer;
+  fill-opacity: 0;
+  fill: #f0f;
+  stroke-opacity: 0;
+}
+
+svg.dragging{
+  cursor: pointer;
+}
+
+sl{
+  /*background: #000; */
+  color: #000;
+  border: 1px solid #eee;
+  width: 1em; 
+  display: inline-block;
+  padding-left: 2px;
+  padding-right: 2px;
+  font-style: normal;
+}
+
+#instructions{
+  margin-top: 10px;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+
+
+
+

public/data-leak/index.html

@@ -0,0 +1,170 @@
+<!--
+@license
+Copyright 2020 Google. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!DOCTYPE html>
+
+<html>
+<head>
+	<meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="apple-touch-icon" sizes="180x180" href="https://pair.withgoogle.com/images/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="https://pair.withgoogle.com/images/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="https://pair.withgoogle.com/images/favicon/favicon-16x16.png">
+  <link rel="mask-icon" href="https://pair.withgoogle.com/images/favicon/safari-pinned-tab.svg" color="#00695c">
+  <link rel="shortcut icon" href="https://pair.withgoogle.com/images/favicon.ico">
+
+  <script>
+    !(function(){
+      var url = window.location.href
+      if (url.split('#')[0].split('?')[0].slice(-1) != '/' && !url.includes('.html')) window.location = url + '/'
+    })()
+  </script>
+
+  <title>Why Some Models Leak Data</title>
+  <meta property="og:title" content="Why Some Models Leak Data">
+  <meta property="og:url" content="https://pair.withgoogle.com/explorables/data-leak/">
+
+  <meta name="og:description" content="Machine learning models use large amounts of data, some of which can be sensitive. If they're not trained correctly, sometimes that data is inadvertently revealed.">
+  <meta property="og:image" content="https://pair.withgoogle.com/explorables/images/model-inversion.png">
+  <meta name="twitter:card" content="summary_large_image">
+  
+	<link rel="stylesheet" type="text/css" href="../style.css">
+
+  <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,500,700|Roboto:700,500,300' rel='stylesheet' type='text/css'>  
+  <link href="https://fonts.googleapis.com/css?family=Google+Sans:400,500,700" rel="stylesheet">
+
+	<meta name="viewport" content="width=device-width">
+</head>
+<body>
+  <div class='header'>
+    <div class='header-left'>
+      <a href='https://pair.withgoogle.com/'>
+        <img src='../images/pair-logo.svg' style='width: 100px'></img>
+      </a>
+      <a href='../'>Explorables</a> 
+    </div>
+  </div>
+  
+  <h1 class='headline'>Why Some Models Leak Data</h1>
+  <div class="post-summary">Machine learning models use large amounts of data, some of which can be sensitive. If they're not trained correctly, sometimes that data is inadvertently revealed.</div>
+  <link rel="stylesheet" href="style.css">
+
+
+<p>Let’s take a look at a game of soccer. </p>
+<link rel="stylesheet" href="style.css">
+
+<div id='field-grass' class='field'></div>
+
+<p><br></br> </p>
+<p>Using the position of each player as training data, we can teach a model to predict which team would get to a loose ball first at each spot on the field, indicated by the color of the pixel.</p>
+<div id='field-prediction' class='field'></div>
+
+<p>It updates in real-time—drag the players around to see the model change.</p>
+<p><br></br> </p>
+<p>This model reveals quite a lot about the data used to train it. Even without the actual positions of the players, it is simple to see where players might be.   </p>
+<div id='field-playerless' class='field'></div>
+
+<p>Click this button to <span class="button" id="player-button">move the players</span> </p>
+<p>Take a guess at where the yellow team’s goalie is now, then check their actual position. How close were you?</p>
+<h3>Sensitive Salary Data</h3>
+
+<p>In this specific soccer example, being able to make educated guesses about the data a model was trained on doesn’t matter too much. But what if our data points represent something more sensitive?</p>
+<div id='field-scatter' class='field'></div>
+
+<p>We’ve fed the same numbers into the model, but now they represent salary data instead of soccer data. Building models like this is a common technique to <a href="https://www.eeoc.gov/laws/guidance/section-10-compensation-discrimination#c.%20Using%20More%20Sophisticated%20Statistical%20Techniques%20to%20Evaluate">detect discrimination</a>. A union might test if a company is paying men and women fairly by building a salary model that takes into account years of experience. They can then <a href="https://postguild.org/2019-pay-study/">publish</a> the results to bring pressure for change or show improvement.</p>
+<p>In this hypothetical salary study, even though no individual salaries have been published, it is easy to infer the salary of the newest male hire. And carefully cross referencing public start dates on LinkedIn with the model could almost perfectly reveal everyone’s salary.</p>
+<p>Because the model here is so flexible (there are hundreds of square patches with independently calculated predictions) and we have so few data points (just 22 people), it is able to “memorize” individual data points. If we’re looking to share information about patterns in salaries, a simpler and more constrained model like a linear regression might be more appropriate. </p>
+<div id='field-regression' class='field'></div>
+
+<p>By boiling down the 22 data points to two lines we’re able to see broad trends without being able to guess anyone’s salary.</p>
+<h3>Subtle Leaks</h3>
+
+<p>Removing complexity isn’t a complete solution though. Depending on how the data is distributed, even a simple line can inadvertently reveal information.</p>
+<div id='field-regression-leak' class='field'></div>
+
+<p>In this company, almost all the men started several years ago, so the slope of the line is especially sensitive to the salary of the new hire. </p>
+<p>Is their salary <span class="button" id="high-button">higher or lower</span> than average? Based on the line, we can make a pretty good guess.</p>
+<p>Notice that changing the salary of someone with a more common tenure barely moves the line. In general, more typical data points are less susceptible to being leaked. This sets up a tricky trade off: we want models to learn about edge cases while being sure they haven’t memorized individual data points.</p>
+<h3>Real World Data</h3>
+
+<p>Models of real world data are often quite complex—this can improve accuracy, but makes them <a href="https://blog.tensorflow.org/2020/06/introducing-new-privacy-testing-library.html">more susceptible</a> to unexpectedly leaking information. Medical models have inadvertently revealed <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4827719/">patients’ genetic markers</a>. Language models have memorized <a href="https://bair.berkeley.edu/blog/2019/08/13/memorization/">credit card numbers</a>. Faces can even be <a href="https://rist.tech.cornell.edu/papers/mi-ccs.pdf">reconstructed</a> from image models: </p>
+<div class='face-container'><img src='face.png'></div>
+
+<p><a href="https://rist.tech.cornell.edu/papers/mi-ccs.pdf">Fredrikson et al</a> were able to extract the image on the left by repeatedly querying a facial recognition API. It isn’t an exact match with the individual’s actual face (on the right), but this attack only required access to the model’s predictions, not its internal state.  </p>
+<h3>Protecting Private Data</h3>
+
+<p>Training models with <a href="http://www.cleverhans.io/privacy/2018/04/29/privacy-and-machine-learning.html">differential privacy</a> stops the training data from leaking by limiting how much the model can learn from any one data point. Differentially private models are still at the cutting edge of research, but they’re being packaged into <a href="https://blog.tensorflow.org/2019/03/introducing-tensorflow-privacy-learning.html">machine learning frameworks</a>, making them much easier to use. When it isn’t possible to train differentially private models, there are also tools that can <a href="https://github.com/tensorflow/privacy/tree/master/tensorflow_privacy/privacy/membership_inference_attack">measure</a> how much data is the model memorizing. Also, standard techniques such as aggregation and limiting how much data a single source can contribute are still useful and usually improve the privacy of the model.</p>
+<p>As we saw in the <a href="https://pair.withgoogle.com/explorables/anonymization/">Collecting Sensitive Information Explorable</a>, adding enough random noise with differential privacy to protect outliers like the new hire  can increase the amount of data required to reach a good level of accuracy. Depending on the application, the constraints of differential privacy could even improve the model—for instance, not learning too much from one data point can help prevent <a href="https://openreview.net/forum?id=r1xyx3R9tQ">overfitting</a>. </p>
+<p>Given the increasing utility of machine learning models for many real-world tasks, it’s clear that more and more systems, devices and apps will be powered, to some extent, by machine learning in the future. While <a href="https://owasp.org/www-project-top-ten/">standard privacy best practices</a> developed for non-machine learning systems still apply to those with machine learning, the introduction of machine learning introduces new challenges, including the ability of the model to memorize some specific training data points and thus be vulnerable to privacy attacks that seek to extract this data from the model. Fortunately, techniques such as differential privacy exist that can be helpful in overcoming this specific challenge. Just as with other areas of <a href="https://ai.google/responsibilities/responsible-ai-practices/">Responsible AI</a>, it’s important to be aware of these new challenges that come along with machine learning and what steps can be taken to mitigate them. </p>
+<h3>Credits</h3>
+
+<p>Adam Pearce and Ellen Jiang // December 2020</p>
+<p>Thanks to Andreas Terzis, Ben Wedin, Carey Radebaugh, David Weinberger, Emily Reif, Fernanda Viégas, Hal Abelson, Kristen Olson, Martin Wattenberg, Michael Terry, Miguel Guevara, Thomas Steinke, Yannick Assogba, Zan Armstrong and our other colleagues at Google for their help with this piece.</p>
+<h3>More Explorables</h3>
+
+<p id='recirc'></p>
+
+
+<script src='../third_party/d3_.js'></script>
+<script src='../third_party/simple-statistics.min.js'></script>
+<script src='players0.js'></script>
+<script src='script.js'></script>
+
+
+<script src='../third_party/recirc.js'></script>
+</body>
+
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138505774-1"></script>
+<script>
+  if (window.location.origin === 'https://pair.withgoogle.com'){
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'UA-138505774-1');
+  }
+</script>
+
+<script>
+  // Tweaks for displaying in an iframe
+  if (window !== window.parent){
+    
+    // Open links in a new tab
+    Array.from(document.querySelectorAll('a'))
+      .forEach(e => {
+        // skip anchor links
+        if (e.href && e.href[0] == '#') return
+
+        e.setAttribute('target', '_blank')
+        e.setAttribute('rel', 'noopener noreferrer')
+      })
+
+    // Remove recirc h3
+    Array.from(document.querySelectorAll('h3'))
+      .forEach(e => {
+        if (e.textContent != 'More Explorables') return
+
+        e.parentNode.removeChild(e)
+      })
+
+    // Remove recirc container
+    var recircEl = document.querySelector('#recirc')
+    recircEl.parentNode.removeChild(recircEl)
+  }
+</script>
+
+</html>

public/data-leak/players0.js

@@ -0,0 +1,456 @@
+var players0 = [
+  [
+    1.305925030229746,
+    38.016928657799276
+  ],
+  [
+    20.894800483675937,
+    23.071342200725514
+  ],
+  [
+    24.232164449818622,
+    50.35066505441355
+  ],
+  [
+    37.29141475211608,
+    4.643288996372431
+  ],
+  [
+    57.89600967351874,
+    25.24788391777509
+  ],
+  [
+    41.20918984280532,
+    34.389359129383315
+  ],
+  [
+    42.51511487303507,
+    54.26844014510278
+  ],
+  [
+    31.77750906892382,
+    67.9081015719468
+  ],
+  [
+    63.84522370012092,
+    54.41354292623942
+  ],
+  [
+    70.37484885126965,
+    42.22490931076179
+  ],
+  [
+    39.32285368802902,
+    56.44498186215236
+  ],
+  [
+    35.550181378476424,
+    58.91172914147521
+  ],
+  [
+    46.57799274486094,
+    52.8174123337364
+  ],
+  [
+    39.6130592503023,
+    37.14631197097945
+  ],
+  [
+    42.51511487303507,
+    30.90689238210399
+  ],
+  [
+    50.64087061668682,
+    8.706166868198308
+  ],
+  [
+    71.10036275695285,
+    8.996372430471585
+  ],
+  [
+    75.01813784764208,
+    26.844014510278114
+  ],
+  [
+    77.3397823458283,
+    47.44860943168077
+  ],
+  [
+    76.17896009673518,
+    59.34703748488513
+  ],
+  [
+    105.05441354292624,
+    39.177750906892385
+  ],
+  [
+    59.34703748488513,
+    33.083434099153564
+  ]
+]
+
+
+var players1 = [
+  [
+    6.819830713422007,
+    27.569528415961305
+  ],
+  [
+    31.05199516324063,
+    30.03627569528416
+  ],
+  [
+    28.440145102781138,
+    43.24062877871826
+  ],
+  [
+    48.02902055622733,
+    13.639661426844015
+  ],
+  [
+    62.249093107617895,
+    35.69528415961306
+  ],
+  [
+    49.915356711003625,
+    26.553808948004836
+  ],
+  [
+    53.68802902055623,
+    47.88391777509069
+  ],
+  [
+    45.85247883917775,
+    54.123337363966144
+  ],
+  [
+    72.8415961305925,
+    46.57799274486094
+  ],
+  [
+    70.81015719467956,
+    23.216444981862153
+  ],
+  [
+    35.98548972188634,
+    44.11124546553809
+  ],
+  [
+    49.48004836759371,
+    59.92744860943168
+  ],
+  [
+    46.86819830713422,
+    45.417170495767834
+  ],
+  [
+    39.6130592503023,
+    37.14631197097945
+  ],
+  [
+    42.37001209189843,
+    24.812575574365177
+  ],
+  [
+    53.252720677146314,
+    9.721886336154776
+  ],
+  [
+    73.5671100362757,
+    8.996372430471585
+  ],
+  [
+    80.96735187424426,
+    26.698911729141475
+  ],
+  [
+    85.75574365175332,
+    37.43651753325272
+  ],
+  [
+    87.35187424425635,
+    47.88391777509069
+  ],
+  [
+    112.59975816203143,
+    31.77750906892382
+  ],
+  [
+    58.041112454655384,
+    25.97339782345828
+  ]
+]
+
+var players2 = [
+  [
+    22.6360338573156,
+    36.27569528415961
+  ],
+  [
+    49.48004836759371,
+    18.71825876662636
+  ],
+  [
+    43.82103990326481,
+    34.82466747279323
+  ],
+  [
+    94.89721886336154,
+    6.674727932285369
+  ],
+  [
+    103.31318016928658,
+    24.522370012091898
+  ],
+  [
+    82.12817412333736,
+    32.0677146311971
+  ],
+  [
+    52.8174123337364,
+    56.009673518742446
+  ],
+  [
+    91.26964933494558,
+    55.28415961305925
+  ],
+  [
+    99.68561064087062,
+    40.33857315598549
+  ],
+  [
+    105.19951632406288,
+    40.33857315598549
+  ],
+  [
+    53.542926239419586,
+    43.966142684401454
+  ],
+  [
+    49.48004836759371,
+    59.92744860943168
+  ],
+  [
+    58.18621523579202,
+    37.87182587666263
+  ],
+  [
+    86.91656590084644,
+    37.58162031438936
+  ],
+  [
+    59.34703748488513,
+    18.137847642079805
+  ],
+  [
+    96.34824667472793,
+    25.24788391777509
+  ],
+  [
+    90.97944377267231,
+    8.996372430471585
+  ],
+  [
+    104.47400241837968,
+    31.342200725513905
+  ],
+  [
+    109.8428053204353,
+    28.295042321644498
+  ],
+  [
+    105.05441354292624,
+    43.24062877871826
+  ],
+  [
+    116.2273276904474,
+    25.538089480048367
+  ],
+  [
+    86.62636033857315,
+    29.165659008464328
+  ]
+]
+
+
+playersleakhigh = [
+  [
+    2.71764705882353,
+    22
+  ],
+  [
+    38.11764705882353,
+    44.75294117647059
+  ],
+  [
+    31.058823529411764,
+    53.22352941176471
+  ],
+  [
+    52.94117647058824,
+    51.10588235294118
+  ],
+  [
+    58.023529411764706,
+    50.11764705882353
+  ],
+  [
+    46.305882352941175,
+    51.247058823529414
+  ],
+  [
+    46.023529411764706,
+    42.635294117647064
+  ],
+  [
+    41.082352941176474,
+    48.98823529411765
+  ],
+  [
+    49.411764705882355,
+    43.76470588235294
+  ],
+  [
+    59.71764705882353,
+    43.48235294117647
+  ],
+  [
+    39.32285368802902,
+    56.44498186215236
+  ],
+  [
+    67.76470588235294,
+    30.494117647058825
+  ],
+  [
+    78.07058823529412,
+    48.28235294117647
+  ],
+  [
+    69.60000000000001,
+    40.23529411764706
+  ],
+  [
+    76.09411764705882,
+    23.152941176470588
+  ],
+  [
+    85.9764705882353,
+    24.282352941176473
+  ],
+  [
+    84.56470588235294,
+    48.98823529411765
+  ],
+  [
+    74.68235294117648,
+    39.38823529411765
+  ],
+  [
+    79.3529411764706,
+    22
+  ],
+  [
+    93.1764705882353,
+    34.44705882352941
+  ],
+  [
+    86.68235294117648,
+    33.45882352941177
+  ],
+  [
+    81.74117647058824,
+    41.92941176470588
+  ]
+]
+
+playersleaklow = [
+  [
+    2.71764705882353,
+    73.12941176470588
+  ],
+  [
+    38.11764705882353,
+    44.75294117647059
+  ],
+  [
+    31.058823529411764,
+    53.22352941176471
+  ],
+  [
+    52.94117647058824,
+    51.10588235294118
+  ],
+  [
+    58.023529411764706,
+    50.11764705882353
+  ],
+  [
+    46.305882352941175,
+    51.247058823529414
+  ],
+  [
+    46.023529411764706,
+    42.635294117647064
+  ],
+  [
+    41.082352941176474,
+    48.98823529411765
+  ],
+  [
+    49.411764705882355,
+    43.76470588235294
+  ],
+  [
+    59.71764705882353,
+    43.48235294117647
+  ],
+  [
+    39.32285368802902,
+    56.44498186215236
+  ],
+  [
+    67.76470588235294,
+    30.494117647058825
+  ],
+  [
+    78.07058823529412,
+    48.28235294117647
+  ],
+  [
+    69.60000000000001,
+    40.23529411764706
+  ],
+  [
+    76.09411764705882,
+    23.152941176470588
+  ],
+  [
+    85.9764705882353,
+    24.282352941176473
+  ],
+  [
+    84.56470588235294,
+    48.98823529411765
+  ],
+  [
+    74.68235294117648,
+    39.38823529411765
+  ],
+  [
+    79.3529411764706,
+    72.70588235294117
+  ],
+  [
+    93.1764705882353,
+    34.44705882352941
+  ],
+  [
+    86.68235294117648,
+    33.45882352941177
+  ],
+  [
+    81.74117647058824,
+    41.92941176470588
+  ]
+]

public/data-leak/script.js

@@ -0,0 +1,296 @@
+console.clear()
+
+var isMobile = innerWidth < 1000
+d3.select('body').classed('is-mobile', isMobile)
+
+var colors = ['#FDE100', '#EE2737' ]
+var colors = ['#FDE100', '#8e068e' ]
+// var colors = ['#2979FF', '#FF6D00']
+// var colors = ['#2979FF', '#FDD835']
+// var colors = ['#f1a340', '#998ec3' ]
+
+var color2dark = {
+  '#FDE100': d3.color('#FDE100').darker(.2),
+  '#8e068e': d3.color('#8e068e').darker(2),
+}
+
+var colorScale = d3.interpolate(colors[0], colors[1])
+
+var s = d3.select('#field-grass').node().offsetWidth/120
+
+var width = 120*s
+var height = Math.floor(75*s)
+
+var cs = 20
+var cells = d3.cross(
+  d3.range(0, width + cs, cs), 
+  d3.range(0, height + cs, cs))
+
+
+
+globalPlayers = decoratePlayers(players0)
+globalPlayersH = decoratePlayers(playersleaklow)
+
+function decoratePlayers(rawPlayers){
+  var players = rawPlayers.map(d => d.map(d => d*s))
+  players.forEach((d, i) => {
+    d.color = i < 11 ? colors[0] : colors[1]
+    d.isRed = i < 11 ? 1 : 0
+    d.i = i
+  })
+
+  players.renderFns = []
+  players.renderAll = () => players.renderFns.forEach(d => d())
+
+  return players
+}
+
+var playerOptions0 = [players1, players2, players0]
+var playerOptions1 = [playersleaklow, playersleakhigh]
+
+// addPlayAnimation(globalPlayers, '#field-grass', playerOptions0, 'mouseenter')
+addPlayAnimation(globalPlayers, '#player-button', playerOptions0)
+addPlayAnimation(globalPlayersH, '#high-button', playerOptions1, 'click', true)
+
+function addPlayAnimation(players, selStr, playerOptions, eventStr='click', loop=false){
+  if (loop) {
+    window.loopInterval = d3.interval(playAnimation, 2500)
+  }
+  if (selStr) {
+    d3.selectAll(selStr).on(eventStr, function() {
+      if (loop) window.loopInterval.stop() // stop looping if the higher-or-lower button is pressed
+      playAnimation()
+    })
+  }
+
+  var curPlayerIndex = 0
+  function playAnimation(){
+    curPlayerIndex++
+    curPlayerIndex = curPlayerIndex % playerOptions.length
+
+    var nextPlayers = playerOptions[curPlayerIndex]
+      .map(d => d.map(d => d*s))
+
+    var interpolates = players
+      .map((d, i) => d3.interpolate(d, nextPlayers[i]))
+
+    var dur = 1000
+    if (playerOptions.animationTimer) playerOptions.animationTimer.stop()
+    playerOptions.animationTimer = d3.timer(time => {
+      var t = d3.clamp(0, time/dur, 1)
+
+      interpolates.forEach((interpolate, i) => {
+        var [x, y] = interpolate(t)
+
+        players[i][0] = x
+        players[i][1] = y
+      })
+
+      players.renderAll(t)
+
+      if (t == 1) playerOptions.animationTimer.stop()
+    })
+  }
+}
+
+function stopAnimations(){
+  if (playerOptions0.animationTimer) playerOptions0.animationTimer.stop()
+  if (playerOptions1.animationTimer) playerOptions1.animationTimer.stop()
+}
+
+
+function initField(name){
+  var marginBottom = 30
+  var marginTop = 35
+  var sel = d3.select('#field-' + name).html('').classed('field', true)
+    .st({marginBottom: marginBottom, marginTop: marginTop})
+
+  window.c = d3.conventions({
+    sel,
+    margin: {top: 0, left: 0, right: 0, bottom: 0},
+    width,
+    height,
+    layers: 'dcs'
+  })
+
+  var [divSel, ctx, svg] = c.layers
+
+  c.svg = c.svg.append('g').translate([.5, .5])
+
+  var isRegression = name.includes('regression')
+  var isVisiblePoints = name != 'playerless'
+
+  var pointName = isRegression || name == 'scatter' ? ' People' : ' Players'
+  var buttonSel = sel.append('div.button')
+    .st({top: pointName == ' People' ? 28 : -8, right: -8, position: 'absolute', background: '#fff'})
+    .text((isVisiblePoints ? 'Hide' : 'Show') + pointName)
+    .on('click', () => {
+      isVisiblePoints = !isVisiblePoints
+      buttonSel.text((isVisiblePoints ? 'Hide' : 'Show') + pointName)
+      playerSel.st({opacity: isVisiblePoints ? 1 : 0})
+      textSel.st({opacity: isVisiblePoints ? 1 : 0})
+    })
+
+  if (name == 'grass'){
+    c.svg.append('rect').at({width, height, fill: '#34A853'})
+    divSel.append('div.pointer').append('div')
+  }
+
+  var roundNum = d => isNaN(d) ? d : Math.round(d)
+  var chalkSel = c.svg.append('g')
+  chalkSel.append('path.white')
+    .at({d: ['M', Math.round(width/2), 0, 'V', height].map(roundNum).join(' '),})
+  chalkSel.append('circle.white')
+    .at({r: 10*s}).translate([width/2, height/2])
+  chalkSel.append('path.white')
+    .at({d: ['M', 0, (75 - 44)/2*s, 'h', 18*s, 'v', 44*s, 'H', 0].map(roundNum).join(' '),})
+  chalkSel.append('path.white')
+    .at({d: ['M', width, (75 - 44)/2*s, 'h', -18*s, 'v', 44*s, 'H', width].map(roundNum).join(' '),})
+
+  var drag = d3.drag()
+    .on('drag', function(d){
+      stopAnimations()
+      if (name === 'regression-leak') {
+        window.loopInterval.stop()
+      }
+
+      d[0] = Math.round(Math.max(0, Math.min(width,  d3.event.x)))
+      d[1] = Math.round(Math.max(0, Math.min(height, d3.event.y)))
+
+      players.renderAll()
+    })
+    .subject(function(d){ return {x: d[0], y: d[1]} })
+
+
+  var players = name == 'regression-leak' ? globalPlayersH : globalPlayers
+
+  if (isRegression){
+    var byColor = d3.nestBy(players, d => d.color)
+    var regressionSel = c.svg.appendMany('path', byColor)
+      .at({stroke: d => color2dark[d.key], strokeWidth: 3.5, strokeDasharray: '4 4'})
+      .each(function(d){ d.sel = d3.select(this) })
+  }
+
+  var bgPlayerSel = c.svg.appendMany('circle.player', players)
+    .at({r: 15, fill: d => d.color, opacity: 0})
+    .translate(d => d)
+    .call(drag)
+
+  var playerSel = c.svg.appendMany('circle.player', players)
+    .at({r: 5, fill: d => d.color, opacity: isVisiblePoints ? 1 : 0})
+    .translate(d => d)
+    .call(drag)
+
+  var textSel = c.svg.appendMany('text.chart-title', name == 'playerless' ? [players[0], players[20]] : [players[0]])
+    .text(name == 'regression-leak' || name == 'scatter' ? 'New Hire' : name == 'playerless' ? 'Goalie' : '')
+    .st({pointerEvent: 'none'})
+    .at({dy: '.33em', opacity: isVisiblePoints ? 1 : 0, dx: (d, i) => i ? -8 : 8, textAnchor: (d, i) => i ? 'end' : 'start'})
+
+  if (name == 'scatter' || isRegression){
+    sel.st({marginBottom: marginBottom + 70})
+    sel.insert('div.axis.chart-title', ':first-child') 
+      .html(`
+        <span style='background: ${colors[0]}'>Men's</span>
+        and 
+        <span style='background: ${colors[1]}'>Women's</span> 
+        Salaries`)
+      .st({marginBottom: 10, fontSize: 16})
+
+    c.x.domain([0, 20])
+    c.y.domain([40000, 90000])
+
+    c.xAxis.ticks(5)
+    c.yAxis.ticks(5).tickFormat(d => {
+      var rv = d3.format(',')(d).replace('9', '$9')
+      if (isMobile){
+        rv = rv.replace(',000', 'k').replace('40k', '')
+      }
+
+      return rv
+    })
+
+
+
+    chalkSel.selectAll('*').remove()
+    chalkSel.appendMany('path.white', c.x.ticks(5))
+      .at({d: d => ['M', Math.round(c.x(d)), '0 V ', c.height].join(' ')})
+
+    chalkSel.appendMany('path.white', c.y.ticks(5))
+      .at({d: d => ['M 0', Math.round(c.y(d)), 'H', c.width].join(' ')})
+
+    d3.drawAxis(c)
+    c.svg.selectAll('.axis').lower()
+    if (isMobile){
+      c.svg.selectAll('.y text')
+        .translate([35, 10])
+        .st({fill: name == 'scatter' ? '#000' : ''})
+
+      c.svg.selectAll('.x text').filter(d => d == 20).at({textAnchor: 'end'})
+      c.svg.selectAll('.x text').filter(d => d == 0).at({textAnchor: 'start'})
+    }
+    
+
+    c.svg.select('.x').append('text.chart-title')
+      .text('Years at Company →')
+      .translate([c.width/2, 43])
+      .at({textAnchor: 'middle'})
+  }
+
+
+
+  render()
+  players.renderFns.push(render)
+  function render(){
+    renderSVG()
+    if (name != 'grass' && !isRegression)renderCanvas()
+    if (isRegression) renderRegression()
+  }
+
+  function renderSVG(){
+    if (playerSel){
+      playerSel.translate(d => d)
+      bgPlayerSel.translate(d => d)
+      textSel.translate(d => d)
+    }
+  }
+
+  function renderCanvas(){
+    cells.forEach(d => {
+      players.forEach(p => {
+        var dx = p[0] - d[0] - cs/2
+        var dy = p[1] - d[1] - cs/2
+
+        // p.dist = Math.sqrt(dx*dx + dy*dy)
+        // p.dist = dx*dx + dy*dy
+        p.dist = Math.pow(dx*dx + dy*dy, 1.5) + .00001
+        p.weight = 1/p.dist
+
+        return p.dist
+      })
+
+      var sum = d3.sum(players, d => d.isRed*d.weight)
+      var wsum = d3.sum(players, d => d.weight)
+
+      ctx.fillStyle = colorScale(1 - sum/wsum)
+
+      ctx.fillRect(d[0], d[1], cs, cs)
+    })
+  }
+
+  function renderRegression(){
+    byColor.forEach(d => {
+      var l = ss.linearRegressionLine(ss.linearRegression(d))
+
+      var x0 = 0
+      var x1 = c.width
+
+      d.sel.at({d: `M ${x0} ${l(x0)} L ${x1} ${l(x1)}`})
+    })
+  }
+}
+
+'grass prediction playerless scatter regression regression-leak'
+  .split(' ')
+  .forEach(initField)
+
+

public/data-leak/style.css

@@ -0,0 +1,176 @@
+body{
+
+}
+
+
+p{
+  margin-left: 0px auto;
+  margin-right: 0px auto;
+  margin: 0px auto;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+h3, .post-summary, h1x, p{
+  max-width: 650px;
+}
+
+#recirc{
+  max-width: 760px;
+}
+
+
+.white{
+  stroke: #fff;
+  fill: none;
+  stroke-width: 1;
+}
+
+.player{
+	cursor: pointer;
+  stroke: #000;
+  stroke-width: 2;
+}
+
+.button{
+  border: .5px solid #000;
+  /*border-bottom-width: 4px;*/
+  /*border-right-width: 4px;*/
+  border-radius: 8px;
+  padding: 4px;
+  margin: 2px;
+  cursor: pointer;
+  display: inline-block;
+  /*font-family: monospace;*/
+  /*font-family: 'Roboto Slab', serif;*/
+  /*font-size: 16px;*/
+  user-select: none;
+  font-family: 'Google Sans', sans-serif;
+  font-family: 'Roboto', Helvetica, sans-serif;
+
+  /*font-weight: 300;*/
+}
+
+@media (min-width: 800px){
+  .button{
+    margin-bottom: -100px;
+  }
+}
+
+.inline-button{
+  display: inline;
+}
+
+.button:hover{
+  background: #eee !important;
+}
+
+.button:active{
+}
+
+canvas{
+  opacity: .9;
+}
+
+svg{
+  overflow: visible;
+}
+
+.axis{
+  font-size: 12px;
+
+}
+.axis{
+  color: #000;
+}
+.axis text{
+  fill: #999;
+  font-family: 'Roboto', Helvetica, sans-serif;
+}
+.axis text.chart-title{
+  fill: #000;
+  font-size: 16px;
+}
+.axis line{
+  stroke: #ccc;
+  display: none;
+}
+
+.domain{
+  stroke: #ccc;
+  display: none;
+}
+
+text, .chart-title{
+  user-select: none;
+  /*pointer-events: none;*/
+}
+
+
+.field{
+  font-family: 'Google Sans', sans-serif;
+  font-family: 'Roboto', Helvetica, sans-serif;
+  margin-top: 10px;
+}
+
+.chart-title span{
+  padding: 4px;
+}
+
+.chart-title span:last-child{
+  color: #fff;
+}
+
+.chart-title span:first-child{
+  color: #000;
+}
+
+#field-regression .white, #field-regression-leak .white{
+	stroke: #ccc;
+}
+
+#field-grass .button, #field-prediction .button{
+  display: none;
+}
+
+.face-container{
+  max-width: 400px;
+
+  margin: 0px auto;
+}
+.face-container img{
+  width: 100%;
+}
+
+.post-summary {
+  margin-bottom: 40px;
+}
+
+p {
+  margin: 10 auto;
+}
+
+
+
+.pointer{
+  height: 0px;
+  position: relative;
+}
+.pointer div {
+  overflow: visible;
+  content: "";
+  background-image: url(https://pair-code.github.io/interpretability/bert-tree/pointer.svg);
+  width: 27px;
+  height: 27px;
+  position: absolute;
+  left: -35px;
+  top: 0px;
+}
+
+
+.face-container:after{
+  content: "M. Fredrikson, S. Jha, and T. Ristenpart, “Model inversion attacks that exploit confidence information and basic countermeasures,” in CCS, 2015.";
+  font-size: 12px;
+  color: #888;
+  line-height: 14px;
+  display: block;
+}

public/dataset-worldviews/README.md

@@ -0,0 +1,6 @@
+## Photo todos
+
+x highlight the active button
+x firing when not expected?
+x clear timer when clicked
+- maybe convert to HTML?