circles_slider

README.md

Built with blockbuilder.org

d3.slider.css

.d3slider{z-index:2;height:100%;background:none;}.d3slider-rect-range{fill:#ccc;stroke:none;}.d3slider-rect-value{fill:#000;stroke:none;}.d3slider-axis{position:relative;z-index:1;cursor:pointer;}.d3slider-axis path{display:none;fill:none;stroke:#000;shape-rendering:crispEdges;}.d3slider-axis line{fill:none;stroke:#000;shape-rendering:crispEdges;}.d3slider text{font:10px sans-serif;}.tick.minor text{display:none;}.tick line{stroke-width:1;}.tick.minor line{stroke-width:1;stroke:#bbb;}.dragger rect{fill:#71ACE3;stroke:none;z-index:3;}.dragger line{stroke:#aa0000;fill:none;}.dragger-outer{fill:#fff;stroke:#000;stroke-width:2;}.dragger-inner{fill:#fff;stroke:none;}.min-marker line{stroke:#aa0000;fill:none;}.overlay{fill:none;pointer-events:all;z-index:1;}

d3.slider.js

d3.slider=function module(){"use strict";var div,min=0,max=100,svg,svgGroup,value,classPrefix,axis,height=8,rect,rectHeight=6,tickSize=6,margin={top:5,right:10,bottom:4,left:10},ticks=0,tickValues,scale,tickFormat,dragger,width,range=false,callbackFn,stepValues,focus;function slider(selection){selection.each(function(){div=d3.select(this).classed('d3slider',true);width=parseInt(div.style("width"),10)-(margin.left
+ margin.right);value=value||min;scale=d3.scale.linear().domain([min,max]).range([0,width]).clamp(true);svg=div.append("svg").attr("class","d3slider-axis").attr("width",width+ margin.left+ margin.right).attr("height",height+ margin.top+ margin.bottom).append("g").attr("transform","translate("+ margin.left+","+ margin.top+")");svg.append("rect").attr("class","d3slider-rect-range").attr("width",width).attr("height",rectHeight);if(range){svg.append("rect").attr("class","d3slider-rect-value").attr("width",scale(value)).attr("height",rectHeight);}
var axis=d3.svg.axis().scale(scale).orient("bottom");if(ticks!=0){axis.ticks(ticks);axis.tickSize(tickSize);}else if(tickValues){axis.tickValues(tickValues);axis.tickSize(tickSize);}else{axis.ticks(0);axis.tickSize(0);}
if(tickFormat){axis.tickFormat(tickFormat);}
svg.append("g").attr("transform","translate(0,"+ rectHeight+")").call(axis)
var values=[value];dragger=svg.selectAll(".dragger").data(values).enter().append("g").attr("class","dragger").attr("transform",function(d){return"translate("+ scale(d)+")";})
var displayValue=null;if(tickFormat){displayValue=tickFormat(value);}else{displayValue=d3.format(",.0f")(value);}
dragger.append("text").attr("x",0).attr("y",-15).attr("text-anchor","middle").attr("class","draggertext").text(displayValue);dragger.append("circle").attr("class","dragger-outer").attr("r",7).attr("transform",function(d){return"translate(0,3)";});dragger.append("circle").attr("class","dragger-inner").attr("r",4).attr("transform",function(d){return"translate(0,5)";});var dragBehaviour=d3.behavior.drag();dragBehaviour.on("drag",slider.drag);dragger.call(dragBehaviour);svg.on("click",slider.click);});}
slider.draggerTranslateFn=function(){return function(d){return"translate("+ scale(d)+")";}}
slider.click=function(){var pos=d3.event.offsetX||d3.event.layerX;slider.move(pos);}
slider.drag=function(){var pos=d3.event.x;slider.move(pos+margin.left);}
slider.move=function(pos){var l,u;var newValue=scale.invert(pos- margin.left);if(stepValues!=undefined){l=stepValues.reduce(function(p,c,i,arr){if(c<newValue){return c;}else{return p;}});if(stepValues.indexOf(l)<stepValues.length-1){u=stepValues[stepValues.indexOf(l)+ 1];}else{u=l;}
var oldValue=value;value=((newValue-l)<=(u-newValue))?l:u;}else{var oldValue=value;value=newValue;}
var values=[value];svg.selectAll(".dragger").data(values).attr("transform",function(d){return"translate("+ scale(d)+")";});var displayValue=null;if(tickFormat){displayValue=tickFormat(value);}else{displayValue=d3.format(",.0f")(value);}
svg.selectAll(".dragger").select("text").text(displayValue);if(range){svg.selectAll(".d3slider-rect-value").attr("width",scale(value));}
if(callbackFn){callbackFn(slider);}}
slider.min=function(_){if(!arguments.length)return min;min=_;return slider;};slider.max=function(_){if(!arguments.length)return max;max=_;return slider;};slider.classPrefix=function(_){if(!arguments.length)return classPrefix;classPrefix=_;return slider;}
slider.tickValues=function(_){if(!arguments.length)return tickValues;tickValues=_;return slider;}
slider.ticks=function(_){if(!arguments.length)return ticks;ticks=_;return slider;}
slider.stepValues=function(_){if(!arguments.length)return stepValues;stepValues=_;return slider;}
slider.tickFormat=function(_){if(!arguments.length)return tickFormat;tickFormat=_;return slider;}
slider.value=function(_){if(!arguments.length)return value;value=_;return slider;}
slider.showRange=function(_){if(!arguments.length)return range;range=_;return slider;}
slider.callback=function(_){if(!arguments.length)return callbackFn;callbackFn=_;return slider;}
slider.setValue=function(newValue){var pos=scale(newValue)+ margin.left;slider.move(pos);}
slider.mousemove=function(){var pos=d3.mouse(this)[0];var val=slider.getNearest(scale.invert(pos),stepValues);focus.attr("transform","translate("+ scale(val)+",0)");focus.selectAll("text").text(val);}
slider.getNearest=function(val,arr){var l=arr.reduce(function(p,c,i,a){if(c<val){return c;}else{return p;}});var u=arr[arr.indexOf(l)+1];var nearest=((value-l)<=(u-value))?l:u;return nearest;}
slider.destroy=function(){div.selectAll('svg').remove();return slider;}
return slider;};

index.html

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

parent-grps-hourly.tsv

style.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{font-family:'Inconsolata',Monaco,"Lucida Console",Consolas,"Courier New";}#main-wrapper{width:1090px;margin:10px auto;}.clr{clear:both;}#dom{margin-bottom:40px;}#notes{width:495px;position:absolute;top:0px;right:20px;font-family:"Mercury SSm A","Mercury SSm B";font-style:italic;font-weight:400;font-size:14px;line-height:1.4em;background:#fff;padding:0 0 7px 10px;}h1{font-family:'Inconsolata',Monaco,"Lucida Console",Consolas,"Courier New";font-size:24px;font-style:normal;text-transform:uppercase;margin-bottom:20px;}#notes p{margin-bottom:15px;background:#fff;}.centered{text-align:center;color:#999;font-size:0.8em;text-transform:uppercase;}#charts{width:800px;float:left;}#charts #mothers{float:left;width:400px;}#charts #fathers{float:left;width:400px;}.filters{width:200px;float:left;margin-right:50px;}.sex{width:300px;float:left;text-align:center;}.category{margin-bottom:40px;}#update{margin-bottom:50px;}#update #buttons{width:450px;margin:0 auto 8px auto;}.section{margin-right:20px;font-size:13px;float:left;}.sentence{margin-bottom:3em;line-height:1.2em;}#demographics .firstmar{width:100%;border-top:2px solid #ccc;padding-top:6px;margin-right:0;margin-bottom:0;}h3{text-transform:uppercase;font-size:18px;padding:3px 0px;margin:-5px 0 10px 0;line-height:1.2em;}.button{width:40px;padding:8px 2px;cursor:pointer;text-align:center;font-size:14px;border:1px solid #e0e0e0;float:left;}.button:hover{background:#e0e0e0;}.button.current{background:#000;color:#fff;}.sliderholder{width:200px;}.valuedesc{height:20px;text-align:center;}svg{font:14px 'Inconsolata',Monaco,"Lucida Console",Consolas,"Courier New";}#mothers-circle{fill:#3CC3BD;}#fathers-circle{fill:#FD8210;}text{font-size:40px;fill:#000;text-anchor:middle;}text.subheader{font-size:18px;text-transform:uppercase;}text.descrip tspan{font-size:1em;}.axis{font-size:12px;}.axis path,.axis line{fill:none;stroke:#000;shape-rendering:crispEdges;}.x.axis path{display:none;}.y.axis path{display:none;}.baselines text{font-size:12px;text-anchor:middle;fill:#999;}.baselines circle{fill:none;stroke:#e0e0e0;stroke-width:1;}.counter{font-size:40px;}.desc{font-family:"Mercury SSm A","Mercury SSm B";font-style:italic;font-weight:400;font-size:14px;line-height:1.4em;}line.annotation{stroke:#ccc;stroke-dasharray:5,2;stroke-width:1.2px;}text.annotation,#line-chart .agehighlight text{font-family:'Inconsolata',Monaco,"Lucida Console",Consolas,"Courier New";font-size:14px;fill:#444;text-anchor:end;}text.descrip{font-family:"Mercury SSm A","Mercury SSm B";font-style:italic;font-weight:400;font-size:13px;line-height:1.4em;}