Embed Details
Add this style information to the head of your file.
<![CDATA[<link rel="stylesheet" href="//d1o40k53wiknb7.cloudfront.net/css/map-rent-childcare-cost-by-cd.css" type="text/css">]]>
Add this html where you need the graph to appear
<![CDATA[<div class="use-tailwind">
<section aria-labelled-by="map-rent-childcare-cost-by-cd-label" id="map-rent-childcare-cost-by-cd" class="map-wrapper use-tailwind">
<h3 id="map-rent-childcare-cost-by-cd-label" class="mb-10 mx-auto w-full lg:w-2/3 text-blue-400 text-center">CCC data sets show communities most burdened by the cost of child care also tend to be rent burdened</h3>
<div class="w-full lg:w-2/4 mx-auto mb-6">
<select
id="data-select"
class="block w-fit mx-auto p-1 bg-white border-4 border-blue-400 focus-visible:border-red text-blue-400 text-2xl text-center"
>
<option value="">Select a data set</option>
<optgroup label="Child Care Affordability">
<option style="color:#0099cd" value="InfTodCostBurdenCenter|blues">Center-based Infant/Toddler Care Cost Burden</option>
<option style="color:#0099cd" value="InfTodCostBurdenHome|blues">Home-based Infant/Toddler Care Cost Burden</option>
<option style="color:#0099cd" value="PreKCostBurdenCenter|blues">Center-based Pre-K Cost Burden</option>
<option style="color:#0099cd" value="PreKCostBurdenHome|blues">Home-based Pre-k Cost Burden</option>
</optgroup>
<optgroup label="Housing Affordability">
<option value="SevereRentBurden|reds">Severe Rent Burden</option>
<option value="MedianRentBurden|reds">Median Rent Burden</option>
</optgroup>
</select>
</div>
<p id="map-legend" class="table-note w-full lg:w-2/3 mx-auto text-base lg:text-xl text-center"></p>
<div aria-hidden="true" style="display:none" class="legend-wrapper">
<i class="border-2 border-gray-500"></i><span></span><i></i><span></span><i></i><span></span><i></i><span></span>
</div>
<p id="map-instructions" class="text-center text-base italic">Hover over or tab through community districts to retrieve district-level data.</p>
<div class="flex flex-col lg:flex-row-reverse mt-10 justify-center items-center">
<div class="w-full lg:w-2/4">
<div tabindex="0" aria-labelledby="map-legend" aria-describedby="map-instructions" class="map-container">
<svg></svg>
</div>
</div>
<article tabindex="0" style="visibility:hidden" class="my-10 definition-wrapper w-full lg:w-1/4">
<h4 class="lg:text-2xl font-bold text-center"></h4>
<p class="text-base text-center lg:text-left lg:text-xl"></p>
</article>
</div>
<a href="#" target="_blank" style="visibility:hidden" class="source block mx-auto text-center text-blue-400 underline text-lg">Retrieved from the Keeping Track Online Database.</a>
<div class="tooltip absolute"></div>
</section>
</div>]]>
Add this before the closing body tag
<![CDATA[<script src="//d1o40k53wiknb7.cloudfront.net/js/map-rent-childcare-cost-by-cd.js"></script>]]>