Back to All Graphs

Graph Details

Table: Head Start Direct Funding Changes to NYC Grantees

A data table showing head start funding by provider between 2024 and 2025

Embed Details

Add this style information to the head of your file. <link rel="stylesheet" href="//d1o40k53wiknb7.cloudfront.net/css/table-head-start-direct-funding-changes.css" type="text/css"> Add this html where you need the graph to appear <section id="table-head-start-direct-funding-changes"> <section x-data role="tablist" > <template x-for="table in $store.tables.tables" x-bind:key="table.value" > <button x-bind:data-table="table.value" x-text="table.label" x-on:click="$store.tables.currentTable = table.value" x-bind:aria-selected="$store.tables.currentTable === table.value" role="tab" ></button> </template> </section> <section role="tabpanel"> <section x-data="hsDirectFundingChanges" x-show="$store.tables.currentTable === 'directFundingChange'" > <fieldset> <div> <label for="grantee-search">Search for Provider</label> <input id="grantee-search" type="text" x-model="granteeSearch" > </div> </fieldset> <table> <thead> <tr> <th>Grantee</th> <th class="amount">2024 Amount</th> <th class="amount">2025 Amount</th> <th class="amount">2024 to 2025 Difference</th> </tr> </thead> <tbody> <template x-for="grant in filteredGrants" :key="grant.grantee"> <tr> <td x-text="grant.grantee"></td> <td class="amount" x-text="getFormattedAmount(grant['2024_amount'])"></td> <td class="amount" x-text="getFormattedAmount(grant['2025_amount'])"></td> <td> <p class="amount difference" x-text="getFormattedDifference(grant)"></p> <svg x-show="getIsDifferenceNegative(grant)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 fill-red"> <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-.53 14.03a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V8.25a.75.75 0 0 0-1.5 0v5.69l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3Z" clip-rule="evenodd" /> </svg> <svg x-show="!getIsDifferenceNegative(grant)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6 fill-green"> <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm.53 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v5.69a.75.75 0 0 0 1.5 0v-5.69l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd" /> </svg> </td> </tr> </template> </tbody> </table> </section> <section x-data="newDirectGrantees" x-show="$store.tables.currentTable === 'newDirectFundingRecipients'" > <fieldset> <div> <label for="grantee-search">Search for Provider</label> <input id="grantee-search" type="text" x-model="granteeSearch" > </div> </fieldset> <table> <thead> <tr> <th>Grantee</th> <th class="amount">2025 Amount</th> </tr> </thead> <tbody> <template x-for="grant in filteredGrants" :key="grant.grantee"> <tr> <td x-text="grant.grantee"></td> <td class="amount" x-text="getFormattedAmount(grant['2025_amount'])"></td> </tr> </template> </tbody> </table> </section> <section x-data="doeFunded" x-show="$store.tables.currentTable === 'doeFunded'" > <fieldset> <div> <label for="grantee-search">Search for Provider</label> <input id="grantee-search" type="text" x-model="granteeSearch" > </div> </fieldset> <table> <thead> <tr> <th>Grantee</th> <th class="amount">2025 Amount</th> </tr> </thead> <tbody> <template x-for="grant in filteredGrants" :key="grant.grantee"> <tr> <td x-text="grant.grantee"></td> <td class="amount" x-text="getFormattedAmount(grant['2025_amount'])"></td> </tr> </template> </tbody> </table> </section> </section> </section> Add this before the closing body tag <script src="//d1o40k53wiknb7.cloudfront.net/js/table-head-start-direct-funding-changes.js"></script>