Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
166 lines (146 sloc) 7.5 KB
{% extends '_base.html' %}{% load humanize partition staticfiles jsonify %}
{% block head_title %}{{ block.super }}: Making Census Data Easy to Use{% endblock %}
{% block head_meta_description %}{{ WAZIMAP.name }} provides useful facts about places in {{ root_geo.name }}. Compare places using tables and maps, download data, and embed charts on your site!{% endblock %}
{% block body_id %}homepage{% endblock %}
{% block head_css_extra %}
<link rel="stylesheet" href="{% static 'css/vendor/leaflet-0.6.4.css' %}" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="{% static 'css/vendor/leaflet-0.6.4.ie.css' %}" />
<![endif]-->
<link href="{% static 'css/vendor/leaflet.label.css' %}" rel="stylesheet" />
{% endblock %}
{% block content_container %}
{% block place_finder %}
<div class="content-container clearfix tan-stripe">
<article id="profile" class="clearfix wrapper">
<section class="column-full clearfix big-action">
<h1 class="article-header">Where to?</h1>
<div id="geography-select-wrapper" class="input-wrapper">
<input name="geography_select" id="geography-select" type="text" placeholder="Find a place in {{ root_geo.name }}..." autocomplete="off" autofocus="on">
<div class="geolocate-only">
<span class="or">or</span>
<a href="{% url 'locate' %}" class="action-button"><i class="fa fa-location-arrow"></i> Use your current location</a>
</div>
<div>
<span class="or">or</span>
<a class="action-button" href="/profiles/{{ root_geo.geo_level }}-{{root_geo.geo_code }}/">Browse {{ root_geo.name }}</a>
</div>
</div>
</section>
</article>
</div>
{% endblock %}
{% block homepage_detail %}
<div class="content-container clearfix">
<article id="explore" class="clearfix wrapper">
{% include "data/_blocks/_data_query_builder.html" %}
</article>
</div>
<div class="content-container clearfix tan-stripe">
<article class="wrapper">
{% block hero %}
<section class="column-full clearfix">
<h1 class="article-header">Discover the story behind the data.</h1>
<div id="slippy-map"></div>
</section>
<section>
<div class="column-third callout with-icon">
<h3>
<i class="fa fa-book"></i>
Find facts
</h3>
<p>Populations and financial figures are broken down by category: Elections, Demographics, Service Delivery, Economics and Education.</p>
</div>
<div class="column-third callout with-icon">
<h3>
<i class="fa fa-bar-chart-o"></i>
Visualize
</h3>
<p>Our library of charts gives you insight into data from the places you research. Look for them on profile pages. You can even <a href="{% url 'example_detail' 'embed-charts' %}">embed the charts</a> on your own site.</p>
</div>
<div class="column-third callout with-icon">
<h3>
<i class="fa fa-refresh"></i>
Get context
</h3>
<p>Pre-computed statistics are presented alongside each data point, so you can see how each place fits into a larger context.</p>
</div>
</section>
{% endblock %}
</article>
</div>
<div class="content-container clearfix">
<article id="examples" class="clearfix wrapper">
<header class="column-full">
<h1 class="article-header">Using {{ WAZIMAP.name }}</h1>
</header>
<section class="card-container clearfix">
{% block tips %}
<h2 class="column-full subhead">Finding places</h2>
<span class="column-half card">
<img src="{% static 'img/examples/text_search.png' %}">
<span class="caption">Type in the name or address of a place. Then select the location you are interested in from the dropdown.</span>
</span>
<span class="column-half card">
<img src="{% static 'img/examples/map_search.png' %}">
<span class="caption">Alternatively, click on the map area you want to go to. The <span class="zoom-in">+</span> and <span class="zoom-out">-</span> buttons zoom in an out.</span>
</span>
<h2 class="column-full subhead">Exploring data</h2>
<span class="column-half card">
<img src="{% static 'img/examples/section_overview.png' %}">
<span class="caption">Statistics are broken down into categories, e.g. Service Delivery. Find a key figure for a sub-category on the left.</span>
</span>
<span class="column-half card">
<img src="{% static 'img/examples/hover_over_graph.png' %}">
<span class="caption">Hover over graphs to see comparisons with the province and country averages.</span>
</span>
{% endblock %}
</section>
</article>
</div>
<div class="content-container clearfix tan-stripe">
<article id="showcase" class="clearfix wrapper">
{% block showcase %}
{% endblock %}
</article>
</div>
<div class="content-container clearfix">
<article id="about" class="clearfix wrapper">
<header class="column-full">
<h1 class="article-header">About {{ WAZIMAP.name }}</h1>
</header>
<section class="clearfix">
{% block about %}
<p class="explainer">Wazimap, from the Xhosa word <i>ulwazi</i> for knowledge, is a joint project by <a href="http://www.mediamonitoringafrica.org/" target="_blank">Media Monitoring Africa</a> and <a href="https://www.openup.org.za/" target="_blank">OpenUp</a> that provides easy access to <a href="http://www.statssa.gov.za/" target="_blank">South African census</a> and <a href="http://www.elections.org.za/" target="_blank">elections</a> data.</p>
<p>Read more about <a href="/about">who we are and why we built Wazimap</a>.
<h2 class="column-full subhead">Shoulders of Giants</h2>
<p>Wazimap is based on the amazing <a href="http://censusreporter.org/" target="_blank">Census Reporter</a> and is completely open source. You can <a href="http://wazimap.readthedocs.io/en/latest/">build a Wazimap for your own country</a>.</p>
{% endblock %}
</section>
</article>
</div>
{% endblock %}
{% endblock %}
{% block body_javascript_extra %}
{{ block.super }}
{% block homepage_javascripb_libs %}
<script src="{% static 'js/vendor/leaflet-0.6.4.js' %}"></script>
<script src="{% static 'js/vendor/topojson.v1.min.js' %}"></script>
<script src="{% static 'js/vendor/leaflet.label.js' %}"></script>
<script src="{% static 'js/maps_static.js' %}"></script>
<script src="{% static 'js/profile_map.js' %}"></script>
{% endblock %}
<script>
// show 'use my current location' button
if (Modernizr.geolocation) {
$('.geolocate-only').show();
}
// geoSelect already defined by widget.geo.select.js
geoSelect.focus()
var maps = new ProfileMaps();
var centre = {% if WAZIMAP.map_centre %}{{ WAZIMAP.map_centre }}{% else %}null{% endif %};
var zoom = {% if WAZIMAP.map_zoom %}{{ WAZIMAP.map_zoom }}{% else %}null{% endif %};
maps.drawMapForHomepage({{ geo_data.first_child_level|jsonify|safe }}, {{ WAZIMAP.default_geo_version|jsonify|safe }}, centre, zoom);
</script>
<script src="{% static 'js/data.query.builder.js' %}"></script>
{% endblock %}