gedankenstuecke/twitter-analyser

{% extends 'tweet_display/application.html' %}

{% block content %}

{% if oh_id == current_user_oh_id %}

{% include 'tweet_display/partials/graph_status.html' %}

{%endif%}

<style>
    #map { width: 100%; height: 70%; }
    .ghbtns { position: relative; top: 4px; margin-left: 5px; }


    #tlmap {
      width: 100%;
      height: 70%;
    }
    .leaflet-bottom.leaflet-left{
      width: 100%;
    }
    .leaflet-control-container .leaflet-timeline-controls{
      box-sizing: border-box;
      width: 100%;
      margin: 0;
      margin-bottom: 15px;
    }
</style>

<div class="row">
  <div class="col-md-8">
    {%if 'heatmap' in graphs%}
    <div id="map"></div>
    {%else%}
    {% include 'tweet_display/partials/graph_in_making.html' %}
    {%endif%}
  </div>
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Where have I been tweeting?</h3>
      </div>
      <div class="panel-body">
        <p>
          Tweets come with a lot of metadata these days. Amongst the most powerful
          and/or interesting kinds is the location data that many of us attach
          to our tweets. Twitter and Third-party Twitter clients allow
          the use of exact latitude/longitude for the location-data that is
          being associated with tweets. Thanks to this a Twitter archive can give
          a good overview of where all those tweets have been sent from. Be it
          tweets from our sofa, out of the office
          or while traveling and posting the holiday snapshots.
        </p>
        <p>
          This map visualizes all tweets out of the Twitter archive that have a latitude and longitude
          attached to them. It converts them into a simple heatmap. Regions with many tweets
          are shown in red, while regions with less tweets are given in blue. The exact scale
          depends on the zoom level. Zoom in to see exactly where you sent all
          these posts from. Can you identify the main places you post from?
        </p>
      </div>
    </div>
  </div>
</div>
<br/>
<div class="row">
  <div class="col-md-8">
    {%if 'timeline' in graphs%}
    <div id="tlmap"></div>
    {%else%}
    {% include 'tweet_display/partials/graph_in_making.html' %}
    {%endif%}
  </div>
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Tweet locations over time</h3>
      </div>
      <div class="panel-body">
        <p>
          Not all tweets come with geo locations enabled. But all geotagged
          tweets come with a time stamp of when they have been posted. This allows us
          to add another dimension to these maps: The time when they were posted, enabling
          us to have a movie that can serve as a proxy of movement across the globe.
        </p>
        <p>
          Instead of converting the geotagged tweets into a heatmap, this map shows the
          movement profile by turning a Twitter archive into an interactive map
          visualization. Press play to start the movement. Each geotagged tweet will appear as a
          pink blip on the map on the day it was posted. To make them more visible each tweet will stay
          on the map for 28 days.
        </p>
      </div>
    </div>
  </div>
</div></br>
{% include 'tweet_display/partials/graph_buttons.html' %}



<script>
  d3.json('{% url 'heatmap' oh_id=oh_id %}', function(data) {
    var map = L.map('map').setView([30, 0], 2);

    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);

    var heat = L.heatLayer(data,{'radius':15,'minOpacity':0.4}).addTo(map);
  })
</script>



<script>
  d3.json('{% url 'timeline' oh_id=oh_id %}', function(data) {
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">' +
      'OpenStreetMap</a> contributors';
    var osm = L.tileLayer(osmUrl, {
      maxZoom: 18,
      attribution: osmAttrib,
    });
    var tlmap = L.map('tlmap', {
      layers: [osm],
      center: new L.LatLng(30,0),
      zoom: 2,
    });

    var timelineControl = L.timelineSliderControl({
      duration: 40000,
      formatOutput: function(date){
        return moment(date).format("YYYY-MM-DD");
      }
    });
    var timeline = L.timeline(data, {
      pointToLayer: function(data, latlng){
        return L.circleMarker(latlng, {
          radius: 5,
          fillColor: "hsl(304, 100%, 50%)",
          weight: 0,
          opacity: 0.2
          })
        }
    });
    timelineControl.addTo(tlmap);
    timelineControl.addTimelines(timeline);
    timeline.addTo(tlmap);
  });
</script>
{% endblock %}