beta version initial commit

f602ac23 · Christopher Barnett · f602ac23 · f602ac23 · f602ac23 · f602ac23
Commit f602ac23 authored Apr 04, 2017 by Christopher Barnett
--- a/.gitignore
+++ b/.gitignore
+.idea/
+node_modules/
--- a/css/bootstrap.css
+++ b/css/bootstrap.css
--- a/css/bootstrap.min.css
+++ b/css/bootstrap.min.css
--- a/css/map.css
+++ b/css/map.css
+@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
+
+body {
+    font-family: 'Fjalla One', sans-serif;
+    color: #999;
+}
+
+html, body /*, and all other map parent selectors*/
+{
+    height: 100%;
+    overflow: hidden;
+    width: 100%;
+}
+
+.map-parent /*, and all other map parent selectors*/
+{
+    height: 100%;
+    overflow: hidden;
+}
+
+#map-container {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+#map {
+    width: auto;
+    height: 100%;
+    margin: 0;
+}
+
+div#legend {
+    background: rgba(0, 0, 0, .3);
+    border-radius: .5em;
+}
+
+div#legend text {
+    stroke-width: 0;
+    fill: #999;
+}
+
+div#legend line {
+    stroke-width: 12px;
+}
+
+div#legend line.buyer {
+    stroke: #8c510a;
+}
+
+div#legend line.seller {
+    stroke: #01665e;
+}
+
+.navbar-brand {
+    font-size: 25px;
+}
+
+.nav-sidebar {
+    width: 100%;
+    padding: 10px;
+}
+
+.nav-sidebar a {
+    -webkit-transition: all 0.08s linear;
+    -moz-transition: all 0.08s linear;
+    -o-transition: all 0.08s linear;
+    transition: all 0.08s linear;
+    border-radius: 0;
+    color: #999;
+}
+
+/*.nav-sidebar .active a {
+	cursor: default;
+	background-color: #428bca;
+	color: #fff;
+	text-shadow: 1px 1px 1px #666;
+}
+.nav-sidebar .active a:hover {
+	background-color: #428bca;
+}*/
+.nav-sidebar .text-overflow a,
+.nav-sidebar .text-overflow .media-body {
+    white-space: nowrap;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+}
+
+/* Right-aligned sidebar */
+.nav-sidebar.pull-right {
+    border-right: 0;
+    border-left: 1px solid #ddd;
+}
+
+.nav-sidebar.pull-right a {
+    border-radius: 0;
+}
+
+.side-content {
+    padding-top: 20px;
+    padding-left: 0;
+    margin-bottom: 0;
+}
+
+.details {
+    padding: 10px;
+    overflow-y: scroll;
+    max-height: 500px;
+}
+
+.details ul {
+    list-style: none;
+}
+
+.detail-item {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.case-name {
+    font-size: 1.1em;
+    color: #ccc;
+}
+
+.country-name {
+    font-size: 1.3em;
+    color: #ccc;
+}
+
+.page-header {
+
+}
\ No newline at end of file
--- a/css/the-big-picture.css
+++ b/css/the-big-picture.css
+/*!
+ * Start Bootstrap - The Big Picture (http://startbootstrap.com/)
+ * Copyright 2013-2016 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
+ */
+
+body {
+    /*	margin-top: 50px;
+        margin-bottom: 50px;*/
+    background: #000 no-repeat center center fixed;
+    color: #888;
+}
+
+.full {
+    background: #000 no-repeat center center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
\ No newline at end of file
--- a/data/countries.geojson
+++ b/data/countries.geojson
--- a/data/export_import.json
+++ b/data/export_import.json
+[
+  {
+    "CaseName": "Al Yamamah",
+    "RID": 1,
+    "Sellers": "GBR",
+    "Buyers": "SAU"
+  },
+  {
+    "CaseName": "Angolagate",
+    "RID": 2,
+    "Sellers": "BGR",
+    "Buyers": "AGO"
+  },
+  {
+    "CaseName": "Angolagate",
+    "RID": 3,
+    "Sellers": "FRA",
+    "Buyers": "AGO"
+  },
+  {
+    "CaseName": "Angolagate",
+    "RID": 4,
+    "Sellers": "RUS",
+    "Buyers": "AGO"
+  },
+  {
+    "CaseName": "Angolagate",
+    "RID": 5,
+    "Sellers": "SVK",
+    "Buyers": "AGO"
+  },
+  {
+    "CaseName": "Barak missiles",
+    "RID": 6,
+    "Sellers": "ISR",
+    "Buyers": "IND"
+  },
+  {
+    "CaseName": "Gripen deals",
+    "RID": 7,
+    "Sellers": "SWE",
+    "Buyers": "AUT"
+  },
+  {
+    "CaseName": "Gripen deals",
+    "RID": 8,
+    "Sellers": "SWE",
+    "Buyers": "CZE"
+  },
+  {
+    "CaseName": "Gripen deals",
+    "RID": 9,
+    "Sellers": "SWE",
+    "Buyers": "HUN"
+  },
+  {
+    "CaseName": "Gripen deals",
+    "RID": 10,
+    "Sellers": "GBR",
+    "Buyers": "AUT"
+  },
+  {
+    "CaseName": "Gripen deals",
+    "RID": 11,
+    "Sellers": "GBR",
+    "Buyers": "CZE"
+  },
+  {
+    "CaseName": "Gripen deals",
+    "RID": 12,
+    "Sellers": "GBR",
+    "Buyers": "HUN"
+  },
+  {
+    "CaseName": "Fake Bomb Detectors",
+    "RID": 13,
+    "Sellers": "GBR",
+    "Buyers": "MEX"
+  },
+  {
+    "CaseName": "Fake Bomb Detectors",
+    "RID": 14,
+    "Sellers": "GBR",
+    "Buyers": "IRQ"
+  },
+  {
+    "CaseName": "Fake Bomb Detectors",
+    "RID": 15,
+    "Sellers": "GBR",
+    "Buyers": "THA"
+  },
+  {
+    "CaseName": "Greek submarines",
+    "RID": 16,
+    "Sellers": "DEU",
+    "Buyers": "GRC"
+  },
+  {
+    "CaseName": "Indian VVIP helicopters",
+    "RID": 17,
+    "Sellers": "ITA",
+    "Buyers": "IND"
+  },
+  {
+    "CaseName": "Indian VVIP helicopters",
+    "RID": 18,
+    "Sellers": "GBR",
+    "Buyers": "IND"
+  },
+  {
+    "CaseName": "Korea AW159",
+    "RID": 19,
+    "Sellers": "GBR",
+    "Buyers": "KOR"
+  },
+  {
+    "CaseName": "L’Affaire Karachi",
+    "RID": 20,
+    "Sellers": "FRA",
+    "Buyers": "SAU"
+  },
+  {
+    "CaseName": "L’Affaire Karachi",
+    "RID": 21,
+    "Sellers": "FRA",
+    "Buyers": "PAK"
+  },
+  {
+    "CaseName": "Malaysian submarines",
+    "RID": 22,
+    "Sellers": "FRA",
+    "Buyers": "MYS"
+  },
+  {
+    "CaseName": "Malaysian submarines",
+    "RID": 23,
+    "Sellers": "ESP",
+    "Buyers": "MYS"
+  },
+  {
+    "CaseName": "South African arms deal",
+    "RID": 24,
+    "Sellers": "FRA",
+    "Buyers": "ZAF"
+  },
+  {
+    "CaseName": "South African arms deal",
+    "RID": 25,
+    "Sellers": "DEU",
+    "Buyers": "ZAF"
+  },
+  {
+    "CaseName": "South African arms deal",
+    "RID": 26,
+    "Sellers": "ITA",
+    "Buyers": "ZAF"
+  },
+  {
+    "CaseName": "South African arms deal",
+    "RID": 27,
+    "Sellers": "SWE",
+    "Buyers": "ZAF"
+  },
+  {
+    "CaseName": "South African arms deal",
+    "RID": 28,
+    "Sellers": "GBR",
+    "Buyers": "ZAF"
+  },
+  {
+    "CaseName": "Taiwan Lafayette Frigates",
+    "RID": 29,
+    "Sellers": "FRA",
+    "Buyers": "CHN"
+  },
+  {
+    "CaseName": "Tanzania ATC system",
+    "RID": 30,
+    "Sellers": "GBR",
+    "Buyers": "TZA"
+  }
+]
\ No newline at end of file
--- a/dist/js/app.js
+++ b/dist/js/app.js
--- a/fonts/glyphicons-halflings-regular.eot
+++ b/fonts/glyphicons-halflings-regular.eot
--- a/fonts/glyphicons-halflings-regular.svg
+++ b/fonts/glyphicons-halflings-regular.svg
--- a/fonts/glyphicons-halflings-regular.ttf
+++ b/fonts/glyphicons-halflings-regular.ttf
--- a/fonts/glyphicons-halflings-regular.woff
+++ b/fonts/glyphicons-halflings-regular.woff
--- a/fonts/glyphicons-halflings-regular.woff2
+++ b/fonts/glyphicons-halflings-regular.woff2
--- a/gulpfile.js
+++ b/gulpfile.js
+"use strict";
+
+var browserify = require("browserify");
+var gulp = require("gulp");
+var source = require("vinyl-source-stream");
+var buffer = require("vinyl-buffer");
+var uglify = require("gulp-uglify");
+var gutil = require("gulp-util");
+
+gulp.task("javascript", function () {
+    // set up the browserify instance on a task basis
+    var b = browserify({
+        entries: "./js/map.js",
+        debug: true
+    });
+
+    return b.bundle()
+        .pipe(source("app.js"))
+        .pipe(buffer())
+        // Add transformation tasks to the pipeline here.
+        .pipe(uglify())
+        .on("error", gutil.log)
+        .pipe(gulp.dest("./dist/js/"));
+});
\ No newline at end of file
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="en">
+<!-- Make sure the <html> tag is set to the .full CSS class. Change the background image in the full.css file. -->
+
+<head>
+
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Corrupt Arms Deals</title>
+
+    <!-- Bootstrap Core CSS -->
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Custom CSS -->
+    <link href="css/the-big-picture.css" rel="stylesheet">
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
+
+    <link rel="stylesheet" href="css/map.css"/>
+    <!-- Bootstrap Core JavaScript -->
+    <script src="dist/js/app.js"></script>
+
+</head>
+
+<body>
+
+<!--
+    &lt;!&ndash; Navigation &ndash;&gt;
+    <nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
+        <div class="container">
+            &lt;!&ndash; Brand and toggle get grouped for better mobile display &ndash;&gt;
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="#">Corrupt Arms Deals</a>
+            </div>
+            &lt;!&ndash; Collect the nav links, forms, and other content for toggling &ndash;&gt;
+            <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li>
+                        <a href="#">About</a>
+                    </li>
+                    <li>
+                        <a href="#">Contact</a>
+                    </li>
+                </ul>
+            </div>
+            &lt;!&ndash; /.navbar-collapse &ndash;&gt;
+        </div>
+        &lt;!&ndash; /.container &ndash;&gt;
+    </nav>
+-->
+
+<!-- Page Content -->
+<div id="map-container" class="container-fluid map-parent">
+    <div class="row map-parent">
+        <div class="col-sm-9 map-parent">
+            <div id="map"></div>
+        </div>
+
+        <div class="col-sm-3">
+            <nav class="nav-sidebar">
+                <div class="page-header">
+                    <h1><a href="#">Corrupt Arms Deals</a></h1>
+                </div>
+                <div class="side-content">
+                    <div class="instructions">
+                        click a country to see details about arms transactions.
+                    </div>
+                    <div class="details">
+
+                    </div>
+                </div>
+            </nav>
+
+        </div>
+
+    </div>
+</div>
+<!-- /.container -->
+
+
+<div id="legend">
+    <svg width="120" height="55">
+        <line x1="28" y1="20" x2="40" y2="20" class="seller"/>
+        <text x="40" y="20" transform="translate(8,4)">Exporters</text>
+        <line x1="28" y1="40" x2="40" y2="40" class="buyer"/>
+        <text x="40" y="40" transform="translate(8,4)">Importers</text>
+    </svg>
+</div>
+
+<script type="text/template" id="details-template">
+    <div class="country-name"><b><%= country %></b></div>
+    <div id="detail-connections">
+        <% _.each(connections, function(v, k) { %>
+        <div class="detail-item">
+            <ul>
+                <li class="case-name">
+                    <b><%= k %></b>
+                </li>
+                <li>
+                    exporters: <%= v.exporters.join(", ") %>
+                </li>
+                <li>
+                    importers: <%= v.importers.join(", ") %>
+                </li>
+                <li>
+                    company:
+                </li>
+                <li>
+                    year:
+                </li>
+                <li>
+                    value of deal:
+                </li>
+                <li>
+                    amount of corruption:
+                </li>
+                <li>
+                    equipment:
+                </li>
+
+            </ul>
+        </div>
+        <% }); %>
+    </div>
+</script>
+
+
+</body>
+
+</html>
--- a/js/app.js
+++ b/js/app.js
+/**
+ * @author Jawish Hameed <jawish@gmail.com>
+ * @version 0.1
+ * @date 20-12-2015
+ *
+ *
+ * Expects the following config:
+ * var config {
+ *     linkFile = 'data.csv',
+ *     weightMin = 0,
+ *     weightMax = 80,
+ *     lineColorMode = 'fixed', // fixed, random, weight, atoll or a colorname
+ *     lineColorIn = 'red',
+ *     lineColorOut = 'green',
+ *     baseMapProvider = 'esri', // esri, osm
+ *     startLatLng = [3.175, 73.509],
+ *     startZoom = 7
+ * }
+ *
+ */
+
+var atollLayers = {};
+var linkLayers = {};
+var atollSelected = null;
+
+// Create map and center around Maldives
+var esriMap = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+});
+var osmMap = L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}', {
+    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
+});
+var watercolor = L.tileLayer('http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg', {
+    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+});
+
+var map = L.map('map', {
+    center: config.startLatLng,
+    zoom: config.startZoom,
+    layers: [
+        (config.baseMapProvider == 'esri') ? esriMap : osmMap
+    ]
+});
+
+// Load the atolls GeoJSON file
+d3.json('atolls.geojson', function (error, atolls) {
+    if (error) throw error;
+
+    var atollLayer = L.geoJson(atolls, {
+        onEachFeature: function (feature, layer) {
+
+            var atollStyle = {
+                'opacity': 0.1,
+                'color': null
+            };
+
+            var immigrants = 0,
+                emigrants = 0;
+
+            layer
+                .setStyle(atollStyle)
+                .bindLabel(feature.properties.name, {noHide: true})
+                .on('mouseover', function () {
+                    this.setStyle({
+                        'opacity': 0.9,
+                        'color': 'white'
+                    });
+                })
+                .on('mouseout', function () {
+                    this.setStyle(atollStyle);
+                })
+                .on('dblclick', function () {
+
+                    layer.bindPopup('<p3>' + feature.properties.name + '</p3><br><p4>Immigration: ' + immigrants + '</p4><br><p4>Emigration: ' + emigrants + '</p4>').openPopup();
+                })
+                .on('click', function (e) {
+
+                    layer.closePopup();
+
+                    for (var linkPath in linkLayers) {
+                        var path = linkPath.split('-');
+
+                        if (atollSelected != null && atollSelected != path[0]) {
+                            map.addLayer(linkLayers[linkPath].feature);
+                        }
+                    }
+
+                    if (atollSelected == null || atollSelected != feature.id) {
+
+                        for (var linkPath in linkLayers) {
+                            var path = linkPath.split('-');
+
+                            if (feature.id != path[0] && feature.id != path[1]) {
+                                map.removeLayer(linkLayers[linkPath].feature);
+                            }
+                            else {
+                                if (feature.id == path[0]) emigrants += parseInt(linkLayers[linkPath].data.value);