Stacked area template

stacked_area_chart/graphic.js

@@ -0,0 +1,79 @@
+var d3 = {
+  ...require("d3-shape/dist/d3-shape.min")
+};
+
+var pym = require("./lib/pym");
+require("./lib/webfonts");
+
+var pymChild;
+var renderAreaChart = require("./renderAreaChart");
+
+//Initialize graphic
+var onWindowLoaded = function() {
+  var series = formatData(window.DATA);
+  render(series);
+
+  window.addEventListener("resize", () => render(series));
+
+  pym.then(child => {
+    pymChild = child;
+    child.sendHeight();
+  });
+};
+
+//Format graphic data for processing by D3.
+var formatData = function(data) {
+  data.forEach(function(d) {
+    if (d.date instanceof Date) return;
+    var [m, day, y] = d.date.split("/").map(Number);
+    y = y > 50 ? 1900 + y : 2000 + y;
+    d.date = new Date(y, m - 1, day);
+
+    let total_amount = 0;    
+    for (item in d) {
+      if (item != "date") {
+        total_amount += +d[item];  
+      }
+    }
+    d.total_amount = total_amount;
+  });
+
+  // Restructure tabular data for easier charting.
+  var dataKeys = Object.keys(data[0]);  
+  var removeItems = ["date","total_amount"];
+  for (var i = 0; i < removeItems.length; i++) {
+
+    let index = dataKeys.indexOf(removeItems[i]);
+    if (index > -1) {
+      dataKeys.splice(index,1)
+    }
+  }
+
+  var stackedData = d3.stack().keys(dataKeys)(data);  
+
+  return stackedData;
+};
+
+// Render the graphic(s). Called by pym with the container width.
+var render = function(data) {
+  // Render the chart!
+  var container = "#stacked-area-chart";
+  var element = document.querySelector(container);
+  var width = element.offsetWidth;
+  renderAreaChart({
+    container,
+    width,
+    data,
+    dateColumn: "date",
+    valueColumn: "amt"
+  });
+
+  // Update iframe
+  if (pymChild) {
+    pymChild.sendHeight();
+  }
+};
+
+//Initially load the graphic
+// (NB: Use window.load to ensure all images have loaded)
+window.onload = onWindowLoaded;

stacked_area_chart/graphic.less

@@ -0,0 +1,25 @@
+@import "./lib/base";
+
+.value text {
+  font-size: 12px;
+  font-weight: bold;
+  fill: #999;
+}
+
+@media screen and (max-width: 500px) {
+  .value text {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 500px) {
+  .key {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .key.one-line {
+    display: none;
+  }
+}

stacked_area_chart/index.html

@@ -0,0 +1,37 @@
+<%= await t.include("lib/_head.html") %>
+
+<% if (COPY.labels.headline) { %>
+<h1><%= t.smarty(COPY.labels.headline) %></h1>
+<% } %>
+
+<% if (COPY.labels.subhed) { %>
+<h2><%= t.smarty(COPY.labels.subhed) %></h2>
+<% } %>
+
+<div id="stacked-area-chart" class="graphic" role="img"
+<% if (COPY.labels.screenreader) { %>
+  aria-label="<%- COPY.labels.screenreader %>"
+<% } %>
+>
+  <img src="fallback.png" alt="" class="fallback" />
+</div>
+
+<% if (COPY.labels.footnote) { %>
+<div class="footnotes">
+  <h4>Notes</h4>
+  <p><%= COPY.labels.footnote %></p>
+</div>
+<% } %>
+
+<div class="footer">
+  <% if (COPY.labels.source) { %><p>Source: <%= COPY.labels.source %></p><% } %>
+  <% if (COPY.labels.credit) { %><p>Credit: <%= COPY.labels.credit %></p><% } %>
+</div>
+
+<script type="text/javascript">
+  var DATA = <%= JSON.stringify(COPY.data) %>;
+</script>
+
+<script src="./graphic.js"></script>
+
+<%= await t.include("lib/_foot.html") %>

stacked_area_chart/manifest.json

@@ -0,0 +1,52 @@
+{
+  "templateSheet": "1DLxMcQRpyp1rqGJTjC28jJH5Df1GYrJrJnBl2PW9-MU",
+  "files": [
+    "*.html",
+    "!_*.html",
+    "graphic.js",
+    "graphic.less",
+    "*.png",
+    "*.jpg",
+    "*.gif",
+    "*.json",
+    "!manifest.json",
+    "*.geojson",
+    "*.csv"
+  ],
+  "sheet": "1hvYBq5P5ud1OEHxEDLqLbnUawnQXRmYKfK_3MWQcExs",
+  "installedPackagesAtCreation": {
+    "component-leaflet-map": "0.0.17",
+    "d3": "^5.7.0",
+    "d3-array": "^2.0.3",
+    "d3-axis": "^1.0.12",
+    "d3-color": "^1.2.3",
+    "d3-dispatch": "^1.0.5",
+    "d3-ease": "^1.0.5",
+    "d3-fetch": "^1.1.2",
+    "d3-force": "^2.0.1",
+    "d3-geo": "^1.11.3",
+    "d3-geo-projection": "^2.6.0",
+    "d3-hierarchy": "^1.1.9",
+    "d3-path": "^1.0.7",
+    "d3-sankey": "^0.7.1",
+    "d3-scale": "^2.2.2",
+    "d3-scale-chromatic": "^1.5.0",
+    "d3-selection": "^1.4.0",
+    "d3-shape": "^1.2.2",
+    "d3-svg": "^0.2.2",
+    "d3-time": "^1.0.10",
+    "d3-time-format": "^2.2.3",
+    "d3-timer": "^1.0.9",
+    "d3-transform": "^1.0.5",
+    "d3-transition": "^1.2.0",
+    "jquery": "^3.3.1",
+    "mapshaper": "^0.4.154",
+    "readjson": "^1.1.4",
+    "tablesort": "^5.1.0",
+    "textures": "^1.2.2",
+    "topojson": "^3.0.2",
+    "topojson-client": "^3.0.1",
+    "wherewolf": "^1.0.3",
+    "world-atlas": "^2.0.2"
+  }
+}