j1-template 2022.5.0.rc1 → 2022.5.0.rc4

data/lib/starter_web/pages/public/_jupyter/examples/distributed/j1-circular-times-table.adoc

@@ -0,0 +1,139 @@
+---
+title:                                  Times Tables
+tagline:                                visualize patterns
+date:                                   2022-03-28 00:00:00
+description: >
+                                        The package nbinteract aims to enable authors and educators to create and
+                                        share interactive web pages easily. Interactive explanations of concepts are
+                                        useful for communicating and explaining tricky concepts.
+keywords: >
+                                        opensource, free, load, download, start, starter, example,
+                                        high, easy, use, secure, encrypt, standard, popular,
+                                        generate, create, learn, distribute, publish, deploy,
+                                        beginner, advanced, expert, student, learner, educator,
+                                        writer, reader, visitor,
+                                        framework, toolkit, integration, extension, module, api,
+                                        dynamic, static, generator, client, server, internet, local, localhost,
+                                        page, web, website, webdesign, material, design, responsive,
+                                        javascript, nodejs, ruby, windows, linux, osx, mac, os,
+                                        http, https, html, html5, css, scss, style,
+                                        browser, firefox, chrome, edge, opera, safari,
+                                        configuration, generator, navigation, menu, dropdown, fab, action, button,
+                                        application, interface, provider, api, repository,
+                                        cookie, language, translation, gdpr, dsgvo, privacy,
+                                        asciidoc, aciidoctor, bootstrap, jekyll, liquid,
+                                        hyvor, disqus, git, github, netlify, heroku, apple, microsoft,
+                                        provider, service, internet, support,
+                                        google, analytics, advertising, search, console, silverlight, score,
+                                        j1, nbi, j1-nbinteract, nbinteract, template, integration,
+                                        python, jupyter, notebook, textbook, api, app,
+                                        binder, binderhub, jupyterhub
+
+categories:                             [ Software, Python ]
+tags:                                   [ Binder, Jupyter, Notebooks, Distributed ]
+
+scrollbar:                              false
+fab_menu_id:                            open_toc_reload
+personalization:                        true
+
+permalink:                              /pages/public/jupyter/examples/distributed/j1-circular-times-table/
+regenerate:                             false
+
+resources:                              [ animate, nbinteract, rouge ]
+resource_options:
+  - attic:
+      slides:
+        - url:                          /assets/images/modules/attics/yellow-cactus-1920x1280.jpg
+          alt:                          Photo by Yellow Cactus on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Yellow Cactus
+            href:                       https://unsplash.com/@yellowcactus
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:binder-badges-enabled:                 true
+:binder-app-launch--lab:                https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main
+:binder-app-launch--tree:               https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree
+:binder-app-launch--notebook:           https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?filepath=notebooks/j1/j1_circular_times_table.ipynb
+:times-tables-visualization:            https://elc.github.io/posts/times-tables/
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// image:/assets/images/badges/myBinder.png[Binder, link="https://mybinder.org/", {browser-window--new}]
+// image:/assets/images/badges/docsBinder.png[Binder, link="https://mybinder.readthedocs.io/en/latest/", {browser-window--new}]
+// See: https://towardsdatascience.com/ordinal-differential-equation-ode-in-python-8dc1de21323b
+
+ifeval::[{binder-badges-enabled} == true]
+image:/assets/images/badges/notebookBinder.png[Binder, link="{binder-app-launch--notebook}", {browser-window--new}]
+image:https://mybinder.org/badge_logo.svg[Binder, link="{binder-app-launch--lab}", {browser-window--new}]
+endif::[]
+
+CAUTION: Each interactive element presented on this page uses *time-consuming*
+operations that take a while to finish. The elements are built through a
+backend in the cloud. Please be patient to see the results.
+
+First, let's introduce the video from _Mathologer_. This video creates very
+nice patterns from _Times Tables_. Everybody knows them from primary school.
+It's something like this:
+
+.Table of *Two* (excerpt)
+[cols="6a,6a", options="header", width="100%", role="rtable mt-3"]
+|===
+|Factor |Value
+
+|`1 x 2`
+|2
+
+|`2 x 2`
+|4
+
+|`3 x 2`
+|6
+
+|`4 x 2`
+|8
+
+|===
+
+The idea, in general, is surprisingly simple, but the results are surprising.
+Please go for the video from _Mathologer_ first to catch the idea behind it.
+
+In this document, several scenarios using _Times Tables_ as a base to
+calculate plotted images are presented similar to the approach of
+what _Mathologer_ is doing:
+
+* a static but parametric version: you can change with sliders the values
+  and experiment by yourself.
+* an animated version to construct the image Line by Line: the factor
+  and the number of points is fixed, but each line is plotted per iteration
+* an animated version to construct the image Point by Point: the factor
+  and the lines are fixed, but each iteration increases the number of points
+* an animated version to construct the image Factor by Factor: the lines
+  and the number of points is fixed, but the factor increases per iteration.
+
+Start your journey on the power of Mathematics!
+
+NOTE: All examples are taken from
+link:{times-tables-visualization}[Times Tables Visualization - Finding Patterns, {browser-window--new}],
+and re-written for the use of module J1 NBI. Some text is used from the
+original post but re-written for clarity and simplicity.
+
+// textbook::circular_times_table[]
+textbook::j1_circular_times_table[]

