Mike Bostock

A guided tour of your first steps using D3.

Learn D3

Minh Thanh

I don't understand the syntax in this cell: "replay, html..." -- what happens when a cell starts with an external object (replay) follower by a comma, etc.

Dan S. Reznik

i don't understand the idea of including a reference to a button such as "replay;" at the beginning of a javascript block

It may be helpful to further clarify the purpose of this line, since it's not necessary for this particular notebook. zx can be eliminated and replaced with x.

const zx = x.copy(); // x, but with a new domain.

Without the copy, setting the domain on update would mutate the scale x. We don’t want to do that because the scale x is used by other cells in this notebook.

Thanks for clarifying. Didn't realize I needed to "replay" the earlier animations to expose the mutation issue with a shared x.

@mbostock the overall approach here works a treat, but this anonymous chart.update cell seems to throw a spanner in the works when it comes to embedding (try embedding @d3/modifying-a-force-directed-graph, for example).

I've found a fix in @bayre/splitting-the-bunch by using htl to call the update method directly from the input, but I'm keen to know if there's a better way to make this work.

Ben Ayre

Great point! I’ve updated this notebook to name the update cell so that you can import and embed it. If you’re using the Embed code action in the cell menu, you’ll need to edit the generated code to also evaluate the update cell. See Jeremy’s helper:

https://observablehq.com/@jashkenas/handy-embed-code-generator

If you’re importing this chart into another notebook, you can say:

import {chart, update, viewof timeframe} from "@d3/learn-d3-animation"

Then you’ll need to embed all three cells in your notebook.

Wouldn't generator also recreate the entire graphic each time?

Noah Song

It depends on how the generator is implemented. The cell above uses a generator (it yields), but it repeatedly yields the same SVG element after modifying it. Hence, it’s not necessary to recreate the entire graphic when using a generator, although it may be simpler to do so if the performance is acceptable.