Embed Details
Add this style information to the head of your file.
<![CDATA[<link rel="stylesheet" href="//d1o40k53wiknb7.cloudfront.net/css/us-budget-impact-dashboard.css" type="text/css">]]>
Add this html where you need the graph to appear
<![CDATA[<script>
const envDomain = "https:\/\/cccdata.futureman.digital"
</script>
<div class="use-tailwind">
<section
id="us-budget-impact-dashboard"
class="w-10/12 my-10 mx-auto">
<div
x-data="budgetImpactData"
x-bind:class="{ 'h-[50vh]': !currentRep}"
>
<div>
<div class="flex flex-col items-center gap-1">
<label
for="search-district"
class="mb-3 text-lg"
>Find your New York Congressional District by search or using your location</label>
<div class="w-full flex gap-x-1 items-start md:items-center justify-center">
<form class="relative w-full lg:w-1/3">
<input
id="search-district"
type="text"
x-model="addressInput"
placeholder="ENTER YOUR FULL ADDRESS"
class="peer w-full p-3 border-2 border-blue-400 focus-visible:border-red rounded-lg text-xl">
<button
x-on:click.prevent="handleSearch"
x-bind:disabled="addressInput.length === 0"
class="hidden md:inline-block absolute right-0 p-3 rounded-r-lg border-r-2 border-y-2 border-blue-400 peer-focus-visible:border-red bg-blue-400 disabled:bg-blue-300 hover:bg-blue-500 text-white text-xl"
>
Search
</button>
<button
x-on:click.prevent="handleSearch"
x-bind:disabled="addressInput.length === 0"
class="block md:hidden w-full mt-3 p-3 rounded-lg border-2 border-y-2 border-blue-400 focus-visible:border-red bg-blue-400 disabled:bg-blue-300 hover:bg-blue-500 text-white text-xl"
>
Search
</button>
</form>
<button
x-on:click="handleGetLocation"
aria-label="use your location to determine disrict"
class="p-2 rounded-lg border-2 border-transparent focus-visible:border-red bg-blue-400 hover:bg-blue-500"
>
<svg class=" w-9 h-9 stroke-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" >
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
</svg>
</button>
</div>
<div
role="region"
aria-live="polite"
x-text="isLoading ? 'Searching For Your District' : 'Found Your District' "
class="sr-only">
</div>
</div>
</div> <template x-if="isLoading">
<div class="flex flex-col justify-center items-center h-[50vh]">
<p class="flex items-center justify-center gap-x-3 font-bold">
<span class="text-blue-400">Retrieving Your District</span>
<svg class="h-6 w-6 animate-spin stroke-blue-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</p>
</div>
</template>
<template x-if="error">
<div class="flex flex-col justify-center items-center h-[50vh]">
<p class="flex items-center justify-center gap-x-3 font-bold">
<span class="text-red" x-text="errorMessage"></span>
</p>
</div>
</template>
<template x-if="currentRep && !isLoading && !error">
<div>
<div class="my-10">
<h2 class="text-4xl font-bold text-blue-400" x-text="`Your Congressional District: ${currentDistrictID}`"></h2>
<template x-if="currentRep.matched_address">
<p
x-text="`Matched Address: ${currentRep.matched_address}`"
class="text-red text-base"
></p>
</template>
</div>
<section>
<div class="my-10">
<h3 class="text-3xl text-blue-400">The Potential Impact To Your District If Congress Passes These Budget Cuts</h3>
<ul class="w-11/12 mx-auto my-10 list-disc">
<li>
<p>Up to
<span
x-text="currentMedicaidCutsImpact.enrollment_change_thousands"
class='px-1 bg-red text-white'
>
</span>
individuals could see their Medicaid and CHIP coverage terminated.***</p>
</li>
<li>
<p>All households receiving SNAP in District <span x-text="currentDistrictID"></span> – up to
<span
x-text="currentSNAPData.snap_households_enrollment_number.toLocaleString()"
class='px-1 bg-red text-white'>
</span>
households – could lose some or all of their SNAP benefits.****</p>
</li>
</ul>
</div>
<section class="my-10">
<h3 class="text-3xl text-blue-400">Medicaid Enrollment in District <span x-text="currentDistrictID"></span></h3>
<div class="flex flex-col lg:flex-row justify-center gap-20 my-10 w-11/12 mx-auto">
<section class="basis-1/2">
<h4 class="text-center lg:text-left text-xl text-red">Total Population</h4>
<p class="basis-1/2 text-center">
<span
class="block text-5xl font-black my-1 text-center text-red"
x-text="currentMedicaidData.medicaid_enrollment_number.toLocaleString('en-US')"
>
</span>
people partially or fully covered by Medicaid (or
<span
class="px-1 bg-red text-white"
x-text="currentMedicaidData.medicaid_enrollment_percent + '%'"></span> of the district's population*)
</p>
<div
id="general-pop-medicaid-chart-container"
class="mt-3"
></div>
</section>
<section class="basis-1/2">
<h4 class="text-center lg:text-left text-xl text-red">Population Under 19</h4>
<p class="basis-1/2 text-center">
<span
class="block text-5xl font-black my-1 text-center text-red"
x-text="currentMedicaidData.medicaid_enrollment_child_number.toLocaleString('en-US')">
</span>
children partially or fully covered by Medicaid (or
<span
class="px-1 bg-red text-white"
x-text="`${currentMedicaidData.medicaid_enrollment_child_percent}%`">
</span>
of the district's child population)*
</p>
<div
id="child-pop-medicaid-chart-container"
class="mt-3"
></div>
</section>
</div>
<div class="flex p-3 w-fit mx-auto items-center gap-x-3 bg-red-x-light">
<p
x-text="`Download a PDF of Disrict ${currentDistrictID} created by Medicaid Matters New York`"
class="text-base text-center"
>
</p>
<a x-bind:href="currentMedicaidData.mmny_url" target="_blank">
<svg class="w-8 h-8 p-1 stroke-white bg-red rounded-lg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</a>
</div>
</section>
<section class="my-10">
<h3 class="text-3xl text-blue-400">Food assistance/SNAP benefits in District <span x-text="currentDistrictID"></span></h3>
<div class="flex flex-col lg:flex-row justify-center gap-20 my-10 w-11/12 mx-auto">
<section class="basis-1/2">
<h4 class="text-center lg:text-left text-xl text-red">All Households</h4>
<p class="text-center">
<span
class="block text-5xl font-black my-1 text-center text-red"
x-text="currentSNAPData.snap_households_enrollment_number.toLocaleString('en-US')"></span>
households receive food assistance (or
<span
class="px-1 bg-red text-white"
x-text="currentSNAPData.snap_households_enrollment_percent + '%'"></span>
of the district's households)**
</p>
<div
id="general-pop-snap-chart-container"
class="mt-3"
></div>
</section>
<section class="basis-1/2">
<h4 class="text-center lg:text-left text-xl text-red">Households With Children</h4>
<p class="text-center">
<span
class="block text-5xl font-black my-1 text-center text-red"
x-text="currentSNAPData.snap_households_w_children_enrollment_number.toLocaleString('en-US')"></span>
households with children receive food assistance (or
<span
class="px-1 bg-red text-white"
x-text="currentSNAPData.snap_households_w_children_enrollment_percent + '%'"></span>
of the district's households with children)**
</p>
<div
id="child-pop-snap-chart-container"
class="mt-3"
></div>
</section>
</div>
<div class="flex p-3 w-fit mx-auto items-center gap-x-3 bg-red-x-light">
<p
x-text="`Download a PDF of Disrict ${currentDistrictID} SNAP Data`"
class="text-base text-center"
></p>
<a x-bind:href="currentSNAPData.usda_url" target="_blank">
<svg class="w-8 h-8 p-1 stroke-white bg-red rounded-lg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</a>
</div>
</section>
<section class="my-10">
<h3 class="text-3xl text-blue-400 text-center">How Medicaid and SNAP Needs in District <span x-text="currentDistrictID"></span> Compare to Other New York Congressional Districts</h3>
<div class="flex items-center justify-center gap-3 my-10">
<!-- Left Label -->
<label
for="plot-toggle"
class="text-sm text-left lg:text-md font-medium">Show Data for Total Population</label>
<!-- Toggle Switch -->
<div class="relative">
<input
x-on:click="handleToggleSwitch"
type="checkbox"
id="plot-toggle"
class="sr-only peer">
<label for="plot-toggle" class="w-14 h-7 flex items-center bg-red peer-checked:bg-green-500 rounded-full cursor-pointer relative transition-colors"></label>
<span class="pointer-events-none absolute left-0 inset-y-1/2 -translate-y-1/2 w-6 h-6 bg-white rounded-full shadow-md transition-transform transform peer-checked:translate-x-8"></span>
</div>
<!-- Right Label -->
<label for="plot-toggle" class="text-right text-sm lg:text-md font-medium">Show Data for Family/Child Population</label>
</div>
<div
id="scatter-plot"
></div>
</section> <section class="my-10">
<h3
class="text-3xl text-blue-400 text-center"
x-text="`Represented by: ${currentRep.title} ${currentRep.first_name} ${currentRep.last_name}`"></h3>
<div class="relative h-[200px] my-10 mx-auto">
<template x-if="currentRep.image_url">
<img
height="200"
width="200"
x-bind:src="currentRep.image_url"
alt=""
class="absolute inset-x-1/2 -translate-x-1/2 w-[200px] h-[200px] overflow-hidden rounded-full object-cover"
>
</template>
<template x-if="!currentRep.image_url">
<img
height="200"
width="200"
src="//d1o40k53wiknb7.cloudfront.net/assets/placeholder-headshot.svg"
alt=""
class="absolute inset-x-1/2 -translate-x-1/2 w-[200px] h-[200px] overflow-hidden rounded-full object-cover"
>
</template>
<template x-if="currentRepVote">
<p
x-text="currentRepVoteCopy"
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-fit whitespace-nowrap p-1 text-2xl text-center"
x-bind:class="currentRepVote?.vote === 'nay' ? 'bg-green-x-light text-green' : 'bg-red-x-light text-red'"
></p>
</template>
</div>
<div
x-data="{copyButtonHovered: false}"
class="relative flex justify-center items-center gap-x-1">
<a
id="email-copy-anchor"
x-on:click.prevent="handleCopyData"
href="https://cccnewyork.org/campaigns/tell-new-yorks-representatives-not-to-cut-medicaid-and-snap/"
class="z-10 w-96 overflow-x-hidden p-3 text-xl rounded-lg text-white text-center bg-red"
>
<span x-text="!isCopied ? `Send District Data to Rep. ${currentRep.last_name}` : 'Copied! Redirecting to the Campaign Form' "></span>
</a>
<button
x-ref="copyButton"
class="p-3 rounded-lg bg-blue-400 text-white"
x-on:mouseenter="copyButtonHovered=true"
x-on:mouseleave="copyButtonHovered=false"
x-on:click="handleClipboardCopy"
>
<svg x-show="!dataCopiedToClipboard" class="h-7 w-7 stroke-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
</svg>
<svg x-show="dataCopiedToClipboard" class="h-7 w-7 stroke-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
<div
x-show="copyButtonHovered && !dataCopiedToClipboard"
x-anchor="$refs.copyButton"
role="tooltip"
class="w-48 p-3 border-2 border-blue-100 shadow-lg bg-white"
>
<p class="text-base text-center">Click to manually copy the data to paste into your letter.</p>
</div>
</div>
</section> </section>
</div>
</template>
<template x-if="currentRep && !isLoading && !error">
<ul>
<li>
<a
class="text-blue-400 underline"
href="https://apps.cbpp.org/program_participation/#table/374/medicaid-chip---enrollment-by-age"
target="_blank"
>*Center on Budget Policy and Policy Priorities</a>
</li>
<li>
<a
class="text-blue-400 underline"
href="https://data.census.gov/table/ACSST1Y2023.S2201?q=snap&t=Health+Insurance&g=040XX00US36$5000000"
target="_blank"
>**ACS 1 year households receiving SNAP benefits by congressional district</a>
</li>
<li>
<a class="text-blue-400 underline" href="https://www.urban.org/research/publication/reducing-federal-support-medicaid-expansion-would-shift-costs-states-and">***Source: Urban Institute</a>
</li>
<li>
<a class="text-blue-400 underline" href="https://www.cbpp.org/research/food-assistance/millions-of-low-income-households-would-lose-food-aid-under-proposed-house">****Center on Budget and Policy Priorities</a>
</li>
</ul>
</template>
</div>
</div>
</section>
</div>
]]>
Add this before the closing body tag
<![CDATA[<script src="//d1o40k53wiknb7.cloudfront.net/js/us-budget-impact-dashboard.js"></script>]]>
