energy-visualization-sankey 1.0.1 → 1.0.3

package/LICENSE

@@ -19,3 +19,4 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+

package/README.md

@@ -14,7 +14,6 @@ across historical energy data.
 - [Data Format](#data-format)
 - [Architecture](#architecture)
 - [Development](#development)
-- [Examples](#examples)
 - [Browser Support](#browser-support)
 - [Contributing](#contributing)
 - [License](#license)
@@ -73,14 +72,8 @@ npm install energy-visualization-sankey
 For quick prototyping or simple integration, use the standalone build that includes D3:
 
 ```html
-<!-- Standalone ES Module (recommended for modern browsers) -->
-<script type="module">
-    import Sankey from './dist/sankey.standalone.esm.js';
-    // Your code here
-</script>
-
 <!-- Standalone UMD (compatible with older browsers) -->
-<script src="./dist/sankey.standalone.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/energy-visualization-sankey@1.0.1/dist/sankey.standalone.esm.js"></script>
 <script>
     const sankey = new Sankey('container', options);
 </script>
@@ -93,7 +86,7 @@ If you already have D3 v7 in your project:
 ```html
 
 <script src="https://d3js.org/d3.v7.min.js"></script>
-<script src="./dist/sankey.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/energy-visualization-sankey@1.0.1/dist/sankey.umd.js"></script>
 ```
 
 ## Quick Start
@@ -150,7 +143,7 @@ const sankey = new Sankey('sankey-container', {
 <div id="sankey-container"></div>
 
 <script type="module">
-    import Sankey from './dist/sankey.standalone.esm.js';
+    import Sankey from 'https://cdn.jsdelivr.net/npm/energy-visualization-sankey@1.0.1/dist/sankey.standalone.esm.js';
     // Initialize as shown above
 </script>
 </body>
@@ -406,40 +399,6 @@ src/
 └── index.ts                    # Public API exports
 ```
 
-## Examples
-
-### Working Examples
-
-See the `examples/` directory for complete working examples:
-
-- **examples/data-us.html** - US energy data visualization (1800-2021)
-- **examples/data-china.html** - China energy data visualization
-- **examples/visual-test.html** - Visual testing interface
-
-### Running Examples
-
-```bash
-npm run serve
-# Open http://localhost:8080/examples/data-us.html
-```
-
-### Custom Data Example
-
-```typescript
-// Load your own energy dataset
-fetch('./my-energy-data.json')
-    .then(response => response.json())
-    .then(energyData => {
-        const sankey = new Sankey('my-container', {
-            data: energyData,
-            country: "My Country",
-            includeControls: true,
-            animationSpeed: 150,
-            autoPlay: true
-        });
-    });
-```
-
 ## Browser Support
 
 | Browser           | Minimum Version | Notes                                   |
@@ -463,7 +422,7 @@ fetch('./my-energy-data.json')
 ### Development Setup
 
 1. Fork the repository
-2. Clone your fork: `git clone https://github.com/appdev-rcc/energy-visualization-sankey.git`
+2. Clone your fork
 3. Install dependencies: `npm install`
 4. Create a feature branch: `git checkout -b feature/your-feature`
 5. Make your changes with tests

package/dist/core/Sankey.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sankey.d.ts","sourceRoot":"","sources":["../../src/core/Sankey.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAA6D,aAAa,EAAC,MAAM,SAAS,CAAC;AAavG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,MAAM;IAIvB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAW;IAKpC,OAAO,CAAC,QAAQ,CAoBT;IAMP,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAc;IACxC,OAAO,CAAC,GAAG,CAA+B;IAC1C,OAAO,CAAC,OAAO,CAA+B;IAM9C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAgB;IACxC,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,gBAAgB,CAAU;IAClC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAS;IAKhC,OAAO,CAAC,aAAa,CAA2B;gBAEpC,WAAW,EAAE,MAAM,GAAG,WAAW,EAAE,OAAO,EAAE,aAAa;IAuBrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoDG;YACW,UAAU;IA4HxB;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;YACW,0BAA0B;IAcxC;;;;;;;;;;;;;OAaG;YACW,kBAAkB;IAqBhC;;;;;;;;;;;;;;;;OAgBG;YACW,yBAAyB;IAmBvC;;OAEG;YACW,uBAAuB;IAcrC;;;OAGG;YACW,sBAAsB;IAgBpC;;;OAGG;YACW,yBAAyB;IAcvC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAoB7B;;;OAGG;IACH,OAAO,CAAC,UAAU;IAwElB;;OAEG;YACW,oBAAoB;IAsClC;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAyDtB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA6B3B;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAejC;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAqBjC;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;;OAGG;IACI,IAAI,IAAI,IAAI;IAUnB;;;OAGG;IACI,KAAK,IAAI,IAAI;IAUpB;;;;OAIG;IACI,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAUlC;;;OAGG;IACI,cAAc,IAAI,MAAM;IAW/B;;;OAGG;IACI,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUpC;;;OAGG;IACI,SAAS,IAAI,OAAO;IAQ3B;;;OAGG;IACI,aAAa,IAAI,OAAO;IAI/B;;;OAGG;IACI,QAAQ,IAAI,SAAS,MAAM,EAAE;IAIpC;;;OAGG;IACI,cAAc,IAAI,GAAG;IAI5B;;;OAGG;IACI,eAAe,IAAI,IAAI;IAwB9B;;;OAGG;IACI,kBAAkB,IAAI,OAAO;IAIpC;;;OAGG;IACI,OAAO,IAAI,IAAI;IAyCtB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,qBAAqB;IAmB7B,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,wBAAwB;CAgBnC"}
+{"version":3,"file":"Sankey.d.ts","sourceRoot":"","sources":["../../src/core/Sankey.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAA6D,aAAa,EAAC,MAAM,SAAS,CAAC;AAavG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,MAAM;IAIvB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAW;IAKpC,OAAO,CAAC,QAAQ,CAoBT;IAMP,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAc;IACxC,OAAO,CAAC,GAAG,CAA+B;IAC1C,OAAO,CAAC,OAAO,CAA+B;IAM9C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAgB;IACxC,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,gBAAgB,CAAU;IAClC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAS;IAKhC,OAAO,CAAC,aAAa,CAA2B;gBAEpC,WAAW,EAAE,MAAM,GAAG,WAAW,EAAE,OAAO,EAAE,aAAa;IAuBrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoDG;YACW,UAAU;IA4HxB;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;YACW,0BAA0B;IAcxC;;;;;;;;;;;;;OAaG;YACW,kBAAkB;IAqBhC;;;;;;;;;;;;;;;;OAgBG;YACW,yBAAyB;IAmBvC;;OAEG;YACW,uBAAuB;IAcrC;;;OAGG;YACW,sBAAsB;IAgBpC;;;OAGG;YACW,yBAAyB;IAcvC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAoB7B;;;OAGG;IACH,OAAO,CAAC,UAAU;IAyGlB;;OAEG;YACW,oBAAoB;IAsClC;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAyDtB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA6B3B;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAejC;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAqBjC;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;;OAGG;IACI,IAAI,IAAI,IAAI;IAUnB;;;OAGG;IACI,KAAK,IAAI,IAAI;IAUpB;;;;OAIG;IACI,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAUlC;;;OAGG;IACI,cAAc,IAAI,MAAM;IAW/B;;;OAGG;IACI,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUpC;;;OAGG;IACI,SAAS,IAAI,OAAO;IAQ3B;;;OAGG;IACI,aAAa,IAAI,OAAO;IAI/B;;;OAGG;IACI,QAAQ,IAAI,SAAS,MAAM,EAAE;IAIpC;;;OAGG;IACI,cAAc,IAAI,GAAG;IAI5B;;;OAGG;IACI,eAAe,IAAI,IAAI;IAwB9B;;;OAGG;IACI,kBAAkB,IAAI,OAAO;IAIpC;;;OAGG;IACI,OAAO,IAAI,IAAI;IAyCtB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,qBAAqB;IAmB7B,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,wBAAwB;CAgBnC"}

package/dist/index.d.ts

@@ -13,7 +13,7 @@
  *
  * @author Research Computing Center (RCC), University of Chicago
  */
-export { default } from '@/core/Sankey';
 export type { SankeyOptions, EnergyDataPoint, SummaryData, GraphData, YearTotals, BoxMaxes, BoxTops } from '@/types/index';
 export { SankeyError, DataValidationError } from '@/types/index';
+export { default as default } from '@/core/Sankey';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AAGtC,YAAY,EACR,aAAa,EACb,eAAe,EACf,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAQ,EACR,OAAO,EACV,MAAM,eAAe,CAAC;AAGvB,OAAO,EACH,WAAW,EACX,mBAAmB,EACtB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,YAAY,EACR,aAAa,EACb,eAAe,EACf,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAQ,EACR,OAAO,EACV,MAAM,eAAe,CAAC;AAGvB,OAAO,EACH,WAAW,EACX,mBAAmB,EACtB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,OAAO,IAAI,OAAO,EAAC,MAAM,eAAe,CAAC"}

package/dist/sankey.esm.js

@@ -728,6 +728,21 @@ class ConfigurationService {
         };
         return fallbackNames[fuel] || fuel.charAt(0).toUpperCase() + fuel.slice(1);
     }
+    /**
+     * Get responsive header dimensions for current container width
+     */
+    getResponsiveHeaderInfo() {
+        const containerWidth = this.WIDTH;
+        const isNarrow = containerWidth < 1024;
+        const isMobile = containerWidth < 768;
+        const animationScale = isMobile ? 0.85 : 1;
+        return {
+            containerWidth,
+            isNarrow,
+            isMobile,
+            animationScale
+        };
+    }
     /**
      * Get human-readable display name for sector/box
      */
@@ -2357,69 +2372,72 @@ class RenderingService {
             .y((d) => d.y);
     }
     /**
-     * Draws the main title, subtitle, and affiliations in separate title container
+     * Draws the animated header elements (year and energy units) as separate SVG overlays
      */
     drawHeader() {
-        // Use separate title container
-        const titleContainer = d3.select('.title_container')
-            .style('height', '58px');
-        const titleSvg = titleContainer
+        // Create Energy Usage Overlay in the title section
+        this.createEnergyUsageOverlay();
+        // Create Year Overlay in separate year section
+        this.createYearOverlay();
+    }
+    /**
+     * Creates the energy usage SVG overlay in the title section
+     */
+    createEnergyUsageOverlay() {
+        const energyContainer = d3.select('.energy-usage-overlay');
+        const energySvg = energyContainer
             .append('svg')
-            .attr('id', 'title')
-            .attr('width', this.configService.WIDTH)
-            .attr('height', 58);
-        const country = this.configService.options.country;
-        // Draw title of graph
-        const svg_title = titleSvg.append('text')
-            .text(`${country} energy usage`)
-            .attr('text-anchor', 'end')
-            .attr('x', this.configService.ELEC_BOX_X - 10)
-            .attr('y', '1.5em')
-            .attr('class', 'title');
-        // Draw units of graph (will be populated by animation)
-        svg_title.append('tspan')
+            .attr('id', 'energy-usage-overlay')
+            .attr('class', 'energy-svg-overlay')
+            .style('position', 'absolute')
+            .style('top', '0')
+            .style('left', '25%')
+            .style('width', '100%')
+            .style('height', '25px')
+            .style('pointer-events', 'none')
+            .style('overflow', 'visible');
+        // Draw energy usage units (will be populated by animation)
+        energySvg.append('text')
             .text('0 W/capita') // Will be updated by animation to show actual energy usage
-            .attr('text-anchor', 'end')
-            .attr('x', this.configService.ELEC_BOX_X - 13)
-            .attr('dy', '1.4em')
+            .attr('text-anchor', 'right')
+            .attr('x', 0)
+            .attr('y', 18)
             .attr('class', 'unit year-total animate title-bottom')
             .attr('data-incr', '0')
-            .attr('data-value', '0');
-        // Draw year (will be populated by animation)
+            .attr('data-value', '0')
+            .style('font-size', '0.9em')
+            .style('font-weight', 'bold');
+    }
+    /**
+     * Creates the year SVG overlay in the year section
+     */
+    createYearOverlay() {
         const firstYear = this.dataService.firstYear;
-        const lastYear = this.dataService.lastYear;
-        svg_title.append('tspan')
+        const yearContainer = d3.select('.year-overlay');
+        const yearSvg = yearContainer
+            .append('svg')
+            .attr('id', 'year-overlay')
+            .attr('class', 'year-svg-overlay')
+            .style('position', 'absolute')
+            .style('top', '0')
+            .style('left', '0')
+            .style('width', '100%')
+            .style('height', '100%')
+            .style('pointer-events', 'none')
+            .style('overflow', 'visible');
+        // Draw year (will be populated by animation)
+        yearSvg.append('text')
             .text(firstYear.toString())
-            .attr('text-anchor', 'start')
-            .attr('x', this.configService.ELEC_BOX_X)
-            .attr('dy', '0em')
+            .attr('text-anchor', 'middle')
+            .attr('x', '50%')
+            .attr('y', '90%')
             .attr('class', 'year animate')
             .attr('data-incr', '0')
-            .attr('data-value', firstYear);
-        // Add subtitle
-        titleSvg.append('text')
-            .text(`Energy Transitions in ${country} History, ${firstYear}-${lastYear}`)
-            .attr('x', this.configService.ELEC_BOX_X + this.configService.BOX_WIDTH + 25)
-            .attr('y', '1.5em')
-            .attr('class', 'affiliation')
-            .append('tspan')
-            .text('Suits, Matteson, and Moyer (2020)')
-            .attr('class', 'affiliation-bottom')
-            .attr('x', this.configService.ELEC_BOX_X + this.configService.BOX_WIDTH + 25)
-            .attr('dy', '1.4em');
-        // Draw affiliations
-        const affiliationX = this.configService.ELEC_BOX_X + this.configService.BOX_WIDTH +
-            (this.configService.WIDTH - (this.configService.ELEC_BOX_X + this.configService.BOX_WIDTH)) / 2 + 50;
-        titleSvg.append('text')
-            .text('Center for Robust Decision-making on')
-            .attr('x', affiliationX)
-            .attr('y', '1.5em')
-            .attr('class', 'affiliation')
-            .append('tspan')
-            .text('Climate and Energy Policy, UChicago')
-            .attr('class', 'affiliation-bottom')
-            .attr('x', affiliationX)
-            .attr('dy', '1.4em');
+            .attr('data-value', firstYear)
+            .style('font-size', '3.1em')
+            .style('font-weight', 'bold')
+            .style('letter-spacing', '0.05em')
+            .style('font-variant-numeric', 'tabular-nums');
     }
     /**
      * Draw Fuel Source Labels - Left Column Energy Source Visualization
@@ -3114,9 +3132,48 @@ class Sankey {
      * Creates the DOM structure needed for controls, timeline, and chart display
      */
     injectHTML() {
+        const country = this.options.country;
+        const firstYear = this.services.dataService.firstYear;
+        const lastYear = this.services.dataService.lastYear;
         let html = `
-      <div class="us-energy-sankey-wrapper">
-        <div class="sankey" style="line-height: 0;"></div>
+        <div class="title_container">
+            <div class="header-content">
+                <div class="header-logo">
+                    <a href="https://www.rdcep.org/" target="_blank">
+                        <img src="https://images.squarespace-cdn.com/content/v1/54dcfad0e4b0eaff5e0068bf/1446137765478-FX9WM00VV1LWAFUJRZBI/rdcep+sig2.png"
+                        alt="The Center for Robust Decision-making on Climate and Energy Policy (RDCEP)"
+                        title="The Center for Robust Decision-making on Climate and Energy Policy (RDCEP)">
+                    </a>
+                </div>
+                
+                <div class="header-main">
+                    <div class="header-title-section">
+                        <h1 class="main-title">${country} energy usage</h1>
+                        <div class="energy-usage-overlay">
+                            <!-- SVG overlay for energy usage will be positioned here -->
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="header-year">
+                    <div class="year-overlay">
+                        <!-- SVG overlay for animated year will be positioned here -->
+                    </div>
+                </div>
+                
+                <div class="header-info">
+                    <div class="subtitle">Energy Transitions in ${country} History, ${firstYear}-${lastYear}</div>
+                    <div class="attribution">Suits, Matteson, and Moyer (2020)</div>
+                </div>
+                
+                <div class="header-affiliation">
+                    <div class="affiliation-text">Center for Robust Decision-making on</div>
+                    <div class="affiliation-text">Climate and Energy Policy, UChicago</div>
+                </div>
+            </div>
+        </div>
+        <div class="us-energy-sankey-wrapper">
+            <div class="sankey" style="line-height: 0;"></div>
     `;
         if (this.options.includeTimeline) {
             html += `
@@ -3161,12 +3218,6 @@ class Sankey {
             html += `<div id="dialog" title="" style="display: none;"></div>`;
         }
         this.container.innerHTML = html;
-        // Add title container
-        if (!document.querySelector('.title_container')) {
-            const titleContainer = document.createElement('div');
-            titleContainer.className = 'title_container';
-            this.container.insertBefore(titleContainer, this.container.firstChild);
-        }
         // Set initial waste heat visibility state
         const sankeyContainer = this.container.querySelector('.sankey');
         if (sankeyContainer) {