standardizes "Viz Builder" titles

api/homeRoute.js

@@ -11,39 +11,40 @@ module.exports = function(app) {
     const carousels = [];
 
     carousels.push({
-      title: "Visualize",
+      title: "Viz Builder",
       icon: "/icons/sections/demographics.svg",
       rank: 1,
       footer: "View Builder",
       url: "/visualize",
+      new: true,
       tiles: [
         {
           title: "Opioid Deaths (Age-Adjusted) by State",
-          url: "/map?groups=0-Zpn26u&measure=2sUCF4",
+          url: "/visualize?groups=0-Zpn26u&measure=2sUCF4",
           image: "/images/home/maps/opioid_overdose_deathrate_ageadjusted.png",
           new: false
         },
         {
           title: "Default Rate by County",
-          url: "/map?groups=0-Z2nI4Ry&measure=ZdVPNx",
+          url: "/visualize?groups=0-Z2nI4Ry&measure=ZdVPNx",
           image: "/images/home/maps/default_rate.png",
           new: false
         },
         {
           title: "Nonmedical Pain Reliever Usage by State",
-          url: "/map?groups=0-2vBHXu&measure=Z25c19f",
+          url: "/visualize?groups=0-2vBHXu&measure=Z25c19f",
           image: "/images/home/maps/non_medical_use_of_pain_relievers.png",
           new: false
         },
         {
           title: "Children in Single-Parent Households by County",
-          url: "/map?groups=0-Z1X72Pg&measure=1Vpvwd",
+          url: "/visualize?groups=0-Z1X72Pg&measure=1Vpvwd",
           image: "/images/home/maps/children_in_singleparent_households.png",
           new: false
         },
         {
           title: "High School Graduation by State",
-          url: "/map?groups=0-z7J78&measure=Z2ny7rj",
+          url: "/visualize?groups=0-z7J78&measure=Z2ny7rj",
           image: "/images/home/maps/high_school_graduation.png",
           new: false
         }

app/components/Footer/index.jsx

@@ -12,7 +12,7 @@ export default class Footer extends Component {
           <ul>
             <h4>Explore</h4>
             <li><Link to="/search/">Profiles</Link></li>
-            <li><Link to="/visualize">Visualizations</Link></li>
+            <li><Link to="/visualize">Viz Builder</Link></li>
             <li><Link to="/map/">Maps</Link></li>
             <li><Link to="/story/">Stories</Link></li>
             <li><Link to="/cart/">Data Cart</Link></li>

app/components/Nav/index.jsx

@@ -95,7 +95,7 @@ export default class Nav extends Component {
               </ul>
             </li>
             <li>
-              <Link className="new" to="/visualize">Visualization Builder</Link>
+              <Link className="new" to="/visualize">Viz Builder</Link>
             </li>
             <li>
               <Link to="/map">Maps</Link>

app/pages/Data/API.jsx

@@ -9,7 +9,7 @@ export default class API extends Component {
       <div id="API">
         <h2>Introduction</h2>
         <p>
-          The Data USA API allows users to explore the entire database using carefully constructed query strings, returning data as JSON results. All of the visualizations on the page have a a "show data" button on their top-right that displays the API call(s) used to generate that visualization. Additionally, the new <Link to="/visualize">Visualization Builder</Link> is a great way to explore what's possible.  This page illustrates an example usage of exploring geographic data.
+          The Data USA API allows users to explore the entire database using carefully constructed query strings, returning data as JSON results. All of the visualizations on the page have a a "show data" button on their top-right that displays the API call(s) used to generate that visualization. Additionally, the new <Link to="/visualize">Viz Builder</Link> is a great way to explore what's possible.  This page illustrates an example usage of exploring geographic data.
         </p>
         <h2>Example: Population Data</h2>
         <p>

app/pages/Home/Column.css

@@ -22,6 +22,17 @@
         text-decoration: none;
       }
     }
+    &.new:after {
+      color: var(--red);
+      content: "New";
+      font-size: 12px;
+      font-weight: 800;
+      display: inline-block;
+      letter-spacing: 1px;
+      margin-left: 5px;
+      text-transform: uppercase;
+      vertical-align: top;
+    }
   }
   &.primary {
     display: inline-block;

app/pages/Home/Column.jsx

@@ -38,7 +38,7 @@ class Column extends Component {
 
     return (
       <div className={ `column ${className} rank-${data.rank}` }>
-        <h3 className="column-title">
+        <h3 className={ `column-title ${ data.new ? "new" : "" }` }>
           <Link to={data.url}>
             <img className="icon" src={ data.icon } />
             { data.title }

app/pages/Home/index.jsx

@@ -29,7 +29,7 @@ class Home extends Component {
         <div className="bg" style={{backgroundImage: `url("/images/home/bg/${image}.jpg")`}}></div>
         <img className="logo" src="/images/home/logo-shadow.png" alt="Data USA" />
         <h2 className="tagline">
-          <a href="/search">Search</a>, <a href="/map">map</a>, <a href="/profile/geo/chicago-il/?compare=seattle-wa">compare</a>, and <a href="/cart">download</a> U.S. data
+          <a href="/visualize">Explore</a>, <a href="/map">map</a>, <a href="/profile/geo/chicago-il/?compare=seattle-wa">compare</a>, and <a href="/cart">download</a> U.S. data
         </h2>
 
         {/* <select id="bg-select" className="pt-select" onChange={this.onImage.bind(this)} defaultValue={image}>

app/pages/Visualize.jsx

@@ -123,8 +123,8 @@ class Visualize extends Component {
 
     if (intro) {
       return <div id="Visualize" className="visualize-intro">
-        <Helmet title="Visualization Builder" />
-        <h1>Visualization Builder</h1>
+        <Helmet title="Viz Builder" />
+        <h1>Viz Builder</h1>
         <p>
           Welcome to the Data USA custom visualization builder. This page allows you to select any indicator from the site. You may specify custom groupings and filters, and then view the resulting data as a series of visualizations based on your selection.
         </p>
@@ -146,7 +146,7 @@ class Visualize extends Component {
 
       return <div id="Visualize">
 
-        { query ? <Helmet title={`${query.title ? `${query.title} | ` : ""}Visualization Builder`} /> : null }
+        { query ? <Helmet title={`${query.title ? `${query.title} | ` : ""}Viz Builder`} /> : null }
 
         <div className="help" onClick={this.showIntro.bind(this)}>
           <Icon iconName="help" />