Annotated line chart template

fabfile/__init__.py

@@ -373,6 +373,13 @@ def add_animated_photo(slug):
     """
     _add_graphic(slug, 'animated_photo')
 
+@task
+def add_annotated_line_chart(slug):
+    """
+    Create an annotated line chart.
+    """
+    _add_graphic(slug, 'annotated_line_chart')
+
 @task
 def add_archive_graphic(slug):
     """

graphic_templates/annotated_line_chart/child_template.html

@@ -0,0 +1,32 @@
+{% extends 'base_template.html' %}
+
+{% block content %}
+
+    {% if COPY.labels.headline %}<h1>{{ COPY.labels.headline|smarty }}</h1>{% endif %}
+    {% if COPY.labels.subhed %}<h2>{{ render(COPY.labels.subhed)|smarty }}</h2>{% endif %}
+
+    <div id="line-chart" class="graphic" role="img"
+    {% if COPY.labels.screenreader %}
+    aria-label="{{ COPY.labels.screenreader|forceescape }}"
+    {% endif %}
+    >
+        <img src="fallback.png" alt="" class="fallback" />
+    </div>
+
+    {% if COPY.labels.footnote %}
+    <div class="footnotes">
+        <h4>Notes</h4>
+        <p>{{ COPY.labels.footnote|smarty }}</p>
+    </div>
+    {% endif %}
+
+    <div class="footer">
+        {% if COPY.labels.source %}<p>Source: {{ COPY.labels.source|smarty }}</p>{% endif %}
+        {% if COPY.labels.credit %}<p>Credit: {{ COPY.labels.credit|smarty }}</p>{% endif %}
+    </div>
+
+    <script type="text/javascript">
+        var DATA = {{ COPY.data.json() }};
+    </script>
+
+{% endblock content %}

graphic_templates/annotated_line_chart/css/graphic.less

@@ -0,0 +1,38 @@
+@import "base";
+
+.lines {
+    fill: none;
+    stroke-width: 3px;
+    stroke: #ccc;
+}
+
+.value text {
+    font-size: 12px;
+    font-weight: bold;
+    fill: #999;
+}
+
+.annotations .dots {
+    stroke: #fff;
+    stroke-width: 1px;
+}
+
+.annotations text {
+    font-size: 12px;
+    fill: #999;
+}
+
+/*
+ * larger-than-mobile-screen styles
+ */
+@media @screen-mobile-above {
+    .key { display: none; }
+}
+
+/*
+ * small-screen styles
+ */
+@media @screen-mobile {
+    .value text { font-size: 10px; }
+    .annotations text { font-size: 10px; }
+}

graphic_templates/annotated_line_chart/graphic_config.py

@@ -0,0 +1,13 @@
+#!/usr/bin/env python
+
+import base_filters
+
+COPY_GOOGLE_DOC_KEY = '1wq0oi5HfgfYBdDs32-Qs77xmnI9VMXPUgRHA8lKIRmM'
+
+USE_ASSETS = False
+
+# Use these variables to override the default cache timeouts for this graphic
+# DEFAULT_MAX_AGE = 20
+# ASSETS_MAX_AGE = 300
+
+JINJA_FILTER_FUNCTIONS = base_filters.FILTERS