Merge pull request #21 from TutteInstitute/aesthetic_changes

Aesthetic changes and improvements

datamapplot/interactive_rendering.py

@@ -27,6 +27,9 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family={{google_font}}&display=swap" rel="stylesheet">
+    {% if google_tooltip_font %}
+    <link href="https://fonts.googleapis.com/css2?family={{google_tooltip_font}}&display=swap" rel="stylesheet">
+    {% endif %}
     {% endif %}
        
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
@@ -264,6 +267,7 @@
         background: true,
         characterSet: "auto",
         fontFamily: "{{font_family}}",
+        fontWeight: {{font_weight}},
         lineHeight: {{line_spacing}},
         fontSettings: {"sdf": true},
         getTextAnchor: "middle",
@@ -368,6 +372,7 @@
 _TOOL_TIP_CSS = """
             font-size: 0.8em;
             font-family: {{title_font_family}};
+            font-weight: {{title_font_weight}};
             color: {{title_font_color}} !important;
             background-color: {{title_background}} !important;
             border-radius: 12px;
@@ -498,15 +503,18 @@ def render_html(
     title_font_size=36,
     sub_title_font_size=18,
     text_collision_size_scale=3,
-    text_min_pixel_size=12,
+    text_min_pixel_size=18,
     text_max_pixel_size=36,
-    font_family="arial",
+    font_family="Roboto",
+    font_weight=900,
+    tooltip_font_family=None,
+    tooltip_font_weight=300,
     logo=None,
     logo_width=256,
     color_label_text=True,
     line_spacing=0.95,
-    min_fontsize=12,
-    max_fontsize=24,
+    min_fontsize=18,
+    max_fontsize=28,
     text_outline_width=8,
     text_outline_color="#eeeeeedd",
     point_hover_color="#aa0000bb",
@@ -581,11 +589,26 @@ def render_html(
         The maximum pixel size of label text. If text would be larger than this in size
         then render the text to be at most this size.
 
-    font_family: str (optional, default="arial")
+    font_family: str (optional, default="Roboto")
         The font family to use for label text and titles. If the font family is a
         google font then the required google font api handling will automatically
         make the font available, so any google font family is acceptable.
 
+    font_weight: str or int (optional, default=900)
+        The font weight to use for the text labels within the plot. Either weight
+        specification such as "thin", "normal", or "bold" or an integer value
+        between 0 (ultra-thin) and 1000 (ultra-black).
+
+    tooltip_font_family: str (optional default="Roboto")
+        The font family to use in tooltips/hover text. If the font family is a
+        google font then the required google font api handling will automatically
+        make the font available, so any google font family is acceptable.
+
+    tooltip_font_weight: str or int (optional, default=400)
+        The font weight to use for the tooltip /hover text within the plot. Either weight
+        specification such as "thin", "normal", or "bold" or an integer value
+        between 0 (ultra-thin) and 1000 (ultra-black).
+
     logo: str or None (optional, default=None)
         A logo image to include in the bottom right corner of the map. This should be
         a URL to the image.
@@ -719,7 +742,7 @@ def render_html(
     """
     # Compute point scaling
     n_points = point_dataframe.shape[0]
-    magic_number = np.clip(32 * 4 ** (-np.log10(n_points)), 0.005, 4)
+    magic_number = np.clip(32 * 4 ** (-np.log10(n_points)), 0.005, 0.1)
     if "size" not in point_dataframe.columns:
         point_size = magic_number
     else:
@@ -825,6 +848,9 @@ def render_html(
             )
         else:
             get_tooltip = "null"
+
+        if on_click is not None:
+            on_click = "({index, picked}, event) => { if (picked) {" + on_click.format_map(replacements) + " } }"
     else:
         hover_data = pd.DataFrame(columns=("hover_text",))
         get_tooltip = "null"
