cleans up Story CSS (closes #816)

api/storyRoute.js

@@ -62,7 +62,7 @@ module.exports = function(app) {
         if (!topic.visualizations) topic.visualizations = [];
         if (!(topic.visualizations instanceof Array)) topic.visualizations = [topic.visualizations];
         topic.visualizations = topic.visualizations.map(obj => ({logic: bubleSwap(obj)}));
-        if (!topic.type) topic.type = "TextViz";
+        if (!topic.type) topic.type = "Column";
       });
       res.json(contents).end();
     }

app/pages/Story/Story.css

@@ -81,19 +81,30 @@
   & .topic {
     background-color: #E9E9E9;
     color: rgba(51, 51, 51, .93);
-    padding: 60px 50px 25px;
+    flex-direction: column;
+    padding: 50px 25px 0;
     width: 100%;
     & .topic-description {
       margin-bottom: 15px;
+      & img {
+        width: 100%;
+      }
     }
     & .topic-content {
       margin: 0 auto;
       max-width: 700px;
+      width: 100%;
     }
     & .visualization {
       margin: 0 auto;
       max-width: 700px;
       min-height: 400px;
+      width: 100%;
+    }
+    & .SourceGroup {
+      margin: 0 auto;
+      max-width: 700px;
+      width: 100%;
     }
   }
 }

app/stories/04-21-2016_super-commuters.yml

@@ -24,6 +24,7 @@ topics:
           colorScale: "Average Commute Time",
           colorScaleConfig: {
             axisConfig: {
+              tickFormat: d => `${abbreviate(d)} minutes`,
               title: "Average Commute Time"
             }
           },
@@ -40,12 +41,12 @@ topics:
           topojson: `/topojson/State.json`,
           time: "Year",
           type: "Geomap"
-        }    
+        }
   - descriptions:
       - "These commute times are not just because of too many road hogs. Maryland commuters, for example, are nearly twice as likely to use public transport as the US average, at 9.1 percent vs. 5.2 percent. They are also no likelier than the average American to drive alone. In New York, the numbers are even starker: 27.9 percent use public transit, more than quintuple the national average, while just over half (52.8 percent) commute alone in their cars, compared to three-quarters (76.4 percent) of Americans."
   - title: "New York Commuter Detail"
     class: constrained
-    visualizations: 
+    visualizations:
       - >-
         const {nest, sum} = libs.d3;
         const {abbreviate, bucket} = formatters;

app/stories/06-12-2017_hardest-working.yml

@@ -15,6 +15,11 @@ topics:
         return {
           data: "/api/data?measures=Average%20Usual%20Hours%20Worked%20Per%20Week,Average%20Usual%20Hours%20Worked%20Per%20Week%20Appx%20MOE&drilldowns=PUMA&Year=2014&Workforce Status=true",
           colorScale: "Average Usual Hours Worked Per Week",
+          colorScaleConfig: {
+            axisConfig: {
+              tickFormat: d => abbreviate(d)
+            }
+          },
           groupBy: "ID PUMA",
           label: d => d["PUMA"],
           tooltipConfig: {
@@ -41,7 +46,7 @@ topics:
       - "Let’s take a closer look at the types of people we might find in each of these places. On the surface, the three geographies could not be more different, but if we dig a little deeper, we may find some similarities."
   - title: "Median Household Income"
     descriptions: "A good place to start is with median household income, and as we’ll see, longer hours do not necessarily mean higher wages. The New York neighborhoods lead the way with $118,108, more than double the $53,482 US average. Subsistence Alaska, at $56,736, is more or less in line with the national average. The Missourian suburbs come a distant third, with a median household income of $42,812. This seems to make sense: Wages appear to align much more closely to cost of living rather than hours worked, and, as anyone who has visited can attest, Manhattan is quite expensive."
-    visualizations: 
+    visualizations:
       - >-
         const {abbreviate, salary} = formatters;
 
@@ -80,7 +85,7 @@ topics:
       - "More revealing, perhaps, is the relative specialization of each location. Compared to the Missouri counties, both the New York neighborhoods and Subsistence Alaska are home to some deeply specialized professionals—ones that tend to be polar opposites in their nature as well."
   - class: "flex flex-short"
     title: "Specialization in Battery Park City, Greenwich Village, and SoHo, New York City"
-    visualizations: 
+    visualizations:
       - >-
         const {abbreviate, commas, salary} = formatters;
         const colorMost = "#1A3E61";
@@ -122,7 +127,7 @@ topics:
         }
   - class: "flex flex-short"
     title: "Specialization in Subsistence Alaska"
-    visualizations: 
+    visualizations:
       - >-
         const {abbreviate, commas, salary} = formatters;
         const colorMost = "#1A3E61";
@@ -164,7 +169,7 @@ topics:
         }
   - class: "flex flex-short"
     title: "Specialization in the Missouri counties"
