Hugging Face's logo

Spaces:
merve
/
private-and-fair
Running

App Files Community
private-and-fair
File size: 3,699 Bytes 
30e9731
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
d3.select('body').selectAppend('div.tooltip.tooltip-hidden')

var footnums = '¹²³⁴⁵⁶⁷⁸⁹'

var footendSel = d3.selectAll('.footend')
  .each(function(d, i){
    var sel = d3.select(this)
    var ogHTML = sel.parent().html()
    sel
      .at({href: '#footstart-' + i, id: 'footend-' + i})
      .text(footnums[i])
      .datum(ogHTML)
  })

footendSel.parent().parent().selectAll('br').remove()

var footstartSel = d3.selectAll('.footstart')
  .each(function(d, i){
    d3.select(this)
      .at({
        href: '#footend-' + i,
      })
      .text(footnums[i])
      .datum(footendSel.data()[i])
      .parent().at({id: 'footstart-' + i})
  })
  .call(addLockedTooltip)

ttSel.classed('tooltip-footnote', 1)

function addLockedTooltip(sel){
  sel
    .on('mouseover', function(d, i){
      ttSel.classed('tooltip-footnote', 1)
        .html(d)
        .select('.footend').remove()

      var x = this.offsetLeft,
          y = this.offsetTop,
          bb = ttSel.node().getBoundingClientRect(),
          left = d3.clamp(20, (x-bb.width/2), window.innerWidth - bb.width - 20),
          top = innerHeight + scrollY > y + 20 + bb.height ? y + 20 : y - bb.height - 10;

      ttSel.st({left, top}).classed('tooltip-hidden', false)
    })

  sel.on('mousemove',mouseover).on('mouseout', mouseout)
  ttSel.on('mousemove', mouseover).on('mouseout', mouseout)
  function mouseover(){
    if (window.__ttfade) window.__ttfade.stop()
  }
  function mouseout(){
    if (window.__ttfade) window.__ttfade.stop()
    window.__ttfade = d3.timeout(() => {
      ttSel
        .classed('tooltip-hidden', 1)
    }, 250)
  }
}





var infoSel = d3.select('.info-box').html('')
  .st({border: '1px solid orange', background: 'rgba(255,250,241,.5)', maxWidth: 750, margin: '0 auto', padding: 20, paddingTop: 5, paddingBottom: 5})
  // .st({textAlign: })

infoSel.append('p')
  .st({marginLeft: 10})
  .html('Not familiar with how machine learning models are trained or why they might leak data? <br>These interactive articles will get you up to speed.')
  .html('New to some of these concepts? These interactive articles will get you up to speed.')
  .html('New to machine learning or differential privacy? These interactive articles will get you up to speed.')

var articles = [
  {
    img: 'https://pair.withgoogle.com/explorables/images/anonymization.png',
    title: 'Collecting Sensitive Information',
    permalink: 'https://pair.withgoogle.com/explorables/anonymization/',
  },
  {
    img: 'https://pair.withgoogle.com/explorables/images/model-inversion.png',
    title: 'Why Some Models Leak Data',
    permalink: 'https://pair.withgoogle.com/explorables/data-leak/',
  },
  {
    img: 'http://playground.tensorflow.org/preview.png',
    title: 'TensorFlow Playground',
    permalink: 'https://playground.tensorflow.org'
  },
]


var postSel = infoSel.appendMany('a.post', articles)
  .st({
    textAlign: 'center',
    width: '30.5%', 
    display: 'inline-block', 
    verticalAlign: 'top',
    marginLeft: 10,
    marginRight: 10,
    textDecoration: 'none',
  })
  .at({href: d => d.permalink})

postSel.append('div.img')
  .st({
    width: '100%', 
    height: 80,
    backgroundImage: d => `url(${d.img})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    outline: '1px solid #ccc'
  })

postSel.append('p.title')
  .text(d => d.title)
  .st({
    verticalAlign: 'top',
    marginTop: 10,
    textDecoration: 'none',
    fontSize: 15,
    fontWeight: 500,
  })


// width: 100%;
//   height: 200px;
//   background-image: url(https://pair.withgoogle.com/explorables/images/model-inversion.png);
//   background-size: cover;
//   background-position: center center;