D3 Examples - Circle Wave_blue

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Circular Logic</title>
​
<script src="https://d3js.org/d3.v5.min.js"></script>
​
<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>
​
<script>
    // ************ slider scripts *************
    var sliderExtent = [0, 15];
    var sValue;
​
    // 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;
​
​
    var path = svg.append("g")
        .attr("transform", "translate(" + width / 3 + "," + height / 3 + ")")
        .attr("stroke-width", 13)
        .attr("stroke-linejoin", "round")
        .selectAll("path")
        .data(["cyan", "snow", "lightskyblue"])
        .enter().append("path")
        .attr("stroke", function (d) { return d; })
        .style("mix-blend-mode", "multiply")
        .style("mix-blend-mode", "darken")
        .attr("fill", "cyan")
        .attr("fill", "royalblue")
        //      .attr("fill", "navy")
        .attr("opacity", 0.3)
        .datum(function (d, i) {
            return d3.radialLine()
                .curve(d3.curveLinearClosed)
                .angle(function (a) { return a; })
                .radius(function (a) {
                    var t = d3.now() / 2000;
                    return 120 + Math.cos(a * 5 - i * 2 * Math.PI / 4 + t) * Math.pow((1 + Math.cos(a - t)) / 3, 3) * 38;
                });
        });
​
    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>
    