Visualize passing percentages over time in d3.js

Question

Visualize passing percentages over time in d3.js

Update: Revised JSON and added sample code to show Nodes with size based on percentage data, but I still can't get "stroke width" to work. Any help is appreciated.

I would like to use d3.js to create a dendrogram describing the distribution / transmission of real estate interest over time, and I need help. My initial concept: cosmic dendrogram nodes along a data-driven relative timeline to give context when a particular transmission occurred. Scale the width of each connecting path according to the amount of normalized interest traveling towards the receiving node (similar to the paths in Sankey diagrams) to provide context for the amount of transmission. This would be useful for visualizing the distribution of interest in real estate or the like, through sale, inheritance, etc. I appreciate any helpful advice or suggestions. Thanks for reviewing my question.

Example: Image example

Sample data:

data = 
{
  "name": "Root",
  "date": 1950,
  "interest": 1.0,
  "children": [
    {
      "name": "Anne",
      "date": 1970,
      "interest": 0.5,
      "children": [
        {
          "name": "Charles",
          "date": 1988,
          "interest": 0.25,
          "children": [
            {
              "name": "Frank",
              "date": 2010,
              "interest": 0.125,
              "children": []
            },
            {
              "name": "Gina",
              "date": 2010,
              "interest": 0.125,
              "children": []
            }
          ]
        },
        {
          "name": "Diane",
          "date": 1995,
          "interest": 0.25,
          "children": [
            {
              "name": "Harley",
              "date": 2015,
              "interest": 0.25,
              "children": []
            }
          ]
        }
      ]
    },
    {
      "name": "Ben",
      "date": 1970,
      "interest": 0.5,
      "children": [
        {
          "name": "Erin",
          "date": 1970,
          "interest": 0.5,
          "children": [
            {
              "name": "Ingrid",
              "date": 1970,
              "interest": 0.16665,
              "children": []
            },
            {
              "name": "Jack",
              "date": 1970,
              "interest": 0.16665,
              "children": []
            },
            {
              "name": "Kelsey",
              "date": 1970,
              "interest": 0.16665,
              "children": []
            }
          ]
        }
      ]
    }
  ]
}

Example tree (modified from this source: http://www.meccanismocomplesso.org/en/dendrogramma-d3-parte2/ )

<!doctype html></html>
  <meta charset="utf-8" />
  <style>
  .node circle {     
    fill: #fff;    
    stroke: steelblue;    
    stroke-width: 1.5px; 
  } 
  .node {    
    font: 20px sans-serif; 
  } 
  .link {    
    fill: none;    
    stroke: #ccc;    
    stroke-width: 1.5px; 
  }
  </style> 
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  <script type="text/javascript"> 
  var width = 600; 
  var height = 500; 
  var cluster = d3.layout.cluster()    
     .size([height, width-200]); 
  var diagonal = d3.svg.diagonal()    
     .projection (function(d) { return [d.y, d.x];}); 
  var svg = d3.select("body").append("svg")    
     .attr("width",width)    
     .attr("height",height)    
     .append("g")    
     .attr("transform","translate(100,0)"); 
  d3.json("dendrogram01.json", function(error, root){    
     var nodes = cluster.nodes(root);    
     var links = cluster.links(nodes);    
     var link = svg.selectAll(".link")       
        .data(links)       
        .enter().append("path")       
        .attr("class","link")
        .attr("stroke-width",  function(d) { return d.interest * 100 ;})       
        .attr("d", diagonal);     
     var node = svg.selectAll(".node")       
        .data(nodes)       
        .enter().append("g")       
        .attr("class","node")       
        .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) 
     node.append("circle")       
        .attr("r", function(d) { return d.interest * 50 ;});    
     node.append("text")       
        .attr("dx", function(d) { return d.children ? -8 : 8; })       
        .attr("dy", 3)       
        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })      
        .text( function(d){ return d.name;}); 
  }); 
  </script>