Charts overflow other cells in Firefox

Feedback
1

Not sure how to describe this, so here is a picture:

Screenshot-2018-4-23%20Hello%20dc%20js
Screenshot-2018-4-23%20Hello%20dc%20js1114Ɨ1036 45.3 KB

Works fine in Chrome and Safari.
This is the notebook:
https://beta.observablehq.com/@fil/hello-dc-js

2

There are two problems here.

First, Firefox doesnā€™t (yet) support ResizeObserver, so thereā€™s no easy way for Observable to tell when a cell resizes. So instead, Observable listens for load events to tell when a cell has resized.

Second, this notebook uses side effects and global DOM: the DC cell selects DOM elements created by other cells (view creates #dc-magnitude-chart etc.), and modifies their contents. (And doesnā€™t dispatch a load event to tell Observable that it mutated the DOM.)

Combined, Observable isnā€™t smart enough to detect (in Firefox) that the view cell has changed in height because it was mutated by the DC cell.

To be more idiomatic, this notebook could be rewritten to avoid side effects. Instead of creating the chart container in one cell and modifying it in another cell, create and initialize the chart in the same cell, and then return it. For example:

DC = {
  // Create a skeletal DOM for the charts.
  const view = md`<div class=container>ā€¦</div>`;

  // Create and initialize the DC charts.
  const magnitudeChart = dc.barChart(view.querySelector("#dc-magnitude-chart"));
  const depthChart = dc.barChart(view.querySelector("#dc-depth-chart"));
  const timeChart = dc.lineChart(view.querySelector("#dc-time-chart"));
  const dataTable = dc.dataTable(view.querySelector("#dc-table-graph"));
  ā€¦
  dc.renderAll();

  // Return the DOM container element.
  return view;
}
3

Thank you @Evan and @mbostock

Iā€™ve included the fix at https://beta.observablehq.com/@fil/hello-dc-js-v2 ā€” keeping the older version so that it might help people who stumble on this conversation.

The notebook is still a bit buggy in terms of the width of bars, but thatā€™s a DC.js setting I havenā€™t had time to look up yet. (Feel free to fork and update, Iā€™ll happily hand you the baton :))

4

Do Firefox support ResizeObserver already ?

Iā€™m having trouble in the chart resize, specially when the wrapper container shrinks. Iā€™m using the Runtime JS to embed. Everything seems fine on Chrome though.

5

@lucasborges Yes, see ResizeObserver - Web APIs | MDN. Please create a new topic if you still need help, and include a link to your notebook (or a simplified example).

1 Like