Circle Wave_blue_slider

Inspired by Dave Whyte’s circle wave.

forked from mbostock's block: Circle Wave

forked from noblemillie's block: Circle Wave

forked from noblemillie's block: Circle Wave_blue

forked from noblemillie's block: Circle Wave_blue_slider

<!DOCTYPE html>
<meta charset="utf-8">
<title>Circular Logic</title>

<body>
<div id=viz style="margin-top: 0px;">Site Visit Count</div>

<div id="valueSlider" style="margin:0px; color: #17b424; font-size:20px;">
    <p>
        <label for="sliderValue" style="display: inline-block; width: 300px; text-align: right; padding-top: 0px">
            slider value = <span id="slider-value">…</span>
        </label>
        <input type="range" min="0" max="15" id="sliderValue">
        <input type="number" min="0" max="15" id="inputVal">
    </p>
</div>
<div><span>==============================</span></div>
<svg width="550" height="500"></svg>

// var range = d3.select("#sliderValue")
    // 	.attr("range", sliderExtent)
    // 	.property("value", sValue);
    var number = d3.select("#inputVal")
        .attr("number", sliderExtent)
        .property("value", sValue);

d3.select("#sliderValue").on("input", function () {
        updateSlider(+this.value);
    });
    d3.select("#inputVal").on("input", function () {
        updateSlider(+this.value);
    });

updateSlider(40);

function updateSlider(sValue) {
        d3.select("#slider-value").text(sValue);
        d3.select("#sliderValue").property("value", sValue)
        d3.select("#inputVal").property("value", sValue);
    }

// ************ circle wave scripts *************
    d3.select("body")
        .style("background-color", "snow")

var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        angles = d3.range(0, 2 * Math.PI, Math.PI / 200);

var visits = 24;

d3.timer(function () {
        path.attr("d", function (d) {
            return d(angles);
        });
    });

svg.append("text")
        .attr("font-size", 125)
        .attr("font-family", "Papyrus,fantasy")
        .attr("font-weight", 500)
        .attr("stroke", "navy")
        // 		.attr("stroke", "snow")
        .attr("stroke-width", 1.3)
        .attr("fill", "snow")
        // 		.attr("fill", "navy")
        // 		.attr("fill", "aquamarine")
        .attr("text-anchor", "middle")
        .attr("opacity", 0.9)
        .text(visits)
        .attr("transform", "translate(" + width / 3 + "," + height / 2.5 + ")")

</script>
</body>
</html>

https://d3js.org/d3.v5.min.js