jquery ui - Two bar graphs in the same place, controlled by one slider D3.js -

i attempting create bar graph when independent sliders moved change 2 bar graph svg heights @ same time , stacked, different colors show shows 2 separate values in same graph, showing growth vs current. using jquery-ui , d3.js. moves 1 svg elements instead of both @ same time, id them both move @ same time.

html

<div id="slider" class="slider">   <label for="amount">age</label>   <input type="text" id="amount1" style="border:0;  font-weight:bold;"> </div>  <div id="slider1" class="slider">    <label for="amount2">retirement age</label>    <input type="text" id="amount2" style="border:0;  font-weight:bold;"> </div> 

js

//initialize sliders  jquery(document).ready(function($) {  $("#slider").slider({   max: 100 }); $("#slider").slider({   min: 18 }); $("#slider1").slider({   max: 100 }); $("#slider1").slider({   min: 18 });  //slider actions  $("#slider, #slider1").slider({   value: 10,   animate: "fast" ,   slide: function (event, ui) {      //capture value of specified slider      var selection = $("#slider").slider("value");     var selection1 = $("#slider1").slider("value");      //fill input box slider value      $( "#amount1" ).val( selection );     $( "#amount2" ).val( selection1 );      //set width , height, i'm little confused      var w = 200;     var h = 200;      //data arrays svgs     var dataset = [];     var dataset1 = [];      //fill data arrays slider values     dataset.push(selection);     dataset.push(selection1 + selection);      //draw rectangle on page     var rectangle = svg.selectall("rect")     .classed("collapse", true)     .data(dataset); 

**

this confuses me

**

    //i draw second rectangle here, choose same svg element,     //im not sure other way appear in same space     //i sure causing issues      var rectangle1 = svg.selectall("rect")     .classed("collapse", true)     .data(dataset1);       //not sure     rectangle.enter().append("rect");     rectangle1.enter().append("rect");      rectangle.attr("width", 200).transition().attr("fill", "#a02222").attr("height", function (d) { console.log('d ' + d);     return d;     }).attr("x", function (d) {       return 40; //i dont know why return 40?     }).attr("y", function (d) {       return 40;  //same here dont know why return 40?     });      rectangle1.attr("width", 200).transition().attr("height", function (d) { console.log('d ' + d);     return d;     }).attr("x", function (d) {       return 40; //i dont know why return 40?     }).attr("y", function (d) {       return 40;  //same here dont know why return 40?     });    } // slider actions ends here });  //create svg element var svg = d3.select(".svgcontain").append("svg").attr("width", 125).attr("height", 300);  }); 

for starters, may want follow tutorial: http://bl.ocks.org/mbostock/3886208

the "return 40;" wondering specify position , dimensions of rect's you're appending svg. shouldn't 40, should bound values in data set, or based on index of bar's series in set of series or more meaningful 40.

there stacked bar chart data processor take set of series , spit out new set of series coordinate definitions make easier calculate how rect's stack in svg coordinate space: https://github.com/mbostock/d3/wiki/stack-layout

then, there's more general issue of how deal these "nested" data sets have series, , in series there values , don't want have manually track , select individual series. there several ways handle sort of situation. if know ever have 2 series, , want fine-grained control on each independently, assign top level object id , start data join each of plots selecting top level object id... eg:

var container1 = d3.select("#mycontainer1); container1.selectall("rect").data(mydata1).append("rect");  var container2 = d3.select("#mycontainer2); container2.selectall("rect").data(mydata2).append("rect"); 

if that, first select sets context of subsequent selects. so, rects inside of "#mycontainer1" or "#mycontainer2" selected each "selectall" based on context you're in.

the other approach use nested selections. nested selections little more complicated wrap head around, 90% of time, approach use. nested selections, restructure data , apply nested selects/joins bind each series dom element , values of each series subelements of each of series dom elements.

first, read this: http://bost.ocks.org/mike/nest/

and try making data more this:

data = [     { key: "series1", values: [...]},     { key: "series2", values: [...]} ]; 

then, want nested selection start selection of "data" array , bind whatever svg or html element have wraps each of 2 series.

var series = d3.select("svg").selectall("g.series")     .data(data, function(d){return d.key; });  series.enter().append("g").attr("class", "series"); 

at point, d3 have added "g" element svg element each series , bound series object (including key , values array) appended elements. next, can make nested selection add series-specific elements g element... ie:

var rect = series.selectall("rect").data(function(d) { return d.values }); rect.enter().append("rect"); 

note used function in our ".data(...)" call. that's because values want passed join depend on specific series being processed d3.

now, you'd have rect added g element each value in each series. since used d3 data binding , used key function in first select (".data(data, function(d){return d.key;}"), future selects done in same nested/keyed manner update right g , rect elements.

here's fiddle demonstrates concept: http://jsfiddle.net/reblace/bwp8l/2/

a key takeaway can update data (including adding additional series) , whole thing redraw correctly according new nested join.