Determining the percentage of a bar in d3.js when hovering over it

Question

Determining the percentage of a bar in d3.js when hovering over it

I am working with a d3 chart and looking to implement a tooltip feature that displays the label of the bar section along with the percentage it represents in relation to the total bar. Initially, I considered calculating the height of the hovered section to determine its percentage contribution to the whole bar. Here is my current approach within the mouseover event that logs data on hover:

d3.select(this).style("height")

While this method works as intended, I am struggling to find a way to retrieve the overall height of the entire bar (inclusive of all sections) to create my equation.

What would be the best way to proceed with this task? Alternatively, are there more efficient methods for obtaining the percentage value?

javascript d3.js

Answer 1

Answer №1

Each rectangle's data includes all the bars in its column within a data property:

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

The data also contains the top and bottom values for the rectangle itself: d[0] and d[1].

We can calculate a percentage using this information:

.on("mouseover", function(d) { 
   var rectHeight = d[1] - d[0]; // Represents the top and bottom values of the rectangle.
   var columnHeight = d3.sum(d3.keys(d.data),function(k) {
      return +d.data[k]; // Sum of all bar heights in that column.
  });
  var percentHeight = rectHeight/columnHeight*100;

The units for rect height and column height mentioned above are not SVG units, but correspond to the dataset's units since we access the data directly without scaling.

d3.sum disregards NaN or undefined values, while the unary plus operator converts a string to a number, returning NaN if conversion is not possible. If you have a numerical x attribute, it needs to be excluded from the sum.

This results in the following snippet:

<!DOCTYPE html>
<meta charset="utf-8">
<svg id="chart" width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var data = [
  {month: "January", toys: 16591, games: 1047, books: 0, crafts: 5757},
  {month: "February", toys: 42337, games: 129, books: 835, crafts: 0},
  {month: "March", toys: 3385, games: 1053, books: 6260, crafts: 10},
  {month: "April", toys: 353, games: 3724, books: 4038, crafts: 0}
];

var series = d3.stack()
    .keys(["toys", "games", "books", "crafts"])
    .offset(d3.stackOffsetDiverging)
    (data);

var svg = d3.select("svg"),
    margin = {top: 20, right: 30, bottom: 30, left: 60},
    width = +svg.attr("width"),
    height = +svg.attr("height");

var x = d3.scaleBand()
    .domain(data.map(function(d) { return d.month; }))
    .rangeRound([margin.left, width - margin.right])
    .padding(0.1);

var y = d3.scaleLinear()
    .domain([d3.min(series, stackMin), d3.max(series, stackMax)])
    .rangeRound([height - margin.bottom, margin.top]);

var z = d3.scaleOrdinal(d3.schemeCategory10);

var colors = ['#000','#000','#000','#000'];

svg.append("g")
  .selectAll("g")
  .data(series)
  .enter().append("g")
    .attr("fill", function(d) { return z(d.key); })
  .selectAll("rect")
  .data(function(d) { return d; })
  .enter().append("rect")
    .attr("width", x.bandwidth)
    .attr("x", function(d) { return x(d.data.month); })
    .attr("y", function(d) { return y(d[1]); })
    .attr("height", function(d) { return y(d[0]) - y(d[1]); })
    .on("mouseover", function(d){
        var rectHeight = d[1] - d[0];
        var columnHeight = d3.sum(d3.keys(d.data),function(k) {
           return +d.data[k];
        });
        console.log(Math.round(rectHeight/columnHeight*100)+"%");
    })

svg.append("g")
    .attr("transform", "translate(0," + y(0) + ")")
    .call(d3.axisBottom(x));

svg.append("g")
    .attr("transform", "translate(" + margin.left + ",0)")
    .call(d3.axisLeft(y));

function stackMin(serie) {
  return d3.min(serie, function(d) { return d[0]; });
}

function stackMax(serie) {
  return d3.max(serie, function(d) { return d[1]; });
}

</script>

Answer 2

Each rectangle's data includes all the bars in its column within a data property:

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

The data also contains the top and bottom values for the rectangle itself: d[0] and d[1].

We can calculate a percentage using this information:

.on("mouseover", function(d) { 
   var rectHeight = d[1] - d[0]; // Represents the top and bottom values of the rectangle.
   var columnHeight = d3.sum(d3.keys(d.data),function(k) {
      return +d.data[k]; // Sum of all bar heights in that column.
  });
  var percentHeight = rectHeight/columnHeight*100;

The units for rect height and column height mentioned above are not SVG units, but correspond to the dataset's units since we access the data directly without scaling.

d3.sum disregards NaN or undefined values, while the unary plus operator converts a string to a number, returning NaN if conversion is not possible. If you have a numerical x attribute, it needs to be excluded from the sum.

This results in the following snippet:

<!DOCTYPE html>
<meta charset="utf-8">
<svg id="chart" width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var data = [
  {month: "January", toys: 16591, games: 1047, books: 0, crafts: 5757},
  {month: "February", toys: 42337, games: 129, books: 835, crafts: 0},
  {month: "March", toys: 3385, games: 1053, books: 6260, crafts: 10},
  {month: "April", toys: 353, games: 3724, books: 4038, crafts: 0}
];

var series = d3.stack()
    .keys(["toys", "games", "books", "crafts"])
    .offset(d3.stackOffsetDiverging)
    (data);

var svg = d3.select("svg"),
    margin = {top: 20, right: 30, bottom: 30, left: 60},
    width = +svg.attr("width"),
    height = +svg.attr("height");

var x = d3.scaleBand()
    .domain(data.map(function(d) { return d.month; }))
    .rangeRound([margin.left, width - margin.right])
    .padding(0.1);

var y = d3.scaleLinear()
    .domain([d3.min(series, stackMin), d3.max(series, stackMax)])
    .rangeRound([height - margin.bottom, margin.top]);

var z = d3.scaleOrdinal(d3.schemeCategory10);

var colors = ['#000','#000','#000','#000'];

svg.append("g")
  .selectAll("g")
  .data(series)
  .enter().append("g")
    .attr("fill", function(d) { return z(d.key); })
  .selectAll("rect")
  .data(function(d) { return d; })
  .enter().append("rect")
    .attr("width", x.bandwidth)
    .attr("x", function(d) { return x(d.data.month); })
    .attr("y", function(d) { return y(d[1]); })
    .attr("height", function(d) { return y(d[0]) - y(d[1]); })
    .on("mouseover", function(d){
        var rectHeight = d[1] - d[0];
        var columnHeight = d3.sum(d3.keys(d.data),function(k) {
           return +d.data[k];
        });
        console.log(Math.round(rectHeight/columnHeight*100)+"%");
    })

svg.append("g")
    .attr("transform", "translate(0," + y(0) + ")")
    .call(d3.axisBottom(x));

svg.append("g")
    .attr("transform", "translate(" + margin.left + ",0)")
    .call(d3.axisLeft(y));

function stackMin(serie) {
  return d3.min(serie, function(d) { return d[0]; });
}

function stackMax(serie) {
  return d3.max(serie, function(d) { return d[1]; });
}

</script>

Determining the percentage of a bar in d3.js when hovering over it

Answer №1

Similar questions

Accessing the URL causes malfunctioning of the dynamic routing in Angular 2

"What could be the reason for web3.eth.getAccounts() method returning an empty array when used with console.log

When the clearOnBlur setting is set to false, Material UI Autocomplete will not

Utilize external functions in evaluated code

When defining a stripe in TypeScript using process.env.STRIPE_SECRET_KEY, an error of "string | undefined" is encountered

Warning: MaxListenersExceededNotification may occur during the installation or creation of Node.js projects on macOS

Enhance the impact of "dialogs" to the fullest extent or minimize it to achieve the

Experiencing a lack of information in express?

animations are not triggering when using ng-click inside ng-repeat, is there a reason why the event is not firing?

I'm encountering inexplicable duplications of elements on my Wordpress site

Encountering a loading error with r.js while attempting to optimize

Leveraging recompose utility within the structure

Obtain the breakpoint value from Bootstrap 5

Adjusting the display of HTML elements depending on geolocation authorization

The sequence in which functions are executed when bound to an event in JavaScript

Unable to showcase information in the center of an HTML document

Nuxt's dynamic route generation results in a 400 error status code

Implement AngularJS to ensure that scripts are only loaded after the page has finished rendering

What methods are available to gradually increase a counter until it reaches a specific number by a designated date?

Invoke a React component within a conditional statement