Merge branch 'master' of https://github.com/aesthaddicts/OpenData

static/css/style.css

@@ -2,7 +2,7 @@ html, body {
     margin: 0;
     padding: 0;
     height: 100%;
-    font-family: 'Lora', serif;
+    font-family: 'Libre Baskerville', serif;
 }
 
 *, *:before, *:after {
@@ -11,13 +11,54 @@ html, body {
 
 body {
     background: #fff;
-    color: #000;
+    color: #222;
 }
 
+a {
+    color: inherit;
+}
+
+/* background map */
+
 #map {
     height: 100%;
 }
 
+.leaflet-popup {
+    pointer-events: none;
+}
+
+.leaflet-popup-content {
+    font-family: 'Libre Baskerville', serif;
+    margin: 1.3em;
+    line-height: inherit;
+    pointer-events: auto;
+}
+
+.leaflet-popup-content-wrapper {
+    border-radius: 0;
+    text-align: justify;
+}
+
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+    background: #222;
+    color: #fff;
+    box-shadow: none;
+}
+
+.leaflet-popup-scrolled {
+    border: none;
+}
+
+.circle-marker {
+    border-radius: 50%;
+    border: 2px solid rgba(0,0,0,.5);
+    background: rgba(0,0,0,.2);
+}
+
+/* filters */
+
 #filter-picker {
     position: absolute;
     z-index: 10;
@@ -98,7 +139,7 @@ body {
 }
 
 .category-filter .racism a:after {
-    border-color: #F8B195;
+    border-color: #355C7D;
 }
 
 .category-filter .antisemitism a:after {
@@ -114,11 +155,64 @@ body {
 }
 
 .category-filter .uncategorized a:after {
-    border-color: #355C7D;
+    border-color: #888888;
 }
 
-.circle-marker {
+/* overlay text */
-    border-radius: 50%;
+#overlay {
-    border: 2px solid rgba(0,0,0,.5);
+    position: absolute;
-    background: rgba(0,0,0,.2);
+    z-index: 1001;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background: linear-gradient(to bottom left, rgba(255,255,255,.2), white 50%);
+    display: table-cell;
+    vertical-align: center;
+}
+
+#overlay .text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 90%;
+    max-width: 1024px;
+    transform: translate(-50%,-50%);
+}
+
+#overlay h1 {
+    margin-top: -1.2em;
+    font-size: 48px;
+    margin-bottom: 0;
+    display: inline-block;
+    font-weight: 500;
+    font-style: italic;
+}
+
+#overlay p {
+    margin: 1em 0 1.2em;
+    padding: .6em 0;
+    line-height: 2;
+    font-size: 24px;
+}
+
+#overlay a {
+    text-decoration: none;
+    border-bottom: 1px dotted #333;
+    padding-bottom: .2em;
+}
+
+#overlay a:hover {
+    border-bottom-color: transparent;
+}
+
+#overlay .begin {
+    font-size: 24px;
+    border-bottom: none;
+    font-weight: bold;
+}
+
+#overlay .begin:after {
+    content: '›';
+    padding-left: .1em;
 }

static/js/main.js

@@ -2,7 +2,7 @@
 import Visualization from './visualization'
 
 // http://www.colourlovers.com/palette/1811244/1001_Stories
-var colors = [ '#F8B195', '#F67280', '#C06C84', '#6C5B7B', '#355C7D' ]
+var colors = [ '#355C7D', '#F67280', '#C06C84', '#6C5B7B', '#888888' ]
 
 // set up background map
 var map = L.map('map').setView([52.50, 13.40], 11)
@@ -19,8 +19,17 @@ $.getJSON('/articles/')
   .fail(console.error.bind(console))
   .then(function (response) {
     console.log('Got data successfully!')
+    console.log(response.length)
     visualization = new Visualization(map, response, colors)
       .setupCategoryFilter('.category-filter')
       .setupYearFilter('.year-filter')
       .displayMarkers()
-  });
+  })
+
+$('.begin').on('click', function (e) {
+  $('#overlay').fadeOut(700)
+
+  e.preventDefault()
+  e.stopPropagation()
+  return false
+})

static/js/visualization.js

@@ -23,11 +23,23 @@ class Visualization {
     // set up OMS
     this.oms = new OverlappingMarkerSpiderfier(map, {
       keepSpiderfied: true,
-      circleSpiralSwitchover: 12,
+      nearbyDistance: 1
     })
 
-    var popup = new L.Popup();
+    this.oms.legColors = {
+      usual: 'rgba(0,0,0,.2)',
+      highlighted: 'rgba(0,0,0,.5)'
+    }
+
+    var popup = new L.Popup({
+      autoPanPadding: [96, 96],
+      closeButton: false,
+      maxHeight: 250
+    });
     this.oms.addListener('click', function (marker) {
+      if (map.getZoom() < 10)
+        map.setZoom(9)
+
       popup.setContent(marker.description.replace(/\n/g, '<br>'))
       popup.setLatLng(marker.getLatLng())
       map.openPopup(popup)

views/index.tpl

@@ -2,12 +2,23 @@
 <html lang="de">
 <head>
     <meta charset="utf-8">
-    <title>Visualization of Hate Crime in Berlin</title>
+    <title>A mad world - Rechte Übergriffe in Berlin 2005 bis 2014</title>
+    <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
     <link rel="stylesheet" type="text/css" href="/static/css/style.css">
-    <link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
 </head>
 <body>
+    <script>document.body.classList.add('js')</script>
+    <div id="overlay">
+        <div class="text">
+            <h1>A mad world:</h1>
+            <p>
+                Jeder Punkt dieser Karte steht für einen Übergriff im Zeitraum von Januar 2005 bis November 2014.<br>
+                Die Chronik wurde erstellt von <a href="http://reachoutberlin.de/" target="_blank">ReachOut Berlin</a>. Analyse und Visualisierung von Joshua Widmann und Arne Schlüter.
+            </p>
+            <a href="#" class="begin">Beginnen</a>
+        </div>
+    </div>
     <nav id="filter-picker">
         <ul class="year-filter">
             <li class="all active"><a href="#">Alle</a></li>