@@ -876,8 +902,9 @@ def render_html(
     if tooltip_css is None:
         tooltip_css_template = jinja2.Template(_TOOL_TIP_CSS)
         tooltip_css = tooltip_css_template.render(
-            title_font_family=font_family,
+            title_font_family=tooltip_font_family or font_family,
             title_font_color=title_font_color,
+            title_font_weight=tooltip_font_weight,
             title_background=title_background,
             shadow_color=shadow_color,
         )
@@ -892,11 +919,19 @@ def render_html(
     resp = requests.get(f"https://fonts.googleapis.com/css?family={api_fontname}")
     if not resp.ok:
         api_fontname = None
+    if tooltip_font_family is not None:
+        api_tooltip_fontname = tooltip_font_family.replace(" ", "+")
+        resp = requests.get(f"https://fonts.googleapis.com/css?family={api_tooltip_fontname}")
+        if not resp.ok:
+            api_tooltip_fontname = None
+    else:
+        api_tooltip_fontname = None
 
     html_str = template.render(
         title=title if title is not None else "Interactive Data Map",
         sub_title=sub_title if sub_title is not None else "",
         google_font=api_fontname,
+        google_tooltip_font=api_tooltip_fontname,
         page_background_color=page_background_color,
         search=enable_search,
         title_font_family=font_family,
@@ -935,6 +970,7 @@ def render_html(
         text_outline_color=[int(c * 255) for c in to_rgba(text_outline_color)],
         text_background_color=text_background_color,
         font_family=font_family,
+        font_weight=font_weight,
         text_collision_size_scale=text_collision_size_scale,
         cluster_boundary_polygons="polygon" in label_dataframe.columns,
         cluster_boundary_line_width=cluster_boundary_line_width,

datamapplot/plot_rendering.py

@@ -154,7 +154,8 @@ def render_plot(
     title=None,
     sub_title=None,
     figsize=(12, 12),
-    fontfamily="DejaVu Sans",
+    font_family="Roboto",
+    font_weight=400,
     label_linespacing=0.95,
     label_font_size=None,
     label_text_colors=None,
@@ -224,8 +225,8 @@ def render_plot(
     figsize: (int, int) (optional, default=(12,12))
         How big to make the figure in inches (actual pixel size will depend on ``dpi``).
 
-    fontfamily: str (optional, default="DejaVu Sans")
-        The fontfamily to use for the plot -- the labels and the title and sub-title
+    font_family: str (optional, default="DejaVu Sans")
+        The font_family to use for the plot -- the labels and the title and sub-title
         unless explicitly over-ridden by title_keywords or sub_title_keywords.
 
     label_linespacing: float (optional, default=0.95)
@@ -353,8 +354,8 @@ def render_plot(
     fig, ax = plt.subplots(figsize=figsize, dpi=dpi, constrained_layout=True)
 
     # Get any google fonts if required
-    get_google_font(fontfamily)
-    get_google_font(fontfamily.split()[0])
+    get_google_font(font_family)
+    get_google_font(font_family.split()[0])
     if title_keywords is not None and "fontfamily" in title_keywords:
         get_google_font(title_keywords["fontfamily"])
         get_google_font(title_keywords["fontfamily"].split()[0])
@@ -416,7 +417,8 @@ def render_plot(
                 label_text_locations,
                 label_text,
                 0.9 * font_scale_factor,
-                fontfamily=fontfamily,
+                fontfamily=font_family,
+                fontweight=font_weight,
                 linespacing=label_linespacing,
                 ax=ax,
             )
@@ -433,8 +435,9 @@ def render_plot(
             label_text_locations,
             label_locations,
             label_text,
-            fontfamily=fontfamily,
+            fontfamily=font_family,
             font_size=font_size,
+            fontweight=font_weight,
             linespacing=label_linespacing,
             highlight=highlight,
             highlight_label_keywords=highlight_label_keywords,
@@ -490,7 +493,7 @@ def render_plot(
                     ma="center",
                     va="center",
                     linespacing=label_linespacing,
-                    fontfamily=fontfamily,
+                    fontfamily=font_family,
                     arrowprops={
                         "arrowstyle": "-",
                         "linewidth": 0.5,
@@ -509,9 +512,9 @@ def render_plot(
                     ),
                     bbox=bbox_keywords if label_text[i] in highlight else None,
                     color=text_color,
-                    fontweight=highlight_label_keywords.get("fontweight", "normal")
+                    fontweight=highlight_label_keywords.get("fontweight", font_weight)
                     if label_text[i] in highlight
-                    else "normal",
+                    else font_weight,
                 )
             )
 
@@ -546,16 +549,18 @@ def render_plot(
             keyword_args = {
                 "fontweight": "light",
                 "color": "gray",
-                "fontsize": (1.2 * font_scale_factor),
-                "fontfamily": fontfamily,
+                "fontsize": (1.6 * font_scale_factor),
+                "fontfamily": font_family,
+                "fontweight": font_weight,
                 **sub_title_keywords,
             }
         else:
             keyword_args = {
                 "fontweight": "light",
                 "color": "gray",
-                "fontsize": (1.2 * font_scale_factor),
-                "fontfamily": fontfamily,
+                "fontsize": (1.6 * font_scale_factor),
+                "fontfamily": font_family,
+                "fontweight": font_weight,
             }
         axis_title = ax.set_title(
             sub_title,
@@ -578,19 +583,19 @@ def render_plot(
                 "color": "white" if darkmode else "black",
                 "ha": "left",
                 "va": "bottom",
-                "fontweight": "bold",
-                "fontsize": int(1.6 * font_scale_factor),
-                "fontfamily": fontfamily,
+                "fontweight": 900,
+                "fontsize": int(3.2 * font_scale_factor),
+                "fontfamily": font_family,
                 **title_keywords,
             }
         else:
             keyword_args = {
                 "color": "white" if darkmode else "black",
                 "ha": "left",
                 "va": "bottom",
-                "fontweight": "bold",
-                "fontsize": int(1.6 * font_scale_factor),
-                "fontfamily": fontfamily,
+                "fontweight": 900,
+                "fontsize": int(3.2 * font_scale_factor),
+                "fontfamily": font_family,
             }
         fig.suptitle(
             title, x=0.0, y=sup_title_y_value, transform=ax.transAxes, **keyword_args

datamapplot/text_placement.py

@@ -137,7 +137,8 @@ def estimate_font_size(
     text_locations,
     label_text,
     initial_font_size,
-    fontfamily="DejaVu Sans",
+    fontfamily="Roboto",
+    fontweight=400,
     linespacing=0.95,
     expand=(1.5, 1.5),
     ax=None,
@@ -158,6 +159,7 @@ def estimate_font_size(
                 linespacing=linespacing,
                 alpha=0.0,
                 fontfamily=fontfamily,
+                fontweight=fontweight,
                 fontsize=font_size,
             )
             for i in range(text_locations.shape[0])
@@ -188,6 +190,7 @@ def adjust_text_locations(
     label_text,
     font_size=12,
     fontfamily="DejaVu Sans",
+    fontweight=400,
     linespacing=0.95,
     expand=(1.5, 1.5),
     max_iter=100,
@@ -219,7 +222,7 @@ def adjust_text_locations(
             + (
                 label_size_adjustments[i] if label_size_adjustments is not None else 0.0
             ),
-            fontweight="bold" if label_text[i] in highlight else "normal",
+            fontweight="bold" if label_text[i] in highlight else fontweight,
         )
         for i in range(label_locations.shape[0])
     ]