¿Conoces las políticas que han impulsado la bioeconomía en tu país?

La bioeconomía, como una nueva alternativa económica que abarca sectores como la agricultura, la biotecnología, la energía renovable, el ambiente, entre otros, requiere de instrumentos de política pública, programas y estrategias para su fortalecimiento. Sin embargo, al investigar su evolución, me he encontrado con un obstáculo recurrente: la falta de herramientas accesibles que recopilen de manera ordenada y cronológica las políticas y programas relacionados con este tema. Para abordar esta necesidad, decidí desarrollar dos recursos:

Mapa de estrategías en bioeconomía

En primer lugar, he creado un mapa que permite explorar las políticas, estrategias y/o conceptos asociados con la bioeconomía en diferentes países. Al hacer clic en un país, puedes acceder directamente al enlace de los documentos clave del país. Este mapa busca ser una herramienta de fácil acceso para investigadores, tomadores de decisiones y cualquier persona interesada en conocer las iniciativas globales en bioeconomía, usando información base como el Global Bioeconomy Policy Report, Bioeconomy Globalization: Recent Trends and Drivers of National Programs and Policies y otros artículos e insumos que me han parecido interesantes.

d3 = require("d3@7")
topojson = require("topojson-client@3")
graticule = d3.geoGraticule10()
outline = ({type: "Sphere"})
land = topojson.feature(world, world.objects.countrymasks)
world = FileAttachment("../en/countrymasks.topojson").json()

bioeconomy = FileAttachment("../en/bioeconomy.json").json({ typed: true })

height_world = 600 
width_world = height_world 

projection = {
  const projection = d3.geoOrthographic()
    .translate([width_world / 2, height_world / 2]);
  const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitSize([width_world, height_world], outline)).bounds(outline);
  const scaleFactor = Math.min(width / (x1 - x0), width_world / (y1 - y0));
  projection.scale(projection.scale() * scaleFactor);
  return projection;
}

zoom_factor = 1

map = {
  const wrapper = html`<div style="
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    position: relative;
  "></div>`;
  const canvas = DOM.canvas(width_world, height_world);
  wrapper.appendChild(canvas);

  // Crear popup para mostrar información
  const popup = document.createElement("div");
  popup.style.position = "absolute";
  popup.style.background = "#fff";
  popup.style.border = "1px solid #ccc";
  popup.style.padding = "10px";
  popup.style.display = "none";
  popup.style.pointerEvents = "auto"; // Permitir interacción con el contenido
  popup.style.boxShadow = "0 2px 5px rgba(0, 0, 0, 0.3)";
  popup.style.zIndex = "1000"; // Asegurar que el popup esté sobre el canvas
  wrapper.appendChild(popup);

  const context = canvas.getContext("2d");
  const path = d3.geoPath(projection, context);

  let rotate = projection.rotate();
  let hoveredCountry = null;

  function render() {
      context.clearRect(0, 0, width_world, height_world);
      context.beginPath(), path(outline), context.clip(), context.fillStyle = "#fff", context.fillRect(0, 0, width_world, height_world);
      context.beginPath(), path(graticule), context.strokeStyle = "#ccc", context.stroke();

      // Dibujar países
      land.features.forEach(feature => {
          const hasMatch = bioeconomy.some(item => item.NAME === feature.properties.NAME); // Verifica si hay match
          context.beginPath();
          path(feature);
          context.fillStyle = feature === hoveredCountry ? "orange" : hasMatch ? "#3e6fda" : "#02213e"; // Naranja al hover, azul si tiene match, gris si no
          context.fill();
          context.strokeStyle = "black";
          context.stroke();
      });

      context.beginPath(), path(outline), context.strokeStyle = "white", context.stroke();
  }

  function mousemove(event) {
      const [x, y] = d3.pointer(event);
      const inverted = projection.invert([x, y]);
      if (inverted) {
          const [lng, lat] = inverted;
          const country = land.features.find(feature => d3.geoContains(feature, [lng, lat]));
          if (country !== hoveredCountry) {
              hoveredCountry = country;
              render();
          }
      }
  }

  function mouseout(event) {
    if (!popup.contains(event.relatedTarget)) {
      hoveredCountry = null;
      render();
      popup.style.display = "none";
    }
  }

  function click(event) {
      const [x, y] = d3.pointer(event);
      const inverted = projection.invert([x, y]);
      if (inverted) {
          const [lng, lat] = inverted;
          const country = land.features.find(feature => d3.geoContains(feature, [lng, lat]));
          if (country) {
              const countryName = country.properties.NAME;
              const matches = bioeconomy.filter(item => item.NAME === countryName); // Encuentra todas las coincidencias
              if (matches.length > 0) {
                  popup.innerHTML = `
                      <strong>${countryName}</strong><br>
                      <ul>
                          ${matches.map(match => `
                              <li><a href="${match.LINK}" target="_blank" rel="noopener noreferrer">${match.LABEL}</a></li>
                          `).join('')}
                      </ul>
                  `; // Añade bullets para los LABEL
                  const rect = canvas.getBoundingClientRect();
                  popup.style.left = `${event.clientX - rect.left + 10}px`;
                  popup.style.top = `${event.clientY - rect.top + 10}px`;
                  popup.style.display = "block";
              } else {
                  popup.style.display = "none";
              }
          }
      }
  }


  // Prevenir que el popup desaparezca al interactuar con él
  popup.addEventListener("mouseenter", () => {
    popup.style.display = "block"; // Asegurar que el popup se mantenga visible
  });

  popup.addEventListener("mouseleave", (event) => {
    if (!canvas.contains(event.relatedTarget)) {
      popup.style.display = "none";
    }
  });

  d3.select(wrapper)
    .call(
      d3.drag()
        .on("start", () => wrapper.style.cursor = "grabbing")
        .on("drag", event => {
          const [dx, dy] = [event.dx, event.dy];
          rotate[0] += dx * 0.2;
          rotate[1] -= dy * 0.2;
          projection.rotate(rotate);
          render();
        })
        .on("end", () => wrapper.style.cursor = "pointer")
    );

  d3.select(canvas)
    .on("mousemove", mousemove)
    .on("mouseout", mouseout)
    .on("click", click);

  render();
  return wrapper;
}