data/lib/starter_web/pages/public/_jupyter/examples/distributed/j1-common-used-widgets.adoc

@@ -0,0 +1,229 @@
+---
+title:                                  J1 NBI
+tagline:                                common used widgets
+date:                                   2022-03-28 00:00:00
+description: >
+                                        The package nbinteract aims to enable authors and educators to create and
+                                        share interactive web pages easily. Interactive explanations of concepts are
+                                        useful for communicating and explaining tricky concepts.
+keywords: >
+                                        opensource, free, load, download, start, starter, example,
+                                        high, easy, use, secure, encrypt, standard, popular,
+                                        generate, create, learn, distribute, publish, deploy,
+                                        beginner, advanced, expert, student, learner, educator,
+                                        writer, reader, visitor,
+                                        framework, toolkit, integration, extension, module, api,
+                                        dynamic, static, generator, client, server, internet, local, localhost,
+                                        page, web, website, webdesign, material, design, responsive,
+                                        javascript, nodejs, ruby, windows, linux, osx, mac, os,
+                                        http, https, html, html5, css, scss, style,
+                                        browser, firefox, chrome, edge, opera, safari,
+                                        configuration, generator, navigation, menu, dropdown, fab, action, button,
+                                        application, interface, provider, api, repository,
+                                        cookie, language, translation, gdpr, dsgvo, privacy,
+                                        asciidoc, aciidoctor, bootstrap, jekyll, liquid,
+                                        hyvor, disqus, git, github, netlify, heroku, apple, microsoft,
+                                        provider, service, internet, support,
+                                        google, analytics, advertising, search, console, silverlight, score,
+                                        j1, nbi, j1-nbinteract, nbinteract, template, integration,
+                                        python, jupyter, notebook, textbook, api, app,
+                                        binder, binderhub, jupyterhub
+
+categories:                             [ Software, Python ]
+tags:                                   [ Binder, Jupyter, Notebooks, Distributed ]
+
+scrollbar:                              false
+fab_menu_id:                            open_toc_reload
+personalization:                        true
+
+permalink:                              /pages/public/jupyter/examples/distributed/common-used-widgets/
+regenerate:                             false
+
+resources:                              [ animate, nbinteract, rouge ]
+resource_options:
+  - attic:
+      slides:
+        - url:                          /assets/images/modules/attics/1920x1280/john-schnobrich-2.jpg
+          alt:                          Photo by John Schnobrich on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     John Schnobrich
+            href:                       https://unsplash.com/@johnschno
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:binder-badges-enabled:                 true
+:binder-app-launch--lab:                https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main
+:binder-app-launch--tree:               https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree
+:binder-app-launch--notebook:           https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?filepath=notebooks/j1/j1_interactive_widgets.ipynb
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+// image:/assets/images/badges/myBinder.png[Binder, link="https://mybinder.org/", {browser-window--new}]
+// image:/assets/images/badges/docsBinder.png[Binder, link="https://mybinder.readthedocs.io/en/latest/", {browser-window--new}]
+
+ifeval::[{binder-badges-enabled} == true]
+image:/assets/images/badges/notebookBinder.png[Binder, link="{binder-app-launch--notebook}", {browser-window--new}]
+image:https://mybinder.org/badge_logo.svg[Binder, link="{binder-app-launch--lab}", {browser-window--new}]
+endif::[]
+
+CAUTION: Each interactive element presented on this page uses *time-consuming*
+operations that take a while to finish. The elements are built through a
+backend in the cloud. Please be patient to see the results.
+
+*Widgets* are eventful python objects that have a representation in the browser,
+often as a control like as sliders, textboxes, dowpdowns etc. Widgets may used
+to build *interactive* GUIs for your notebooks, and to synchronize stateful and
+stateless information between the (IPython-)Kernel and JavaScript.
+
+Many libraries are available for Jupyter (IPython) to choose from. One of the
+most commonly used libraries for widgets is *IPyWidgets* and the visualizations
+(plots) of *Matplotlib*, *BQplot* or *GGplot*.
+
+In addition to the popular widgets, the NBI module offers additional GUI
+elements via the integrated interact-core library, which are useable in a
+very simple way.
+
+Find with that page a commonly used set of widgets for interactive textbooks.
+Some more options are available for interactivity, but this selection shows
+the most used. Interactive widgets are provided natively by Jupyter Notebooks
+using the library `ipywidgets`. Find common examples in the textbooks below.
+
+== Widgets from ipywidgets
+
+The library *ipywidgets*, also known as *jupyter-widgets*, are interactive
+HTML widgets for Jupyter notebooks and the IPython kernel. Notebooks come
+alive when interactive widgets are used. Users gain control of their data
+and can visualize changes in the data.
+
+textbook::j1_interactive_widgets[]
+
+== Widgets from nbinteract
+
+The library *nbinteract* comes with a set of functions that produce
+Javascript-based plots designed for interaction. The package combines the
+*ipywidgets* library and the *bqplot* plotting library to implement
+function-driven interfaces to interactive plotting.
+
+CAUTION: The current version of j1-nbinteract *1.x* is limited to Notebook v6
+(Classic Notebook). The latest version Jupyter Notebook v7 (JupyterLab) are
+supported by upcoming versions of j1-nbinteract *2.x*.
+
+The nbinteract plotting methods use **ipywidgets** to generate and display
+widgets, inferring the widget type as needed. When a user interacts with a
+widget, a Python callback updates the visualization **without** a complete
+rerender. This noticeably lowers visualization update time compared to using
+ipywidgets alone to render static images.
+
+=== Histogram
+
+The  widget `nbinteract.hist` generates a histogram that allows interaction
+with the parameters for the response function. The widget takes in a single
+response function. The response function returns the array of numerical values
+that will be shown in the histogram. The hist function allows interaction with
+the response function's parameters by specifying them as keyword arguments
+in the same format as ipywidgets.interact. Any argument that can be used for
+`ipywidgets.interact` can be used for hist.
+
+textbook::j1_nbi_widgets_hist_chart[]
+
+=== Bar chart
+
+The widget `nbinteract.bar` generates an bar plot that allows interaction
+with the parameters for the response functions.
+
+The first two arguments of bar are response functions that return the x and
+y-axis data arrays, respectively. Either argument can be arrays themselves.
+Arguments for the response functions must be passed in as keyword arguments
+to bar in the format expected by interact. The response function for the
+y-axis data will be called with the x-axis data as its first argument.
+
+For example, in the bar plot below categories generates the categories to
+plot on the x-axis and heights generates the y-axis heights. The heights
+function uses the parameter xs which is the array of x-axis data points.
+
+textbook::j1_nbi_widgets_bar_chart[]
+
+=== Interactive Scatter chart
+
+The widget `nbinteract.scatter_drag` generates a scatter plot that allows
+interaction through clicking and dragging the points on the graph.
+`scatter_drag` takes in two lists/arrays consisting of the x-coordinates
+and y-coordinates of the points to plot. It generates an interactive
+scatter plot where the points can be dragged by the user and a best fit
+line is updated automatically according to the placement of the points.
+
+WARNING: The widget `scatter_drag` does *not* allow response functions
+as inputs.
+
+textbook::j1_nbi_widgets_scatter_drag_chart[]
+
+=== Scatter chart
+
+The widget `nbinteract.scatter` generates a scatter plot that allows
+interaction with the parameters to the response functions. This is different
+from `scatter_drag` which facilitates interaction using click and drag
+actions.
+
+The first two arguments of scatter are response functions that return the
+x and y-axis coordinates, respectively. Either argument can be arrays
+themselves. Arguments for the response functions must be passed in as
+keyword arguments to scatter in the format expected by interact.
+The response function for the y-coordinates will be called with the
+x-coordinates as its first argument.
+
+textbook::j1_nbi_widgets_scatter_chart[]
+
+=== Line chart
+
+The `nbinteract.line` widget generates a line plot that allows interaction
+with the parameters to the response functions. The first two arguments of line
+are response functions that return the x and y-axis coordinates, respectively.
+Either argument can be arrays themselves.
+
+Arguments for the response functions must be passed in as keyword arguments
+to line in the format expected by interact. The response function for the
+y-coordinates will be called with the x-coordinates as its first argument.
+
+textbook::j1_nbi_widgets_line_chart[]
+
+=== Interactive questions
+
+To enable educators to create and share interactive web pages for learning,
+beside widgets for plotting interactive widgets for asking questions are
+available as well.
+
+==== Multiple choice
+
+The widget `nbinteract.multiple_choice` takes a question, a list of possible
+answer choices, and the correct answer. Clicking the buttons shows whether
+the choice was correct.
+
+textbook::j1_nbi_widgets_question_multiple_choice[]
+
+==== Short answer
+
+The widget `nbinteract.short_answer` takes a question and an answer. The
+answer can either be a string, a list of strings, or a function that
+returns `True` when called with the user's input. If the function errors,
+an error message will be displayed.
+
+textbook::j1_nbi_widgets_question_short_answer[]

