Back to All Graphs

Graph Details

Map of Lead Violations

Violations issued by the NYC Department of Housing Preservation & Development between January 1, 2020 and February 27, 2024

Mapping HPD-Issued Lead Violations

Where the NYC Department of Housing Preservation & Development issued lead violations

Data is based on inspection dates from January 1, 2020 to December 31, 2023. Status of violations updated on April 24, 2025.

Zoom in for building data

Filter map by violation status

Lead Violations in

Embed Details

Add this style information to the head of your file. <link rel="stylesheet" href="//d1o40k53wiknb7.cloudfront.net/css/map-lead-violations.css" type="text/css"> Add this html where you need the graph to appear <script> const mapboxToken = "pk.eyJ1Ijoicmd1dHRlcnNvaG4iLCJhIjoiY2x0NjV2dzhzMDg1djJxbWlkdHBrNGNpdSJ9.R5hwo6-S0Q4zaqpo6SgAvw" const envDomain = "https:\/\/cccdata.futureman.digital" </script> <link href='https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css' rel='stylesheet' /> <div class="use-tailwind"> <section id="map-lead-violations" class="relative w-screen" aria-labelledby="lead-map-label" x-data="mapLeadViolations"> <hgroup id="lead-map-label" class="my-3" > <h3 class="my-3 text-center text-blue-400">Mapping HPD-Issued Lead Violations</h3> <p class="text-lg md:text-2xl text-center">Where the NYC Department of Housing Preservation & Development issued lead violations</p> <p class="text-center text-lg">Data is based on inspection dates from January 1, 2020 to December 31, 2023. Status of violations updated on April 24, 2025.</p> </hgroup> <div class="relative w-screen mx-auto h-[calc(100vh-103px)]"> <div id="map-lead-violations-holder" class="w-full h-full" ></div> <div tabindex="0" id="config-panel" aria-label="Search for a building or select a council district" class="absolute left-0 top-0 md:mt-3 md:ml-3 max-h-[75vh] md:max-h-none w-screen md:w-[33vw] lg:w-[20vw] shadow-md rounded-lg bg-opacity-80 md:bg-opacity-100 bg-white p-3"> <div class="flex justify-center items-center gap-x-1 w-fit mx-auto px-1 text-white bg-blue-400"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path d="M9 6a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0v-1.5h-1.5a.75.75 0 0 1 0-1.5h1.5v-1.5A.75.75 0 0 1 9 6Z" /> <path fill-rule="evenodd" d="M2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Zm7-5.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Z" clip-rule="evenodd" /> </svg> <h3 class="text-lg lg:text-lg text-white text-center">Zoom in for building data</h3> </div> <div class="my-1"> <div class="flex justify-evenly items-end gap-y-3 gap-x-1 md:flex-col"> <fieldset x-ref="addressSearch" class="basis-1/2 md:basis-full w-full"> <label class="text-gray-800 font-regular text-sm lg:text-base" for="map-lead-violations-building-search" >Search for a building</label> <div class="relative"> <input tabindex="0" x-on:input.debounce.300ms="getAddresses" x-on:keyup.down="$refs.mapLeadViolationsBuildingSearchResult.querySelector('#building-search-result-0')?.focus()" x-model="addressSearch" id="map-lead-violations-building-search" type="search" placeholder="Type an address" aria-controls="map-lead-violations-building-search-result" class="w-full h-10 p-1 md:px-3 md:py-1 border-[1px] border-blue-400 bg-white focus:bg-blue-100 rounded-lg placeholder:text-sm md:placeholder:text-base" > <svg class="absolute w-5 h-5 right-0 bottom-[30%] mr-1 stroke-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" /> </svg> </div> </fieldset> <fieldset class="basis-1/2 md:basis-full w-full flex flex-col justify-center"> <label for="select-council-district" class="text-gray-800 font-regular text-sm lg:text-base"" >Highlight Council District</label> <select name="select-council-district" id="select-council-district" x-on:change="handleCouncilDistrictSelected" class="w-full h-10 p-1 md:px-3 md:py-1 rounded-lg border-[1px] border-blue-400 bg-white focus-visible:bg-blue-100 hover:bg-blue-100" > <option disabled x-bind:selected="councilID === 0" >Select a District</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="1" data-council-district-id="1" >Council District 1</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="2" data-council-district-id="2" >Council District 2</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="3" data-council-district-id="3" >Council District 3</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="4" data-council-district-id="4" >Council District 4</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="5" data-council-district-id="5" >Council District 5</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="6" data-council-district-id="6" >Council District 6</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="7" data-council-district-id="7" >Council District 7</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="8" data-council-district-id="8" >Council District 8</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="9" data-council-district-id="9" >Council District 9</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="10" data-council-district-id="10" >Council District 10</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="11" data-council-district-id="11" >Council District 11</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="12" data-council-district-id="12" >Council District 12</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="13" data-council-district-id="13" >Council District 13</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="14" data-council-district-id="14" >Council District 14</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="15" data-council-district-id="15" >Council District 15</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="16" data-council-district-id="16" >Council District 16</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="17" data-council-district-id="17" >Council District 17</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="18" data-council-district-id="18" >Council District 18</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="19" data-council-district-id="19" >Council District 19</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="20" data-council-district-id="20" >Council District 20</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="21" data-council-district-id="21" >Council District 21</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="22" data-council-district-id="22" >Council District 22</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="23" data-council-district-id="23" >Council District 23</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="24" data-council-district-id="24" >Council District 24</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="25" data-council-district-id="25" >Council District 25</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="26" data-council-district-id="26" >Council District 26</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="27" data-council-district-id="27" >Council District 27</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="28" data-council-district-id="28" >Council District 28</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="29" data-council-district-id="29" >Council District 29</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="30" data-council-district-id="30" >Council District 30</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="31" data-council-district-id="31" >Council District 31</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="32" data-council-district-id="32" >Council District 32</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="33" data-council-district-id="33" >Council District 33</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="34" data-council-district-id="34" >Council District 34</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="35" data-council-district-id="35" >Council District 35</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="36" data-council-district-id="36" >Council District 36</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="37" data-council-district-id="37" >Council District 37</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="38" data-council-district-id="38" >Council District 38</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="39" data-council-district-id="39" >Council District 39</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="40" data-council-district-id="40" >Council District 40</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="41" data-council-district-id="41" >Council District 41</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="42" data-council-district-id="42" >Council District 42</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="43" data-council-district-id="43" >Council District 43</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="44" data-council-district-id="44" >Council District 44</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="45" data-council-district-id="45" >Council District 45</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="46" data-council-district-id="46" >Council District 46</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="47" data-council-district-id="47" >Council District 47</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="48" data-council-district-id="48" >Council District 48</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="49" data-council-district-id="49" >Council District 49</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="50" data-council-district-id="50" >Council District 50</option> <option x-bind:selected="parseInt($el.dataset.councilDistrictId) === councilID" value="51" data-council-district-id="51" >Council District 51</option> </select> </fieldset> </div> </div> <ul x-anchor="$refs.addressSearch" x-show="suggestedAddresses.get('addresses').length !== 0" id="map-lead-violations-building-search-result" x-ref="mapLeadViolationsBuildingSearchResult" class="w-full p-3 mx-auto bg-white rounded-b-lg shadow-lg" > <template x-for="(address, index) in [ ...suggestedAddresses.get('addresses')]" x-bind:key="index"> <li tabindex="0" x-bind:aria-labelledby="`building-search-result-label-${index}`" x-bind:id="`building-search-result-${index}`" x-bind:data-bin="address.bin" x-bind:data-street="address.street" x-bind:data-housenumber="address.housenumber" x-bind:data-longitude="address.longitude" x-bind:data-latitude="address.latitude" x-on:click="handleAddressSelected" x-on:keyup.enter="handleAddressSelected" x-on:keyup.down="handleKeyDownThroughSearchResults" x-on:keyup.up="handleKeyUpThroughSearchResults" class="flex justify-start gap-x-3 items-center hover:bg-blue-100 focus-visible:bg-blue-100 border-y-[1px] border-gray-100" > <p x-bind:id="`building-search-result-label-${index}`" x-text="`${address.housenumber} ${address.street}, ${address.neighborhood}, ${address.borough}`" class="text-sm md:text-base" ></p> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class=" fill-blue-400 shrink-0 w-4 h-4"> <path fill-rule="evenodd" d="M15 8A7 7 0 1 0 1 8a7 7 0 0 0 14 0ZM4.75 7.25a.75.75 0 0 0 0 1.5h4.69L8.22 9.97a.75.75 0 1 0 1.06 1.06l2.5-2.5a.75.75 0 0 0 0-1.06l-2.5-2.5a.75.75 0 0 0-1.06 1.06l1.22 1.22H4.75Z" clip-rule="evenodd" /> </svg> </li> </template> <a class="block my-1 text-center text-xs md:text-sm underline text-gray-700 md:text-gray-600" href="https://geosearch.planninglabs.nyc/" target="_blank">Search powered by NYC Planning GeoSearch</a> </ul> <div class="md:h-40 my-1 md:my-3"> <template x-if="data.get('loaded') && !mapError.get('status')"> <div class="hidden md:flex h-full flex-col justify-evenly items-center gap-y-3" > <div> <p class="text-center text-sm md:text-base" x-text="`${currentFilterLabel} Lead violations per City Council District`" ></p> <ul class="flex justify-center"> <template x-for="(number, index) in councilBreakPoints.get('legend').numbers" x-bind:key="index"> <li > <p x-text="number" class="h-5 w-12 text-sm md:text-sm text-center" ></p> </li> </template> </ul> <ul class="flex justify-center"> <template x-for="(color, index) in councilBreakPoints.get('legend').colors" x-bind:key="index"> <li> <div class="h-3 w-12 border-[1px] border-red-x-light" x-bind:style="`background-color:${color}`"></div> </li> </template> </ul> </div> <div x-show="data.get('currentType') === '2D'"> <p class="text-center text-sm md:text-base" x-text="`${currentFilterLabel} Lead violations per building`" ></p> <ul class="flex justify-center mb-1 "> <template x-for="(number) in buildingBreakPoints.get('legend').numbers"> <li class="shrink-0 h-4 w-8"> <p class="text-sm lg:text-sm text-center" x-text="number"></p> </li> </template> </ul> <ul class="flex justify-center"> <template x-for="(color) in buildingBreakPoints.get('legend').colors"> <li x-bind:style="`background-color:${color}`" class="shrink-0 h-4 w-4 mx-2 rounded-full border-[1px] border-red-x-light"> </li> </template> </ul> </div> <div x-show="data.get('currentType') === '3D'" class="" > <p x-text="`${currentFilterLabel} Violations per building as column height`" class="text-center text-sm md:text-base"></p> </div> </div> </template> <template x-if="!data.get('loaded') && !mapError.get('status')"> <div class="h-full flex flex-col justify-center items-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 animate-spin"> <path fill-rule="evenodd" d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z" clip-rule="evenodd" /> </svg> <p class="text-sm lg:text-base">Loading Data from NYC Open Data</p> </div> </template> <template x-if="mapError.get('status')"> <div class="h-full flex flex-col justify-center items-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="fill-red w-4 h-4"> <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" /> </svg> <p class="text-center text-base" x-text="mapError.get('message')" ></p> </div> </template> </div> <div x-data="{showMapOptions: false}"> <button x-on:click="showMapOptions = !showMapOptions" aria-labelledby="config-options-label" class="flex justify-evenly gap-x-3 md:hidden mx-auto w-fit px-3 py-1 bg-blue-400 rounded-lg " > <p id="config-options-label" x-text="showMapOptions ? 'Hide Options' : 'Options'" class="text-xs text-white" ></p> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white" class="w-4 h-4"> <path d="M6.5 2.25a.75.75 0 0 0-1.5 0v3a.75.75 0 0 0 1.5 0V4.5h6.75a.75.75 0 0 0 0-1.5H6.5v-.75ZM11 6.5a.75.75 0 0 0-1.5 0v3a.75.75 0 0 0 1.5 0v-.75h2.25a.75.75 0 0 0 0-1.5H11V6.5ZM5.75 10a.75.75 0 0 1 .75.75v.75h6.75a.75.75 0 0 1 0 1.5H6.5v.75a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75ZM2.75 7.25H8.5v1.5H2.75a.75.75 0 0 1 0-1.5ZM4 3H2.75a.75.75 0 0 0 0 1.5H4V3ZM2.75 11.5H4V13H2.75a.75.75 0 0 1 0-1.5Z" /> </svg> </button> <div class="md:h-fit overflow-y-hidden transition-height" x-bind:class="showMapOptions ? 'h-fit' : 'h-0'" > <fieldset class="w-full h-20 flex flex-col justify-center items-center "> <div class="w-full flex flex-col items-center gap-x-1"> <label class="self-start" for="select-map-type text-base">Visualize violations as:</label> <select id="select-map-type" @change="handleMapTypeSelection" class="h-10 p-1 md:px-3 md:py-1 bg-white border-[1px] border-red-x-light focus:border-red focus:border-red-2 rounded-lg text-sm md:text-base" > <option value="2D">Points</option> <option value="3D">Columns</option> </select> </div> </fieldset> <fieldset class="my-3 flex flex-wrap justify-center gap-x-5"> <legend for="map-filter" class="basis-full text-small md:text-base" >Filter map by violation status</legend> <div> <label for="filter-all" class="text-xs md:text-sm" >All</label> <input x-bind:checked="currentFilter === 'all'" id="filter-all" value="all" type="radio" name="map-filter" x-on:click="handleMapFilterSelect" > </div> <div> <label for="filter-open" class="text-xs md:text-sm" >Open</label> <input x-bind:checked="currentFilter === 'open'" id="filter-open" value="open" type="radio" name="map-filter" x-on:click="handleMapFilterSelect" > </div> <div> <label for="filter-close" class="text-xs md:text-sm" >Closed</label> <input x-bind:checked="currentFilter === 'close'" id="filter-close" value="close" type="radio" name="map-filter" x-on:click="handleMapFilterSelect" > </div> </fieldset> </div> </div> </div> <div id="building-violation-panel" aria-labelledby="building-panel-label" x-data="{showViolationsForMobileClicked: false}" tabindex="0" class="absolute z-10 bottom-0 md:right-0 md:top-0 w-screen md:w-[50vw] lg:w-[25vw] md:h-full px-3 py-3 md:py-5 transition-height overflow-y-hidden duration-1000 rounded-t-lg md:rounded-t-none border-[1px] border-transparent border-b-gray-300 bg-white shadow-[0px_-7px_5px_0px_rgba(0,0,0,0.10)] md:shadow-[-7px_0px_5px_0px_rgba(0,0,0,0.10)]" x-bind:class="showViolationsForMobileClicked ? 'h-[75vh]' : 'h-[40vh]'" x-show="buildingIsActive" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" > <button tabindex="0" aria-label="return to address search" x-on:click="handleBuildingPanelClose" class="absolute group" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 md:w-10 md:h-10 stroke-red fill-red-x-light group-focus-visible:fill-red group-hover:fill-red group-focus-visible:stroke-none group-hover:stroke-none"> <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd" /> </svg> </button> <template x-if="buildingIsActive && buildingViolationsLoaded && !buildingError.get('status')"> <div class="h-full"> <div x-data="{buildingSharePanelShowing: false, buildingLinkClicked:false, buildingLinkHovered: false}" class="my-3 py-5" x-ref="buildingPanel" > <div class="flex justify-center items-center my-3 gap-x-3"> <h3 id="building-panel-label" class="basis-5/6 w-fit p-1 text-center text-lg lg:text-2xl bg-blue-400 text-white" x-text="activeAddress"></h3> <button aria-label="copy a link to this building" x-on:click="handleShareBuildingClicked" x-on:mouseenter="buildingLinkHovered = true" x-on:mouseleave="buildingLinkHovered = false" x-on:focus="buildingLinkHovered = true" x-on:focusout="buildingLinkHovered = false" x-ref="shareBuildingButton" class="border-[1px] border-blue-400 hover:bg-blue-200 focus-visible:bg-blue-200 hover:border-blue-400 focus-visible:border-blue-400 rounded-lg" > <div x-show="!buildingLinkClicked" > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 stroke-blue-400"> <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> </div> <div x-show="buildingLinkClicked" > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 stroke-blue-400"> <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> </div> </div> <div x-show="buildingLinkHovered" x-anchor.top.offset.10="$refs.shareBuildingButton" class="p-1 bg-blue-100" > <p class="text-sm text-blue-400">Link to building</p> </div> <template x-if="buildingHasViolations"> <div> <p class="basis-full text-center text-base">Located in Council District <span x-text="buildingInfo.councildistrict"></span></p> <button x-on:click="handleZoomToDistrict" x-bind:data-bin="buildingInfo.bin" x-bind:data-street="buildingInfo.street" x-bind:data-housenumber="buildingInfo.housenumber" x-bind:data-longitude="buildingInfo.longitude" x-bind:data-latitude="buildingInfo.latitude" x-bind:data-council-id="buildingInfo.councildistrict" class="w-fit mx-auto flex items-center justify-evenly text-blue-400 hover:underline focus:underline" > <p class="text-base text-blue-400">Zoom to district level</p> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4"> <path d="M5.94 8.06a1.5 1.5 0 1 1 2.12-2.12 1.5 1.5 0 0 1-2.12 2.12Z" /> <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM4.879 4.879a3 3 0 0 0 3.645 4.706L9.72 10.78a.75.75 0 0 0 1.061-1.06L9.585 8.524A3.001 3.001 0 0 0 4.879 4.88Z" clip-rule="evenodd" /> </svg> </button> </div> </template> <h4 class="my-3 text-center text-lg leading-none"> <span x-bind:class="buildingHasViolations ? 'px-1 py-[1px] text-white bg-red' : '' " x-text="buildingHasViolations ? violationsTotal.all : 'No' "></span> Lead Violations between January 1, 2020 and December 31, 2023 </h4> <template x-if="buildingHasViolations"> <a target="_blank" class="my-3 block text-center text-blue-400 underline" x-bind:href=`https://data.cityofnewyork.us/Housing-Development/Housing-Maintenance-Code-Violations/wvxf-dwi5/explore/query/SELECT%0A%20%20%60violationid%60%2C%0A%20%20%60buildingid%60%2C%0A%20%20%60registrationid%60%2C%0A%20%20%60boroid%60%2C%0A%20%20%60boro%60%2C%0A%20%20%60housenumber%60%2C%0A%20%20%60lowhousenumber%60%2C%0A%20%20%60highhousenumber%60%2C%0A%20%20%60streetname%60%2C%0A%20%20%60streetcode%60%2C%0A%20%20%60zip%60%2C%0A%20%20%60apartment%60%2C%0A%20%20%60story%60%2C%0A%20%20%60block%60%2C%0A%20%20%60lot%60%2C%0A%20%20%60class%60%2C%0A%20%20%60inspectiondate%60%2C%0A%20%20%60approveddate%60%2C%0A%20%20%60originalcertifybydate%60%2C%0A%20%20%60originalcorrectbydate%60%2C%0A%20%20%60newcertifybydate%60%2C%0A%20%20%60newcorrectbydate%60%2C%0A%20%20%60certifieddate%60%2C%0A%20%20%60ordernumber%60%2C%0A%20%20%60novid%60%2C%0A%20%20%60novdescription%60%2C%0A%20%20%60novissueddate%60%2C%0A%20%20%60currentstatusid%60%2C%0A%20%20%60currentstatus%60%2C%0A%20%20%60currentstatusdate%60%2C%0A%20%20%60novtype%60%2C%0A%20%20%60violationstatus%60%2C%0A%20%20%60rentimpairing%60%2C%0A%20%20%60latitude%60%2C%0A%20%20%60longitude%60%2C%0A%20%20%60communityboard%60%2C%0A%20%20%60councildistrict%60%2C%0A%20%20%60censustract%60%2C%0A%20%20%60bin%60%2C%0A%20%20%60bbl%60%2C%0A%20%20%60nta%60%0AWHERE%0A%20%20caseless_one_of%28%60bin%60%2C%20%22${buildingInfo?.bin}%22%29%0A%20%20AND%20caseless_one_of%28%0A%20%20%20%20%60ordernumber%60%2C%0A%20%20%20%20%22617%22%2C%0A%20%20%20%20%22616%22%2C%0A%20%20%20%20%22607%22%2C%0A%20%20%20%20%22610%22%2C%0A%20%20%20%20%22611%22%2C%0A%20%20%20%20%22612%22%2C%0A%20%20%20%20%22614%22%2C%0A%20%20%20%20%22618%22%2C%0A%20%20%20%20%22621%22%2C%0A%20%20%20%20%22004%22%2C%0A%20%20%20%20%22622%22%0A%20%20%29/page/filter`> View this building's violations on NYC Open Data. </a> </template> </div> <button x-on:click="showViolationsForMobileClicked=!showViolationsForMobileClicked" class="block md:hidden w-fit mx-auto p-1 border-[1px] border-blue-400 rounded-lg focus-visible:bg-blue-400 bg-blue-100 text-blue-400 focus-visible:text-white" > <div x-show="showViolationsForMobileClicked === false" class="flex justify-center items-center gap-x-1" > <span>See violations</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <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> </div> <div x-show="showViolationsForMobileClicked" class="flex justify-center items-center gap-x-1" > <span>Hide Violations</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <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> </div> </button> <template x-if="buildingHasViolations" > <div role="tablist" id="violation-tab-list" class="flex justify-evenly md:h-auto" x-bind:class="showViolationsForMobileClicked ? 'h-auto' : 'h-0 overflow-y-hidden'" x-ref="violationTabList" > <button role="tab" x-bind:tabindex=" buildingActiveTabPanel === 'open' ? 0 : -1" x-bind:aria-selected="buildingActiveTabPanel === 'open'" aria-controls="violations-tab-panel" data-violation-status="open" class="basis-1/2 p-3 rounded-tl-lg rounded-tr-lg border-t-[1px] border-x-[1px] border-gray-300" x-bind:class="buildingActiveTabPanel !== 'open' ? ' bg-gray-300' : 'bg-white'" x-on:click="handleViolationsTabClick" x-on:keyup.right="$refs.violationTabList.querySelectorAll('button')[1].focus()" x-on:keyup.left="$refs.violationTabList.querySelectorAll('button')[1].focus()" > Open: <span x-text="violationsTotal?.open ? violationsTotal.open : '0'"></span> </button> <button role="tab" x-bind:tabindex=" buildingActiveTabPanel === 'closed' ? 0 : -1" x-bind:aria-selected="buildingActiveTabPanel === 'closed'" aria-controls="violations-tab-panel" data-violation-status="closed" class="basis-1/2 p-3 rounded-tl-lg rounded-tr-lg border-t-[1px] border-x-[1px] border-gray-300" x-bind:class="buildingActiveTabPanel !== 'closed' ? 'bg-gray-300' : 'bg-white' " x-on:click="handleViolationsTabClick" x-on:keyup.right="$refs.violationTabList.querySelectorAll('button')[0].focus()" x-on:keyup.left="$refs.violationTabList.querySelectorAll('button')[0].focus()" > Closed: <span x-text="violationsTotal?.close ? violationsTotal.close : 0"></span> </button> </div> </template> <template x-if="buildingHasViolations"> <div x-data="{scrolled: false}" role="tabpanel" tabindex="0" id="violations-tab-panel" x-on:scroll="scrolled = true" class="transition-height relative md:h-3/5 overflow-y-scroll md:border-b-[1px] md:border-x-[1px] md:rounded-b-lg md:border-gray-300" x-bind:class="showViolationsForMobileClicked ? 'h-[33vh] border-b-[1px] border-x-[1px] rounded-b-lg border-gray-300' : 'h-0 overflow-y-hidden'" > <svg x-show="!scrolled && activeViolationStatus.length &gt; 1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="block md:hidden absolute bottom-0 right-0 mr-1 mb-1 w-6 h-6 animate-bounce stroke-red"> <path stroke-linecap="round" stroke-linejoin="round" d="m9 12.75 3 3m0 0 3-3m-3 3v-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> </svg> <div x-show="buildingActiveTabPanel === 'open'"> <p x-show="violationsTotal?.open" class="text-lg text-center">Average number of days violations have been open through April 24, 2025: <span class="px-1 py-[1px] bg-red text-white" x-text="violationsTotal?.avg_days_open?.toLocaleString()"> </span> </p> <p x-show="!violationsTotal?.open" class="text-lg text-center">No open violations during this time period</p> </div> <div x-show="buildingActiveTabPanel === 'closed'"> <p x-show="violationsTotal?.close" class="text-lg text-center">Average number of days violations were open before being closed: <span class="px-1 py-[1px] bg-red text-white" x-text="violationsTotal?.avg_days_before_close?.toLocaleString()"> </span> </p> <p x-show="!violationsTotal?.close" class="text-lg text-center">No closed violations during this time period</p> </div> <h4 x-show="activeViolationStatus.length !== 0" class="mt-5 text-lg text-center font-semibold">Violations:</h4> <ul> <template x-for="violation in activeViolationStatus" x-bind:key="violation.violationid"> <li class="p-3 my-3 even:bg-gray-100"> <h5 class="w-fit mx-auto text-base text-center bg-purple text-white p-1" x-text="`Violation ID: ${violation.violationid}`" ></h5> <p class="text-base" > <span class="font-bold" x-text="`Code ${violation.ordernumber}: `"></span> <span x-text="getViolationCodeDescription(violation.ordernumber)"></span> </p> <p class="text-base"> <span class="font-bold">Inspection Date: </span> <span x-text="getMDYDate(violation.inspectiondate)"></span> </p> <p class="text-base capitalize"> <span class="font-bold">Current Status:</span> <span x-text="violation.currentstatus"></span> </p> <p class="text-base capitalize"> <span class="font-bold">Status Updated On:</span> <span x-text="getMDYDate(violation.currentstatusdate)"></span> </p> <p x-show="buildingActiveTabPanel === 'closed'" class="w-fit mx-auto my-1 px-1 text-base bg-red text-white text-center" x-text="`${getViolationDays({startDate: violation.currentstatusdate, endDate: violation.inspectiondate})} days before being closed`"> </p> <p x-show="buildingActiveTabPanel === 'open' " class="w-fit my-1 mx-auto px-1 text-base bg-red text-white text-center" x-text="`Open ${getViolationDays({endDate: violation.inspectiondate})} days`" ></p> <a target="_blank" class="flex justify-center items-center gap-x-1 text-center underline text-blue-400" x-bind:href="`https://data.cityofnewyork.us/Housing-Development/Housing-Maintenance-Code-Violations/wvxf-dwi5/explore/query/SELECT%0A%20%20%60violationid%60%2C%0A%20%20%60buildingid%60%2C%0A%20%20%60registrationid%60%2C%0A%20%20%60boroid%60%2C%0A%20%20%60boro%60%2C%0A%20%20%60housenumber%60%2C%0A%20%20%60lowhousenumber%60%2C%0A%20%20%60highhousenumber%60%2C%0A%20%20%60streetname%60%2C%0A%20%20%60streetcode%60%2C%0A%20%20%60zip%60%2C%0A%20%20%60apartment%60%2C%0A%20%20%60story%60%2C%0A%20%20%60block%60%2C%0A%20%20%60lot%60%2C%0A%20%20%60class%60%2C%0A%20%20%60inspectiondate%60%2C%0A%20%20%60approveddate%60%2C%0A%20%20%60originalcertifybydate%60%2C%0A%20%20%60originalcorrectbydate%60%2C%0A%20%20%60newcertifybydate%60%2C%0A%20%20%60newcorrectbydate%60%2C%0A%20%20%60certifieddate%60%2C%0A%20%20%60ordernumber%60%2C%0A%20%20%60novid%60%2C%0A%20%20%60novdescription%60%2C%0A%20%20%60novissueddate%60%2C%0A%20%20%60currentstatusid%60%2C%0A%20%20%60currentstatus%60%2C%0A%20%20%60currentstatusdate%60%2C%0A%20%20%60novtype%60%2C%0A%20%20%60violationstatus%60%2C%0A%20%20%60rentimpairing%60%2C%0A%20%20%60latitude%60%2C%0A%20%20%60longitude%60%2C%0A%20%20%60communityboard%60%2C%0A%20%20%60councildistrict%60%2C%0A%20%20%60censustract%60%2C%0A%20%20%60bin%60%2C%0A%20%20%60bbl%60%2C%0A%20%20%60nta%60%0AWHERE%20%60violationid%60%20%3D%20${violation.violationid}/page/filter`" > <span>View violation at NYC Open Data</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4"> <path d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69L6.22 8.72Z" /> <path d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5Z" /> </svg> </a> </li> </template> </ul> </div> </template> </div> </template> <template x-if="buildingIsActive && !buildingViolationsLoaded && !buildingError.get('status')"> <div class="h-full flex flex-col justify-center items-center gap-y-5"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 animate-spin"> <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> <h4 id="building-panel-label" class="text-center text-blue-400">Retrieving building violations</h4> </div> </template> <template x-if="buildingIsActive && !buildingViolationsLoaded && buildingError.get('status')"> <div class="h-full flex flex-col justify-center items-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="fill-red w-10 h-10"> <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" /> </svg> <h3 id="building-panel-label" class="text-center text-base" x-text="buildingError.get('message')" ></h3> </div> </template> </div> <div tabindex="0" x-ref="councilViolationsPanel" id="council-violations-panel" aria-labelledby="district-panel-label" x-show="councilIsActive" x-data="{ shareButtonClicked: false, emailButtonClicked: false, }" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" class="absolute z-10 bottom-0 md:right-0 md:top-0 w-screen md:w-[50vw] lg:w-[25vw] h-[50vh] md:h-full px-3 py-3 md:py-5 transition-height overflow-y-hidden duration-1000 rounded-t-lg md:rounded-t-none border-[1px] border-transparent border-b-gray-300 bg-white shadow-[0px_-7px_5px_0px_rgba(0,0,0,0.10)] md:shadow-[-7px_0px_5px_0px_rgba(0,0,0,0.10)]" > <button tabindex="0" aria-label="return to address search" x-on:click="handleDistrictPanelClosed" class="absolute group" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 md:w-10 md:h-10 stroke-red fill-red-x-light group-focus-visible:fill-red group-hover:fill-red group-focus-visible:stroke-none group-hover:stroke-none"> <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z" clip-rule="evenodd" /> </svg> </button> <h3 id="district-panel-label" class="w-fit mx-auto"> <span class="block bg-white text-gray-700 text-base text-center font-normal">Lead Violations in</span> <span class="p-1 text-lg text-center bg-blue-400 text-white" x-text="`City Council District ${councilID}`" ></span> </h3> <template x-if="councilIsActive"> <div class="h-full"> <div x-show="activeCityCouncilDistrict.get('council_member_retrieved')"> <h3 class="w-full text-lg text-center text-blue-400">Represented By:</h3> <p class="text-base text-center" x-text="`${activeCityCouncilDistrict.get('council_member_info').first_name} ${activeCityCouncilDistrict.get('council_member_info').last_name}`" ></p> </div> <div class="h-[33vh] md:h-[66vh] py-3 my-5 overflow-y-auto bg-gray-100 rounded-lg"> <template x-if="data.get('loaded')"> <div class="h-fit py-1"> <h4 x-text="`Data for District ${activeCouncilData?.council_district}:`" class="w-fit mx-auto p-1 text-center bg-purple text-white text-lg" ></h4> <div class="flex justify-start gap-x-5 my-3 items-center text-red font-bold"> <svg class="h-10 w-10 fill-red" viewBox="0 -37 512 512" xmlns="http://www.w3.org/2000/svg" id="fi_1018525"><path d="m217.964844 285.703125h-81.058594c-6.894531 0-12.5 5.609375-12.5 12.5v69.296875c0 6.894531 5.605469 12.5 12.5 12.5h36.59375c4.140625 0 7.5-3.359375 7.5-7.5s-3.359375-7.5-7.5-7.5h-34.09375v-10.601562h76.058594v10.601562h-6.464844c-4.140625 0-7.5 3.359375-7.5 7.5s3.359375 7.5 7.5 7.5h8.964844c6.890625 0 12.5-5.605469 12.5-12.5v-69.296875c0-6.890625-5.609375-12.5-12.5-12.5zm-62.609375 53.695313h-15.949219v-38.695313h15.949219zm29.15625 0h-14.152344v-38.695313h14.152344zm30.953125 0h-15.953125v-38.695313h15.953125zm0 0"></path><path d="m217.964844 63.714844h-81.058594c-6.894531 0-12.5 5.609375-12.5 12.5v69.296875c0 6.894531 5.605469 12.5 12.5 12.5h81.058594c6.890625 0 12.5-5.605469 12.5-12.5v-69.296875c0-6.890625-5.609375-12.5-12.5-12.5zm-47.609375 15h14.15625v38.691406h-14.15625zm-30.949219 0h15.949219v38.691406h-15.949219zm76.058594 64.296875h-76.058594v-10.605469h76.058594zm0-25.605469h-15.953125v-38.691406h15.953125zm0 0"></path><path d="m217.964844 174.710938h-81.058594c-6.894531 0-12.5 5.605468-12.5 12.5v69.296874c0 6.890626 5.605469 12.5 12.5 12.5h81.058594c6.890625 0 12.5-5.609374 12.5-12.5v-69.296874c0-6.894532-5.609375-12.5-12.5-12.5zm-47.609375 15h14.15625v38.691406h-14.15625zm-30.949219 0h15.949219v38.691406h-15.949219zm76.058594 64.296874h-76.058594v-10.605468h76.058594zm0-25.605468h-15.953125v-38.691406h15.953125zm0 0"></path><path d="m326.726562 128.042969h-22c-6.894531 0-12.5 5.605469-12.5 12.5v34.957031c0 6.894531 5.605469 12.5 12.5 12.5h22c6.890626 0 12.5-5.605469 12.5-12.5v-34.957031c0-6.894531-5.609374-12.5-12.5-12.5zm-2.5 44.957031h-17v-29.957031h17zm0 0"></path><path d="m387.726562 128.042969h-22c-6.894531 0-12.5 5.605469-12.5 12.5v34.957031c0 6.894531 5.605469 12.5 12.5 12.5h22c6.890626 0 12.5-5.605469 12.5-12.5v-34.957031c0-6.894531-5.609374-12.5-12.5-12.5zm-2.5 44.957031h-17v-29.957031h17zm0 0"></path><path d="m326.726562 198h-22c-6.894531 0-12.5 5.605469-12.5 12.5v34.957031c0 6.894531 5.605469 12.5 12.5 12.5h22c6.890626 0 12.5-5.605469 12.5-12.5v-34.957031c0-6.894531-5.609374-12.5-12.5-12.5zm-2.5 44.957031h-17v-29.957031h17zm0 0"></path><path d="m387.726562 198h-22c-6.894531 0-12.5 5.605469-12.5 12.5v34.957031c0 6.894531 5.605469 12.5 12.5 12.5h22c6.890626 0 12.5-5.605469 12.5-12.5v-34.957031c0-6.894531-5.609374-12.5-12.5-12.5zm-2.5 44.957031h-17v-29.957031h17zm0 0"></path><path d="m326.726562 267.957031h-22c-6.894531 0-12.5 5.609375-12.5 12.5v34.957031c0 6.894532 5.605469 12.5 12.5 12.5h22c6.890626 0 12.5-5.605468 12.5-12.5v-34.957031c0-6.890625-5.609374-12.5-12.5-12.5zm-2.5 44.957031h-17v-29.957031h17zm0 0"></path><path d="m387.726562 267.957031h-22c-6.894531 0-12.5 5.609375-12.5 12.5v34.957031c0 6.894532 5.605469 12.5 12.5 12.5h22c6.890626 0 12.5-5.605468 12.5-12.5v-34.957031c0-6.890625-5.609374-12.5-12.5-12.5zm-2.5 44.957031h-17v-29.957031h17zm0 0"></path><path d="m326.726562 337.914062h-22c-6.894531 0-12.5 5.609376-12.5 12.5v34.960938c0 6.890625 5.605469 12.5 12.5 12.5h22c6.890626 0 12.5-5.609375 12.5-12.5v-34.960938c0-6.890624-5.609374-12.5-12.5-12.5zm-2.5 44.960938h-17v-29.960938h17zm0 0"></path><path d="m387.726562 337.914062h-22c-6.894531 0-12.5 5.609376-12.5 12.5v34.960938c0 6.890625 5.605469 12.5 12.5 12.5h22c6.890626 0 12.5-5.609375 12.5-12.5v-34.960938c0-6.890624-5.609374-12.5-12.5-12.5zm-2.5 44.960938h-17v-29.960938h17zm0 0"></path><path d="m504.5 422h-44v-27.660156c20.421875-3.566406 36-21.414063 36-42.839844 0-23.984375-19.515625-43.5-43.5-43.5-5.941406 0-11.609375 1.199219-16.773438 3.367188v-24.867188c0-4.140625-3.359374-7.5-7.5-7.5-4.140624 0-7.5 3.359375-7.5 7.5v35.335938c-7.265624 7.777343-11.726562 18.207031-11.726562 29.664062s4.460938 21.886719 11.726562 29.664062v40.726563h-145.902343v-236.390625c0-4.140625-3.359375-7.5-7.5-7.5-4.144531 0-7.5 3.359375-7.5 7.5v236.390625h-165.777344v-42.726563c6.214844-7.523437 9.953125-17.164062 9.953125-27.664062s-3.738281-20.140625-9.953125-27.664062v-276.839844h165.777344v103.003906c0 4.140625 3.355469 7.5 7.5 7.5 4.140625 0 7.5-3.359375 7.5-7.5v-35.003906h145.902343v135.503906c0 4.140625 3.355469 7.5 7.5 7.5 4.140626 0 7.5-3.359375 7.5-7.5v-135.503906h2.5c6.890626 0 12.5-5.605469 12.5-12.5v-21.996094c0-6.894531-5.609374-12.5-12.5-12.5h-163.402343v-21.003906h6.269531c6.894531 0 12.5-5.605469 12.5-12.5v-21.996094c0-6.894531-5.605469-12.5-12.5-12.5h-208.320312c-6.890626 0-12.5 5.605469-12.5 12.5v21.996094c0 6.894531 5.609374 12.5 12.5 12.5h6.273437v265.164062c-5.632813-2.664062-11.917969-4.160156-18.546875-4.160156-23.984375 0-43.5 19.515625-43.5 43.5 0 21.429688 15.578125 39.273438 36 42.839844v27.660156h-46c-4.140625 0-7.5 3.359375-7.5 7.5s3.359375 7.5 7.5 7.5h497c4.140625 0 7.5-3.359375 7.5-7.5s-3.359375-7.5-7.5-7.5zm-68.273438-339v16.996094h-160.902343v-16.996094zm-360.453124-51.003906v-16.996094h203.320312v16.996094zm3.773437 390.003906h-11.046875v-27.660156c3.882812-.679688 7.589844-1.867188 11.046875-3.5zm-11.046875-43.007812v-9.492188c0-4.140625-3.359375-7.5-7.5-7.5s-7.5 3.359375-7.5 7.5v9.492188c-12.085938-3.300782-21-14.375-21-27.492188 0-15.714844 12.785156-28.5 28.5-28.5s28.5 12.785156 28.5 28.5c0 13.117188-8.914062 24.191406-21 27.492188zm377 43.007812h-9.273438v-30.367188c2.941407 1.234376 6.046876 2.144532 9.273438 2.707032zm7.5-60c-4.140625 0-7.5 3.359375-7.5 7.5v9.492188c-12.085938-3.300782-21-14.375-21-27.492188 0-15.714844 12.785156-28.5 28.5-28.5s28.5 12.785156 28.5 28.5c0 13.117188-8.914062 24.191406-21 27.492188v-9.492188c0-4.140625-3.359375-7.5-7.5-7.5zm0 0"></path></svg> <div> <p class="text-base"> <span class="p-1 bg-red text-white" x-text="activeCouncilData?.units_in_district.toLocaleString('en-US')" ></span> <span>housing units in this district</span></p> <p class="text-base" x-text="`(${(activeCouncilData?.units_in_district_over_all_units * 100).toFixed(2)}% of all NYC housing units)`" ></p> </div> </div> <div class="flex justify-start gap-x-5 my-3 items-center text-red"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /> </svg> <div> <p class="text-base"> <span class="p-1 bg-red text-white" x-text="activeCouncilData?.violations.toLocaleString('en-US')" ></span> <span x-text="`${currentFilterLabel?.toLowerCase()} violations`"></span></p> <p class="text-base" x-text="`(${(activeCouncilData?.district_violations_over_city_violations * 100).toFixed(2)}% of all NYC ${currentFilterLabel.toLowerCase()} violations)`" ></p> </div> </div> <div class="flex justify-start items-center gap-x-5 my-3"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 mb-1 stroke-red"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" /> </svg> <div> <p class="text-base"><span class="p-1 bg-red text-white" x-text="activeCouncilData?.buildings_with_violations.toLocaleString('en-US')" ></span> <span x-text="`buildings with ≥ 1 ${currentFilterLabel.toLowerCase()} violation`"></span> </p> <p class="text-base" x-text="`(${(activeCouncilData?.building_w_violations_over_all_building_w_violations * 100).toFixed(2)}% of all NYC buildings with ≥ 1 ${currentFilterLabel.toLowerCase()} violation)`" ></p> </div> </div> <div class="flex justify-start items-center gap-x-5 my-3"> <svg class="h-10 w-10 fill-red stroke-red" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m378.367 204.989c4.151 0 7.515-3.364 7.515-7.515v-154.548c0-4.15-3.364-7.515-7.515-7.515h-244.734c-4.151 0-7.515 3.365-7.515 7.515v296.143c0 4.15 3.364 7.515 7.515 7.515s7.515-3.364 7.515-7.515v-288.628h229.705v147.034c-.001 4.15 3.363 7.514 7.514 7.514z"></path><path d="m321.954 312.687c14.444 0 26.195-11.751 26.195-26.195s-11.751-26.195-26.195-26.195-26.195 11.751-26.195 26.195 11.751 26.195 26.195 26.195zm0-37.36c6.157 0 11.165 5.009 11.165 11.165 0 6.157-5.009 11.165-11.165 11.165-6.157 0-11.165-5.009-11.165-11.165s5.008-11.165 11.165-11.165z"></path><path d="m476.506 496.971h-53.253v-474.427c0-12.431-10.113-22.544-22.544-22.544h-289.418c-12.431 0-22.544 10.113-22.544 22.544v73.507c0 4.15 3.364 7.515 7.515 7.515s7.515-3.364 7.515-7.515v-73.507c0-4.144 3.371-7.515 7.515-7.515h289.419c4.144 0 7.515 3.371 7.515 7.515v474.427h-22.342v-269.438c0-4.15-3.364-7.515-7.515-7.515s-7.515 3.365-7.515 7.515v269.437h-229.706v-127.842c0-4.15-3.364-7.515-7.515-7.515s-7.515 3.365-7.515 7.515v127.842h-22.342v-370.86c0-4.15-3.364-7.515-7.515-7.515s-7.515 3.365-7.515 7.515v370.861h-53.252c-4.151 0-7.515 3.365-7.515 7.515s3.364 7.515 7.515 7.515h441.012c4.151 0 7.515-3.365 7.515-7.515 0-4.151-3.364-7.515-7.515-7.515z"></path><path d="m260.692 110.515h-11.264c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h3.764v46.733c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-54.233c0-4.142-3.357-7.5-7.5-7.5z"></path><path d="m224.289 147.703c.068-12.348.095-24.799-.061-26.661-.404-4.839-3.36-8.8-7.529-10.091-4.166-1.289-8.542.269-11.716 4.164-2.994 3.674-15.798 26.695-21.165 36.421-1.281 2.323-1.24 5.151.109 7.436s3.805 3.687 6.458 3.687h18.802c-.021 2.819-.043 5.518-.064 7.989-.035 4.142 3.293 7.528 7.436 7.564h.065c4.112 0 7.463-3.315 7.499-7.436.017-1.996.041-4.831.066-8.151 3.809-.358 6.789-3.564 6.789-7.467.001-3.866-2.928-7.051-6.689-7.455zm-15.003-.043h-6.145c2.18-3.884 4.298-7.623 6.193-10.928-.01 3.367-.026 7.091-.048 10.928z"></path><path d="m321.616 164.886c-.032 0-.064 0-.097.001-4.198.053-8.612.091-12.586.11 2.737-3.704 6.263-8.573 10.729-14.954 3.479-4.972 5.755-9.698 6.764-14.047.058-.245.102-.493.134-.743l.261-2.038c.04-.316.061-.633.061-.952 0-11.571-9.413-20.985-20.984-20.985-10.005 0-18.665 7.118-20.591 16.926-.798 4.064 1.85 8.006 5.914 8.805 4.071.8 8.007-1.85 8.805-5.914.548-2.791 3.018-4.816 5.872-4.816 3.171 0 5.774 2.479 5.973 5.602l-.135 1.049c-.453 1.734-1.584 4.544-4.361 8.513-8.33 11.901-13.299 18.407-15.968 21.902-3.408 4.462-5.285 6.919-4.035 10.982.734 2.387 2.61 4.291 5.019 5.093 1.006.335 1.811.604 12.126.604 4.06 0 9.594-.042 17.194-.137 4.142-.052 7.457-3.452 7.404-7.594-.054-4.111-3.4-7.407-7.499-7.407z"></path></svg> <div> <p class="text-base"> <span class="p-1 bg-red text-white" x-text="activeCouncilData?.units_with_violation.toLocaleString('en-US')" ></span> <span x-text="`housing units with ≥ 1 ${currentFilterLabel.toLowerCase()} violation`"></span> </p> <p class="text-base" x-text="`(${activeCouncilData?.units_w_violation_per_k_units} per 1k housing units in this district)`" ></p> </div> </div> </div> </template> <template x-if="councilIsActive"> <div class="w-full"> <label for="select-district-comparison" class="text-gray-800 font-regular text-sm lg:text-base" >Compare to Other Districts</label> <select id="select-district-comparison" class="w-full h-10 p-1 md:px-3 md:py-1 rounded-lg border-[1px] border-blue-400 bg-white focus-visible:bg-blue-100 hover:bg-blue-100" x-on:change="handleDistrictComparisonSelection" > <option value="violations" x-text="`Total ${currentFilterLabel} Violations `"></option> <option value="district_violations_over_city_violations" x-text="`Share of ${currentFilterLabel} Violations`"></option> <option value="buildings_with_violations" x-text="`Buildings with ${currentFilterLabel} Violations`"></option> <option value="building_w_violations_over_all_building_w_violations" x-text="`Share of Buildings With ${currentFilterLabel} Violations`"></option> <option value="units_in_district" x-text="`Total Housing Units`"></option> <option value="units_with_violation" x-text="`Units With ${currentFilterLabel} Violation(s)`"></option> <option value="units_w_violation_per_k_units" x-text="`Units With ${currentFilterLabel} Violation(s) Per 1K Units`"></option> </select> <div id="comparison-bar-chart-holder"></div> </div> </template> <template x-if="!data.get('loaded')"> <div> <div class="h-full flex flex-col justify-center items-center gap-y-5"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 animate-spin"> <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> <h4 id="building-panel-label" class="text-center text-blue-400">Updating Data</h4> </div> </div> </template> <button x-on:click="handleShareCouncilDistrictClicked" class="block w-48 my-5 mx-auto p-1 bg-white rounded-lg border-[1px] border-blue-400 text-blue-400 hover:bg-blue-400 focus-visible:bg-blue-400 focus-visible:text-white hover:text-white" > <div x-show="!shareButtonClicked" class="flex justify-evenly items-center"> <span>Link to this district</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M15.988 3.012A2.25 2.25 0 0 1 18 5.25v6.5A2.25 2.25 0 0 1 15.75 14H13.5V7A2.5 2.5 0 0 0 11 4.5H8.128a2.252 2.252 0 0 1 1.884-1.488A2.25 2.25 0 0 1 12.25 1h1.5a2.25 2.25 0 0 1 2.238 2.012ZM11.5 3.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75v.25h-3v-.25Z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M2 7a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7Zm2 3.25a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm0 3.5a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" /> </svg> </div> <span x-show="shareButtonClicked" >Copied!</span> </button> <div class="h-fit" x-show="activeCityCouncilDistrict.get('council_member_retrieved')"> <h3 class="w-full text-lg text-center text-red">Contact the Council Representative</h3> <a href="mailto:${email}" class="flex justify-evenly items-center mt-3 mb-1 w-fit mx-auto p-1 bg-white rounded-lg border-[1px] border-red text-red hover:bg-red focus-visible:bg-red focus-visible:text-white hover:text-white" > <span x-text="`Email ${activeCityCouncilDistrict.get('council_member_info').first_name} ${activeCityCouncilDistrict.get('council_member_info').last_name}`" ></span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M5.404 14.596A6.5 6.5 0 1 1 16.5 10a1.25 1.25 0 0 1-2.5 0 4 4 0 1 0-.571 2.06A2.75 2.75 0 0 0 18 10a8 8 0 1 0-2.343 5.657.75.75 0 0 0-1.06-1.06 6.5 6.5 0 0 1-9.193 0ZM10 7.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z" clip-rule="evenodd" /> </svg> </a> <button x-on:click="handleCityCouncilEmailCopied" class="w-fit block mx-auto text-red text-center hover:underline" > <span x-show="!emailButtonClicked">Copy email address instead</span> <span x-show="emailButtonClicked">Copied!</span> </button> </div> </div> </div> </template> </div> <div class="block md:hidden absolute bottom-0 w-full md:right-0 h-40 md:h-20 p-3 bg-white bg-opacity-90"> <template x-if="data.get('loaded') && !mapError.get('status')"> <div class="h-full flex flex-col justify-center items-center md:items-start gap-x-3 gap-y-3" > <div> <p class="text-center text-sm md:text-base" x-text="`${currentFilterLabel} Violations per City Council District`" ></p> <ul class="flex justify-center"> <template x-for="(number, index) in councilBreakPoints.get('legend').numbers" x-bind:key="index"> <li > <p x-text="number" class="h-5 w-12 text-sm md:text-sm text-center" ></p> </li> </template> </ul> <ul class="flex justify-center"> <template x-for="(color, index) in councilBreakPoints.get('legend').colors" x-bind:key="index"> <li> <div class="h-3 w-12 border-[1px] border-red-x-light" x-bind:style="`background-color:${color}`"></div> </li> </template> </ul> </div> <div x-show="data.get('currentType') === '2D'"> <p class="text-center text-sm md:text-base" x-text="`${currentFilterLabel} Violations per building`" ></p> <ul class="flex justify-center mb-1 "> <template x-for="(number) in buildingBreakPoints.get('legend').numbers"> <li class="shrink-0 h-4 w-8"> <p class="text-sm lg:text-sm text-center" x-text="number"></p> </li> </template> </ul> <ul class="flex justify-center"> <template x-for="(color) in buildingBreakPoints.get('legend').colors"> <li x-bind:style="`background-color:${color}`" class="shrink-0 h-4 w-4 mx-2 rounded-full border-[1px] border-red-x-light"> </li> </template> </ul> </div> <div x-show="data.get('currentType') === '3D'" class="" > <p x-text="`${currentFilterLabel} Violations per building as column height`" class="text-center text-sm md:text-base"></p> </div> </div> </template> </div> </div> </section> </div> Add this before the closing body tag <script src="//d1o40k53wiknb7.cloudfront.net/js/map-lead-violations.js"></script>