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