Enhancing Donut Chart with d3.js

Question

Enhancing Donut Chart with d3.js

After working for several hours, I'm having trouble getting my d3.js donut graph to update with new data.

Here's my HTML:

  <body>
    <div id="pie"></div>
    <script src="pie.js"></script>
  </body>

And here's my JavaScript code:

var dataset = [40, 20];

var width = 460,
  height = 300,
  radius = Math.min(width, height) / 2;

var color = ['#000000', '#FFFFFF'];

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

function render() {
  var pie = d3.pie()
    .sort(null);

  var arc = d3.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

  var path = svg.selectAll("path")
    .data(pie(dataset))
    .enter().append("path")
    .attr("fill", function(d, i) { return color[i]; })
    .attr("d", arc);
}

render();

function update() {

  dataset[0] = 100;

  render();
}

Although the donut graph is drawn successfully, calling the update() function doesn't refresh the graph on screen with the updated dataset.

I've looked at examples of bar charts using enter, append, and exit methods, but I'm struggling to apply them in my case.

If anyone can provide some guidance, it would be greatly appreciated. Thank you!

javascript d3.js

Answer 1

Answer №1

It is important to note that simply updating the data will not automatically reflect changes in the chart. To update the chart itself, you need to establish an "update" selection.

Currently, you only have an "enter" selection:

var path = svg.selectAll("path")
    .data(pie(data)).enter().append("path")
    .attr("fill", function(d, i) { return color[i]; })
    .attr("d", arc);

Whenever the dataset is changed, no visible changes occur in the chart because the "enter" selection remains empty. You could try selecting something non-existent:

var path = svg.selectAll(".foo")

However, this solution is not ideal as it will result in multiple paths accumulating in your SVG.

The recommended approach is to create both an "enter" and an "update" selection:

//binding the data:
var path = svg.selectAll("path")
    .data(pie(data));

//creating the "enter" selection:
var pathEnter = path.enter().append("path")
    .attr("fill", function(d, i) { return color[i]; })
    .attr("d", arc);

//establishing the "update" selection:
var pathUpdate = path.attr("d", arc);

Refer to this demo:

var dataset = [40, 20];

var width = 300,
    height = 200,
    radius = 150;

var color = ['#222', '#EEE'];

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

function render(data) {
    var pie = d3.pie()
        .sort(null);

    var arc = d3.arc()
        .innerRadius(radius - 100)
        .outerRadius(radius - 50);

    var path = svg.selectAll("path")
        .data(pie(data));

    var pathEnter = path.enter().append("path")
        .attr("fill", function(d, i) {
            return color[i];
        })
        .attr("d", arc);

    var pathUpdate = path.attr("d", arc);


}

render(dataset);

setInterval(function() {
    update();
}, 2000);

