add new template: dot chart multiple. closes #25 (#37)

dot_chart_multiple/graphic.js

@@ -0,0 +1,72 @@
+var pym = require("./lib/pym");
+var { isMobile } = require("./lib/breakpoints");
+require("./lib/webfonts");
+
+// Global vars
+var pymChild = null;
+var renderDotChart = require("./renderDotChart");
+
+// Initialize the graphic.
+var onWindowLoaded = function() {
+    if (document.body.classList.contains('promo')) {
+        isPromo = true;
+    }
+
+    render(window.DATA);
+    window.addEventListener("resize", () => render(window.DATA));
+
+    pym.then(child => {
+        pymChild = child;
+        pymChild.sendHeight();
+    });
+};
+
+// Render the graphic(s). Called by pym with the container width.
+var render = function(data) {
+// Render the chart!
+var container = "#dot-chart";
+var element = document.querySelector(container);
+element.innerHTML = "";
+var width = element.offsetWidth;
+
+// draw the charts
+if (isMobile.matches) {
+    for (var i = 0; i < data.length; i++) {
+        var chartDiv = document.createElement('div');
+        chartDiv.className = 'chart chart-' + i;
+        element.appendChild(chartDiv);
+
+    // Render the chart!
+    renderDotChart({
+        container: container + ' .chart-' + i,
+        width,
+        data: [ data[i] ],
+        idx: i,
+        labelColumn: "label",
+        minColumn: "min",
+        maxColumn: "max"
+    });
+    }
+} else {
+    // Render the chart!
+    renderDotChart({
+    container,
+    width,
+    data,
+    labelColumn: "label_fmt",
+    minColumn: "min",
+    maxColumn: "max"
+    });
+}
+
+// Update iframe
+if (pymChild) {
+    pymChild.sendHeight();
+}
+};
+
+/*
+* Initially load the graphic
+* (NB: Use window.load to ensure all images have loaded)
+*/
+window.onload = onWindowLoaded;

dot_chart_multiple/graphic.less

@@ -0,0 +1,159 @@
+@import "./lib/base";
+
+@overall:        #666;
+@overall-stroke: #333;
+@democrats:      #237bbd;
+@dem-stroke:     darken(@democrats, 6%);
+@republicans:    #d62021;
+@rep-stroke:     darken(@republicans, 6%);
+@independents:   lighten(#15b16e, 2%);
+@ind-stroke:     darken(@independents, 6%);
+
+h1 {
+  font-size: 18px;
+  margin-bottom: 15px;
+  text-align: left;
+
+  strong { color: #333; }
+}
+
+.graphic h4 {
+  .gotham();
+  color: #666;
+  font-size: 13px;
+  margin: 0 0 11px 0;
+  // text-align: center;
+}
+
+.chart + .chart {
+  margin-top: 33px;
+}
+
+.graphic-wrapper { position: relative;  }
+
+.key {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 0;
+  margin-bottom: 15px;
+  justify-content: center;
+
+  @media @screen-mobile {
+    margin-bottom: 25px;
+  }
+
+  .key-item {
+    display: block;
+    margin: 0 11px 3px 11px;
+
+    @media @screen-mobile {
+      &.overall {
+        flex-basis: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+      }
+    }
+
+    b {
+      border-radius: 50px;
+      overflow: hidden;
+      width: 11px;
+      height: 11px;
+      opacity: 0.7;
+      float: none;
+      display: inline-block;
+    }
+    &.overall {
+      b { background-color: @overall; }
+
+      label {
+        font-weight: bold;
+        color: #333;
+      }
+    }
+
+    &.republicans b { background: @republicans; }
+    &.democrats b { background: @democrats; }
+    &.independents b { background: @independents; }
+  }
+}
+
+sup {
+    color: #999;
+    line-height: 0;
+    padding-left: 2px;
+}
+
+.bars line {
+    fill: none;
+    stroke-width: 4px;
+    stroke: #ddd;
+}
+
+circle {
+  fill: #D8472B;
+  fill-opacity: .75;
+
+  .overall & {
+    fill: @overall;
+    fill-opacity: 1;
+  }
+  .democrats & { fill: @democrats; }
+  .republicans & { fill: @republicans; }
+  .independents & { fill: @independents; }
+}
+
+line {
+  .overall & {
+    stroke: @overall-stroke;
+  }
+}
+
+.value text {
+  fill: #666;
+  font-size: 11px;
+  text-anchor: middle;
+}
+
+.value {
+  font-style: italic;
+
+  .overall text {
+    fill: @overall;
+    text-anchor: middle;
+    font-style: normal;
+    font-weight: bold;
+  }
+  .democrats text { fill: @democrats; }
+  .republicans text { fill: @republicans; }
+  .independents text { fill: @ind-stroke; }
+
+  text.hdr {
+    color: #333;
+    font-size: 12px;
+    font-weight: bold;
+    text-anchor: start;
+  }
+}
+
+.labels li {
+  font-size: 13px;
+
+  strong { color: #333; }
+}
+
+.promo {
+    h1 {
+        .knockout-header();
+    }
+    .labels li {
+        font-size: 14px;
+    }
+    .value text,
+    .shadow text {
+        font-size: 13px;
+
+        .hdr { font-size: 14px; }
+    }
+}

dot_chart_multiple/index.html

@@ -0,0 +1,44 @@
+<%= 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>
+<% } %>
+
+<ul class="key">
+    <li class="key-item key-0 overall"><b></b><label><%= t.smarty(COPY.labels.chartKey0) %></label></li>
+    <li class="key-item key-1 republicans"><b></b><label><%= t.smarty(COPY.labels.chartKey1) %></label></li>
+    <li class="key-item key-2 independents"><b></b><label><%= t.smarty(COPY.labels.chartKey2) %></label></li>
+    <li class="key-item key-3 democrats"><b></b><label><%= t.smarty(COPY.labels.chartKey3) %></label></li>
+</ul>
+
+<div id="dot-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") %>

dot_chart_multiple/manifest.json

@@ -0,0 +1,17 @@
+{
+    "templateSheet": "1BsblzjPNM7tvl71EOr5UneQKOTBMM7EhZS4R1dOAdb8",
+    "files": [
+      "*.html",
+      "!_*.html",
+      "graphic.js",
+      "graphic.less",
+      "*.png",
+      "*.jpg",
+      "*.gif",
+      "*.json",
+      "!manifest.json",
+      "*.geojson",
+      "*.csv",
+      "!README.md"
+    ]
+  }