mervenoyan's picture
commit files to HF hub
06c03b1
var lURLs = `
img/green_doctor.png
img/blue_doctor.jpg
img/green0.png
img/bright_blue.png
img/blue0.png
img/blue1.png
`.trim().split('\n')
var rURLs = `
img/white0.png
img/white1.png
img/white2.png
img/white3.png
img/white4.png
img/white5.png
`.trim().split('\n')
var constructionSel = d3.select('#construction')
.html('')
// constructionSel.append('div.top').each(function(){
// var metrics = [{str: 'Male', key: 'Male', target: .5}]
// var active ={ percents: {Male: .5}}
// addMetrics(metrics, {topSel: d3.select(this).append('div.top'), active, isSmall: true})()
// })
constructionSel.append('img')
.at({src: 'img/construction.jpg', width: 900})
constructionSel.append('div')
.st({fontWeight: 500, fontSize: 14})
.text('Stock “construction worker” images')
var width = 400
var coatDivs = d3.select('#coat-v-gender').html('').st({marginBottom: 40})
.appendMany('div', [lURLs, rURLs])
.st({width: width, display: 'inline-block', marginRight: 20})
coatDivs.each(function(d, i){
var metrics = [
{str: 'Blue', key: 'Blue', target: .5},
{str: 'Male', key: 'Male', target: .5},
]
var active = !i ? {percents: {Blue: .5, Male: 1}} : {percents: {Blue: 0, Male: .5}}
addMetrics(metrics, {topSel: d3.select(this).append('div.top'), active, isSmall: true})()
})
coatDivs
.st({fontWeight: 500, fontSize: 14})
.appendMany('div', d => d.slice(0, 6))
.st({backgroundImage: d => 'url(' + d + ')', width: width/3 - 10, height: 100, display: 'inline-block'})
.st({marginRight: 8, outline: '1px solid #000'})
coatDivs
.append('div')
.text((d, i) => d == lURLs ? 'Male-presenting doctors wearing different colored clothes' : 'Doctor of different genders wearing white clothes')
// https://t3.gstatic.com/images?q=tbn:ANd9GcRziJdedqu58HeAlI9xtWhrVtCjVo6xO_uSHdQkxAI0q41XozLWT3xKd36S1NbuSoIOVvV4Huw26zAvdM_374qKuN9J88E