Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script src="slider.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } svg { width:100%; height: 100% } </style> <link rel="stylesheet" href="style.css" type="text/css" media="screen"/> <link rel="stylesheet" href="slider.css" type="text/css" media="screen"/> </head><body> <div id="main-wrapper"> <h1>Interactive…</h1> <div class="filters"> <div class="kids category"> <h3 style="margin-bottom:5px">choose</h3> <div class="button current" data-val="1">A</div> <div class="button" data-val="2">B</div> <div class="button" data-val="3">C</div> <div class="button" data-val="4">D</div> <div class="button" data-val="4">E</div> <div class="button" data-val="2">F</div> <div class="button" data-val="3">G</div> <div class="button" data-val="4">H</div> <div class="clr"></div> </div> <div class="clr"></div> <div class="sentence">…sentece on the interactive…</div> <div class="dom category"> <h3>Variable 1</h3> <div id="domvalue" class="valuedesc">0 hours</div> <div id="domslider" class="sliderholder"></div> </div> <div class="work category"> <h3>Variable 2</h3> <div id="workvalue" class="valuedesc">0 hours</div> <div id="workslider" class="sliderholder"></div> </div></div> <div id="charts"> <div id="mothers"></div> <div id="fathers"></div> </div> <div class="clr"></div></div> <script> // Hours sliders var domSlider = d3.slider().min(0).max(12).ticks(0).stepValues(d3.range(0,13)).value(0) .callback(function() { brushed("dom"); }); var workSlider = d3.slider().min(0).max(12).ticks(0).stepValues(d3.range(0,13)).value(0) .callback(function() { brushed("work"); }); d3.select("#domslider").call(domSlider); d3.select("#workslider").call(workSlider); function brushed (metric) { if (metric) } // function brushed(metric) { // if (metric == "dom") {// var value = domSlider.value();// USER_DOM_HRS = value;// } else if (metric == "work") {// var value = workSlider.value();// USER_WORK_HRS = value;// }// var units = "hours";// if (value == 1) {// var units = "hour";// }// d3.select("#"+metric+"value").text(value + " " + units); // update();// } </script></body> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js