30:T518,# #649 ART Reproductive tourism map - Spain . Map showing the origin of those who came to Spain in 2019 for assisted reproduction treatments. Data source: [Registro Nacional de Actividad, 2019. Registro SEF](https://www.registrosef.com/public/docs/sef2019_IAFIVm.pdf). **Article published on Civio (10/11/21):** - English version: [Spain, Czechia, Denmark and Belgium are the meccas of reproductive tourism](https://civio.es/medicamentalia/2021/11/10/reproductive-tourism/). - Spanish version: [España, República Checa, Dinamarca y Bélgica, 'mecas' del turismo reproductivo](https://civio.es/medicamentalia/2021/11/02/reproduccion-asistida-en-Europa/). This article is the **second** one of a series on **assisted reproductive techniques** that can be found [here](https://civio.es/tag/reproduccion-asistida/). **References**: - [SVG World map](https://observablehq.com/@vpascual/first-attempt-of-drawing-a-svg-world-map-with-orthographic-p) by [Victor Pascual](https://observablehq.com/@vpascual) - [Give or Take](https://observablehq.com/@luciyer/give-or-take) by [Luc Iyer](https://observablehq.com/@luciyer) - [30 Day Map Challenge 2021 (2 ~ Lines)](https://observablehq.com/@irenedelatorre/30-day-map-challenge-2021-2-lines) by [Irene de la Torre](https://observablehq.com/@irenedelatorre)31:T36e6,function createMap() { // Create SVG const svg = d3 .create("svg") .attr("viewBox", [0, 0, mapWidth, height]) .attr("width", mapWidth) .style("display", "block") .style("margin", "0 auto") .style("margin-bottom", "0.1rem"); // WORLD MAP // DEFS elements: const defs = svg.append("defs"); // Map outline as sphere defs.append("path").attr("id", "outline").attr("d", path(outline)); defs .append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", new URL("#outline", location)); // Hatch const hatchStripes = defs .append("pattern") .attr("width", patternSize) .attr("height", patternSize) .attr("patternTransform", `rotate(${patternAngle})`) .attr("patternUnits", "userSpaceOnUse") .attr("id", "hatchStripes"); hatchStripes .append("line") .attr("x1", "0") .attr("x2", "0") .attr("y1", "0") .attr("y2", patternSize) .style("stroke", colorNeutral(50)) .style("stroke-width", patternWidth); // SVG Text filter for improving readibility // https://stackoverflow.com/questions/35075693/d3-add-filter-as-background-to-svg-element const textFilter = defs .append("filter") .attr("id", "textBackground") .attr("x", 0) .attr("y", 0) .attr("width", 1) .attr("height", 1); textFilter .append("feFlood") .attr("flood-color", colorLighGrey) .attr("result", "txtBackground"); const filterMerge = textFilter.append("feMerge"); filterMerge.append("feMergeNode").attr("in", "txtBackground"); filterMerge.append("feMergeNode").attr("in", "SourceGraphic"); // Testing arrows // Reference: https://observablehq.com/@irenedelatorre/30-day-map-challenge-2021-2-lines defs .append("marker") // This section adds in the arrows .attr("id", "arrow") .style("fill", colorCivioBlue) .style("stroke", colorCivioBlue) .style("stroke-width", 0) .attr("viewBox", "0 -5 10 10") .attr("refX", 10) .attr("refY", -1.5) .attr("markerWidth", 1) .attr("markerHeight", 1) .attr("orient", "auto-start-reverse") .append("path") .attr("d", "M0,-5L10,0L0,5"); // Another way // http://w3.unpocodetodo.info/svg/marker.php // http://bl.ocks.org/KoGor/8163022 defs .append("marker") // This section adds in the arrows .attr("id", "arrow2") .attr("viewBox", "0 0 4 4") .attr("refX", 0) .attr("refY", 2) .attr("markerWidth", 1) .attr("markerHeight", 1) .attr("orient", "auto-start-reverse") .append("polygon") .style("fill", colorCivioBlue) //.style("fill-opacity", arcsOpacity) .style("fill-opacity", 0) .attr("points", "0,0 1.8,2 0,4"); //// // Gradient const linearGradient = svg .append("linearGradient") .attr("gradientUnits", "objectBoundingBox") // So it's relative to each element .attr("id", "linear-gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0"); linearGradient .append("stop") .attr("offset", "0%") .attr("stop-color", colorTarget); linearGradient .append("stop") .attr("offset", "100%") .attr("stop-color", colorNoAccessART); svg .append("linearGradient") .attr("id", "linear-gradient-inverse") .attr("xlink:href", "#linear-gradient") .attr("gradientTransform", "rotate(90)"); svg .append("linearGradient") .attr("id", "linear-gradient-rotated") .attr("xlink:href", "#linear-gradient") .attr("gradientTransform", "rotate(-20)"); // Morocco gradient - Sahara special case! const moroccoGradient = svg .append("linearGradient") .attr("gradientUnits", "objectBoundingBox") // So it's relative to each element .attr("id", "gradient-Morocco") .attr("gradientTransform", "rotate(90)") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0"); moroccoGradient .append("stop") .attr("offset", "0%") .attr("stop-color", colorNoAccessART); moroccoGradient .append("stop") .attr("offset", "60%") .attr("stop-color", colorNoAccessART); moroccoGradient .append("stop") .attr("offset", "60%") .attr("stop-color", colorGrey); moroccoGradient .append("stop") .attr("offset", "100%") .attr("stop-color", colorGrey); ///////// // Map outline - fill const g = svg.append("g").attr("class", "map"); const baseMap = g.append("g").attr("class", "base-map"); baseMap.attr("clip-path", `url(${new URL("#clip", location)})`); baseMap .append("use") .attr("xlink:href", new URL("#outline", location)) .attr("fill", colorOutlineFill); //.attr("fill", "url(#hatchStripes)"); // Map graticule baseMap .append("path") .attr("d", path(graticule)) .attr("stroke", colorGraticuleStroke) .attr("fill", "none"); // I want control over the countries, so: const countriesShapes = baseMap .append("g") .attr("id", "countries") .selectAll("path") .data(countries) .enter() .append("path") .attr("d", path) .attr("stroke-width", "0.5") .attr("stroke", colorLandStroke) .attr("fill", colorGrey) .attr("fill", function (d) { const countryName = d.properties.name; const countriesNamesArray = data.map((d) => checkName(d.country_name)); const isIncludedOnDataset = countriesNamesArray.includes(countryName); [(d["artData"] = isIncludedOnDataset)]; return isIncludedOnDataset ? colorNoAccessART : colorGrey; //return isIncludedOnDataset ? colorNoAccessART : "url(#hatchStripes)"; }); // Spanish shape countriesShapes .filter((d) => d.properties.name === "Spain") .attr("fill", colorLandFill); // Morocco shape countriesShapes .filter((d) => d.properties.name === "Morocco") .attr("fill", "yellow") .attr("fill", `url(#gradient-Morocco)`); // Map outline - stroke (here to be on top) baseMap .append("use") .attr("xlink:href", new URL("#outline", location)) .attr("fill", "none") .attr("stroke", colorOutlineStroke) .attr("stroke-width", "5px"); ///////// // COUNTRIES FLOWS const dataFlows = g.append("g").attr("class", "data-flows"); // https://observablehq.com/@binarybias/germany-net-cement-imports-and-exports-2019 //let p = d3.geoPath().projection(projection); let p = path; let centroids = []; let arcs = []; let arcs2 = []; // Calculating all countries centroids //https://github.com/d3/d3-geo#path_centroid centroids = countries.map(function (feature) { return { centroidPoint: d3.geoPath(projection).centroid(feature), properties: feature.properties }; }); // Center of all flows const spain = centroids.filter((d) => d.properties.name === "Spain")[0]; // Flows as LINES if (showLines) { // Generating and arc for each country on the dataset centroids.forEach((point) => { const pointName = point.properties.name; const countriesNamesArray = data.map((d) => checkName(d.country_name)); const isIncludedOnDataset = countriesNamesArray.includes(pointName); //console.log(isIncludedOnDataset, pointName); //Jush paint an arc if the country is on the dataset if (isIncludedOnDataset) { // Automatic way - calculating centroids /*const source = projection.invert([ spain.centroidPoint[0], spain.centroidPoint[1] ]); const target = projection.invert([ point.centroidPoint[0], point.centroidPoint[1] ]);*/ // Manual way const sourceX = data.find( (d) => checkName(d.country_name) === pointName ).longitude; const sourceY = data.find( (d) => checkName(d.country_name) === pointName ).latitude; const source = [sourceX, sourceY]; const target = SpainLocation; arcs.push(drawLineFeature(source, target, point.properties)); } }); } // Flows as CURVES if (showCurves) { centroids.forEach((point) => { const pointName = point.properties.name; const countriesNamesArray = data.map((d) => checkName(d.country_name)); const isIncludedOnDataset = countriesNamesArray.includes(pointName); //Jush paint an arc if the country is on the dataset if (isIncludedOnDataset) { // Automatic way - calculating centroids /*const target = projection.invert([ point.centroidPoint[0], point.centroidPoint[1] ]);*/ // Manual way const sourceX = data.find( (d) => checkName(d.country_name) === pointName ).longitude; const sourceY = data.find( (d) => checkName(d.country_name) === pointName ).latitude; const source = [sourceX, sourceY]; const target = SpainLocation; const properties = data.find( (d) => checkName(d.country_name) === pointName ); arcs2.push( create_curves(projection(source), projection(target), properties) ); } }); } // OPTION 1 if (showLines) { // Arcs dataFlows .append("g") .attr("class", "arcs") .selectAll("path") .data(arcs) .join("path") .attr("class", "arc") .attr("data-id", (d) => d.properties.name) .attr("d", (d) => p(d)) .style("fill", "none") .style("stroke-opacity", arcsOpacity) .style("mix-blend-mode", "multiply") .style("stroke", colorArcs) .style("stroke-width", function (d) { const myCountryName = d.properties.name; const myCountyOnDataset = data.find( (d) => d.country_name === myCountryName ); const myPercent = myCountyOnDataset ? myCountyOnDataset.percent_2019 : 0; return thickScale(myPercent); }); } // OPTION 2 if (showCurves) { dataFlows .append("g") .attr("class", "curves") .style("opacity", 1) .selectAll("path") .data(arcs2) .join("path") .attr("data-id", (d) => d.properties.country_code) .attr("marker-end", (d) => `url(#arrow2)`) // Adding the arrow .style("stroke", (d) => `url(#linear-gradient)`) .style("stroke", (d) => d.properties.country_code === "PT" || d.properties.country_code === "MA" ? `url(#linear-gradient-inverse)` : d.properties.country_code === "FR" ? `url(#linear-gradient-rotated)` : `url(#linear-gradient)` ) //.style("stroke", "url(#linear-gradient-France)") .style("stroke-opacity", arcsOpacity) //.style("mix-blend-mode", "multiply") .style("stroke-width", function (d) { const myCountryName = d.properties_name; const myPercent = d.properties.percent_2019; return thickScale(myPercent); }) .style("fill", "none") .attr("d", (d) => d.path) // Prepare animation of flows .each(function (d, i) { const myLengh = d3.select(this).node().getTotalLength(); const delayLine = 300; // We need to add units 'px' to dasharray and dashsoffset // to work propperly on Safari/Firefox // https://github.com/web-animations/web-animations-js/issues/98 d3.select(this) .style("stroke-dasharray", `${+myLengh}px`) .style("stroke-dashoffset", `${+myLengh}px`); //.transition("unbrekeable") //.duration(2000) //.delay(delayLine) //.ease(d3.easeCubicOut); //.style("stroke-dashoffset", "0px"); }); } /////// // Texts const textGroup = dataFlows.append("g").attr("class", "texts"); const textOrigin = textGroup .selectAll("g") .data(data) .join("g") .style("font-size", isMobile ? "0.62rem" : "0.7rem") .style("fill", colorCivioBlue) .style("text-anchor", function (d) { const isLeftSided = d.country_name === "United Kingdom" || d.country_name === "Morocco" || d.country_name === "Portugal"; d["leftSided"] = isLeftSided; return isLeftSided ? "end" : "start"; }) /*.attr( "transform", (d) => `translate(${projection([+d.longitude, +d.latitude])})` );*/ .attr("transform", function (d) { let translation = `translate(${projection([+d.longitude, +d.latitude])})`; if (d.country_name === "Germany" && isMobile) { translation = `translate(${projection([ +d.longitude - 6, +d.latitude + 5 ])})`; } else if (d.country_name === "Italy" && isMobile) { translation = `translate(${projection([ +d.longitude - 10, +d.latitude - 6 ])})`; } return translation; }); const horizontalMargin = isMobile ? 15 : 20; const verticalSeparation = isMobile ? 13 : 14; textOrigin .append("text") .attr("x", (d) => (d.leftSided ? -horizontalMargin : horizontalMargin)) .attr("y", 0) .style("font-weight", 600) .style("filter", "url(#textBackground)") .text((d) => locale[languageSelector].countries[d.country_name]); textOrigin .append("text") .style("font-weight", 600) .style("filter", "url(#textBackground)") .attr("x", (d) => (d.leftSided ? -horizontalMargin : horizontalMargin)) .attr("y", verticalSeparation) .text( (d) => `${d["ciclos frescos + descongelados_2019"]} ${locale[languageSelector].cycles} (${d.percent_2019} %)` ); /////// // Data notes const legend = g .append("g") .attr("class", "legend") .style("font-size", "0.6rem") .style("fill", colorNeutral(600)); const marginLeft = 25; const marginBottom = 30; legend .append("text") .attr("x", marginLeft) .attr("y", height - marginBottom) .text((d) => locale[languageSelector].others); legend .append("text") .attr("x", marginLeft) .attr("y", height - marginBottom + verticalSeparation) .text((d) => locale[languageSelector].notAvailable); return svg.node(); }32:T1b7c,observbleDefaultStyles = html` `33:T67e,locale = ({ en: { title: "Origin of those who came to Spain in 2019 for assisted reproduction treatments", cycles: "cycles", source: "Source: Registro Nacional de Actividad, 2019. Registro SEF", note: "Total cycles include fresh and frozen cycles.", note2: "Only countries accounting for more than 1% of the total are shown.", others: "Others: 3612 cycles (19.6%)", notAvailable: "Origin not available: 1391 cyces (7.5%)", countries: { France: "France", Italy: "Italy", "United Kingdom": "United Kingdom", Germany: "Germany", Portugal: "Portugal", Morocco: "Morocco", "Republic of Equatorial Guinea": "Rep. of Ecuatorial Guinea" } }, es: { title: "Origen de quienes llegaron a España en 2019 para tratamientos de reproducción asistida", cycles: "ciclos", source: "Fuente: Registro Nacional de Actividad, 2019. Registro SEF", note: "El total de ciclos incluye ciclos frescos y congelados.", note2: "Se muestran solo aquellos países que suponen más del 1% sobre el total.", others: "Otros: 3612 ciclos (19.6%)", notAvailable: "Origen no disponible: 1391 ciclos (7.5%)", countries: { France: "Francia", Italy: "Italia", "United Kingdom": "Reino Unido", Germany: "Alemania", Portugal: "Portugal", Morocco: "Marruecos", "Republic of Equatorial Guinea": "Rep. de Guinea Ecuatorial" } } })34:T16a0,projections = [ { name: "Airy’s minimum error", value: d3.geoAiry }, { name: "Aitoff", value: d3.geoAitoff }, { name: "American polyconic", value: d3.geoPolyconic }, { name: "armadillo", value: d3.geoArmadillo }, { name: "August", value: d3.geoAugust }, { name: "azimuthal equal-area", value: d3.geoAzimuthalEqualArea }, { name: "azimuthal equidistant", value: d3.geoAzimuthalEquidistant }, { name: "Baker dinomic", value: d3.geoBaker }, { name: "Berghaus’ star", value: d3.geoBerghaus }, { name: "Bertin’s 1953", value: d3.geoBertin1953 }, { name: "Boggs’ eumorphic", value: d3.geoBoggs }, { name: "Boggs’ eumorphic (interrupted)", value: d3.geoInterruptedBoggs }, { name: "Bonne", value: d3.geoBonne }, { name: "Bottomley", value: d3.geoBottomley }, { name: "Bromley", value: d3.geoBromley }, { name: "Butterfly (gnomonic)", value: d3.geoPolyhedralButterfly }, { name: "Butterfly (Collignon)", value: d3.geoPolyhedralCollignon }, { name: "Butterfly (Waterman)", value: d3.geoPolyhedralWaterman }, { name: "Collignon", value: d3.geoCollignon }, // {name: "conic conformal", value: d3.geoConicConformal}, // Not suitable for world maps. { name: "conic equal-area", value: d3.geoConicEqualArea }, { name: "conic equidistant", value: d3.geoConicEquidistant }, { name: "Craig retroazimuthal", value: d3.geoCraig }, { name: "Craster parabolic", value: d3.geoCraster }, { name: "cylindrical equal-area", value: d3.geoCylindricalEqualArea }, { name: "cylindrical stereographic", value: d3.geoCylindricalStereographic }, { name: "Eckert I", value: d3.geoEckert1 }, { name: "Eckert II", value: d3.geoEckert2 }, { name: "Eckert III", value: d3.geoEckert3 }, { name: "Eckert IV", value: d3.geoEckert4 }, { name: "Eckert V", value: d3.geoEckert5 }, { name: "Eckert VI", value: d3.geoEckert6 }, { name: "Eisenlohr conformal", value: d3.geoEisenlohr }, { name: "Equal Earth", value: d3.geoEqualEarth }, { name: "Equirectangular (plate carrée)", value: d3.geoEquirectangular }, { name: "Fahey pseudocylindrical", value: d3.geoFahey }, { name: "flat-polar parabolic", value: d3.geoMtFlatPolarParabolic }, { name: "flat-polar quartic", value: d3.geoMtFlatPolarQuartic }, { name: "flat-polar sinusoidal", value: d3.geoMtFlatPolarSinusoidal }, { name: "Foucaut’s stereographic equivalent", value: d3.geoFoucaut }, { name: "Foucaut’s sinusoidal", value: d3.geoFoucautSinusoidal }, { name: "general perspective", value: d3.geoSatellite }, { name: "Gilbert’s two-world", value: d3.geoGilbert }, { name: "Gingery", value: d3.geoGingery }, { name: "Ginzburg V", value: d3.geoGinzburg5 }, { name: "Ginzburg VI", value: d3.geoGinzburg6 }, { name: "Ginzburg VIII", value: d3.geoGinzburg8 }, { name: "Ginzburg IX", value: d3.geoGinzburg9 }, { name: "Goode’s homolosine", value: d3.geoHomolosine }, { name: "Goode’s homolosine (interrupted)", value: d3.geoInterruptedHomolosine }, { name: "gnomonic", value: d3.geoGnomonic }, { name: "Gringorten square", value: d3.geoGringorten }, { name: "Gringorten quincuncial", value: d3.geoGringortenQuincuncial }, { name: "Guyou square", value: d3.geoGuyou }, { name: "Hammer", value: d3.geoHammer }, { name: "Hammer retroazimuthal", value: d3.geoHammerRetroazimuthal }, { name: "HEALPix", value: d3.geoHealpix }, { name: "Hill eucyclic", value: d3.geoHill }, { name: "Hufnagel pseudocylindrical", value: d3.geoHufnagel }, { name: "Kavrayskiy VII", value: d3.geoKavrayskiy7 }, { name: "Lagrange conformal", value: d3.geoLagrange }, { name: "Larrivée", value: d3.geoLarrivee }, { name: "Laskowski tri-optimal", value: d3.geoLaskowski }, // {name: "Littrow retroazimuthal", value: d3.geoLittrow}, // Not suitable for world maps. { name: "Loximuthal", value: d3.geoLoximuthal }, { name: "Mercator", value: d3.geoMercator }, { name: "Miller cylindrical", value: d3.geoMiller }, { name: "Mollweide", value: d3.geoMollweide }, { name: "Mollweide (Goode’s interrupted)", value: d3.geoInterruptedMollweide }, { name: "Mollweide (interrupted hemispheres)", value: d3.geoInterruptedMollweideHemispheres }, { name: "Natural Earth", value: d3.geoNaturalEarth1 }, { name: "Natural Earth II", value: d3.geoNaturalEarth2 }, { name: "Nell–Hammer", value: d3.geoNellHammer }, { name: "Nicolosi globular", value: d3.geoNicolosi }, { name: "orthographic", value: d3.geoOrthographic }, { name: "Patterson cylindrical", value: d3.geoPatterson }, { name: "Peirce quincuncial", value: d3.geoPeirceQuincuncial }, { name: "rectangular polyconic", value: d3.geoRectangularPolyconic }, { name: "Robinson", value: d3.geoRobinson }, { name: "sinusoidal", value: d3.geoSinusoidal }, { name: "sinusoidal (interrupted)", value: d3.geoInterruptedSinusoidal }, { name: "sinu-Mollweide", value: d3.geoSinuMollweide }, { name: "sinu-Mollweide (interrupted)", value: d3.geoInterruptedSinuMollweide }, { name: "stereographic", value: d3.geoStereographic }, { name: "Times", value: d3.geoTimes }, { name: "Tobler hyperelliptical", value: d3.geoHyperelliptical }, { name: "transverse Mercator", value: d3.geoTransverseMercator }, { name: "Van der Grinten", value: d3.geoVanDerGrinten }, { name: "Van der Grinten II", value: d3.geoVanDerGrinten2 }, { name: "Van der Grinten III", value: d3.geoVanDerGrinten3 }, { name: "Van der Grinten IV", value: d3.geoVanDerGrinten4 }, { name: "Wagner IV", value: d3.geoWagner4 }, { name: "Wagner VI", value: d3.geoWagner6 }, { name: "Wagner VII", value: d3.geoWagner7 }, { name: "Werner", value: () => d3.geoBonne().parallel(90) }, { name: "Wiechel", value: d3.geoWiechel }, { name: "Winkel tripel", value: d3.geoWinkel3 } ]35:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1635960580577.515,"size":756420}] 2e:{"title":"#649 ART Reproductive tourism map - Spain","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":456,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1805,"value":"viewof deviceSelection = Inputs.radio([\"mobile\", \"desktop\"], {\n label: \"Responsiveness testing\",\n value: \"desktop\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"viewof languageSelector = Inputs.radio(Object.keys(locale), {\n label: \"Language\",\n value: \"en\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":862,"value":"viewof showLines = Inputs.toggle({ value: false, label: \"show flows as lines\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":864,"value":"viewof showCurves = Inputs.toggle({ label: \"show flows as arcs\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"viewof maxThick = Inputs.range([1, 60], {\n label: \"Max thickness\",\n step: 0.1,\n value: isMobile ? 20 : 30\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"viewof arcsOpacity = Inputs.range([0, 1], {\n value: 0.85,\n label: \"Arcs opacity\",\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1961,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":968,"value":"mapTitle = html`

