Revamping a pie chart by incorporating a fresh dataset containing additional data points

Question

Revamping a pie chart by incorporating a fresh dataset containing additional data points

I recently started learning D3 and have been exploring various pie chart tutorials.

Specifically, I've been following the tutorials by Mike Bostock. http://bl.ocks.org/mbostock/1346410

However, I'm struggling with updating a donut chart from one dataset to another that has more values than the original.

I've tried using an update function several times, but haven't had any success. To simplify my question, let's imagine my first dataset had 5 values:

[1,2,3,4,5]

and the second dataset had 10 values:

[1,2,3,4,5,6,7,8,9,10]

After the dynamic update, only 5 values from the new dataset are displayed on the arcs. It seems like the pie is fixed with only 5 arc sections to represent the new data.

Any assistance would be greatly appreciated, as I've been struggling with this issue for some time!

javascript d3.js updates

Answer 1

Answer №1

To effectively manage data of varying sizes, it is essential to address the .enter() and .exit() selections. For a more in-depth explanation, you can refer to this helpful tutorial. In summary, the enter selection pertains to data without corresponding DOM elements (e.g., when additional data is introduced), the update selection deals with existing DOM-element-associated data, and the exit selection relates to DOM elements without associated data (e.g., excess initial elements).

In your change function, you should include something like the following code snippet:

function change() {
  clearTimeout(timeout);

  var path = svg.datum(data).selectAll("path")
    .data(pie);
  path.enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc)
    .each(function(d) { this._current = d; }); // add new arcs
  path.transition().duration(750).attrTween("d", arcTween); // redraw arcs
  path.exit().remove(); // remove old arcs
}

This implementation assumes that you are updating the data variable as mentioned earlier, rather than obtaining a different value from the current data structure, similar to the example provided.

Answer 2

To effectively manage data of varying sizes, it is essential to address the .enter() and .exit() selections. For a more in-depth explanation, you can refer to this helpful tutorial. In summary, the enter selection pertains to data without corresponding DOM elements (e.g., when additional data is introduced), the update selection deals with existing DOM-element-associated data, and the exit selection relates to DOM elements without associated data (e.g., excess initial elements).

In your change function, you should include something like the following code snippet:

function change() {
  clearTimeout(timeout);

  var path = svg.datum(data).selectAll("path")
    .data(pie);
  path.enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc)
    .each(function(d) { this._current = d; }); // add new arcs
  path.transition().duration(750).attrTween("d", arcTween); // redraw arcs
  path.exit().remove(); // remove old arcs
}

This implementation assumes that you are updating the data variable as mentioned earlier, rather than obtaining a different value from the current data structure, similar to the example provided.

Answer 3

Answer №2

For a simple update to be triggered by clicking the text above the pie chart, I implemented the following: JsFiddle
The key action takes place when the .on("click") event is activated, causing all the data to be updated and consequently refreshing the chart as shown below:

d3.select("#update")
.on("click", function (d) {
    data = [1,2,3,4,5,6,7,8,9,10];
    vis.data([data]);
    arc = d3.svg.arc().outerRadius(r);
    pie = d3.layout.pie().value(function(d){return d; });
    arcs.data(pie)
        .enter()
        .append("svg:g")
        .attr("class", "slice")
        .append("svg:path")
        .attr("fill", function(d, i){return color(i);}).attr("d", arc);
});

Answer 4

For a simple update to be triggered by clicking the text above the pie chart, I implemented the following: JsFiddle
The key action takes place when the .on("click") event is activated, causing all the data to be updated and consequently refreshing the chart as shown below:

d3.select("#update")
.on("click", function (d) {
    data = [1,2,3,4,5,6,7,8,9,10];
    vis.data([data]);
    arc = d3.svg.arc().outerRadius(r);
    pie = d3.layout.pie().value(function(d){return d; });
    arcs.data(pie)
        .enter()
        .append("svg:g")
        .attr("class", "slice")
        .append("svg:path")
        .attr("fill", function(d, i){return color(i);}).attr("d", arc);
});

Revamping a pie chart by incorporating a fresh dataset containing additional data points

Answer №1

Answer №2

Similar questions

Is it possible to divide a text string into distinct arrays using spaces?

The initial value for the `useState` is not defined at the

What is the best way to incorporate a generated ID into the datepicker() function whenever a button is clicked?

Utilizing arrays in JavaScript alongside jQuery's methods such as $.inArray() and .splice()

Can you provide a brief explanation for this bubble sort JavaScript code?

Execute multiple events using jQuery's .trigger() method

ng-if not functioning properly following the activation of the "Save Changes" button

AngularJS Assessing an Attribute directive following an Element directive

Tips for including a Places Autocomplete box within an InfoWindow on Google Maps

Angular Custom Pipe - Grouping by Substrings of Strings

What is the best way to show an image within a div using HTML and fetching data from an API response?

What could be causing the delay in Express when transitioning between console logs while using AngularJS $http.get?

Vue.js is experiencing functionality issues on mobile devices and other connected devices, however, it is operating smoothly on desktop devices when localhost is running

Oh no, the dreaded encounter with Gulp, Vue, Webpack, Babel causing an unexpected token import SyntaxError!

Sorting items using jQuery filter

Generating views for individual models in a backbone collection

How can I accommodate pushState routes from Backbone.js on a node.js express server?

Using Javascript to define cookie values

Node.js refuses to launch - the dreaded error 404, signaling that it has mysteriously vanished

Tips for identifying functions that return objects