d3blocks 2.0.0__tar.gz → 2.2.0__tar.gz

{d3blocks-2.0.0 → d3blocks-2.2.0}/MANIFEST.in

@@ -14,5 +14,6 @@ include d3blocks/circlepacking/d3js/*
 include d3blocks/maps/d3js/*
 include d3blocks/elasticgraph/d3js/*
 include d3blocks/radialgraph/d3js/*
+include d3blocks/flowgraph/d3js/*
 include d3blocks/*
 recursive-include d3blocks/skills *

{d3blocks-2.0.0/d3blocks.egg-info → d3blocks-2.2.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: d3blocks
-Version: 2.0.0
+Version: 2.2.0
 Summary: Python package d3blocks.
 Author-email: Erdogan Taskesen <erdogant@gmail.com>
 License-Expression: GPL-3.0-or-later
@@ -20,7 +20,7 @@ License-File: LICENSE
 Requires-Dist: numpy
 Requires-Dist: colourmap>=1.1.10
 Requires-Dist: datazets>=0.1.7
-Requires-Dist: d3graph>=3.0.0
+Requires-Dist: d3graph>=3.2.0
 Requires-Dist: ismember>=1.0.1
 Requires-Dist: pandas
 Requires-Dist: tqdm
@@ -42,7 +42,7 @@ Dynamic: license-file
 [![Medium](https://img.shields.io/badge/Medium-Blog-black)](https://d3blocks.github.io/d3blocks/pages/html/Documentation.html#medium-blog)
 ![GitHub Repo stars](https://img.shields.io/github/stars/d3blocks/d3blocks)
 ![GitHub repo size](https://img.shields.io/github/repo-size/d3blocks/d3blocks)
-[![Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://d3blocks.github.io/d3blocks/pages/html/Documentation.html#colab-notebook)
+[![Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://github.com/d3blocks/d3blocks/blob/main/notebooks/d3blocks.ipynb)
 [![Donate](https://img.shields.io/badge/Support%20this%20project-grey.svg?logo=github%20sponsors)](https://d3blocks.github.io/d3blocks/pages/html/Documentation.html#)
 
 ### 
@@ -117,6 +117,7 @@ The [documentation pages](https://d3blocks.github.io/d3blocks/) contains detaile
 |  14 | [Tree](https://d3blocks.github.io/d3blocks/pages/html/Tree.html)                   | ``` d3.tree()  ```           | [D3Blocks](https://erdogant.medium.com) |
 |  15 | [Maps](https://d3blocks.github.io/d3blocks/pages/html/Maps.html)                   | ``` d3.maps()  ```           | [D3Blocks](https://erdogant.medium.com) |
 |  16 | [Circlepacking](https://d3blocks.github.io/d3blocks/pages/html/Circlepacking.html) | ``` d3.circlepacking()  ```  | [D3Blocks](https://erdogant.medium.com) |
+|  17 | [Flowgraph](https://d3blocks.github.io/d3blocks/pages/html/Flowgraph.html)         | ``` d3.flowgraph()  ```      | [D3Blocks](https://erdogant.medium.com) |
 
 -------------------------------------------------------------------------
 
@@ -147,6 +148,8 @@ d3 = D3Blocks()
 When HTMLs are generated, it automatically include ethical ads as a small way to support development. 
 This entire project with maintenance is done thoughtfully and only in my free time. Ads can be disabled via an input parameter, and you can also support the project with a coffee donation instead.
 
+### Star history
+[![Star History Chart](https://star-history.dera.page/svg?repos=d3blocks/d3blocks)](https://star-history.dera.page/d3blocks/d3blocks)
 
 ### References
 * [bl.ocks](https://bl.ocks.org/)

{d3blocks-2.0.0 → d3blocks-2.2.0}/README.md

@@ -11,7 +11,7 @@
 [![Medium](https://img.shields.io/badge/Medium-Blog-black)](https://d3blocks.github.io/d3blocks/pages/html/Documentation.html#medium-blog)
 ![GitHub Repo stars](https://img.shields.io/github/stars/d3blocks/d3blocks)
 ![GitHub repo size](https://img.shields.io/github/repo-size/d3blocks/d3blocks)
-[![Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://d3blocks.github.io/d3blocks/pages/html/Documentation.html#colab-notebook)
+[![Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://github.com/d3blocks/d3blocks/blob/main/notebooks/d3blocks.ipynb)
 [![Donate](https://img.shields.io/badge/Support%20this%20project-grey.svg?logo=github%20sponsors)](https://d3blocks.github.io/d3blocks/pages/html/Documentation.html#)
 
 ### 
@@ -86,6 +86,7 @@ The [documentation pages](https://d3blocks.github.io/d3blocks/) contains detaile
 |  14 | [Tree](https://d3blocks.github.io/d3blocks/pages/html/Tree.html)                   | ``` d3.tree()  ```           | [D3Blocks](https://erdogant.medium.com) |
 |  15 | [Maps](https://d3blocks.github.io/d3blocks/pages/html/Maps.html)                   | ``` d3.maps()  ```           | [D3Blocks](https://erdogant.medium.com) |
 |  16 | [Circlepacking](https://d3blocks.github.io/d3blocks/pages/html/Circlepacking.html) | ``` d3.circlepacking()  ```  | [D3Blocks](https://erdogant.medium.com) |
+|  17 | [Flowgraph](https://d3blocks.github.io/d3blocks/pages/html/Flowgraph.html)         | ``` d3.flowgraph()  ```      | [D3Blocks](https://erdogant.medium.com) |
 
 -------------------------------------------------------------------------
 
@@ -116,6 +117,8 @@ d3 = D3Blocks()
 When HTMLs are generated, it automatically include ethical ads as a small way to support development. 
 This entire project with maintenance is done thoughtfully and only in my free time. Ads can be disabled via an input parameter, and you can also support the project with a coffee donation instead.
 
+### Star history
+[![Star History Chart](https://star-history.dera.page/svg?repos=d3blocks/d3blocks)](https://star-history.dera.page/d3blocks/d3blocks)
 
 ### References
 * [bl.ocks](https://bl.ocks.org/)

{d3blocks-2.0.0 → d3blocks-2.2.0}/d3blocks/__init__.py

@@ -10,7 +10,7 @@ from d3blocks.utils import (
 
 __author__ = 'Erdogan Taskesen'
 __email__ = 'erdogant@gmail.com'
-__version__ = '2.0.0'
+__version__ = '2.2.0'
 
 # Setup root logger
 import logging

{d3blocks-2.0.0 → d3blocks-2.2.0}/d3blocks/chord/Chord.py

@@ -12,9 +12,9 @@ import numpy as np
 from jinja2 import Environment, PackageLoader
 
 try:
-    from .. utils import set_colors, pre_processing, convert_dataframe_dict, set_path, update_config, set_labels, create_unique_dataframe, write_html_file, include_save_to_svg_script, set_logo
+    from .. utils import set_colors, pre_processing, convert_dataframe_dict, set_path, update_config, set_labels, create_unique_dataframe, write_html_file, include_save_to_svg_script, set_logo, resolve_color_background
 except:
-    from utils import set_colors, pre_processing, convert_dataframe_dict, set_path, update_config, set_labels, create_unique_dataframe, write_html_file, include_save_to_svg_script, set_logo
+    from utils import set_colors, pre_processing, convert_dataframe_dict, set_path, update_config, set_labels, create_unique_dataframe, write_html_file, include_save_to_svg_script, set_logo, resolve_color_background
 
 # %% Set configuration properties
 def set_config(config={}, **kwargs):
@@ -34,8 +34,12 @@ def set_config(config={}, **kwargs):
     config['save_button'] = kwargs.get('save_button', True)
     config['margin'] = kwargs.get('margin', 150)  # Margin around the chord diagram
     config['text_offset'] = kwargs.get('text_offset', 5)  # Additional offset for text labels
-    config['show_controls'] = kwargs.get('show_controls', True)  # Show the top bar and left control panels
-    config['dark_mode'] = kwargs.get('dark_mode', True)  # Start in dark theme
+    # [dark_hex, light_hex] for center / top panel / side panels per theme.
+    # None → defaults matching chord.css (--bg dark #222, light #fff).
+    config['color_background'] = kwargs.get('color_background', None)
+    config['dark_mode'] = kwargs.get('dark_mode', True)
+    config['show_side_panel'] = kwargs.get('show_side_panel', True)
+    config['show_top_panel'] = kwargs.get('show_top_panel', True)
     # return
     return config
 
@@ -285,8 +289,17 @@ def write_html(X, config, logger=None):
     else:
         ORDERING_MODE = 'none'
 
+    # Ensure new GUI keys have defaults (backwards compatible)
+    show_side_panel = config.get('show_side_panel', True)
+    show_top_panel = config.get('show_top_panel', True)
+    dark_mode = config.get('dark_mode', True)
+    bg_dark, bg_light = resolve_color_background(config.get('color_background', None))
+
     content = {
         'json_data': X,
+        'COLOR_BACKGROUND_DARK': bg_dark,
+        'COLOR_BACKGROUND_LIGHT': bg_light,
+        'darkMode': 'true' if dark_mode else 'false',
         'TITLE': config['title'],
         'WIDTH': config['figsize'][0],
         'HEIGHT': config['figsize'][1],
@@ -300,8 +313,8 @@ def write_html(X, config, logger=None):
         'SAVE_TO_SVG_SCRIPT': save_script,
         'SAVE_BUTTON_START': show_save_button[0],
         'SAVE_BUTTON_STOP': show_save_button[1],
-        'showControls': 'true' if config.get('show_controls', True) else 'false',
-        'darkMode': 'true' if config.get('dark_mode', True) else 'false',
+        'showSidePanel': 'true' if show_side_panel else 'false',
+        'showTopPanel': 'true' if show_top_panel else 'false',
         'LOGO_BASE64': config['logo_base64'],
     }
 

{d3blocks-2.0.0 → d3blocks-2.2.0}/d3blocks/chord/d3js/chord.css

@@ -187,6 +187,10 @@ html, body {
   transition: var(--transition);
   pointer-events: none;
 }
+/* Light mode: no drop shadow so a white/light bar does not sit under a dark shadow. */
+body.light .top-panel {
+  box-shadow: none;
+}
 .top-panel .top-panel-left {
   pointer-events: none;
   justify-self: start;

{d3blocks-2.0.0 → d3blocks-2.2.0}/d3blocks/chord/d3js/chord.html.j2

@@ -14,10 +14,33 @@ Forked      : Mike Bostock; https://observablehq.com/@d3/directed-chord-diagram
     <title>{{ TITLE }}</title>
     {{ SUPPORT }}
     <style>{% include "chord.css" %}</style>
+    <!-- Center + top panel + side panels: per-theme backgrounds.
+         Theme toggle (body.light) switches which color is used. -->
+    <style>
+      body {
+        background: {{ COLOR_BACKGROUND_DARK }};
+      }
+      body .top-panel {
+        background: {{ COLOR_BACKGROUND_DARK }};
+      }
+      body .stats-panel {
+        background: {{ COLOR_BACKGROUND_DARK }};
+      }
+      body.light {
+        background: {{ COLOR_BACKGROUND_LIGHT }};
+      }
+      body.light .top-panel {
+        background: {{ COLOR_BACKGROUND_LIGHT }};
+      }
+      body.light .stats-panel {
+        background: {{ COLOR_BACKGROUND_LIGHT }};
+      }
+    </style>
 </head>
 <body{% if darkMode == 'false' %} class="light"{% endif %}>
 
-<!-- Top panel always shown: logo left, ordering mode center, theme right -->
+{% if showTopPanel == 'true' %}
+<!-- Top panel: logo left, ordering mode center, theme right -->
 <div class="top-panel" role="toolbar" aria-label="Top controls">
   <div class="top-panel-left">
     <a href="https://d3blocks.github.io/d3blocks/" title="D3Blocks">
@@ -25,7 +48,7 @@ Forked      : Mike Bostock; https://observablehq.com/@d3/directed-chord-diagram
     </a>
   </div>
   <div class="top-panel-center">
-{% if showControls == 'true' and ORDERING_MODE != 'custom' %}
+{% if ORDERING_MODE != 'custom' %}
     <div class="mode-row top-mode">
       <label><input type="radio" name="ordering" value="ascending"{% if ORDERING_MODE == 'ascending' %} checked{% endif %}> Ascending</label>
       <label><input type="radio" name="ordering" value="descending"{% if ORDERING_MODE == 'descending' %} checked{% endif %}> Descending</label>
@@ -37,8 +60,9 @@ Forked      : Mike Bostock; https://observablehq.com/@d3/directed-chord-diagram
     <button class="button-switch" id="themeBtn" type="button" title="{% if darkMode == 'false' %}Theme: Light{% else %}Theme: Dark{% endif %}">{% if darkMode == 'false' %}☀{% else %}🌙{% endif %}</button>
   </div>
 </div>
+{% endif %}
 
-{% if showControls == 'true' %}
+{% if showSidePanel == 'true' %}
 <!-- Side panel: Export / Save -->
 <div class="stats-panel collapsed" id="exportPanel">
   <div class="stats-panel-title" draggable="true" title="Drag to reorder panels">Export / Save<span class="stats-panel-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span></div>
@@ -212,15 +236,14 @@ Forked      : Mike Bostock; https://observablehq.com/@d3/directed-chord-diagram
     }
 
     // Top bar clearance + side panels: position, collapse, reorder
