Data Center Planner

data center planner

A planning tool for a game about building data centers

There's a game on Steam called Data Center where you build out racks and networking to serve customers. Working out how much hardware you actually need for a given workload is genuinely fiddly, and doing it in-game means building the wrong thing and tearing it down.

So I made a planner. You lay out racks, drop in servers and switches, cable them together, and it tells you what capacity you'll get and what's going to run out first.

Try it: tiiow.com/datacenter.html — it runs entirely in your browser, nothing to install. Your layout saves itself locally, and the share button packs the whole thing into a URL you can send someone.

Drag racks around, get real numbers

  • Rack editor — 47U racks you fill with servers, switches and patch panels, using the game's real hardware specs.
  • Cabling — click one rack then another to connect them. Bandwidth is calculated from the slower end of the link, like it actually works.
  • Capacity math — put in a target workload and it works out how many servers, racks and switches that needs.
  • What breaks first — a chart showing whether you'll hit a rack uplink limit or the core network limit as you scale up, so you know which one to spend on.
  • Validation — warnings for things like a rack that's out of ports or a saturated uplink, with a button to jump straight to the problem.

Plus the boring things that make a tool usable: autosave, undo and redo, keyboard shortcuts, and a share button that packs the whole layout into a URL so you can send someone your design.

One file

It's a single self-contained HTML file — the canvas is hand-written SVG, the only external dependency is a charting library. That was deliberate so it can be hosted anywhere, or just opened from disk by another player with no setup.

The capacity formulas have assertions that run every time the page loads and check the math against known-good numbers from the game. If I ever break one while changing something else, the page tells me immediately instead of quietly giving wrong advice.

Cut feature: I tried adding PNG export and gave up. Rendering the SVG to a canvas produced moiré striping that I couldn't get rid of across browsers. Screenshotting works fine and doesn't lie about the colours.
← back to projects