Línea de Tiempo

Además, he desarrollado una línea de tiempo que recopila documentos y programas de entidades gubernamentales que he consultado. Este recurso ofrece una vista cronológica que facilita la creación de líneas base para proyectos e investigaciones, evitando el constante reprocesamiento de información. En mi experiencia, al revisar documentos clave (principalmente en el contexto colombiano, mi país de origen), noté que muchas estrategias gubernamentales pasan desapercibidas o toma tiempo encontrarlas. Con esta línea de tiempo, espero que se convierta en una base sólida para quienes deseen profundizar en la evolución de la bioeconomía.

Estos recursos combinados no solo organizan la información de manera accesible, también fomentan un entendimiento más amplio y estructurado de la bioeconomía en diferentes contextos. Espero que encuentres útiles estas herramientas y las utilices para ahorrar tiempo en futuras investigaciones o proyectos.

events0 = FileAttachment("../en/events1.json").json({ typed: true })

events = events0.map(event => ({
  ...event,
  // Convertir las propiedades collection y collection_details en listas
  collection: event.collection.split(", ").map(str => str.trim()), 
  collection_details: event.collection_details.split(", ").map(str => str.trim())
})).sort((a, b) => new Date(a.start) - new Date(b.start));

categories = ["type", "institution"]

HEIGHT = 600

MARGIN = {
  return {
    left: 15,
    right: 15,
    top: 2,
    bottom: 0
  };
}

PADDING = {
  return {
    left: 0,
    right: 0,
    top: 40,
    bottom: 0
  };
}


FONT_SIZE = 14;


LEGEND_WIDTH = 300;
LEGEND_HEIGHT = 100
LEGEND_MARGIN = 20
COLOR_SIZE = FONT_SIZE * 0.7;
COLLECTIONS_KEY = "collection"

eventHeight = scaleY.bandwidth() / 2;

r = eventHeight * 0.3;


dateExtent = d3.extent(events.map(d => new Date(d.start)).concat(events.map(d => new Date(d.end))));

timeScale = d3.scaleTime()
    .domain(dateExtent) 
    .range([0, width - MARGIN.left - PADDING.left - MARGIN.right - PADDING.right])
    .nice();

scaleY = d3.scaleBand()
    .domain(events.map(d => d.start)) 
    .range([0, HEIGHT - MARGIN.top - PADDING.top - MARGIN.bottom - PADDING.bottom])
    .padding(0.25);


colorScaleDomain = new Set(events.map(d => d[activeColorCategory]));


scaleColor = d3.scaleOrdinal(d3.schemeTableau10)
    .domain(colorScaleDomain);


tickFormat = d => d <= d3.timeYear(d) ? d.getFullYear() : null;

