Navigation improvement-link timeline chart to treemap

[adamajm]

In Budget Explorer page, there seems to be 2 different ways to change the data view: the primary is the dropdown in the top right, and secondly is the timeline chart in the bottom left. Selecting a year in the dropdown drives events in both charts. However, if you change the year by clicking on the timeline chart in bottom left, the totals in top left change to reflect the same, but the treemap remains linked to whatever year was last selected in the dropdown menu in the top right.

Can we edit the avb.js so that selecting the year on the timeline chart creates an event that changes the year for dropdown/treemap as well?

[craigmcginley]

Inside chart.js there is the slideLayers function, and that houses a function updateInfo. Append these lines to the end of updateInfo...

changeYear(year);
$('#yeardrop-label').html(year + "<b class='caret'></b>");

I'm guessing the original authors decided against this because it works pretty slow. Also, I haven't tested it much, so you'll have to play around with it. Hope it helps, and good luck! Happy to hear you're adopting Visual Budget for Raleigh!

[craigmcginley]

I'll see if I can't change it so that the treemap only updates when the drag is completed... Should help the speed a bit.

[craigmcginley]

Alternatively... Ignore the first comment of mine and change the dragEnd function in chart.js to this:

function dragEnd(e) {
  function updateTreemapData(year) {
    changeYear(year);
    $('#yeardrop-label').html(year + "<b class='caret'></b>");
  }

  e = d3.event;
  e.preventDefault();

  var x;

  // makes event valid for both touch and mouse devices 
  if (e.type === 'touchmove') {
    x = e.touches[0].pageX;
  } else {
    //solves some IE compatibility issues
    x = e.offsetX || d3.mouse(this)[0];
  }

  updateTreemapData(Math.round(chart.xscale.invert(x)));

  mousedown = false;
};

Or allow me to contribute a PR. Again, not put through any testing.

[justingreco]

It looks like this change worked. I have made the changes and pushed them to the web server. Thanks so much for the quick response.

[craigmcginley]

No problem! I wouldn't think it would break any other aspects of the site, but you'll probably want to put it through some testing either way. Thanks.

[justingreco]

Re-opening for testing.

[adamajm]

Thank you Craig and Justin!

[chavisa]

I re-tested to confirm if year is changed by the drop down (top right), that change is reflected in the timeline chart bottom left). Also, the reverse - when the year is changed on the timeline chart, the drop down would change to the same year. Found that it works in Chrome and IE, but did not work in FF. With FF, changing the year via the drop down menu caused the timeline chart to change to the matching year. But in reverse, if the year is changed via the timeline chart, that does not propagate to the drop down menu. The drop down menu remained the same year.

[adamajm]

Apologies I accidentally closed this when I reverted Justin's changes.

Referring back to Allen's issue in Firefox. He found that this fix it works in Chrome and IE, but did not work in FF. With FF, changing the year via the drop down menu caused the timeline chart to change to the matching year. But in reverse, if the year is changed via the timeline chart, that does not propagate to the drop down menu. The drop down menu remained the same year.

We also have a related bug #64 associated with these changes.