3f:null 40:["$","title",null,{"children":"Data Visualization | gp's Workspace | Observable"}] 46:T651,style = html``47:[{"id":"8ebe7c46f1a738d592e20916a9508bf74be045c6339c9d05dce07160beeac3e663de0b40575e2116af1ae1b73ad8475f5beb84a70224ddbd55023c9ffb8021c1","href":"https://static.observableusercontent.com/files/8ebe7c46f1a738d592e20916a9508bf74be045c6339c9d05dce07160beeac3e663de0b40575e2116af1ae1b73ad8475f5beb84a70224ddbd55023c9ffb8021c1","name":"barris.geojson","type":"application/geo+json","lastModified":1705360560727.549,"size":1378890},{"id":"3808c30c3f354e346ce42c3114040deea9f7c87dcc3ae4786bb1a2b8b30fb1823325747bd16ebefbc5d5f9dc3940304dee41f9ae1351ab3d69d3306149d3c3e9","href":"https://static.observableusercontent.com/files/3808c30c3f354e346ce42c3114040deea9f7c87dcc3ae4786bb1a2b8b30fb1823325747bd16ebefbc5d5f9dc3940304dee41f9ae1351ab3d69d3306149d3c3e9","name":"2023_lloguer_preu_trim.csv","type":"text/csv","lastModified":1705360560727.549,"size":29308},{"id":"ca973bc8dd6c76cec34530f6898d230aa8ca00debc74341dea424d14e1a48073ecec5880a19d99cdc1823d07b3e89cc46f9fc36b109f58212ecbde21ee3e2aa3","href":"https://static.observableusercontent.com/files/ca973bc8dd6c76cec34530f6898d230aa8ca00debc74341dea424d14e1a48073ecec5880a19d99cdc1823d07b3e89cc46f9fc36b109f58212ecbde21ee3e2aa3","name":"database_practica.csv","type":"text/csv","lastModified":1705360560727.549,"size":1328999},{"id":"958118191faa6e62728a948bb217b4817144417cc3d75836a3d8b40ba42896795793f072f4f2347a4e5541065f40f8e28b9af6c48ff758986c002aca94415ecd","href":"https://static.observableusercontent.com/files/958118191faa6e62728a948bb217b4817144417cc3d75836a3d8b40ba42896795793f072f4f2347a4e5541065f40f8e28b9af6c48ff758986c002aca94415ecd","name":"districtes.geojson","type":"application/geo+json","lastModified":1705397993359.315,"size":607634},{"id":"e676f183766f53b8c610675190672e52c110ce28a8020c4e0e28e21452f8839f73cc2cee7c7ce66b3e74a9f7a606ea60e8beedfaaef7b41d29d5d24de19841cc","href":"https://static.observableusercontent.com/files/e676f183766f53b8c610675190672e52c110ce28a8020c4e0e28e21452f8839f73cc2cee7c7ce66b3e74a9f7a606ea60e8beedfaaef7b41d29d5d24de19841cc","name":"secciocensal.geojson","type":"application/geo+json","lastModified":1705399862042.337,"size":4178255},{"id":"7ea8447878fe72e769f52ac4401568e024a2920083ae8c9b0b70ab3d821dcabfc2a634bdcfa3f8b50cd6368e37706b13deaf5b53ef2c7f355bc11e9c691c806b","href":"https://static.observableusercontent.com/files/7ea8447878fe72e769f52ac4401568e024a2920083ae8c9b0b70ab3d821dcabfc2a634bdcfa3f8b50cd6368e37706b13deaf5b53ef2c7f355bc11e9c691c806b","name":"2017_turisme_atractius.geojson","type":"application/geo+json","lastModified":1705407989842.235,"size":16096364}] 44:{"id":"48b64f9561beb4d3","slug":"practica-uoc","title":"Data Visualization","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-01-15T23:16:00.727Z","update_time":"$D2024-01-16T21:02:39.691Z","view_time":null,"first_public_time":"$D2024-01-15T23:16:00.727Z","has_unpublished_edits":null,"fork":{"id":"0bb303840256b04f","slug":null,"title":"BCN plotting draft - Crossing DB Choropleth","owner":{"id":"b0ee87258e6a2283","login":"gp2-ws","name":"gp's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b0ee87258e6a2283","login":"gp2-ws","name":"gp's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e1bab22c49ef32600428b888fd91682decd66c74b462fe00de115b94904e90fd","tier":"starter_2024","bio":"","following":false},"version":368,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8418c7782491db77","login":"gp2","name":"gp","avatar_url":"https://avatars-next.observableusercontent.com/891f20c2964173559239e0d412beded489d861e799010d83c7d64510da419a46","tier":null,"bio":"Musician, Designer, Dataviz enthusiast trying to figure JS out.","following":false}],"members":[{"type":"individual","id":"8418c7782491db77","login":"gp2","name":"gp","avatar_url":"https://avatars-next.observableusercontent.com/891f20c2964173559239e0d412beded489d861e799010d83c7d64510da419a46","tier":null,"role":"editor"},{"type":"team","id":"b0ee87258e6a2283","login":"gp2-ws","name":"gp's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e1bab22c49ef32600428b888fd91682decd66c74b462fe00de115b94904e90fd","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data Visualization","cells":[{"id":0,"value":"# Data Visualization\n## Pisos Turisticos y precios medios de alquiler en Barcelona","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":306,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":353,"value":"Geographical data based on github by Martin Gonzalez, however plotted from scratch using plot.geo.\n\nFor plotting non US country, I suggest to double-check the \"domain\" projection option https://observablehq.com/@ambassadors/plot-geo-gotchas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":281,"value":"---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":273,"value":"# Visualización","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"viewof radius = Inputs.range([0.1, 0.01], {\n value: 0.07,\n step: 0.001,\n label: \"Zoom IN\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"viewof xpan = Inputs.range([-0.1, 0.1], {\n value: 0,\n step: 0.005,\n label: \"Lat pan\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"viewof ypan = Inputs.range([-0.1, 0.1], {\n value: 0,\n step: 0.005,\n label: \"Long pan\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"Inputs.button([\n [\"reset Lat\", () => set(viewof xpan, 0)],\n [\"reset Long\", () => set(viewof ypan, 0)]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"viewof select = Inputs.select\n//([bound1, bound2, bound3], {label: \"Select one\"})\n(new Map([[\"barrios\", bound1], [\"districtos\", bound2], [\"sessiones censales\", bound3]]), {label: \"Tipo de Mapa\"})\n//viewof size = Inputs.select(new Map([[\"Short\", 8], [\"Tall\", 12], [\"Grande\", 16], [\"Venti\", 20]]), {value: 12, label: \"Size\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"viewof selectHut = Inputs.select (new Map([[\"on\", hutToggle], [\"off\", ]]), {label: \"Pisos Turisticos\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"viewof select1 = Inputs.select (new Map([[\"on\", turAttrToggle], [\"off\", ]]), {label: \"areas turisticas\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"Plot.plot({\n projection: {\n type: \"mercator\",\n // this tells Plot that I wish to focus on an area that is specific to the spatial extents of my geo data file\n domain: d3.geoCircle().center([(2.1686 + xpan), (41.3874 + ypan)]).radius(radius)(),\n inset: 2,\n rotate: [0, 0, -37.6]\n },\n // this tells Plot to use the Plot.geo mark to draw my geo data file\n marks: [select1, \n select,\n selectHut\n ],\n color: {\n scheme: \"Reds\", // Change color scheme\n unknown: \"#ddd\", // Polygons with unknown values are gray\n type: \"linear\", // Linear scale for color progression\n legend: true, // Add the legend\n label: \"Precio medio mensual de alquiler\", // Update legend label\n //percent: true, // Convert value to a percent (from a proportion)\n },\n height: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":349,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"map = {\n const container = yield htl.html`

`;\n const map = L.map(container).setView([41.3874, 2.1686], 13.5 \n );\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"## Meet the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"database_practica = await FileAttachment(\"database_practica.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"database_practica","database":"$undefined"},{"id":251,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":286,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"_Variables for toggling layers ( bound = boundaries )_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"bound1 = Plot.geo(barris,\n {stroke: \"black\", fill: \"lightGrey\", fillOpacity: 0.1, }\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"barris = FileAttachment(\"barris.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"bound2 = Plot.geo(districtes, \n {stroke: \"black\", fill: \"lightGrey\", fillOpacity: 0.1, }\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"districtes = FileAttachment(\"districtes.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"seccioCensal = FileAttachment(\"secciocensal.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"bound3 = Plot.geo(seccioCensal)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"_Turist attractions layer_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":164,"value":"turattr = FileAttachment(\"2017_turisme_atractius.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"turAttrToggle = Plot.geo(turattr, \n {opacity: 0.08, stroke: \"grey\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"_dot plot layer, using db \"database_practica\"_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"hutToggle = Plot.dot(database_practica, { // Create dot marks \n x: \"LONGITUD_X\", // Provide longitude values\n y: \"LATITUD_Y\", // Provide latitude values\n r: 3,\n fill: \"Column1\",\n opacity: 0.3,\n tip: true,\n title: (d) => `Barrio: ${d.BARRI}\\nPrecio medio de alquiler: ${d.Column1} €/m\\n${d.TIPUS_CARRER} ${d.CARRER}`,\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"_input botton code_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"//Inputs.button(\"reset\", () => set(viewof radius, 0.1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"filtering and mapping for coropleth map (not implemented in final version)","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"lloguer_t1 = lloguer_avg.filter(d => d.Trimestre === 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"lloguer_avg = _lloguer_preu_trim.filter(d => d.Lloguer_mitja === \"Lloguer mitjà mensual (Euros/mes)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"lloguer_t2.get(\"71\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"lloguer_t2 = new Map(lloguer_t1.map(({BARRI, Preu}) => [BARRI, Preu]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"_lloguer_preu_trim = await FileAttachment(\"2023_lloguer_preu_trim.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"_lloguer_preu_trim","database":"$undefined"},{"id":297,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"