diff --git a/docs/build_example_docs.jl b/docs/build_example_docs.jl index 3c23578e..c7fb5160 100644 --- a/docs/build_example_docs.jl +++ b/docs/build_example_docs.jl @@ -5,7 +5,7 @@ puts each example from the julia file into a code block and adds a short html div below with the interactive output. =# using PlotlyJS -using Distributions, Quandl, RDatasets # used in examples +using Distributions, Random, Dates, DataFrames, RDatasets, Colors, LinearAlgebra # used in examples doc_style = Style(layout=Layout(margin=attr(t=60, b=60, l=50, r=50))) @@ -32,6 +32,7 @@ use_style!(doc_style) # Walk through each example in a file and get the markdown from `single_example` function single_file(filename::String) + println("Creating docs for $filename") # Open a file to write to open(joinpath(this_dir, "examples", filename[1:end-3]*".md"), "w") do outfile @@ -45,17 +46,17 @@ function single_file(filename::String) while true # Find next function name (break if none) l = findnext(x -> match(regex, x) != nothing, all_lines, l+1) - if l == 0 + if l == 0 || isnothing(l) break end + fun_name = match(regex, all_lines[l])[1] + println("\tadding $fun_name") + # find corresponding end for this function end_l = findnext(x -> match(regex_end, x) != nothing, all_lines, l+1) # Pull out function text func_block = join(all_lines[l:end_l], "\n") - fun_name = match(regex, all_lines[l])[1] - - println("adding $fun_name") # Get html block plt = eval(Expr(:call, Symbol(fun_name))).plot @@ -71,3 +72,4 @@ function single_file(filename::String) end main() = map(single_file, all_julia_files) +main() diff --git a/docs/examples/animation.md b/docs/examples/animation.md new file mode 100644 index 00000000..adbf389d --- /dev/null +++ b/docs/examples/animation.md @@ -0,0 +1,102 @@ +```julia +function animation() + # create the initial plot + traces = [scatter(;name="Slope = 1",marker_color="red",x=1:5,y=1:5), + scatter(;name="Slope = -1",marker_color="blue",x=1:5,y=5:-1:1)] + + # create frames + m = 1:10 + frames = Vector{PlotlyFrame}(undef, 10) + for i in m + frames[i] = frame(name="$i", + data=[attr(name="Slope = $i", y=i*(1:5)), # data array must have as many attributes as there are traces for expected behavior + attr(name="Slope = -$i", y=i*(5:-1:1))]) # it is not necessary to update every field in each trace, but only the fields that are changing + end + + # create layout with pause play, buttons, slider to use frames + layout = Layout(title="Animation Example", + yaxis=attr(autorange=false, range=[0,51]), + updatemenus=[attr(x=0, + y=0, + xanchor="left", + yanchor="top", + method="animate", + type="buttons", + direction="left", + buttons=[attr(method="animate", + label="Play", + args=[nothing, # nothing is translated into javascript NULL and in this case mean to turn on animation + attr(mode="immediate", + + fromcurrent="true", + transition=attr(duration=300), + frame=attr(duration=500, + redraw=true) + ) + ] + ), + attr(method="animate", + label="Pause", + args=[[nothing], # [nothing] is translated into javascript [NULL] and in this case mean to turn off animation + attr(mode="immediate", + fromcurrent="true", + transition=attr(duration=300), + frame=attr(duration=500, + redraw=true) + ) + ] + ) + ] + ) + ], + sliders=[attr(active=0, + pad=attr(l=200, t=55), + currentvalue=attr(visible=true, + xanchor="right", + prefix="slope: "), + steps=[attr(label=i, + method="animate", + args=[["$i"], # match the frame[:name] with the first element of this array + attr(mode="immediate", + transition=attr(duration=300), + frame=attr(duration=500, + redraw=true) + ) + ] + ) + for i in m ] + ) + ] + ) + + plot(traces, layout, frames) +end +animation() +``` + + + + + + diff --git a/examples/animation.jl b/examples/animation.jl new file mode 100644 index 00000000..55e46735 --- /dev/null +++ b/examples/animation.jl @@ -0,0 +1,74 @@ +using PlotlyJS + +function animation() + # create the initial plot + traces = [scatter(;name="Slope = 1",marker_color="red",x=1:5,y=1:5), + scatter(;name="Slope = -1",marker_color="blue",x=1:5,y=5:-1:1)] + + # create frames + m = 1:10 + frames = Vector{PlotlyFrame}(undef, 10) + for i in m + frames[i] = frame(name="$i", + data=[attr(name="Slope = $i", y=i*(1:5)), # data array must have as many attributes as there are traces for expected behavior + attr(name="Slope = -$i", y=i*(5:-1:1))]) # it is not necessary to update every field in each trace, but only the fields that are changing + end + + # create layout with pause play, buttons, slider to use frames + layout = Layout(title="Animation Example", + yaxis=attr(autorange=false, range=[0,51]), + updatemenus=[attr(x=0, + y=0, + xanchor="left", + yanchor="top", + method="animate", + type="buttons", + direction="left", + buttons=[attr(method="animate", + label="Play", + args=[nothing, # nothing is translated into javascript NULL and in this case mean to turn on animation + attr(mode="immediate", + + fromcurrent="true", + transition=attr(duration=300), + frame=attr(duration=500, + redraw=true) + ) + ] + ), + attr(method="animate", + label="Pause", + args=[[nothing], # [nothing] is translated into javascript [NULL] and in this case mean to turn off animation + attr(mode="immediate", + fromcurrent="true", + transition=attr(duration=300), + frame=attr(duration=500, + redraw=true) + ) + ] + ) + ] + ) + ], + sliders=[attr(active=0, + pad=attr(l=200, t=55), + currentvalue=attr(visible=true, + xanchor="right", + prefix="slope: "), + steps=[attr(label=i, + method="animate", + args=[["$i"], # match the frame[:name] with the first element of this array + attr(mode="immediate", + transition=attr(duration=300), + frame=attr(duration=500, + redraw=true) + ) + ] + ) + for i in m ] + ) + ] + ) + + plot(traces, layout, frames) +end \ No newline at end of file diff --git a/src/display.jl b/src/display.jl index 1342e50e..d8c2c00b 100644 --- a/src/display.jl +++ b/src/display.jl @@ -21,7 +21,8 @@ function SyncPlot( options::AbstractDict=Dict("showLink"=> false), kwargs... ) - lowered = JSON.lower(p) + obj = JSON.lower(p) + obj[:config] = options id = string("#plot-", p.divid) # setup scope @@ -97,7 +98,7 @@ function SyncPlot( # Draw plot in container Plotly.newPlot( - gd, $(lowered[:data]), $(lowered[:layout]), $(options) + gd, $(obj) ) # hook into plotly events