Merge pull request #62 from Datawheel/staging

v0.8

app/components/Footer.css

@@ -75,11 +75,17 @@
     }
   }
 
-  /* scale down logos a bit on small screens */
+  /* keep logo sizes in check */
   & .footer-logo-img {
     max-width: 8rem; /* fallback */
     max-width: calc(7rem + 1.5vw);
     max-height: 3rem; /* fallback */
     max-height: calc(1.75rem + 1.5vw);
+
+    /* shrink logos on small screens */
+    @mixin max-xs {
+      max-width: calc(5rem + 1.5vw);
+      max-height: calc(1.25rem + 1.5vw);
+    }
   }
 }

app/components/MainNav.css

@@ -29,6 +29,10 @@
   right: 8px;
   margin-left: calc(0 - var(--gutter-xs)); /* offset padding */
 
+  /* shrink logo on small screens */
+  @mixin max-sm { width: 8rem; }
+  @mixin max-xs { width: 7rem; }
+
   /* BETA */
   &:after {
     @mixin min-xs {
@@ -42,6 +46,7 @@
       /* positioning */
       position: absolute;
       top: 35px;
+      margin-top: -7px;
       right: -20px;
     }
     /* fudge into place on bigger screens */

app/components/ProfileTile.css

@@ -14,6 +14,11 @@
   border-radius: var(--radius-sm);
   box-shadow: 0 0.1rem 1rem color(var(--black) a(0.5));
 
+  /* increase click target on small screen stacked layout */
+  @mixin max-sm {
+    padding-top: 25% !important;
+  }
+
   /* overlay */
   &:after {
     /* sizing & positioning */

app/components/Subnav.css

@@ -7,7 +7,8 @@
   height: var(--nav-height);
   z-index: 2; /* in front of section titles */
 }
-.subnav-list {
+.subnav-list,
+.subnav-select-label {
   /* layout */
   @add-mixin centered-container;
   padding-top: 0;
@@ -61,3 +62,25 @@
     display: inline-block;
   }
 }
+
+/* select menu (small screens only) */
+.subnav-select-label {
+  line-height: 1.4rem;
+  top: 0.7rem;
+}
+
+.subnav-select-text {
+  flex: 1 0 auto;
+  margin-right: 0.75em;
+  top: 0.25em;
+  color: var(--light-3);
+
+  /* hide label on small screens */
+  @mixin max-xxs {
+    @mixin visually-hidden;
+  }
+}
+
+.subnav-select {
+  color: var(--white);
+}

app/components/Subnav.jsx

@@ -1,14 +1,38 @@
 import React, {Component} from "react";
+import PropTypes from "prop-types";
 import {Icon} from "@blueprintjs/core";
 import {AnchorLink} from "@datawheel/canon-core";
 import {PROFILE_SECTIONS} from "utils/consts.js";
 import "./Subnav.css";
 
-export default class Subnav extends Component {
+class Subnav extends Component {
+  constructor() {
+    super();
+    this.state = {
+      currentSection: "Introduction"
+    };
+  }
+
+  selectSection(e) {
+    const {router} = this.context;
+    const hash = e.target.value;
+    router.push({
+      ...router.location,
+      state: "HASH",
+      hash: `#${hash}`
+    });
+    this.setState({currentSection: hash});
+
+    // this.context.router.replace(`/profile/16000US2622000#${e.target.value}`);
+  }
+
   render() {
+    const {currentSection} = this.state;
+
     return (
       <nav className="subnav">
-        <ul className="subnav-list u-list-reset">
+        {/* list of icons (big screens) */}
+        <ul className="subnav-list u-list-reset u-hide-below-md">
           {PROFILE_SECTIONS.map(section =>
             <li className="subnav-item" key={`${section.link}-anchor-link`}>
               <AnchorLink to={section.link} className="subnav-link link title">
@@ -18,7 +42,31 @@ export default class Subnav extends Component {
             </li>
           )}
         </ul>
+        {/* select menu (small screens) */}
+        <label className="subnav-select-label font-md">
+          <span className="subnav-select-text">Scroll to section </span>
+          <select
+            className="subnav-select u-hide-above-md"
+            onChange={e => this.selectSection(e)}
+            value={currentSection}
+          >
+            <option value="introduction">
+              Introduction
+            </option>
+            {PROFILE_SECTIONS.map(section =>
+              <option key={`${section.link}-option-link`} value={section.link}>
+                {section.title}
+              </option>
+            )}
+          </select>
+        </label>
       </nav>
     );
   }
 }
+
+Subnav.contextTypes = {
+  router: PropTypes.object
+};
+
+export default Subnav;

app/css/layout.css

@@ -217,12 +217,17 @@ layout
 
     /* override canon typography */
     & article {
+      margin: 0;
       font-family: inherit;
       color: inherit;
 
       /* style direct child paragraphs only */
-      & > p {
+      /* TODO: replace with <React.Fragment> if updating react to v16 */
+      & > p,
+      & > .article-inner-container > p {
         @add-mixin font-sm;
+        width: 42em;
+        max-width: 100%;
         margin-bottom: 0.75em; /* override blueprint */
 
         &:last-child {

app/css/utilities.css

@@ -9,7 +9,11 @@ typography
   text-align: left;
 }
 .u-text-right {
-  text-align: right;
+  text-align: left;
+
+  @add-mixin min-sm {
+    text-align: right;
+  }
 }
 .u-text-center {
   text-align: center;

app/d3plus.js

@@ -9,6 +9,7 @@ import styles from "style.yml";
 const groupings = [
   "Group",
   "Age Group",
+  "Race",
   "Race Group",
   "RaceType",
   "SmokingType",
@@ -26,6 +27,8 @@ const groupings = [
   "Family type",
   "Period of Service",
   "Type of Crime",
+  "Pollutant",
+  "Travel Time",
   // Health center demographics
   "American Indian/Alaska Native Health Center Patients",
   "Black Health Center Patients",
@@ -35,19 +38,23 @@ const groupings = [
   // smoking status
   "Smoking Status Current",
   "Smoking Status Former",
-  "Smoking Status Never"
+  "Smoking Status Never",
+  // air quality
+  "Category" // air quality days
 ];
 
 /** function to lookup & assign color scheme */
 function colorLogic(d) {
-
-  // console.log(d["Period of Service"]);
+  // console.log(grouping, d[grouping]);
+  // styles[`color-${d[grouping]}`] ? console.log(styles[`color-${d[grouping]}`]) : null;
 
   // lookup grouping color schemes in style.yml
   for (const grouping of groupings) {
     if (d[grouping]) {
-      // console.log(grouping + ":", d[grouping]);
-      // styles[`color-${d[grouping]}`] ? console.log(styles[`color-${d[grouping]}`]) : null;
+      // console.log(grouping, d[grouping]);
+      // console.log(styles[`color-${d[grouping]}`]
+      //   ? styles[`color-${d[grouping]}`]
+      //   : styles["majorelle-dark"]);
       return styles[`color-${d[grouping]}`]
         ? styles[`color-${d[grouping]}`]
         : styles["majorelle-dark"];
@@ -218,6 +225,8 @@ export default {
     fontFamily: () => typeface,
     fontSize: () => fontSizeSm
   },
+  // default visualization height
+  height: 400,
   // axis defaults (see line 8)
   xConfig: axisConfig,
   yConfig: axisConfig

app/helmet.js

@@ -12,7 +12,9 @@ export default {
     {name: "mobile-web-app-capable", content: "yes"},
     {name: "apple-mobile-web-app-capable", content: "yes"},
     {name: "apple-mobile-web-app-status-bar-style", content: "black"},
-    {name: "apple-mobile-web-app-title", content: title}
+    {name: "apple-mobile-web-app-title", content: title},
+    {name: "image", content: "/images/social-image.jpg"},
+    {itemprop: "image", content: "/images/social-image.jpg"}
   ],
   title
 };

app/pages/Profile/sections/about/Introduction.jsx

@@ -29,14 +29,18 @@ const definitions = [
 ];
 
 const formatRaceName = d => {
-  d = d.replace("Alone", "").replace("Black", "black").replace("White", "white").replace("Asian", "asian").trim();
+  d = d.replace("Alone", "")
+    .replace("Black", "black")
+    .replace("White", "white")
+    .replace("Asian", "asian").trim();
   if (d.trim() === "Some Other Race") return d.toLowerCase();
   if (d.trim() === "Two or More Races") return d.toLowerCase();
   return d;
 };
 const formatEthnicityName = d => d.replace("Not Hispanic or Latino", "non-Hispanic").replace("or Latino", "").trim();
 
 const formatRankSuffix = d => {
+  if (d === 1) return "";
   if (d % 10 === 1 && d !== 11) return `${d}st`;
   if (d % 10 === 2 && d !== 12) return `${d}nd`;
   if (d % 10 === 3 && d !== 13) return `${d}rd`;
@@ -138,18 +142,18 @@ class Introduction extends SectionColumns {
         <SectionTitle>Introduction</SectionTitle>
         <article className="top-stats">
           <p>
-            {level === "zip" ? `Zip code ${population[0].Geography}` : population[0].Geography} has a population of {formatAbbreviate(population[0].Population)} people{meta.level === "county" ? "" : <span> which makes it the {formatRankSuffix(currentLocationRankData.populationRank)} largest of {rankData.length} {formatLevelNames(meta.level)} in Wayne County</span>}
-            {}, with the life expectancy of {lifeExpectancyAvailable ? formatAbbreviate(lifeExpectancy[0]["Life Expectancy"]) : "N/A"} {lifeExpectancyAvailable ? onCityOrZipLevel ? <span>(in {lifeExpectancy[0].Geography})</span> : "" : ""}.
-            The most common age group for male is {populationByAgeAndGenderAvailable && population[0].Population !== 0 ? getTopMaleData.Age.toLowerCase() : "N/A"} and for female it is {populationByAgeAndGenderAvailable && population[0].Population !== 0 ? getTopFemaleData.Age.toLowerCase() : "N/A"}.
-            Between {population[population.length - 1].Year} and {population[0].Year} the population of {population[0].Geography} {populationGrowth < 0 ? "reduced" : "increased"} from {formatAbbreviate(population[population.length - 1].Population)} to {formatAbbreviate(population[0].Population)},
+            {level === "zip" ? `Zip code ${population[0].Geography}` : population[0].Geography} has a population of {formatAbbreviate(population[0].Population)} people{meta.level === "county" ? "" : <span> which makes it the {formatRankSuffix(currentLocationRankData.populationRank)} largest of the {rankData.length} {formatLevelNames(meta.level)} in Wayne County</span>}
+            {}, with an average life expectancy of {lifeExpectancyAvailable ? formatAbbreviate(lifeExpectancy[0]["Life Expectancy"]) : "N/A"} {lifeExpectancyAvailable ? onCityOrZipLevel ? <span>(in {lifeExpectancy[0].Geography})</span> : "" : ""}.
+            The most common age group for men is {populationByAgeAndGenderAvailable && population[0].Population !== 0 ? getTopMaleData.Age.toLowerCase() : "N/A"} and for women it is {populationByAgeAndGenderAvailable && population[0].Population !== 0 ? getTopFemaleData.Age.toLowerCase() : "N/A"}.
+            Between {population[population.length - 1].Year} and {population[0].Year} the population of {population[0].Geography} {populationGrowth < 0 ? "decreased" : "increased"} from {formatAbbreviate(population[population.length - 1].Population)} to {formatAbbreviate(population[0].Population)},
             {} {populationGrowth < 0 ? "a decline" : "an increase"} of {populationGrowth < 0 ? `${populationGrowth * -1}%` : isNaN(populationGrowth) ? "N/A" : `${populationGrowth}%`}.
           </p>
           {populationByRaceAndEthnicityAvailable
             ? <p>
               {formatAbbreviate(topRaceAndEthnicity[0].share)}% of the population in {topRaceAndEthnicity[0].Geography} is {formatRaceName(topRaceAndEthnicity[0].Race)} ({formatEthnicityName(topRaceAndEthnicity[0].Ethnicity)}), followed by {formatAbbreviate(topRaceAndEthnicity[1].share)}% {formatRaceName(topRaceAndEthnicity[1].Race)} ({formatEthnicityName(topRaceAndEthnicity[1].Ethnicity)}).
             </p>
             : null}
-          <p>In {level === "zip" ? `Zip code ${currentLocationRankData.name}` : currentLocationRankData.name}, the median household income is {formatAbbreviate(currentLocationRankData.medianIncome)}{meta.level === "county" ? "." : <span>, which ranks it at {formatRankSuffix(currentLocationRankData.medianIncomeRank)} largest of all {formatLevelNames(meta.level)} in Wayne County.</span>}</p>
+          <p>In {level === "zip" ? `Zip code ${currentLocationRankData.name}` : currentLocationRankData.name}, the median household income is ${formatAbbreviate(currentLocationRankData.medianIncome)}{meta.level === "county" ? "." : <span>, which ranks it as the {formatRankSuffix(currentLocationRankData.medianIncomeRank)} highest of all {formatLevelNames(meta.level)} in Wayne County.</span>}</p>
           <p>
             Social and economic factors, such as income, education, and access to health care, impact health outcomes for all Americans. For example, in many low income areas in the country, there are higher rates of chronic diseases, like high blood pressure and diabetes. The summary to the right highlights some of the social and health conditions for {population[0].Geography}.
           </p>
@@ -167,11 +171,17 @@ class Introduction extends SectionColumns {
             height: 250,
             sum: "Hispanic Population",
             groupBy: ["Race", "Ethnicity"],
-            label: d => `${d.Race.replace("Alone", "")} (${formatEthnicityName(d.Ethnicity)})`,
+            label: d => `${ d.Race instanceof Array
+              ? "Other Races"
+              : d.Race.replace("Alone", "")
+            }${ d.Ethnicity instanceof Array
+              ? ""
+              : ` (${formatEthnicityName(d.Ethnicity)})`
+            }`,
             time: "Year",
             tooltipConfig: {tbody: [["Year", d => d.Year], ["Share", d => formatPercentage(d.share)], [titleCase(meta.level), d => d.Geography]]}
           }}
-          dataFormat={resp => formatRaceAndEthnicityData(resp.data)[0]}
+          dataFormat={ resp => formatRaceAndEthnicityData(resp.data)[0] }
           />
         </article>
         <div className="top-stats viz">

app/pages/Profile/sections/accessToCare/HealthCenterDemographics.jsx

@@ -82,17 +82,17 @@ class HealthCenterDemographics extends SectionColumns {
 
           {isZipLevelDataAvailable
             ? <Stat
-              title={"Most common race"}
+              title={"Most common race utilizing health centers"}
               year={`${topZipLevelData.Year}`}
               value={formatRaceNames(topZipLevelData.RaceType)}
-              qualifier={`${formatPercentage(topZipLevelData[topZipLevelData.RaceType])} of the population in ${topZipLevelData.Geography} utilizing health centers`}
+              qualifier={`${formatPercentage(topZipLevelData[topZipLevelData.RaceType])} of the population in ${topZipLevelData.Geography}`}
             /> : null}
 
           <Stat
-            title={"Most common race"}
+            title={"Most common race utilizing health centers"}
             year={`${topMostRaceData.Year}`}
             value={formatRaceNames(topMostRaceData.RaceType)}
-            qualifier={`${formatPercentage(topMostRaceData[topMostRaceData.RaceType])} of the population in Wayne County utilizing health centers`}
+            qualifier={`${formatPercentage(topMostRaceData[topMostRaceData.RaceType])} of the population in Wayne County`}
           />
 
           {isZipLevelDataAvailable ? <p>In {topZipLevelData.Year}, {lowerCaseRaceName(formatRaceNames(topZipLevelData.RaceType))} residents of {`zip ${topZipLevelData.Geography}`} visited health centers more than any other race/ethnicity group that utilizes services offered by health centers ({formatPercentage(topZipLevelData[topZipLevelData.RaceType])} of the health center population), as compared to the {lowerCaseRaceName(formatRaceNames(topMostRaceData.RaceType))} residents in Wayne County ({formatPercentage(topMostRaceData[topMostRaceData.RaceType])} of the health center population).</p>
@@ -125,7 +125,10 @@ class HealthCenterDemographics extends SectionColumns {
                 fillOpacity: 1
               }
             },
-            tooltipConfig: {title: d => d.RaceType, tbody: [["Year", d => d.Year], ["Share", d => formatPercentage(d[d.RaceType])], ["Geography", d => isZipLevelDataAvailable ? d.Geography : "Wayne County"]]}
+            tooltipConfig: {
+              title: d => d.RaceType,
+              tbody: [["Year", d => d.Year], ["Share", d => formatPercentage(d[d.RaceType])], ["Geography", d => isZipLevelDataAvailable ? d.Geography : "Wayne County"]]
+            }
           }}
           dataFormat={resp => {
             this.setState({sources: updateSource(resp.source, this.state.sources)});