30:T529,# # 619 Avatar_v10 . This is a small piece imported on this notebook [#619 PIECES: All notebooks together - ART dataviz_v04](https://observablehq.com/@civio/619-art-access-v04?collection=@civio/619-art-eu) and therefore on this final one [#619 MAIN: Access to ART dataviz_v04 - sticky avatar](https://observablehq.com/@civio/619-main-access-to-art-dataviz_v04?collection=@civio/619-art-eu). **Article published in Civio (02/11/21):** - English version: [More than half of European countries prohibit access to assisted reproduction for lesbians and almost a third do so for single women](https://civio.es/medicamentalia/2021/11/02/ART-EU-access/). - Spanish version: [Más de la mitad de los países europeos prohíbe el acceso a la reproducción asistida a lesbianas y casi un tercio a mujeres sin pareja](https://civio.es/medicamentalia/2021/11/02/reproduccion-asistida-en-Europa/). **References:** - [Custom Form Input](https://observablehq.com/@mbostock/form-input) by by [Mike Bostock](https://observablehq.com/@mbostock/manipulating-svg-files). - [Synchronized Inputs](https://observablehq.com/@observablehq/synchronized-inputs) by [Observable](https://observablehq.com/@observablehq). - [Pure CSS Circle Menu - Codepen](https://codepen.io/hadarweiss/pen/WvEXeK) by [Hadar Weiss](https://codepen.io/hadarweiss).31:Ta20,viewof customSelector = form(html`

${ locale[_languageSelector].singleWomen }

${ _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 ) }

`)32:T1ad6,avatarStyles = html``33:T626,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: "ελεύθερη γυναίκα" } })34:[{"id":"956b462b2b064706ef8a6a22dd08ace68af8763ffbd7e96408a7c20efb795221da83024fe06517b66dab6354b6cf3fda6666d71eb88015497204e6c487054de1","href":"https://static.observableusercontent.com/files/956b462b2b064706ef8a6a22dd08ace68af8763ffbd7e96408a7c20efb795221da83024fe06517b66dab6354b6cf3fda6666d71eb88015497204e6c487054de1","name":"ART-bckg-avatar-05.svg","type":"image/svg+xml","lastModified":1635764866517.692,"size":798},{"id":"a0332c3f812b47a81ad3acd1e1ec233492c41edba8d5bd372b8cd25eb3a2b0f38079b5790340a4bc539c572f447c8f53339a447031186a04bfdd779507ce12ed","href":"https://static.observableusercontent.com/files/a0332c3f812b47a81ad3acd1e1ec233492c41edba8d5bd372b8cd25eb3a2b0f38079b5790340a4bc539c572f447c8f53339a447031186a04bfdd779507ce12ed","name":"ART_female_couple.svg","type":"image/svg+xml","lastModified":1635764866517.692,"size":2764},{"id":"970b67b49c286af81adf735e804feb9b8edb43c12471248e7eb19a2ea6838dd51324730525550e8fa29f42bb1d01eeef34b07f108d4f0c6f0dc0a39483695c72","href":"https://static.observableusercontent.com/files/970b67b49c286af81adf735e804feb9b8edb43c12471248e7eb19a2ea6838dd51324730525550e8fa29f42bb1d01eeef34b07f108d4f0c6f0dc0a39483695c72","name":"ART_hetero_couple.svg","type":"image/svg+xml","lastModified":1635764866517.692,"size":2673},{"id":"0f0f03fff487365896d4403aed8f1b2ee71a3ad842e2cae07b2f15fdd8babf11f0e4dd8c6a2e503ca95a28fce3e54d2a26457550b6b7c0559d08e46d81c42508","href":"https://static.observableusercontent.com/files/0f0f03fff487365896d4403aed8f1b2ee71a3ad842e2cae07b2f15fdd8babf11f0e4dd8c6a2e503ca95a28fce3e54d2a26457550b6b7c0559d08e46d81c42508","name":"ART_single_women.svg","type":"image/svg+xml","lastModified":1635764866517.692,"size":1732}] 2e:{"title":"# 619 Avatar_v10","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":1782,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1797,"value":"viewof deviceSelection = Inputs.radio([\"mobile\", \"desktop\"], {\n label: \"Responsiveness testing\",\n value: \"desktop\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"viewof _languageSelector = Inputs.radio(Object.keys(locale), {\n label: \"Language\",\n value: \"en\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1771,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2342,"value":"### Female avatar","pinned":false,"hidden":false,"mode":"md"},{"id":1484,"value":"avatar = html`

