Making a sunburst diagram with D3.js

Question

I am learning D3 and love it! I am reading books, and I am stuck at an exercise making a sunburst diagram.

Here is my code so far:

<div id="sunburst"></div>

   <%--Then write/append script to container--%>
   <script type="text/javascript">

       <%--Calculate the maximum radius--%>
       var width = 640, height = 400, maxRadius = Math.min(width,height)/2;

       var svg = d3.select("sunburst").append("svg")
           .attr("width", width)
           .attr("height", height);

      //Center sunburst parameter at (0,0), so it's easier to parameters
      var g = sag.append("g");
           .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");

      //Scales are D3 objects used to convert input values into svg coordinates (i.e. pixels).
      var theta = d3.scale.linear()
          .range([0,2 * Math.PI]);
      var radius = d3.scale.sqrt()
          .range([0,maxRadius]);

At this point, the author says that the default domains of [0,1] are exactly what we need in this example. I am confused because theta and the radius can be more that 1, no? I must be missing something obvious.

Thank you very much for your time! :)

Answer 1

The values output from the scale function can indeed be more than 1. This is what the range defines. The scale function also has an input interval for the scaling, the domain , which is not specified in the example. The default for this is [0, 1] . The input values (across the domain interval) will then be mapped onto an output value (across the range interval), using the type of scaling specified: linear in this example.

So the full version would be:

  var theta = d3.scale.linear()
      .domain([0,1])
      .range([0,2 * Math.PI]);

meaning 0 maps to 0; 1 maps to 2 * pi; 0.5 maps to pi ...

Anyway, in the example from the exercise, I assume the inputs using the theta scale will be in the range [0,1] , hence the author's comment about this being an appropriate default.

Reference:
d3 v3 API reference on github
Example from dashingd3js.com