Demonstrates three ways to create navigation links in JSPlots
LinkList provides a styled navigation component for creating links between pages in multi-page reports or linking to external resources.
This page demonstrates three ways to use LinkList:
The simplest way to create a LinkList is to use the Pages constructor, which automatically generates navigation links from your JSPlotPage objects.
When you create a multi-page report using the Pages constructor, it automatically creates a LinkList
on the cover page with links to all subpages. The link text comes from each page's tab_title,
and the description comes from the notes parameter.
Here's how it works:
using JSPlots, DataFrames
# Create some pages
page1 = JSPlotPage(
Dict(:data => df1),
[chart1],
tab_title = "Revenue Analysis",
notes = "Detailed revenue trends and forecasts"
)
page2 = JSPlotPage(
Dict(:data => df2),
[chart2],
tab_title = "Cost Breakdown",
notes = "Operating costs by department and category"
)
# The Pages constructor automatically creates a LinkList
pages = Pages(
[TextBlock("<h1>Annual Report</h1>")], # Cover page content
[page1, page2] # Subpages
)
# This creates:
# - A cover page with an auto-generated LinkList
# - Links labeled "Revenue Analysis" and "Cost Breakdown"
# - Descriptions from the notes parameter
You can manually create a LinkList by providing a vector of tuples. Each tuple contains:
This approach gives you complete control over the links and is useful for:
Data: no_data
# Create a manual LinkList
links = LinkList([
("PivotTable", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/pivottable_examples.html", "Interactive drag-and-drop pivot tables"),
("Table", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/table_examples.html", "Sortable data tables with CSV download"),
("LineChart", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/linechart_examples.html", "Time series and trend visualization")
],
chart_title = :manual_example,
notes = "Click any link above to see examples of that chart type")
For larger navigation structures, you can use OrderedDict to organize links into sections with subheadings.
This is particularly useful for:
The OrderedDict preserves insertion order, ensuring sections appear in the sequence you define.
Data: no_data
od = OrderedCollections.OrderedDict{String, Vector{Tuple{String,String,String}}}()
od["OverView"] = [("GitHub Repository", "https://github.com/s-baumann/JSPlots.jl", "Source code"),
("Documentation", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/z_general_example/z_general_example.html", "General tutorial and overview"),
("Pages", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/annual_report.html", "Multi-page reports with navigation")]
od["Tabular Data and Text"] = [("PivotTable", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/pivottable_examples.html", "Interactive drag-and-drop pivot tables"),
("Table", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/table_examples.html", "Sortable data tables with CSV download"),
("TextBlock", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/textblock_examples.html", "Rich text and HTML content"),
("CodeBlock", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/codeblock_examples.html", "Syntax-highlighted code blocks"),
("LinkList", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/linklist_examples.html", "Navigation and link lists")]
od["Multimedia"] = [
("Picture", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/picture_examples.html", "Display images, GIFs, and filtered charts from VegaLite, Plots.jl, or Makie"),
("Slides", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/slides_examples_embedded.html", "Slideshows and animations")]
od["2D Plots"] = [("LineChart", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/linechart_examples.html", "Time series and trend visualization"),
("AreaChart", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/areachart_examples.html", "Stacked area charts"),
("ScatterPlot", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/scatterplot_examples.html", "2D scatter plots with marginal distributions"),
("Path", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/path_examples.html", "Trajectory visualization with direction arrows")]
od["Distributional Plots"] = [
("DistPlot", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/distplot_examples.html", "Histogram, box plot, and rug plot combined"),
("KernelDensity", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/kerneldensity_examples.html", "Smooth kernel density estimation"),
("PieChart", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/piechart_examples.html", "Pie charts with faceting and filtering")]
od["3D Plots"] = [
("Scatter3D", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/scatter3d_examples.html", "3D scatter plots with PCA eigenvectors"),
("Surface3D", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/surface3d_examples.html", "3D surface visualization"),
("ScatterSurface3D", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/scattersurface3d_example.html", "3D scatter with fitted surfaces")]
od["Situational Charts"] = [
("CorrPlot", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/corrplot_examples.html", "Make correlation plots with hierarchical clustering dendrograms showing Pearson and Spearman correlations."),
("Waterfall", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/waterfall_examples.html", "Make Waterfall plots showing how positive and negative elements add up to an aggregate."),
("SanKey", "https://s-baumann.github.io/JSPlots.jl/dev/examples_html/sankey_examples.html", "Make SanKey plots showing how individuals change affiliation over multiple waves.")]
grouped_linklist = LinkList(
od,
chart_title = :grouped_example,
notes = "Links are organized by category. This structure is ideal for documentation or multi-section reports."
)
This page was created using JSPlots.jl.