Spaces:

CommunityOne
/

open-navigator

Running on CPU Upgrade

File size: 115,250 Bytes

<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-integrations/frontend" data-has-hydrated=false><head><meta charset=UTF-8><meta name=generator content="Docusaurus v3.10.0"><title data-rh=true>Frontend Integration Guide | Open Navigator</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"/><meta data-rh=true property=og:image content=https://www.communityone.com/img/docusaurus-social-card.jpg /><meta data-rh=true name=twitter:image content=https://www.communityone.com/img/docusaurus-social-card.jpg /><meta data-rh=true property=og:url content=https://www.communityone.com/docs/integrations/frontend /><meta data-rh=true property=og:locale content=en /><meta data-rh=true name=docusaurus_locale content=en /><meta data-rh=true name=docsearch:language content=en /><meta data-rh=true name=keywords content="civic engagement, policy tracking, meeting minutes, nonprofit tracking, municipal government, advocacy, open data, local government"/><meta data-rh=true property=og:type content=website /><meta data-rh=true property=og:site_name content="Open Navigator"/><meta data-rh=true name=twitter:card content=summary_large_image /><meta data-rh=true name=docusaurus_version content=current /><meta data-rh=true name=docusaurus_tag content=docs-default-current /><meta data-rh=true name=docsearch:version content=current /><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-current /><meta data-rh=true property=og:title content="Frontend Integration Guide | Open Navigator"/><meta data-rh=true name=description content="Complete guide for integrating the React Policy Accountability Dashboards with the Python backend."/><meta data-rh=true property=og:description content="Complete guide for integrating the React Policy Accountability Dashboards with the Python backend."/><link data-rh=true rel=icon href=/img/favicon.ico /><link data-rh=true rel=canonical href=https://www.communityone.com/docs/integrations/frontend /><link data-rh=true rel=alternate href=https://www.communityone.com/docs/integrations/frontend hreflang=en /><link data-rh=true rel=alternate href=https://www.communityone.com/docs/integrations/frontend hreflang=x-default /><script data-rh=true type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","item":"https://www.communityone.com/docs/for-developers","name":"Developers & Technical Users","position":1},{"@type":"ListItem","item":"https://www.communityone.com/docs/integrations/frontend","name":"Frontend Integration Guide","position":2}]}</script><link rel=alternate type=application/rss+xml href=/blog/rss.xml title="Open Navigator RSS Feed"><link rel=alternate type=application/atom+xml href=/blog/atom.xml title="Open Navigator Atom Feed"><link rel=preconnect href=https://www.google-analytics.com><link rel=preconnect href=https://www.googletagmanager.com><script async src="https://www.googletagmanager.com/gtag/js?id=G-5EQV815915"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-5EQV815915",{anonymize_ip:!0})</script><link rel=stylesheet href=/assets/css/styles.c89d6b2d.css /><script src=/assets/js/runtime~main.c8fa085e.js defer></script><script src=/assets/js/main.6e24e536.js defer></script></head><body><svg style="display: none;"><defs>
<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
</defs></svg>
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme-7e9")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><link rel=preload as=image href=/img/communityone_logo.svg /><script type=application/ld+json>{"@context":"https://schema.org","@type":"Organization","address":{"@type":"PostalAddress","addressCountry":"US","addressLocality":"Tuscaloosa","addressRegion":"AL","postalCode":"35406","streetAddress":"5617 Lakeridge Court"},"contactPoint":{"@type":"ContactPoint","availableLanguage":["English"],"contactType":"Customer Service","email":"johnbowyer@communityone.com"},"description":"Track 90,000+ jurisdictions, 1.8M nonprofits, and analyze meeting minutes with AI. The open path to everything local.","email":"johnbowyer@communityone.com","legalName":"CommunityOne","logo":"https://www.communityone.com/img/communityone_logo.svg","name":"CommunityOne","sameAs":["https://www.facebook.com/communityone","https://www.instagram.com/communityone","https://twitter.com/communityone","https://www.linkedin.com/company/communityone","https://www.youtube.com/@communityone","https://discord.gg/communityone","https://github.com/getcommunityone/open-navigator"],"url":"https://www.communityone.com"}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebSite","alternateName":"CommunityOne Open Navigator","description":"AI-powered civic engagement platform tracking jurisdictions, nonprofits, and government meetings","name":"Open Navigator","potentialAction":{"@type":"SearchAction","query-input":"required name=search_term_string","target":{"@type":"EntryPoint","urlTemplate":"https://www.communityone.com/search?q={search_term_string}"}},"url":"https://www.communityone.com"}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"SoftwareApplication","aggregateRating":{"@type":"AggregateRating","ratingCount":"1","ratingValue":"5"},"applicationCategory":"BusinessApplication","description":"Track 90,000+ jurisdictions, 1.8M nonprofits, and analyze meeting minutes with AI","featureList":["Track 90,000+ jurisdictions","Monitor 1.8M nonprofits","Analyze meeting minutes","Legislative bill tracking","Campaign finance data"],"name":"Open Navigator","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"operatingSystem":"Web","screenshot":"https://www.communityone.com/img/docusaurus-social-card.jpg","softwareVersion":"1.0.0"}</script><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a href=https://www.communityone.com target=_self rel="noopener noreferrer" class=navbar__brand><div class=navbar__logo><img src=/img/communityone_logo.svg alt="CommunityOne Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"/><img src=/img/communityone_logo.svg alt="CommunityOne Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"/></div><b class="navbar__title text--truncate">Open Navigator Home</b></a><a class="navbar__item navbar__link" href=/docs/intro>Getting Started</a><a class="navbar__item navbar__link" href=/docs/for-families>Families & Individuals</a><a class="navbar__item navbar__link" href=/docs/for-advocates>Policy Makers</a><a class="navbar__item navbar__link" href=/docs/for-developers>Developers</a><a class="navbar__item navbar__link" href=/docs/data-sources/citations>Data and Terms</a><a class="navbar__item navbar__link" href=/blog>Blog</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href=https://github.com/getcommunityone/open-navigator-for-engagement target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width=13.5 height=13.5 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_Bca1></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class=sidebarViewport_aRkj><div class=sidebar_njMd><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=true href=/docs/intro><span title="Getting Started" class=categoryLinkLabel_W154>Getting Started</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/intro><span title=Introduction class=linkLabel_WmDU>Introduction</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/open-navigator><span title="Open Navigator" class=linkLabel_WmDU>Open Navigator</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist" href=/docs/for-families><span title="Families & Individuals" class=categoryLinkLabel_W154>Families & Individuals</span></a><button aria-label="Collapse sidebar category 'Families & Individuals'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul class=menu__list><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false tabindex=0 href=/docs/families/community-events><span title="Resources for Families" class=categoryLinkLabel_W154>Resources for Families</span></a></div><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/open-navigator><span title="Getting Started with Open Navigator" class=linkLabel_WmDU>Getting Started with Open Navigator</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/docs/data-sources/citations><span title="Data and Citations" class=linkLabel_WmDU>Data and Citations</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist" href=/docs/for-advocates><span title="Policy Makers & Advocates" class=categoryLinkLabel_W154>Policy Makers & Advocates</span></a><button aria-label="Collapse sidebar category 'Policy Makers & Advocates'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul class=menu__list><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false tabindex=0 href=/docs/data-sources/overview><span title="Understanding the Data" class=categoryLinkLabel_W154>Understanding the Data</span></a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false tabindex=0 href=/docs/guides/political-economy><span title="Analysis & Strategy" class=categoryLinkLabel_W154>Analysis & Strategy</span></a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false tabindex=0 href=/docs/case-studies/tuscaloosa-complete><span title="Real-World Examples" class=categoryLinkLabel_W154>Real-World Examples</span></a></div></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--active" href=/docs/for-developers><span title="Developers & Technical Users" class=categoryLinkLabel_W154>Developers & Technical Users</span></a><button aria-label="Collapse sidebar category 'Developers & Technical Users'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul class=menu__list><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false tabindex=0 href=/docs/quickstart><span title="Setup & Installation" class=categoryLinkLabel_W154>Setup & Installation</span></a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false tabindex=0 href=/docs/data-sources/citations><span title="Data Sources (Technical)" class=categoryLinkLabel_W154>Data Sources (Technical)</span></a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false tabindex=0 href=/docs/guides/jurisdiction-setup><span title="How-To Guides" class=categoryLinkLabel_W154>How-To Guides</span></a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role=button aria-expanded=true tabindex=0 href=/docs/integrations/mcp-server><span title=Integrations class=categoryLinkLabel_W154>Integrations</span></a></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integrations/mcp-server><span title="Model Context Protocol (MCP) Server" class=linkLabel_WmDU>Model Context Protocol (MCP) Server</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integrations/grants-gov-api><span title="Grants.gov API Integration" class=linkLabel_WmDU>Grants.gov API Integration</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integrations/fec-political-contributions><span title="FEC Political Contributions" class=linkLabel_WmDU>FEC Political Contributions</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integrations/fec-campaign-finance><span title="FEC Campaign Finance Integration" class=linkLabel_WmDU>FEC Campaign Finance Integration</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integrations/dataverse-summary><span title="🎉 Harvard Dataverse Integration - Complete!" class=linkLabel_WmDU>🎉 Harvard Dataverse Integration - Complete!</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integrations/dataverse><span title="📚 Dataverse API Integration" class=linkLabel_WmDU>📚 Dataverse API Integration</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integrations/eboard-automated><span title="Automated eBoard Scraping Solutions" class=linkLabel_WmDU>Automated eBoard Scraping Solutions</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integrations/eboard-cookies><span title="eBoard Cookie Extraction Guide" class=linkLabel_WmDU>eBoard Cookie Extraction Guide</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integrations/eboard-manual><span title="eBoard Platform Manual Download Guide" class=linkLabel_WmDU>eBoard Platform Manual Download Guide</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integrations/fec-integration-summary><span title="FEC Campaign Finance Integration - Implementation Summary" class=linkLabel_WmDU>FEC Campaign Finance Integration - Implementation Summary</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/docs/integrations/frontend><span title="Frontend Integration Guide" class=linkLabel_WmDU>Frontend Integration Guide</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integrations/localview><span title="📚 LocalView Integration Guide" class=linkLabel_WmDU>📚 LocalView Integration Guide</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class=menu__link tabindex=0 href=/docs/integrations/overview><span title="Integration Guide: Reusing Open-Source Municipal Scraping Logic" class=linkLabel_WmDU>Integration Guide: Reusing Open-Source Municipal Scraping Logic</span></a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false tabindex=0 href=/docs/deployment/databricks-apps><span title=Deployment class=categoryLinkLabel_W154>Deployment</span></a></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role=button aria-expanded=false tabindex=0 href=/docs/development/database-setup><span title=Development class=categoryLinkLabel_W154>Development</span></a></div></ul></ul></nav></div></div></aside><main class=docMainContainer_TBSr><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_VOVn"><div class=docItemContainer_Djhp><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label=Breadcrumbs><ul class=breadcrumbs><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_YNFT><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li class=breadcrumbs__item><a class=breadcrumbs__link href=/docs/for-developers><span>Developers & Technical Users</span></a><li class=breadcrumbs__item><span class=breadcrumbs__link>Integrations</span><li class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link>Frontend Integration Guide</span></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Frontend Integration Guide</h1></header>
<p>Complete guide for integrating the React Policy Accountability Dashboards with the Python backend.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=quick-start>Quick Start<a href=#quick-start class=hash-link aria-label="Direct link to Quick Start" title="Direct link to Quick Start" translate=no></a></h2>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token plain"># 1. Generate data from Python analysis</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">cd /home/developer/projects/open-navigator</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">source .venv/bin/activate</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">python examples/tuscaloosa_accountability_report.py</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># 2. Start frontend</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">cd frontend/policy-dashboards</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">npm install</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">npm start</span><br/></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=architecture>Architecture<a href=#architecture class=hash-link aria-label="Direct link to Architecture" title="Direct link to Architecture" translate=no></a></h2>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-text codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token plain">Python Backend (Data Generation)</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    ↓</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    ├── Scrape meetings (agents/scraper.py)</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    ├── Extract decisions (extraction/decision_analyzer.py)</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    ├── Calculate accountability metrics (extraction/accountability_dashboards.py)</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    ├── Generate dashboards (examples/tuscaloosa_accountability_report.py)</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    ↓</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">Output Files</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    ├── output/tuscaloosa_accountability_dashboards.json (Python format)</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    └── frontend/policy-dashboards/src/data/dashboardData.js (React format)</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    ↓</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">React Frontend (Visualization)</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    ├── Load dashboardData.js</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    ├── Render 4 dashboards + summary</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    └── Display at http://localhost:3000</span><br/></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=data-flow>Data Flow<a href=#data-flow class=hash-link aria-label="Direct link to Data Flow" title="Direct link to Data Flow" translate=no></a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=1-python-analysis>1. Python Analysis<a href=#1-python-analysis class=hash-link aria-label="Direct link to 1. Python Analysis" title="Direct link to 1. Python Analysis" translate=no></a></h3>
<div class="language-python codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-python codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic># examples/tuscaloosa_accountability_report.py</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token comment" style=color:#999988;font-style:italic># Generate all accountability dashboards</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">dashboards </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> generate_all_accountability_dashboards</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    jurisdiction</span><span class="token operator" style=color:#393A34>=</span><span class="token string" style=color:#e3116c>"Tuscaloosa, AL"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    meeting_documents</span><span class="token operator" style=color:#393A34>=</span><span class="token plain">documents</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    decisions</span><span class="token operator" style=color:#393A34>=</span><span class="token plain">all_decisions</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    budget_items</span><span class="token operator" style=color:#393A34>=</span><span class="token plain">all_budget_items</span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token comment" style=color:#999988;font-style:italic># Export for frontend (automatically called)</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">export_for_frontend</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">dashboards</span><span class="token punctuation" style=color:#393A34>)</span><br/></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=2-javascript-data-format>2. JavaScript Data Format<a href=#2-javascript-data-format class=hash-link aria-label="Direct link to 2. JavaScript Data Format" title="Direct link to 2. JavaScript Data Format" translate=no></a></h3>
<p>The export function converts Python dataclasses to JavaScript modules:</p>
<p><strong>Python:</strong></p>
<div class="language-python codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-python codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token decorator annotation punctuation" style=color:#393A34>@dataclass</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>class</span><span class="token plain"> </span><span class="token class-name">RhetoricGapMetrics</span><span class="token punctuation" style=color:#393A34>:</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    sentiment_density</span><span class="token punctuation" style=color:#393A34>:</span><span class="token plain"> </span><span class="token builtin">float</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token number" style=color:#36acaa>92.0</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    budget_change_dollars</span><span class="token punctuation" style=color:#393A34>:</span><span class="token plain"> </span><span class="token builtin">float</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>-</span><span class="token number" style=color:#36acaa>120000</span><br/></div></code></pre></div></div>
<p><strong>JavaScript:</strong></p>
<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-javascript codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> rhetoricGapData </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token literal-property property" style=color:#36acaa>sentimentScore</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token number" style=color:#36acaa>92</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token literal-property property" style=color:#36acaa>budgetDelta</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>-</span><span class="token number" style=color:#36acaa>120000</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token comment" style=color:#999988;font-style:italic>// ... more fields</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><br/></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=3-react-components>3. React Components<a href=#3-react-components class=hash-link aria-label="Direct link to 3. React Components" title="Direct link to 3. React Components" translate=no></a></h3>
<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic>// src/components/WordsVsDollars.jsx</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> rhetoricGapData </span><span class="token imports keyword module" style=color:#00009f>as</span><span class="token imports"> d </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'../data/dashboardData'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>export</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>default</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>WordsVsDollars</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token keyword control-flow" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    </span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag class-name" style=color:#00009f>MetricCard</span><span class="token tag" style=color:#00009f> </span><br/></div><div class=token-line style=color:#393A34><span class="token tag" style=color:#00009f>      </span><span class="token tag attr-name" style=color:#00a4db>value</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#393A34>=</span><span class="token tag script language-javascript punctuation" style=color:#393A34>{</span><span class="token tag script language-javascript template-string template-punctuation string" style=color:#e3116c>`</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style=color:#393A34>${</span><span class="token tag script language-javascript template-string interpolation" style=color:#00009f>d</span><span class="token tag script language-javascript template-string interpolation punctuation" style=color:#393A34>.</span><span class="token tag script language-javascript template-string interpolation property-access" style=color:#00009f>sentimentScore</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style=color:#393A34>}</span><span class="token tag script language-javascript template-string string" style=color:#e3116c>%</span><span class="token tag script language-javascript template-string template-punctuation string" style=color:#e3116c>`</span><span class="token tag script language-javascript punctuation" style=color:#393A34>}</span><span class="token tag" style=color:#00009f></span><br/></div><div class=token-line style=color:#393A34><span class="token tag" style=color:#00009f>      </span><span class="token tag attr-name" style=color:#00a4db>label</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>Positive sentiment</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><br/></div><div class=token-line style=color:#393A34><span class="token tag" style=color:#00009f>    </span><span class="token tag punctuation" style=color:#393A34>/></span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><br/></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=component-structure>Component Structure<a href=#component-structure class=hash-link aria-label="Direct link to Component Structure" title="Direct link to Component Structure" translate=no></a></h2>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-text codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token plain">frontend/policy-dashboards/src/</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">├── components/</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">│   ├── shared/                    # Reusable UI components</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">│   │   ├── BarMeter.jsx          # Horizontal bar charts</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">│   │   ├── MetricCard.jsx        # Key metric display</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">│   │   ├── Compare.jsx           # 4-column benchmark comparison</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">│   │   └── InsightBox.jsx        # Summary/logic boxes</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">│   ├── Summary.jsx               # Summary dashboard (tab 0)</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">│   ├── WordsVsDollars.jsx        # Dashboard 1: Rhetoric Gap</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">│   ├── EndlessStudyLoop.jsx      # Dashboard 2: Deferral Pattern</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">│   ├── WhereMoneyWent.jsx        # Dashboard 3: Displacement Matrix</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">│   └── WhoIsInCharge.jsx         # Dashboard 4: Influence Radar</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">├── data/</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">│   └── dashboardData.js          # ⚠️ AUTO-GENERATED FROM PYTHON</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">├── App.jsx                        # Main app shell with tabs</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">└── index.js                       # React entry point</span><br/></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=customization>Customization<a href=#customization class=hash-link aria-label="Direct link to Customization" title="Direct link to Customization" translate=no></a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=change-dashboard-titles>Change Dashboard Titles<a href=#change-dashboard-titles class=hash-link aria-label="Direct link to Change Dashboard Titles" title="Direct link to Change Dashboard Titles" translate=no></a></h3>
<p>Edit <code>src/App.jsx</code>:</p>
<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> tabs </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>[</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>id</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token number" style=color:#36acaa>0</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>label</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'Summary'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>component</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token maybe-class-name">Summary</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>id</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token number" style=color:#36acaa>1</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>label</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'Your Custom Title'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>component</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token maybe-class-name">WordsVsDollars</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token comment" style=color:#999988;font-style:italic>// ...</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>]</span><span class="token punctuation" style=color:#393A34>;</span><br/></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=update-benchmark-data>Update Benchmark Data<a href=#update-benchmark-data class=hash-link aria-label="Direct link to Update Benchmark Data" title="Direct link to Update Benchmark Data" translate=no></a></h3>
<p>Currently benchmarks use <strong>placeholder values</strong>. To add real data:</p>
<p><strong>Option 1: Update Python Export</strong></p>
<div class="language-python codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-python codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic># In examples/tuscaloosa_accountability_report.py</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>def</span><span class="token plain"> </span><span class="token function" style=color:#d73a49>calculate_real_benchmarks</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">jurisdiction</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>:</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    </span><span class="token triple-quoted-string string" style=color:#e3116c>"""Query NCES data for real benchmarks."""</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    </span><span class="token comment" style=color:#999988;font-style:italic># Query NCES Common Core of Data</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    republican_districts </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> nces_api</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">query</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">party</span><span class="token operator" style=color:#393A34>=</span><span class="token string" style=color:#e3116c>"R"</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    democratic_districts </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> nces_api</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">query</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">party</span><span class="token operator" style=color:#393A34>=</span><span class="token string" style=color:#e3116c>"D"</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    </span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    </span><span class="token keyword" style=color:#00009f>return</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">        </span><span class="token string" style=color:#e3116c>"republicanAvg"</span><span class="token punctuation" style=color:#393A34>:</span><span class="token plain"> np</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">mean</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>[</span><span class="token plain">d</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">per_student </span><span class="token keyword" style=color:#00009f>for</span><span class="token plain"> d </span><span class="token keyword" style=color:#00009f>in</span><span class="token plain"> republican_districts</span><span class="token punctuation" style=color:#393A34>]</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">        </span><span class="token string" style=color:#e3116c>"democraticAvg"</span><span class="token punctuation" style=color:#393A34>:</span><span class="token plain"> np</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">mean</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>[</span><span class="token plain">d</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">per_student </span><span class="token keyword" style=color:#00009f>for</span><span class="token plain"> d </span><span class="token keyword" style=color:#00009f>in</span><span class="token plain"> democratic_districts</span><span class="token punctuation" style=color:#393A34>]</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">        </span><span class="token comment" style=color:#999988;font-style:italic># ...</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token comment" style=color:#999988;font-style:italic># In export_for_frontend()</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">benchmarks </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> calculate_real_benchmarks</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">jurisdiction</span><span class="token punctuation" style=color:#393A34>)</span><br/></div></code></pre></div></div>
<p><strong>Option 2: Update JavaScript Directly</strong></p>
<div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-javascript codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic>// src/data/dashboardData.js</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token literal-property property" style=color:#36acaa>benchmarks</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token literal-property property" style=color:#36acaa>thisDistrict</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>perStudent</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token number" style=color:#36acaa>41</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>label</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"This District"</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token literal-property property" style=color:#36acaa>republicanAvg</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>perStudent</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token number" style=color:#36acaa>74</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token literal-property property" style=color:#36acaa>label</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"Republican Districts"</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token comment" style=color:#999988;font-style:italic>// Update these values ↑</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><br/></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=add-new-metrics>Add New Metrics<a href=#add-new-metrics class=hash-link aria-label="Direct link to Add New Metrics" title="Direct link to Add New Metrics" translate=no></a></h3>
<p><strong>1. Python Analysis</strong></p>
<div class="language-python codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-python codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic># extraction/accountability_dashboards.py</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token decorator annotation punctuation" style=color:#393A34>@dataclass</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>class</span><span class="token plain"> </span><span class="token class-name">RhetoricGapMetrics</span><span class="token punctuation" style=color:#393A34>:</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    new_metric</span><span class="token punctuation" style=color:#393A34>:</span><span class="token plain"> </span><span class="token builtin">float</span><span class="token plain">  </span><span class="token comment" style=color:#999988;font-style:italic># Add field</span><br/></div></code></pre></div></div>
<p><strong>2. Python Export</strong></p>
<div class="language-python codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-python codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic># examples/tuscaloosa_accountability_report.py</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">js_content </span><span class="token operator" style=color:#393A34>+=</span><span class="token plain"> </span><span class="token string-interpolation string" style=color:#e3116c>f"""</span><br/></div><div class=token-line style=color:#393A34><span class="token string-interpolation string" style=color:#e3116c>  newMetric: </span><span class="token string-interpolation interpolation punctuation" style=color:#393A34>{</span><span class="token string-interpolation interpolation">gap</span><span class="token string-interpolation interpolation punctuation" style=color:#393A34>.</span><span class="token string-interpolation interpolation">new_metric</span><span class="token string-interpolation interpolation punctuation" style=color:#393A34>}</span><span class="token string-interpolation string" style=color:#e3116c>,</span><br/></div><div class=token-line style=color:#393A34><span class="token string-interpolation string" style=color:#e3116c>"""</span><br/></div></code></pre></div></div>
<p><strong>3. React Component</strong></p>
<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic>// src/components/WordsVsDollars.jsx</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag class-name" style=color:#00009f>MetricCard</span><span class="token tag" style=color:#00009f> </span><br/></div><div class=token-line style=color:#393A34><span class="token tag" style=color:#00009f>  </span><span class="token tag attr-name" style=color:#00a4db>value</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#393A34>=</span><span class="token tag script language-javascript punctuation" style=color:#393A34>{</span><span class="token tag script language-javascript" style=color:#00009f>d</span><span class="token tag script language-javascript punctuation" style=color:#393A34>.</span><span class="token tag script language-javascript property-access" style=color:#00009f>newMetric</span><span class="token tag script language-javascript punctuation" style=color:#393A34>}</span><span class="token tag" style=color:#00009f> </span><br/></div><div class=token-line style=color:#393A34><span class="token tag" style=color:#00009f>  </span><span class="token tag attr-name" style=color:#00a4db>label</span><span class="token tag attr-value punctuation attr-equals" style=color:#393A34>=</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag attr-value" style=color:#e3116c>New Metric Description</span><span class="token tag attr-value punctuation" style=color:#393A34>"</span><span class="token tag" style=color:#00009f> </span><br/></div><div class=token-line style=color:#393A34><span class="token tag" style=color:#00009f></span><span class="token tag punctuation" style=color:#393A34>/></span><br/></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=change-colors>Change Colors<a href=#change-colors class=hash-link aria-label="Direct link to Change Colors" title="Direct link to Change Colors" translate=no></a></h3>
<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic>// In any component</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> colors </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token literal-property property" style=color:#36acaa>positive</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"#1D9E75"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain">   </span><span class="token comment" style=color:#999988;font-style:italic>// Green - change this</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token literal-property property" style=color:#36acaa>negative</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"#D85A30"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain">   </span><span class="token comment" style=color:#999988;font-style:italic>// Red/orange - change this</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token literal-property property" style=color:#36acaa>neutral</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>"#222"</span><span class="token plain">        </span><span class="token comment" style=color:#999988;font-style:italic>// Dark gray</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>;</span><br/></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=deployment>Deployment<a href=#deployment class=hash-link aria-label="Direct link to Deployment" title="Direct link to Deployment" translate=no></a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=option-1-static-site>Option 1: Static Site<a href=#option-1-static-site class=hash-link aria-label="Direct link to Option 1: Static Site" title="Direct link to Option 1: Static Site" translate=no></a></h3>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token plain">cd frontend/policy-dashboards</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># Build for production</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">npm run build</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># Serve the build folder</span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># Upload build/* to your web server</span><br/></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=option-2-github-pages>Option 2: GitHub Pages<a href=#option-2-github-pages class=hash-link aria-label="Direct link to Option 2: GitHub Pages" title="Direct link to Option 2: GitHub Pages" translate=no></a></h3>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token plain"># Install gh-pages</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">npm install --save-dev gh-pages</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># Add to package.json:</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">{</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  "homepage": "https://yourusername.github.io/oral-health-policy-pulse",</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  "scripts": {</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    "predeploy": "npm run build",</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    "deploy": "gh-pages -d build"</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  }</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">}</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># Deploy</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">npm run deploy</span><br/></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=option-3-netlifyvercel>Option 3: Netlify/Vercel<a href=#option-3-netlifyvercel class=hash-link aria-label="Direct link to Option 3: Netlify/Vercel" title="Direct link to Option 3: Netlify/Vercel" translate=no></a></h3>
<ol>
<li class="">Connect repository</li>
<li class="">Set build command: <code>npm run build</code></li>
<li class="">Set publish directory: <code>build</code></li>
<li class="">Deploy</li>
</ol>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=option-4-integrate-with-python-api>Option 4: Integrate with Python API<a href=#option-4-integrate-with-python-api class=hash-link aria-label="Direct link to Option 4: Integrate with Python API" title="Direct link to Option 4: Integrate with Python API" translate=no></a></h3>
<div class="language-python codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-python codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic># api/app.py (FastAPI example)</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>from</span><span class="token plain"> fastapi</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">staticfiles </span><span class="token keyword" style=color:#00009f>import</span><span class="token plain"> StaticFiles</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">app</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">mount</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    </span><span class="token string" style=color:#e3116c>"/dashboards"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    StaticFiles</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">directory</span><span class="token operator" style=color:#393A34>=</span><span class="token string" style=color:#e3116c>"frontend/policy-dashboards/build"</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> html</span><span class="token operator" style=color:#393A34>=</span><span class="token boolean" style=color:#36acaa>True</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    name</span><span class="token operator" style=color:#393A34>=</span><span class="token string" style=color:#e3116c>"dashboards"</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>)</span><br/></div></code></pre></div></div>
<p>Access at: <code>http://localhost:8000/dashboards</code></p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=workflow>Workflow<a href=#workflow class=hash-link aria-label="Direct link to Workflow" title="Direct link to Workflow" translate=no></a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=regular-updates>Regular Updates<a href=#regular-updates class=hash-link aria-label="Direct link to Regular Updates" title="Direct link to Regular Updates" translate=no></a></h3>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token plain"># 1. Scrape new data</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">python main.py scrape --state AL --municipality Tuscaloosa \</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  --url https://tuscaloosaal.suiteonemedia.com \</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  --platform suiteonemedia --max-events 0</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># 2. Run accountability analysis (auto-exports to frontend)</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">python examples/tuscaloosa_accountability_report.py</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># 3. Frontend auto-refreshes if dev server is running</span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># OR rebuild for production:</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">cd frontend/policy-dashboards && npm run build</span><br/></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=data-update-frequency>Data Update Frequency<a href=#data-update-frequency class=hash-link aria-label="Direct link to Data Update Frequency" title="Direct link to Data Update Frequency" translate=no></a></h3>
<ul>
<li class=""><strong>Monthly</strong>: Run analysis after each board meeting</li>
<li class=""><strong>Quarterly</strong>: Full benchmark recalculation</li>
<li class=""><strong>Annual</strong>: Major methodology updates</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=advanced-features>Advanced Features<a href=#advanced-features class=hash-link aria-label="Direct link to Advanced Features" title="Direct link to Advanced Features" translate=no></a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=pdf-export>PDF Export<a href=#pdf-export class=hash-link aria-label="Direct link to PDF Export" title="Direct link to PDF Export" translate=no></a></h3>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token plain">npm install html2canvas jspdf</span><br/></div></code></pre></div></div>
<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic>// src/App.jsx</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports">html2canvas</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'html2canvas'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports">jsPDF</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'jspdf'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function" style=color:#d73a49>downloadPDF</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> element </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token dom variable" style=color:#36acaa>document</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>getElementById</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'dashboard-container'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token function" style=color:#d73a49>html2canvas</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">element</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>then</span><span class="token punctuation" style=color:#393A34>(</span><span class="token parameter">canvas</span><span class="token plain"> </span><span class="token arrow operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> pdf </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>new</span><span class="token plain"> </span><span class="token class-name">jsPDF</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    pdf</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>addImage</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">canvas</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>toDataURL</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'image/png'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'PNG'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token number" style=color:#36acaa>0</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token number" style=color:#36acaa>0</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    pdf</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>save</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'tuscaloosa-accountability.pdf'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token comment" style=color:#999988;font-style:italic>// Add button:</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token tag punctuation" style=color:#393A34>&lt;</span><span class="token tag" style=color:#00009f>button</span><span class="token tag" style=color:#00009f> </span><span class="token tag attr-name" style=color:#00a4db>onClick</span><span class="token tag script language-javascript script-punctuation punctuation" style=color:#393A34>=</span><span class="token tag script language-javascript punctuation" style=color:#393A34>{</span><span class="token tag script language-javascript" style=color:#00009f>downloadPDF</span><span class="token tag script language-javascript punctuation" style=color:#393A34>}</span><span class="token tag punctuation" style=color:#393A34>></span><span class="token plain-text">Download PDF</span><span class="token tag punctuation" style=color:#393A34>&lt;/</span><span class="token tag" style=color:#00009f>button</span><span class="token tag punctuation" style=color:#393A34>></span><br/></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=presentation-mode>Presentation Mode<a href=#presentation-mode class=hash-link aria-label="Direct link to Presentation Mode" title="Direct link to Presentation Mode" translate=no></a></h3>
<p>Stack all dashboards for scrollable handout:</p>
<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic>// src/App.jsx</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> searchParams </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token keyword" style=color:#00009f>new</span><span class="token plain"> </span><span class="token class-name">URLSearchParams</span><span class="token punctuation" style=color:#393A34>(</span><span class="token dom variable" style=color:#36acaa>window</span><span class="token punctuation" style=color:#393A34>.</span><span class="token property-access">location</span><span class="token punctuation" style=color:#393A34>.</span><span class="token property-access">search</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> presentMode </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> searchParams</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>get</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'mode'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>===</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'present'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token comment" style=color:#999988;font-style:italic>// Render differently based on mode</span><br/></div></code></pre></div></div>
<p>Visit: <code>http://localhost:3000?mode=present</code></p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=real-time-api-integration>Real-Time API Integration<a href=#real-time-api-integration class=hash-link aria-label="Direct link to Real-Time API Integration" title="Direct link to Real-Time API Integration" translate=no></a></h3>
<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token comment" style=color:#999988;font-style:italic>// src/App.jsx</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword module" style=color:#00009f>import</span><span class="token plain"> </span><span class="token imports punctuation" style=color:#393A34>{</span><span class="token imports"> useState</span><span class="token imports punctuation" style=color:#393A34>,</span><span class="token imports"> useEffect </span><span class="token imports punctuation" style=color:#393A34>}</span><span class="token plain"> </span><span class="token keyword module" style=color:#00009f>from</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'react'</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token keyword" style=color:#00009f>function</span><span class="token plain"> </span><span class="token function maybe-class-name" style=color:#d73a49>App</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token keyword" style=color:#00009f>const</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>[</span><span class="token plain">data</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> setData</span><span class="token punctuation" style=color:#393A34>]</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>=</span><span class="token plain"> </span><span class="token function" style=color:#d73a49>useState</span><span class="token punctuation" style=color:#393A34>(</span><span class="token keyword null nil" style=color:#00009f>null</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token function" style=color:#d73a49>useEffect</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token arrow operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">    </span><span class="token function" style=color:#d73a49>fetch</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'/api/accountability/latest'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">      </span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>then</span><span class="token punctuation" style=color:#393A34>(</span><span class="token parameter">res</span><span class="token plain"> </span><span class="token arrow operator" style=color:#393A34>=></span><span class="token plain"> res</span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>json</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">      </span><span class="token punctuation" style=color:#393A34>.</span><span class="token method function property-access" style=color:#d73a49>then</span><span class="token punctuation" style=color:#393A34>(</span><span class="token parameter">data</span><span class="token plain"> </span><span class="token arrow operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token function" style=color:#d73a49>setData</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">data</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>[</span><span class="token punctuation" style=color:#393A34>]</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><br/></div><div class=token-line style=color:#393A34><span class="token plain">  </span><span class="token comment" style=color:#999988;font-style:italic>// ...</span><span class="token plain"></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><br/></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=troubleshooting>Troubleshooting<a href=#troubleshooting class=hash-link aria-label="Direct link to Troubleshooting" title="Direct link to Troubleshooting" translate=no></a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=issue-data-not-updating>Issue: Data Not Updating<a href=#issue-data-not-updating class=hash-link aria-label="Direct link to Issue: Data Not Updating" title="Direct link to Issue: Data Not Updating" translate=no></a></h3>
<p><strong>Solution:</strong></p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token plain"># Verify Python export ran</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">ls -la frontend/policy-dashboards/src/data/dashboardData.js</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># Check file timestamp</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">stat frontend/policy-dashboards/src/data/dashboardData.js</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># Restart dev server</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">cd frontend/policy-dashboards</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">npm start</span><br/></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=issue-build-errors>Issue: Build Errors<a href=#issue-build-errors class=hash-link aria-label="Direct link to Issue: Build Errors" title="Direct link to Issue: Build Errors" translate=no></a></h3>
<p><strong>Solution:</strong></p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token plain"># Clear cache</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">rm -rf node_modules package-lock.json</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># Reinstall</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">npm install</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># Try again</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">npm start</span><br/></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=issue-wrong-data-showing>Issue: Wrong Data Showing<a href=#issue-wrong-data-showing class=hash-link aria-label="Direct link to Issue: Wrong Data Showing" title="Direct link to Issue: Wrong Data Showing" translate=no></a></h3>
<p><strong>Solution:</strong></p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token plain"># Check which data file React is loading</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">grep -r "dashboardData" frontend/policy-dashboards/src/</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># Verify export path in Python</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">grep "export_for_frontend" examples/tuscaloosa_accountability_report.py</span><br/></div></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=issue-benchmarks-are-placeholders>Issue: Benchmarks Are Placeholders<a href=#issue-benchmarks-are-placeholders class=hash-link aria-label="Direct link to Issue: Benchmarks Are Placeholders" title="Direct link to Issue: Benchmarks Are Placeholders" translate=no></a></h3>
<p><strong>Expected</strong> - Benchmark data currently uses illustrative values.</p>
<p><strong>To Fix:</strong></p>
<ol>
<li class="">Add NCES data query to Python analysis</li>
<li class="">Calculate per-student averages by party affiliation</li>
<li class="">Update <code>export_for_frontend()</code> function</li>
</ol>
<p>See: "Update Benchmark Data" section above</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=testing>Testing<a href=#testing class=hash-link aria-label="Direct link to Testing" title="Direct link to Testing" translate=no></a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=manual-testing-checklist>Manual Testing Checklist<a href=#manual-testing-checklist class=hash-link aria-label="Direct link to Manual Testing Checklist" title="Direct link to Manual Testing Checklist" translate=no></a></h3>
<ul class="contains-task-list containsTaskList_mC6p">
<li class=task-list-item><input type=checkbox disabled/> <!-- -->Python analysis runs without errors</li>
<li class=task-list-item><input type=checkbox disabled/> <code>dashboardData.js</code> file is generated</li>
<li class=task-list-item><input type=checkbox disabled/> <!-- -->File timestamp is recent</li>
<li class=task-list-item><input type=checkbox disabled/> <!-- -->React dev server starts</li>
<li class=task-list-item><input type=checkbox disabled/> <!-- -->All 5 tabs load correctly</li>
<li class=task-list-item><input type=checkbox disabled/> <!-- -->Data matches Python output</li>
<li class=task-list-item><input type=checkbox disabled/> <!-- -->Benchmarks display (even if placeholder)</li>
<li class=task-list-item><input type=checkbox disabled/> <!-- -->"Ask them" boxes show correct questions</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id=automated-testing>Automated Testing<a href=#automated-testing class=hash-link aria-label="Direct link to Automated Testing" title="Direct link to Automated Testing" translate=no></a></h3>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class=codeBlockLines_e6Vv><div class=token-line style=color:#393A34><span class="token plain">cd frontend/policy-dashboards</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># Run tests</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">npm test</span><br/></div><div class=token-line style=color:#393A34><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#393A34><span class="token plain"># Coverage report</span><br/></div><div class=token-line style=color:#393A34><span class="token plain">npm test -- --coverage</span><br/></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=resources>Resources<a href=#resources class=hash-link aria-label="Direct link to Resources" title="Direct link to Resources" translate=no></a></h2>
<ul>
<li class=""><strong>React Docs</strong>: <a href=https://react.dev/ target=_blank rel="noopener noreferrer" class="">https://react.dev/</a></li>
<li class=""><strong>Create React App</strong>: <a href=https://create-react-app.dev/ target=_blank rel="noopener noreferrer" class="">https://create-react-app.dev/</a></li>
<li class=""><strong>Python Backend</strong>: <code>extraction/accountability_dashboards.py</code></li>
<li class=""><strong>Strategy Guide</strong>: <code>docs/ACCOUNTABILITY_DASHBOARD_STRATEGY.md</code></li>
<li class=""><strong>NCES Data</strong>: <a href=https://nces.ed.gov/ccd/ target=_blank rel="noopener noreferrer" class="">https://nces.ed.gov/ccd/</a></li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=support>Support<a href=#support class=hash-link aria-label="Direct link to Support" title="Direct link to Support" translate=no></a></h2>
<p>For issues:</p>
<ol>
<li class="">Check this guide</li>
<li class="">Review <code>frontend/policy-dashboards/README.md</code></li>
<li class="">Check Python logs: <code>logs/</code></li>
<li class="">Open GitHub issue</li>
</ol>
<hr/>
<p><strong>Integration Complete</strong> ✅ Python analysis → JavaScript export → React visualization</div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_WFHX"><a href=https://github.com/getcommunityone/open-navigator-for-engagement/tree/main/website/docs/integrations/frontend.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/integrations/fec-integration-summary><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>FEC Campaign Finance Integration - Implementation Summary</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/integrations/localview><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>📚 LocalView Integration Guide</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#quick-start class="table-of-contents__link toc-highlight">Quick Start</a><li><a href=#architecture class="table-of-contents__link toc-highlight">Architecture</a><li><a href=#data-flow class="table-of-contents__link toc-highlight">Data Flow</a><ul><li><a href=#1-python-analysis class="table-of-contents__link toc-highlight">1. Python Analysis</a><li><a href=#2-javascript-data-format class="table-of-contents__link toc-highlight">2. JavaScript Data Format</a><li><a href=#3-react-components class="table-of-contents__link toc-highlight">3. React Components</a></ul><li><a href=#component-structure class="table-of-contents__link toc-highlight">Component Structure</a><li><a href=#customization class="table-of-contents__link toc-highlight">Customization</a><ul><li><a href=#change-dashboard-titles class="table-of-contents__link toc-highlight">Change Dashboard Titles</a><li><a href=#update-benchmark-data class="table-of-contents__link toc-highlight">Update Benchmark Data</a><li><a href=#add-new-metrics class="table-of-contents__link toc-highlight">Add New Metrics</a><li><a href=#change-colors class="table-of-contents__link toc-highlight">Change Colors</a></ul><li><a href=#deployment class="table-of-contents__link toc-highlight">Deployment</a><ul><li><a href=#option-1-static-site class="table-of-contents__link toc-highlight">Option 1: Static Site</a><li><a href=#option-2-github-pages class="table-of-contents__link toc-highlight">Option 2: GitHub Pages</a><li><a href=#option-3-netlifyvercel class="table-of-contents__link toc-highlight">Option 3: Netlify/Vercel</a><li><a href=#option-4-integrate-with-python-api class="table-of-contents__link toc-highlight">Option 4: Integrate with Python API</a></ul><li><a href=#workflow class="table-of-contents__link toc-highlight">Workflow</a><ul><li><a href=#regular-updates class="table-of-contents__link toc-highlight">Regular Updates</a><li><a href=#data-update-frequency class="table-of-contents__link toc-highlight">Data Update Frequency</a></ul><li><a href=#advanced-features class="table-of-contents__link toc-highlight">Advanced Features</a><ul><li><a href=#pdf-export class="table-of-contents__link toc-highlight">PDF Export</a><li><a href=#presentation-mode class="table-of-contents__link toc-highlight">Presentation Mode</a><li><a href=#real-time-api-integration class="table-of-contents__link toc-highlight">Real-Time API Integration</a></ul><li><a href=#troubleshooting class="table-of-contents__link toc-highlight">Troubleshooting</a><ul><li><a href=#issue-data-not-updating class="table-of-contents__link toc-highlight">Issue: Data Not Updating</a><li><a href=#issue-build-errors class="table-of-contents__link toc-highlight">Issue: Build Errors</a><li><a href=#issue-wrong-data-showing class="table-of-contents__link toc-highlight">Issue: Wrong Data Showing</a><li><a href=#issue-benchmarks-are-placeholders class="table-of-contents__link toc-highlight">Issue: Benchmarks Are Placeholders</a></ul><li><a href=#testing class="table-of-contents__link toc-highlight">Testing</a><ul><li><a href=#manual-testing-checklist class="table-of-contents__link toc-highlight">Manual Testing Checklist</a><li><a href=#automated-testing class="table-of-contents__link toc-highlight">Automated Testing</a></ul><li><a href=#resources class="table-of-contents__link toc-highlight">Resources</a><li><a href=#support class="table-of-contents__link toc-highlight">Support</a></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Documentation</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/intro>Getting Started</a><li class=footer__item><a class=footer__link-item href=/docs/data-sources/citations>Citations & Data Sources</a><li class=footer__item><a class=footer__link-item href=/docs/data-sources/overview>Data Sources</a><li class=footer__item><a class=footer__link-item href=/docs/for-developers>For Developers</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Resources</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://www.communityone.com target=_blank rel="noopener noreferrer" class=footer__link-item>Launch Open Navigator<svg width=13.5 height=13.5 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li class=footer__item><a href=https://github.com/getcommunityone/open-navigator-for-engagement target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li class=footer__item><a href=https://www.groundvue.org/ target=_blank rel="noopener noreferrer" class=footer__link-item>GroundVue (Partner)<svg width=13.5 height=13.5 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Community</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://www.instagram.com/getcommunityone/ target=_blank rel="noopener noreferrer" class=footer__link-item>Instagram<svg width=13.5 height=13.5 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li class=footer__item><a href=https://www.facebook.com/getcommunityone target=_blank rel="noopener noreferrer" class=footer__link-item>Facebook<svg width=13.5 height=13.5 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li class=footer__item><a href=https://x.com/getcommunityone/ target=_blank rel="noopener noreferrer" class=footer__link-item>X (Twitter)<svg width=13.5 height=13.5 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li class=footer__item><a href=https://www.linkedin.com/company/getcommunityone target=_blank rel="noopener noreferrer" class=footer__link-item>LinkedIn<svg width=13.5 height=13.5 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li class=footer__item><a href=https://www.youtube.com/@getcommunityone target=_blank rel="noopener noreferrer" class=footer__link-item>YouTube<svg width=13.5 height=13.5 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li class=footer__item><a href=https://discord.gg/uH6Dytek target=_blank rel="noopener noreferrer" class=footer__link-item>Discord<svg width=13.5 height=13.5 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Legal</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/docs/legal/privacy-policy>Privacy Policy</a><li class=footer__item><a class=footer__link-item href=/docs/legal/terms-of-service>Terms of Service</a><li class=footer__item><a class=footer__link-item href=/docs/legal/data-provider-terms>Data Provider Terms</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>More</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/blog>Blog</a><li class=footer__item><a href=https://github.com/getcommunityone/open-navigator-for-engagement/blob/main/LICENSE target=_blank rel="noopener noreferrer" class=footer__link-item>License (MIT)<svg width=13.5 height=13.5 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a></ul></div></div><div class="footer__bottom text--center"><div class=footer__copyright>Copyright © 2026 Community One. Built with Docusaurus.</div></div></div></footer></div></body>