31:T55b,viewof newOptions = { const opts = { transition: { label: "Transition duration", input: { type: "range", min: 0, max: 500, step: 5, value: 500 }, output: (v) => `${v} ms` }, offset: { label: "Top offset", input: { type: "range", min: 0, max: 300, step: 10, value: 150 }, output: (v) => `${v} px` }, ease: { label: "Transition timing", input: DOM.select( ["ease", "ease-in-out", "ease-in", "ease-out", "linear"], { value: "ease" } ), output: () => "" } }; const value = {}; const view = html`

${Object.entries( opts ).map(([k, { label, input, output }]) => { const i = input instanceof Element ? input : DOM.element("input", { id: DOM.uid().id, ...input }), o = html``; (i.oninput = () => { o.value = output(i.value); })(); Object.defineProperty(value, k, { get: () => (i.valueAsNumber !== undefined ? i.valueAsNumber : i.value), enumerable: true }); return html`

${label}:

${i} ${o}`; })}`; return (view.value = value), view; }32:[] 2f:{"title":"#619 MAIN: Access to ART dataviz_v04 - sticky avatar","cells":[{"id":0,"value":"# #619 MAIN: Access to ART dataviz_v04 - sticky avatar\n\n. \n\nFinal notebook, importing all the pieces from organized together from the notebook [#619 PIECES: All notebooks together - ART dataviz_v04](https://observablehq.com/@civio/619-art-access-v04).\n\n\n**Article published in Civio (02/11/21):**\n- 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/).\n- 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/).\n \n**References**: \n- [Sticky Positioning](https://observablehq.com/@mootari/sticky-positioning) by [Fabian Iwand](https://observablehq.com/@mootari) 🙌🏻.","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"viewof languageSelectorDataviz = Inputs.radio(Object.keys(localeCountries), {\n label: \"Language\",\n value: \"en\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"viewof deviceSelection = Inputs.radio([\"mobile\", \"desktop\"], {\n label: \"Responsiveness testing\",\n value: \"desktop\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"chartStickyDataviz = {\n let container = \"\";\n\n // Mobile\n if (isAvatarFixed) {\n container = html`

${chart}

`;\n // d3.select(\".sidebar\").style(\"position\", \"static\"); // Not working\n\n // Desktop\n } else {\n const sidebar = avatar;\n container = html`

${chart}${avatar}

`;\n const unstick = makeSticky(container, sidebar, newOptions);\n invalidation.then(unstick);\n }\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"### Settings","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":148,"value":"### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"maxWidth = 1062","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"mediaQueryLimit = 500 // 200 avatar width + 320 lateral panel + extra space to avoid overlapping","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"myWidth = deviceSelection === \"desktop\" ? +Math.min(width, maxWidth) : 300 // 👈🏻 Just for testing","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"isMobile = myWidth < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"isAvatarFixed = myWidth < 650","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"updateFunction = updateSelection","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"stylesStickyDataviz = chartStyle","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"import { makeSticky } with { newOptions as options } from \"@mootari/sticky-positioning\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"import { chart, avatar, updateSelection, chartStyle, localeCountries } with {\n languageSelectorDataviz as languageSelector,\n myWidth as _myWidth,\n isMobile as _isMobile,\n isAvatarFixed as _isAvatarFixed\n} from \"@civio/619-art-access-v04\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}