Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CartoCSS used for NextCity map

Disparities in Access to Banking Services - 2017

https://goo.gl/hJm8bK

CartoCSS

/** custom infowindow */

infowindow

<div class="CDB-infowindow CDB-infowindow--dark js-infowindow">
  <div class="CDB-infowindow-close js-close"></div>
  <div class="CDB-infowindow-container">
    <div class="CDB-infowindow-header CDB-infowindow-headerBg CDB-infowindow-headerBg--light js-header" style="background: #980043;">
      
      <ul class="CDB-infowindow-list">
        <li class="CDB-infowindow-listItem">
          <h5 class="CDB-infowindow-subtitle">City</h5>
          <h4 class="CDB-infowindow-title ">
            {{city}}
          </h4>
        </li>
      </ul>
    </div>
    <div class="CDB-infowindow-inner js-inner">
      <ul class="CDB-infowindow-list js-content">
        <li class="CDB-infowindow-listItem">
          <h5 class="CDB-infowindow-subtitle">Population</h5>
          <h4 class="CDB-infowindow-title">{{population}}</h4>
        </li>
        <li class="CDB-infowindow-listItem">
          <h5 class="CDB-infowindow-subtitle">Total Households</h5>
          <h4 class="CDB-infowindow-title">{{total_households}}</h4>
        </li>
        <li class="CDB-infowindow-listItem">
          <h5 class="CDB-infowindow-subtitle">Total Applications</h5>
          <h4 class="CDB-infowindow-title">{{total_applications}}</h4>
        </li>
        <li class="CDB-infowindow-listItem">
          <h5 class="CDB-infowindow-subtitle">Total Home Loans</h5>
          <h4 class="CDB-infowindow-title">{{total_home_loans}}</h4>
        </li>
        <li class="CDB-infowindow-listItem">
          <h5 class="CDB-infowindow-subtitle">Home Loans per 1,000 Households, Lower to Moderate Income Tracts</h5>
          <h4 class="CDB-infowindow-title">{{home_loans_per_1_000_households_lower_to_moderate_income_tract}}</h4>
        </li>
        <li class="CDB-infowindow-listItem">
          <h5 class="CDB-infowindow-subtitle">Home Loans per 1,000 Households, Middle to Upper Income Tracts</h5>
          <h4 class="CDB-infowindow-title">{{home_loans_per_1_000_households_moderate_to_upper_income_tract}}</h4>
        </li>
        <li class="CDB-infowindow-listItem">
          <h5 class="CDB-infowindow-subtitle">Home Loans per 1,000 Households, Lower to Moderate Income Divided by Middle to Upper Income Tracts</h5>
          <h4 class="CDB-infowindow-title">{{home_loans_per_1_000_households_lower_to_moder_income_divided}}</h4>
        </li>
      </ul>
    </div>
    <div class="CDB-hook">
      <div class="CDB-hook-inner"></div>
    </div>
  </div>
</div>

/** custom legend */

legend

<ul>
  
    <li class="Legend-categoryListItem u-flex u-justifySpace u-alignCenter">
      <p class="Legend-categoryTitle CDB-Text CDB-Size-small u-upperCase u-ellipsis" title="6 to 21">2 to 3</p>
      
        <span class="Legend-categoryCircle" style="opacity:1; background: #f1eef6; height:10px; width:10px;margin-right: 5px;"></span>
      
    </li>
  
    <li class="Legend-categoryListItem u-flex u-justifySpace u-alignCenter">
      <p class="Legend-categoryTitle CDB-Text CDB-Size-small u-upperCase u-ellipsis" title="22 to 35">4 to 5</p>
      
        <span class="Legend-categoryCircle" style="opacity:1; background: #d7b5d8;height:15px; width:15px;margin-right: 2px;"></span>
      
    </li>
  
    <li class="Legend-categoryListItem u-flex u-justifySpace u-alignCenter">
      <p class="Legend-categoryTitle CDB-Text CDB-Size-small u-upperCase u-ellipsis" title="36 to 60">6 to 7</p>
      
        <span class="Legend-categoryCircle" style="opacity:1; background: #df65b0;height:20px; width:20px;margin-right: -1px;"></span>
      
    </li>
  
    <li class="Legend-categoryListItem u-flex u-justifySpace u-alignCenter">
      <p class="Legend-categoryTitle CDB-Text CDB-Size-small u-upperCase u-ellipsis" title="61 to 71">8 to 13</p>
      
        <span class="Legend-categoryCircle" style="opacity:1; background: #dd1c77;height:25px; width:25px;margin-right: -4px;"></span>
      
    </li>
  
    <li class="Legend-categoryListItem u-flex u-justifySpace u-alignCenter">
      <p class="Legend-categoryTitle CDB-Text CDB-Size-small u-upperCase u-ellipsis" title="72 to 94">14 to 29</p>
      
        <span class="Legend-categoryCircle" style="opacity:1; background: #980043;height:30px; width:30px;margin-right: -7px;"></span>
      
    </li>
<br>
<p style="font-family: 'Open Sans', sans-serif;
font-size: 83%; font-weight: bold;">Description:</p><br>
<p style="font-family: 'Open Sans', sans-serif;
font-size: 80%">Home loan penetration (# home loans per 1,000 households) in middle- to upper-income census tracts divided by home loan penetration in low- to moderate-income census tracts. <br> <br> Thus, a score of “2” means that in that city, there are twice as many home loans in middle- to upper-income areas than in low- to moderate-income areas, on a per-household basis.</p><br>
<p style="font-family: 'Open Sans', sans-serif;  color: #B4B9BB; font-size: 70%";>Low-to-moderate income tract: average household income in that census tract is less than or equal to 80% the average for that region.
<br><br>Middle-to-upper income tract: average household income in that census tract is more than 80% the average for that region.
</p>
</ul>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.