← Examples
postal · US-MA · ZCTA · zip codes

Massachusetts ZIP Areas

All 539 Massachusetts ZIP code areas (Census 2020 ZCTAs) from the postal layer, colored by 3-digit ZIP prefix — the USPS sectional center geography. Every feature's gid is the bare 5-digit ZIP code, so joining your ZIP-keyed data is a dictionary lookup. The layer is served per state: filter=US-MA is required. If your ZIP column is messy, ontology.mapjson.com cleans it first.

The two white gaps are real, not missing data: a ZIP code is a set of mail delivery points, not a territory, so land where no one receives mail belongs to no ZIP code at all. Here that's the Quabbin Reservoir watershed (Boston's water supply) and October Mountain State Forest — every state has similar holes over reservoirs, wilderness, and parks.

API Call

https://api.mapjson.com/v1/geo?layer=postal&filter=US-MA

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Massachusetts ZIP Areas</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
  <style>
    body { margin: 0; background: #fdfcfa; }
    svg { width: 100%; height: 100vh; display: block; }
    .zcta { stroke: #fff; stroke-width: 0.4; }
    .zcta:hover { opacity: 0.75; }
  </style>
</head>
<body>
  <svg id="map"></svg>
  <script>
    const url = "https://api.mapjson.com/v1/geo?layer=postal&filter=US-MA";

    const width = 960, height = 620;
    const svg = d3.select("#map").attr("viewBox", `0 0 ${width} ${height}`);

    d3.json(url).then(topo => {
      const fc = topojson.feature(topo, topo.objects.geo);
      const path = d3.geoPath(d3.geoMercator().fitExtent([[10,10],[width-10,height-10]], fc));

      // Color by 3-digit ZIP prefix — every feature's gid IS its ZIP code
      const prefixes = [...new Set(fc.features.map(d => d.properties.gid.slice(0,3)))].sort();
      const color = d3.scaleOrdinal(prefixes, d3.schemeTableau10.concat(d3.schemeSet3));

      svg.selectAll(".zcta")
        .data(fc.features)
        .join("path")
        .attr("class", "zcta")
        .attr("d", path)
        .attr("fill", d => color(d.properties.gid.slice(0,3)))
        .append("title")
        .text(d => `ZIP ${d.properties.gid}`);
    });
  </script>
</body>
</html>