#29 width.

recombinators · Feb 27, 2015 · 882fb10 · 882fb10
2 parents 300aa31 + c50191f
commit 882fb10
Show file tree

Hide file tree

Showing 7 changed files with 239 additions and 82 deletions.
diff --git a/seattle/seattle/models.py b/seattle/seattle/models.py
@@ -26,11 +26,14 @@ class Neighborhoods_Model(Base):
     @classmethod
     def neighborhood(cls, lat, lon):
         """Output neighborhood that contains lat lon."""
-        return (DBSession.query(cls)
-                .filter(func.ST_Within(func.ST_SetSRID(func
-                        .ST_MakePoint(lon, lat), 4236), func
-                    .ST_SetSRID(cls.geom, 4236))).one().name
-                )
+        try:
+            return (DBSession.query(cls)
+                    .filter(func.ST_Within(func.ST_SetSRID(func
+                            .ST_MakePoint(lon, lat), 4236), func
+                        .ST_SetSRID(cls.geom, 4236))).one().name
+                    )
+        except:
+            return u'----'
 
 
 class Incidents_Model(Base):

diff --git a/seattle/seattle/static/css/index.css b/seattle/seattle/static/css/index.css
@@ -1260,9 +1260,14 @@ tr {
     shape-rendering: crispEdges;
 }
 
