Do you know the policies that have driven the bioeconomy in your country?

The bioeconomy, as a new economic alternative encompassing sectors such as agriculture, biotechnology, renewable energy, the environment, among others, requires public policy instruments, programs, and strategies to strengthen it. However, while researching its evolution, I encountered a recurring obstacle: the lack of accessible tools that compile policies and programs related to this topic in an organized and chronological manner. To address this need, I decided to develop two resources:

Policy Map

First, I created a map that allows users to explore policies, strategies, and concepts associated with the bioeconomy in different countries. By clicking on a country, you can directly access links to key documents from that nation. This map aims to be an easily accessible tool for researchers, decision-makers, and anyone interested in learning about global bioeconomy initiatives, using foundational information such as the Global Bioeconomy Policy Report, Bioeconomy Globalization: Recent Trends and Drivers of National Programs and Policies, and other articles and inputs that I found interesting.

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

bioeconomy = FileAttachment("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;
}

Timeline

Additionally, I developed a timeline that compiles documents and programs from government entities I have reviewed over time. This resource offers a chronological view that facilitates the creation of baselines for projects and research, avoiding the constant reprocessing of information. In my experience, when reviewing key documents (mainly in the Colombian context, my country of origin), I noticed that many government strategies go unnoticed. With this timeline, I hope it becomes a solid foundation for those who wish to delve deeper into the evolution of the bioeconomy.

These combined resources not only organize information in an accessible way but also promote a broader and more structured understanding of the bioeconomy in different contexts. I hope you find these tools useful and use them to save time in future research or projects.

events0 = FileAttachment("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: "Select a Country", value: "Colombia"} // Configurar el valor inicial
);

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

generateEventTimeline()

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

Raw data

If you’re interested in exploring the collected information in detail, you can access it through the following link: Access the Raw Data.

🤝 Would you like to contribute to the Timeline?

The tools presented can be scaled with the collaboration of people interested in this topic. If you know policies, programs, or key documents about the bioeconomy from your country or region, I would love to include them!

How to contribute?

🌍 Map

• Name of the instrument
• Country
• Link
• Source

📈 Timeline

• Name of the instrument (policy, programs, or strategies from your country).
• Start and end dates of the policy.
• Institution that led the instrument.
• Type of instrument (policy, program, document).
• Key topics with a short description.
• Country.
• Link to the instrument.

Your contribution will not only expand the scope of this tool but will also help build a more comprehensive global perspective.

📩 Feel free to reach out to me on LinkedIn 😁.