function update() {

    dataset = [Math.random() * 50, Math.random() * 50];

    render(dataset);
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="pie"></div>

Answer 2

It is important to note that simply updating the data will not automatically reflect changes in the chart. To update the chart itself, you need to establish an "update" selection.

Currently, you only have an "enter" selection:

var path = svg.selectAll("path")
    .data(pie(data)).enter().append("path")
    .attr("fill", function(d, i) { return color[i]; })
    .attr("d", arc);

Whenever the dataset is changed, no visible changes occur in the chart because the "enter" selection remains empty. You could try selecting something non-existent:

var path = svg.selectAll(".foo")

However, this solution is not ideal as it will result in multiple paths accumulating in your SVG.

The recommended approach is to create both an "enter" and an "update" selection:

//binding the data:
var path = svg.selectAll("path")
    .data(pie(data));

//creating the "enter" selection:
var pathEnter = path.enter().append("path")
    .attr("fill", function(d, i) { return color[i]; })
    .attr("d", arc);

//establishing the "update" selection:
var pathUpdate = path.attr("d", arc);

Refer to this demo:

var dataset = [40, 20];

var width = 300,
    height = 200,
    radius = 150;

var color = ['#222', '#EEE'];

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

function render(data) {
    var pie = d3.pie()
        .sort(null);

    var arc = d3.arc()
        .innerRadius(radius - 100)
        .outerRadius(radius - 50);

    var path = svg.selectAll("path")
        .data(pie(data));

    var pathEnter = path.enter().append("path")
        .attr("fill", function(d, i) {
            return color[i];
        })
        .attr("d", arc);

    var pathUpdate = path.attr("d", arc);


}

render(dataset);

setInterval(function() {
    update();
}, 2000);

function update() {

    dataset = [Math.random() * 50, Math.random() * 50];

    render(dataset);
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="pie"></div>

Answer 3

Answer №2

Find the GitHub repository for the d3 donut sanky chart here

https://i.stack.imgur.com/aEZ1x.png

[![The donut chart has been updated to display text in the center]

 const data = {
      'fleetView': [
        {
          'VesselName': 'MOL Emissary',
          'IMO': '07158',
          'QS': 'Good',
          'SeaState': 'Under Way using engine',
          'STW': '12.4/11.6',
          'DepPort': 'DK RNN',
          'ArrPort': 'DK RNN',
          'Course': '123',
          'Speed': '11.7 km',
          'CurrentDraught': '10 m',
          'Start': '2019-02-18T00:42:55Z',
          'End': '0001-01-01T00:00:00Z'
        },
        // Rest of the vessel data goes here
      ]
    };

    function groupingBy(data, groupby) {
      return _.groupBy(data, groupby);
    }

    // More functions and D3 code for visualizing the data

// Further javascript script and visualization details can be found <a href="https://i.stack.imgur.com/qfIS0.png" rel="nofollow noreferrer">here</a>.

]2]2

Answer 4

Find the GitHub repository for the d3 donut sanky chart here

https://i.stack.imgur.com/aEZ1x.png

[![The donut chart has been updated to display text in the center]

 const data = {
      'fleetView': [
        {
          'VesselName': 'MOL Emissary',
          'IMO': '07158',
          'QS': 'Good',
          'SeaState': 'Under Way using engine',
          'STW': '12.4/11.6',
          'DepPort': 'DK RNN',
          'ArrPort': 'DK RNN',
          'Course': '123',
          'Speed': '11.7 km',
          'CurrentDraught': '10 m',
          'Start': '2019-02-18T00:42:55Z',
          'End': '0001-01-01T00:00:00Z'
        },
        // Rest of the vessel data goes here
      ]
    };

    function groupingBy(data, groupby) {
      return _.groupBy(data, groupby);
    }

    // More functions and D3 code for visualizing the data

// Further javascript script and visualization details can be found <a href="https://i.stack.imgur.com/qfIS0.png" rel="nofollow noreferrer">here</a>.

]2]2

Enhancing Donut Chart with d3.js

Answer №1

Answer №2

Similar questions

The script fails to work correctly when displaying the data

How to efficiently transfer data between PHP and Javascript using ajax?

How can we use JavaScript to retrieve an element with custom styling?

Using WebRTC on a shared hosting environment (with SSH access) without the need for nodejs, ideally implemented in PHP

Integrating jQuery into the functions.php file of a Wordpress

Unable to display the complete JSON data using ng-repeat in AngularJS

Problem encountered with imaskJS in handling the formatting of data with forward slashes

Troubleshooting the issue with Protractor/Jasmine test when browser.isElementPresent does not detect a class in the

Create dynamic HTML files using Express, EJS, and FS, and deliver them using Nginx as the server instead of relying

Error: Attempting to access the 'firstChild' property of a null object when trying to display a street view panorama with Vue.js

Can object-fit be preserved while applying a CSS transform?

Navigating through paginated data can be made easier by using Backbone.PageableCollection in conjunction with a personalized

Is it possible to modify the object's key value when generating an array value with the map function in React?

How can we wrap the Vuex store within a Vue plugin's install function?

The onclick event for a Bootstrap .btn-group checkbox functions correctly in JSFiddle, but encounters issues when tested

Unable to integrate a new third-party script into a Next.js application

Trigger animation once you've scrolled past a designated point in the document

Setting up a custom function for the cancel button in Angular X-editable

Is there a simple method to automatically increase the version number of Mongoose documents with each update request?

What is the best way to determine the total of values from user-input fields that are created dynamically