\n \n ${viewof customSelector}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1636,"value":"customSelector","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"avatarPersonalSituation = customSelector.artWho","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1934,"value":"viewof ageFemale = Inputs.range([0, 100], { step: 1, value: 35 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":336,"value":"// Updating avatar selection icon and text\nupdateSelection = {\n const mySelImg = d3.select(\".art-selection-toggler-img\");\n const mySelText = d3.select(\".art-selection-toggler-text small\");\n const myTogglerInput = d3.select(\"#menu-toggler\");\n\n // Pick the right image\n if (avatarPersonalSituation === \"female_couples\") {\n mySelImg.attr(\"src\", await FileAttachment(\"ART_female_couple.svg\").url());\n mySelText.text(locale[_languageSelector].femaleCouple);\n } else if (avatarPersonalSituation === \"single_women\") {\n mySelImg.attr(\"src\", await FileAttachment(\"ART_single_women.svg\").url());\n mySelText.text(locale[_languageSelector].singleWomen);\n } else if (avatarPersonalSituation === \"hetero_couples\") {\n mySelImg.attr(\"src\", await FileAttachment(\"ART_hetero_couple.svg\").url());\n mySelText.text(locale[_languageSelector].heterosexualCouple);\n }\n\n const mySelAgeText = d3.select(\".selected-age-value\");\n mySelAgeText.text(customSelector.age);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2489,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2350,"value":"### Female partner: male age - just for heterosexual couples - ","pinned":false,"hidden":false,"mode":"md"},{"id":1950,"value":"viewof ageMale = Inputs.range([0, 100], { step: 1, value: defaultAgeValue })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1952,"value":"partnerSelectorBinded = html`\n${\n _isMobile\n ? Inputs.bind(\n Inputs.range([0, 100], {\n step: 1\n }),\n viewof ageMale\n )\n : Inputs.bind(\n Inputs.number([0, 100], {\n step: 1\n }),\n viewof ageMale\n )\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1974,"value":"partnerSelectorBindedMirror01 = html`\n${\n _isMobile\n ? Inputs.bind(\n Inputs.range([0, 100], {\n value: defaultAgeValue,\n step: 1\n }),\n viewof ageMale\n )\n : Inputs.bind(\n Inputs.number([0, 100], {\n value: defaultAgeValue,\n step: 1\n }),\n viewof ageMale\n )\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1754,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2542,"value":"### Useful functions","pinned":false,"hidden":false,"mode":"md"},{"id":1380,"value":"function form(form) {\n const container = html`

${form}`;\n // Returning to previous state when an option is clicked\n const artWhoInputs = form.getElementsByClassName(\"artWho\");\n for(let i = 0; i < artWhoInputs.length; i++) {\n artWhoInputs[i].onclick = function () {\n document.querySelector('#menu-toggler').checked = false \n }\n }\n form.addEventListener(\"submit\", (event) => event.preventDefault());\n form.addEventListener(\"change\", function () {\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n form.addEventListener(\"input\", () => (container.value = formValue(form)));\n container.value = formValue(form);\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"scaleItemsRotation = d3\n .scaleLinear()\n .domain([0, nItems])\n .range([initialAngle, finalAngle])","pinned":true,"hidden":false,"mode":"ojs"},{"id":328,"value":"nItems = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":2563,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2321,"value":"### Settings","pinned":false,"hidden":false,"mode":"md"},{"id":668,"value":"defaultAgeValue = 35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1302,"value":"marginLeftSidebar = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"sidebarWidth = 160","pinned":false,"hidden":false,"mode":"ojs"},{"id":1272,"value":"sidebarHeight = 160","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"viewof wheelDiameter = Inputs.range([0, 200], {\n label: \"Wheel diameter\",\n value: 130,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"viewof initialAngle = Inputs.range([0, 360], {\n label: \"initial Angle\",\n value: _isAvatarFixed ? 247 : 125\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"viewof finalAngle = Inputs.range([0, 360], {\n label: \"final Angle\",\n value: _isAvatarFixed ? 360 : 230\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"viewof inputWidth = Inputs.range([0, 100], {\n label: \"Input width\",\n value: 55,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"viewof itemWidth = Inputs.range([0, 80], {\n label: \"Item width\",\n value: 55,\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"//viewof itemHeight = Inputs.range([0, 80], { label: \"iten Height\", value: 50 })\nviewof itemHeight = viewof itemWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":1431,"value":"transitionSpeed = 0.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":1436,"value":"transitionSpeed2 = 0.2","pinned":false,"hidden":false,"mode":"ojs"},{"id":2034,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2534,"value":"### Styles","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"swatches([colorPrimary, colorSecondary, colorLight])","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"colorHiglight = colors.main.yellow","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"colorHiglightTransp = colors.main.yellow","pinned":false,"hidden":false,"mode":"ojs"},{"id":946,"value":"colorGrey = colors.main.yellow","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"//viewof colorBckg = colorPicker(\" rgb(237, 237, 237)\")\n//colorBckg = \"#f5f5f5\"\ncolorBckg = \"white\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"colorPrimary = colors.project.medicamentalia.primary","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"colorSecondary = colors.project.medicamentalia.secondary","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"colorLight = colors.project.medicamentalia.light","pinned":false,"hidden":false,"mode":"ojs"},{"id":2010,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2109,"value":"### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":1827,"value":"maxWidth = 1062","pinned":false,"hidden":false,"mode":"ojs"},{"id":1831,"value":"_myWidth = deviceSelection === \"desktop\" ? +Math.min(width, maxWidth) : 320 // 👈🏻 Just for testing","pinned":false,"hidden":false,"mode":"ojs"},{"id":1829,"value":"mediaQueryLimit = 500 // 200 avatar width + 320 lateral panel + extra space to avoid overlapping","pinned":false,"hidden":false,"mode":"ojs"},{"id":1798,"value":"_isMobile = _myWidth < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":1823,"value":"_isAvatarFixed = _myWidth < 650","pinned":false,"hidden":false,"mode":"ojs"},{"id":2105,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":786,"value":"### Languages","pinned":false,"hidden":false,"mode":"md"},{"id":790,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2014,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":555,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"// https://observablehq.com/@mbostock/form-input\nimport { formValue } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"import { colors, colorNeutral, swatches } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"import { colorPicker } from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}

${\n locale[_languageSelector].youAre\n }