From a8c32adbbde0909518556ffbd3eb327ada8a261b Mon Sep 17 00:00:00 2001 From: Dave Landry Date: Fri, 24 Feb 2017 14:26:25 -0500 Subject: [PATCH] adds y-axis to StackedArea and gridlines to LinePlot (#123) --- app/components/profile/person/Person.jsx | 48 ++++++++++---------- app/css/components/viz/axes.js | 39 ----------------- app/css/components/viz/legend.js | 11 ----- app/css/components/viz/shape.js | 5 --- app/css/components/viz/timeline.js | 27 ------------ app/css/components/viz/tooltip.js | 24 ---------- app/viz/d3plus.js | 56 ++++++++++++++++++------ 7 files changed, 65 insertions(+), 145 deletions(-) delete mode 100644 app/css/components/viz/axes.js delete mode 100644 app/css/components/viz/legend.js delete mode 100644 app/css/components/viz/shape.js delete mode 100644 app/css/components/viz/timeline.js delete mode 100644 app/css/components/viz/tooltip.js diff --git a/app/components/profile/person/Person.jsx b/app/components/profile/person/Person.jsx index 5dbb589d..63f3c453 100644 --- 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: 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 `${date.join(" to ")} - ${FORMATTERS.commas(d.langs || d.views)}`; - } - } - }} /> + 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 `${date.join(" to ")} - ${FORMATTERS.commas(d.langs || d.views)}`; + } + }, + yConfig: {tickFormat: () => "", title: false} + }} /> }, {title: `Among ${occupation.occupation}s`, slug: "occupation_peers", content: }, {title: "Contemporaries", slug: "year_peers", content: }, diff --git a/app/css/components/viz/axes.js b/app/css/components/viz/axes.js deleted file mode 100644 index 7c80e0a5..00000000 --- a/app/css/components/viz/axes.js +++ /dev/null @@ -1,39 +0,0 @@ -import {FORMATTERS} from "types"; - -export default { - axisConfig: { - barConfig: {stroke: "#9E978D"}, - gridConfig: {"stroke-width": 0}, - shapeConfig: { - fill: "#9E978D", - fontColor: "#9E978D", - fontFamily: () => "Amiko", - fontSize: () => 10, - stroke: "#9E978D" - }, - tickFormat: d => FORMATTERS.year(new Date(d).getFullYear()), - tickSize: 5, - title: false - }, - xConfig: { - barConfig: {stroke: "#9E978D"}, - gridConfig: {"stroke-width": 0}, - shapeConfig: { - fill: "#9E978D", - fontColor: "#9E978D", - fontFamily: () => "Amiko", - fontSize: () => 10, - stroke: "#9E978D" - }, - 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 - } -}; diff --git a/app/css/components/viz/legend.js b/app/css/components/viz/legend.js deleted file mode 100644 index a2bb896a..00000000 --- a/app/css/components/viz/legend.js +++ /dev/null @@ -1,11 +0,0 @@ -export default { - shapeConfig: { - fontColor: "#4B4A48", - fontFamily: () => "Amiko", - fontResize: false, - fontSize: () => 14, - height: () => 18, - labelPadding: 0, - width: () => 18 - } -}; diff --git a/app/css/components/viz/shape.js b/app/css/components/viz/shape.js deleted file mode 100644 index 35a5c7a9..00000000 --- a/app/css/components/viz/shape.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - fontColor: ["#fff", "rgba(255, 255, 255, 0.45)"], - fontFamily: () => "Amiko", - textAnchor: "start" -}; diff --git a/app/css/components/viz/timeline.js b/app/css/components/viz/timeline.js deleted file mode 100644 index 2e1d1aef..00000000 --- a/app/css/components/viz/timeline.js +++ /dev/null @@ -1,27 +0,0 @@ -import {FORMATTERS} from "types"; - -export default { - handleConfig: { - fill: "#718D9A", - rx: 6, - ry: 6 - }, - handleSize: 12, - tickFormat: d => { - d = new Date(d); - return d.getMonth() ? false : FORMATTERS.year(d.getFullYear()); - }, - selectionConfig: { - "fill": "#718D9A", - "fill-opacity": 1, - "stroke-width": 0 - }, - shapeConfig: { - fill: "#9E978D", - fontColor: "#9E978D", - fontFamily: () => "Amiko", - fontSize: () => 12, - height: 6, - stroke: "#9E978D" - } -}; diff --git a/app/css/components/viz/tooltip.js b/app/css/components/viz/tooltip.js deleted file mode 100644 index a8e28880..00000000 --- a/app/css/components/viz/tooltip.js +++ /dev/null @@ -1,24 +0,0 @@ -export default { - background: "#f4f4f1", - border: "1px solid #d0c9b4", - footerStyle: { - "color": "#AFAAA4", - "font-size": "9px", - "font-weight": 400, - "margin": "0 7px 9px", - "letter-spacing": "0.35px", - "text-align": "center", - "text-transform": "uppercase" - }, - padding: 0, - titleStyle: { - "background-color": "#4b4a48", - "color": "#F4F4F1", - "font-size": "11px", - "font-weight": 400, - "letter-spacing": "1px", - "padding": "8px 7px 7px", - "text-transform": "uppercase" - }, - width: "225px" -}; diff --git a/app/viz/d3plus.js b/app/viz/d3plus.js index f559169f..7bbaba41 100644 --- a/app/viz/d3plus.js +++ b/app/viz/d3plus.js @@ -12,18 +12,25 @@ 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, @@ -31,7 +38,6 @@ export default { }, depth: 0, - height: 600, legendConfig: { @@ -123,14 +129,19 @@ 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, @@ -138,11 +149,28 @@ export default { }, 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