31:T4ee,With [Single Document View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#how_these_transitions_work) starting to gain more browser support, I wanted to see if they could be used to transition between Observable Plots. Unfortunately, the tl;dr as of March 2025 is that they don't. According to [this StackOverflow answer](https://stackoverflow.com/a/79325156/3246758), the SVG as a whole is treated as embedded content: you get a cross-fade on the whole thing, but the elements inside don't otherwise animate. You can see this below: the HTML example is animated properly, but the Observable Plot and the simpler SVG are both cross-faded. Crossing my fingers that this changes down the line! Also, the Chrome team [notes](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#how_these_transitions_work) that: > _In collaboration with the CSS Working Group, the Chrome team is looking into a way to allow you to more easily and automatically give elements a view-transition-name in the future._ I think each individual dot in the chart below would need to receive its own `view-transition-name` as well. You can see I experimented a bit with this by manually labelling the first five dots.32:[{"id":"9aedec10fd956ef0b61285cafc666efd3e2683993d8d52319e235fa78bcac3704d3627c4f7b5730243eb983af1a9427fd226c2a610a52057af2804c7fd7c7597","href":"https://static.observableusercontent.com/files/9aedec10fd956ef0b61285cafc666efd3e2683993d8d52319e235fa78bcac3704d3627c4f7b5730243eb983af1a9427fd226c2a610a52057af2804c7fd7c7597","name":"acornsat-long-annual-melbourne@1.csv","type":"text/csv","lastModified":1742266873395.549,"size":6250}] 2f:{"title":"View Transition API","cells":[{"id":0,"value":"# View Transition API","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"# First test: Observable Plot","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"melbourne = FileAttachment(\"acornsat-long-annual-melbourne@1.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof field = Inputs.select(new Map([\n [\"Daytime temperatures\", \"tmax\"],\n [\"Nighttime temperatures\", \"tmin\"]]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"Normally, you'd filter the data directly with `filteredTemps = melbourne.filter(...)`. I'm assuming a `mutable` so we can do the update inside `document.startViewTransition()` instead.","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"mutable filteredTemps = melbourne","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"And here's the code where we start the view transition:","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"updateTemps = {\n document.startViewTransition(() => {\n mutable filteredTemps = melbourne.filter(d => d.name == field)\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"tmaxPlot = Plot.plot({\n marks: [\n Plot.line(filteredTemps, {\n x: \"year\",\n y: \"value\",\n stroke: field == \"tmax\" ? \"orangered\" : \"royalblue\"\n }),\n Plot.dot(filteredTemps, {\n x: \"year\",\n y: \"value\",\n fill: field == \"tmax\" ? \"orangered\" : \"royalblue\",\n })\n ],\n className: \"testplot\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":115,"value":"Well, we get a cross-fade at least!","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"# Second test: HTML\n\nLet's try the same technique with some simple HTML divs, as most of the documented examples show:","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"mutable myDiv = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof field2 = Inputs.select(new Map([\n [\"Daytime temperatures\", \"tmax\"],\n [\"Nighttime temperatures\", \"tmin\"]]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":79,"value":"updateDivTemps = {\n document.startViewTransition(() => {\n mutable myDiv = html`

${field2}

`\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"That seems to work, even with no `transition` property defined. What about for a simpler SVG?\n\n# Third test: simple SVG","pinned":false,"hidden":false,"mode":"html"},{"id":90,"value":"mutable mySVG = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"viewof field3 = Inputs.select(new Map([\n [\"Daytime temperatures\", \"tmax\"],\n [\"Nighttime temperatures\", \"tmin\"]]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"updateSVGTemps = {\n document.startViewTransition(() => {\n mutable mySVG = svg``\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}