Dot Grid Generator

Settings

Paper

Code

import {rasterize, serialize} from "@mbostock/saving-svg"

function get_paper_dimension(format, orientation) {
  if (orientation == "Portrait") {
    return {x: format.width, y: format.height}
  } else {
    return {x: format.height, y: format.width}
  }
}

viewof format = Inputs.select(new Map([
  ["Letter", {width: 215.9, height: 279.4}],
  ["A4", {width: 210, height: 297}],
  ]), {label: "Paper Format"})

viewof orientation = Inputs.radio(["Landscape", "Portrait"], {value: "Landscape"})

paper_dimension = get_paper_dimension(format, orientation)

viewof paper = Inputs.form({
  x: Inputs.range([1, 1000], {value: paper_dimension.x, step: .01, label: "Width (mm)"}),
  y: Inputs.range([1, 1000], {value: paper_dimension.y, step: .01, label: "Height (mm)"}),
  colour: Inputs.color({value: "#ffffff", label: "Colour"}),
})

Splits

Code

viewof show_split =  Inputs.checkbox(["Horizontally", "Vertically"], {label: "Split page: ", value: ["Horizontally", "Vertically"]})
viewof x_split = Inputs.range([-1, 1000], {value: show_split.includes("Horizontally") ? paper_dimension.x / 2 : -1, step: 1, label: "Horizontal split (mm)"})
viewof y_split = Inputs.range([-1, 1000], {value: show_split.includes("Vertically") ? 25 : -1, step: 1, label: "Vertical split (mm)"})

Margins

Code

viewof margin = Inputs.form({
  left: Inputs.range([0, 1000], {value: 10, step: 1, label: "Left (mm)"}),
  right: Inputs.range([0, 1000], {value: 10, step: 1, label: "Right (mm)"}),
  top: Inputs.range([0, 1000], {value: 30, step: 1, label: "Top (mm)"}),
  bottom: Inputs.range([0, 1000], {value: 5, step: 1, label: "Bottom (mm)"}),
  centre: Inputs.toggle({label: "Centre margins", value: true})
})

Dots

Code

viewof dots = Inputs.form({
  dot_colour: Inputs.color({value: "#c0c0c0", label: "Colour"}),
  dot_size: Inputs.range([0.1, 10], {value: 0.2, step: .1, label: "Size (mm)"}),
  dot_spacing: Inputs.range([1, 20], {value: 6, step: 1, label: "Spacing (mm)"}),
})

Export

You can print the SVG directly by opening it in a browser, selecting the intended paper size and orientation, setting margins to none, and printing at 100% scale.

Alternately, you can open it in a graphics editor like Inkscape for further customization and export to PDF.

Code

grid = {
  const s = d3.create("svg")
    .attr("width", `${paper.x}mm`)
    .attr("height",`${paper.y}mm`)
    .style("background-color",paper.colour) 

  // Page border
  s.append("rect")
    .attr("x",0)
    .attr("y",0)
    .attr("width",`${paper.x}mm`)
    .attr("height",`${paper.y}mm`)
    .attr("stroke", dots.dot_colour)
    .attr("fill",paper.colour)

  // Split line
  s.append("line")
    .attr("x1",`${x_split}mm`)
    .attr("x2",`${x_split}mm`)
    .attr("y1",0)
    .attr("y2",`${paper.y}mm`)
    .attr("stroke", dots.dot_colour)
    .attr("fill",paper.colour)

  // Top line
  s.append("line")
    .attr("x1",0)
    .attr("x2",`${paper.x}mm`)
    .attr("y1",`${y_split}mm`)
    .attr("y2",`${y_split}mm`)
    .attr("stroke", dots.dot_colour)
    .attr("fill",paper.colour)

  let remainder = {
    x: margin.centre ? ((paper.x - margin.right - margin.left) % dots.dot_spacing) / 2 : 0,
    y: margin.centre ? ((paper.y - margin.bottom - margin.top) % dots.dot_spacing) / 2 : 0,
  }

  // Dots
  for (let x = remainder.x; margin.left + x < paper.x - margin.right; x += dots.dot_spacing) {
    for (let y = remainder.y; margin.top + y < paper.y - margin.bottom; y += dots.dot_spacing) {
      s.append("circle")
        .attr("cx", `${margin.left+(x)}mm`)
        .attr("cy", `${margin.top+(y)}mm`)
        .attr("r", `${dots.dot_size}mm`)
        .attr("stroke", dots.dot_colour)
        .attr("fill", dots.dot_colour)
    }
  }

  return s.node();
}