adds 3 new stories

datausa/assets/js/viz/data/loadBuilds.js

@@ -15,9 +15,9 @@ viz.loadBuilds = function(builds) {
         var locale = d3plus.viz().format(Object).locale.value.visualization,
             type = locale[build.config.type] || d3plus.string.title(type);
         build.title = "Data USA - " + type + " of " + build.title;
-        if (build.profile) {
+        if (build.profile && location.href.indexOf("/story/") < 0) {
           var joiner = build.profile_type === "geo" ? " in " : " for ";
-          build.title += joiner + build.profile.name;
+          build.title += joiner + d3plus.string.title(build.profile.name);
           if (build.profile_type === "cip") build.title += " Majors";
         }
       }

datausa/assets/scss/elements/_story.scss

@@ -14,6 +14,31 @@ body.story {
     line-height: 1.5;
     font-weight: 400;
     font-size: 16px;
+
+    img {
+      display: block;
+      margin: 10px auto;
+    }
+  }
+
+  ul {
+    margin: 0 30px;
+
+    li {
+      color: rgba(51, 51, 51, 0.93);
+      position: relative;
+
+      &::before {
+        @include rounded(3px);
+        background-color: rgba(51, 51, 51, 0.75);
+        content: "";
+        height: 5px;
+        left: -15px;
+        position: absolute;
+        top: 14px;
+        width: 5px;
+      }
+    }
   }
 
   .pri-link {

datausa/html/story/article.html

@@ -28,11 +28,19 @@
         <h1>{{ story.title }}</h1>
         <p class="desc">{{ story.description }}</p>
         <div class="author-meta">
-          {% for author in story.authors %}
-          <div class="name"><span>Written by</span> <a href="#authorBio">{{ author.name }}</a></div>
+
+          <div class="name"><span>Written by</span> <a href="#authorBio">
+            {% for author in story.authors %}
+              {% if loop.index > 1 %}
+                {% set joiner = " and " %}
+              {% else %}
+                {% set joiner = "" %}
+              {% endif %}
+              {{ joiner }}{{ author.name }}
+            {% endfor %}
+          </a></div>
           <div class="post-date">{{ story.date }}</div>
           {% if story.attr.image_author %}<div class="name image-by"><span>Image by</span> <a href="{{ story.attr.image_link }}" target="_blank">{{ story.attr.image_author }}</a></div>{% endif %}
-          {% endfor %}
         </div>
     </div>
   </div>
@@ -56,8 +64,8 @@ <h1>{{ story.title }}</h1>
 
 <a name="authorBio" class="anchor"></a>
 <div class="article-more-options">
+  {% for author in story.authors %}
   <div class="author-meta">
-    {% for author in story.authors %}
     <img class="author-avatar" alt="{{ author.name }}" src="{% if author.img %}{{ author.img }}{% else %}/static/img/story/author.png{% endif %}">
     <div class="author-text">
       <div class="name">{{ author.name }}</div>
@@ -69,7 +77,7 @@ <h1>{{ story.title }}</h1>
       {% endif %}
       {% if author.twitter %}<div class="social"><a href="{{ author.twitter }}" target="_blank">Twitter</a></div>{% endif %}
     </div>
-    {% endfor %}
   </div>
+  {% endfor %}
 </div>
 {% endblock %}

datausa/html/story/index.html

@@ -24,9 +24,16 @@ <h1><a href="/story/{{story.story_id}}">{{ story.title }}</a></h1>
       <div class="more-options">
         <a href="/story/{{story.story_id}}" class="read-more pri-link">Read More</a>
         <div class="author-meta">
-          {% for author in story.authors %}
-          <div class="name"><span>Written by</span> <a href="{{ author.twitter }}" target="_blank">{{ author.name }}</a></div>
-          {% endfor %}
+          <div class="name"><span>Written by </span>
+            {% for author in story.authors %}
+              {% if loop.index > 1 %}
+                {% set joiner = " and " %}
+              {% else %}
+                {% set joiner = "" %}
+              {% endif %}
+              {{ joiner }}{{ author.name }}
+            {% endfor %}
+          </div>
           <div class="post-date">{{ story.date }}</div>
         </div>
       </div>
@@ -52,9 +59,16 @@ <h1><a href="/story/{{story.story_id}}">{{ story.title }}</a></h1>
       <div class="more-options">
         <a href="/story/{{story.story_id}}" class="read-more pri-link">Read More</a>
         <div class="author-meta">
-          {% for author in story.authors %}
-          <div class="name"><span>Written by</span> <a href="{{ author.twitter }}" target="_blank">{{ author.name }}</a></div>
-          {% endfor %}
+          <div class="name"><span>Written by </span>
+            {% for author in story.authors %}
+              {% if loop.index > 1 %}
+                {% set joiner = " and " %}
+              {% else %}
+                {% set joiner = "" %}
+              {% endif %}
+              {{ joiner }}{{ author.name }}
+            {% endfor %}
+          </div>
           <div class="post-date">{{ story.date }}</div>
         </div>
       </div>

datausa/profile/geo/housing.yml

@@ -222,6 +222,7 @@ topics:
           id: "transport"
           regex: "^transport_([a-z]*)$"
           value: "num_households"
+      highlight: "<<id>>"
       id: "geo"
       order: "share"
       type: "bar"

datausa/profile/section.py

@@ -86,7 +86,7 @@ def getHighlight(viz_obj):
 
 
                 if "miniviz" in topic:
-                    topic["miniviz"] = Viz(topic["miniviz"], getHighlight(topic["miniviz"], profile = profile))
+                    topic["miniviz"] = Viz(topic["miniviz"], getHighlight(topic["miniviz"]), profile = profile)
 
 
                 # fill selector if present

datausa/profile/soc/employment.yml

@@ -51,6 +51,7 @@ topics:
           share: "num_ppl"
           static:
             soc: "USA"
+      highlight: "<<id>>"
       id: "soc"
       order:
         sort: "asc"

datausa/static/css/site.css

@@ -5881,40 +5881,59 @@ body.story {
       line-height: 1.5;
       font-weight: 400;
       font-size: 16px; }
-      body.story .pri-link {
-        font-family: "Palanquin", sans-serif;
-        font-weight: 700;
-        text-transform: uppercase;
-        font-size: 11px;
-        line-height: 29px;
-        letter-spacing: 0.06em;
-        color: #ef6145; }
-        body.story header {
-          -webkit-justify-content: center;
-          -moz-justify-content: center;
-          justify-content: center;
-          -ms-flex-pack: center;
-          flex-pack: center;
-          display: -webkit-box;
-          display: -moz-box;
-          display: -ms-flexbox;
-          display: -webkit-flex;
-          display: flex;
-          -webkit-flex-direction: column;
-          -moz-flex-direction: column;
-          -ms-flex-direction: column;
-          flex-direction: column;
-          width: 100vw;
-          height: 100vh;
-          padding: 0;
-          background-color: #F6F6F6;
-          -webkit-justify-content: flex-end;
-          -moz-justify-content: flex-end;
-          justify-content: flex-end;
-          -ms-flex-pack: end;
-          flex-pack: end; }
-          body.story header#featured-story {
-            max-height: 800px; }
+      body.story p img {
+        display: block;
+        margin: 10px auto; }
+  body.story ul {
+    margin: 0 30px; }
+    body.story ul li {
+      color: rgba(51, 51, 51, 0.93);
+      position: relative; }
+      body.story ul li::before {
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        background-color: rgba(51, 51, 51, 0.75);
+        content: "";
+        height: 5px;
+        left: -15px;
+        position: absolute;
+        top: 14px;
+        width: 5px; }
+  body.story .pri-link {
+    font-family: "Palanquin", sans-serif;
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 11px;
+    line-height: 29px;
+    letter-spacing: 0.06em;
+    color: #ef6145; }
+    body.story header {
+      -webkit-justify-content: center;
+      -moz-justify-content: center;
+      justify-content: center;
+      -ms-flex-pack: center;
+      flex-pack: center;
+      display: -webkit-box;
+      display: -moz-box;
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+      -webkit-flex-direction: column;
+      -moz-flex-direction: column;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      width: 100vw;
+      height: 100vh;
+      padding: 0;
+      background-color: #F6F6F6;
+      -webkit-justify-content: flex-end;
+      -moz-justify-content: flex-end;
+      justify-content: flex-end;
+      -ms-flex-pack: end;
+      flex-pack: end; }
+      body.story header#featured-story {
+        max-height: 800px; }
   body.story #feature-image, body.story #article-image {
     width: 100%;
     background-position: center center;

datausa/story/stories/04-21-2016_gini-out-of-the-bottle.yml

@@ -0,0 +1,113 @@
+title: "Letting the GINI out of the bottle: Income inequality in America"
+background_image: "/static/img/splash/soc/110000-130000.jpg"
+authors:
+  - name: Daniel Armstrong
+    title: Deloitte Consulting LLP, Analytics and Information Management
+    img: "/static/img/story/authors/armstrong.jpg"
+    about:
+      - "Dan Armstrong is a Senior Specialist at Deloitte focusing on analytics and data visualization. He previously worked for The Economist, Forbes and The Globecon Group, a boutique training firm that educates bankers in capital markets and derivatives."
+      - "He has a BA in anthropology and an MBA in finance and research methods. As recounted in Dreams of My Father, Dan was Barack Obama’s editor in the president’s first job out of college."
+
+topics:
+  - description:
+      - "Imagine you’re talking to your colleague, who works at the same job at the same company. You both earn the same salary – say, $70,000 per year.  In your group of two, the median income is $70,000. The average is $70,000.  And the Gini coefficient – a measure of income inequality of a group – is zero, which means that you both are equal: You earn exactly the same amount."
+      - "Now imagine Carl Icahn walks into the room. According to Business Insider, Carl earned $7.4 billion in 2013.<<foot note=1>> The median income – the middle value of what is now a group of three – is still $70,000. But the average is over $2.4 billion. And the Gini coefficient is very close to one, the highest value possible. A value of one indicates that a single person has all the money and the others have none."
+      - "That’s the idea behind the Gini coefficient, devised in 1912 by Italian sociologist Corrado Gini. In theory, it ranges from zero (perfect equality) to one (complete inequality). In the real world, it ranges from around 0.25-30 in the world’s most equal countries (think Scandinavia) to 0.60-65 in the most unequal ones (South Africa, Namibia and several island nations).<<foot note=2>> Among US states, the range is narrower: from 0.42 (the most equal state, Hawaii) to 0.51 (the most unequal one, Connecticut)."
+  - description:
+      - "To find the Gini coefficient on the DataUSA site, pick a location from the left menu – a state, county, metropolitan area or other geographical unit – and scroll down to \"Income Distribution\" in the economy section. For each of the 143,000 locations on the site, you’ll see the population broken into income buckets.<<foot note=3>> Here’s one of the most equal states, South Dakota (which has a Gini of 0.436, well below the national average of 0.485)."
+    viz:
+      attrs:
+        - "geo"
+        - "wage_bin"
+      data:
+        - geo: "04000US46,01000US"
+          required: "num_ppl,num_ppl_moe,wage_bin"
+          show: "geo"
+          share: "num_ppl.geo"
+      highlight: "04000US46"
+      id: "geo"
+      order:
+        sort: "asc"
+        value: "wage_bin"
+      type: "bar"
+      x:
+        persist:
+          position: True
+        label: "avg_wage"
+        scale: "discrete"
+        value: "wage_bin"
+      y: "share"
+  - description:
+      - "Like South Dakota, every state has a big group of wage-earners on the left, making less than $100,000 a year. What drives the differences are spikes at the rich and poor ends – those making over $200,000 or under $10,000. States where there are large numbers of rich and poor have high Gini coefficients, even if most wage-earners are still in the middle."
+      - "For instance, Mississippi (right) has a high Gini coefficient because of large numbers of the very poor, as seen by the high values on the far left of the distribution – over 15% make less than $10,000 per year."
+    viz:
+      attrs:
+        - "geo"
+        - "wage_bin"
+      data:
+        - geo: "04000US28,01000US"
+          required: "num_ppl,num_ppl_moe,wage_bin"
+          show: "geo"
+          share: "num_ppl.geo"
+      highlight: "04000US28"
+      id: "geo"
+      order:
+        sort: "asc"
+        value: "wage_bin"
+      type: "bar"
+      x:
+        persist:
+          position: True
+        label: "avg_wage"
+        scale: "discrete"
+        value: "wage_bin"
+      y: "share"
+  - description:
+      - "Meanwhile, California has a lower percentage of the very poor, but the big difference accounting for the higher Gini is the fact that a significant minority – about one person out of 40, or almost a million people in a state with a population of 39 million – makes more than $200,000 per year."
+    viz:
+      attrs:
+        - "geo"
+        - "wage_bin"
+      data:
+        - geo: "04000US06,01000US"
+          required: "num_ppl,num_ppl_moe,wage_bin"
+          show: "geo"
+          share: "num_ppl.geo"
+      highlight: "04000US06"
+      id: "geo"
+      order:
+        sort: "asc"
+        value: "wage_bin"
+      type: "bar"
+      x:
+        persist:
+          position: True
+        label: "avg_wage"
+        scale: "discrete"
+        value: "wage_bin"
+      y: "share"
+  - description:
+      - "The scatterplot below, created with figures from the DataUSA site, plots the Gini of states (the horizontal axis) against the median income (the vertical axis). The states fall into four quadrants:"
+      - "<ul>
+        <li>rich and unequal (above-average income and above-average Gini)</li>
+        <li>poor and equal (below-average income and below-average Gini)</li>
+        <li>rich and equal (above-average median income and below-average Gini)</li>
+        <li>poor and unequal (below-average income and above-average Gini)</li>
+        </ul>"
+      - "The colors show the percentage of state residents who live in cities, from 39% in Maine and Vermont to 100% (in Washington DC).<<foot note=4>>"
+      - "<img src='/static/img/story/images/gini-chart.png' />"
+      - "The scatter plot shows several facts:"
+      - "<ul>
+          <li>Almost all of the wealthy and unequal states are highly urbanized. Cities and their suburbs – like New York, San Francisco, Los Angeles, and large swathes of New Jersey and Connecticut – tend to have large populations of high-income professionals and executives.</li>
+          <li>The majority of poor and unequal states lie in South and Southwest.</li>
+          <li>Many of the poor and equal states have economies focused on farming or mineral extraction. </li>
+          <li>The rich and equal states are a mixed bag with incomes higher than their peers. A high proportion of District of Columbia and Maryland residents get salaries from the Federal government, for instance, while Alaska residents have historically received dividends from the Alaska Permanent Fund.<<foot note=5>></li>
+        </ul>"
+      - "To learn more about income inequality in America, go to the economics section of the profiles in DataUSA. You’ll find data from a variety of sources showing the rich, the poor and the middle class in your state or metropolitan area."
+
+footnotes:
+  - "<a href='http://www.businessinsider.com/what-warren-buffett-makes-per-hour-2013-12' target='_blank'>http://www.businessinsider.com/what-warren-buffett-makes-per-hour-2013-12</a>"
+  - "United Nations Development Program<br><a href='http://hdr.undp.org/en/content/income-gini-coefficient' target='_blank'>http://hdr.undp.org/en/content/income-gini-coefficient</a>"
+  - "However, when income data isn’t readily available for a geographical unit, the site defaults to the closest comparable location (often state-level data). For instance, the Gini for the NY-NJ-PA metro area uses income data from New York, while Lubbock, Texas uses the Gini for Texas."
+  - "2010 US Census of Population and Housing, Population and Housing Unit Counts"
+  - "For Federal workforce levels by state, see Governing.com at <a href='http://www.governing.com/gov-data/federal-employees-workforce-numbers-by-state.html' target='_blank'>http://www.governing.com/gov-data/federal-employees-workforce-numbers-by-state.html</a>; for information on the Alaska Permanent Fund, see the fund’s site at <a href='http://www.apfc.org/home/Content/home/index.cfm' target='_blank'>http://www.apfc.org/home/Content/home/index.cfm</a>"