2f:T41a,# Large residential property holders in Spain (Prototype) . Prototype charts for the **3 main steps** of a scrollytelling piece about the main residential property holders in different regions of Spain. The final visualization was implememented with d3.js and Svelte.js, based on those prototypes. **Article published in Civio (21/06/23):** - [In Spanish] **Madrid** region: [Diez empresas concentran el 12% de los inmuebles alquilados en toda la Comunidad de Madrid](https://civio.es/2023/06/21/diez-empresas-concentran-el-12-percent-de-los-inmuebles-alquilados-en-la-comunidad-de-madrid/). - [In Spanish] **Cataluña** region: [CaixaBank es el segundo casero de Cataluña, solo por detrás de la Generalitat](https://civio.es/2023/06/21/caixabank-es-el-segundo-casero-de-catalunya-solo-por-detras-de-la-generalitat/). **References for the prototypes**: - The Pudding [d3-flexbox tutorial](https://pudding.cool/process/flexbox-layout/). - Our [notebook](https://observablehq.com/@civio/608-vuelos-oficiales-contexto) about official flights. 30:Ta07,step01 = { button01; const data = data01[0]; const percent = 100 - data.percent_grandesTenedores * 100; const gridItems = d3.range(25); // Grid of 5x5 buildings const gridSize = 60; const baseColor = "black"; const highlightColor = hightlightColor; const container = d3 .create("div") .attr("class", "step01") .style("padding", "30px"); // step container .append("h4") .attr("class", "title") .style("margin-bottom", "50px") .html("STEP 01 - parque inmuebles"); const textWaffle_up = container .append("div") .style("max-width", `${gridSize * 5}px`); textWaffle_up .append("p") .style("color", highlightColor) .style("margin-bottom", "-5px") .style("z-index", 2) .style("position", "relative") .style("font-size", "12px") .style("text-align", "right") .html( `${formatPercent( data.percent_grandesTenedores )}
${ data.inmuebles_grandesTenedores } inmuebles` ); const cellContainer = container .append("div") .style("max-width", `${gridSize * 5}px`) .style("max-height", `${gridSize * 5}px`) .style( "background", `linear-gradient(90deg, ${baseColor} 100%, ${highlightColor} 100%)` ) .style("display", "flex") .style("flex-wrap", "wrap") .style("justify-content", "flex-start") .style("align-content", "flex-start") .style("position", "relative"); cellContainer .transition() .duration(1200) .style( "background", `linear-gradient(90deg, ${baseColor} ${percent}%, ${highlightColor} ${percent}%)` ); const cell = cellContainer .selectAll("div") .data(gridItems) .join("div") .attr("class", "cell") .style("width", `${gridSize}px`) .style("height", `${gridSize}px`) .style("margin", "0px"); cell .append("img") .style("width", "100%") .style("margin", "auto") .style("vertical-align", "bottom") .attr("src", (d, i) => gridWhiteCitiesArray[i]); const textWaffle_down = container .append("div") .style("width", `${gridSize * 5}px`); textWaffle_down .append("p") .style("color", baseColor) .style("font-size", "12px") .html( `${data.inmuebles_total} inmuebles
100% ` ); return container.node(); }31:Tc74,step02 = { let data; if (orderByStep === "type") { // Sorting by TYPE (first, by value) data = data02 .sort((a, b) => d3.descending(a.value, b.value)) .sort((a, b) => { const categoryA = data02ByType.find((item) => item.category === a.type); const categoryB = data02ByType.find((item) => item.category === b.type); return d3.descending(categoryA.value, categoryB.value); }); } else if (orderByStep === "origin") { // Sorting by ORIGIN (first, by value) data = data02 .sort((a, b) => d3.descending(a.value, b.value)) .sort((a, b) => { const categoryA = data02ByOrigin.find( (item) => item.category === a.origin ); const categoryB = data02ByOrigin.find( (item) => item.category === b.origin ); return d3.descending(categoryA.value, categoryB.value); }); } else if (orderByStep === "value") { // Sorting just by VALUE data = data02.sort((a, b) => d3.descending(a.value, b.value)); } const container = d3 .create("div") .attr("class", "step02") .style("width", `${myWidth}px`) .style("padding", "30px"); const titleStep = container .append("h4") .attr("class", "title") .style("margin-bottom", "50px") .html("STEP 02 - radiografía tenedores"); const textWaffle = container .append("h5") .html( `${data.length} grandes tenedores` ); const cellContainer = container .append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("justify-content", "flex-start") .style("align-content", "flex-start"); const cell = cellContainer .selectAll("div") .data(data) .join("div") .attr("class", "cell") .style("position", "relative") .style("transform", (d) => angleType(d.type)) .style("width", `${nWidth}px`) .style("height", "auto") .style("margin", `${nGap}px`) .style("opacity", 0); cell .append("img") .style("width", "100%") .style("margin", "auto") .style("vertical-align", "bottom") .attr("src", (d) => forkType(d.type)); // Emojis const flags = cell .append("span") .attr("class", "flag") .style("position", "absolute") .style("font-size", `${nWidth * 0.8}px`) .style("top", `${nWidth * 1.3}px`) .style("left", "0px") .html((d, i) => (d.origin !== "España" ? flagEmoji(d.origin) : "")); cell .transition() .duration(duration) .delay((d, i) => i * delay) .style("opacity", 1); cell .style("cursor", "pointer") .on("mouseover", onMouseOver) .on("mouseout", onMouseOut) .on("mousemove", onMouseMove); if (scaleByValue && orderByStep === "value") { cell .transition("unbreak") .duration(800) .style("width", (d) => scaleArea(d.value) + "px") .style("opacity", (d, i) => (i > 9 ? 0.05 : 1)) .style("margin", `${nGap + 10}px`); flags .transition("unbreak") .duration(800) .style("font-size", (d) => scaleArea(d.value) + "px") .style("top", (d) => scaleArea(d.value) + "px"); } return container.node(); }32:Tc95,step03 = { const data = data03; const container = d3 .create("div") .attr("class", "step03") .style("max-width", `${myWidth}px`) .style("padding", "30px"); // step container .append("h4") .attr("class", "title") .html("STEP 03 - top 10") .style("margin-bottom", "60px"); const vizContainer = container .append("div") .style("display", "flex") .style("flex-direction", "column") .style("align-items", "flex-start") .style("gap", "1rem"); const company = vizContainer .selectAll("div") .data(data) .join("div") .style("display", "flex") .style("flex-direction", "column"); // Wrapper const companyHeader = company.append("div").style("display", "flex"); // Company fork (icon) const companyIcon = companyHeader .append("div") .style("width", "50px") .style("margin-right", "20px") .append("img") .style("width", (d) => scaleArea(d.value) + "px") .style("height", "auto") .style("transform", (d) => angleType(d.type)) .style("display", "inline-block") .style("margin", "auto") .style("vertical-align", "top") .style("float", "right") .style("opacity", 1) .attr("src", (d) => forkType(d.type)); // Company details (text) const companyDetails = companyHeader .append("div") .style("font-size", "12px") .style("margin-bottom", "40px"); companyDetails .append("h4") .style("font-size", "24px") .style("margin-bottom", 0) .html((d, i) => `${i + 1}.`); companyDetails .append("p") .style("margin-bottom", 0) .style("font-weight", 900) .style("font-size", "18px") .html((d, i) => `${d.name}`); companyDetails .append("p") .style("margin-bottom", 0) .html((d, i) => `Sede en ${d.origin} ${flagEmoji(d.origin)}`); companyDetails .append("p") .style("margin-bottom", 0) .html((d, i) => `${dataLocale[languageSelector][d.type]}`); companyDetails .append("p") .style("margin-bottom", 0) .html((d, i) => `Sector: xxx`); // Rents of each company (symbols) const rentsInfo = companyDetails.append("div"); const numberRents = rentsInfo .append("div") .style("margin-top", "10px") .style("margin-bottom", 0) .html( (d, i) => `${d.value} ${dataLocale[languageSelector].rents} ` ); const cellsContainer = rentsInfo .append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("justify-content", "flex-start") .style("align-content", "flex-start") .style("flex-wrap", "wrap") .style("max-width", "300px"); const cell = cellsContainer .selectAll("div") .data((d) => Array(d.n).fill()) .join("div") .style("width", "10px") .style("height", "10px") .style("margin", "1px"); cell .append("img") .style("width", "100%") .style("height", "auto") .style("display", "inline-block") .style("margin", "auto") .style("vertical-align", "top") .style("opacity", 1) .attr("src", await FileAttachment("sketches_casita-black.svg").url()); return container.node(); }33:T489, 34:T528,function onMouseOver(event, d, i) { let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; //console.log(event, d, i); d3.selectAll(".cell").transition().duration(300).style("opacity", 0.2); //d3.selectAll(".category").transition().duration(300).style("opacity", 0.4); d3.select(this).transition().duration(300).style("opacity", 1); //.style("stroke", `${borderColor}`) //.style("stroke-width", "2px"); tooltip.style("visibility", "visible").html( `