-    visualizations: 
+    visualizations:
       - >-
         const {abbreviate, commas, salary} = formatters;
         const colorMost = "#1A3E61";
@@ -209,7 +214,7 @@ topics:
       - "Not that specialization necessarily leads to higher salaries, of course. Some professions—physicians, lawyers, and IT scientists—do well across all three geographies."
       - "This difference in incomes is reflected in the vast differences in property values we see across the three locations. The median property value we see in Pulaski, Camden, Miller, and Morgan counties is $136,600, significantly lower than the US average of $175,700. Subsistence Alaska is almost exactly the same as the average, at $177,500. In the Manhattan neighborhoods, by contrast, median property values are well above $1 million—literally off the scale."
     title: "Property values in Battery Park, Greenwich Village, and SoHo versus the US average (in gray)"
-    visualizations: 
+    visualizations:
       - >-
         const colorGrey = "#C6C7CA";
         const colorHighlight = "#ef6145";
@@ -229,7 +234,7 @@ topics:
                 const total = sum(group.values, d => d[measure]);
                 group.values.forEach(d => d.share = d[measure] / total);
               });
-  
+
             return data;
           },
           groupBy: "Geography",

app/stories/06-12-2017_medicare-physicians.yml

@@ -9,7 +9,8 @@ authors:
 topics:
   - descriptions:
     - "Florida is home to the nation’s second-largest population of Medicare beneficiaries, behind California, which is understandable: What better way to spend your retirement years than enjoying sun and balmy ocean breezes?"
-  - visualizations:
+    type: "Column"
+    visualizations:
       - >-
         const {commas} = formatters;
 

app/stories/06-12-2017_opioid-addiction.yml

@@ -18,6 +18,9 @@ topics:
       return {
         data: "/api/data?drilldowns=County&measure=Drug%20Overdose%20Deaths,Drug Overdose Deaths Data Source Years",
         colorScaleConfig: {
+          axisConfig: {
+            tickFormat: d => abbreviate(d)
+          },
           color: ["#edd1d1", "#e4b4b4", "#dc9595", "#d57676", "#cf5555", "#CA3434", "#7b0000"]
         },
         colorScale: "Drug Overdose Deaths",
@@ -35,7 +38,7 @@ topics:
         projection: "geoAlbersUsa",
         topojson: `/topojson/County.json`,
         type: "Geomap"
-      }    
+      }
   - descriptions:
       - "Darker shades of red represent higher rates of overdose deaths. There is a large, dark cluster of counties located in central and eastern Kentucky, and Breathitt County falls on the left edge of that cluster. Although Breathitt County’s rate of overdose deaths has fallen to 34.6 per 100,000 (a number higher than the majority of the nation) its surrounding counties still lag far behind.  Nine of the top 10 counties for drug overdose deaths are located nearby in Kentucky and West Virginia—the heart of Appalachia.<<foot note=1>>"
       - "As rhetoric during the recent presidential campaign highlighted, opioid overdoses have become a national epidemic. Overall, drug overdoses killed 52,000 Americans in 2015, one death every 10 minutes,<<foot note=2>> more than HIV/AIDS at its 1995 peak.<<foot note=3>> Opioids were involved in 33,091 of those 2015 deaths, a rate that has quadrupled since 1999.<<foot note=4>>"

app/stories/06-16-2016_millennials.yml