data/lib/starter_web/pages/public/_jupyter/examples/distributed/j1-odes-in-python.adoc

@@ -0,0 +1,112 @@
+---
+title:                                  ODEs with Python
+tagline:                                interactive evaluation
+date:                                   2022-03-28 00:00:00
+description: >
+                                        The package nbinteract aims to enable authors and educators to create and
+                                        share interactive web pages easily. Interactive explanations of concepts are
+                                        useful for communicating and explaining tricky concepts.
+keywords: >
+                                        opensource, free, load, download, start, starter, example,
+                                        high, easy, use, secure, encrypt, standard, popular,
+                                        generate, create, learn, distribute, publish, deploy,
+                                        beginner, advanced, expert, student, learner, educator,
+                                        writer, reader, visitor,
+                                        framework, toolkit, integration, extension, module, api,
+                                        dynamic, static, generator, client, server, internet, local, localhost,
+                                        page, web, website, webdesign, material, design, responsive,
+                                        javascript, nodejs, ruby, windows, linux, osx, mac, os,
+                                        http, https, html, html5, css, scss, style,
+                                        browser, firefox, chrome, edge, opera, safari,
+                                        configuration, generator, navigation, menu, dropdown, fab, action, button,
+                                        application, interface, provider, api, repository,
+                                        cookie, language, translation, gdpr, dsgvo, privacy,
+                                        asciidoc, aciidoctor, bootstrap, jekyll, liquid,
+                                        hyvor, disqus, git, github, netlify, heroku, apple, microsoft,
+                                        provider, service, internet, support,
+                                        google, analytics, advertising, search, console, silverlight, score,
+                                        j1, nbi, j1-nbinteract, nbinteract, template, integration,
+                                        python, jupyter, notebook, textbook, api, app,
+                                        binder, binderhub, jupyterhub
+
+categories:                             [ Software, Python ]
+tags:                                   [ Binder, Jupyter, Notebooks, Distributed ]
+
+scrollbar:                              false
+fab_menu_id:                            open_toc_reload
+personalization:                        true
+
+permalink:                              /pages/public/jupyter/examples/distributed/odes-in-python/
+regenerate:                             false
+
+resources:                              [ animate, nbinteract, rouge ]
+resource_options:
+  - attic:
+#     opacity:                          0.3
+      slides:
+        - url:                          /assets/images/modules/attics/yellow-cactus-1920x1280.jpg
+          alt:                          Photo by Yellow Cactus on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Yellow Cactus
+            href:                       https://unsplash.com/@yellowcactus
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:binder-badges-enabled:                 true
+:binder-app-launch--lab:                https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main
+:binder-app-launch--tree:               https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree
+:binder-app-launch--notebook:           https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?filepath=notebooks/j1/j1_odes_in_python.ipynb
+:odes-in-python:                        https://elc.github.io/posts/ordinary-differential-equations-with-python/
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// image:/assets/images/badges/myBinder.png[Binder, link="https://mybinder.org/", {browser-window--new}]
+// image:/assets/images/badges/docsBinder.png[Binder, link="https://mybinder.readthedocs.io/en/latest/", {browser-window--new}]
+// See: https://towardsdatascience.com/ordinal-differential-equation-ode-in-python-8dc1de21323b
+
+ifeval::[{binder-badges-enabled} == true]
+image:/assets/images/badges/notebookBinder.png[Binder, link="{binder-app-launch--notebook}", {browser-window--new}]
+image:https://mybinder.org/badge_logo.svg[Binder, link="{binder-app-launch--lab}", {browser-window--new}]
+endif::[]
+
+
+// See: https://elc.github.io/posts/ordinary-differential-equations-with-python/
+
+CAUTION: Each interactive element presented on this page uses *time-consuming*
+operations that take a while to finish. The elements are built through a
+backend in the cloud. Please be patient to see the results.
+
+An ordinary differential equation (often abbreviated to ODE) is one
+Differential equation where only derivatives of the desired function
+occur after exactly one variable. Many physical, chemical and biological
+processes in nature are described mathematically with such equations.
+Examples are the radioactive decay, motion processes of bodies, many types
+of Oscillation processes or the growth behavior of animal populations.
+
+In scientific models, ordinary differential equations are often used to
+analyze, simulate, or be able to make predictions. Find an example below
+describing the dynamics of the population of rabbits and foxes. Check how
+the animals depend on each other. Manipulate some parameters to see the
+influences on the rabbits and foxes population.
+
+NOTE: All examples are taken from
+link:{odes-in-python}[Ordinary Differential Equations (ODE) with Python, {browser-window--new}]
+
+textbook::j1_odes_in_python[]