function generateEventTimeline() {
  // TODO: allow filtering/emphasizing technologies of interest -> "when did I use technology xyz?"
  
  // create a canvas element
  const svg = d3.create("svg")
    .attr("class", "gantt-chart")
    .attr("width", width)
    .attr("height", HEIGHT);

  // zoom behavior along the x axis.
  let zoomTransform = d3.zoomIdentity;
  const zoom = d3.zoom()
    .extent([[0, 0], [width, HEIGHT]])
    .scaleExtent([1, 8])
    .on("zoom", ({transform}) => {
      zoomTransform = transform;
      draw();
    });

  function draw() {
    // the main container for the data
    svg.selectAll("g.axis,g.grid,g.events,g.legend,text.now").remove();
  
    const scaleX = zoomTransform.rescaleX(timeScale);

    // add axes and grid to the background
    function drawAxesAndGrid() {
      const timeAxis = d3.axisBottom(scaleX)
        .ticks(d3.timeMonth.every(12))
        .tickFormat(tickFormat);
  
      const timeGrid = d3.axisBottom(scaleX)
        .ticks(d3.timeMonth.every(4))
        .tickFormat(tickFormat)
        .tickSize(HEIGHT - MARGIN.top - MARGIN.bottom);
      
      const xAxisContainer = svg.append("g")
        .attr("class", "axis x")
        .attr("transform", `translate(${MARGIN.left},${MARGIN.top})`)
        .call(timeAxis);
  
      const yAxisContainer = svg.append("g")
        .attr("class", "grid x")
        .attr("transform", `translate(${MARGIN.left},${MARGIN.top})`)
        .call(timeGrid)
        .call(g => g.select(".domain").remove())
        .call(g => g.selectAll(".tick line")
              .attr("stroke-opacity", 0.3)
              .attr("stroke-dasharray", "2,2"));

      // add a little bit of context to show where we are right now
      svg.append("text")
        .attr("class", "now")
        .attr("transform", `translate(${PADDING.left + MARGIN.left},5)`)
        .attr("x", scaleX(Date.now()) - 3)
        .attr("y", 2 * FONT_SIZE)
        .attr("font-size", FONT_SIZE)
        .text("🤘now"); 
    }

    function drawEvents() {
      const g = svg.append("g")
          .attr("class", "events")
          .attr("transform", `translate(${MARGIN.left},${PADDING.top})`);

      const event = g.selectAll("g.event").data(filteredEvents).join("g")
          .attr("class", "event")
          .attr("transform", d => `translate(${scaleX(new Date(d.start))},${scaleY(d.start)})`);

      event.append("rect")
        .attr("class", "event")
        .attr("width", d => scaleX(new Date(d.end)) - scaleX(new Date(d.start)))
        .attr("height", eventHeight)
        .attr("fill", d => scaleColor(d[activeColorCategory]))
        .on("mouseover", function (event, d) {
          d3.select(this.parentNode).select("image").style("display", "block");
        })
        .on("mouseout", function (event, d) {
          d3.select(this.parentNode).select("image").style("display", "none");
        });

      event.append("a") // Enlace SVG
        .attr("xlink:href", d => d.source) // Asegúrate de que 'source' sea la columna con el enlace
        .attr("target", "_blank") // Abrir el enlace en una nueva pestaña
        .append("text") // Agregar el texto dentro del enlace
        .attr("class", "label link-title") // Agregar clase CSS específica
        .attr("text-anchor", "end")
        .attr("x", d => scaleX(new Date(d.end)) - scaleX(new Date(d.start)))
        .attr("dx", -5)
        .attr("y", -5)
        .attr("font-size", FONT_SIZE)
        .text(d => `${d.title}`);

      const collectionsG = event.append("g")
          .attr("class", "collections")
          .attr("fill", d => scaleColor(d[activeColorCategory]))
          .attr("transform", d => `translate(${scaleX(new Date(d.end)) - scaleX(new Date(d.start))},0)`);

      const collection = collectionsG.selectAll("g.collection").data((d, i) =>
        d[COLLECTIONS_KEY].map((collection, idx) => ({
          collection,
          detail: d.collection_details[idx]
        }))
      ).join("g")
        .attr("class", "collection");

      // Círculos de colección
      collection.append("circle")
        .attr("class", "collection")
        .attr("r", r)
        .attr("cx", (d, i) => -(i + .75) * r * 2.3)
        .attr("cy", eventHeight / 2);

      // Texto de colección
      collection.append("text")
        .attr("x", d => scaleX(new Date(d.end)) + 10) // Posición fuera de la barra, lado derecho
        .attr("y", 0) // Posición alineada verticalmente al centro de la barra
        .attr("font-size", FONT_SIZE)
        .attr("text-anchor", "start") // Alineación hacia la izquierda (fuera de la barra)
        .text(d => d.collection);

      // Texto de detalles de colección
      collection.append("text")
        .attr("x", d => scaleX(new Date(d.end)) + 10) // Mismo posicionamiento horizontal que `collection`
        .attr("y", FONT_SIZE) // Justo debajo del texto `collection`
        .attr("font-size", FONT_SIZE * 0.8) // Tamaño más pequeño
        .attr("text-anchor", "start") // Alineación hacia la izquierda (fuera de la barra)
        .attr("fill", "#555") // Color opcional para distinguir los detalles
        .text(d => d.detail);

          }

    function drawLegend() {    
      // Extraer los valores únicos del dominio de colores en filteredEvents
      const filteredColorScaleDomain = new Set(filteredEvents.map(d => d[activeColorCategory]));

      // draw the legend for the filtered color scale  
      const legend = svg.append("g")
        .attr("class", "legend")
        .attr("transform", `translate(${MARGIN.left}, ${HEIGHT - LEGEND_HEIGHT})`);

      // add background to make legend more readable over data
      legend.append("rect")
        .attr("class", "background")
        .attr("width", LEGEND_WIDTH)
        .attr("height", LEGEND_HEIGHT)
        .attr("fill", "rgba(255,255,255,0.3)");
      
      const label = legend.selectAll("g.label").data(Array.from(filteredColorScaleDomain)).join("g") // Usar dominio filtrado
        .attr("class", "label")
        .attr("transform", (d, i) => `translate(${LEGEND_MARGIN}, ${i * COLOR_SIZE * 2})`);
      
      label.append("rect")
        .attr("width", COLOR_SIZE)
        .attr("height", COLOR_SIZE)
        .attr("fill", scaleColor);
      
      label.append("text")
        .attr("class", "label")
        .attr("x", COLOR_SIZE * 1.5)
        .attr("y", COLOR_SIZE)
        .attr("font-size", FONT_SIZE)
        .attr("font-style", "italic")
        .text(d => d);
    }
    drawAxesAndGrid();
    drawEvents();
    drawLegend();
  }

  draw();
  return svg.call(zoom).node();
}

