what is the best way to update pie chart on hover of bars in a bar chart - d3

With the help of this post I've got a some flexibility on mouse over events in d3.

And I've managed to show some values on hovering on the bars.

Now that if I'm creating a pie chart and if I wanted to update that pie chart on hovering the bars of the bar chart. What will be the best way for me to include the pie chart data to the existing data in this FIDDLE and how can i retrieve that data for the pie chart?

I'm looking for something like this.

In the above example if you hover of the rect. Bar chart on the right bottom corner gets updated.

I couldn't find any code given for that. But found this in the page source.

Any suggestions can be helpful for me to achieve this.

Thanks in advance!!

Answers


You can try something like crossfilter

http://square.github.io/crossfilter/

UPDATE

The idea is that you update the pie chart with when you get a click on the master chart (bar chart).

Let's say your data looks something like:

var ds = [
    { key: 'A', values: [1,2,3,4], sum: function () { return d3.sum(this.values); } },
    { key: 'B', values: [20, 30, 40], sum: function () { return d3.sum(this.values); } },
    { key: 'C', values: [100, 200, 300], sum: function () { return d3.sum(this.values); } }
];

And you have a function to create/update the pie like:

function updatePie(svg, data, radius) {
    var color = d3.scale.category20c();
    var arc = d3.svg.arc().outerRadius(radius);
    var formattedData = d3.layout.pie()(data);
    var slice = svg.selectAll('.slice')
        .data(formattedData);

    slice.enter()
        .append('path')
        .attr('fill', function(d, i) { return color(i); })
        .attr('class', 'slice')
        .attr('d', arc);

    slice
        .attr('d', arc);

    slice.exit()
        .remove();
}

Now on the click handler for your bar chart you do

var clickHandler = function (dataPoint) {
    updatePie(svg, dataPoint.values, r);
};

Here's a working example using just list for the master (replacing the bar chart) but the idea is the same:

http://jsfiddle.net/jaimedp/q45z6/1/

Hope this helps


Need Your Help

How to get Leaflet for R use 100% of Shiny dashboard height

r shiny leaflet shinydashboard

I am in the process of creating a Shiny dashboard application, where the dashboard body is supposed to show some maps. So far no problem to get the map expand over the entire width of the body, but...

Need to count matches and replace "nth" match using preg_replace_callback

php regex replace preg-replace-callback

I need to search through some content and enclose certain words with HTML. The words to search for are in an array, and I want to only replace the 2nd to last occurrence of each set of matches. So,...