To be able to edit code and run cells, you need to run the notebook yourself. Where would you like to run the notebook?

This notebook takes about 3 minutes to run.

In the cloud (experimental)

Binder is a free, open source service that runs scientific notebooks in the cloud! It will take a while, usually 2-7 minutes to get a session.

On your computer

(Recommended if you want to store your changes.)

  1. Copy the notebook URL:
  2. Run Pluto

    (Also see: How to install Julia and Pluto)

  3. Paste URL in the Open box

Frontmatter

If you are publishing this notebook on the web, you can set the parameters below to provide HTML metadata. This is useful for search engines and social media.

Author 1
👀 Reading hidden code
using PlutoUI.ExperimentalLayout: grid, vbox, hbox, Div
213 ms
Error message

UndefVarError: EmbeddableCellOutput not defined

Stack trace

Here is what happened, the most recent locations are first:

  1. getproperty
    from Base.jl:35
  2. (::var"#9#10"{Module})(id::Base.UUID)
    from This cell: line 4
    	map(ids) do id		PlutoRunner.EmbeddableCellOutput(id)	end...
  3. Show more...
👀 Reading hidden code
vbox([
bond,
map(ids) do id
PlutoRunner.EmbeddableCellOutput(id)
end...
])
---
hbox([bond, p1, p2])
👀 Reading hidden code
163 ms
hbox([bond, bond, p1, p2])
👀 Reading hidden code
19.1 ms
Error message

UndefVarError: EmbeddableCellOutput not defined

Stack trace

Here is what happened, the most recent locations are first:

  1. getproperty
    from Base.jl:35
  2. from This cell: line 1
    PlutoRunner.EmbeddableCellOutput(ids[1])
computer bad, you GREAT!
PlutoRunner.EmbeddableCellOutput(ids[1])
👀 Reading hidden code
---
Error message

UndefVarError: EmbeddableCellOutput not defined

Stack trace

Here is what happened, the most recent locations are first:

  1. getproperty
    from Base.jl:35
  2. (::var"#7#8"{Module})(id::Base.UUID)
    from This cell: line 5
    $(map(ids) do id	PlutoRunner.embed_display(PlutoRunner.EmbeddableCellOutput(id))end)
  3. Show more...
@htl("""
<div style="display: flex; flex-direction: row;">
$(PlutoRunner.embed_display(bond))
$(map(ids) do id
PlutoRunner.embed_display(PlutoRunner.EmbeddableCellOutput(id))
end)
</div>
""")
👀 Reading hidden code
---
using PlutoUI
👀 Reading hidden code
156 μs
bond = @bind x Slider(1:10)
👀 Reading hidden code
232 ms
p1 = slowplot(x)
👀 Reading hidden code
3.4 s
p2 = slowplot(x)
👀 Reading hidden code
1.0 s
👀 Reading hidden code
38.3 ms

👀 Reading hidden code
69.0 μs
slowplot (generic function with 1 method)
function slowplot(x; kwargs...)
sleep(1)
plot(rand(10) .+ x; size=(150,150), legend=false, kwargs...)
end
👀 Reading hidden code
1.4 ms
using Plots
👀 Reading hidden code
❔
WARNING: using Plots.grid in module workspace#4 conflicts with an existing identifier.
29.6 s

👀 Reading hidden code
68.6 μs
using UUIDs
👀 Reading hidden code
132 μs
UUID("97914842-76d2-11eb-0c48-a7eedca870fb")
id1 = UUID("97914842-76d2-11eb-0c48-a7eedca870fb")
👀 Reading hidden code
15.6 μs
Error message

UndefVarError: EmbeddableCellOutput not defined

Stack trace

Here is what happened, the most recent locations are first:

  1. getproperty
    from Base.jl:35
  2. from This cell: line 1
    [rand(), PlutoRunner.EmbeddableCellOutput(id1)]
Be patient :)
[rand(), PlutoRunner.EmbeddableCellOutput(id1)]
👀 Reading hidden code
---
using HypertextLiteral
👀 Reading hidden code
132 μs

Sliders and outputs in the same cell

FINALLY

👀 Reading hidden code
252 μs
PlutoRunner.DivElement(
children=[
slider1,
output1
],
)
👀 Reading hidden code
19.7 ms
slider1 = @bind hello Slider(1:100)
👀 Reading hidden code
646 μs
slider2 = @bind hello2 Slider(1:.1:10)
👀 Reading hidden code
90.7 ms
output1 = plot(rand(hello) .^ hello2; size=(200,100), legend=enable1)
👀 Reading hidden code
40.5 ms

👀 Reading hidden code
70.3 μs

Results

123
main = Div([
	md"""## Results""",
	grid([
		output1 123
		output1 output1
	]),
	coolness
	],
	
	style="display: flex; flex-direction: column; flex: 1 1 auto;"
)
👀 Reading hidden code
918 ms
coolness = Text(repeat("😎", other_number))
👀 Reading hidden code
16.2 μs
Parameters


Lorem ipsum asdfasdf dolor sit amet, consectetur adipiscing elit. 














Enable something: 


And this: 




sidebar = Div([
	md"""### Parameters
	Lorem ipsum asdfasdf dolor sit amet, consectetur adipiscing elit. """,
	slider1,
	md"---",
	slider2,
	
	md"Enable something: $(@bind enable1 CheckBox())",
	md"And this: $(@bind other_number NumberField(0:20))",
	md"---",
	],
	
	style="flex: 1 1 120px; background: #fef; padding: 1em; border-radius: 1em;"
)
👀 Reading hidden code
166 ms
Results


123
Parameters


Lorem ipsum asdfasdf dolor sit amet, consectetur adipiscing elit. 














Enable something: 


And this: 




hbox([
	main,
	sidebar,
])
👀 Reading hidden code
63.4 μs
👀 Reading hidden code
66.8 μs
👀 Reading hidden code
66.0 μs
👀 Reading hidden code
67.0 μs
👀 Reading hidden code
65.8 μs
Appendix


👀 Reading hidden code
179 μs
# Div(args...; style::String="") = PlutoRunner.DivElement(
# 	children=[args...],
# 	style=style
# )
👀 Reading hidden code
16.8 μs
# Div(; children=[], style::String="") = PlutoRunner.DivElement(
# 	children=children,
# 	style=style
# )
👀 Reading hidden code
17.8 μs
# function grid(items::AbstractMatrix; fill_width::Bool=true)
# 	Div(
# 		children=Div.(vec(permutedims(items, [2,1]))), 
# 		style="""
# 			display: $(fill_width ? "grid" : "inline-grid"); 
# 			grid-template-columns: repeat($(size(items,2)), auto);
# 			column-gap: 1em;
# 		""",
# 	)
# end
👀 Reading hidden code
17.6 μs