31:T616c,(async () => { const d3 = await require("d3@7"); const topojson = await require("topojson-client@3"); // Tokens const NB_BLUE = "#043463"; const NB_RED = "#fe0100"; const NB_GREY = "#c9c9c9"; const WHITE = "#ffffff"; const SANS = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"; const SERIF = "Georgia, 'Times New Roman', serif"; // Layout const W = 1000; const PAD = 28; const HEADER_H = 96; const MAP_H = 560; const MAIN_W = 440; const INSET_X = PAD + MAIN_W + 16; const INSET_W = W - INSET_X - PAD; const INSET_H = 390; const LEG_Y = HEADER_H + MAP_H + 12; const PANEL_Y = LEG_Y + 104; const PANEL_H = 118; const H = PANEL_Y + PANEL_H; // Data // https://water.ca.gov/-/media/DWR-Website/Web-Pages/Programs/California-Water-Plan/Docs/RMS/2025/Desalination-RMS---2025.pdf const facilities = [ {n:1,f:"Mocho Groundwater Demineralization Plant",a:"Zone 7 Water Agency",c:"Alameda",s:"gw",cap:null,capNote:"6.1 mgd",p:1850,lat:37.66,lon:-121.87}, {n:2,f:"Newark Desalination Facility",a:"Alameda County Water District",c:"Alameda",s:"gw",cap:13451,p:8680,lat:37.53,lon:-122.04}, {n:3,f:"Sand City Desalination Project",a:"California American Water",c:"Monterey",s:"sw",cap:300,p:213,lat:36.62,lon:-121.85}, {n:4,f:"Marina Desalination Facility",a:"Marina Coast Water District",c:"Monterey",s:"sw",cap:1,p:null,st:"inactive",lat:36.68,lon:-121.80}, {n:5,f:"Salinas Valley State Prison RO Plant",a:"Calif. Dept. of Corrections",c:"Monterey",s:"gw",cap:null,p:319,lat:36.40,lon:-121.35}, {n:6,f:"Stovepipe Wells",a:"National Park Service",c:"Inyo",s:"gw",cap:null,p:17,lat:36.61,lon:-117.15}, {n:7,f:"Cow Creek/Nevares Wells",a:"National Park Service",c:"Inyo",s:"gw",cap:null,p:78,lat:36.48,lon:-116.86}, {n:8,f:"Furnace Creek",a:"National Park Service",c:"Inyo",s:"gw",cap:null,p:null,st:"nodata",lat:36.46,lon:-116.87}, {n:9,f:"Morro Bay Desalination Facility (Groundwater Unit)",a:"City of Morro Bay",c:"San Luis Obispo",s:"gw",cap:581,p:61,lat:35.37,lon:-120.85}, {n:10,f:"Morro Bay Desalination Facility (Seawater Unit)",a:"City of Morro Bay",c:"San Luis Obispo",s:"sw",cap:null,p:null,st:"inactive",lat:35.36,lon:-120.87}, {n:11,f:"Charles Meyer Desalination Plant",a:"City of Santa Barbara",c:"Santa Barbara",s:"sw",cap:3125,p:2763,lat:34.41,lon:-119.68}, {n:12,f:"GREAT Program Groundwater Desalination Facility",a:"City of Oxnard",c:"Ventura",s:"gw",cap:8400,p:3093,lat:34.20,lon:-119.18}, {n:13,f:"Round Mountain Water Treatment Plant",a:"Camrosa Water District",c:"Ventura",s:"gw",cap:1121,p:566,lat:34.22,lon:-118.98}, {n:14,f:"Port Hueneme Water Agency Desalter",a:"City of Port Hueneme",c:"Ventura",s:"gw",cap:4484,p:2128,lat:34.15,lon:-119.20}, {n:15,f:"The Ranch at Live Oak Desalination Facility",a:"The Ranch at Live Oak",c:"Ventura",s:"gw",cap:null,p:null,st:"inactive",lat:34.40,lon:-119.30}, {n:16,f:"San Nicolas Island Desalination Facility",a:"U.S. Navy / Port Hueneme",c:"Ventura",s:"sw",cap:45,p:19,lat:33.25,lon:-119.50}, {n:17,f:"Santa Catalina Island Desalination Facility",a:"Southern California Edison",c:"Los Angeles",s:"sw",cap:null,p:200,lat:33.34,lon:-118.32}, {n:18,f:"Paradise Ranch Mobile Home Park RO Unit",a:"Paradise Ranch MHP",c:"Los Angeles",s:"gw",cap:null,p:10,lat:34.49,lon:-118.62}, {n:19,f:"Beverly Hills Desalter",a:"City of Beverly Hills",c:"Los Angeles",s:"gw",cap:2600,p:null,st:"inactive",lat:34.07,lon:-118.40}, {n:20,f:"Cal Pomona WTP",a:"Cal Pomona Dept. of Water Ops",c:"Los Angeles",s:"gw",cap:549,p:86,lat:34.06,lon:-117.82}, {n:21,f:"C. Marvin Brewer Desalter",a:"West Basin MWD (CWS Dominguez)",c:"Los Angeles",s:"gw",cap:null,p:438,lat:33.84,lon:-118.28}, {n:22,f:"Robert W. Goldsworthy Desalter",a:"City of Torrance / WRD",c:"Los Angeles",s:"gw",cap:4000,p:2710,lat:33.85,lon:-118.34}, {n:23,f:"Arcadia Water Treatment Plant",a:"City of Santa Monica",c:"Los Angeles",s:"gw",cap:11300,p:366,lat:34.02,lon:-118.47}, {n:24,f:"Caltrans/CHP Nipton Headquarters",a:"Caltrans",c:"San Bernardino",s:"gw",cap:null,p:0,st:"lt1",lat:35.47,lon:-115.27}, {n:25,f:"Fort Irwin",a:"U.S. Army",c:"San Bernardino",s:"gw",cap:2190,p:1531,lat:35.26,lon:-116.68}, {n:26,f:"Zzyzx",a:"National Park Service",c:"San Bernardino",s:"gw",cap:null,p:0,st:"lt1",lat:35.14,lon:-116.10}, {n:27,f:"C.V. Kane Reverse Osmosis Unit",a:"Caltrans",c:"San Bernardino",s:"gw",cap:null,p:1,lat:35.27,lon:-116.07}, {n:28,f:"Beechers Corner Maintenance Station",a:"Caltrans",c:"San Bernardino",s:"gw",cap:null,p:0,st:"lt1",lat:34.73,lon:-115.24}, {n:29,f:"Calico Ghost Town",a:"San Bernardino County",c:"San Bernardino",s:"gw",cap:null,p:29,lat:34.95,lon:-116.86}, {n:30,f:"Cajon Maintenance Station",a:"Caltrans",c:"San Bernardino",s:"gw",cap:null,p:0,st:"lt1",lat:34.32,lon:-117.46}, {n:31,f:"Chino Desalter II",a:"Chino Desalter Authority / IEUA",c:"San Bernardino",s:"gw",cap:36989,p:23669,lat:33.99,lon:-117.53}, {n:32,f:"Chino Desalter I",a:"Chino Desalter Authority / IEUA",c:"San Bernardino",s:"gw",cap:15917,p:15493,lat:33.97,lon:-117.69}, {n:33,f:"Tustin 17th Street Desalter",a:"City of Tustin",c:"Orange",s:"gw",cap:3363,p:2843,lat:33.76,lon:-117.81}, {n:34,f:"Wells 21 and 22 Desalter",a:"Irvine Ranch Water District",c:"Orange",s:"gw",cap:6400,p:2295,lat:33.74,lon:-117.78}, {n:35,f:"Irvine Potable Treatment Plant",a:"Irvine Ranch Water District",c:"Orange",s:"gw",cap:5600,p:2861,lat:33.70,lon:-117.74}, {n:36,f:"San Juan Capistrano Groundwater Recovery Plant",a:"City of San Juan Capistrano",c:"Orange",s:"gw",cap:5761,p:1701,lat:33.50,lon:-117.66}, {n:37,f:"South Coast WD Groundwater Recovery Facility",a:"South Coast Water District",c:"Orange",s:"gw",cap:1121,p:844,lat:33.47,lon:-117.70}, {n:38,f:"Arlington Basin Groundwater Desalter",a:"Western MWD of Riverside",c:"Riverside",s:"gw",cap:null,p:4814,lat:33.92,lon:-117.45}, {n:39,f:"Temescal Basin Desalter",a:"City of Corona",c:"Riverside",s:"gw",cap:11209,p:10835,lat:33.86,lon:-117.57}, {n:40,f:"Desert Center Maintenance Station",a:"Caltrans",c:"Riverside",s:"gw",cap:null,p:0,st:"lt1",lat:33.71,lon:-115.40}, {n:41,f:"Menifee Basin Desalter",a:"Eastern Municipal Water District",c:"Riverside",s:"gw",cap:3360,p:9565,lat:33.68,lon:-117.20}, {n:42,f:"Perris I Desalter",a:"Eastern Municipal Water District",c:"Riverside",s:"gw",cap:7500,p:null,st:"nodata",lat:33.77,lon:-117.23}, {n:43,f:"Oceanside Mission Basin Brackish Groundwater Desalter",a:"City of Oceanside",c:"San Diego",s:"gw",cap:7130,p:2302,lat:33.22,lon:-117.34}, {n:44,f:"Carlsbad Seawater Desalination Facility",a:"San Diego County Water Authority (Poseidon)",c:"San Diego",s:"sw",cap:null,p:40780,lat:33.14,lon:-117.34}, {n:45,f:"Richard A. Reynolds Groundwater Desalination Facility",a:"Sweetwater Authority",c:"San Diego",s:"gw",cap:8800,p:7161,lat:32.63,lon:-117.05} ]; const planned = [ {f:"North Pleasant Valley Groundwater Desalter",a:"City of Camarillo",c:"Ventura",s:"gw",cap:3877,yr:2022,st:"Operating",lat:34.24,lon:-119.04}, {f:"Moorpark Groundwater Desalter",a:"Ventura County Waterworks District No. 1",c:"Ventura",s:"gw",cap:5000,yr:2030,st:"Planned",lat:34.28,lon:-118.88}, {f:"Los Robles Desalter",a:"City of Thousand Oaks",c:"Ventura",s:"gw",cap:500,yr:2025,st:"Planned",lat:34.17,lon:-118.84}, {f:"Point Mugu",a:"United Water Conservation District",c:"Ventura",s:"gw",cap:5000,yr:2030,st:"Planned",lat:34.10,lon:-119.09}, {f:"Regional Brackish Water Reclamation Program (Goldsworthy expansion)",a:"Water Replenishment District",c:"Los Angeles",s:"gw",cap:10000,yr:2027,st:"Planned",lat:33.85,lon:-118.34}, {f:"Perris II Desalter",a:"Eastern Municipal Water District",c:"Riverside",s:"gw",cap:5400,yr:2022,st:"Operating",lat:33.79,lon:-117.19}, {f:"Twentynine Palms Treatment and Blending Facility",a:"Naval Facilities Command",c:"San Bernardino",s:"gw",cap:3363,yr:2022,st:"Operating",lat:34.23,lon:-116.06}, {f:"Rainbow MWD Desalination Facility",a:"Rainbow Municipal Water District",c:"San Diego",s:"gw",cap:2000,yr:2030,st:"Planned",lat:33.41,lon:-117.15}, {f:"San Dieguito Basin Desalter",a:"Olivenhain Municipal Water District",c:"San Diego",s:"gw",cap:1120,yr:2028,st:"Planned",lat:33.03,lon:-117.20}, {f:"Rancho Del Rey Groundwater Well Project",a:"Otay Water District",c:"San Diego",s:"gw",cap:500,yr:2035,st:"Planned",lat:32.63,lon:-117.00}, {f:"Fort Bragg",a:"City of Fort Bragg",c:"Mendocino",s:"sw",cap:2,yr:2022,st:"Operating (brackish surface water)",lat:39.44,lon:-123.80}, {f:"Antioch",a:"City of Antioch",c:"Contra Costa",s:"sw",cap:3000,yr:2025,st:"In construction (brackish surface water)",lat:38.00,lon:-121.81}, {f:"Monterey Coastal Water Desalination Project",a:"California American Water",c:"Monterey",s:"sw",cap:6252,yr:2030,st:"Planned",lat:36.72,lon:-121.79}, {f:"Doheny Ocean Desalination Project",a:"South Coast Water District",c:"Orange",s:"sw",cap:5600,yr:2025,st:"Planned (expansion to 16,802 af/yr in 2035)",lat:33.46,lon:-117.68} ]; const nonPotable = [ {f:"Energy Center San Francisco",a:"San Francisco Public Utilities",c:"San Francisco",s:"gw",cap:92,lat:37.78,lon:-122.40}, {f:"Moss Landing",a:"Dynegy",c:"Monterey",s:"sw",cap:null,lat:36.80,lon:-121.78}, {f:"Monterey Bay Aquarium Desalination Facility",a:"Monterey Bay Aquarium",c:"Monterey",s:"sw",cap:null,lat:36.62,lon:-121.90}, {f:"Diablo Canyon",a:"PG&E",c:"San Luis Obispo",s:"sw",cap:708,lat:35.21,lon:-120.85}, {f:"Gaviota",a:"Chevron",c:"Santa Barbara",s:"sw",cap:323,lat:34.47,lon:-120.22} ]; // Labels const LABEL_MOVES = { main: {2:{x:112,y:384,anchor:"end"},1:{x:142,y:346,anchor:"start"},3:{x:110,y:426,anchor:"end"},25:{dx:10,dy:-4,anchor:"start"}}, inset: {11:{dx:11,dy:-5,anchor:"start"},12:{x:581,y:160,anchor:"end"},14:{x:588,y:204,anchor:"middle"},22:{x:704,y:230,anchor:"end"},32:{x:800,y:184,anchor:"end"},31:{x:848,y:178,anchor:"middle"},38:{x:872,y:214,anchor:"start"},39:{x:836,y:292,anchor:"end"},33:{x:760,y:246,anchor:"end"},34:{x:760,y:260,anchor:"end"},35:{x:760,y:274,anchor:"end"},36:{x:748,y:302,anchor:"end"},41:{x:898,y:290,anchor:"middle"},43:{x:866,y:344,anchor:"end"},44:{x:878,y:404,anchor:"middle"},45:{x:908,y:462,anchor:"end"}} }; const SHORT = {1:"Mocho",2:"Newark",3:"Sand City",11:"Santa Barbara",12:"Oxnard",14:"Port Hueneme",19:"Beverly Hills",22:"Goldsworthy",25:"Fort Irwin",31:"Chino II",32:"Chino I",33:"Tustin",34:"IRWD Wells 21/22",35:"Irvine PTP",36:"San Juan Capistrano",38:"Arlington",39:"Temescal",41:"Menifee",43:"Oceanside",44:"Carlsbad",45:"Reynolds (Sweetwater)"}; // Totals const totalGW = 105982; const totalSW = 43975; const total = totalGW + totalSW; const reporting = facilities.filter(d => d.p != null).length; const carlsbad = facilities.find(d => d.n === 44).p; const chino = facilities.find(d => d.n === 31).p + facilities.find(d => d.n === 32).p; // Format const fmtAF = v => v == null ? "n/a" : v >= 1000 ? (v / 1000).toFixed(1) + "K" : v < 1 ? "<1" : Math.round(v).toLocaleString("en-US"); const fmtH = v => v >= 1000 ? (v / 1000).toFixed(1) + "K" : Math.round(v).toString(); const pct = v => (100 * v / total).toFixed(1) + "%"; const srcName = d => d.s === "sw" ? "Seawater" : "Brackish groundwater"; const color = d => d.s === "sw" ? NB_RED : NB_BLUE; // Basemap const us = await d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json"); const caCounties = {type:"GeometryCollection", geometries: us.objects.counties.geometries.filter(g => g.id.startsWith("06"))}; const caLand = topojson.merge(us, caCounties.geometries); const caBorders = topojson.mesh(us, caCounties, (a, b) => a !== b); // Root const root = document.createElement("div"); root.style.cssText = "position:relative;width:" + W + "px;height:" + H + "px;background:" + WHITE + ";font-family:" + SANS + ";box-sizing:border-box;"; const svg = d3.select(root).append("svg").attr("width", W).attr("height", H).attr("viewBox", "0 0 " + W + " " + H).style("display", "block"); // Titles svg.append("text").attr("x", PAD).attr("y", 40).attr("font-family", SERIF).attr("font-weight", 700).attr("font-size", 30).attr("fill", NB_BLUE).text("California Desalination Facilities By 2020 Potable Production"); svg.append("text").attr("x", PAD).attr("y", 64).attr("font-size", 14).attr("fill", NB_RED).text("Circle area = 2020 potable production in acre-feet; dashed circles = planned or restarted capacity through 2040; squares = non-potable plants"); svg.append("text").attr("x", PAD).attr("y", 82).attr("font-size", 12).attr("fill", NB_BLUE).text("Blue = brackish groundwater · Red = seawater · Labels shown for facilities above roughly 1,500 acre-feet"); // Scales const rScale = d3.scaleSqrt().domain([0, 41000]).range([0, 26]); const rOf = d => d.p == null || d.p < 1 ? 2.5 : Math.max(3, rScale(d.p)); const rPlan = d => Math.max(3.5, rScale(d.cap)); // Tooltip const tip = document.createElement("div"); tip.style.cssText = "position:absolute;display:none;pointer-events:none;background:" + WHITE + ";border:1px solid " + NB_GREY + ";padding:8px 10px;font-size:12px;line-height:1.35;color:" + NB_BLUE + ";max-width:260px;box-shadow:0 1px 4px rgba(0,0,0,0.12);z-index:5;"; root.appendChild(tip); const showTip = (ev, html) => { tip.innerHTML = html; tip.style.display = "block"; const r = root.getBoundingClientRect(); let x = ev.clientX - r.left + 14, y = ev.clientY - r.top + 12; if (x > W - 280) x = ev.clientX - r.left - 274; tip.style.left = x + "px"; tip.style.top = y + "px"; }; const hideTip = () => { tip.style.display = "none"; }; const facHTML = d => { const homes = d.p != null && d.p >= 1 ? "
≈ " + fmtH(d.p * 2) + "–" + fmtH(d.p * 3) + " households of four (DWR rule of thumb: 1 af/yr ≈ 2–3)" : ""; const status = d.st === "inactive" ? "Inactive in 2020" : d.st === "nodata" ? "No 2020 production reported" : d.st === "lt1" ? "Under 1 af in 2020" : null; return "" + d.f + "
" + d.a + " · " + d.c + " County
Source: " + srcName(d) + "
Capacity: " + (d.capNote || (d.cap != null ? fmtAF(d.cap) + " af/yr" : "not reported")) + "
2020 production: " + (d.p != null ? fmtAF(d.p) + " af" : "—") + (d.p >= 1 ? " (" + pct(d.p) + " of state)" : "") + (status ? "
" + status : "") + homes; }; const planHTML = d => "" + d.f + "
" + d.a + " · " + d.c + " County
Source: " + srcName(d) + "
Planned capacity: " + fmtAF(d.cap) + " af/yr · " + d.yr + "
Status (2023): " + d.st; const npHTML = d => "" + d.f + "
" + d.a + " · " + d.c + " County
Source: " + srcName(d) + "
Non-potable; capacity " + (d.cap != null ? fmtAF(d.cap) + " af/yr" : "not reported") + " · production not published"; // Map const drawMap = (g, projection, bounds, key, box) => { const path = d3.geoPath(projection); const clip = "clip-" + key; g.append("clipPath").attr("id", clip).append("rect").attr("x", box.x).attr("y", box.y).attr("width", box.w).attr("height", box.h); const layer = g.append("g").attr("clip-path", "url(#" + clip + ")"); layer.append("rect").attr("x", box.x).attr("y", box.y).attr("width", box.w).attr("height", box.h).attr("fill", WHITE); layer.append("path").datum(caLand).attr("d", path).attr("fill", NB_GREY).attr("stroke", WHITE).attr("stroke-width", 0.6); layer.append("path").datum(caBorders).attr("d", path).attr("fill", "none").attr("stroke", WHITE).attr("stroke-width", 0.6).attr("pointer-events", "none"); const inBox = d => d.lon >= bounds[0][0] && d.lon <= bounds[1][0] && d.lat >= bounds[0][1] && d.lat <= bounds[1][1]; const pf = facilities.filter(inBox), pp = planned.filter(inBox), pn = nonPotable.filter(inBox); const xy = d => projection([d.lon, d.lat]); layer.selectAll("rect.np").data(pn).join("rect").attr("class", "np") .attr("x", d => xy(d)[0] - 3.5).attr("y", d => xy(d)[1] - 3.5).attr("width", 7).attr("height", 7) .attr("fill", WHITE).attr("stroke", d => color(d)).attr("stroke-width", 1.2) .on("mousemove", (ev, d) => showTip(ev, npHTML(d))).on("mouseleave", hideTip); layer.selectAll("circle.plan").data(pp).join("circle").attr("class", "plan") .attr("cx", d => xy(d)[0]).attr("cy", d => xy(d)[1]).attr("r", d => rPlan(d)) .attr("fill", "none").attr("stroke", d => color(d)).attr("stroke-width", 1.2).attr("stroke-dasharray", "3,2") .on("mousemove", (ev, d) => showTip(ev, planHTML(d))).on("mouseleave", hideTip); layer.selectAll("circle.fac").data(pf.slice().sort((a, b) => rOf(b) - rOf(a))).join("circle").attr("class", "fac") .attr("cx", d => xy(d)[0]).attr("cy", d => xy(d)[1]).attr("r", d => rOf(d)) .attr("fill", d => d.st === "inactive" || d.st === "nodata" ? WHITE : color(d)) .attr("fill-opacity", d => d.st === "inactive" || d.st === "nodata" ? 1 : 0.62) .attr("stroke", d => color(d)).attr("stroke-width", 1) .on("mousemove", (ev, d) => showTip(ev, facHTML(d))).on("mouseleave", hideTip); const moves = LABEL_MOVES[key]; const labeled = pf.filter(d => moves[d.n]); const lx = d => moves[d.n].x != null ? moves[d.n].x : xy(d)[0] + moves[d.n].dx; const ly = d => moves[d.n].y != null ? moves[d.n].y : xy(d)[1] + moves[d.n].dy + 4; layer.selectAll("line.lead").data(labeled.filter(d => moves[d.n].x != null)).join("line").attr("class", "lead") .attr("x1", d => { const [cx, cy] = xy(d), ax = lx(d) + (moves[d.n].anchor === "end" ? 3 : moves[d.n].anchor === "start" ? -3 : 0), ay = ly(d) - 4; const dx = ax - cx, dy = ay - cy, L = Math.hypot(dx, dy); return cx + dx / L * (rOf(d) + 1); }) .attr("y1", d => { const [cx, cy] = xy(d), ax = lx(d) + (moves[d.n].anchor === "end" ? 3 : moves[d.n].anchor === "start" ? -3 : 0), ay = ly(d) - 4; const dx = ax - cx, dy = ay - cy, L = Math.hypot(dx, dy); return cy + dy / L * (rOf(d) + 1); }) .attr("x2", d => lx(d) + (moves[d.n].anchor === "end" ? 3 : moves[d.n].anchor === "start" ? -3 : 0)) .attr("y2", d => ly(d) - 4) .attr("stroke", NB_BLUE).attr("stroke-width", 0.7).attr("pointer-events", "none"); layer.selectAll("text.lab").data(labeled).join("text").attr("class", "lab") .attr("x", d => lx(d)).attr("y", d => ly(d)) .attr("text-anchor", d => moves[d.n].anchor).attr("font-size", 11).attr("fill", NB_BLUE) .attr("stroke", WHITE).attr("stroke-width", 3).attr("paint-order", "stroke").attr("pointer-events", "none") .text(d => SHORT[d.n] + " " + fmtAF(d.p)); }; // Main const mainBox = {x: PAD, y: HEADER_H, w: MAIN_W, h: MAP_H}; const mainProj = d3.geoConicConformal().parallels([34, 40.5]).rotate([120, 0]).fitExtent([[mainBox.x + 6, mainBox.y + 6], [mainBox.x + mainBox.w - 6, mainBox.y + mainBox.h - 6]], caLand); const gMain = svg.append("g"); drawMap(gMain, mainProj, [[-125, 32], [-114, 42.1]], "main", mainBox); // Inset const insetBounds = [[-119.85, 32.5], [-116.75, 34.55]]; const insetBox = {x: INSET_X, y: HEADER_H, w: INSET_W, h: INSET_H}; const insetProj = d3.geoConicConformal().parallels([33, 34.5]).rotate([118.5, 0]); const insetFrame = {type:"Polygon", coordinates:[[[insetBounds[0][0], insetBounds[0][1]], [insetBounds[0][0], insetBounds[1][1]], [insetBounds[1][0], insetBounds[1][1]], [insetBounds[1][0], insetBounds[0][1]], [insetBounds[0][0], insetBounds[0][1]]]]}; insetProj.fitExtent([[insetBox.x, insetBox.y], [insetBox.x + insetBox.w, insetBox.y + insetBox.h]], insetFrame); const gInset = svg.append("g"); drawMap(gInset, insetProj, insetBounds, "inset", insetBox); svg.append("rect").attr("x", insetBox.x).attr("y", insetBox.y).attr("width", insetBox.w).attr("height", insetBox.h).attr("fill", "none").attr("stroke", NB_BLUE).attr("stroke-width", 1).attr("pointer-events", "none"); svg.append("text").attr("x", insetBox.x + 8).attr("y", insetBox.y + insetBox.h - 8).attr("font-size", 11).attr("fill", NB_RED).attr("pointer-events", "none").text("Southern California detail"); // Extent const mainPath = d3.geoPath(mainProj); gMain.append("path").datum(insetFrame).attr("d", mainPath).attr("fill", "none").attr("stroke", NB_BLUE).attr("stroke-width", 1).attr("stroke-dasharray", "4,3").attr("pointer-events", "none"); // Callout const calloutX = INSET_X, calloutY = HEADER_H + INSET_H + 16, calloutW = INSET_W, calloutH = MAP_H - INSET_H - 16; const gCall = svg.append("g").attr("pointer-events", "none"); gCall.append("rect").attr("x", calloutX).attr("y", calloutY).attr("width", calloutW).attr("height", calloutH).attr("fill", WHITE).attr("stroke", NB_GREY); gCall.append("text").attr("x", calloutX + 12).attr("y", calloutY + 22).attr("font-size", 13).attr("fill", NB_RED).text("2020 Potable Production"); const calloutLines = [ ["Statewide total", fmtAF(total) + " af", NB_BLUE], ["Brackish groundwater", fmtAF(totalGW) + " af · " + pct(totalGW), NB_BLUE], ["Seawater", fmtAF(totalSW) + " af · " + pct(totalSW), NB_RED], ["Facilities reporting 2020 production", reporting + " of " + facilities.length, NB_BLUE], ["Carlsbad alone", fmtAF(carlsbad) + " af · " + pct(carlsbad), NB_RED], ["Chino Desalter I + II", fmtAF(chino) + " af · " + pct(chino), NB_BLUE], ["Households served, DWR rule of thumb", fmtH(total * 2) + "–" + fmtH(total * 3), NB_BLUE] ]; calloutLines.forEach((l, i) => { const y = calloutY + 40 + i * 17; gCall.append("text").attr("x", calloutX + 12).attr("y", y).attr("font-size", 12).attr("fill", NB_BLUE).text(l[0]); gCall.append("text").attr("x", calloutX + calloutW - 12).attr("y", y).attr("text-anchor", "end").attr("font-size", 12).attr("fill", l[2]).text(l[1]); }); // Legend const gLeg = svg.append("g").attr("pointer-events", "none"); gLeg.append("text").attr("x", PAD).attr("y", LEG_Y + 12).attr("font-size", 11).attr("fill", NB_RED).text("2020 Production, Acre-Feet"); [[40000, "40K"], [10000, "10K"], [1000, "1K"]].forEach(sz => { const r = rScale(sz[0]); const cy = LEG_Y + 74 - r; gLeg.append("circle").attr("cx", PAD + 28).attr("cy", cy).attr("r", r).attr("fill", "none").attr("stroke", NB_BLUE).attr("stroke-width", 1); gLeg.append("line").attr("x1", PAD + 28).attr("y1", cy - r).attr("x2", PAD + 62).attr("y2", cy - r).attr("stroke", NB_GREY).attr("stroke-width", 0.6); gLeg.append("text").attr("x", PAD + 66).attr("y", cy - r + 4).attr("font-size", 11).attr("fill", NB_BLUE).text(sz[1]); }); const legItems = [ {x: PAD + 140, y: LEG_Y + 34, type: "fill", col: NB_BLUE, t: "Brackish groundwater, 2020 production (measured)"}, {x: PAD + 440, y: LEG_Y + 34, type: "fill", col: NB_RED, t: "Seawater, 2020 production (measured)"}, {x: PAD + 140, y: LEG_Y + 58, type: "hollow", col: NB_BLUE, t: "Inactive or no 2020 production reported"}, {x: PAD + 440, y: LEG_Y + 58, type: "dash", col: NB_BLUE, t: "Planned or restarted capacity, 2022–2040 (planned)"}, {x: PAD + 730, y: LEG_Y + 58, type: "square", col: NB_BLUE, t: "Non-potable plant, production not published"} ]; legItems.forEach(r => { if (r.type === "square") gLeg.append("rect").attr("x", r.x - 3.5).attr("y", r.y - 3.5).attr("width", 7).attr("height", 7).attr("fill", WHITE).attr("stroke", r.col).attr("stroke-width", 1.2); else gLeg.append("circle").attr("cx", r.x).attr("cy", r.y).attr("r", 5).attr("fill", r.type === "fill" ? r.col : WHITE).attr("fill-opacity", r.type === "fill" ? 0.62 : 1).attr("stroke", r.col).attr("stroke-width", 1.2).attr("stroke-dasharray", r.type === "dash" ? "3,2" : null); gLeg.append("text").attr("x", r.x + 12).attr("y", r.y + 4).attr("font-size", 11).attr("fill", NB_BLUE).text(r.t); }); // Citation svg.append("line").attr("x1", PAD).attr("y1", PANEL_Y).attr("x2", W - PAD).attr("y2", PANEL_Y).attr("stroke", NB_GREY).attr("stroke-width", 0.6); svg.append("text").attr("x", PAD).attr("y", PANEL_Y + 26).attr("font-size", 11).attr("fill", NB_BLUE).text("Measured = 2020 production reported to DWR (Table A-1). Planned = capacity from urban water management plans, 2023 status (Table 1). Facility positions approximate."); svg.append("text").attr("x", PAD).attr("y", PANEL_Y + 62).attr("font-size", 12).attr("fill", NB_RED).text("Source: California DWR, California Water Plan Update 2023, Desalination Resource Management Strategy, Table A-1 and Table 1, 2020 production (published Dec 2024)"); svg.append("text").attr("x", PAD).attr("y", PANEL_Y + 82).attr("font-size", 13).attr("font-weight", 700).attr("fill", NB_RED).text("North Branch Media"); return root; })()32:[] 2f:{"title":"California Desalination Facilities By 2020 Potable Production","cells":[{"id":6,"value":"# California Desalination Facilities By 2020 Potable Production","pinned":true,"hidden":false,"mode":"md"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ts"},{"id":1,"value":"# California Desalination Facilities By 2020 Potable Production","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}