D3 Examples - circles

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="d3.slider.css" type="text/css" media="screen"/>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="d3.slider.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
<div>
  <div id="chart"><div>
<div class="dom category">
<h3>Slider1</h3>
<div id="domvalue" class="valuedesc">0 hours</div>
<div id="domslider" class="sliderholder"></div>
</div>
  
<div class="work category">
<h3>Slider2</h3>
<div id="workvalue" class="valuedesc">0 hours</div>
<div id="workslider" class="sliderholder"></div>
</div>
</div>
​
  
  
  <script>
    
//     console.log(d3.interpolate(1, 2))
​
    
var USER_KIDS = "1";
var USER_DOM_HRS = "0";
var USER_WORK_HRS = "0";
​
    
var grps = {};
    
    
    var svg = d3.select("#chart").append("svg").attr({
      width: 50,
      height:50,
    }).append("g").classed("vizG", true)
    
    svg.append("text").classed("texts", true)
     .attr("id", "mothers-pct")
      .text("hello").attr({
      y: 100, 
      x: 100,
    })
    
     svg.append("text").classed("texts2", true)
     .attr("id", "father-pct")
      .text("hello").attr({
      y: 120, 
      x: 100,
    })
    
    
d3.tsv("parent-grps-hourly.tsv", type, function(error, data) {
    if (error) throw error;
  
//       console.log(data)
      
      console.log(grps)
  
  var domSlider = d3.slider().min(0).max(12)
  .ticks(0).callback(function () {
    brushed("dom")
  })
  var workSlider = d3.slider().min(0).max(12)
  .ticks(0).callback(function () {
    brushed("work")
  })
  
    update();
​
  
  d3.select("#domslider").call(domSlider)
    d3.select("#workslider").call(workSlider)
​
      
      
// The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well). == count number of objects: 
//       console.log((Object.keys(grps)).length) // 1,764
      
      d3.select(".texts").text(grps[getKey("mother")] + "%") 
d3.select(".texts2").text(grps[getKey("father")] + "%")
​
// console.log(grps["1" + String(USER_KIDS) + String(USER_DOM_HRS) + String(USER_WORK_HRS)])
​
// console.log("1" + String(USER_KIDS) + String(USER_DOM_HRS) + String(USER_WORK_HRS))
​
// console.log(grps)
​
function brushed(passedInVal) {
  if (passedInVal == "dom") {
    var value = domSlider.value();
    USER_DOM_HRS = value;
  } else if (passedInVal == "work") {
    var value = workSlider.value();
    USER_WORK_HRS = value;
  }
  var units = "hours";
  if (value == 1) {
    var units = "hours"
  }
  d3.select("#" + passedInVal+"value").text(value+ " " + units)
  update();
​
}
  
  
  function update() {
    
    d3.select("#mothers-pct")
    .transition()
    .duration(1000)
    .tween("text", interpCount("mother"))
    
    
    d3.select("#father-pct")
    .transition()
    .duration(1000)
    .tween("text", interpCount("father"))
  }
​
​
// end of data function!!
      
      
}) // grps is only available in the local scope of this function
​
function interpCount(theparent) {
    
    return function() {
        var re = /(\d+)%/;  // cap any one or multible numbers with a % sign folloing
        var meta_array = re.exec(this.textContent);
        var just_number = meta_array[1];
        if (just_number.substring(0,1) == "<") {
            just_number = just_number.substring(1);
        }
    
    
//     // Match "quick brown" followed by "jumps", ignoring characters in between
// // Remember "brown" and "jumps"
// // Ignore case
// var re = /quick\s(brown).+?(jumps)/ig;
// var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
                    
        var key = getKey(theparent);
        
        // DEBUG
        console.log(key);
        
        if (key in grps) {
            var i = d3.interpolate(just_number, grps[key]);
        } else {
            var i = d3.interpolate(just_number, 0);
        }
        
        return function(t) {
            if (i(t) < 1) {
                this.textContent = "<1%";
            } else {
                this.textContent = Math.round(i(t)) + "%";
            }
        }
    }
    
}
    
    
function type(d, i) {
    // d3.keys(d).map(function(key) {
    //  if (key != "SEX") {
    //      d[key] = +d[key];
    //  }
    // });
    
    d.prop = +d.prop;
    d.prop_cum_all = +d.prop_cum_all;
    d.prop_cum_par = +d.prop_cum_par
    
    var key = d.SEX + d.HH_NUMOWNKIDS + d.childcare_housecare_hr + d.working_hr;
    grps[key] = d.prop_cum_par;
    
    return d;
}
    
    
function getKey(theparent) {
  if (theparent == "father") {
    return "1" + String(USER_KIDS) + String(USER_DOM_HRS) + String(USER_WORK_HRS)
  } else {
    return "2" + String(USER_KIDS) + String(USER_DOM_HRS) + String(USER_WORK_HRS)
  }
  
}
    
    
​
  </script>
</body>
​
    