@@ -15,12 +15,12 @@ topics:
       - "With a median age of 29, military workers represent the youngest broad occupational group. This is most likely because of the military’s <a target='_blank' href='http://www.military.com/military-fitness/marine-corps-fitness-requirements/usmc-physical-fitness-test'>high physical standards</a>, formal standards of <a target='_blank' href='http://www.military.com/join-armed-forces/join-the-military-basic-eligibility.html'>hiring young people</a>, and early retirement (often after just <a target='_blank' href='http://www.militarytimes.com/story/military/benefits/retirement/2015/11/23/reiterment-changes-choices/76049640/'>20 years</a> of service). Unsurprisingly, the military is overwhelmingly made up of men."
   - title: Age by Gender for Military Occupations
     class: constrained
-  - visualizations: 
+  - visualizations:
     - >-
       const id = "550000";
       const colorGender = {"Male":"#1A3E61","Men":"#1A3E61","Female":"#CA3434","Women":"#CA3434"};
       const iconGender = {"Male":"/icons/visualizations/gender_mars.png","Men":"/icons/visualizations/gender_mars.png","Female":"/icons/visualizations/gender_venus.png","Women":"/icons/visualizations/gender_venus.png"};
-      const {nest, sum} = libs.d3;
+      const {nest, range, sum} = libs.d3;
       const {abbreviate, bucket, commas} = formatters;
       const measure = "Total Population";
       const measureEmbedded = measure.replace(/\s/g, "%20", /\,/g, "%2C");