${d.name}

${d.value}

${dataLocale[languageSelector].rents}

Sede: ${d.origin} ${flagEmoji( d.origin )}

${ dataLocale[languageSelector][d.type] }

Sector: xxx

` ); }35:T514,gridWhiteCitiesArray = [ await FileAttachment("sketches-07@1.svg").url(), await FileAttachment("sketches-08@1.svg").url(), await FileAttachment("sketches-09@1.svg").url(), await FileAttachment("sketches-10@1.svg").url(), await FileAttachment("sketches-11@1.svg").url(), await FileAttachment("sketches-12@1.svg").url(), await FileAttachment("sketches-13@1.svg").url(), await FileAttachment("sketches-14@1.svg").url(), await FileAttachment("sketches-15@1.svg").url(), await FileAttachment("sketches-16@1.svg").url(), await FileAttachment("sketches-17@1.svg").url(), await FileAttachment("sketches-18@1.svg").url(), await FileAttachment("sketches-19@1.svg").url(), await FileAttachment("sketches-20@1.svg").url(), await FileAttachment("sketches-21@1.svg").url(), await FileAttachment("sketches-22@1.svg").url(), await FileAttachment("sketches-23@1.svg").url(), await FileAttachment("sketches-24@1.svg").url(), await FileAttachment("sketches-25@1.svg").url(), await FileAttachment("sketches-26@1.svg").url(), await FileAttachment("sketches-27@1.svg").url(), await FileAttachment("sketches-28@1.svg").url(), await FileAttachment("sketches-29@1.svg").url(), await FileAttachment("sketches-30@1.svg").url(), await FileAttachment("sketches-31@1.svg").url() ]36:T51c,gridNegativeWhiteCitiesArray = [ await FileAttachment("sketches-32@1.svg").url(), await FileAttachment("sketches-33@1.svg").url(), await FileAttachment("sketches-34@1.svg").url(), await FileAttachment("sketches-35@1.svg").url(), await FileAttachment("sketches-36@1.svg").url(), await FileAttachment("sketches-37@1.svg").url(), await FileAttachment("sketches-38@1.svg").url(), await FileAttachment("sketches-39@1.svg").url(), await FileAttachment("sketches-40@1.svg").url(), await FileAttachment("sketches-41@1.svg").url(), await FileAttachment("sketches-42@1.svg").url(), await FileAttachment("sketches-43@1.svg").url(), await FileAttachment("sketches-44@1.svg").url(), await FileAttachment("sketches-45@1.svg").url(), await FileAttachment("sketches-46@1.svg").url(), await FileAttachment("sketches-47@1.svg").url(), await FileAttachment("sketches-48@1.svg").url(), await FileAttachment("sketches-49@1.svg").url(), await FileAttachment("sketches-50@1.svg").url(), await FileAttachment("sketches-51@1.svg").url(), await FileAttachment("sketches-52@1.svg").url(), await FileAttachment("sketches-53@1.svg").url(), await FileAttachment("sketches-54@1.svg").url(), await FileAttachment("sketches-55@1.svg").url(), await FileAttachment("sketches-56@1.svg").url() ]37:T1341,localeCountries = ({ en: { AL: "Albania", AT: "Austria", AM: "Armenia", BY: "Belarus", BE: "Belgium", BA: "Bosnia and Herzegovina", BG: "Bulgaria", HR: "Croatia", CY: "Cyprus", CZ: "Czech Republic", DK: "Denmark", EE: "Estonia", FI: "Finland", FR: "France", GE: "Georgia", DE: "Germany", EL: "Greece", HU: "Hungary", IS: "Iceland", IE: "Ireland", IT: "Italy", KZ: "Kazakhstan", LV: "Latvia", LT: "Lithuania", LU: "Luxemburg", MK: "Macedonia", MT: "Malta", MD: "Moldova", ME: "Montenegro", NO: "Norway", NL: "The Netherlands", PL: "Poland", PT: "Portugal", RO: "Romania", RS: "Serbia", RU: "Russia", SK: "Slovakia", SI: "Slovenia", ES: "Spain", SE: "Sweden", CH: "Switzerland", TR: "Turkey", UA: "Ukraine", UK: "United Kingdom" }, es: { AL: "Albania", AT: "Austria", AM: "Armenia", BY: "Bielorrusia", BE: "Bélgica", BA: "Bosnia y Herzegovina", BG: "Bulgaria", HR: "Croacia", CY: "Chipre", CZ: "República Checa", DK: "Dinamarca", EE: "Estonia", FI: "Finlandia", FR: "Francia", GE: "Georgia", DE: "Alemania", EL: "Grecia", HU: "Hungría", IS: "Islandia", IE: "Irlanda", KZ: "Kazajistán", IT: "Italia", LV: "Letonia", LT: "Lituania", LU: "Luxemburgo", MK: "Macedonia", MT: "Malta", MD: "Moldavia", ME: "Montenegro", NO: "Noruega", NL: "Países Bajos", PL: "Polonia", PT: "Portugal", RO: "Rumanía", RS: "Serbia", RU: "Rusia", SK: "Eslovaquia", SI: "Eslovenia", ES: "España", SE: "Suecia", CH: "Suiza", TR: "Turquía", UA: "Ucrania", UK: "Reino Unido" }, it: { AT: "Austria", BE: "Belgio", BG: "Bulgaria", HR: "Croazia", CZ: "Cechia", DK: "Danimarca", EE: "Estonia", FI: "Finlandia", FR: "Francia", DE: "Germania", EL: "Grecia", HU: "Ungheria", IE: "Irlanda", IT: "Italia", LV: "Lettonia", LT: "Lituania", MT: "Malta", NL: "Paesi Bassi", PL: "Polonia", PT: "Portogallo", RO: "Romania", SK: "Slovacchia", SI: "Slovenia", ES: "Spagna", SE: "Svezia", UK: "Regno Unito", CY: "Cipro", AL: "Albania", AM: "Armenia", BY: "Bielorussia", BA: "Bosnia Erzegovina", GE: "Georgia", IS: "Islanda", KZ: "Kazakistan", LU: "Lussemburgo", MK: "Macedonia", MD: "Moldova", ME: "Montenegro", NO: "Norvegia", RS: "Serbia", RU: "Russia", CH: "Svizzera", TR: "Tacchino", UA: "Ucraina" }, fr: { LI: "Liechtenstein", XK: "Kosovo", AZ: "Azerbaïdjan", AL: "Albanie", AM: "Armènie", BY: "Biélorussie", BA: "Bosnie Herzégovine", IS: "Islande", KZ: "Kazakhstan", MD: "Moldavie", ME: "Monténégro", RU: "Russie", RS: "Serbie", MK: "Macédoine", GE: "Géorgie", UA: "Ukraine", AT: "L'Autriche", BE: "Belgique", BG: "Bulgarie", HR: "Croatie", CZ: "Tchéquie", DK: "Danemark", EE: "Estonie", FI: "Finlande", FR: "France", DE: "Allemagne", EL: "Grèce", HU: "Hongrie", IE: "Irlande", IT: "Italie", LV: "Lettonie", LT: "Lituanie", LU: "Luxembourg", MT: "Malte", NL: "Pays-Bas", PL: "Pologne", PT: "Portugal", RO: "Roumanie", SK: "Slovaquie", SI: "Slovénie", ES: "Espagne", SE: "Suède", UK: "Royaume-Uni", CY: "Chypre", NO: "Norvège", CH: "Suisse", TR: "Turquie" }, el: { UK: "Ηνωμένο Βασίλειο", SE: "Σουηδία", ES: "Ισπανία", SI: "Σλοβενία", SK: "Σλοβακία", RO: "Ρουμανία", PT: "Πορτογαλία", PL: "Πολωνία", NL: "Κάτω Χώρες", MT: "Μάλτα", LT: "Λιθουανία", LV: "Λετονία", IT: "Ιταλία", IE: "Ιρλανδία", HU: "Ουγγαρία", EL: "Ελλάδα", DE: "Γερμανία", FR: "Γαλλία", FI: "Φινλανδία", EE: "Εσθονία", DK: "Δανία", CZ: "Τσεχία", HR: "Κροατία", BG: "Βουλγαρία", BE: "Βέλγιο", AT: "Αυστρία", AL: "Αλβανία", AM: "Αρμενία", BY: "Λευκορωσία", BA: "Βοσνία και Ερζεγοβίνη", CY: "Κύπρος", GE: "Γεωργία", IS: "Ισλανδία", KZ: "Καζακστάν", LU: "Λουξεμβούργο", MK: "Βόρεια Μακεδονία", MD: "Μολδαβία", ME: "Μαυροβούνιο", NO: "Νορβηγία", RS: "Σερβία", RU: "Ρωσία", CH: "Ελβετία", TR: "Τουρκία", UA: "Ουκρανία" } })38:[{"id":"267b5dc852dee7c01da8f908d67043e6749eae703853732b57177caa3d7291cfd4b35e04dc1a7de1f0e5a6cfa90756a1976f481ed866ad5f3a4a5b0efb15ce3b","href":"https://static.observableusercontent.com/files/267b5dc852dee7c01da8f908d67043e6749eae703853732b57177caa3d7291cfd4b35e04dc1a7de1f0e5a6cfa90756a1976f481ed866ad5f3a4a5b0efb15ce3b","name":"sketches-38@1.svg","type":"image/svg+xml","lastModified":1686056933715.728,"size":2714},{"id":"3dbe19b5458e3fcc1cc856d324a22f0e4e85881af44d609713fc16e757fb9296ff461b5b505b8cb3e49674e3aa90d54ca113365366e435ddeae93d7786d6c78b","href":"https://static.observableusercontent.com/files/3dbe19b5458e3fcc1cc856d324a22f0e4e85881af44d609713fc16e757fb9296ff461b5b505b8cb3e49674e3aa90d54ca113365366e435ddeae93d7786d6c78b","name":"sketches-32@1.svg","type":"image/svg+xml","lastModified":1686056933837.389,"size":3193},{"id":"b3b952c99c53114305fa8b2f846024e0cee05c5a93bc949027c322adedad2941b129fdec35ccbbda510692441554e5b5602c760b42be0e9ed0232d3093137470","href":"https://static.observableusercontent.com/files/b3b952c99c53114305fa8b2f846024e0cee05c5a93bc949027c322adedad2941b129fdec35ccbbda510692441554e5b5602c760b42be0e9ed0232d3093137470","name":"sketches-56@1.svg","type":"image/svg+xml","lastModified":1686056933841.912,"size":4481},{"id":"3ddc4c7d30c43bc27c3656e00172e8130856d830e52545f86b8e6ecca5f91bcf39dbf471e2b51522b84362a68def45aacc5ef013b2141200df002fa0d35917cc","href":"https://static.observableusercontent.com/files/3ddc4c7d30c43bc27c3656e00172e8130856d830e52545f86b8e6ecca5f91bcf39dbf471e2b51522b84362a68def45aacc5ef013b2141200df002fa0d35917cc","name":"sketches-55@1.svg","type":"image/svg+xml","lastModified":1686056933940.047,"size":6256},{"id":"7f364a42491881ae8573bd9a3f5ce4268cf9e3241abf545e18ea510c225153dc3b8e73d085a774ddda715f96b29f5b8c4b0214a99b36692c13b04f4b1ce32a19","href":"https://static.observableusercontent.com/files/7f364a42491881ae8573bd9a3f5ce4268cf9e3241abf545e18ea510c225153dc3b8e73d085a774ddda715f96b29f5b8c4b0214a99b36692c13b04f4b1ce32a19","name":"sketches-33@1.svg","type":"image/svg+xml","lastModified":1686056933828.881,"size":5046},{"id":"148e966057b5472e1dbb2756d6a3c9e91d3b206f4ac296e2f4df8ceee5e32974d9abd2799cc156240e8c1b5c803523b0a6666983fcbc39f890d70f87951b9ad8","href":"https://static.observableusercontent.com/files/148e966057b5472e1dbb2756d6a3c9e91d3b206f4ac296e2f4df8ceee5e32974d9abd2799cc156240e8c1b5c803523b0a6666983fcbc39f890d70f87951b9ad8","name":"sketches-50@1.svg","type":"image/svg+xml","lastModified":1686056933643.186,"size":4880},{"id":"b9eb6c19cff7f4fee6a61ce95f5e38e75330c8934b0bafd203c121b532b51bb09da3aac3c1b7cfa172c2e01a9e7dfecebe6a830d35b13fe074a89bbb76e40886","href":"https://static.observableusercontent.com/files/b9eb6c19cff7f4fee6a61ce95f5e38e75330c8934b0bafd203c121b532b51bb09da3aac3c1b7cfa172c2e01a9e7dfecebe6a830d35b13fe074a89bbb76e40886","name":"sketches-51@1.svg","type":"image/svg+xml","lastModified":1686056933771.86,"size":3658},{"id":"c2369c5b5b4d3fe76d5f9a38780456aea15c68c0a7418a4e8bfc7adaeca02abfd837331df272fb0f39ed3a2f5889f53de01fd15987187eb43aa7e93329cdc2a7","href":"https://static.observableusercontent.com/files/c2369c5b5b4d3fe76d5f9a38780456aea15c68c0a7418a4e8bfc7adaeca02abfd837331df272fb0f39ed3a2f5889f53de01fd15987187eb43aa7e93329cdc2a7","name":"sketches-34@1.svg","type":"image/svg+xml","lastModified":1686056933814.384,"size":4255},{"id":"58c24db292c9c8beacd0ca900668cf45968c604e21345da39fdbec680dac1da5c9fcb9c8d0ef6d3a04515073cf092d71d145731fcb3c48781b56c796c391659d","href":"https://static.observableusercontent.com/files/58c24db292c9c8beacd0ca900668cf45968c604e21345da39fdbec680dac1da5c9fcb9c8d0ef6d3a04515073cf092d71d145731fcb3c48781b56c796c391659d","name":"sketches-43@1.svg","type":"image/svg+xml","lastModified":1686056933638.489,"size":5650},{"id":"f928fd982feb4480c2090a194cb5643e7b4d3cd07fb15bb822c7a4c9857ada8cb74a94c318bcbf350aa28a9c5d6875f4d21c5d22d9425ee2b92671abd8d163d2","href":"https://static.observableusercontent.com/files/f928fd982feb4480c2090a194cb5643e7b4d3cd07fb15bb822c7a4c9857ada8cb74a94c318bcbf350aa28a9c5d6875f4d21c5d22d9425ee2b92671abd8d163d2","name":"Screen Recording 2023-06-21 at 09.33.58.mov","type":"video/quicktime","lastModified":1687332953059.375,"size":26524480},{"id":"8a0d8aada214518792b2c122be607f2dd801cab26be371cb4c0fa7cb4655cd53e938a9f0f145e3db48b232bd42f31ab7017f8fcf2ab94995cea1e20c78c1cf31","href":"https://static.observableusercontent.com/files/8a0d8aada214518792b2c122be607f2dd801cab26be371cb4c0fa7cb4655cd53e938a9f0f145e3db48b232bd42f31ab7017f8fcf2ab94995cea1e20c78c1cf31","name":"sketches_casita-black.svg","type":"image/svg+xml","lastModified":1685984200555.36,"size":174},{"id":"3f9fb9739d0e4cd99e67c433c141b4a2aa5434876967fa040f68616337ec90d0e95a5766113ec254233bc0aeea1b08261a84d3574cf2972d0510c50068158ceb","href":"https://static.observableusercontent.com/files/3f9fb9739d0e4cd99e67c433c141b4a2aa5434876967fa040f68616337ec90d0e95a5766113ec254233bc0aeea1b08261a84d3574cf2972d0510c50068158ceb","name":"sketches_tenedor-stroke.svg","type":"image/svg+xml","lastModified":1685563153225.395,"size":1107},{"id":"adf5bb193198f0f950621b5d08289d112d68ff8797d77fdce4918b02c300aeaae1d8fd399b003b988c423e5706b8719576e42d41b97295cb6c98076ec5991004","href":"https://static.observableusercontent.com/files/adf5bb193198f0f950621b5d08289d112d68ff8797d77fdce4918b02c300aeaae1d8fd399b003b988c423e5706b8719576e42d41b97295cb6c98076ec5991004","name":"sketches_tenedor-black.svg","type":"image/svg+xml","lastModified":1685563153232.764,"size":1053},{"id":"f20f3715bff5041c38c641a65ec0a27ecf86f49df71b3e29697f4c559bff5166a42242fbf8ad62ad1e8a28e52197743423db356104633d80521a4232950ef272","href":"https://static.observableusercontent.com/files/f20f3715bff5041c38c641a65ec0a27ecf86f49df71b3e29697f4c559bff5166a42242fbf8ad62ad1e8a28e52197743423db356104633d80521a4232950ef272","name":"sketches_tenedor-grey.svg","type":"image/svg+xml","lastModified":1685563153233.879,"size":1068},{"id":"fc011eef39ad7be776448101c1ecadc39caa0c0def83d27f437be9340259c1a3544ec4dc14d70d667e2148847a36503a33e5ca9ed95805d450a171dc6121e5ae","href":"https://static.observableusercontent.com/files/fc011eef39ad7be776448101c1ecadc39caa0c0def83d27f437be9340259c1a3544ec4dc14d70d667e2148847a36503a33e5ca9ed95805d450a171dc6121e5ae","name":"sketches-07@1.svg","type":"image/svg+xml","lastModified":1686046183615.985,"size":3883},{"id":"481f7fcfbb40016bb40b264fa11f859d128bb4dbc9407f81d51ea1a8eef774146d3ae5588766907d6858317afdcced02ced7834d42ca48d814de5a9d497e4140","href":"https://static.observableusercontent.com/files/481f7fcfbb40016bb40b264fa11f859d128bb4dbc9407f81d51ea1a8eef774146d3ae5588766907d6858317afdcced02ced7834d42ca48d814de5a9d497e4140","name":"sketches-09@1.svg","type":"image/svg+xml","lastModified":1686046203951.63,"size":5609},{"id":"36515d2a576fa4f9ae8127854f5b06077119da76ae2f2d370bc7d370b38d7c6052adf74d347c41befa94067f873dff7932e1266793ecc3cf3e6133cb4d76d998","href":"https://static.observableusercontent.com/files/36515d2a576fa4f9ae8127854f5b06077119da76ae2f2d370bc7d370b38d7c6052adf74d347c41befa94067f873dff7932e1266793ecc3cf3e6133cb4d76d998","name":"sketches-08@1.svg","type":"image/svg+xml","lastModified":1686046203402.864,"size":6006},{"id":"edca73b49aaed3e441862e451875a45ae04c7a58a79b2a90c2594b50de7a9099183fc8a4de090b55f43b80a5691b58ff03ffb56b5260318370012a55b1335f57","href":"https://static.observableusercontent.com/files/edca73b49aaed3e441862e451875a45ae04c7a58a79b2a90c2594b50de7a9099183fc8a4de090b55f43b80a5691b58ff03ffb56b5260318370012a55b1335f57","name":"sketches-14@1.svg","type":"image/svg+xml","lastModified":1686046203999.847,"size":5241},{"id":"731a6b377d7eeac12ae0dc21835b7014ecfb938c1def575a63ee304634ca984c8aa58a58e9bc7e2b141241aa0164474dd722c5b5671fd170687395efcfb4be25","href":"https://static.observableusercontent.com/files/731a6b377d7eeac12ae0dc21835b7014ecfb938c1def575a63ee304634ca984c8aa58a58e9bc7e2b141241aa0164474dd722c5b5671fd170687395efcfb4be25","name":"sketches-27@1.svg","type":"image/svg+xml","lastModified":1686046204040.645,"size":4307},{"id":"38ff2b6a035928ef610fbede060bc1ad4bdbbb6f85de638f79f03701632026e115e16149e97f0e2fa3094870bc0ea23d5480936ef45c1277369beafbb70fff51","href":"https://static.observableusercontent.com/files/38ff2b6a035928ef610fbede060bc1ad4bdbbb6f85de638f79f03701632026e115e16149e97f0e2fa3094870bc0ea23d5480936ef45c1277369beafbb70fff51","name":"sketches-17@1.svg","type":"image/svg+xml","lastModified":1686046203931.295,"size":5847},{"id":"0321b26dbfc5ee06c17eac1473cd64af84957d4cea94884bfc23d2c62eb2a1ba05bf1299cff393c7ac80f2d9dd318d5a493ffa43b9bb465553d7f4133e158cbb","href":"https://static.observableusercontent.com/files/0321b26dbfc5ee06c17eac1473cd64af84957d4cea94884bfc23d2c62eb2a1ba05bf1299cff393c7ac80f2d9dd318d5a493ffa43b9bb465553d7f4133e158cbb","name":"sketches-19@1.svg","type":"image/svg+xml","lastModified":1686046203725.134,"size":7619},{"id":"b077f6f014f410a065837fd3f46b807719010bedb36a8b815548ec0c46a435bfeffeb2c3471a14bd95fa36f5d8596e95502baa4778726d97a40963092cdc72d6","href":"https://static.observableusercontent.com/files/b077f6f014f410a065837fd3f46b807719010bedb36a8b815548ec0c46a435bfeffeb2c3471a14bd95fa36f5d8596e95502baa4778726d97a40963092cdc72d6","name":"sketches-15@1.svg","type":"image/svg+xml","lastModified":1686046203997.722,"size":6524},{"id":"e8e150f9cecf464013aa2148d62d72bfebf684f53d9b5a3a6140664f7010ec3f74ff4cc4f16c5fd1519f5eb641456098aabee59cbf5d721c7518dc8da63bf239","href":"https://static.observableusercontent.com/files/e8e150f9cecf464013aa2148d62d72bfebf684f53d9b5a3a6140664f7010ec3f74ff4cc4f16c5fd1519f5eb641456098aabee59cbf5d721c7518dc8da63bf239","name":"sketches-24@1.svg","type":"image/svg+xml","lastModified":1686046203924.96,"size":7148},{"id":"0dbd24cde2bfed244854b476d66862831a5bc4f6e2188ecdfea268a46da1315488a21712304575b2c323b3df752b6ae116bbe86007316672ca8a4d0bbc837ec8","href":"https://static.observableusercontent.com/files/0dbd24cde2bfed244854b476d66862831a5bc4f6e2188ecdfea268a46da1315488a21712304575b2c323b3df752b6ae116bbe86007316672ca8a4d0bbc837ec8","name":"sketches-31@1.svg","type":"image/svg+xml","lastModified":1686046203948.575,"size":5496},{"id":"60131333b62b747836233a137d470c9653a0852bc741262a236853c539c68d92a959aeb9ac254ad0e4dab5bb574f0c814687b1cda1fe6e846be4133382eac1ec","href":"https://static.observableusercontent.com/files/60131333b62b747836233a137d470c9653a0852bc741262a236853c539c68d92a959aeb9ac254ad0e4dab5bb574f0c814687b1cda1fe6e846be4133382eac1ec","name":"sketches-21@1.svg","type":"image/svg+xml","lastModified":1686046203961.482,"size":3586},{"id":"5df3ecac440cf2e296e84409981dfb72317934bc4a0da7227ff69827809720eae1c68bcaa0e95a4fef786b2e4bb7e40719f2f4cadcb059f591e1d105834f2df8","href":"https://static.observableusercontent.com/files/5df3ecac440cf2e296e84409981dfb72317934bc4a0da7227ff69827809720eae1c68bcaa0e95a4fef786b2e4bb7e40719f2f4cadcb059f591e1d105834f2df8","name":"sketches-29@1.svg","type":"image/svg+xml","lastModified":1686046204029.992,"size":3683},{"id":"c2a51b34504b91dd03eabadb548b58bb19f917db92741895aa9735b6f1780e5b00f135e977d0c36c8eeaafb6f2adc9140c63c4adba4098919b0fa04c398be28c","href":"https://static.observableusercontent.com/files/c2a51b34504b91dd03eabadb548b58bb19f917db92741895aa9735b6f1780e5b00f135e977d0c36c8eeaafb6f2adc9140c63c4adba4098919b0fa04c398be28c","name":"sketches-22@1.svg","type":"image/svg+xml","lastModified":1686046203964.371,"size":7880},{"id":"d364e88d33a6b1391201f8a07245f0afed5d09ce0be9db1e05cd8d792878879b7b3cac0db330cff23c17866a4712eb1940f322f8b11340b9cfec36d13e73d7e8","href":"https://static.observableusercontent.com/files/d364e88d33a6b1391201f8a07245f0afed5d09ce0be9db1e05cd8d792878879b7b3cac0db330cff23c17866a4712eb1940f322f8b11340b9cfec36d13e73d7e8","name":"sketches-23@1.svg","type":"image/svg+xml","lastModified":1686046203957.52,"size":7132},{"id":"0649980b54d9f76226a38fd473d086d467620f0dcc35dee98ade477ea6de8a6d846de31a7da2df740a8909218ceb2880a2c23216e977fce1d2df4b0859d043a1","href":"https://static.observableusercontent.com/files/0649980b54d9f76226a38fd473d086d467620f0dcc35dee98ade477ea6de8a6d846de31a7da2df740a8909218ceb2880a2c23216e977fce1d2df4b0859d043a1","name":"sketches-13@1.svg","type":"image/svg+xml","lastModified":1686046203998.303,"size":3105},{"id":"c7362cdc11932796b29c85ce55740d6454fb08560b3000117a7da41436f77f1a6e28b6b3e01cbabf399da6e77e99051ccae1a6541805f39c1b50cda7f9eb556f","href":"https://static.observableusercontent.com/files/c7362cdc11932796b29c85ce55740d6454fb08560b3000117a7da41436f77f1a6e28b6b3e01cbabf399da6e77e99051ccae1a6541805f39c1b50cda7f9eb556f","name":"sketches-12@1.svg","type":"image/svg+xml","lastModified":1686046203999.073,"size":8595},{"id":"1f3190a8dd5ab64cdb04960059b298c0ef074b743d4f2ac4c60b85b6e183c776bcd1278af7f97cafc44f57b9b862088c7d9d2e234f763713d726f98f270a87e2","href":"https://static.observableusercontent.com/files/1f3190a8dd5ab64cdb04960059b298c0ef074b743d4f2ac4c60b85b6e183c776bcd1278af7f97cafc44f57b9b862088c7d9d2e234f763713d726f98f270a87e2","name":"sketches-11@1.svg","type":"image/svg+xml","lastModified":1686046204005.717,"size":2716},{"id":"a5dfe0592d5430aa4415504eb76563b0bb3d7a00c8eaa96d43222273d83182279bd4540a358d43116f558018e85eeca96c8ac1fa21c0b53d182e1379a1bc3809","href":"https://static.observableusercontent.com/files/a5dfe0592d5430aa4415504eb76563b0bb3d7a00c8eaa96d43222273d83182279bd4540a358d43116f558018e85eeca96c8ac1fa21c0b53d182e1379a1bc3809","name":"sketches-25@1.svg","type":"image/svg+xml","lastModified":1686046204080.068,"size":6253},{"id":"1ba08d25fc61f88ce33eb6162c3fa6952df3491176e211eb0145200ce5de1f3c772e9f40c3db27f44f57c3e2edff111022817b1bda62ba6f2a9de7c61cf371aa","href":"https://static.observableusercontent.com/files/1ba08d25fc61f88ce33eb6162c3fa6952df3491176e211eb0145200ce5de1f3c772e9f40c3db27f44f57c3e2edff111022817b1bda62ba6f2a9de7c61cf371aa","name":"sketches-30@1.svg","type":"image/svg+xml","lastModified":1686046204080.06,"size":7094},{"id":"611354a628cb7a03e557a8ed0c4cbe9a1ee618e2b01da89fbba59293734df42605094f3111563ca1cebf1de1c284fefa77cb68181a8ff156b2c4ff572b58ad37","href":"https://static.observableusercontent.com/files/611354a628cb7a03e557a8ed0c4cbe9a1ee618e2b01da89fbba59293734df42605094f3111563ca1cebf1de1c284fefa77cb68181a8ff156b2c4ff572b58ad37","name":"sketches-18@1.svg","type":"image/svg+xml","lastModified":1686046204100.547,"size":6332},{"id":"fa8bc2dfd51a740d15e405965afd0d52f3a69b69f6bc72a9fea13c6ebccfe269d6795bc27f9602b78416147696642fcb522d8b7aed8a4b4efe7f145aeda1cd2d","href":"https://static.observableusercontent.com/files/fa8bc2dfd51a740d15e405965afd0d52f3a69b69f6bc72a9fea13c6ebccfe269d6795bc27f9602b78416147696642fcb522d8b7aed8a4b4efe7f145aeda1cd2d","name":"sketches-26@1.svg","type":"image/svg+xml","lastModified":1686046204116.411,"size":4325},{"id":"75b07615316d495385b6ae276d0c18c5497958a4a373128aa78053ee10385a750fb7752451a084ae0c32405a80a09ec2534895865fe4bc48ea65ef31a2061d21","href":"https://static.observableusercontent.com/files/75b07615316d495385b6ae276d0c18c5497958a4a373128aa78053ee10385a750fb7752451a084ae0c32405a80a09ec2534895865fe4bc48ea65ef31a2061d21","name":"sketches-20@1.svg","type":"image/svg+xml","lastModified":1686046204130.034,"size":7599},{"id":"3d47d219288e4ba139071b3d22b86dc2581018e2f63a22c6c66e4e6d69339dd862850ce4e9abdbb30d39bca51a9e878e69f13cd1f554c191c3829d268b99f52b","href":"https://static.observableusercontent.com/files/3d47d219288e4ba139071b3d22b86dc2581018e2f63a22c6c66e4e6d69339dd862850ce4e9abdbb30d39bca51a9e878e69f13cd1f554c191c3829d268b99f52b","name":"sketches-16@1.svg","type":"image/svg+xml","lastModified":1686046204155.956,"size":5807},{"id":"d79c88dce8bc173f7abfb15d4adb5a55988d5ced1c25f1191cbe249c994b36fba7425307f634ec1c0229ba6c56a3df3dd7230376d667762c50d3162d1d06a57b","href":"https://static.observableusercontent.com/files/d79c88dce8bc173f7abfb15d4adb5a55988d5ced1c25f1191cbe249c994b36fba7425307f634ec1c0229ba6c56a3df3dd7230376d667762c50d3162d1d06a57b","name":"sketches-10@1.svg","type":"image/svg+xml","lastModified":1686046204166.727,"size":3457},{"id":"70667704dfcd3b27e32088ddad80ce488515fafa51806d53e51a6b2abecf5c09b38a8d01f10e7b1e78acbfa116f2199b024e767f938443ddd4127203f41e3b1b","href":"https://static.observableusercontent.com/files/70667704dfcd3b27e32088ddad80ce488515fafa51806d53e51a6b2abecf5c09b38a8d01f10e7b1e78acbfa116f2199b024e767f938443ddd4127203f41e3b1b","name":"sketches-28@1.svg","type":"image/svg+xml","lastModified":1686046204185.006,"size":6627},{"id":"2c0311880384c4c5a4a9b3e130466c739849487e9729199c7f8c2cde166c2fd3d6b7465c4693f1972bbacf50df022135ef6c42a06bf8664f7097c00d375fb0ea","href":"https://static.observableusercontent.com/files/2c0311880384c4c5a4a9b3e130466c739849487e9729199c7f8c2cde166c2fd3d6b7465c4693f1972bbacf50df022135ef6c42a06bf8664f7097c00d375fb0ea","name":"grandes-tenedores-cam-matrices-top10.csv","type":"text/csv","lastModified":1687275231102.079,"size":587},{"id":"2da9e2d9fb325522150e415f9c6968860a4469d9b2a98f2ee15af80967ec4ab88a0840513e76a84d177d6317c4aaa42a99f3633ccce4ebf25bb429c05b5d245b","href":"https://static.observableusercontent.com/files/2da9e2d9fb325522150e415f9c6968860a4469d9b2a98f2ee15af80967ec4ab88a0840513e76a84d177d6317c4aaa42a99f3633ccce4ebf25bb429c05b5d245b","name":"grandes-tenedores-cam-parque-imuebles.csv","type":"text/csv","lastModified":1687275231102.568,"size":79},{"id":"d3fa927ddc9dfb985fbc7d8689bee1f488a79a3497291905f8b90393879d1518a45a52391d50fec0ee708ab81cc21a90260cd102c9b886fea8011b03029a85a9","href":"https://static.observableusercontent.com/files/d3fa927ddc9dfb985fbc7d8689bee1f488a79a3497291905f8b90393879d1518a45a52391d50fec0ee708ab81cc21a90260cd102c9b886fea8011b03029a85a9","name":"grandes-tenedores-cam-matrices.csv","type":"text/csv","lastModified":1687275231127.325,"size":22107},{"id":"2e352bee4f944ebc4c37065d1256249e06b8543c5945326133c7409e755c3f88601b28afae1cee2e430052a463d45c387c9b4609b4c126a164d8c70784fcb669","href":"https://static.observableusercontent.com/files/2e352bee4f944ebc4c37065d1256249e06b8543c5945326133c7409e755c3f88601b28afae1cee2e430052a463d45c387c9b4609b4c126a164d8c70784fcb669","name":"sketches-48@1.svg","type":"image/svg+xml","lastModified":1686056933714.775,"size":5913},{"id":"2b78baaf48b2a6bb59e8900e47242f81edf6f689f8767fa68d8a347b1d7373f5555d2f0fa2e1ce5da0689da7c1cc341122636f7e16288527c520297f325b30ba","href":"https://static.observableusercontent.com/files/2b78baaf48b2a6bb59e8900e47242f81edf6f689f8767fa68d8a347b1d7373f5555d2f0fa2e1ce5da0689da7c1cc341122636f7e16288527c520297f325b30ba","name":"sketches-40@1.svg","type":"image/svg+xml","lastModified":1686056933637.525,"size":5158},{"id":"3f40580d36a8c5ca3373a120f819f64e4790c13a32eecad6f2fbb6bc2ce5ebde89bcb33b872b207388905f7d71d86b2fe4b14effd03897a47430d9746f7c716e","href":"https://static.observableusercontent.com/files/3f40580d36a8c5ca3373a120f819f64e4790c13a32eecad6f2fbb6bc2ce5ebde89bcb33b872b207388905f7d71d86b2fe4b14effd03897a47430d9746f7c716e","name":"sketches-36@1.svg","type":"image/svg+xml","lastModified":1686056933637.905,"size":2311},{"id":"e356ff380747ae0f9359f1d1335996106c2db97198c1657acab26e1b4ac855012acceeba61a12f5101e8517c08bd32c2708870f15b8fd68309a3967bb8012e51","href":"https://static.observableusercontent.com/files/e356ff380747ae0f9359f1d1335996106c2db97198c1657acab26e1b4ac855012acceeba61a12f5101e8517c08bd32c2708870f15b8fd68309a3967bb8012e51","name":"sketches-41@1.svg","type":"image/svg+xml","lastModified":1686056933638.062,"size":4671},{"id":"a9bfe4542438dffc89dbb5bf5adb32a9587b2af29c4950c9c8ab84aec97896e4d309b214bdbd478b1e3f2586f8ca6c06bde88d46f5e25ad0e91c40976c2e8dca","href":"https://static.observableusercontent.com/files/a9bfe4542438dffc89dbb5bf5adb32a9587b2af29c4950c9c8ab84aec97896e4d309b214bdbd478b1e3f2586f8ca6c06bde88d46f5e25ad0e91c40976c2e8dca","name":"sketches-46@1.svg","type":"image/svg+xml","lastModified":1686056933638.282,"size":3612},{"id":"2d383d44de5c0e3cbcea898a6cf8fb0fd5101b880b1637b3b53f2e105080da8af40b669d53fa15d0b2aabab6231e683206c689d556f664d6515b9e3badbb9a78","href":"https://static.observableusercontent.com/files/2d383d44de5c0e3cbcea898a6cf8fb0fd5101b880b1637b3b53f2e105080da8af40b669d53fa15d0b2aabab6231e683206c689d556f664d6515b9e3badbb9a78","name":"sketches-45@1.svg","type":"image/svg+xml","lastModified":1686056933770.709,"size":5989},{"id":"f702a5ca31149e9f5018c17af9ac4bd5f3bf7c6cd568886d24d217c8db5d6f0ec904ff3b30f45e48c7a03c3950d73d361554f6e04319c27e6b7b99a05608b480","href":"https://static.observableusercontent.com/files/f702a5ca31149e9f5018c17af9ac4bd5f3bf7c6cd568886d24d217c8db5d6f0ec904ff3b30f45e48c7a03c3950d73d361554f6e04319c27e6b7b99a05608b480","name":"sketches-54@1.svg","type":"image/svg+xml","lastModified":1686056933661.392,"size":4087},{"id":"03e2cc48ef5a036d77f26ab5005bfeda1a6a2b27a92b24c7dcd803c380c112fd0632d82f2def18d6888326ff43b028a3e11d729ec4e08ce0611d1af3c07ad356","href":"https://static.observableusercontent.com/files/03e2cc48ef5a036d77f26ab5005bfeda1a6a2b27a92b24c7dcd803c380c112fd0632d82f2def18d6888326ff43b028a3e11d729ec4e08ce0611d1af3c07ad356","name":"sketches-37@1.svg","type":"image/svg+xml","lastModified":1686056933662.893,"size":6648},{"id":"32c20849cf504152078b094634e3982be2bd339985212d4e22460f6686104ed55b764fa8c2550ed4a98d48b1fcc172a1f63a79429672702a4c2631109969e372","href":"https://static.observableusercontent.com/files/32c20849cf504152078b094634e3982be2bd339985212d4e22460f6686104ed55b764fa8c2550ed4a98d48b1fcc172a1f63a79429672702a4c2631109969e372","name":"sketches-39@1.svg","type":"image/svg+xml","lastModified":1686056933667.326,"size":6641},{"id":"e3adf322531ff3f324a20b6870e888b9ece20576b439098d6749e8ff155f900607ca775b870f5c9aa20eaad27a2d68f49c12c8f2cf65a232bd3c968498764a92","href":"https://static.observableusercontent.com/files/e3adf322531ff3f324a20b6870e888b9ece20576b439098d6749e8ff155f900607ca775b870f5c9aa20eaad27a2d68f49c12c8f2cf65a232bd3c968498764a92","name":"sketches-44@1.svg","type":"image/svg+xml","lastModified":1686056933672.985,"size":5630},{"id":"7a3049c046502ed31385cdb8eea3d17cfe45c212e32586fbbbfd4e5e3ad49f8b0f5560a67ba21de9f7f5adfea3cae587d497d95822db71d4a0cad24b2da53536","href":"https://static.observableusercontent.com/files/7a3049c046502ed31385cdb8eea3d17cfe45c212e32586fbbbfd4e5e3ad49f8b0f5560a67ba21de9f7f5adfea3cae587d497d95822db71d4a0cad24b2da53536","name":"sketches-47@1.svg","type":"image/svg+xml","lastModified":1686056933674.353,"size":6126},{"id":"042bcaaa80768207ba4f27c1dbaf2de4be56f193789efcad68dff0a7a89b24ce3ca3360fb9aecc9fde0847a05458f7ac06ebd38388ddd8571bb2a88e644858d7","href":"https://static.observableusercontent.com/files/042bcaaa80768207ba4f27c1dbaf2de4be56f193789efcad68dff0a7a89b24ce3ca3360fb9aecc9fde0847a05458f7ac06ebd38388ddd8571bb2a88e644858d7","name":"sketches-35@1.svg","type":"image/svg+xml","lastModified":1686056933680.115,"size":2797},{"id":"222667ca6cc389963ea0695b792e0886477e7fac2b9cfb0e1fc7151af60eff7cba3050d658304470ec0023b87d32730901d76baae3cca14b0cb014b27abaf5ad","href":"https://static.observableusercontent.com/files/222667ca6cc389963ea0695b792e0886477e7fac2b9cfb0e1fc7151af60eff7cba3050d658304470ec0023b87d32730901d76baae3cca14b0cb014b27abaf5ad","name":"sketches-52@1.svg","type":"image/svg+xml","lastModified":1686056933660.072,"size":8634},{"id":"ef4677d828fa723f98cb45441359722da7f03e5d2b1f0cb7823842908ac58deea7b54ff65dbf0e2a0cb623cc82980e13a645b5c0cff7a43c731c5618a7dd2bf8","href":"https://static.observableusercontent.com/files/ef4677d828fa723f98cb45441359722da7f03e5d2b1f0cb7823842908ac58deea7b54ff65dbf0e2a0cb623cc82980e13a645b5c0cff7a43c731c5618a7dd2bf8","name":"sketches-49@1.svg","type":"image/svg+xml","lastModified":1686056933754.61,"size":5591},{"id":"43932aeb1fa0cde910f2eee7744c1d07af90ff90939585334a7629ca2248f918641e635f954237438f60702445b1621c0a3bbc7425724bca8f49a9524d34ffc7","href":"https://static.observableusercontent.com/files/43932aeb1fa0cde910f2eee7744c1d07af90ff90939585334a7629ca2248f918641e635f954237438f60702445b1621c0a3bbc7425724bca8f49a9524d34ffc7","name":"sketches-42@1.svg","type":"image/svg+xml","lastModified":1686056933642.009,"size":4701},{"id":"b04ee8ae43ea1b405a3348d839ae4baf431151a611799d2514a84a8cd605bc8bdfddc5f03a2686919a7af0d731b0bde989ac0bac3baa61c3beff41c6e858b56c","href":"https://static.observableusercontent.com/files/b04ee8ae43ea1b405a3348d839ae4baf431151a611799d2514a84a8cd605bc8bdfddc5f03a2686919a7af0d731b0bde989ac0bac3baa61c3beff41c6e858b56c","name":"sketches-53@1.svg","type":"image/svg+xml","lastModified":1686056933795.239,"size":5436}] 2d:{"title":"Large residential property holders in Spain (Prototype)","cells":[{"id":299,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":1737,"value":"videoNoBackground(\n await FileAttachment(\"Screen Recording 2023-06-21 at 09.33.58.mov\").url()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1742,"value":"\n---","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"viewof deviceSelection = Inputs.radio([\"mobile\", \"desktop\"], {\n label: \"Responsiveness testing\",\n value: \"desktop\" // Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1438,"value":"viewof button01 = Inputs.button(\"Play 01\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"viewof table01 = Inputs.table(data01)","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":893,"value":"viewof orderByStep = Inputs.radio([\"type\", \"origin\", \"value\"], {\n label: \"Order step02 by...\",\n value: \"type\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1680,"value":"viewof table02 = Inputs.table(data02)","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"viewof table03 = Inputs.table(data03)","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$33","pinned":false,"hidden":false,"mode":"html"},{"id":44,"value":"---\n\n### Interactions","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .text(\"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"function onMouseOut(event, d, i) {\n tooltip.style(\"visibility\", \"hidden\");\n\n d3.selectAll(\".cell\").transition().duration(300).style(\"opacity\", 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"function onMouseMove(event, d, i) {\n let tooltipWidth = tooltip.node().offsetWidth;\n let tooltipHeight = tooltip.node().offsetHeight;\n\n tooltip\n .style(\"top\", function () {\n return `${\n event.clientY < tooltipHeight + 10\n ? event.pageY + 10\n : event.pageY - tooltipHeight - 10\n }px`;\n })\n .style(\"left\", function () {\n return `${\n event.pageX + 10 < myWidth * 0.33\n ? event.pageX\n : event.pageX + 10 < myWidth * 0.66\n ? event.pageX - tooltipWidth / 2\n : event.pageX - tooltipWidth\n }px`;\n })\n .style(\"pointer-events\", \"none\")\n .style(\"visibility\", \"visible\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"function onMouseClick(event, d, i) {}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1657,"value":"---\n\n### Visual settings step02","pinned":false,"hidden":false,"mode":"md"},{"id":486,"value":"viewof nWidth = Inputs.range([1, 30], {\n label: \"Width\",\n step: \".1\",\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"viewof nGap = Inputs.range([1, 10], {\n label: \"Gap\",\n step: \".1\",\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"viewof delay = Inputs.range([0, 10], {\n label: \"Animation delay\",\n step: \".1\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"viewof duration = Inputs.range([0, 800], {\n label: \"Animation duration\",\n step: \"1\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"data02ByType = d3\n .flatGroup(data02, (d) => d.type)\n .map((d) => ({\n category: d[0],\n value: d[1].length\n }))\n .sort((a, b) => d3.descending(a.value, b.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"data02ByOrigin = d3\n .flatGroup(data02, (d) => d.origin)\n .map((d) => ({\n category: d[0],\n value: d[1].length\n }))\n .sort((a, b) => d3.descending(a.value, b.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"viewof scaleByValue = Inputs.toggle({ label: \"Scale by value\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"viewof angleFork = Inputs.range([0, 100], {\n label: \"Angle\",\n step: 1,\n value: 15\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"---\n\n### Other useful functions","pinned":false,"hidden":false,"mode":"md"},{"id":707,"value":"urlBlack = await FileAttachment(\"sketches_tenedor-black.svg\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"urlGrey = await FileAttachment(\"sketches_tenedor-grey.svg\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"urlStroke = await FileAttachment(\"sketches_tenedor-stroke.svg\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"function angleType(type) {\n if (type === \"public\") {\n return `rotate(${angleFork}deg)`;\n } else if (type === \"private\") {\n return `rotate(-${angleFork}deg)`;\n } else if (type === \"other\") {\n return `rotate(0deg)`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1153,"value":"function forkType(type) {\n if (type === \"public\") {\n return urlStroke;\n } else if (type === \"private\") {\n return urlBlack;\n } else if (type === \"other\") {\n return urlGrey;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":579,"value":"function flagEmoji(country) {\n if (country === \"España\") {\n return \"🇪🇸\";\n } else if (country === \"Estados Unidos\") {\n return \"🇺🇸\";\n } else if (country === \"Francia\") {\n return \"🇫🇷\";\n } else if (country === \"Alemania\") {\n return \"🇩🇪\";\n } else if (country === \"Países Bajos\") {\n return \"🇳🇱\";\n } else if (country === \"Israel\") {\n return \"🇮🇱\";\n } else if (country === \"Reino Unido\") {\n return \"🇬🇧\";\n } else if (country === \"Singapur\") {\n return \"🇸🇬\";\n } else if (country === \"Suiza\") {\n return \"🇨🇭\";\n } else if (country === \"Jersey\") {\n return \"🇯🇪\";\n } else if (country === \"Luxemburgo\") {\n return \"🇱🇺\";\n } else if (country === \"Islas Caiman\") {\n return \"🇰🇾\";\n } else if (country === \"Filipinas\") {\n return \"🇵🇭\";\n } else {\n //throw new Error(\"Flag no encontrada: \" + country); // throw error\n console.log(\"Categoría no encontrada: \" + country);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":586,"value":"countriesList = Array.from(new Set(data02.map((d) => d.origin)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":983,"value":"rangeValues = d3.extent(data02, (d) => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"// Scaling forks depending on values\nscaleArea = d3\n .scaleSqrt() \n .domain(rangeValues)\n .range([6, 40])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1367,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1375,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"function categorizeSociety(type) {\n let category;\n if ([\"Administración central\", \"Empresa pública\"].includes(type)) {\n return \"public\";\n } else if (\n [\"Empresa privada\", \"Cooperativa\", \"Socimi\", \"Soparfi\"].includes(type)\n ) {\n return \"private\";\n } else if (\n [\n \"Asociación\",\n \"Comunidad de bienes, de propietarios y herencias yacentes\",\n \"Entidades religiosas\",\n \"Fundaciones\"\n ].includes(type)\n ) {\n return \"other\";\n } else { \n //throw new Error(\"Categoría no encontrada: \" + type); // throw error\n console.log(\"Categoría no encontrada: \" + type);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"---\n\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":1513,"value":"dataRaw01 = FileAttachment(\"grandes-tenedores-cam-parque-imuebles.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"dataModif01 = {\n return dataRaw01.map((d) => ({\n // Absolute numbers:\n inmuebles_total: d.inmuebles_total,\n inmuebles_grandesTenedores: d.inmuebles_grandesTenedores,\n inmuebles_top10: d.inmuebles_top10,\n // Percents:\n percent_grandesTenedores: d.inmuebles_grandesTenedores / d.inmuebles_total,\n percent_top10: d.inmuebles_top10 / d.inmuebles_total\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"data01 = dataModif01","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1520,"value":"dataRaw02 = FileAttachment(\"grandes-tenedores-cam-matrices.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"dataModif02 = {\n return dataRaw02.map((d) => ({\n name: d.Matriz,\n value: d[\"TOTAL INMUEBLES\"],\n origin: d.Sede,\n typeOriginal: d[\"Tipo de sociedad\"],\n type: categorizeSociety(d[\"Tipo de sociedad\"])\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"data02 = dataModif02","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1523,"value":"dataRaw03 = FileAttachment(\"grandes-tenedores-cam-matrices-top10.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"dataModif03 = {\n return dataRaw03.map((d) => ({\n name: d.Matriz,\n value: d[\"TOTAL INMUEBLES\"],\n origin: d.Sede,\n typeOriginal: d[\"Tipo de sociedad\"],\n type: categorizeSociety(d[\"Tipo de sociedad\"]),\n\n n: Math.round(d[\"TOTAL INMUEBLES\"] / 50)\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"data03 = dataModif03","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"---\n\n### Formatting & translations","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"viewof languageSelector = Inputs.radio(Object.keys(dataLocale), {\n label: \"Language\",\n disabled: [\"en\"],\n value: \"es\" // 👈🏻 Default value\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"// en-US format\nen_US = ({\n decimal: \".\",\n thousands: \",\",\n grouping: [3],\n currency: [\"€\", \"\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"// es-ES format\nes_ES = ({\n decimal: \",\",\n thousands: \".\",\n //thousands: \"\\u00a0\", // space\n grouping: [3],\n currency: [\"\", \"\\u00a0€\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"locale = languageSelector === \"en\" ? en_US : es_ES","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"formatPercent = d3.formatLocale(locale).format(\",.1%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"formatIntegers = d3.formatLocale(locale).format(\",d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"dataLocale = ({\n es: {\n title: \"\",\n rents: \" inmuebles en alquiler\",\n\n //Types\n private: \"Empresa privada\",\n public: \"Empresa pública\",\n other: \"Otro\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"---\n\n### Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"height = 500 // If we need 2 or more heights (for mobile, desktop, etc), we should create them in different cells (heightDesktop and hegihtMobile) and use one or the other depending on the flag variable isMobile","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"margin = ({ top: 50, right: 50, bottom: 50, left: 50 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"mediaQueryLimit = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"//660 is Civio central column\nmaxWidth = 660","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"myWidth = deviceSelection === \"desktop\" ? Math.min(width, maxWidth) : 320 // 👈🏻 This 320 is just for testing. On production the devideSelection will always be \"desktop\", so it will take the Math.min(width, maxWidth) as expected","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"isMobile = width < mediaQueryLimit || deviceSelection === \"mobile\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"---\n\n### Color & styles","pinned":false,"hidden":false,"mode":"md"},{"id":553,"value":"mainColor = colorNeutral(900)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1723,"value":"hightlightColor = \"coral\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1731,"value":"---\n \n### Attachments","pinned":false,"hidden":false,"mode":"md"},{"id":1733,"value":"videoNoBackground = async (\n file\n) => htl.html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"---\n \n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"// Civio main colors\nimport { colors, colorNeutral, codeToExportIframe } from \"@civio/utilities\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}