Published
Edited
Dec 3, 2021
Importers
Also listed in…
Medicamentalia
viewof customSelector = form(html`
<form class="menu">
<input class="menu-toggler" id="menu-toggler" type="checkbox">
<label for="menu-toggler">
<span class="art-selection-span"><img class="art-selection-toggler-img" width="${itemWidth}px" height=${itemHeight}px src=${await FileAttachment(
"ART_single_women.svg"
).url()}></img></span>
<span class="art-selection-toggler-text"><small>${
locale[_languageSelector].singleWomen
}</small></span>
</label>
<!-- PERSONAL SITUATION picker -->
<!-- Order: from more access to less access -->
<div class="personal-situation-menu">
<label class="menu-item">
<input type="radio" class="artWho" name="artWho" value="hetero_couples">
<span class="art-icon-block">
<img class="art-icon-svg" width="${itemWidth}" height=${itemHeight} src=${await FileAttachment(
"ART_hetero_couple.svg"
).url()}></img>
<span class="art-label">${
locale[_languageSelector].heterosexualCouple
}</span>
</span>
</label>
<label class="menu-item">
<input type="radio" class="artWho" name="artWho" value="single_women" checked>
<span class="art-icon-block">
<img class="art-icon-svg" width="${itemWidth}" height=${itemHeight} src=${await FileAttachment(
"ART_single_women.svg"
).url()}></img>
<span class="art-label">${
locale[_languageSelector].singleWomen
}</span>
</span>
</label>
<label class="menu-item">
<input type="radio" class="artWho" name="artWho" value="female_couples">
<span class="art-icon-block">
<img class="art-icon-svg" width="${itemWidth}" height=${itemHeight} src=${await FileAttachment(
"ART_female_couple.svg"
).url()}></img>
<span class="art-label">${
locale[_languageSelector].femaleCouple
}</span>
</span>
</label>
</div>
<!-- AGE picker -->
<div class="age-menu">
${
_isMobile
? Inputs.bind(
Inputs.range([0, 100], {
label: locale[_languageSelector].ageFemale,
value: defaultAgeValue,
step: 1
}),
viewof ageFemale
)
: Inputs.bind(
Inputs.number([0, 100], {
label: locale[_languageSelector].ageFemale,
value: defaultAgeValue,
step: 1
}),
viewof ageFemale
)
}
</div>
</form>`)
viewof ageFemale = Inputs.range([0, 100], { step: 1, value: 35 })
// Updating avatar selection icon and text
updateSelection = {
const mySelImg = d3.select(".art-selection-toggler-img");
const mySelText = d3.select(".art-selection-toggler-text small");
const myTogglerInput = d3.select("#menu-toggler");
// Pick the right image
if (avatarPersonalSituation === "female_couples") {
mySelImg.attr("src", await FileAttachment("ART_female_couple.svg").url());
mySelText.text(locale[_languageSelector].femaleCouple);
} else if (avatarPersonalSituation === "single_women") {
mySelImg.attr("src", await FileAttachment("ART_single_women.svg").url());
mySelText.text(locale[_languageSelector].singleWomen);
} else if (avatarPersonalSituation === "hetero_couples") {
mySelImg.attr("src", await FileAttachment("ART_hetero_couple.svg").url());
mySelText.text(locale[_languageSelector].heterosexualCouple);
}
const mySelAgeText = d3.select(".selected-age-value");
mySelAgeText.text(customSelector.age);
}
viewof ageMale = Inputs.range([0, 100], { step: 1, value: defaultAgeValue })
partnerSelectorBinded = html`
<span class="male-form">${
_isMobile
? Inputs.bind(
Inputs.range([0, 100], {
step: 1
}),
viewof ageMale
)
: Inputs.bind(
Inputs.number([0, 100], {
step: 1
}),
viewof ageMale
)
}</span>
`
partnerSelectorBindedMirror01 = html`
<span class="male-form">${
_isMobile
? Inputs.bind(
Inputs.range([0, 100], {
value: defaultAgeValue,
step: 1
}),
viewof ageMale
)
: Inputs.bind(
Inputs.number([0, 100], {
value: defaultAgeValue,
step: 1
}),
viewof ageMale
)
}</span>
`
scaleItemsRotation = d3
.scaleLinear()
.domain([0, nItems])
.range([initialAngle, finalAngle])
locale = ({
en: {
youAre: "You are...",
personalSituation: "Personal situation: ",
ageFemale: "♀ Your age: ",
heterosexualCouple: "Woman in a heterosexual couple",
femaleCouple: "Woman in a female couple",
singleWomen: "Single woman",
partnerAge: "♂ Partner age: "
},
es: {
youAre: "Eres...",
personalSituation: "Situación personal: ",
ageFemale: "♀ Tu edad: ",
heterosexualCouple: "Mujer en pareja heterosexual",
femaleCouple: "Mujer en pareja de mujeres",
singleWomen: "Mujer sin pareja",
partnerAge: "♂ Edad de tu pareja: "
},
it: {
youAre: "Sei...",
personalSituation: "Situazione personale: ",
ageFemale: "♀ Tua età: ",
heterosexualCouple: "Donna in coppia eterosessuale",
femaleCouple: "Donna in una coppia femminile",
singleWomen: "Donna single",
partnerAge: "♂ L'età del tuo partner: "
},
fr: {
youAre: "Vous êtes...",
personalSituation: "Situación personal: ",
ageFemale: "♀ Votre âge: ",
heterosexualCouple: "Une femme dans un couple hétérosexuel",
femaleCouple: "Une femme dans un couple de femmes",
singleWomen: "Une femme célibataire"
},
el: {
youAre: "Είσαι...",
personalSituation: "οικογενειακή κατάσταση: ",
ageFemale: "♀ Η ηλικία σου",
heterosexualCouple: "γυναίκα σε ετερεφυλόφιλο ζευγάρι",
femaleCouple: "γυναίκα σε ζευγάρι γυναικών",
singleWomen: "ελεύθερη γυναίκα"
}
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
