2b:null 2c:["$","title",null,{"children":"Mesas de ping pong en CABA | Fer Aguirre | Observable"}] 31:Tfe6,map = { var style = { height: 600, margin: 20, barrio_stroke: "#000", barrio_stroke_width: 1, barrio_stroke_opacity: 1, zone_stroke: "#BBB", zone_stroke_width: 0.5, zone_stroke_opacity: 1 }; let projection = d3.geoMercator() .fitSize([width - style.margin * 2, style.height - style.margin * 2], barrio_geo); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, style.height]) .attr('width', width) .attr('height', style.height) .on("click", function() { tooltip.style("visibility", "hidden"); if (currentElement) { d3.select(currentElement).style("opacity", 1); currentElement = null; } }); const zone_map = svg.append('g') .attr("class", "zone-map") .attr("transform", `translate(${style.margin}, ${style.margin})`); const tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("font-size", "1rem") .style("background", "rgba(255,255,255, 2555)") .style("padding", "0.1rem 0.5rem") .style("color", "#000") .style("border-radius", "3px") .style("border", "1px solid #000"); let mouseover = function (d) { d3.select(this).style("opacity", 0.5); } let mouseout = function (d) { d3.select(this).style("opacity", 1); } let currentElement = null; zone_map.append("g") .selectAll("path") .data(zone_geo.features) .enter() .append("path") .attr("fill", "#FFF") .attr("stroke", style.zone_stroke) .attr("stroke-opacity", style.zone_stroke_opacity) .attr("stroke-width", style.zone_stroke_width) .attr("d", d3.geoPath().projection(projection)); if(barrio_overlay === "Show Barrios") { let barrio_map = svg.append("g") .attr("class", "barrio-map") .attr("transform", `translate(${style.margin}, ${style.margin})`); barrio_map.append("g") .selectAll("path") .data(barrio_geo.features) .enter() .append("path") .attr("fill", "none") .attr("stroke", style.barrio_stroke) .attr("stroke-opacity", style.barrio_stroke_opacity) .attr("stroke-width", style.barrio_stroke_width) .attr("d", d3.geoPath().projection(projection)); } let points = svg.append("g") .attr("class", "points") .attr("transform", `translate(${style.margin}, ${style.margin})`); points.selectAll("image") .data(data) .enter() .append("image") .attr("xlink:href", "https://github.com/fer-aguirre/ping-pong-caba/blob/main/assets/logo.png?raw=true") .attr("x", function(d) { return projection([d.long, d.lat])[0]; }) .attr("y", function(d) { return projection([d.long, d.lat])[1]; }) .attr("width", "20px") .attr("height", "20px") .style("opacity", 1) .on("mouseover", mouseover) .on("mouseout", mouseout) .on("click", function (d) { d3.event.stopPropagation(); if (tooltip.style("visibility") === "visible") { tooltip.style("visibility", "hidden"); d3.select(this).style("opacity", 1); currentElement = null; } else { let tooltipText = "" + d.plaza + "
Haz clic para abrir la ubicación en Google Maps"; if (d.direccion) tooltipText += "
Dirección: " + d.direccion; if (d.comuna) tooltipText += "
" + d.comuna; if (d.mesas) tooltipText += "
Mesas: " + Math.round(d.mesas); tooltip .style("visibility", "visible") .style("top", (d3.event.pageY - 10) + "px") .style("left", (d3.event.pageX + 10) + "px") .html(tooltipText); if (currentElement) { d3.select(currentElement).style("opacity", 1); } d3.select(this) .style("opacity", 0.5); currentElement = this; } }); return svg.node(); }32:[{"id":"bdf87a222d5f5fe81fbec939b23af2113af0c76f0aa0bcf97189a212d675292fe3b639b6262aeda7887734a3a0b84f35fcf30b1af2f50f4e912038fd6ad7965e","href":"https://static.observableusercontent.com/files/bdf87a222d5f5fe81fbec939b23af2113af0c76f0aa0bcf97189a212d675292fe3b639b6262aeda7887734a3a0b84f35fcf30b1af2f50f4e912038fd6ad7965e","name":"ba_barrios.geo.json","type":"application/json","lastModified":1720477843122.031,"size":656388},{"id":"c9629846722b46f36ad62a3f717b27a384cc3846a893cb02b0394d4bced7a3255a60c736f39a22aa6f3941b0635bd2b4b71e21d34258222d660b2cc12bd6a414","href":"https://static.observableusercontent.com/files/c9629846722b46f36ad62a3f717b27a384cc3846a893cb02b0394d4bced7a3255a60c736f39a22aa6f3941b0635bd2b4b71e21d34258222d660b2cc12bd6a414","name":"zonas.geo.json","type":"application/json","lastModified":1720478525660.265,"size":764104},{"id":"8145a6e3bc173f350642f1b1f623ee0d6fcb3ec27616e0f5cd310791fbeab68789d1e5bfec63d01a1ee5bc54c145cd30d9ca4615e235515235916b087b127ee9","href":"https://static.observableusercontent.com/files/8145a6e3bc173f350642f1b1f623ee0d6fcb3ec27616e0f5cd310791fbeab68789d1e5bfec63d01a1ee5bc54c145cd30d9ca4615e235515235916b087b127ee9","name":"pingpong-caba.csv","type":"text/csv","lastModified":1720478902344.297,"size":4867}] 2f:{"id":"a5c27246ae836783","slug":null,"title":"Mesas de ping pong en CABA","thumbnail":"e736ad4b8f6c5a6d45452b284e7b0676b27104d43a8b00e780085555ce54057e","access_level":"public","create_time":"$D2024-07-08T22:30:14.098Z","update_time":"$D2024-07-10T03:05:44.977Z","view_time":null,"first_public_time":"$D2024-07-08T22:30:14.098Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"789e6ba9bbf11803","login":"fer-aguirre","name":"Fer Aguirre","avatar_url":"https://avatars-next.observableusercontent.com/f531eb1aface10aa40ec00b9dd17bd5b8a04204b1bccb07e46041ecf2a566a97","tier":"starter_2024"},"version":290,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"11c69ba1437427e2","login":"fer-aguirre","name":"Fernanda Aguirre Ruíz","avatar_url":"https://avatars-next.observableusercontent.com/f531eb1aface10aa40ec00b9dd17bd5b8a04204b1bccb07e46041ecf2a566a97","tier":null}],"members":[{"type":"individual","id":"11c69ba1437427e2","login":"fer-aguirre","name":"Fernanda Aguirre Ruíz","avatar_url":"https://avatars-next.observableusercontent.com/f531eb1aface10aa40ec00b9dd17bd5b8a04204b1bccb07e46041ecf2a566a97","tier":null,"role":"editor"},{"type":"team","id":"789e6ba9bbf11803","login":"fer-aguirre","name":"Fer Aguirre","avatar_url":"https://avatars-next.observableusercontent.com/f531eb1aface10aa40ec00b9dd17bd5b8a04204b1bccb07e46041ecf2a566a97","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Mesas de ping pong en CABA","cells":[{"id":0,"value":"# Mesas de ping pong en CABA\n\n## Data sources:\n\n\n\n- [Las mesas de ping-pong, furor entre los oficinistas en la hora del almuerzo](https://buenosaires.gob.ar/laciudad/noticias/las-mesas-de-ping-pong-de-la-ciudad-furor-entre-los-oficinistas-en-la-hora-del)\n- [Nuevas áreas para practicar deporte en la Ciudad](https://buenosaires.gob.ar/noticias/nuevas-areas-para-practicar-deporte-en-la-ciudad)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"viewof barrio_overlay = select([\"Show Barrios\", \"Hide Barrios\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"DOM.download(serialize(data), \"pingpong-caba.csv\", \"Download CSV\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"---\n### Code section","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"dataURL = \"https://raw.githubusercontent.com/fer-aguirre/ping-pong-caba/main/data/pingpong-caba.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"fetch(dataURL)\n .then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.text();\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"data = d3.csv(dataURL)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"barrio_geo = await FileAttachment(\"ba_barrios.geo.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"zone_geo = await FileAttachment(\"zonas.geo.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"d3 = require('d3@5', 'd3-array@^2.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"function serialize (data) {\n let parser = new json2csv.Parser();\n let csv = parser.parse(data);\n return new Blob([csv], {type: \"text/csv\"}) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"import {svgGradientDefs} from \"@luciyer/svg-gradients-chrome-safari\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"json2csv = require(\"https://cdn.jsdelivr.net/npm/json2csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"