d3.js version 3.5 versus version 5.16 gradient issues

Question

I found this very nice code online regarding a chart I need (Radial Bar Chart). However, it works with version 3.5.3 of d3.js but not with version 5.16.0. While I'm looking into it, I can't seem to find exactly why some of the code isn't working.This is the code:

function draw(csv) {
    "use strict";
  
    var margin = 0,
      width = 600,
      height = 600,
      maxBarHeight = height / 2 - (margin + 70);
  
    var innerRadius = 0.1 * maxBarHeight; // innermost circle
  
    var svg = d3.select('#chartWrapper')
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("class", "chart")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
  
    var defs = svg.append("defs");
  
    var gradients = defs
      .append("linearGradient")
      .attr("id", "gradient-chart-area")
      .attr("x1", "50%")
      .attr("y1", "0%")
      .attr("x2", "50%")
      .attr("y2", "100%")
      .attr("spreadMethod", "pad");
  
    gradients.append("stop")
      .attr("offset", "0%")
      .attr("stop-color", "#EDF0F0")
      .attr("stop-opacity", 1);
  
    gradients.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", "#ACB7BE")
      .attr("stop-opacity", 1);
  
    gradients = defs
      .append("linearGradient")
      .attr("id", "gradient-questions")
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", "50%")
      .attr("y1", "0%")
      .attr("x2", "50%")
      .attr("y2", "100%")
      .attr("spreadMethod", "pad");
  
    gradients.append("stop")
      .attr("offset", "0%")
      .attr("stop-color", "#F6F8F9")
      .attr("stop-opacity", 1);
  
    gradients.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", "#D4DAE0")
      .attr("stop-opacity", 1);
  
    svg.append("circle")
      .attr("r", maxBarHeight + 70)
      .classed("category-circle", true);
  
    svg.append("circle")
      .attr("r", maxBarHeight + 40)
      .classed("question-circle", true);
  
    svg.append("circle")
      .attr("r", maxBarHeight)
      .classed("chart-area-circle", true);
  
    svg.append("circle")
      .attr("r", innerRadius)
      .classed("center-circle", true);
  
    d3.csv(csv, function(error, data) {
  
      var cats = data.map(function(d, i) {
        return d.category_label;
      });
  
      var catCounts = {};
      for (var i = 0; i < cats.length; i++) {
        var num = cats[i];
        catCounts[num] = catCounts[num] ? catCounts[num] + 1 : 1;
      }
      // remove dupes (not exactly the fastest)
      cats = cats.filter(function(v, i) {
        return cats.indexOf(v) == i;
      });
      var numCatBars = cats.length;
  
      var x_scale = d3.scale.linear()
        .domain([0, 100])
        .range([innerRadius, maxBarHeight]);
  
      var y_scale = d3.scale.linear()
        .domain([0, 100])
        .range([-innerRadius, -maxBarHeight]);
  
      svg.selectAll("circle.x.minor")
        .data(y_scale.ticks(10))
        .enter().append("circle")
        .classed("gridlines minor", true)
        .attr("r", function(d) {
          return x_scale(d);
        });
  
      // category lines
      svg.selectAll("line.y.major")
        .data(cats)
        .enter().append("line")
        .classed("gridlines major", true)
        .attr("y1", -innerRadius)
        .attr("y2", -maxBarHeight - 70)
        .attr("transform", function(d, i) {
          return "rotate(" + (i * 360 / numCatBars) + ")";
        });
  
      svg.append("g")
        .attr("class", "y axis")
        .call(y_axis);
    });
  }

The problem is the code for the gradients: in version 5.16 the code starting at ** var gradients = defs ** does not seem to work anymore. It simply doesn't show up.

All help welcome.

For testing purposes:

<!-- <script data-require="d3@*" data-semver="3.5.3" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script> -->
<script data-require="d3@*" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>

Thank you very much and keep safe.

score -1 · Answer 1 · answered Jul 21 '20 at 05:21

Finding examples

You may want to take a look at Observable, which has modern examples in D3 v5 made by the creator of D3 for a lot of charts. Here's a radial bar chart.

Loading data

In D3 v5, all the fetch functions now use Promises, and must be used as such:

d3.csv('yourcsv.csv')
  .then(function(data) {
      // data is now whole data set
      // draw chart in here!
  })
  .catch(function(error){
     // handle error   
  })

You can put the function that's passed as the second parameter to the one in then() in your code.

Scales

D3 uses d3.scaleLinear() instead of d3.scale.linear(). See the d3-scale module.

d3.js version 3.5 versus version 5.16 gradient issues

1 Answers1

Finding examples

Loading data

Scales