Embed Details
Add this style information to the head of your file.
<![CDATA[<link rel="stylesheet" href="//d1o40k53wiknb7.cloudfront.net/css/map-medicaid-cuts.css" type="text/css">]]>
Add this html where you need the graph to appear
<![CDATA[<div class="use-tailwind">
<section
id="map-medicaid-snap-cuts"
class="w-11/12 lg:w-10/12 mx-auto"
>
<h3 class="text-3xl font-bold text-center text-blue-400">The Impact of H.R. 1 in New York's Congressional Districts</h3>
<div x-data="mapData">
<div class="flex flex-col items-center my-10">
<label
for="select-dataset"
class="text-2xl text-center"
>Select a Dataset To View Impact of Budget Cuts</label>
<div class="relative border-2 border-blue-400 rounded-lg">
<select
id="select-dataset"
x-model="currentData"
class="appearance-none py-3 px-5 bg-white rounded-lg text-xl"
>
<template
x-for="(option, index) in dataSets"
x-bind:key="index"
>
<optgroup x-bind:label="option.group">
<template x-for="(d, index) in option.options">
<option
x-bind:value="d.value"
x-text=d.label
x-bind:selected="d.value === currentData"
></option>
</template>
</optgroup>
</template>
</select>
<svg class="pointer-events-none absolute right-0 inset-y-1/2 -translate-y-1/2 h-6 w-6 stroke-blue-400" 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="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
</div>
</div>
<div
id="map-holder"
class="relative w-full lg:w-10/12 mx-auto border-blue-100 border-2"
>
<section class="absolute z-10 left-0 bottom-0 ml-3 mb-3">
<div class="flex flex-col items-center shadow-lg">
<button id="zoom-in" class="p-3 bg-white border-[1px] border-blue-400 rounded-t-lg">
<svg class="h-6 w-6 stroke-blue-400" 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="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
<button id="zoom-out" class="p-3 bg-white border-[1px] border-blue-400 rounded-b-lg">
<svg class="h-6 w-6 stroke-blue-400" 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="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</button>
</div>
</section>
<section class="p-3">
<h4
x-text="currentExplanation"
class="mb-3 text-base lg:text-2xl h-12 font-bold text-center leading-none"
></h4>
<ul class="flex justify-center gap-x-3">
<template
x-for="(l, index) in legend"
x-bind:key="index"
>
<div class="flex items-center lg:gap-x-1">
<div class="h-2 w-2 lg:h-6 lg:w-6" x-bind:style="`background-color:${l.color}`"></div>
<p
x-text="l.label"
class="text-sm lg:text-base"
></p>
</div>
</template>
</ul>
</section>
</div>
</div>
<div
id="tooltip"
style="opacity: 0"
class="fixed w-64 py-1 px-2 bg-white rounded-lg shadow-lg"
></div>
</section>
</div>]]>
Add this before the closing body tag
<![CDATA[<script src="//d1o40k53wiknb7.cloudfront.net/js/map-medicaid-cuts.js"></script>]]>