-    // Always clear the top panel — even when show_controls is false (no side panels).
+    // When top panel is absent, treat its height as 0 (do not return early).
     (function() {
       var PANEL_ORDER = ['exportPanel', 'appearancePanel', 'physicsPanel'];
 
       function positionSidePanels() {
         var bar = document.querySelector('.top-panel');
         var main = document.getElementById('chord-main');
-        if (!bar) return;
-        var bottom = bar.getBoundingClientRect().bottom;
+        var bottom = bar ? bar.getBoundingClientRect().bottom : 0;
         if (main) main.style.marginTop = (bottom + 12) + 'px';
         var y = bottom + 8;
         var bottomPad = 12;

{d3blocks-2.0.0 → d3blocks-2.2.0}/d3blocks/circlepacking/Circlepacking.py

@@ -9,9 +9,9 @@ License     : GPL3
 from jinja2 import Environment, PackageLoader
 
 try:
-    from .. utils import convert_dataframe_dict, set_path, pre_processing, update_config, set_labels, write_html_file, is_circular, include_save_to_svg_script, set_logo
+    from .. utils import convert_dataframe_dict, set_path, pre_processing, update_config, set_labels, write_html_file, is_circular, include_save_to_svg_script, set_logo, resolve_color_background
 except:
-    from utils import convert_dataframe_dict, set_path, pre_processing, update_config, set_labels, write_html_file, is_circular, include_save_to_svg_script, set_logo
+    from utils import convert_dataframe_dict, set_path, pre_processing, update_config, set_labels, write_html_file, is_circular, include_save_to_svg_script, set_logo, resolve_color_background
 
 
 # %% Set configuration properties
@@ -34,8 +34,11 @@ def set_config(config={}, margin={}, font={}, border={}, **kwargs):
     config['border'] = {**{'color': '#FFFFFF', 'width': 1.5, 'fill': '#FFFFFF', "padding": 5}, **border}
     config['notebook'] = kwargs.get('notebook', False)
     config['save_button'] = kwargs.get('save_button', True)
-    config['show_controls'] = kwargs.get('show_controls', True)
+    # UI conventions (aligned with scatter)
+    config['show_side_panel'] = kwargs.get('show_side_panel', True)
+    config['show_top_panel'] = kwargs.get('show_top_panel', True)
     config['dark_mode'] = kwargs.get('dark_mode', True)
+    config['color_background'] = kwargs.get('color_background', None)
     # return
     return config
 
@@ -184,9 +187,11 @@ def write_html(X, config, node_properties, logger=None):
     width = 'window.screen.width' if config['figsize'][0] is None else config['figsize'][0]
     height = 'window.screen.height' if config['figsize'][1] is None else config['figsize'][1]
 
-    # Jinja expects lowercase 'true'/'false' JSON-style strings for template conditionals
-    show_controls = 'true' if config.get('show_controls', True) else 'false'
-    dark_mode = 'true' if config.get('dark_mode', True) else 'false'
+    # UI flags as lowercase 'true'/'false' for Jinja conditionals
+    show_side_panel = config.get('show_side_panel', True)
+    show_top_panel = config.get('show_top_panel', True)
+    dark_mode = config.get('dark_mode', True)
+    bg_dark, bg_light = resolve_color_background(config.get('color_background', None))
 
     content = {
         'json_data': X,
@@ -208,8 +213,11 @@ def write_html(X, config, node_properties, logger=None):
         'SAVE_TO_SVG_SCRIPT': save_script,
         'SAVE_BUTTON_START': show_save_button[0],
         'SAVE_BUTTON_STOP': show_save_button[1],
-        'showControls': show_controls,
-        'darkMode': dark_mode,
+        'showSidePanel': 'true' if show_side_panel else 'false',
+        'showTopPanel': 'true' if show_top_panel else 'false',
+        'darkMode': 'true' if dark_mode else 'false',
+        'COLOR_BACKGROUND_DARK': bg_dark,
+        'COLOR_BACKGROUND_LIGHT': bg_light,
         'LOGO_BASE64': config['logo_base64'],
     }
 

{d3blocks-2.0.0 → d3blocks-2.2.0}/d3blocks/circlepacking/d3js/circlepacking.css

@@ -54,7 +54,7 @@ html, body {
   overflow: hidden;
 }
 /* Leave room for the fixed top panel so the chart is not clipped under it */
-body.has-controls #circlepacking-container {
+body.has-top-panel #circlepacking-container {
   top: 64px;
 }
 #circlepacking-container svg {
@@ -80,7 +80,7 @@ body.has-controls #circlepacking-container {
   transition: color 0.25s;
 }
 
-/* ==== Side panels (aligned with radialgraph) ==== */
+/* ==== Side panels ==== */
 .stats-panel {
   position: fixed;
   display: flex;
@@ -220,6 +220,10 @@ body.has-controls #circlepacking-container {
   transition: var(--transition);
   pointer-events: none;
 }
+/* Light mode: remove drop shadow so a light bar does not sit under a dark shadow */
+body.light .top-panel {
+  box-shadow: none;
+}
 .top-panel .top-panel-left {
   pointer-events: auto;
   display: flex;
@@ -260,8 +264,21 @@ body.has-controls #circlepacking-container {
 }
 .search-input::placeholder { color: var(--text-muted); }
 .search-input:focus { border-color: #5b9bd5; }
-.top-search { width: 360px; max-width: 50vw; }
-.top-search .search-input { width: 100%; }
+/* Top-bar search: match button-switch padding/font-size; zero bottom margin */
+.top-search {
+  width: 360px;
+  max-width: 50vw;
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+}
+.top-search .search-input {
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 1em;
+  line-height: normal;
+  box-sizing: border-box;
+}
 .search-results {
   position: absolute;
   left: 0;

{d3blocks-2.0.0 → d3blocks-2.2.0}/d3blocks/circlepacking/d3js/circlepacking.html.j2

@@ -13,13 +13,35 @@ Forked      : Mike Bostock; http://bl.ocks.org/mbostock/4063582
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ TITLE }}</title>
   <style>{% include "circlepacking.css" %}</style>
+  <!-- Center + top panel + side panels: per-theme backgrounds.
+       Theme toggle (body.light) switches which color is used. -->
+  <style>
+    body {
+      background: {{ COLOR_BACKGROUND_DARK }};
+    }
+    body .top-panel {
+      background: {{ COLOR_BACKGROUND_DARK }};
+    }
+    body .stats-panel {
+      background: {{ COLOR_BACKGROUND_DARK }};
+    }
+    body.light {
+      background: {{ COLOR_BACKGROUND_LIGHT }};
+    }
+    body.light .top-panel {
+      background: {{ COLOR_BACKGROUND_LIGHT }};
+    }
+    body.light .stats-panel {
+      background: {{ COLOR_BACKGROUND_LIGHT }};
+    }
+  </style>
   <script>{% include "d3.v6.min.js" %}</script>
   <script>{% include "lodash.min.js" %}</script>
   {{ SUPPORT }}
 </head>
-<body class="{% if darkMode == 'false' %}light {% endif %}{% if showControls == 'true' %}has-controls{% endif %}">
+<body class="{% if darkMode == 'false' %}light {% endif %}{% if showTopPanel == 'true' %}has-top-panel{% endif %}">
 
-{% if showControls == 'true' %}
+{% if showTopPanel == 'true' %}
 <div class="top-panel" role="toolbar" aria-label="Top controls">
   <div class="top-panel-left">
     <a href="https://d3blocks.github.io/d3blocks/" title="D3Blocks" target="_blank" rel="noopener noreferrer">
@@ -37,9 +59,11 @@ Forked      : Mike Bostock; http://bl.ocks.org/mbostock/4063582
     <button class="button-switch" id="themeBtn" type="button" title="{% if darkMode == 'false' %}Theme: Light{% else %}Theme: Dark{% endif %}">{% if darkMode == 'false' %}☀{% else %}🌙{% endif %}</button>
   </div>
 </div>
+{% endif %}
 
+{% if showSidePanel == 'true' %}
 <div class="stats-panel collapsed" id="exportPanel">
-  <div class="stats-panel-title" draggable="true" title="Drag to reorder panels">Export<span class="stats-panel-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"></polyline></svg></span></div>
+  <div class="stats-panel-title" draggable="true" title="Drag to reorder panels">Export / Save<span class="stats-panel-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"></polyline></svg></span></div>
   <div class="stats-panel-body">
     <button id="exportDataButton" class="button-switch">Export Data</button>
     {{ SAVE_BUTTON_START }}<button id="saveButton" class="button-switch">Save</button>{{ SAVE_BUTTON_STOP }}
@@ -96,7 +120,8 @@ Forked      : Mike Bostock; http://bl.ocks.org/mbostock/4063582
     fonttype: "{{ fonttype }}",
     fontoutlinecolor: "{{ fontoutlinecolor }}",
     darkMode: {{ darkMode }},
-    showControls: {{ showControls }}
+    showSidePanel: {{ showSidePanel }},
+    showTopPanel: {{ showTopPanel }}
   };
 </script>
 <script>
@@ -333,6 +358,7 @@ Forked      : Mike Bostock; http://bl.ocks.org/mbostock/4063582
   rebuildChart();
 
   // —— Reset view ————————————————————————————————————————————————
+  // No-op when top panel / resetBtn is absent
   const resetBtn = document.getElementById("resetBtn");
   if (resetBtn) {
     resetBtn.addEventListener("click", function () {
@@ -341,6 +367,7 @@ Forked      : Mike Bostock; http://bl.ocks.org/mbostock/4063582
   }
 
   // —— Theme toggle ——————————————————————————————————————————————
+  // No-op when top panel / themeBtn is absent
   const themeBtn = document.getElementById("themeBtn");
   if (themeBtn) {
     themeBtn.addEventListener("click", function () {
@@ -516,6 +543,7 @@ Forked      : Mike Bostock; http://bl.ocks.org/mbostock/4063582
   }
 
   // —— Side panel positioning & collapse / reorder ————————————————
+  // When top bar is absent, treat its height as 0 (do not early-return)
   function positionSidePanels() {
     var panels = Array.from(document.querySelectorAll(".stats-panel"));
     var topPanel = document.querySelector(".top-panel");