@@ -41,7 +41,6 @@ topics:
         groupBy: "Gender",
         groupPadding: 10,
         legendConfig: {
-          label: "",
           shapeConfig: {
             backgroundImage: d => iconGender[d.Gender]
           }
@@ -66,9 +65,15 @@ topics:
         type: "LinePlot",
         x: "Age",
         xConfig: {
-          title: "AGE",
-          labelRotation: false,
-          tickFormat: d => d % 5 === 0 ? d : ""
+          domain: range(16, 96, 1),
+          gridConfig: {
+            "stroke": "#ddd",
+            "stroke-width": 1
+          },
+          ticks: range(16, 96, 1),
+          tickSize: 5,
+          labels: [16, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95],
+          title: "Age"
         },
         xSort: (a, b) => a["ID Age"] - b["ID Age"],
         y: "Total Population",
@@ -81,12 +86,12 @@ topics:
       - "Food service workers make up the second youngest occupation. With an average salary of $16,202, these jobs are commonly taken by Millennials as they attempt to enter the economy. There is only a slightly larger percentage of women in this profession, making it a relatively gender neutral occupation category."
   - title: Age by Gender for Food Preparation & Serving Occupations
     class: constrained
-  - visualizations: 
+  - visualizations:
     - >-
       const id = "350000";
       const colorGender = {"Male":"#1A3E61","Men":"#1A3E61","Female":"#CA3434","Women":"#CA3434"};
       const iconGender = {"Male":"/icons/visualizations/gender_mars.png","Men":"/icons/visualizations/gender_mars.png","Female":"/icons/visualizations/gender_venus.png","Women":"/icons/visualizations/gender_venus.png"};
-      const {nest, sum} = libs.d3;
+      const {nest, range, sum} = libs.d3;
       const {abbreviate, bucket, commas} = formatters;
       const measure = "Total Population";
       const measureEmbedded = measure.replace(/\s/g, "%20", /\,/g, "%2C");
@@ -107,7 +112,6 @@ topics:
         groupBy: "Gender",
         groupPadding: 10,
         legendConfig: {
-          label: "",
           shapeConfig: {
             backgroundImage: d => iconGender[d.Gender]
           }
@@ -132,9 +136,15 @@ topics:
         type: "LinePlot",
         x: "Age",
         xConfig: {
-          title: "AGE",
-          labelRotation: false,
-          tickFormat: d => d % 5 === 0 ? d : ""
+          domain: range(16, 96, 1),
+          gridConfig: {
+            "stroke": "#ddd",
+            "stroke-width": 1
+          },
+          ticks: range(16, 96, 1),
+          tickSize: 5,
+          labels: [16, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95],
+          title: "Age"
         },
         xSort: (a, b) => a["ID Age"] - b["ID Age"],
         y: "Total Population",
@@ -148,12 +158,12 @@ topics:
       - "In management, this could be due to millennials lacking the experience required by some employers for these positions. In fact, a 25 year old male is over 60 percent more likely to be in food preparation than in a management occupation. Twenty five year old CEO’s may make headlines but the reality is that twenty five year olds are much more likely to be cooking food than cooking up major business decisions."
   - title: Age by Gender for Management Occupations
     class: constrained
-  - visualizations: 
+  - visualizations:
     - >-
       const id = "110000";
       const colorGender = {"Male":"#1A3E61","Men":"#1A3E61","Female":"#CA3434","Women":"#CA3434"};
       const iconGender = {"Male":"/icons/visualizations/gender_mars.png","Men":"/icons/visualizations/gender_mars.png","Female":"/icons/visualizations/gender_venus.png","Women":"/icons/visualizations/gender_venus.png"};
-      const {nest, sum} = libs.d3;
+      const {nest, range, sum} = libs.d3;
       const {abbreviate, bucket, commas} = formatters;
       const measure = "Total Population";
       const measureEmbedded = measure.replace(/\s/g, "%20", /\,/g, "%2C");
@@ -175,7 +185,6 @@ topics:
         groupBy: "Gender",
         groupPadding: 10,
         legendConfig: {
-          label: "",
           shapeConfig: {
             backgroundImage: d => iconGender[d.Gender]
           }
@@ -200,8 +209,15 @@ topics:
         type: "LinePlot",
         x: "Age",
         xConfig: {
-          title: "AGE",
-          tickFormat: d => d % 5 === 0 ? d : ""
+          domain: range(16, 96, 1),
+          gridConfig: {
+            "stroke": "#ddd",
+            "stroke-width": 1
+          },
+          ticks: range(16, 96, 1),
+          tickSize: 5,
+          labels: [16, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95],
+          title: "Age"
         },
         xSort: (a, b) => a["ID Age"] - b["ID Age"],
         y: "Total Population",
@@ -214,12 +230,12 @@ topics:
       - "Transportation workers are the occupation with the second oldest median age. Transportation workers are also majority male. This may reflect a <a target='_blank' href='http://www.bls.gov/news.release/union2.nr0.htm'>high level of unionization</a> (which would tend to protect older, more traditional workers) in fields such as truck driving and railroads. In the future, it could potentially reflect technology as well. With the <a target='_blank' href='http://www.technobuffalo.com/2016/03/07/driverless-trucks-to-hit-u-k-roads-later-this-year/'>potential spread of driverless trucks</a>, this may be an occupation that few Millennials will take on, even as the existing (older) transportation workers begin to retire."
   - title: Age by Gender for Transportation Occupations
     class: constrained
-  - visualizations: 
+  - visualizations:
     - >-
       const id = "531000-536000";
       const colorGender = {"Male":"#1A3E61","Men":"#1A3E61","Female":"#CA3434","Women":"#CA3434"};
       const iconGender = {"Male":"/icons/visualizations/gender_mars.png","Men":"/icons/visualizations/gender_mars.png","Female":"/icons/visualizations/gender_venus.png","Women":"/icons/visualizations/gender_venus.png"};
-      const {nest, sum} = libs.d3;
+      const {nest, range, sum} = libs.d3;
       const {abbreviate, bucket, commas} = formatters;
       const measure = "Total Population";
       const measureEmbedded = measure.replace(/\s/g, "%20", /\,/g, "%2C");
@@ -240,7 +256,6 @@ topics:
         groupBy: "Gender",
         groupPadding: 10,
         legendConfig: {
-          label: "",
           shapeConfig: {
             backgroundImage: d => iconGender[d.Gender]
           }
@@ -266,8 +281,15 @@ topics:
         type: "LinePlot",
         x: "Age",
         xConfig: {
-          labelRotation: false,
-          tickFormat: d => d % 5 === 0 ? d : ""
+          domain: range(16, 96, 1),
+          gridConfig: {
+            "stroke": "#ddd",
+            "stroke-width": 1
+          },
+          ticks: range(16, 96, 1),
+          tickSize: 5,
+          labels: [16, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95],
+          title: "Age"
         },
         xSort: (a, b) => a["ID Age"] - b["ID Age"],
         y: "Total Population",