Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
462 lines (431 sloc) 28.6 KB
{% extends 'profile/profile_detail.html' %}{% load humanize lookup staticfiles %}
{% block head_meta_description %}Population data and election figures from {{ geography.this.short_name}}, broken down by category: Demographics, Service delivery, Economics and Education.{% endblock %}
{% block header_content %}
<div class="floating-nav-wrapper">
<nav class="floating-nav">
<div class="wrapper clearfix">
<h3><img src="{% static 'img/wazi-logo.png' %}">{{ geography.this.name }}</h3>
<ul>
<li><a href="#elections"><i class="fa fa-check"></i> <span>Elections</span></a></li>
<li><a href="#demographics"><i class="fa fa-user"></i> <span>Demographics</span></a></li>
<li><a href="#households"><i class="fa fa-home"></i> <span>Households</span></a></li>
<li><a href="#service_delivery"><i class="fa fa-bolt"></i> <span>Service Delivery</span></a></li>
<li><a href="#economics"><i class="fa fa-money"></i> <span>Economics</span></a></li>
<li><a href="#education"><i class="fa fa-graduation-cap"></i> <span>Education</span></a></li>
<li><a href="#children"><i class="fa fa-child"></i> <span>Children</span></a></li>
<li><a href="#child_headed_households"><i class="fa fa-child"></i> <i class="fa fa-child fa-tiny"></i> <span>Child-headed Households</span></a></li>
</ul>
</div>
</nav>
</div>
{{ block.super }}
{% endblock %}
{% block profile_header_tail %}
<div class="column-full">
<strong>{{ primary_releases.active.name }} {{ primary_releases.active.year }}</strong>
{% if primary_releases.other %}
<div class="tool-group toggle-sub-group release-list">
<a>Change release<i class="fa fa-chevron-circle-down"></i></a>
<ul class="sub-group" style="display: none;">
{% for release in primary_releases.other %}
<li><a href="{{ request.path }}?release={{release.year}}">{{ release.name }} {{ release.year }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
{% endblock %}
{% block profile_detail %}
<article id="elections" class="clearfix">
<header class="section-contents">
<h1><i class="fa fa-fw fa-check"></i> Elections</h1>
</header>
<div class="section-container">
{% for key in elections %}
{% with elections|get:key as election_data %}
<section class="clearfix stat-row">
<h2 class="header-for-columns">
<a class="permalink" href="#{{ election_data.name }}" id="{{ election_data.name }}">
{{ election_data.name.capitalize }}{% if election_data|get:"geo_version" != geography.this.version %}*{% endif %}
<i class="fa fa-link"></i>
</a>
</h2>
<aside>
{% if "municipal" in election_data.name|lower %}
<a href="/help#faq-municipal-elections">What does this show?</a>
{% endif %}
{% if election_data|get:"geo_version" != geography.this.version %}
*This election data is for the {{ election_data|get:"geo_version" }} municipal boundaries, which may be different to the {{ geography.this.version }} municipal boundaries used elsewhere on this page.
{% endif %}
</aside>
<div class="column-quarter">
{% include 'profile/_blocks/_stat_list.html' with stat=election_data|get:"Number of registered voters" stat_type='number' %}
</div>
<div class="column-quarter">
{% include 'profile/_blocks/_stat_list.html' with stat=election_data|get:"Of registered voters cast their vote" stat_type='percentage' %}
</div>
<div class="column-half" id="chart-histogram-elections-{{ key }}-party_distribution" data-stat-type="scaled-percentage" data-chart-title="Voters by party"></div>
</section>
{% endwith %}
{% endfor %}
{% if geography.this.geo_level == 'country' %}
<section class="clearfix stat-row">
<h2 class="header-for-columns"><a class="permalink" href="#elections_2014_media" id="elections_2014_media">Elections 2014 Media Coverage<i class="fa fa-link"></i></a></h2>
<div class="column-half" id="chart-pie-elections-national_2014-media_coverage-genders" data-stat-type="scaled-percentage" data-chart-title="Gender of politicians quoted by the media"></div>
<div class="column-half" id="chart-histogram-elections-national_2014-media_coverage-parties" data-stat-type="scaled-percentage" data-chart-title="Media coverage by political party"></div>
</section>
{% endif %}
</div>
</article>
<article id="demographics" class="clearfix">
<header class="section-contents">
<h1><i class="fa fa-fw fa-user"></i> Demographics</h1>
</header>
<div class="section-container">
<section class="clearfix stat-row">
<h2 class="header-for-columns"><a class="permalink" href="#age" id="age">Age <i class="fa fa-link"></i></a></h2>
<div class="column-quarter">
{% include 'profile/_blocks/_stat_list.html' with stat=demographics.median_age stat_type='number' %}
</div>
<div class="column-half" id="chart-histogram-demographics-age_group_distribution" data-stat-type="scaled-percentage" data-chart-title="Population by age range"></div>
<div class="column-quarter" id="chart-pie-demographics-age_category_distribution" data-stat-type="percentage" data-initial-sort="-value" data-chart-title="Population by age category"></div>
</section>
<section class="clearfix stat-row">
<h2 class="header-for-columns"><a class="permalink" href="#pop_count" id="pop_count">Population <i class="fa fa-link"></i></a></h2>
<div class="column-quarter">
{% include 'profile/_blocks/_stat_list.html' with stat=demographics.total_population stat_type='number' %}
</div>
<div class="column-half">
<div id="chart-column-demographics-population_group_distribution" data-stat-type="scaled-percentage" data-chart-title="Population group"></div>
</div>
<div class="column-quarter">
<div id="chart-pie-demographics-sex_ratio" data-stat-type="percentage" data-initial-sort="-value" data-chart-title="Sex"></div>
</div>
</section>
<section class="clearfix stat-row">
<h2 class="header-for-columns"><a class="permalink" href="#language" id="language">Language <i class="fa fa-link"></i></a></h2>
<div class="column-quarter">
{% include 'profile/_blocks/_stat_list.html' with stat=demographics.language_most_spoken stat_type='name' stat_name='Language most spoken at home' %}
</div>
<div class="column-three-quarters">
<div id="chart-histogram-demographics-language_distribution" data-stat-type="scaled-percentage" data-chart-title="Population by language most spoken at home"></div>
</div>
</section>
<section class="clearfix stat-row">
<h2 class="header-for-columns"><a class="permalink" href="#migration" id="migration">Migration <i class="fa fa-link"></i></a></h2>
<div class="column-quarter">
{% include 'profile/_blocks/_stat_list.html' with stat=demographics.born_in_south_africa stat_type='percentage' stat_name='Born in South Africa' %}
</div>
<div class="column-half" id="chart-column-demographics-province_of_birth_distribution" data-stat-type="scaled-percentage" data-chart-title="Province of birth"></div>
<div class="column-quarter" id="chart-pie-demographics-region_of_birth_distribution" data-stat-type="scaled-percentage" data-chart-title="Region of birth"></div>
</section>
<section class="clearfix stat-row">
<h2 class="header-for-columns"><a class="permalink" href="#citizenship" id="citizenship">Citizenship <i class="fa fa-link"></i></a></h2>
<div class="column-quarter">
{% include 'profile/_blocks/_stat_list.html' with stat=demographics.citizenship_south_african stat_type='percentage' stat_name='South African citizens' %}
</div>
<div class="column-quarter" id="chart-pie-demographics-citizenship_distribution" data-stat-type="percentage" data-chart-title="South African citizenship"></div>
</section>
</div>
</article>
<article id="households" class="clearfix">
<header class="section-contents">
<h1><i class="fa fa-fw fa-home"></i> Households</h1>
</header>
<div class="section-container">
<section class="clearfix stat-row">
<h2><a class="permalink" href="#households" id="households">Households <i class="fa fa-link"></i></a></h2>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=households.total_households stat_type='number' %}
</div>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=households.informal stat_type='percentage' %}
</div>
<div class="column-third" id="chart-pie-households-type_of_dwelling_distribution" data-stat-type="percentage" data-chart-title="Households by type of dwelling"></div>
</section>
<section class="clearfix stat-row grouped-row">
<h2><a class="permalink" href="#tenure" id="tenure">Household ownership <i class="fa fa-link"></i></a></h2>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=households.owned stat_type='percentage' %}
</div>
<div class="column-third" id="chart-pie-households-tenure_distribution" data-stat-type="percentage" data-initial-sort="-value" data-chart-title="Households by ownership"></div>
</section>
<section class="clearfix stat-row grouped-row">
<h2><a class="permalink" href="#household-head" id="household-head">Head of household <i class="fa fa-link"></i></a></h2>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=households.head_of_household.female stat_type='percentage' %}
</div>
<div class="column-third" id="chart-pie-households-head_of_household-gender_distribution" data-stat-type="percentage" data-initial-sort="-value" data-chart-title="Head of household by gender"></div>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=households.head_of_household.under_18 stat_type='number' %}
</div>
</section>
<section class="clearfix stat-row">
<h2><a class="permalink" href="#household-income" id="household-income">Annual household income<i class="fa fa-link"></i></a></h2>
<aside>
Average annual household income is <a href="/help#faq-average-hh-income">a median estimate</a>, be careful with this value.
</aside>
<div class="column-quarter">
{% include 'profile/_blocks/_stat_list.html' with stat=households.median_annual_income stat_type='dollar' %}
</div>
<div class="column-three-quarters" id="chart-column-households-annual_income_distribution" data-stat-type="scaled-percentage" data-chart-title="Annual household income"></div>
</section>
<section class="clearfix stat-row">
<h2><a class="permalink" href="#household_goods" id="household_goods">Household goods <i class="fa fa-link"></i></a></h2>
<div class="column-full" id="chart-column-households-household_goods" data-stat-type="scaled-percentage" data-chart-title="Goods available by household"></div>
</section>
</div>
</article>
<article id="service_delivery" class="clearfix">
<header class="section-contents">
<h1><i class="fa fa-fw fa-bolt"></i> Service delivery</h1>
</header>
<div class="section-container">
<section class="clearfix stat-row">
<h2><a class="permalink" href="#water" id="water">Water <i class="fa fa-link"></i></a></h2>
<aside>
</aside>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=service_delivery.percentage_water_from_service_provider stat_type='percentage' %}
</div>
<div class="column-third" id="chart-pie-service_delivery-water_source_distribution" data-stat-type="percentage" data-chart-title="Population by water source"></div>
{% if primary_release_year == 'latest' %}
<div class="column-third" id="chart-pie-service_delivery-water_supplier_distribution" data-stat-type="percentage" data-chart-title="Population by water supplier"></div>
{% endif %}
</section>
{% if geography.this.version == "2011" %}
<section class="clearfix stat-row">
<h2><a class="permalink" href="#electricity" id="electricity">Electricity <i class="fa fa-link"></i></a></h2>
<aside>
</aside>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=service_delivery.percentage_electricity_access stat_type='percentage' %}
</div>
<div class="column-third" id="chart-pie-service_delivery-electricity_access_distribution" data-stat-type="percentage" data-chart-title="Households by electricity usage"></div>
</section>
{% endif %}
{% if primary_release_year == 'latest' %}
<section class="clearfix stat-row">
<h2><a class="permalink" href="#electricity" id="electricity">Electricity <i class="fa fa-link"></i></a></h2>
<aside>
</aside>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=service_delivery.percentage_no_electricity_access stat_type='percentage' %}
</div>
<div class="column-third" id="chart-pie-service_delivery-electricity_access" data-stat-type="percentage" data-chart-title="Population by electricity access"></div>
</section>
{% endif %}
<section class="clearfix stat-row">
<h2><a class="permalink" href="#toilets" id="toilets">Toilet facilities <i class="fa fa-link"></i></a></h2>
<aside>
</aside>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=service_delivery.percentage_flush_toilet_access stat_type='percentage' %}
</div>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=service_delivery.percentage_no_toilet_access stat_type='percentage' %}
</div>
<div class="column-third" id="chart-pie-service_delivery-toilet_facilities_distribution" data-stat-type="percentage" data-chart-title="Population by toilet facilities"></div>
</section>
<section class="clearfix stat-row">
<h2><a class="permalink" href="#refuse" id="refuse">Refuse disposal <i class="fa fa-link"></i></a></h2>
<aside>
</aside>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=service_delivery.percentage_ref_disp_from_service_provider stat_type='percentage' %}
</div>
<div class="column-third" id="chart-pie-service_delivery-refuse_disposal_distribution" data-chart-title="Population by refuse disposal" data-stat-type="percentage"></div>
</section>
</div>
</article>
<article id="economics" class="clearfix">
<header class="section-contents">
<h1><i class="fa fa-fw fa-money"></i> Economics</h1>
</header>
<div class="section-container">
<section class="clearfix stat-row">
<h2><a class="permalink" href="#employment" id="employment">Employment <i class="fa fa-link"></i></a></h2>
<aside>
</aside>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=economics.employment_status.Employed stat_type='percentage' %}
</div>
<div class="column-third" id="chart-pie-economics-employment_status" data-chart-title="Population by employment status" data-stat-type="percentage" data-initial-sort="-value" data-qualifier="Universe: {{ economics.employment_status.metadata.universe }}"></div>
<div class="column-third" id="chart-pie-economics-sector_type_distribution" data-chart-title="Sector of employment" data-stat-type="percentage" data-initial-sort="-value" data-qualifier="Universe: {{ economics.sector_type_distribution.metadata.universe }}"></div>
</section>
{% if geography.this.version == "2011" %}
<section class="clearfix stat-row">
<h2><a class="permalink" href="#income" id="income">Monthly income <i class="fa fa-link"></i></a></h2>
<aside>
Average monthly income is <a href="/help#faq-average-hh-income">a median estimate</a>, be careful with this value.
</aside>
<div class="column-quarter">
{% include 'profile/_blocks/_stat_list.html' with stat=economics.median_individual_income stat_type='dollar' %}
</div>
<div class="column-three-quarters" id="chart-histogram-economics-individual_income_distribution" data-chart-title="Employees by monthly income" data-stat-type="scaled-percentage" data-qualifier="Universe: {{ economics.individual_income_distribution.metadata.universe }}"></div>
</section>
{% else %}
<section class="clearfix stat-row">
<h2><a class="permalink" href="#income" id="income">Annual income <i class="fa fa-link"></i></a></h2>
<aside>
Average annual income is <a href="/help#faq-average-hh-income">a median estimate</a>, be careful with this value.
</aside>
<div class="column-quarter">
{% include 'profile/_blocks/_stat_list.html' with stat=economics.median_annual_individual_income stat_type='dollar' %}
</div>
<div class="column-three-quarters" id="chart-histogram-economics-individual_annual_income_distribution" data-chart-title="Employees by annual income" data-stat-type="scaled-percentage" data-qualifier="Universe: {{ economics.individual_annual_income_distribution.metadata.universe }}"></div>
</section>
{% endif %}
<section class="clearfix stat-row">
<h2><a class="permalink" href="#internet" id="internet">Internet access <i class="fa fa-link"></i></a></h2>
{% if primary_release_year == 'latest' %}
<div class="column-full" id="chart-column-economics-internet_access_distribution" data-stat-type="scaled-percentage" data-chart-title="Means of internet access" data-qualifier="Universe: {{ economics.internet_access_distribution.metadata.universe }}"></div>
{% else %}
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=economics.internet_access stat_type='percentage' %}
</div>
<div class="column-third" id="chart-pie-economics-internet_access_distribution" data-chart-title="Primary means of internet access" data-stat-type="scaled-percentage" data-initial-sort="-value"></div>
{% endif %}
</section>
</div>
</article>
<article id="education" class="clearfix">
<header class="section-contents">
<h1><i class="fa fa-fw fa-graduation-cap"></i> Education</h1>
</header>
<div class="section-container">
<section class="clearfix stat-row">
<h2><a class="permalink" href="#highest-educational-level" id="highest-educational-level">Educational level <i class="fa fa-link"></i></a></h2>
<aside>
</aside>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=education.educational_attainment.percent_general_edu stat_type='percentage' %}
</div>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=education.educational_attainment.percent_further_edu stat_type='percentage' %}
</div>
</section>
<section class="clearfix stat-row">
<div class="column-full" id="chart-histogram-education-educational_attainment_distribution" data-stat-type="scaled-percentage" data-chart-title="Population by highest educational level" data-qualifier="Universe: {{ education.educational_attainment_distribution.metadata.universe }}"></div>
</section>
</div>
</article>
<article id="children" class="clearfix">
<header class="section-contents">
<h1><i class="fa fa-fw fa-child"></i> Children</h1>
</header>
<div class="section-container">
<section class="clearfix stat-row">
<h2 class="header-for-columns"><a class="permalink" href="#child_pop_count" id="child_pop_count">Child population <i class="fa fa-link"></i></a></h2>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=children.demographics.total_children stat_type='number' %}
</div>
<div class="column-third">
<div id="chart-pie-children-demographics-gender_distribution" data-stat-type="percentage" data-chart-title="Children under 18 by gender" data-qualifier="Universe: {{ children.demographics.gender_distribution.metadata.universe }}"></div>
</div>
<div class="column-third">
<div id="chart-pie-children-demographics-child_adult_distribution" data-stat-type="percentage" data-chart-title="Population by age category"></div>
</div>
</section>
<section class="clearfix stat-row">
<h2 class="header-for-columns"><a class="permalink" href="#parents" id="parents">Parents <i class="fa fa-link"></i></a></h2>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=children.demographics.percent_no_parent stat_type='percentage' %}
</div>
<div class="column-third">
<div id="chart-pie-children-demographics-parental_survival_distribution" data-stat-type="percentage" data-initial-sort="-value" data-chart-title="Children 14 and under by biological parental survival" data-qualifier="Universe: {{ children.demographics.parental_survival_distribution.metadata.universe }}"></div>
</div>
</section>
{% if crime %}
<section class="clearfix stat-row">
<aside>
Crime information is only currently available at national and provincial levels.
</aside>
<h2 class="header-for-columns"><a class="permalink" href="#crimes_children" id="crimes_children">Crimes against children <i class="fa fa-link"></i></a></h2>
<div class="column-full">
{% include 'profile/_blocks/_stat_list.html' with stat=crime.crime_against_children stat_type='number' %}
</div>
</section>
{% endif %}
<section class="clearfix stat-row">
<h2 class="header-for-columns"><a class="permalink" href="#child_school" id="child_school">School attendance <i class="fa fa-link"></i></a></h2>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=children.school.percent_school_attendance stat_type='percentage' %}
</div>
<div class="column-third">
<div id="chart-pie-children-school-school_attendance_distribution" data-stat-type="percentage" data-chart-title="Children 5 to 17 by school attendance" data-initial-sort="-value" data-qualifier="Universe: {{ children.school.school_attendance_distribution.metadata.universe }}"></div>
</div>
</section>
<section class="clearfix stat-row">
<div class="column-full">
<div id="chart-column-children-school-education17_distribution" data-stat-type="scaled-percentage" data-chart-title="17-year-olds by highest educational level" data-qualifier="Universe: {{ children.school.education17_distribution.metadata.universe }}"></div>
</div>
</section>
<section class="clearfix stat-row">
<h2 class="header-for-columns"><a class="permalink" href="#child_employment" id="child_employment">Employment of 15- to 17-year-olds <i class="fa fa-link"></i></a></h2>
{% if geography.this.version = "2011" %}
<aside>
Average monthly income is a median estimate, be careful with this value.
</aside>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=children.employment.median_income stat_type='dollar' %}
</div>
{% else %}
<aside>
Average annual income is a median estimate, be careful with this value.
</aside>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=children.employment.median_annual_income stat_type='dollar' %}
</div>
{% endif %}
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=children.employment.percent_in_labour_force stat_type='percentage' %}
</div>
<div class="column-third">
<div id="chart-pie-children-employment-employment_distribution" data-stat-type="percentage" data-chart-title="15- to 17-year olds by employment status" data-initial-sort="-value" data-qualifier="Universe: {{ children.employment.employment_distribution.metadata.universe }}"></div>
</div>
</section>
</div>
</article>
<article id="child_headed_households" class="clearfix">
<header class="section-contents">
<h1><i class="fa fa-fw fa-child"></i><i class="fa fa-child fa-tiny"></i> Child-headed households</h1>
</header>
<div class="section-container">
<section class="clearfix stat-row">
<h2><a class="permalink" href="#child-households" id="child-households">Households headed by children under 18 years old<i class="fa fa-link"></i></a></h2>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=child_households.total_households stat_type='number' %}
</div>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=child_households.informal stat_type='percentage' %}
</div>
<div class="column-third" id="chart-pie-child_households-type_of_dwelling_distribution" data-stat-type="percentage" data-chart-title="Child-headed households by type of dwelling" data-initial-sort="-value" data-qualifier="Universe: {{ child_households.type_of_dwelling_distribution.metadata.universe }}"></div>
</section>
<section class="clearfix stat-row grouped-row">
<h2><a class="permalink" href="#child-household-head" id="child-household-head">Head of household <i class="fa fa-link"></i></a></h2>
<div class="column-third">
{% include 'profile/_blocks/_stat_list.html' with stat=child_households.head_of_household.female stat_type='percentage' %}
</div>
<div class="column-third" id="chart-pie-child_households-head_of_household-gender_distribution" data-stat-type="percentage" data-initial-sort="-value" data-chart-title="Head of child-headed household by gender" data-initial-sort="-value" data-qualifier="Universe: {{ child_households.head_of_household.gender_distribution.metadata.universe }}"></div>
</section>
<section class="clearfix stat-row">
<h2><a class="permalink" href="#child-household-income" id="child-household-income">Annual household income <i class="fa fa-link"></i></a></h2>
<aside>
Average annual household income is a median estimate, be careful with this value.
</aside>
<div class="column-quarter">
{% include 'profile/_blocks/_stat_list.html' with stat=child_households.median_annual_income stat_type='dollar' %}
</div>
<div class="column-three-quarters" id="chart-column-child_households-annual_income_distribution" data-stat-type="scaled-percentage" data-chart-title="Annual child-headed household income" data-qualifier="Universe: {{ child_households.annual_income_distribution.metadata.universe }}"></div>
</section>
</div>
</article>
{% block citations %}
{% include "profile/_blocks/_change_release.html" %}
<div id="citations">
<h2>Citations:</h2>
<ul></ul>
</div>
{% endblock %}
{% endblock %}