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

JQuery Mobile fails to apply consistent styling to user input check items within a list

Customize Popover Color in SelectField Component

Methods for removing cookie during logout with Express and Passport JS?

Run C# script with the assistance of .load jquery

How can the horizontal scroll bar width be adjusted? Is it possible to create a custom

Disable Button's Shadow when it is in an active state (clicked)

Tips for ensuring proper function of bullets in glidejs

Error in Express Post Request: Headers cannot be modified after being sent to the client

Hide elements forever once the form is submitted

What causes req.sessions to show an empty object instead of the expected value?

Vue is removing a DOM node during the created lifecycle hook to set up a component

Service Worker's fetch event is not triggered upon registering the service worker

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

Ways to showcase a JavaScript popup on an Android WebView

Updating the default color of selected text within a webpage's content

Deciphering the Essence of Promise Sequences

Comparison between JSON Serializers and .NET Serialized Classes for Retrieving jQuery AJAX Result Data

Selenium, scrolling through web pages

Stable Banner with Automatic Scroll to Sections

exploring the digital archives for a specific song file on the computer