Reload chart after update data

Community Help
1

I’m trying to update a chart based on a order selection (Alphabetical, Frequency Descending and Frequency Ascending). Currently I’m able to update the Y axis but the plot area is getting stuck.
I’ve tried many approaches but I cannot find the proper way to reload the chart after user select the order. Does somebody knows how to fix this problem?

My chart

2

In the svg.node().update function, remove the line

group.select("path").selectAll('path').exit().remove();

and add the line

group.attr("transform", d => `translate(0,${y(d.name) + 1})`);

The function will now look like this:

svg.node().update = () => {
  gx.call(xAxis);
  gy.call(yAxis);
  group.attr("transform", d => `translate(0,${y(d.name) + 1})`);
};

The reason for this is that after changing the y scale, you need to update the position of the groups that contain the area charts.

3

Another option would be to just let Observable re-draw the entire chart each time the data changes. This is simpler since it would take advantage of Observable’s reactive runtime and you wouldn’t need to call an update function. Though if you’re looking to add animated transitions when the sorting order changes, then I think your current approach with the update function is the way to go.

4

Thank you so much for your response really appreciate it. Now it works like a charm!
Yes the idea is add an animate transition.