Imports and hover lag

Community Help
1

I have a notebook with a pair of charts visualizing some COVID data, but my second chart (a D3 chart that employs a cell import ) isn’t quite working.

Initially, when I was developing this notebook the chart was correctly showing my data. But, when I re-opened this notebook recently the chart displayed the original data instead. I experimented a bit, but was unable to restore my data.

The second issue, was a lag in the interactive hover behavior. When the data override was functional, the mouseover interactivity was erratic: the highlight and hover info would appear for some lines and skip others. Any idea what might be happening here?

2

We’re in the process of redesigning the D3 example charts to make them easier to reuse. For example, you can now say:

import { LineChart } from "@d3/multi-line-chart"

And then you get an interactive chart of your tidy data:

untitled-105
untitled-1052304×800 369 KB 

LineChart(state_data, {
  width,
  x: (d) => d.Date,
  y: (d) => d.Rate,
  z: (d) => d.Location
})

If you’d prefer to use the old version of the Line Chart example, you can instead pin your import like so:

import { chart } with { final_data as data } from "@d3/multi-line-chart@299"

Though, the new LineChart function seems to fix the erratic hover behavior, so I’d recommend trying the new approach.

3

Thank you for the timely response. I’m a big fan of the cell import concept and happy to see the functionality is continuing to evolve.
Cheers