generateStyles = function() {
  const css = d3.create("style").node();
  css.innerHTML = `
    svg.gantt-chart text {
      font-family: sans-serif;
    }
    svg.gantt-chart .event rect.event {
      fill-opacity: 0.3;
      stroke: none;
    }
    svg.gantt-chart .event:hover rect.interval {
      fill-opacity: 0.5;
    }
    svg.gantt-chart .event line.leader {
      stroke-width: 2px;
    }
    svg.gantt-chart .event line.readoff {
      stroke-width: 1px;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    svg.gantt-chart .event:hover line.readoff {
      opacity: 1;
    }
    svg.gantt-chart g.collection circle {
      stroke: none;
    }
    svg.gantt-chart g.collection text {
      font-weight: bold;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    svg.gantt-chart g.collection:hover circle {
      stroke: black;
      stroke-width: 2;
    }
    svg.gantt-chart g.collection:hover text {
      opacity: 1;
    }
    svg.gantt-chart .link-title {
      fill: "#13013b"; /* Color predeterminado del enlace */
      cursor: pointer;
      text-decoration: underline;
    }
    svg.gantt-chart .link-title:hover {
      fill: blue; /* Cambiar color al pasar el mouse */
    }
  `;
  return css;
};

generateStyles()

viewof selectedCountry = Inputs.select(
  Array.from(new Set(events.map(d => d.country))).sort((a, b) => a.localeCompare(b)), // Crear y ordenar alfabéticamente
  {label: "Selecciona el país", value: "Colombia"} // Configurar el valor inicial
);

filteredEvents = events.filter(d => d.country === selectedCountry);

generateEventTimeline()

viewof activeColorCategory = Inputs.radio(categories, {value: categories[0]})

Raw data

Si te interesa explorar la información recolectada, puedes acceder a traves del siguiente link.

🤝 ¿Te gustaría aportar y colaborar en estas herramientas?

Las herramientas expuestas pueden escalarse con la colaboración de personas interesadas en este tema. Si conoces políticas, programas o documentos clave sobre bioeconomía de tu país o región, ¡me encantaría incluirlos!

¿Cómo aportar?

🌍 Mapa

• Nombre del instrumento
• País
• Link
• Fuente

📈 Linea del tiempo

• Nombre del intrumento (política, programas o estrategias de tu país).
• Fecha de Inicio o Fin de la política
• Institución que lideró el instrumento.
• Tipo de instrumento (política, programa, documento)
• Temáticas clave con su respectiva descripción corta.
• País
• Link del instrumento

Tu aporte no solo ampliará el alcance de esta herramienta, sino que ayudará a construir una visión global más completa.

📩 Puedes escribirme en LinkedIn 😁.