logo
down
shadow

Multiple ring donut chart using D3js v4


Multiple ring donut chart using D3js v4

By : Christer Sonesson
Date : November 19 2020, 03:01 PM
help you fix your problem I rewrote a bit your code. Check, now it works. Pay attention that I extend data object with property parentIndex when I store the index of the current data item. In d3 version 3 you can get the index of parent data-item as third argument function(d,i,j) (j in this example), but in the d3 version 4, the third argument it's not the index.
code :
var path = gs.selectAll("path")
  .data(function(d, i) {
    return pie(d.children).map(function(payload) { // <-- !!!
      return {
        payload: payload,
        parentIndex: i
      }
    })
  })
  .enter().append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d, i) {
    return arc
            .innerRadius(10 + cwidth * d.parentIndex) //<-- !!!
            .outerRadius(cwidth * (d.parentIndex + 1))(d.payload); //<-- !!!
  });
var dataset = [{
  "name": "Population Quater",
  "code": "POP_QUATER",
  "parent": "POP_BY_QUAT",
  "children": [{
    "name": "POP_CYQ1",
    "code": "POP_CYQ1",
    "parent": "POP_QUATER",
    "value": "6772",
    "label": "CYQ1",
    "children": []
  }, {
    "name": "POP_CYQ2",
    "code": "POP_CYQ2",
    "parent": "POP_QUATER",
    "value": "6716",
    "label": "CYQ2",
    "children": []
  }, {
    "name": "POP_CYQ3",
    "code": "POP_CYQ3",
    "parent": "POP_QUATER",
    "value": "6714",
    "label": "CYQ3",
    "children": []
  }, {
    "name": "POP_CYQ4",
    "code": "POP_CYQ4",
    "parent": "POP_QUATER",
    "value": "6703",
    "label": "CYQ4",
    "children": []
  }, {
    "name": "POP_LYQ1",
    "code": "POP_LYQ1",
    "parent": "POP_QUATER",
    "value": "6721",
    "label": "LYQ1",
    "children": []
  }, {
    "name": "POP_LYQ2",
    "code": "POP_LYQ2",
    "parent": "POP_QUATER",
    "value": "6671",
    "label": "LYQ2",
    "children": []
  }, {
    "name": "POP_LYQ3",
    "code": "POP_LYQ3",
    "parent": "POP_QUATER",
    "value": "6708",
    "label": "LYQ3",
    "children": []
  }, {
    "name": "POP_LYQ4",
    "code": "POP_LYQ4",
    "parent": "POP_QUATER",
    "value": "6734",
    "label": "LYQ4",
    "children": []
  }]
}, {
  "name": "Transient Pop",
  "code": "TRANSIENT_POP",
  "parent": "POP_BY_QUAT",
  "label": "Transient Pop",
  "children": [{
    "name": "TRANSIENT_LYQ1",
    "code": "TRANSIENT_LYQ1",
    "parent": "TRANSIENT_POP",
    "value": "54",
    "label": "LYQ1",
    "children": []
  }, {
    "name": "TRANSIENT_LYQ2",
    "code": "TRANSIENT_LYQ2",
    "parent": "TRANSIENT_POP",
    "value": "86",
    "label": "LYQ2",
    "children": []
  }, {
    "name": "TRANSIENT_LYQ3",
    "code": "TRANSIENT_LYQ3",
    "parent": "TRANSIENT_POP",
    "value": "219",
    "label": "LYQ3",
    "children": []
  }, {
    "name": "TRANSIENT_LYQ4",
    "code": "TRANSIENT_LYQ4",
    "parent": "TRANSIENT_POP",
    "value": "191",
    "label": "LYQ4",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ1",
    "code": "TRANSIENT_CYQ1",
    "parent": "TRANSIENT_POP",
    "value": "52",
    "label": "CYQ1",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ2",
    "code": "TRANSIENT_CYQ2",
    "parent": "TRANSIENT_POP",
    "value": "91",
    "label": "CYQ2",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ3",
    "code": "TRANSIENT_CYQ3",
    "parent": "TRANSIENT_POP",
    "value": "222",
    "label": "CYQ3",
    "children": []
  }, {
    "name": "TRANSIENT_CYQ4",
    "code": "TRANSIENT_CYQ4",
    "parent": "TRANSIENT_POP",
    "value": "186",
    "label": "CYQ4",
    "children": []
  }]
}, {
  "name": "Seasonal Pop",
  "code": "SEASONAL_POP",
  "parent": "POP_BY_QUAT",
  "label": "Seasonal Pop",
  "children": [{
    "name": "SEASONAL_LYQ1",
    "code": "SEASONAL_LYQ1",
    "parent": "SEASONAL_POP",
    "value": "2",
    "label": "LYQ1",
    "children": []
  }, {
    "name": "SEASONAL_LYQ2",
    "code": "SEASONAL_LYQ2",
    "parent": "SEASONAL_POP",
    "value": "24",
    "label": "LYQ2",
    "children": []
  }, {
    "name": "SEASONAL_LYQ3",
    "code": "SEASONAL_LYQ3",
    "parent": "SEASONAL_POP",
    "value": "152",
    "label": "LYQ3",
    "children": []
  }, {
    "name": "SEASONAL_LYQ4",
    "code": "SEASONAL_LYQ4",
    "parent": "SEASONAL_POP",
    "value": "55",
    "label": "LYQ4",
    "children": []
  }, {
    "name": "SEASONAL_CYQ1",
    "code": "SEASONAL_CYQ1",
    "parent": "SEASONAL_POP",
    "value": "2",
    "label": "CYQ1",
    "children": []
  }, {
    "name": "SEASONAL_CYQ2",
    "code": "SEASONAL_CYQ2",
    "parent": "SEASONAL_POP",
    "value": "22",
    "label": "CYQ2",
    "children": []
  }, {
    "name": "SEASONAL_CYQ3",
    "code": "SEASONAL_CYQ3",
    "parent": "SEASONAL_POP",
    "value": "161",
    "label": "CYQ3",
    "children": []
  }, {
    "name": "SEASONAL_CYQ4",
    "code": "SEASONAL_CYQ4",
    "parent": "SEASONAL_POP",
    "value": "55",
    "label": "CYQ4",
    "children": []
  }]
}];