${locale[languageSelector].title}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1743,"value":"map = animateFlows(createMap(), visibility)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1045,"value":"mapSource = html`

${locale[languageSelector].source}

${locale[languageSelector].note}

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1873,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":909,"value":"viewof translateX = Inputs.range([0, 1000], {\n value: isMobile ? 188 : 340,\n label: \"Translate horizontally\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"viewof translateY = Inputs.range([0, 360], {\n value: isMobile ? 250 : 310,\n label: \"Translate vertically\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1752,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1756,"value":"### Draw map","pinned":false,"hidden":false,"mode":"md"},{"id":301,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1203,"value":"### Map framing settings","pinned":false,"hidden":false,"mode":"md"},{"id":156,"value":"viewof projection = projectionInput({\n value:\n new URLSearchParams(location.search).get(\"projection\") || \"orthographic\",\n name: \"projection\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"viewof scaleFactor = Inputs.range([100, 1000], {\n label: \"Scale factor\",\n value: isMobile ? 410 : 660\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"viewof mapWidth = Inputs.range([minWidth, maxWidth], {\n value: isMobile ? minWidth : myWidth,\n label: \"Map width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"viewof height = Inputs.range([300, 1000], {\n value: isMobile ? 450 : 560,\n label: \"Map height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"viewof rotateHorizontally = Inputs.range([0, 360], {\n value: 353,\n label: \"Rotate horizontally\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"viewof rotateVertically = Inputs.range([0, 360], {\n value: 320,\n label: \"Rotate vertically\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"viewof colorArcs = Inputs.select(allColors, {\n value: \"#002A6D\",\n label: \"Arcs color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1209,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":383,"value":"### Map drawing","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"// https://observablehq.com/@vpascual/first-attempt-of-drawing-a-svg-world-map-with-orthographic-p\npath = d3.geoPath(\n projection\n .rotate([rotateHorizontally, rotateVertically])\n .scale([scaleFactor])\n //.center(SpainLocation)\n .center([0, 0])\n .translate([translateX, translateY])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"countries = land.features","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"countriesNames = countries.map((d) => ({\n country_id: d.id,\n country_name: d.properties.name\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"Inputs.table(countriesNames)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"//land = topojson.feature(world, world.objects.land)\nland = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"//borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"### Useful functions","pinned":false,"hidden":false,"mode":"md"},{"id":531,"value":"thickScale = d3\n .scaleLinear()\n .domain(d3.extent(data.map((d) => d.percent_2019)))\n .range([1, maxThick])","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"percentRange = d3.extent(data.map((d) => d.percent_2019))","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"// From https://observablehq.com/d/35c72fe0c8493cf9\nfunction checkName(d) {\n if (d === \"Republic of Equatorial Guinea\") {\n return \"Eq. Guinea\";\n }\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"function drawLineFeature(source, target, p) {\n return {\n type: \"Feature\",\n properties: p,\n geometry: { type: \"LineString\", coordinates: [source, target] }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"function create_curves(source, target, properties) {\n const myItemProperties = properties;\n\n // Each country\n const start = adjustPoint(properties[\"country_name\"], source[0], source[1]);\n const start_x = start[0];\n const start_y = start[1];\n\n // Spain\n const end_x = target[0];\n const end_y = target[1];\n\n const dx = end_x - start_x;\n const dy = end_y - start_y;\n const dr = Math.sqrt(dx * dx + dy * dy);\n\n // ARC command\n // https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n // A rx ry x-axis-rotation large-arc-flag sweep-flag x y\n // sweep-flag 0 / 1 -> it fleeps the path\n const path = `M${start_x},${start_y} A${dr}, ${dr} 0 0, 0 ${end_x}, ${end_y}`;\n\n return { path: path, properties: myItemProperties };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1672,"value":"function adjustPoint(name, point_x, point_y) {\n if (name === \"United Kingdom\") return [point_x, point_y + 20];\n if (name === \"France\") return [point_x + 10, point_y + 5];\n if (name === \"Italy\") return [point_x + 5, point_y + 5];\n if (name === \"Portugal\") return [point_x - 5, point_y];\n if (name === \"Morocco\") return [point_x - 10, point_y];\n else return [point_x, point_y];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2002,"value":"function getRotationAngleDeg(element) {\n const source = projection([element.longitude, element.latitude]);\n const target = projection(SpainLocation);\n\n // Each country\n const start_x = source[0];\n const start_y = source[1];\n // Spain\n const end_x = target[0];\n const end_y = target[1];\n\n const xDiff = Math.abs(end_x - start_x);\n const yDiff = Math.abs(end_y - start_y);\n\n const sinAngleRad = yDiff / xDiff;\n const angleRad = Math.atan(sinAngleRad);\n console.log(element.country_name, toDegrees(angleRad));\n\n return toDegrees(angleRad);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2001,"value":"function toDegrees(angle) {\n return angle * (180 / Math.PI);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1713,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1717,"value":"### Wait visibility animation","pinned":false,"hidden":false,"mode":"md"},{"id":1999,"value":"function animateFlows(element, visibility) {\n const t = \"2s\";\n const delay = \"2.2s\";\n\n const flowCurves = d3.select(element).selectAll(\".curves path\").nodes();\n flowCurves.map(function (d) {\n d.style.willChange = \"stroke-dashoffset\";\n d.style.transition = `stroke-dashoffset ${t} ease-in 0.3s`;\n });\n const markerEnd = d3.select(element).select(\"marker#arrow2 polygon\").node();\n markerEnd.style.willChange = \"fill-opacity\";\n markerEnd.style.transition = `fill-opacity 0.6s linear ${delay}`;\n\n // When visible...\n visibility().then(function (d) {\n // ... draw flow paths\n flowCurves.map(function (d) {\n d.style.strokeDashoffset = \"0px\";\n });\n // ... delay a bit and draw the marker end\n markerEnd.style.fillOpacity = arcsOpacity;\n });\n\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1789,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1786,"value":"### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":1970,"value":"minWidth = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":1797,"value":"maxWidth = 640","pinned":false,"hidden":false,"mode":"ojs"},{"id":1800,"value":"myWidth = deviceSelection === \"desktop\" ? +Math.min(width, maxWidth) : minWidth // 👈🏻 Just for testing","pinned":false,"hidden":false,"mode":"ojs"},{"id":1803,"value":"mediaQueryLimit = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":1801,"value":"isMobile = myWidth < mediaQueryLimit","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"### Styles and colors","pinned":false,"hidden":false,"mode":"md"},{"id":793,"value":"patternSize = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"patternWidth = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"patternAngle = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"allColors = [\n colorNoAccessART,\n colorLighGrey,\n colorGrey,\n colorCivioBlue,\n colorCivioYellow,\n colorPrimary,\n colorSecondary,\n colorLight\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1998,"value":"viewof colorTarget = Inputs.color({\n label: \"color target\",\n value: colorCivioBlue\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"colorOutlineStroke = colorGrey","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"//colorOutlineFill = colorLighGrey\ncolorOutlineFill = colorLighGrey","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"colorGraticuleStroke = colorNeutral(80)","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"colorLandFill = colorPrimary","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"colorLandStroke = colorLighGrey","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"colorPrimary = colors.project.medicamentalia.primary","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"colorSecondary = colors.project.medicamentalia.secondary","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"colorLight = colors.project.medicamentalia.light","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"colorCivioBlue = colors.main.blue","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"colorCivioYellow = colors.main.yellow","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"colorGrey = colorNeutral(100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"colorLighGrey = colorNeutral(20)","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"colorNoAccessART = \"#EF2E61\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"chartStyle = html`\n\n\n\n${observbleDefaultStyles}\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1930,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"### Data","pinned":false,"hidden":false,"mode":"md"},{"id":881,"value":"SpainLocation = [-3.91, 40.31]","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"// Adding date as parameter to avoid cache problems with any data update\ndateId = new Date().getTime()","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"URLdataset = `https://data.civio.es/medicamentalia/ART-tourism-ES/reproductiveTourism_2019.csv?q=${dateId}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"datasetRaw = await d3.csv(URLdataset, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"Note: After trying the centroids automation, I decided to go for a manual approach, as the locations didn't look perfect\nLocations from [World Map Coordinates](https://observablehq.com/@jashkenas/inputs)","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"Inputs.table(datasetRaw)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"percentMinim = 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"data = datasetRaw\n .filter((d) => d.country_code)\n .filter((d) => +d.percent_2019 >= percentMinim)","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":971,"value":"### Languages","pinned":false,"hidden":false,"mode":"md"},{"id":979,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":975,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":673,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"import { projectionInput } from \"@d3/projection-comparison\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"import { colors, colorNeutral } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2073,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2077,"value":"### Extra","pinned":false,"hidden":false,"mode":"md"},{"id":2081,"value":"I found this nice example later https://observablehq.com/@stuartathompson/a-graduated-stroke-on-a-curved-path-in-d3","pinned":false,"hidden":false,"mode":"md"}],"files":"$W35","stdlib":"1","titling":"auto"}