| license: mit |
This is a demonstration of the use of two html 'range' inputs using d3.js v4.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.
forked from d3noob's block: Dual html inputs in v4
forked from noblemillie's block: Dual sliders: num, %, rect
forked from noblemillie's block: Dual sliders: num, %, rect
forked from noblemillie's block: Dual sliders: num, %, rect2
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>Double Input Test</title> | |
| <p> | |
| <label for="nHeight" | |
| style="display: inline-block; width: 240px; text-align: right; padding-top: 10px"> | |
| $ amount = <span id="nHeight-value">…</span> | |
| </label> | |
| <input type="range" min="1" max="100" id="nHeight"> | |
| </p> | |
| <p> | |
| <label for="nWidth" | |
| style="display: inline-block; width: 240px; text-align: right; padding-bottom: 20px"> | |
| % of range = <span id="nWidth-value">…</span> | |
| </label> | |
| <input type="range" min="0" max="100" id="nWidth"> | |
| </p> | |
| <div id="viz">** viz **</div> | |
| <p> | |
| <label for="nSum" | |
| style="display: inline-block; width: 240px; text-align: right; padding-bottom: 20px"> | |
| % of range = <span id="nSum-value">…</span> | |
| </label> | |
| <input type="range" min="0" max="100" id="nSum"> | |
| </p> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| // viz pixel footprint | |
| var extent = [0, 100]; | |
| var height = 60; | |
| var width = 500; | |
| var holder = d3.select("body") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height + 10); | |
| var holder2 = d3.select("div") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height + 10) | |
| // .text("22cfffffff") | |
| ; | |
| // draw a rectangle | |
| holder.append("rect") | |
| .style("fill", "cornflowerblue") | |
| .style("stroke", "red") | |
| .attr("height", height) | |
| .attr("width", width + height) | |
| .attr("x", width + height) | |
| .attr("y", height); | |
| // read a change in the height input | |
| d3.select("#nHeight").on("input", function() { | |
| // updateHeight(+this.value) | |
| updateWidth(+this.value); | |
| }); | |
| // read a change in the width input | |
| d3.select("#nWidth").on("input", function() { | |
| updateWidth(+this.value); | |
| }); | |
| // update the values | |
| updateHeight(+this.width); | |
| updateWidth(100); | |
| // Update the height attributes | |
| function updateHeight(nHeight) { | |
| var sum = width + height; | |
| // adjust the text on the range slider | |
| d3.select("#nHeight-value").text(nHeight); | |
| d3.select("#nHeight").property("value", nHeight); | |
| // update the rectangle height | |
| holder.selectAll("rect") | |
| .attr("y", 50-(nHeight/2)) | |
| .attr("height", nHeight); | |
| } | |
| // Update the width attributes | |
| function updateWidth(nWidth) { | |
| // adjust the text on the range slider | |
| d3.select("#nWidth-value").text(nWidth); | |
| d3.select("#nWidth").property("value", nWidth); | |
| // update the rectangle width | |
| holder.selectAll("rect") | |
| .attr("x", 300-(nWidth/2)) | |
| .attr("width", nWidth); | |
| } | |
| </script> |