D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
BenHeubl
Full window
Github gist
interactive_button_template
Built with
blockbuilder.org
<!DOCTYPE html> <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