Transforming Data into Action

d3 = require("d3@7")

function createCardCanvas(width, height, drawFunction) {
  const canvas = d3.create("canvas")
    .attr("width", width)
    .attr("height", height)
    .style("width", "100%")
    .style("height", "auto")
    .style("border", "1px solid #dee2e6")
    .style("border-radius", "4px")
    .style("background", "#f8f9fa")
    .node();
  
  const ctx = canvas.getContext("2d");
  drawFunction(ctx, width, height);
  return canvas;
}

Resources

createCardCanvas(400, 220, (ctx, w, h) => {
  ctx.fillStyle = "#e9ecef";
  ctx.fillRect(0, 0, 80, h);
  ctx.fillStyle = "#ced4da";
  ctx.fillRect(10, 20, 60, 10);
  ctx.fillRect(10, 40, 60, 10);
  ctx.fillRect(10, 60, 60, 10);
  
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(95, 20, 290, 130);
  ctx.strokeStyle = "#adb5bd";
  ctx.strokeRect(95, 20, 290, 130);
  
  ctx.fillStyle = "#0d6efd";
  ctx.beginPath();
  ctx.moveTo(230, 75);
  ctx.lineTo(230, 95);
  ctx.lineTo(250, 85);
  ctx.fill();
  
  ctx.fillStyle = "#6c757d";
  ctx.fillRect(95, 165, 200, 8);
  ctx.fillRect(95, 180, 250, 8);
})

Self-paced tutorials covering foundational public health GIS concepts.

Review our Resources

Tools

// Figure 2: Analysis Tools Visual (Abstract spatial processing / buffer analysis schema)
createCardCanvas(400, 220, (ctx, w, h) => {
  const centerX = w / 2;
  const centerY = h / 2;

  // Draw grid background to represent coordinate tracking
  ctx.strokeStyle = "#e9ecef";
  ctx.lineWidth = 1;
  for (let x = 20; x < w; x += 20) {
    ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
  }
  for (let y = 20; y < h; y += 20) {
    ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
  }

  ctx.strokeStyle = "#dee2e6";
  ctx.lineWidth = 1.5;
  ctx.setLineDash([4, 4]);
  ctx.beginPath();
  ctx.moveTo(centerX - 120, centerY - 60); ctx.lineTo(centerX + 120, centerY + 60);
  ctx.moveTo(centerX - 120, centerY + 60); ctx.lineTo(centerX + 120, centerY - 60);
  ctx.stroke();
  ctx.setLineDash([]);

  ctx.fillStyle = "rgba(13, 110, 253, 0.08)";
  ctx.strokeStyle = "#0d6efd";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.arc(centerX, centerY, 65, 0, 2 * Math.PI);
  ctx.fill();
  ctx.stroke();

  const points = [
    {x: centerX - 40, y: centerY - 30},
    {x: centerX + 50, y: centerY - 15},
    {x: centerX - 20, y: centerY + 45},
    {x: centerX + 35, y: centerY + 35}
  ];
  
  ctx.fillStyle = "#dc3545";
  points.forEach(p => {
    ctx.beginPath();
    ctx.arc(p.x, p.y, 4, 0, 2 * Math.PI);
    ctx.fill();
  });

  ctx.fillStyle = "#212529";
  ctx.beginPath();
  ctx.arc(centerX, centerY, 6, 0, 2 * Math.PI);
  ctx.fill();
})

Packages and toolboxes to assist with spatial epidemiology workflows.

Use our Tools

Data Catalog

createCardCanvas(400, 220, (ctx, w, h) => {
  // Define boundary line styling
  ctx.strokeStyle = "#adb5bd";
  ctx.lineWidth = 1.5;

  let tracts = [
  [[20, 60], [80, 45], [110, 80], [60, 110]],
  [[80, 45], [150, 50], [140, 95], [110, 80]],
  [[20, 60], [60, 110], [70, 170], [15, 130]],
  [[60, 110], [160, 150], [110, 180], [70, 170]],
  [[60, 110], [110, 80], [125, 87.5], [110, 130]],
  [[110, 130], [125, 87.5], [140, 95], [160, 150]]
];


  tracts.forEach((tract, i) => {
    if (i === 5) {
      ctx.fillStyle = "rgba(13, 110, 253, 0.15)";
      ctx.strokeStyle = "#0d6efd";
      ctx.lineWidth = 2;
    } else {
      ctx.fillStyle = "#ffffff";
      ctx.strokeStyle = "#adb5bd";
      ctx.lineWidth = 1;
    }

    ctx.beginPath();
    tract.forEach((pt, idx) => {
      if (idx === 0) ctx.moveTo(pt[0], pt[1]);
      else ctx.lineTo(pt[0], pt[1]);
    });
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  });

  let tableX = 210;
  let tableY = 25;
  let colWidths = [45, 45, 45, 45];
  let rowHeight = 22;
  let totalWidth = colWidths.reduce((a, b) => a + b, 0);

  ctx.fillStyle = "#e9ecef";
  ctx.fillRect(tableX, tableY, totalWidth, rowHeight);
  ctx.strokeStyle = "#ced4da";
  ctx.lineWidth = 1;
  ctx.strokeRect(tableX, tableY, totalWidth, rowHeight);

  let headers = ["GEOID", "NAME", "VALUE", "MOE"];
  let curX = tableX;
  ctx.fillStyle = "#495057";
  ctx.font = "bold 9px sans-serif";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  
  headers.forEach((h, idx) => {
    ctx.fillText(h, curX + colWidths[idx] / 2, tableY + rowHeight / 2);
    if (idx < headers.length - 1) {
      ctx.beginPath();
      ctx.moveTo(curX + colWidths[idx], tableY);
      ctx.lineTo(curX + colWidths[idx], tableY + rowHeight * 7);
      ctx.stroke();
    }
    curX += colWidths[idx];
  });

  for (let r = 1; r <= 6; r++) {
    let curY = tableY + (r * rowHeight);
    
    if (r === 4) {
      ctx.fillStyle = "rgba(13, 110, 253, 0.08)";
      ctx.fillRect(tableX, curY, totalWidth, rowHeight);
      ctx.strokeStyle = "#0d6efd";
    } else {
      ctx.strokeStyle = "#dee2e6";
    }

    ctx.strokeRect(tableX, curY, totalWidth, rowHeight);

    // Mock text lines inside data table cells
    let cellX = tableX;
    colWidths.forEach((w) => {
      ctx.fillStyle = (r === 4) ? "#0d6efd" : "#6c757d";
      ctx.fillRect(cellX + 6, curY + 9, w - 12, 4);
      cellX += w;
    });
  }

  ctx.strokeStyle = "rgba(13, 110, 253, 0.4)";
  ctx.lineWidth = 1.5;
  ctx.setLineDash([4, 4]);
  ctx.beginPath();
  ctx.moveTo(140, 95); 
  ctx.lineTo(tableX, tableY + (4 * rowHeight));
  ctx.moveTo(160, 150);
  ctx.lineTo(tableX, tableY + (5 * rowHeight));
  ctx.stroke();
  ctx.setLineDash([]);
})

A directory of geospatial layers, environmental variables, and demographic boundaries relevant to health departments.

View our Data Catalog

---

MapLogs

Discover how health department personnel apply their training to real-world challenges. These case studies highlight the work of real public health professionals who leverage their new-found skills to transform complex health data into visual, actionable evidence for local decision-makers.

Browse All MapLogs