data/lib/starter_web/pages/public/_jupyter/examples/localized/j1-altair/j1-altair-visualisations.adoc

@@ -0,0 +1,142 @@
+---
+title:                                  Altair
+tagline:                                data visualizations
+date:                                   2022-03-28 00:00:00
+description: >
+                                        With Altair, you can spend more time understanding your data and
+                                        its meaning. Altair’s API is simple, friendly and consistent and
+                                        built on top of the powerful Vega-Lite visualization grammar.
+                                        This elegant simplicity produces beautiful and effective visualizations
+                                        with a minimal amount of code. One of the unique features of Altair,
+                                        inherited from Vega-Lite, is a declarative grammar of not just
+                                        visualization, but interaction.
+keywords: >
+                                        opensource, free, load, download, start, starter, example,
+                                        high, easy, use, secure, encrypt, standard, popular,
+                                        generate, create, learn, distribute, publish, deploy,
+                                        beginner, advanced, expert, student, learner, educator,
+                                        writer, reader, visitor,
+                                        framework, toolkit, integration, extension, module, api,
+                                        dynamic, static, generator, client, server, internet, local, localhost,
+                                        page, web, website, webdesign, material, design, responsive,
+                                        javascript, nodejs, ruby, windows, linux, osx, mac, os,
+                                        http, https, html, html5, css, scss, style,
+                                        browser, firefox, chrome, edge, opera, safari,
+                                        configuration, generator, navigation, menu, dropdown, fab, action, button,
+                                        application, interface, provider, api, repository,
+                                        cookie, language, translation, gdpr, dsgvo, privacy,
+                                        asciidoc, aciidoctor, bootstrap, jekyll, liquid,
+                                        hyvor, disqus, git, github, netlify, heroku, apple, microsoft,
+                                        provider, service, internet, support,
+                                        google, analytics, advertising, search, console, silverlight, score,
+                                        j1, nbi, j1-nbinteract, nbinteract, template, integration,
+                                        python, jupyter, notebook, textbook, api, app,
+                                        binder, binderhub, jupyterhub,
+                                        altair
+
+categories:                             [ Software, Python ]
+tags:                                   [ Altair, Jupyter, Notebooks, Localized ]
+
+scrollbar:                              false
+fab_menu_id:                            open_toc_reload
+personalization:                        false
+
+permalink:                              /pages/public/jupyter/examples/localized/j1-altair-visualizations/
+regenerate:                             false
+
+resources:                              [ animate, nbinteract, rouge ]
+resource_options:
+  - attic:
+      slides:
+        - url:                          /assets/images/modules/attics/john-schnobrich-2-1920x1280.jpg
+          alt:                          Photo by John Schnobrich on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     John Schnobrich
+            href:                       https://unsplash.com/@johnschno
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:binder-badges-enabled:                 false
+:binder-app-launch--lab:                https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main
+:binder-app-launch--tree:               https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree
+
+:binder-app-launch--non-interactive:    https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?filepath=notebooks/j1-altair-tutorial/j1_altair_non_interactive.ipynb
+:binder-app-launch--interactive:        https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?filepath=notebooks/j1-altair-tutorial/j1_altair_interactive.ipynb
+
+:url-altair-docs:                       https://altair-viz.github.io/
+:url-altair-docs--interactions:         https://altair-viz.github.io/user_guide/interactions.html
+
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="global" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// See: https://altair-viz.github.io/
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+ifeval::[{binder-badges-enabled} == true]
+image:https://mybinder.org/badge_logo.svg[Binder, link="{binder-app-launch--lab}", {browser-window--new}]
+endif::[]
+
+With Altair, you can spend more time understanding your data and its meaning.
+Altair’s API is simple, friendly and consistent and built on top of the
+powerful Vega-Lite visualization grammar. This elegant simplicity produces
+beautiful and effective visualizations with a minimal amount of code. Find
+more on Docs at Altair:
+
+mdi:link-variant[24px, md-blue mr-2 ml-3]
+link:{url-altair-docs}[Altair Dokumentation, {browser-window--new}] +
+mdi:link-variant[24px, md-blue mr-2 ml-3]
+link:{url-altair-docs--interactions}[Altair Interactive Visualization, {browser-window--new}]
+
+Find all Notebooks at *Binder* from below:
+
+mdi:link-variant[24px, md-blue mr-2 ml-3]
+image:/assets/images/badges/notebookBinder.png[Binder, link="{binder-app-launch--non-interactive}", {browser-window--new}] -- 1. Basic Visualisations +
+mdi:link-variant[24px, md-blue mr-2 ml-3]
+image:/assets/images/badges/notebookBinder.png[Binder, link="{binder-app-launch--interactive}", {browser-window--new}] -- 2. Interactive Visualisations
+
+== 1. Basic Visualisations
+
+textbook::j1_altair_non_interactive[]
+
+== 2. Interactive Visualisations
+
+One of the unique features of Altair, inherited from _Vega-Lite_, is a
+declarative grammar of not just visualization, but *interaction*. There are
+three core concepts of this grammar:
+
+* the `selection()` object which captures interactions from the mouse or
+  through other inputs to effect the chart. Inputs can either be events
+  like mouse clicks or drags. Inputs can also be elements like a drop-down,
+  radio button or slider. Selections can be used alone but if you want to
+  change any element of your chart you will need to connect them to a condition.
+
+* the `condition()` function takes the selection input and changes an element
+  of the chart based on that input.
+
+* the `bind` property of a selection which establishes a two-way binding between
+  the selection and an input element of your chart.
+
+Interactive charts can use one or more of these elements to create rich
+interactivity between the viewer and the data. Find more about
+*interactive visualizations* on Altair Docs at
+link:{url-altair-docs--interactions}[Making Charts Interactive, {browser-window--new}].
+
+textbook::j1_altair_interactive[]