|
|
|
|
|
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('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') |
|
|
|
|
|
|
|
|
|
|
|
|
