fiveEleven · fossage · Jul 29, 2015 · Jul 29, 2015 · Jul 29, 2015 · Jul 29, 2015
diff --git a/jobvisualization/apps/__init__.py → apps/__init__.py b/jobvisualization/apps/__init__.py → apps/__init__.py
diff --git a/apps/__init__.pyc b/apps/__init__.pyc
diff --git a/...sualization/apps/data_storage/__init__.py → apps/data_storage/__init__.py b/...sualization/apps/data_storage/__init__.py → apps/data_storage/__init__.py
diff --git a/apps/data_storage/__init__.pyc b/apps/data_storage/__init__.pyc
diff --git a/jobvisualization/apps/data_storage/admin.py → apps/data_storage/admin.py b/jobvisualization/apps/data_storage/admin.py → apps/data_storage/admin.py
diff --git a/apps/data_storage/admin.pyc b/apps/data_storage/admin.pyc
diff --git a/...ualization/apps/data_storage/job_query.py → apps/data_storage/job_query.py b/...ualization/apps/data_storage/job_query.py → apps/data_storage/job_query.py
diff --git a/...alization/apps/data_storage/job_query.pyc → apps/data_storage/job_query.pyc b/...alization/apps/data_storage/job_query.pyc → apps/data_storage/job_query.pyc
diff --git a/...s/data_storage/migrations/0001_initial.py → apps/data_storage/migrations/0001_initial.py b/...s/data_storage/migrations/0001_initial.py → apps/data_storage/migrations/0001_initial.py
diff --git a/.../data_storage/migrations/0001_initial.pyc → .../data_storage/migrations/0001_initial.pyc b/.../data_storage/migrations/0001_initial.pyc → .../data_storage/migrations/0001_initial.pyc
diff --git a/...age/migrations/0002_auto_20150727_2312.py → ...age/migrations/0002_auto_20150727_2312.py b/...age/migrations/0002_auto_20150727_2312.py → ...age/migrations/0002_auto_20150727_2312.py
diff --git a/apps/data_storage/migrations/0002_auto_20150727_2312.pyc b/apps/data_storage/migrations/0002_auto_20150727_2312.pyc
diff --git a/...age/migrations/0003_auto_20150728_2302.py → ...age/migrations/0003_auto_20150728_2302.py b/...age/migrations/0003_auto_20150728_2302.py → ...age/migrations/0003_auto_20150728_2302.py
diff --git a/...ge/migrations/0003_auto_20150728_2302.pyc → ...ge/migrations/0003_auto_20150728_2302.pyc b/...ge/migrations/0003_auto_20150728_2302.pyc → ...ge/migrations/0003_auto_20150728_2302.pyc
diff --git a/.../apps/data_storage/migrations/__init__.py → apps/data_storage/migrations/__init__.py b/.../apps/data_storage/migrations/__init__.py → apps/data_storage/migrations/__init__.py
diff --git a/apps/data_storage/migrations/__init__.pyc b/apps/data_storage/migrations/__init__.pyc
diff --git a/jobvisualization/apps/data_storage/models.py → apps/data_storage/models.py b/jobvisualization/apps/data_storage/models.py → apps/data_storage/models.py
diff --git a/apps/data_storage/models.pyc b/apps/data_storage/models.pyc
diff --git a/jobvisualization/apps/data_storage/tests.py → apps/data_storage/tests.py b/jobvisualization/apps/data_storage/tests.py → apps/data_storage/tests.py
diff --git a/jobvisualization/apps/data_storage/views.py → apps/data_storage/views.py b/jobvisualization/apps/data_storage/views.py → apps/data_storage/views.py
diff --git a/jobvisualization/apps/data_storage/views.pyc → apps/data_storage/views.pyc b/jobvisualization/apps/data_storage/views.pyc → apps/data_storage/views.pyc
diff --git a/jobvisualization/apps/mapvisuals/__init__.py → apps/mapvisuals/__init__.py b/jobvisualization/apps/mapvisuals/__init__.py → apps/mapvisuals/__init__.py
diff --git a/apps/mapvisuals/__init__.pyc b/apps/mapvisuals/__init__.pyc
diff --git a/jobvisualization/apps/mapvisuals/admin.py → apps/mapvisuals/admin.py b/jobvisualization/apps/mapvisuals/admin.py → apps/mapvisuals/admin.py
diff --git a/apps/mapvisuals/admin.pyc b/apps/mapvisuals/admin.pyc
diff --git a/...on/apps/mapvisuals/migrations/__init__.py → apps/mapvisuals/lib/__init__.py b/...on/apps/mapvisuals/migrations/__init__.py → apps/mapvisuals/lib/__init__.py
diff --git a/apps/mapvisuals/lib/__init__.pyc b/apps/mapvisuals/lib/__init__.pyc
diff --git a/apps/mapvisuals/lib/states.py b/apps/mapvisuals/lib/states.py
diff --git a/apps/mapvisuals/lib/states.pyc b/apps/mapvisuals/lib/states.pyc
diff --git a/...isualization/jobvisualization/__init__.py → apps/mapvisuals/migrations/__init__.py b/...isualization/jobvisualization/__init__.py → apps/mapvisuals/migrations/__init__.py
diff --git a/apps/mapvisuals/migrations/__init__.pyc b/apps/mapvisuals/migrations/__init__.pyc
diff --git a/jobvisualization/apps/mapvisuals/models.py → apps/mapvisuals/models.py b/jobvisualization/apps/mapvisuals/models.py → apps/mapvisuals/models.py
diff --git a/apps/mapvisuals/models.pyc b/apps/mapvisuals/models.pyc
diff --git a/apps/mapvisuals/states.json b/apps/mapvisuals/states.json
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/material-design-icons/LICENSE.txt b/apps/mapvisuals/static/mapvisuals/css/lib/material-design-icons/LICENSE.txt
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/material-design-icons/Material-Design-Icons.eot b/apps/mapvisuals/static/mapvisuals/css/lib/material-design-icons/Material-Design-Icons.eot
diff --git a/...suals/static/mapvisuals/css/lib/material-design-icons/Material-Design-Icons.svg b/...suals/static/mapvisuals/css/lib/material-design-icons/Material-Design-Icons.svg
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/material-design-icons/Material-Design-Icons.ttf b/apps/mapvisuals/static/mapvisuals/css/lib/material-design-icons/Material-Design-Icons.ttf
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/material-design-icons/Material-Design-Icons.woff b/apps/mapvisuals/static/mapvisuals/css/lib/material-design-icons/Material-Design-Icons.woff
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/material-design-icons/Material-Design-Icons.woff2 b/apps/mapvisuals/static/mapvisuals/css/lib/material-design-icons/Material-Design-Icons.woff2
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/materialize.min.css b/apps/mapvisuals/static/mapvisuals/css/lib/materialize.min.css
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Bold.ttf b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Bold.ttf
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Bold.woff b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Bold.woff
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Bold.woff2 b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Bold.woff2
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Light.ttf b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Light.ttf
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Light.woff b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Light.woff
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Light.woff2 b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Light.woff2
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Medium.ttf b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Medium.ttf
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Medium.woff b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Medium.woff
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Medium.woff2 b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Medium.woff2
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Regular.ttf b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Regular.ttf
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Regular.woff b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Regular.woff
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Regular.woff2 b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Regular.woff2
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Thin.ttf b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Thin.ttf
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Thin.woff b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Thin.woff
diff --git a/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Thin.woff2 b/apps/mapvisuals/static/mapvisuals/css/lib/roboto/Roboto-Thin.woff2
diff --git a/apps/mapvisuals/static/mapvisuals/css/style.css b/apps/mapvisuals/static/mapvisuals/css/style.css
@@ -0,0 +1,4 @@
+.tasks-container{
+	margin-bottom: 40px;
+	padding: 20px;
+}
diff --git a/apps/mapvisuals/static/mapvisuals/index.html b/apps/mapvisuals/static/mapvisuals/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Project</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" type="text/css" href="/css/lib/bootstrap.css">
+	<link rel="stylesheet" type="text/css" href="/css/lib/bootstrap-theme.css">
+	<link rel="stylesheet" type="text/css" href="/css/lib/bootstrap-social.css">
+	<link rel="stylesheet" type="text/css" href="/css/lib/font-awesome.css">
+	<link rel="stylesheet" href="/css/style.css"> 
+	<link rel="stylesheet" href="js/lib/leaflet-1.0.0-b1/leaflet.css">  
+
+	<script src="/js/lib/jquery-1.9.1.js"></script>
+    <script src="/js/lib/jquery-ui.js"></script>
+	<script type="text/javascript" src="/js/lib/bootstrap.js"></script>
+	<script type="text/javascript" src="/js/lib/d3/d3.js"></script>
+
+	<!-- <script type="text/javascript" src="/socket.io/socket.io.js"></script> -->
+    <script type="text/javascript" src="/js/lib/angular/angular.js"></script>
+    <script type="text/javascript" src="/js/lib/angular/angular-route.js"></script>
+
+	<script type="text/javascript" src="/js/lib/leaflet-1.0.0-b1/leaflet-src.js"></script>
+	<script type="text/javascript" src="/js/modules/angular-leaflet-directive.js"></script>
+
+
+	<script type="text/javascript" src="/js/lib/heatmap/heatmap.min.js"></script>
+    <script type="text/javascript" src="/js/lib/heatmap/leaflet-heatmap.js"></script>
+	<script type="text/javascript" src="/js/lib/Leaflet.D3SvgOverlay/L.D3SvgOverlay.js"></script>
+	<script type="text/javascript" src="/js/modules/modules.js"></script>
+	<script type="text/javascript" src="/js/factories/factories.js"></script>
+	<script type="text/javascript" src="/js/controllers/controllers.js"></script>
+	<script type="text/javascript" src="/js/directives/directives.js"></script>
+	<script type="text/javascript" src="/js/services/services.js"></script>
+	<script type="text/javascript" src="/js/partialRoutes.js"></script>
+	<style>
+		#map {
+		  width: 960px;
+		  height: 500px;
+		}
+
+		svg {
+		  position: relative;
+		}
+
+		path {
+		  fill: grey;
+		  fill-opacity: .2;
+		  stroke: #fff;
+		  stroke-width: 1.5px;
+		}
+
+		path:hover {
+		  fill: brown;
+		  fill-opacity: .7;
+		}
+
+		.container{
+			margin-top: 20px;
+		}
+
+		/*.point{
+			fill: orange;
+			fill-opacity: .7;
+		}*/
+
+	</style>
+</head>
+<body>
+ 	<div ng-app="app" class="container" ng-controller="MapController as main">
+ 		<leaflet event-broadcast="events" defaults="defaults" center="center" height="600px" width="1200px"></leaflet>
+    </div>
+</body>
+</html>
diff --git a/apps/mapvisuals/static/mapvisuals/js/controllers/mapController.js b/apps/mapvisuals/static/mapvisuals/js/controllers/mapController.js
@@ -0,0 +1,280 @@
+app.controller('MapController', ['$scope', 'leafletData',
+
+    function($scope, leafletData) {
+
+        // Start the map zoomed in on the center of the country 
+        //and add custom event listenters for our leaflet directive
+        angular.extend($scope, {
+            center: {
+                lat: 39.8282,
+                lng: -98.5795,
+                zoom: 4,
+            },
+            events: {
+                map: {
+                    enable: ['zoomstart', 'zoomend'],
+                    logic: 'emit'
+                }
+            }
+        });
+
+        /*********************************************************
+                           MAP INITIALIZATIONS
+        *********************************************************/
+        // Grabs our map objects as a promise and then adds a click handler and runs our 
+        // d3Map function which generates our d3 overlay.
+        d3.json("/statedata", function(stateData) {
+            console.log(stateData); 
+            d3.json("/mapdata", function(jobsData){
+                leafletData.getMap().then(function(map) {
+                    // var popup = L.popup();
+
+                    function onMapClick(e) {
+                        popup.setLatLng(e.latlng)
+                            .setContent("You clicked the map at " + e.latlng.toString())
+                            .openOn(map);
+                    }
+
+                    // map.on('click', onMapClick);
+                    d3Map(map);
+                });
+
+
+                /*********************************************************
+                                    MAP EVENT HANDLERS
+                *********************************************************/
+                // This uses the custom event handlers that we registered at the top
+                //of the document to clear out the old svg and redraw it when the map
+                //is zoomed in or out.
+
+                $scope.$on('leafletDirectiveMap.zoomstart', function(event){
+                    d3.selectAll('svg').remove();
+                    $scope.$on('leafletDirectiveMap.zoomend', function(event){
+                        leafletData.getMap().then(function(map){
+                            map.getPanes().overlayPane.innerHTML = "";
+                            d3.select(".tooltip").innerHTML = "";
+                            d3Map(map);
+                        });
+                    });
+                });
+
+
+            /*********************************************************
+                                    D3 STUFFS
+            *********************************************************/
+                // MAP DRAWING FUNCTION
+                function d3Map(map){
+
+                 //-------------------D3 INITIALIZATION--------------------//
+
+                    // Main SVG which sits in the leaflet overlay pane
+                    var svg = d3.select(map.getPanes().overlayPane).append("svg");
+
+                     // This is the group which will contain all of our svg elements for our map overlay
+                    var g = svg.append("g").attr("class", "leaflet-zoom-hide");
+                    var transform = d3.geo.transform({point: projectPoint});
+                    var path = d3.geo.path().projection(transform);
+
+                     // This is the functionality that allows our dots to be correctly projected onto the map
+                     //The function in our point radius method will use what we pass in below in our radius key in our
+                     //datum method to our projection to draw the dots.
+                    var g2 = svg.append("g").attr("class", "leaflet-zoom-hide");
+                    var feature2 = g2.selectAll("path.point");
+                    var transform2 = d3.geo.transform({point: projectPoint});
+                    var path2 = d3.geo.path().projection(transform2).pointRadius(function(d){ 
+                        var zoom = map.getZoom();
+                        if(zoom < 5){
+                           return Math.min(((d.radius + zoom) *  0.08), 10);
+                        }else if( zoom >= 5 && zoom < 7){
+                            return Math.min(((d.radius + zoom) *  0.09), 36);
+                        } else if(zoom >= 7 && zoom < 10){
+                            return Math.max(((d.radius + zoom) *  0.038), 5);
+                        } else{
+                            return Math.max(((d.radius + zoom) *  0.028), 5);
+                        }
+                    });
+
+                    // This sets up our color and range to map the various color to different points based
+                    //on job availability per point
+                    var colors = ["#6363FF", "#6373FF", "#63A3FF", "#63E3FF", "#63FFFB", "#63FFCB",
+                                   "#63FF9B", "#63FF6B", "#7BFF63", "#BBFF63", "#DBFF63", "#FBFF63", 
+                                   "#FFD363", "#FFB363", "#FF8363", "#FF7363", "#FF6364"];
+
+                    var heatmapColor = d3.scale.linear()
+                      .domain(d3.range(0, 1, 1.0 / (colors.length-1)))
+                      .range(colors);
+
+                    var range = [];
+                    for(var i=0; i<jobsData.features.length; i++){
+                        console.log(jobsData.features[i].properties.numJobs);
+                        range.push(jobsData.features[i].properties.numJobs);
+                    }
+                    var c = d3.scale.linear().domain(d3.extent(range)).range([0,9]);
+
+
+                    function projectPoint(x, y) {
+                        var point = map.latLngToLayerPoint(new L.LatLng(y, x));
+                        this.stream.point(point.x, point.y);
+                    }
+
+                    // Helper function to create the tooltip **taken directly form Mike Bostock
+                    d3.helper = {};
+                    d3.helper.tooltip = function(accessor){
+                        return function(selection){
+                            var tooltipDiv;
+                            var bodyNode = d3.select('body').node();
+                            selection.on("mouseover", function(d, i){
+                                // Clean up lost tooltips
+                                d3.select('body').selectAll('div.tooltip').remove();
+                                // Append tooltip
+                                tooltipDiv = d3.select('body').append('div').attr('class', 'tooltip');
+                                var absoluteMousePos = d3.mouse(bodyNode);
+                                tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px')
+                                    .style('top', (absoluteMousePos[1] - 15)+'px')
+                                    .style('position', 'absolute') 
+                                    .style('z-index', 1001);
+                                // Add text using the accessor function
+                                var tooltipText = accessor(d, i) || '';
+                                // Crop text arbitrarily
+                                //tooltipDiv.style('width', function(d, i){return (tooltipText.length > 80) ? '300px' : null;})
+                                //    .html(tooltipText);
+                            })
+                            .on('mousemove', function(d, i) {
+                                // Move tooltip
+                                var absoluteMousePos = d3.mouse(bodyNode);
+                                tooltipDiv.style('left', (absoluteMousePos[0] + 10)+'px')
+                                    .style('top', (absoluteMousePos[1] - 15)+'px');
+                                var tooltipText = accessor(d, i) || '';
+                                tooltipDiv.html(tooltipText);
+                            })
+                            .on("mouseout", function(d, i){
+                                // Remove tooltip
+                                tooltipDiv.remove();
+                            });
+
+                        };
+                    };    
+
+                 //^^^^^^^^^^^^^^^^^^^^^^^END INITIALIZATION^^^^^^^^^^^^^^^^^^^^^^^^^//
+
+
+                 //----------------APPEND NEW SVG ELEMENTS TO DOM-------------------//   
+                     // This runs through our geo-JSON file containing the data for the state overlays
+                    var stateColors = d3.scale.linear()
+                        .domain(d3.range(0, 1, 1.0 / (colorbrewer.Accent['7'].length-1)))
+                        .range(colorbrewer.Accent['7']);
+
+                   var newRange = [100, 1200];
+
+                   var colorRange = d3.scale.linear().domain(d3.extent(newRange)).range([0,1]);
+                   colorRange.clamp(true);
+                    var zoom = map.getZoom();
+
+                    var feature = g.selectAll("path")
+                        .data(stateData.features)
+                        .enter()
+                        .append("path")
+                        .attr("class", "state")
+                        .attr("fill-opacity", function(d){
+                            if( zoom < 5){
+                                return 0.8;
+                            }else if( zoom <= 6){
+                                return 0.6;
+                            } else if(zoom >=6 && zoom < 7){
+                                return 0.3;
+                            } else if (zoom >= 7 && zoom < 8){
+                                return 0.2;
+                            } else if (zoom >= 8 && zoom < 9){
+                                return 0.1;
+                            } else {
+                                return 0;
+                            }
+                        })
+                        // .style("fill", function(d) {
+                        //     if(d.properties.numJobs < 2900){
+                        //         return stateColors(colorRange(d.properties.numJobs));
+                        //     } else if(!d.properties.numJobs){
+                        //         return "lightblue";
+                        //     } else{
+                        //         return "red";
+                        //     }
+                        // })
+                        .attr("fill", "#000")
+                        .attr("stroke", function(d){
+                            if(zoom >= 9){
+                                return "#666";
+                            } else {
+                                return "#fff";
+                            }
+                        })
+                        .attr("stroke-width", function(d){
+                            if(zoom >= 9){
+                                return "2";
+                            }
+                        });
+
+                        // Where our job data is actually put into SVG form and appended to the DOM
+                        feature2.data(jobsData.features)
+                            .enter()
+                            .append("path")
+                            .call(d3.helper.tooltip(function(d, i){
+                                      return "<b>"+d.name + "</b><br/>Jobs: "+d.radius;
+                            }))
+                            .style("fill", function(d) {
+                                return heatmapColor(c(d.properties.numJobs));
+                            })
+                            .datum(function(d){
+                                return {type: "Point", coordinates: [d.geometry.coordinates[1], d.geometry.coordinates[0]], radius: d.properties.numJobs, name:d.properties.name};
+                            })
+                            .attr("class", "point")
+                            .attr("d", path2);
+
+             //^^^^^^^^^^^^^^^^^^^^^^^END DATA/APPEND^^^^^^^^^^^^^^^^^^^^^^^//
+
+
+
+             //-------------------CLEAN UP-------------------//
+                     //Reposition our SVG's on zoom in/out
+                    map.on("viewreset", reset);
+                    reset();
+
+                    function reset() {
+                        var bounds = path.bounds(stateData),
+                            topLeft = bounds[0],
+                            bottomRight = bounds[1];
+
+                        svg.attr("width", bottomRight[0] - topLeft[0])
+                            .attr("height", bottomRight[1] - topLeft[1])
+                            .style("left", topLeft[0] + "px")
+                            .style("top", topLeft[1] + "px");
+
+                        g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
+                        g2.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
+                        feature.attr("d", path);
+                        feature2.attr("d", path2);
+
+                    } //End reset
+                } //End D3Map
+            }); // End D3.json for mapdata
+        }); // End D3.json for statedata
+    } // End main controller function
+]); // End controller wrapper
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+