Mesas de ping pong en CABA 🏓

dataURL = "https://raw.githubusercontent.com/fer-aguirre/ping-pong-caba/main/data/pingpong-caba.csv"

fetch(dataURL)
  .then(response => {
    if (!response.ok) throw new Error(response.status);
    return response.text();
  });

data = d3.csv(dataURL)

barrio_geo = await FileAttachment("./data/ba_barrios.geo.json").json()

zone_geo = await FileAttachment("./data/zonas.geo.json").json()

d3 = require('d3@5', 'd3-array@^2.2')

import {select} from "@jashkenas/inputs"

import {svgGradientDefs} from "@luciyer/svg-gradients-chrome-safari"

viewof barrio_overlay = select(["Mostrar barrios", "Ocultar barrios"])

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 === "Mostrar 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 = "<b>" + d.plaza + "</b><br><i><a href='" + d.google_maps + "' target='_blank'>Haz clic para abrir la ubicación en Google Maps</a></i>";
        if (d.direccion) tooltipText += "<br>Dirección: " + d.direccion;
        if (d.comuna) tooltipText += "<br>" + d.comuna;
        if (d.mesas) tooltipText += "<br>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();
  
}