adds y-axis to StackedArea and gridlines to LinePlot (#123)

Datawheel · Feb 24, 2017 · a8c32ad · a8c32ad
1 parent b65017e
commit a8c32ad
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 145 deletions.
diff --git a/app/components/profile/person/Person.jsx b/app/components/profile/person/Person.jsx
@@ -70,31 +70,29 @@ class Person extends Component {
         title: personProfile.person.alive ? "Global Culture Career" : "Digital Afterlife",
         slug: "afterlife",
         viz: <LinePlot
-                  config={{
-                    aggs: {
-                      langs: a => Math.max(...a)
-                    },
-                    height: 600,
-                    title: "Title here...",
-                    data: lineData,
-                    time: d => d.x,
-                    shapeConfig: {
-                      fill: d => d.color,
-                      Line: {
-                        fill: "none",
-                        stroke: d => d.color,
-                        strokeWidth: 1
-                      }
-                    },
-                    timeline: false,
-                    tooltipConfig: {
-                      body: d => {
-                        let date = d.x instanceof Array ? extent(d.x) : [d.x];
-                        date = date.length > 1 ? date.map(FORMATTERS.dateShort) : date.map(FORMATTERS.date);
-                        return `<span class="center">${date.join(" to ")} - ${FORMATTERS.commas(d.langs || d.views)}</span>`;
-                      }
-                    }
-                  }} />
+              config={{
+                height: 600,
+                title: "Title here...",
+                data: lineData,
+                shapeConfig: {
+                  fill: d => d.color,
+                  Line: {
+                    fill: "none",
+                    stroke: d => d.color,
+                    strokeWidth: 1
+                  }
+                },
+                time: d => d.x,
+                timeline: false,
+                tooltipConfig: {
+                  body: d => {
+                    let date = d.x instanceof Array ? extent(d.x) : [d.x];
+                    date = date.length > 1 ? date.map(FORMATTERS.dateShort) : date.map(FORMATTERS.date);
+                    return `<span class="center">${date.join(" to ")} - ${FORMATTERS.commas(d.langs || d.views)}</span>`;
+                  }
+                },
+                yConfig: {tickFormat: () => "", title: false}
+              }} />
       },
       {title: `Among ${occupation.occupation}s`, slug: "occupation_peers", content: <OccupationRanking person={personProfile.person} ranking={personProfile.occupationRank} />},
       {title: "Contemporaries", slug: "year_peers", content: <YearRanking person={personProfile.person} ranking={personProfile.yearRank} />},

diff --git a/app/css/components/viz/axes.js b/app/css/components/viz/axes.js
diff --git a/app/css/components/viz/legend.js b/app/css/components/viz/legend.js
diff --git a/app/css/components/viz/shape.js b/app/css/components/viz/shape.js
diff --git a/app/css/components/viz/timeline.js b/app/css/components/viz/timeline.js
diff --git a/app/css/components/viz/tooltip.js b/app/css/components/viz/tooltip.js
diff --git a/app/viz/d3plus.js b/app/viz/d3plus.js
@@ -12,26 +12,32 @@ export default {
     birthyear: uniques,
     deathyear: uniques,
     id: uniques,
+    langs: a => Math.max(...a),
     occupation_id: uniques
   },
 
   axisConfig: {
-    barConfig: {stroke: "#9E978D"},
-    gridConfig: {"stroke-width": 0},
+    barConfig: {
+      "stroke": "#D6D6D0",
+      "stroke-width": 1
+    },
+    gridConfig: {
+      "stroke": "#D6D6D0",
+      "stroke-width": 1
+    },
     shapeConfig: {
-      fill: "#9E978D",
+      fill: "#D6D6D0",
       fontColor: "#9E978D",
       fontFamily: () => "Amiko",
       fontSize: () => 10,
-      stroke: "#9E978D"
+      stroke: "#D6D6D0"
     },
     tickFormat: d => FORMATTERS.year(new Date(d).getFullYear()),
     tickSize: 5,
     title: false
   },
 
   depth: 0,
-
   height: 600,
 
   legendConfig: {
@@ -123,26 +129,48 @@ export default {
   },
 
   xConfig: {
-    barConfig: {stroke: "#9E978D"},
-    gridConfig: {"stroke-width": 0},
+    barConfig: {
+      "stroke": "#D6D6D0",
+      "stroke-width": 1
+    },
+    gridConfig: {
+      "stroke-width": 0
+    },
     shapeConfig: {
-      fill: "#9E978D",
+      fill: "#D6D6D0",
       fontColor: "#9E978D",
       fontFamily: () => "Amiko",
       fontSize: () => 10,
-      stroke: "#9E978D"
+      stroke: "#D6D6D0"
     },
     tickFormat: d => FORMATTERS.year(new Date(d).getFullYear()),
     tickSize: 5,
     title: false
   },
 
   yConfig: {
-    barConfig: {"stroke-width": 0},
-    gridConfig: {"stroke-width": 0},
-    labels: [],
-    ticks: [],
-    title: false
+    barConfig: {
+      "stroke": "#9E978D",
+      "stroke-width": 0
+    },
+    gridConfig: {
+      stroke: "#D6D6D0"
+    },
+    shapeConfig: {
+      fill: "#D6D6D0",
+      fontColor: "#9E978D",
+      fontFamily: () => "Amiko",
+      fontSize: () => 10,
+      stroke: "#D6D6D0"
+    },
+    tickFormat: d => d % 1 ? "" : FORMATTERS.commas(d),
+    tickSize: 5,
+    title: "Number of People",
+    titleConfig: {
+      fontColor: "#9E978D",
+      fontFamily: () => "Amiko",
+      fontSize: () => 12
+    }
   },
 
   zoom: false