Embed Details
Add this style information to the head of your file.
<![CDATA[<link rel="stylesheet" href="//d1o40k53wiknb7.cloudfront.net/css/brooklyn-project-treemap.css" type="text/css">]]>
Add this html where you need the graph to appear
<![CDATA[<div class="use-tailwind">
<section
id="brooklyn-project-treemap"
x-data="data"
class="use-tailwind w-full md:w-10/12 my-5 mx-auto"
>
<div class="use-tailwind w-11/12 md:w-9/12 mx-auto">
<h3
class="mb-5 text-center text-3xl font-bold text-blue-400">What We Heard: Key Insights from Youth</h3>
<p>In this tree map, each box represents a theme that youth identified as critical to
their well-being. The size of each box correlates with the frequency of related
insights, based on how often participants brought up each theme during our
sessions.</p>
</div>
<div class="use-tailwind flex justify-evenly items-center gap-x-3 w-fit mx-auto h-24 md:h-10">
<div
x-show="zoomed"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-0 translate-y-[300px]"
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 scale-100 translate-y-0"
x-transition:leave-end="opacity-0 scale-0 translate-y-[300px]"
class="use-tailwind flex justify-evenly items-center gap-x-3 w-fit mx-auto">
<h3
x-text="`Mentions Within ${currentSubdataName}`"
class="text-center text-xl font-bold"
></h3>
<button
@click="handleZoomOut"
class="use-tailwind w-28 flex items-center justify-center p-1 rounded-lg"
x-bind:style="`background-color:${currentSubdataColor}`"
>
<span class="block basis-3/4 text-white">Zoom Out</span>
<svg class="basis-1/4 stroke-white size-6" 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="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607ZM13.5 10.5h-6" />
</svg>
</button>
</div>
</div>
<div class="w-full mx-auto" id="brooklyn-project-treemap-holder"></div>
</section>
</div>
]]>
Add this before the closing body tag
<![CDATA[<script src="//d1o40k53wiknb7.cloudfront.net/js/brooklyn-project-treemap.js"></script>]]>