soft movements implemented

index.html

@@ -36,14 +36,14 @@
                         <div>
                             <label class="block text-sm text-gray-600 mb-1">Text Position</label>
                             <select id="text-position" class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
-                                <option value="top" selected>Top</option>
-                                <option value="middle">Middle</option>
-                                <option value="bottom">Bottom</option>
+                                <option value="left">Left</option>
+                                <option value="middle" selected>Middle</option>
+                                <option value="right">Right</option>
                             </select>
                         </div>
                         <div>
                             <label class="block text-sm text-gray-600 mb-1">Node Width</label>
-                            <input type="range" id="node-width" min="10" max="50" value="20" class="w-full">
+                            <input type="range" id="node-width" min="10" max="80" value="40" class="w-full">
                         </div>
                         <div>
                             <label class="block text-sm text-gray-600 mb-1">Link Alpha</label>

script.js

@@ -2,8 +2,8 @@
 // Define the d3.sankey layout function
 d3.sankey = function() {
     var sankey = {},
-        nodeWidth = 24,
-        nodePadding = 8,
+        nodeWidth = 100,
+        nodePadding = 80,
         size = [1, 1],
         nodes = [],
         links = [];
@@ -57,8 +57,12 @@ d3.sankey = function() {
         var curvature = .5;
 
         function link(d) {
-            var x0 = d.source.x + d.source.dx,
-                x1 = d.target.x,
+            // Calculate node centers
+            var sourceCenter = d.source.dx / 2,
+                targetCenter = d.target.dx / 2;
+                
+            var x0 = d.source.x + sourceCenter,
+                x1 = d.target.x + targetCenter,
                 xi = d3.interpolateNumber(x0, x1),
                 x2 = xi(curvature),
                 x3 = xi(1 - curvature),
@@ -332,13 +336,40 @@ function initDiagram() {
     const height = baseHeight + textPadding;
     const linkAlpha = parseFloat(document.getElementById('link-alpha').value);
     
+    // Create Sankey generator with increased padding for better distribution
     const sankey = d3.sankey()
         .nodeWidth(parseInt(document.getElementById('node-width').value))
-        .nodePadding(8)
-        .size([width - textPadding, height - textPadding])
-        .nodes(sankeyData.nodes.map(d => Object.assign({}, d)))
-        .links(sankeyData.links.map(d => Object.assign({}, d)))
-        .layout(32); // Increase iterations for better layout
+        .nodePadding(120) // Increased padding for better vertical distribution
+        .size([width - textPadding, height - textPadding]);
+
+    // Create a copy of the data
+    const graph = {
+        nodes: sankeyData.nodes.map(d => Object.assign({}, d)),
+        links: sankeyData.links.map(d => Object.assign({}, d))
+    };
+
+    // Generate initial layout
+    sankey.nodes(graph.nodes).links(graph.links).layout(32);
+
+    // Apply proportional scaling to node heights
+    const nodesByX = d3.groups(graph.nodes, d => d.x);
+    const ky = d3.min(nodesByX, ([x, nodes]) => 
+        (height - (nodes.length - 1) * sankey.nodePadding()) / 
+        d3.sum(nodes, d => d.value)
+    );
+
+    // Apply the scaling to nodes and links
+    graph.nodes.forEach(node => {
+        const nodeHeight = node.value * ky;
+        node.dy = nodeHeight;
+    });
+    
+    graph.links.forEach(link => {
+        link.dy = link.value * ky;
+    });
+
+    // Relayout to apply the new heights
+    sankey.layout(1);
     
     const nodes = sankey.nodes();
     const links = sankey.links();
@@ -370,10 +401,16 @@ function initDiagram() {
             d3.select(this).attr("stroke-opacity", linkAlpha);
         });
 
+    // Filter out nodes that have no connections
+    const connectedNodes = nodes.filter(node => 
+        (node.sourceLinks && node.sourceLinks.length > 0) || 
+        (node.targetLinks && node.targetLinks.length > 0)
+    );
+
     // Add nodes with better styling
     const node = svg.append("g")
         .selectAll("g")
-        .data(nodes)
+        .data(connectedNodes)
         .join("g")
         .attr("transform", d => `translate(${d.x},${d.y})`);
 
@@ -384,7 +421,7 @@ function initDiagram() {
     });
 
     node.append("rect")
-        .attr("height", d => d.dy)
+        .attr("height", d => Math.max(d.dy, 1)) // Ensure minimum height of 1px
         .attr("width", d => d.dx)
         .attr("fill", d => d.color || "#4f46e5")
         .attr("stroke", "#fff")
@@ -394,13 +431,22 @@ function initDiagram() {
 
     // Add drag behavior
     node.call(d3.drag()
-        .subject(d => ({ x: d.x, y: d.y }))
+        .subject(function(event, d) {
+            // Get mouse position relative to the node
+            const mousePoint = d3.pointer(event, this);
+            return { 
+                x: d.x,  // Keep x position fixed
+                y: d.y + mousePoint[1]  // Add relative y position
+            };
+        })
         .on("start", function(event) {
             d3.select(this).raise();
         })
         .on("drag", function(event, d) {
-            // Keep x position fixed, only allow vertical movement
-            d.y = event.y;
+            // Calculate new position based on mouse movement
+            const yOffset = event.dy;  // Use the change in y position
+            d.y += yOffset;  // Update position incrementally
+            
             nodePositions[d.index] = { x: d.x, y: d.y };
             d3.select(this).attr("transform", `translate(${d.x},${d.y})`);
 
@@ -413,27 +459,27 @@ function initDiagram() {
     );
 
     // Add text with customizable position
-    let textY, textDy;
+    let textX, textY, textAnchor;
     
     switch(textPosition) {
-        case 'top':
-            textY = -3;
-            textDy = "0em";
+        case 'left':
+            textX = -6;
+            textAnchor = "end";
             break;
-        case 'bottom':
-            textY = d => (d.y1 - d.y0) + 15;
-            textDy = "0em";
+        case 'right':
+            textX = d => d.dx + 6;
+            textAnchor = "start";
             break;
         default: // middle
-            textY = d => (d.y1 - d.y0) / 2;
-            textDy = "0.35em";
+            textX = d => d.dx / 2;
+            textAnchor = "middle";
     }
 
     node.append("text")
-        .attr("x", d => (d.x1 - d.x0) / 2)
-        .attr("y", textY)
-        .attr("dy", textDy)
-        .attr("text-anchor", "middle")
+        .attr("x", textX)
+        .attr("y", d => d.dy / 2)
+        .attr("dy", ".35em")
+        .attr("text-anchor", textAnchor)
         .text(d => d.name)
         .attr("fill", document.getElementById('text-color').value)
         .attr("font-size", "12px")