chart = { const root = html`

${settings.title}

${settings.subtitle}

${settings.milestoneLabel}

${settings.prelude}

${m.date}${m.text}

Source: ${settings.sourceLabel}. ${settings.sourceDetail} ${settings.milestoneSource}

${settings.tableLabel}

${data.map(d => html``)}

${settings.rateLabel}: new firms as a share of all US employer firms
Year	${settings.rateLabel}	${settings.newFirmsLabel}	${settings.allFirmsLabel}
${d.year}	${d.rate.toFixed(2)}%	${d.newFirms.toLocaleString("en-US")}	${d.allFirms.toLocaleString("en-US")}

`; root.prepend(styles.cloneNode(true)); const color = theme.colors, header = theme.header; const cssVars = { "font": theme.fontFamily, "surface": theme.surface, "text": color.gray.dark, "secondary": color.blue.dark, "blue": color.blue.base, "green": color.green.strong, "gray": color.gray.medium, "guide": color.gray.light, "header-gap": header.gap+"px", "logo-size": header.logoSize+"px", "title-size": header.title.size+"px", "title-weight": header.title.weight, "title-line": header.title.lineHeight, "title-spacing": header.title.letterSpacing+"px", "subtitle-size": header.subtitle.size+"px", "subtitle-line": header.subtitle.lineHeight, "compact-gap": header.compact.gap+"px", "compact-logo": header.compact.logoSize+"px", "compact-title": header.compact.titleSize+"px", "compact-line": header.compact.titleLineHeight, "compact-spacing": header.compact.titleLetterSpacing+"px", "compact-subtitle": header.compact.subtitleSize+"px", "narrow-title": header.narrow.titleSize+"px" }; for (const [key,value] of Object.entries(cssVars)) root.style.setProperty("--tl-"+key, value); const plot = root.querySelector(".tl-plot"), mobileTimeline = root.querySelector(".tl-mobile-timeline"); const tooltip = root.querySelector(".tl-tooltip"), tipBody = root.querySelector(".tl-tip-body"); const ns = "http://www.w3.org/2000/svg"; let pinned = false, activeIndex = data.length-1, currentWidth = 0; let hideTooltip = () => { tooltip.hidden = true; pinned = false; }; root.querySelector(".tl-tip-close").addEventListener("click", () => hideTooltip()); root.addEventListener("keydown", e => { if(e.key === "Escape") hideTooltip(); }); function element(tag, attrs = {}, text = null, parent = null) { const n = document.createElementNS(ns,tag); for (const [key,value] of Object.entries(attrs)) n.setAttribute(key,value); if(text !== null) n.textContent = text; if(parent) parent.append(n); return n; } function render(measuredWidth) { const w = Math.max(220,Math.round(measuredWidth)); if(w === currentWidth) return; currentWidth = w; hideTooltip(); const compact = w < settings.desktopBreakpoint; const h = compact ? settings.mobileHeight : settings.desktopHeight; const margin = {top:compact?25:30,right:compact?12:16,bottom:compact?36:38,left:compact?33:39}; const left=margin.left,right=w-margin.right,top=margin.top,bottom=h-margin.bottom; const x = yr => left+(yr-settings.xDomain[0])/(settings.xDomain[1]-settings.xDomain[0])*(right-left); const y = rate => bottom-(rate-settings.yDomain[0])/(settings.yDomain[1]-settings.yDomain[0])*(bottom-top); mobileTimeline.style.display = compact ? "block" : "none"; const description = "US firm startup rate, 1978 to 2023. 13.71% in 1978; a low of 7.56% in 2010; 9.10% in 2023. "+ (compact ? "Movement milestones are listed below. " : settings.prelude+". "+milestones.map(m=>m.date+": "+m.text).join(". ")+". ")+ "Data cover employer firms only."; const svg = element("svg",{viewBox:[0,0,w,h].join(" "),width:w,height:h,role:"group","aria-label":settings.title}); element("desc",{},description,svg); plot.replaceChildren(svg); const defs=element("defs",{},null,svg); const hatchId="tl-hatch-"+Math.random().toString(36).slice(2); const hatch=element("pattern",{id:hatchId,width:6,height:6,patternUnits:"userSpaceOnUse",patternTransform:"rotate(45)"},null,defs); element("line",{x1:0,x2:0,y1:0,y2:6,stroke:color.gray.medium,"stroke-width":1,opacity:0.32},null,hatch); element("rect",{x:x(2008),y:top,width:x(2009.5)-x(2008),height:bottom-top,fill:color.blue.dark,opacity:0.07},null,svg); element("rect",{x:x(2023.5),y:top,width:right-x(2023.5),height:bottom-top,fill:"url(#"+hatchId+")"},null,svg); for(const t of [6,8,10,12,14,15]) { element("line",{x1:left,x2:right,y1:y(t),y2:y(t),stroke:color.gray.light,"stroke-width":1},null,svg); if(!compact || t!==15) element("text",{x:left-8,y:y(t)+4,"text-anchor":"end",fill:color.blue.dark,"font-size":11},t+"%",svg); } const ticks=compact ? (w<300?[1980,2000,2020]:[1980,1990,2000,2010,2020]) : [1980,1985,1990,1995,2000,2005,2010,2015,2020,2025]; for(const t of ticks) element("text",{x:x(t),y:bottom+21,"text-anchor":"middle",fill:color.blue.dark,"font-size":10.5},t,svg); const path=data.map((d,i)=>(i?"L":"M")+x(d.year).toFixed(2)+","+y(d.rate).toFixed(2)).join(" "); element("path",{d:path,fill:"none",stroke:color.blue.base,"stroke-width":2.6,"stroke-linejoin":"round","stroke-linecap":"round"},null,svg); function point(yr) { const d=data.find(d=>d.year===yr); if(d) element("circle",{cx:x(yr),cy:y(d.rate),r:compact?3.3:4.2,fill:color.green.strong,stroke:color.blue.dark,"stroke-width":1},null,svg); else element("path",{d:"M"+x(yr)+","+(bottom-8)+"l-4.5,8h9z",fill:color.green.strong,stroke:color.blue.dark,"stroke-width":0.8},null,svg); } for(const m of milestones) { m.points.forEach(point); if(!compact) { const labelX=x(m.year),labelY=m.labelY*h/620; const textX=labelX+(m.side==="left"?-5:5),anchor=m.side==="left"?"end":"start"; const mainPoint=data.find(d=>d.year===m.year); const pointY=mainPoint?y(mainPoint.rate):bottom-10; const lineTo=labelYd.year===yr); element("circle",{cx:x(yr),cy:y(d.rate),r:3.8,fill:color.blue.base,stroke:"white","stroke-width":1.4},null,svg); element("text",{x:x(yr)+dx,y:y(d.rate)+dy,"text-anchor":anchor,class:"tl-outline-text",fill:color.blue.dark,"font-size":compact?11:12,"font-weight":600},text,svg); } label(1978,"13.7%",5,-12,"start"); label(2010,compact?"7.6% low":"7.6% low (2010)",compact?-3:0,compact?25:23,"middle"); label(2023,"9.1%",compact?-1:0,24,compact?"end":"middle"); if(!compact) { const pre=element("text",{x:left+12,y:25,fill:color.blue.dark,"font-size":11,"font-style":"italic"},null,svg); element("tspan",{x:left+12,dy:0},"1970s–80s: economic developers",pre); element("tspan",{x:left+12,dy:14},"see themselves as “the pirates”",pre); element("text",{x:(x(2008)+x(2009.5))/2,y:bottom-9,"text-anchor":"middle",fill:color.blue.dark,"font-size":10,"font-style":"italic",class:"tl-outline-text"},settings.recession,svg); element("text",{x:right-2,y:bottom-16,"text-anchor":"end",fill:color.blue.dark,"font-size":10,class:"tl-outline-text"},settings.noData,svg); } else { element("text",{x:x(2008)-4,y:top+3,"text-anchor":"end",fill:color.blue.dark,"font-size":9.5},settings.recession,svg); const noData=element("text",{x:right-1,y:top+3,"text-anchor":"end",fill:color.blue.dark,"font-size":9.5},null,svg); element("tspan",{x:right-1,dy:0},"No data",noData); element("tspan",{x:right-1,dy:12},"yet",noData); } const focusLine=element("line",{x1:0,x2:0,y1:top,y2:bottom,stroke:color.blue.base,"stroke-width":1,"stroke-dasharray":"3,3",visibility:"hidden","pointer-events":"none"},null,svg); const focusDot=element("circle",{r:5,fill:color.blue.base,stroke:"white","stroke-width":2,visibility:"hidden","pointer-events":"none"},null,svg); const explorer=element("rect",{x:left,y:top,width:right-left,height:bottom-top,fill:"transparent",tabindex:0,role:"slider","aria-label":"Explore startup rate by year","aria-orientation":"horizontal","aria-valuemin":data[0].year,"aria-valuemax":data[data.length-1].year,"aria-valuenow":data[activeIndex].year,"aria-valuetext":data[activeIndex].year+": "+data[activeIndex].rate.toFixed(2)+"%",class:"tl-chart-explorer"},null,svg); const hide=()=>{tooltip.hidden=true;pinned=false;focusLine.setAttribute("visibility","hidden");focusDot.setAttribute("visibility","hidden");}; hideTooltip=hide; function show(i) { activeIndex=Math.max(0,Math.min(data.length-1,i)); const d=data[activeIndex],events=milestones.filter(m=>d.year>=m.year && d.year<=m.end); const content=html`

${d.year}
${settings.rateLabel}: ${d.rate.toFixed(2)}%
${settings.newFirmsLabel}: ${d.newFirms.toLocaleString("en-US")}
${settings.allFirmsLabel}: ${d.allFirms.toLocaleString("en-US")}${events.map(m=>html`

${m.date}
${m.text}

`)}

`; tipBody.replaceChildren(content);tooltip.hidden=false; const rootRect=root.getBoundingClientRect(),svgRect=svg.getBoundingClientRect(); const anchorX=x(d.year)*svgRect.width/w+svgRect.left-rootRect.left; const anchorY=y(d.rate)*svgRect.height/h+svgRect.top-rootRect.top; const tw=tooltip.offsetWidth,th=tooltip.offsetHeight; const tx=Math.max(6,Math.min(w-tw-6,anchorX+(anchorX{if(!pinned && e.pointerType!=="touch")show(nearest(e));}); explorer.addEventListener("pointerleave",()=>{if(!pinned)hide();}); explorer.addEventListener("click",e=>{const next=nearest(e);if(pinned && next===activeIndex)hide();else{show(next);pinned=true;}}); explorer.addEventListener("focus",()=>show(activeIndex)); explorer.addEventListener("blur",()=>{if(!pinned)hide();}); explorer.addEventListener("keydown",e=>{ if(["ArrowLeft","ArrowRight","Home","End","Enter"," "].includes(e.key)) { e.preventDefault(); if(e.key==="ArrowLeft")show(activeIndex-1); else if(e.key==="ArrowRight")show(activeIndex+1); else if(e.key==="Home")show(0); else if(e.key==="End")show(data.length-1); else{pinned=!pinned;if(!pinned)hide();} } }); } // Draw after the figure is mounted and preserve table state during resizing. const observer=new ResizeObserver(entries=>render(entries[0].contentRect.width)); observer.observe(root); invalidation.then(()=>observer.disconnect()); return root; }