Old school D3 from simpler times

All examples By author By category About

BenHeubl

Full window Github gist

circles_slider

Built with blockbuilder.org

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js