JavaScript Spin Wheel

JavaScript Spin Wheel
Code Snippet:Spin Wheel Using JS
Author: Dee
Published: May 10, 2024
Last Updated: May 10, 2024
Downloads: 61
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript code creates a spinning wheel with options and questions for interactive selection. It utilizes D3.js for visualization. The wheel spins randomly and stops on a choice. This is helpful for games or selecting random options interactively.

You can use this code on your website for interactive decision-making or game features. It adds engagement and interactivity to your platform, enhancing user experience. The spinning wheel feature offers a fun way for users to make selections or choices.

How to Create JavaScript Spin Wheel

1. Start by creating the HTML structure for the spin wheel. Include a <div> element with an ID of “chart” where the spin wheel will be rendered.

<div id="chart"></div>
<div id="question"><h1></h1></div>

2. Define CSS styles to customize the appearance of the spin wheel. This step is optional but helps enhance the visual appeal of the wheel.

        font-family:Helvetica, Arial, sans-serif;
        position: absolute;
        margin-left: 440px;
        margin-top: 400px;
        position: absolute;
    #question h1{
        font-size: 50px;
        font-weight: bold;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        padding: 0;
        margin: 0;

3. Load the following d3js CDN link before closing the body tag:

<script src="" charset="utf-8"></script>

4. Now, let’s write the JavaScript code to create the spin wheel functionality. Copy and paste the following JavaScript code into your script file or inside <script> tags in your HTML file.

var padding = {top:20, right:40, bottom:0, left:0},
            w = 500 - padding.left - padding.right,
            h = 500 -  - padding.bottom,
            r = Math.min(w, h)/2,
            rotation = 0,
            oldrotation = 0,
            picked = 100000,
            oldpick = [],
            color = d3.scale.category20();//category20c()
            //randomNumbers = getRandomNumbers();
        var data = [
                    {"label":"Dell LAPTOP",  "value":1,  "question":"What CSS property is used for specifying the area between the content and its border?"}, // padding
                    {"label":"IMAC PRO",  "value":2,  "question":"What CSS property is used for changing the font?"}, //font-family
                    {"label":"SUZUKI",  "value":3,  "question":"What CSS property is used for changing the color of text?"}, //color
                    {"label":"HONDA",  "value":4,  "question":"What CSS property is used for changing the boldness of text?"}, //font-weight
                    {"label":"FERRARI",  "value":5,  "question":"What CSS property is used for changing the size of text?"}, //font-size
                    {"label":"APARTMENT",  "value":6,  "question":"What CSS property is used for changing the background color of a box?"}, //background-color
                    {"label":"IPAD PRO",  "value":7,  "question":"Which word is used for specifying an HTML tag that is inside another tag?"}, //nesting
                    {"label":"LAND",  "value":8,  "question":"Which side of the box is the third number in: margin:1px 1px 1px 1px; ?"}, //bottom
                    {"label":"MOTOROLLA",  "value":9,  "question":"What are the fonts that don't have serifs at the ends of letters called?"}, //sans-serif
                    {"label":"BMW", "value":10, "question":"With CSS selectors, what character prefix should one use to specify a class?"}
        var svg ='#chart')
            .attr("width",  w + padding.left + padding.right)
            .attr("height", h + + padding.bottom);
        var container = svg.append("g")
            .attr("class", "chartholder")
            .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + + ")");
        var vis = container
        var pie = d3.layout.pie().sort(null).value(function(d){return 1;});
        // declare an arc generator function
        var arc = d3.svg.arc().outerRadius(r);
        // select paths, use arc generator to draw
        var arcs = vis.selectAll("g.slice")
            .attr("class", "slice");
            .attr("fill", function(d, i){ return color(i); })
            .attr("d", function (d) { return arc(d); });
        // add the text
        arcs.append("text").attr("transform", function(d){
                d.innerRadius = 0;
                d.outerRadius = r;
                d.angle = (d.startAngle + d.endAngle)/2;
                return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")";
            .attr("text-anchor", "end")
            .text( function(d, i) {
                return data[i].label;
        container.on("click", spin);
        function spin(d){
            container.on("click", null);
            //all slices have been seen, all done
            console.log("OldPick: " + oldpick.length, "Data length: " + data.length);
            if(oldpick.length == data.length){
                container.on("click", null);
            var  ps       = 360/data.length,
                 pieslice = Math.round(1440/data.length),
                 rng      = Math.floor((Math.random() * 1440) + 360);
            rotation = (Math.round(rng / ps) * ps);
            picked = Math.round(data.length - (rotation % 360)/ps);
            picked = picked >= data.length ? (picked % data.length) : picked;
            if(oldpick.indexOf(picked) !== -1){
            } else {
            rotation += 90 - Math.round(ps/2);
                .attrTween("transform", rotTween)
                .each("end", function(){
                    //mark question as seen
          ".slice:nth-child(" + (picked + 1) + ") path")
                        .attr("fill", "#111");
                    //populate question
          "#question h1")
                    oldrotation = rotation;
                    /* Get the result value from object "data" */
                    /* Comment the below line for restrict spin to sngle time */
                    container.on("click", spin);
        //make arrow
            .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2) + ")")
            .attr("d", "M-" + (r*.15) + ",0L0," + (r*.05) + "L0,-" + (r*.05) + "Z")
        //draw spin circle
            .attr("cx", 0)
            .attr("cy", 0)
            .attr("r", 60)
        //spin text
            .attr("x", 0)
            .attr("y", 15)
            .attr("text-anchor", "middle")
            .style({"font-weight":"bold", "font-size":"30px"});
        function rotTween(to) {
          var i = d3.interpolate(oldrotation % 360, rotation);
          return function(t) {
            return "rotate(" + i(t) + ")";
        function getRandomNumbers(){
            var array = new Uint16Array(1000);
            var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);
            if(window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function"){
            } else {
                //no support for crypto, get crappy random numbers
                for(var i=0; i < 1000; i++){
                    array[i] = Math.floor(Math.random() * 100000) + 1;
            return array;

That’s all! hopefully, you have successfully created the Javascript Spin Wheel. If you have any questions or suggestions, feel free to comment below.

Leave a Comment