-.x.axis path {
+.y.axis path,
+.y.axis line {
     display: none;
 }
+.x.axis path,
+.x.axis line {
+    /* display: none; */
+}
 
 .line {
     fill: none;
@@ -1276,11 +1281,6 @@ tr {
     stroke: 0px;
 }
 
-.map-container {
-    position: fixed;
-    height: 100%;
-    width: 38%;
-}
 
 #map {
     position: absolute;
@@ -1296,18 +1296,11 @@ tr {
     z-index: 100;
 }
 
-.content {
-    position: relative;
-    margin-left: 38%;
-    padding-left: 2rem;
-}
-
 .title { 
     font-family: 'ff-prater-script-web';
     font-size: 3em;
     position: relative;
     bottom: 10px;
-    color: red;
     padding-left: 10px;
 }
 
@@ -1326,6 +1319,10 @@ h2 {
   border-radius: 2px;
 }
 
+.b-y { border-bottom: 4px solid #e09200;}
+.b-o { border-bottom: 4px solid #ffbe1a;}
+.b-r { border-bottom: 4px solid #fde668;}
+
 /* Creates a small triangle extender for the tooltip */
 .d3-tip:after {
   box-sizing: border-box;
@@ -1350,21 +1347,64 @@ h2 {
     color: #ff0000;
 }
 
-.neg {
-    color: green;
+svg {
+    max-width: 100%;
+}
+
+footer ul { padding-left: 0;}
+footer li { 
+    display: inline;
+    word-spacing: 5px;
+}
+
+.button {
+    font-weight: bold;
+    border: 2px solid #eee;
+    padding: 3px 10px;
+    background: #f6f6f6;
 }
 
-.fc {
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-            flex-direction: row;
-    -webkit-flex-wrap: nowrap;
-        -ms-flex-wrap: nowrap;
-            flex-wrap: nowrap;
-    -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
+.italic {
+    color: #aaa;
+}
+
+
+/* RWD (kek) */
+/* Mobile styles */
+.no-mobile { display: none; }
+header { margin-top: 2rem; }
+header a:hover { color: #ff0000; }
+.title h1 { font-size: 2rem; }
+.title img { height: 80px;}
+.map-container {
+    position: absolute;
+    height: 50vh;
+    width: 100%;
+}
+.content {
+    position: relative;
+    margin-top: 50vh;
+    padding: 2rem;
+}
+
+@media (min-width:45em) {
+    .no-desktop { display: none; }
+    .no-mobile { display: block; }
+    .title h1 {
+        font-size: 1rem;
+    }
+    .map-container {
+        position: fixed;
+        height: 100%;
+        width: 38%;
+    }
+    .content {
+        margin-top: 0;
+        position: relative;
+        margin-left: 38%;
+        padding-left: 2rem;
+        width: 61%;
+    }
+
 }
+
diff --git a/seattle/seattle/static/css/index.min.css b/seattle/seattle/static/css/index.min.css
diff --git a/seattle/seattle/static/css/src/d3.css b/seattle/seattle/static/css/src/d3.css
@@ -5,9 +5,14 @@
     shape-rendering: crispEdges;
 }
 
-.x.axis path {
+.y.axis path,
+.y.axis line {
     display: none;
 }
+.x.axis path,
+.x.axis line {
+    /* display: none; */
+}
 
 .line {
     fill: none;

diff --git a/seattle/seattle/static/css/src/index.css b/seattle/seattle/static/css/src/index.css
@@ -18,11 +18,6 @@
     --copy-font-color: #444;
 }
 
-.map-container {
-    position: fixed;
-    height: 100%;
-    width: 38%;
-}
 
 #map {
     position: absolute;
@@ -38,18 +33,11 @@
     z-index: 100;
 }
 
-.content {
-    position: relative;
-    margin-left: 38%;
-    padding-left: 2rem;
-}
-
 .title { 
     font-family: 'ff-prater-script-web';
     font-size: 3em;
     position: relative;
     bottom: 10px;
-    color: red;
     padding-left: 10px;
 }
 
@@ -68,6 +56,10 @@ h2 {
   border-radius: 2px;
 }
 
+.b-y { border-bottom: 4px solid #e09200;}
+.b-o { border-bottom: 4px solid #ffbe1a;}
+.b-r { border-bottom: 4px solid #fde668;}
+
 /* Creates a small triangle extender for the tooltip */
 .d3-tip:after {
   box-sizing: border-box;
@@ -92,13 +84,64 @@ h2 {
     color: #ff0000;
 }
 
-.neg {
-    color: green;
+svg {
+    max-width: 100%;
 }
 
-.fc {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
+footer ul { padding-left: 0;}
+footer li { 
+    display: inline;
+    word-spacing: 5px;
 }
+
+.button {
+    font-weight: bold;
+    border: 2px solid #eee;
+    padding: 3px 10px;
+    background: #f6f6f6;
+}
+
+.italic {
+    color: #aaa;
+}
+
+
+/* RWD (kek) */
+/* Mobile styles */
+.no-mobile { display: none; }
+header { margin-top: 2rem; }
+header a:hover { color: #ff0000; }
+.title h1 { font-size: 2rem; }
+.title img { height: 80px;}
+.map-container {
+    position: absolute;
+    height: 50vh;
+    width: 100%;
+}
+.content {
+    position: relative;
+    margin-top: 50vh;
+    padding: 2rem;
+}
+
+@media (min-width:45em) {
+    .no-desktop { display: none; }
+    .no-mobile { display: block; }
+    .title h1 {
+        font-size: 1rem;
+    }
+    .map-container {
+        position: fixed;
+        height: 100%;
+        width: 38%;
+    }
+    .content {
+        margin-top: 0;
+        position: relative;
+        margin-left: 38%;
+        padding-left: 2rem;
+        width: 61%;
+    }
+
+}
+
diff --git a/seattle/seattle/static/js/map.js b/seattle/seattle/static/js/map.js
@@ -14,14 +14,16 @@ var map = L.mapbox.map('map', 'jacques.la14ofjk', {
     minZoom: 12
 });
 
-
+map.addControl(L.mapbox.geocoderControl('mapbox.places', {
+    keepOpen: true
+}));
 // Disable scrollwheel zoom
 map.scrollWheelZoom.disable();
 
 function graph() {
-    var w = 960,
+    var w = 720,
         h = 500,
-        p = [50, 40, 40, 20],
+        p = [30, 20, 40, 0],
         x = d3.scale.ordinal().rangeRoundBands([0, w - p[1] - p[3]]),
         y = d3.scale.linear().range([0, h - p[0] - p[2]]),
         z = d3.scale.ordinal().range(["#FDE668", "#FFBE1A", "#E09200"])
@@ -41,6 +43,13 @@ function graph() {
         .append("svg:g")
         .attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")");
 
+    var today = new Date();
+    var past = new Date(today.getDate() - 365);
+    // var past-year = (today.getDate() - 365);    //<<===== no need
+    // var mm = today.getMonth()+1; //January is 0!   //<<===== no need
+    // var yyyy = today.getFullYear();  //<<===== no need
+
+
     svg.call(tip);
 
     // Transpose the data into layers by type.
@@ -55,11 +64,21 @@ function graph() {
     y.domain([0, d3.max(incidents[incidents.length - 1], function(d) { return d.y0 + d.y; })]);
     yx.domain([d3.max(incidents[incidents.length - 1], function(d) { return d.y0 + d.y; }), 0]);
 
+    // svg.append("line")
+    //     .scale(x)
+    //     .attr("x1", x(past))  //<<== change your code here
+    //     .attr("y1", 0)
+    //     .attr("x2", x(past))  //<<== and here
+    //     .attr("y2", h - p[0] - p[2])
+    //     .style("stroke-width", 2)
+    //     .style("stroke", "red")
+    //     .style("fill", "none");
+
     // Define the axes
     var xAxis = d3.svg.axis()
         .scale(x)
         .orient("bottom")
-        .ticks(5);
+        .ticks(20);
 
     // svg.append("g")
     //     .attr("class", "x axis")
@@ -70,20 +89,20 @@ function graph() {
     //     .attr("x", 9)
     //     .attr("dy", ".35em")
     //     .attr("transform", "rotate(90)")
-    //     .style("text-anchor", "start")
-    //     .text(format);
+    //     .style("text-anchor", "start");
 
     var yAxis = d3.svg.axis()
         .scale(yx)
         .orient("left")
         .ticks(5);
 
-    // svg.append("g")
-    //     .attr("class", "y axis")
-    //     .attr("transform", "translate(" + (p[1] + p[3] - 12) + "," + -(h - p[2] - p[0]) + ")")
-    //     .call(yAxis)
-    //     .selectAll("text")
-    //     .style("text-anchor", "start");
+    svg.append("g")
+        .attr("class", "y axis")
+        .attr("transform", "translate(" + (p[1] + p[3] - 12) + "," + -(h - p[2] - p[0]) + ")")
+        .call(yAxis)
+        .selectAll("text")
+        .style("text-anchor", "start")
+        .attr("font-style", "italic");
 
     // Add a group for each cause.
     var incident = svg.selectAll("g.incident")
@@ -107,7 +126,7 @@ function graph() {
 
 function groupedbar() {
     var margin = {top: 20, right: 20, bottom: 30, left: 40},
-        width = 960 - margin.left - margin.right,
+        width = 720 - margin.left - margin.right,
         height = 500 - margin.top - margin.bottom;
 
     var x0 = d3.scale.ordinal()
@@ -119,7 +138,7 @@ function groupedbar() {
         .range([height, 0]);
 
     var color = d3.scale.ordinal()
-        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
+        .range(["#EEE", "FF0000"]);
 
     var xAxis = d3.svg.axis()
         .scale(x0)
@@ -216,6 +235,7 @@ map.on('moveend', function(e) {
             $(".graph").contents().remove();
             $(".groupedbar").contents().remove();
             graph();
+            groupedbar();
         }