Embed Details
Add this style information to the head of your file.
<![CDATA[<link rel="stylesheet" href="//d1o40k53wiknb7.cloudfront.net/css/map-head-start-locations.css" type="text/css">]]>
Add this html where you need the graph to appear
<![CDATA[<script>
const mapboxToken = "pk.eyJ1Ijoicmd1dHRlcnNvaG4iLCJhIjoiY21naTR1YmgzMDR1NzJ1b2U2bGN4MGRrdSJ9.wEzOj3jfc6RAj1Fhkf4mDg"
const envDomain = "https:\/\/cccdata.futureman.digital"
</script>
<link href="https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.css" rel="stylesheet">
<div class="use-tailwind">
<section id="map-head-start-locations">
<h3>Location and Capacity of Head Start Sites</h3>
<section x-data="headStartMap">
<div>
<section id='map-head-start-locations-holder'></section>
<section
id="control-panel"
aria-label="control panel"
aria-details="Filter head start data by age and read legends">
<section aria-labelledby="filter-by-funding-type-label" id="select-age">
<label id="filter-by-funding-type-label" for="select-funding-type">Filter By Funding Source:</label>
<div>
<select x-model="currentFundingType" id="select-funding-type">
<option
x-bind:selected="currentFundingType === 'all'"
value="all"
>
All
</option>
<option
x-bind:selected="currentFundingType === 'DOE'"
value="DOE"
>
NYC Public Schools
</option>
<option
x-bind:selected="currentFundingType === 'Direct'"
value="Direct"
>Directly Funded
</option>
</select>
<svg 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>
</section>
<fieldset id="show-hide-locations">
<legend>Show/Hide Location Capacity</legend>
<div>
<p>Show</p>
<label class="checkbox-container">
<input x-model="showLocations" type="checkbox">
<div
:style="{ transform: !showLocations ? 'translateX(100%) translateY(-50%)' : 'translateX(-5%) translateY(-50%)' }"
class="slider"
></div>
</label>
<p>Hide</p>
</div>
</fieldset>
<section
id='location-legend'
x-bind:style="!showLocations ? 'opacity:20%' : null"
>
<h5>Location Capacity (Seats)</h5>
<ul>
<template x-for="(points, index) of circleLegendRanges">
<li>
<template x-if="index % 2 === 0" x-bind:key="index">
<div>
<p x-text="points">
</p>
<div
x-bind:style="{
backgroundColor: '#ea0029',
borderRadius: '100%',
border: '1px solid #808080',
flexShrink: '0',
width: (circleLegendRanges[index + 1]) + 'px',
height: (circleLegendRanges[index + 1]) + 'px'
}">
</div>
</div>
</template>
</li>
</template>
</ul>
</section>
<fieldset
id="select-aggregate"
aria-labelledby="map-select-label"
>
<legend id="map-select-label" for="map-select">Aggregate Seats By:</legend>
<div>
<div class="radio-container">
<label for="community-district">Community District</label>
<input
x-model="currentMap"
type="radio"
name="current-map"
value="community-district"/>
</div>
<div class="radio-container">
<label for="council-district">Council District</label>
<input
x-model="currentMap"
type="radio"
name="current-map"
value="council-district"/>
</div>
<div class="radio-container">
<label for="council-district">Congressional District</label>
<input
x-model="currentMap"
type="radio"
name="current-map"
value="congressional-district"
>
</div>
<div class="radio-container">
<label for="council-district">Hide Aggregation</label>
<input
x-model="currentMap"
type="radio"
name="current-map"
value="no-aggregation"/>
</div>
</div>
</fieldset>
<section
x-show="currentMap !== 'no-aggregation'"
id="aggregate-legend" >
<h5 x-text="`${currentMapLabel} Capacity (Seats)`"></h5>
<ul>
<template x-for="(points, index) of fillLegendRanges" >
<li>
<template x-if="index % 2 === 0" x-bind:key="index">
<div>
<p x-text="points">
</p>
<div
x-bind:style="{
backgroundColor: fillLegendRanges[index + 1],
border: '1px solid #808080',
width: '15px',
height: '15px'
}"
>
</div>
</div>
</template>
</li>
</template>
</ul>
</section>
<section
x-show="currentMap === 'no-aggregation'"
id="no-aggregate-layer"
>
<h5>No Aggregate Layer Selected</h5>
</section>
</section>
</div>
</section>
</section>
</div>
]]>
Add this before the closing body tag
<![CDATA[<script src="//d1o40k53wiknb7.cloudfront.net/js/map-head-start-locations.js"></script>]]>