var width = 460,
  height = 300,
  cwidth = 25;


var color = d3.scaleOrdinal(d3.schemeCategory20);

var pie = d3.pie()
  .sort(null).value(function(d) {
    return d.value; //since score is the parameter for the pie
  });

var arc = d3.arc();

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var gs = svg.selectAll("g")
  .data(dataset)
  .enter()
  .append("g");
var path = gs.selectAll("path")
  .data(function(d, i) {
  	return pie(d.children).map(function(payload) {
			return {
      	payload: payload,
        parentIndex: i
      }
    })
  })
  .enter().append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d, i, j) {
    return arc.innerRadius(10 + cwidth * d.parentIndex).outerRadius(cwidth * (d.parentIndex + 1))(d.payload);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>


Share : facebook icon twitter icon
Donut chart with partial ring around

Donut chart with partial ring around


By : Radrik
Date : March 29 2020, 07:55 AM
I hope this helps you . I managed to get it working! I used startAngle, endAngle, innerRadius and outerRadius.
Only the centering around the parent element isn't done yet. I just place the submenu always on top now. This is the result:
How to create multi ring donut pie chart?

How to create multi ring donut pie chart?


By : maxxx
Date : March 29 2020, 07:55 AM
it should still fix some issue You can do that by using solidgauge and innerRadius / outerRadius params.
code :
series: [{
        name: 'Speed',
        innerRadius:'60%',
        outerRadius: '70%',
        data: [80]
    },{
        name: 'Speed',
        innerRadius:'80%',
        outerRadius: '100%',
        data: [120]
    }]
How to create multi ring donut pie chart using amcharts?

How to create multi ring donut pie chart using amcharts?


By : Michel Lyu
Date : March 29 2020, 07:55 AM
hop of those help? I'd say to make this kind of chart you're better off with a Gauge chart type where you can define separate bands like in your example.
Here's a working code:
code :
var gaugeChart = AmCharts.makeChart("chartdiv", {
  "type": "gauge",
  "axes": [{
    "axisAlpha": 0,
    "tickAlpha": 0,
    "labelsEnabled": false,
    "startAngle": -150,
    "endAngle": 150,
    "bands": [{
      "color": "#8da44c",
      "endValue": 50,
      "startValue": 0,
      "radius": "100%",
      "innerRadius": "95%",
      "balloonText": "Lime one"
    }, {
      "color": "#ce0004",
      "endValue": 30,
      "startValue": 0,
      "radius": "90%",
      "innerRadius": "85%",
      "balloonText": "Red one"
    }],
    "endValue": 100
  }],
  "allLabels": [{
    "text": "3,000",
    "align": "center",
    "y": "45%",
    "size": 35
  }]
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/gauge.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
how to add tooltip for donut chart in loop using d3js

how to add tooltip for donut chart in loop using d3js


By : Hanamant Jimmannavar
Date : March 29 2020, 07:55 AM
I wish this helpful for you I have json object which generate dynamically,look like , Instead of doing it like this having 2 text function which is wrong:
code :
.text(function(a){
  a.activity_id + ", " + a.cnt
})
.text(function(d){
  for(var i = 0;i>data.activity.length;i++){
   return data.activity['activity_id'] + ", " + data.activity['cnt'];
  }
})
.text(function() {
  var str = "";
  d.data.activity.forEach(function(a){
            //make the display string by iterating over activity.
            str += a.activity_id + ", " + a.cnt + " ";
  })
  return str;
})
d3js donut chart - highlight first data

d3js donut chart - highlight first data


By : user3083891
Date : March 29 2020, 07:55 AM
it should still fix some issue It is the arc shape functions that generate the content for the d attributes of each of the path elements that make up the donut segments.
So, one approach is to use a different arc shape generator to draw the first segment (with different inner and outer radius settings) than is used to draw the other segments. You can use the second argument of the functions given to the attr() methods, which is the index of your data (see the example).
code :
var normalArc = d3.arc().innerRadius(100).outerRadius(185);
var biggerArc = d3.arc().innerRadius(85).outerRadius(200);

svg
  .selectAll('whatever')
  .data(data_ready)
  .enter()
  .append('path')
  .attr('d', function(d, index) {
    // If this is the first segment make it a wider arc
    if(index === 0) {
      return biggerArc(d);
    } else {
      return normalArc(d);
    }
  })
  .attr('fill', function(d, index){ 
    // If this is the first segment, highlight it.
    if(index === 0) {
      return '#ff1dce';
    } else {
      return(color(d.data.key))
    }
  })
  .attr("stroke", "black")
  .style("stroke-width", "2px")
  .style("opacity", 0.7);
shadow
Privacy Policy - Terms - Contact Us © voile276.org