Spaces:
Running
Running
File size: 2,036 Bytes
40559c4 |
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 |
!(async function(){
await util.getFile(`cns-cache/mnist_train_raw_3.npy`)
var digitMetadata = await util.getFile('mnist_train.csv')
var {byLabel} = util.decorateDigitMetadata(digitMetadata)
var sel = d3.select('.top-bot-digits').html('')
.at({role: 'graphics-document', 'aria-label': `The twenty-five MNIST 3 digits most and least senstive to higher and lower privacy. The digits most sensitive to higher privacy are much more poorly drawn than the onces least sensitive to higher privacy.`})
var digitSel = sel.append('div')
var buttonSel = sel.append('div.digit-button-container')
.appendMany('div.button', d3.range(10))
.text(d => d)
.on('click', d => drawClass(byLabel[d]))
drawClass(byLabel[3])
async function drawClass(digitClass){
buttonSel.classed('active', d => d == digitClass.key)
await util.getFile(`cns-cache/mnist_train_raw_${digitClass.key}.npy`)
var nRows = 5
var nCols = 5
var bot = _.sortBy(digitClass, d => +d.priv_order).slice(0, nRows*nCols)
var top = _.sortBy(digitClass, d => -d.priv_order).slice(0, nRows*nCols)
digitSel.html('').append('div')
.st({maxWidth: 640, margin: '0 auto'})
.appendMany('div', [bot, top])
.st({display: 'inline-block'})
.each(drawDigitBlock)
function drawDigitBlock(digits, isBot){
var s = 2
var sel = d3.select(this).append('div')
var c = d3.conventions({
sel,
width: s*29*nCols,
height: s*29*nRows,
layers: 'cs',
margin: {top: 30, bottom: 10, right: 10, left: 10}
})
var ctx = c.layers[0]
digits.forEach((d, i) => {
util.drawDigit(
ctx,
+d.i,
s,
(i % nCols)*s*29,
Math.floor(i/nCols)*s*29
)
})
c.svg.append('text')
.text(isBot ? 'Least sensitive to higher privacy' : 'Most sensitive to higher privacy')
.at({dy: '-.4em', textAnchor: 'middle', x: c.width/2, fontWeight: 600, fontSize: 14})
}
}
})() |