https://observablehq.com/ logo
Join Slack
Powered by
This message was deleted.
# help
s
This message was deleted.
a
we tried exporting the two cells as a web page, where we could have them side by side, but then it looses interactivity between cells
g
I am thinking of 
viewof
cell. 1. You can set the programmatic value as something like 
chartCell1 = {…return html
chartElement` }`, and it presents a HTML UI in return. 2. but you can change 
chartElement.value
when clicking or hovering the elements. It will be returned as 
chartCell1
. Use 
chartCell1
as the interactively updated variable in the second chart cell. Just a thought. It would be awesome if there are other approaches or examples.😅
f
You can bring the elements together by referencing them all in another cell:
Copy code
htl.html`<div>
  ${swatch}
  <div style="margin-top: 20px; display: grid; grid-template-columns: .8fr 1fr">
    ${donutchart}
    ${parallelchart}
`
Doing so will remove them from their original cells, as an element can only exist at one place in the DOM. You'll notice that the original cells will now display 
<detached>
.
@angie I just saw that the interactivity is done via a side effects cell. Side effects in Observable are a pattern that is discouraged because it works around Observable's dataflow and prevents tracking of dependencies between cells. In order to run your side effects you would have to name the cell and include it in your embed. My recommendation is to have your side effects cell return the snippet that I shared above. That way you only need to include that particular cell.
a
uuugh, that seems promising but i don't get how do i set the value of a viewof
Copy code
colorView = html`<value=chart>`
doesn't do it
g
Try this 
viewof color = {
`let angie = html`<input type="color" value="#0000ff">`` 
console.log(angie.value)
return angie
}
f
While I'm a big advocate of introducing people to the power of viewof, I'm not sure that it contributes to solving the problem in this case (at least not without some major rewriting). 🙂
@angie Here are a few of the changes that I mentioned: https://observablehq.com/compare/b84556f73b0506cc...5a50ae726b31e5ba
a
wow thank you so much! just what i needed
🎉 2
Open in Slack
PreviousNext
Powered by