numbered wheel

by arcanabliss

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

JavaScript

let data = [{
      value: 1,
    }, {
      value: 2,
    }, {
      value: 3,
    }, {
      value: 4,
    }, {
      value: 5,
    }, {
      value: 6,
    }, {
      value: 7,
    }, {
      value: 8,
    }, {
      value: 9,
    }, {
      value: 10,
    }, {
      value: 11,
    }, {
      value: 12,
    }, {
      value: 13,
    }, {
      value: 14,
    }];

    let options = {
      width: 600,
      height: 600,
      margins: {
        top: 100,
        right: 100,
        bottom: 100,
        left: 100
      },
      circles: {
        levels: 12,
        maxValue: 100,
        labelFactor: 1.15,
        opacity: 0,
      },
   
    };
   
   
    let allAxis = (data.map(function(i, j) {
        return i.name
      })),
      total = allAxis.length,
      radius = Math.min(options.width / 2, options.height / 2),
      angleSlice = Math.PI * 2 / total,
      Format = d3.format('');
   
    let rScale = d3.scale.linear()
      .domain([0, options.circles.maxValue])
      .range([50, radius]);
   
    let svg = d3.select("body").append("svg")
      .attr("width", options.width + options.margins.left + options.margins.right)
      .attr("height", options.height + options.margins.top + options.margins.bottom);
   
    let g = svg.append("g")
      .attr("transform", "translate(" + (options.width / 2 + options.margins.left) + "," + (options.height / 2 + options.margins.top) + ")");
   
    let axisGrid = g.append("g")
      .attr("class", "axisWraper");
   
    let axis = axisGrid.selectAll(".axis")
      .data(allAxis)
      .enter()
      .append("g")
      .attr("class", "axis")
   
    //append them lines
    axis.append("line")
      .attr("x1", 0)
      .attr("y1", 0)
      .attr("x2", function(d, i) {
        let tempX2 = radius * Math.cos(angleSlice * i - Math.PI / 2);
        return tempX2;
      })
      .attr("y2", function(d, i) {

        let tempY = radius * Math.sin(angleSlice * i - Math.PI / 2);
        return tempY;
      })
     ...