adds titles to PDF/PNG downloads

datausa/assets/js/helpers/save.js

@@ -14,11 +14,15 @@ var save = function(svg, options) {
     return;
   }
 
-  var parent = d3.select(svg.node().parentNode.parentNode.parentNode.parentNode)
-      sources = parent.selectAll(".sub-source"),
+  var parent = d3.select("body.map");
+  if (!parent.size()) parent = d3.select(svg.node().parentNode.parentNode.parentNode.parentNode);
+  var sources = parent.selectAll(".sub-source"),
       footerHeight = options.padding,
-      sourceData = [];
-
+      sourceData = [],
+      title = d3.select(parent.node().parentNode).select(".embed-title"),
+      titleHeight = title.size() ? title.node().offsetHeight + options.padding : 0,
+      sub = d3.select(parent.node().parentNode).select(".sub-title"),
+      subHeight = sub.size() ? sub.node().offsetHeight + 5 : 0;
   if (sources.size()) {
     sources.each(function(d){
       sourceData.push({"y": footerHeight, "loaded": false});
@@ -36,14 +40,14 @@ var save = function(svg, options) {
 
   var canvas = document.createElement("canvas");
   canvas.width = (svgWidth + (options.padding * 2)) * options.scale;
-  canvas.height = (svgHeight + options.padding + footerHeight) * options.scale;
+  canvas.height = ((options.padding * 2) + titleHeight + subHeight + svgHeight + footerHeight) * options.scale;
 
   var context = canvas.getContext('2d');
   context.scale(options.scale, options.scale);
-  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.clearRect(0, 0, canvas.width / 2, canvas.height / 2);
   if (options.mode === "pdf") {
     context.beginPath();
-    context.rect(0, 0, canvas.width, canvas.height);
+    context.rect(0, 0, canvas.width / 2, canvas.height / 2);
     context.fillStyle = "white";
     context.fill();
   }
@@ -92,9 +96,9 @@ var save = function(svg, options) {
   var legendIcons = svg.selectAll("#key rect");
 
   if (legendIcons.size()) {
-    var keyBox = d3.select("#key").node().getBBox();
+    var keyBox = svg.select("#key").node().getBBox();
 
-    var translate = d3.select("#key").attr("transform").match(/translate\(([^a-z]+)\)/i)[1];
+    var translate = svg.select("#key").attr("transform").match(/translate\(([^a-z]+)\)/i)[1];
     translate = translate.replace(/([^a-z])\s([^a-z])/gi, "$1,$2").split(",").map(Number);
     keyBox.y += translate[1];
 
@@ -103,7 +107,7 @@ var save = function(svg, options) {
       pattern = svg.select("#" + pattern.substring(0, pattern.length-1));
       var size = parseFloat(pattern.select("image").attr("width"));
 
-      var x = options.padding + keyBox.x + (i * (size + 5)), y = options.padding + keyBox.y;
+      var x = options.padding + keyBox.x + (i * (size + 5)), y = options.padding + titleHeight + subHeight + keyBox.y;
 
       var rect = pattern.select("rect").node();
       rect = d3plus.client.ie ? (new XMLSerializer()).serializeToString(rect) : rect.outerHTML;
@@ -155,7 +159,7 @@ var save = function(svg, options) {
       var tile = imageTiles[key];
       context.save();
       context.beginPath();
-      context.translate(options.padding, options.padding);
+      context.translate(options.padding, options.padding + titleHeight + subHeight);
       context.rect(0, 0, svgWidth, svgHeight);
       context.clip();
       context.drawImage(tile.img, tile.x, tile.y);
@@ -167,37 +171,56 @@ var save = function(svg, options) {
       if (!d3.select(this).classed("tiles") && d3.select(this).attr("id") !== "key") {
         var outer = d3plus.client.ie ? (new XMLSerializer()).serializeToString(this) : this.outerHTML;
         context.save();
-        context.translate(options.padding, options.padding);
+        context.translate(options.padding, options.padding + titleHeight + subHeight);
         context.rect(0, 0, svgWidth, svgHeight);
         context.clip();
         context.drawSvg(outer);
         context.restore();
       }
     });
 
-    function text2svg(text) {
+    function text2svg(text, title) {
       text = d3.select(text);
+      title = title || text.text().replace(" Options", "").trim();
       var fC = text.style("color"),
           fF = text.style("font-family").split(",")[0],
           fS = text.style("font-size");
-      return "<text stroke='none' fill='" + fC + "' font-family='" + fF + "' font-size='" + fS + "'>" + text.text().trim() + "</text>";
+
+      if (fF.indexOf("'") !== 0) fF = "'" + fF + "'";
+      return "<text stroke='none' dy='" + fS + "' fill='" + fC + "' font-family=" + fF + " font-size='" + fS + "'>" + title + "</text>";
     }
 
     sources.each(function(d, i){
 
       var text = text2svg(this);
       context.save();
-      context.translate(options.padding, options.padding + svgHeight + sourceData[i].y);
+      context.translate(options.padding, options.padding + titleHeight + subHeight + svgHeight + sourceData[i].y);
       context.drawSvg(text);
       context.restore();
 
     });
 
+    if (title.size()) {
+      var titleText = text2svg(title.node(), options.name.split(" of ").slice(1).join(" of "));
+      context.save();
+      context.translate(options.padding, options.padding);
+      context.drawSvg(titleText);
+      context.restore();
+    }
+
+    if (sub.size()) {
+      var subText = text2svg(sub.node());
+      context.save();
+      context.translate(options.padding, titleHeight + 5);
+      context.drawSvg(subText);
+      context.restore();
+    }
+
     var logo = d3.select(".datausa-link").select("img"),
         logoHeight = logo.node().offsetHeight,
         logoWidth = logo.node().offsetWidth,
         logoX = canvas.width/options.scale - logoWidth - options.padding,
-        logoY = canvas.height/options.scale - logoHeight - options.padding - 3;
+        logoY = canvas.height/options.scale - logoHeight - options.padding - 10;
 
     context.save();
     context.translate(logoX, logoY);

datausa/assets/js/viz/data/loadBuilds.js

@@ -12,7 +12,9 @@ viz.loadBuilds = function(builds) {
       var title = d3.select(build.container.node().parentNode.parentNode).select("h2");
       if (title.size()) {
         build.title = title.text().replace(" Options", "").replace(/\u00a0/g, "");
-        build.title = "Data USA - " + d3plus.viz().format(Object).locale.value.visualization[build.config.type] + " of " + build.title;
+        var locale = d3plus.viz().format(Object).locale.value.visualization,
+            type = locale[build.config.type] || d3plus.string.title(type);
+        build.title = "Data USA - " + type + " of " + build.title;
         if (build.profile) {
           var joiner = build.profile_type === "geo" ? " in " : " for ";
           build.title += joiner + build.profile.name;

datausa/assets/scss/elements/_embed.scss

@@ -1,11 +1,4 @@
 .datausa-link {
-  &.hidden {
-    position: absolute;
-    left: -9999px;
-    top: 0;
-    z-index: -9999;
-  }
-
   img {
     display: block;
     width: 90px;

datausa/assets/scss/elements/_map.scss

@@ -3,6 +3,16 @@ body.map {
   overflow: hidden;
   position: relative;
 
+  h2.hidden {
+    font-family: $pathway;
+    font-size: 30px;
+    font-weight: 400;
+    color: #333;
+    text-transform: none;
+    font-style: normal;
+    letter-spacing: 0;
+  }
+
   #d3plus_tooltip_id_geo_map_sidebar {
     @include shadow(none !important);
     z-index: 2 !important;

datausa/assets/scss/site.scss

@@ -26,3 +26,10 @@ body {
 @import "elements/about";
 
 @import "elements/print";
+
+.hidden {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: -9999;
+}

datausa/html/map/index.html

@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block body %}
-
+<h2 class="embed-title hidden">Map Title</h2>
 <div id="map-controls">
   <div id="map-filters">
     <!-- <select id="map-datasets">
@@ -42,7 +42,7 @@
 {% block js %}
 <script>
 
-  var dataset = "{{ defaultDataset }}", data_url;
+  var dataset = "{{ defaultDataset }}", data_url, buildTitle;
 
   var formConfig = {
     "font": vizStyles.ui_map.font,
@@ -153,6 +153,9 @@
       .coords({"key": topo})
       .tooltip(key.split(","));
 
+    buildTitle = viz.format.text(map.color(), {}) + " by " + viz.format.text(level, {});
+    d3.select(".embed-title").html(buildTitle);
+
     data_url = api + url;
 
     load("/static/topojson/" + topo + ".json", function(coords){
@@ -209,7 +212,7 @@
     location.href,
     {
       "container": container,
-      "title": "Data USA - Map of " + viz.format.text(map.color(), {}) + " by " + viz.format.text(levels.focus(), {}),
+      "title": "Data USA - Map of " + buildTitle,
       "data": [{"url": data_url}],
       "viz": map
     })

datausa/html/templates/includes/topic.html

@@ -8,7 +8,7 @@ <h1 class="category"><a href="#{{ category_slug }}" name="{{ category_slug }}">{
 {% if topic.items()|length > 1 or "category" not in topic %}
 <article class="topic{% if topic.class %} {{ topic.class }}{% endif %}{% if not content %} short{% endif %}">
   {% if topic.title %}
-  <h2><a href="#{{ topic.slug }}" name="{{ topic.slug }}">{{ topic.title|safe }}</a>{% if topic.viz %} <a href="#" title="Share" class="share-embed btn pri-btn data-btn" data-target-id="share" data-embed="{{ profile.url(full=True, topic=topic.slug, as_hash=True) }}" data-url="{{ profile.url(full=True, section=section.anchor, topic=topic.slug) }}"><span>Options</span></a>{% endif %}</h2>
+  <h2 class="embed-title"><a href="#{{ topic.slug }}" name="{{ topic.slug }}">{{ topic.title|safe }}</a>{% if topic.viz %} <a href="#" title="Share" class="share-embed btn pri-btn data-btn" data-target-id="share" data-embed="{{ profile.url(full=True, topic=topic.slug, as_hash=True) }}" data-url="{{ profile.url(full=True, section=section.anchor, topic=topic.slug) }}"><span>Options</span></a>{% endif %}</h2>
   {% endif %}
   {% if not aside and topic.subtitle %}
   <div class="sub sub-title">{{ topic.subtitle|safe }}</div>

datausa/static/css/site.css

@@ -3,6 +3,12 @@
     position: relative; }
     body.open {
       overflow: hidden; }
+
+  .hidden {
+    position: absolute;
+    left: -9999px;
+    top: 0;
+    z-index: -9999; }
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
 p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
 em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
@@ -5651,14 +5657,9 @@ body.redirect nav {
             -ms-flex: 1 1 auto;
             flex: 1 1 auto;   }
 }
-.datausa-link.hidden {
-  position: absolute;
-  left: -9999px;
-  top: 0;
-  z-index: -9999; }
-  .datausa-link img {
-    display: block;
-    width: 90px; }
+.datausa-link img {
+  display: block;
+  width: 90px; }
 
 body.embed {
   overflow: hidden; }
@@ -5715,13 +5716,21 @@ body.map {
   background-color: #cdd1d3;
   overflow: hidden;
   position: relative; }
-  body.map #d3plus_tooltip_id_geo_map_sidebar {
-    -webkit-box-shadow: none !important;
-    -moz-box-shadow: none !important;
-    box-shadow: none !important;
-    z-index: 2 !important; }
-    body.map #d3plus_tooltip_id_geo_map_sidebar .d3plus_tooltip_container {
-      background-color: transparent !important; }
+  body.map h2.hidden {
+    font-family: "Pathway Gothic One", sans-serif;
+    font-size: 30px;
+    font-weight: 400;
+    color: #333;
+    text-transform: none;
+    font-style: normal;
+    letter-spacing: 0; }
+    body.map #d3plus_tooltip_id_geo_map_sidebar {
+      -webkit-box-shadow: none !important;
+      -moz-box-shadow: none !important;
+      box-shadow: none !important;
+      z-index: 2 !important; }
+      body.map #d3plus_tooltip_id_geo_map_sidebar .d3plus_tooltip_container {
+        background-color: transparent !important; }
 
 #map-controls {
   -webkit-box-sizing: border-box;