jupyter-ijavascript-utils 1.4.0 → 1.6.0

package/.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "cSpell.words": [
+        "choropleth",
+        "choropleths"
+    ]
+}

package/DOCS.md

@@ -6,18 +6,21 @@ See the [#Installation section for requirements and installation](#install)
 
 | Export | Description                                                                                                                |
 |-------------------------------|-----------------------------------------------------------------------------------------------------|
-| {@link module:aggregate}      | Aggregating formulas for reducing collections of records.                                           |
-| {@link module:array}          | Utilities for massaging, sorting, reshaping and working with arrays.                                |
-| {@link module:base64}         | Utilities to convert to and from base64 encoding of strings                                         |
-| {@link module:datasets}       | Utilities to facilitate working with example datasets provided by the vega team                     |
-| {@link module:file}           | Utilities reading and writing data and text to files.                                               |
-| {@link module:format}         | Utilities for formatting and massaging data to be legible.                                          |
-| {@link module:group}          | Library to group collections of objects - generating Maps of records ({@link SourceMap})            |
-| {@link module:ijs}            | Utility methods to support working within the iJavaScript kernel within Jupyter.                    |
-| {@link module:leaflet}        | Library to simplify rendering maps.                                                                 |
-| {@link module:object}         | Utilities for massaging and managing JavaScript Objects or collections of Objects.                  |
+| {@link module:aggregate}      | Aggregate collections or collections of objects (ex: min, max, unique, contains, etc.               |
+| {@link module:array}          | Massage, sort, reshape arrays.                                                                      |
+| {@link module:base64}         | Convert to and from base64 encoding of strings                                                      |
+| {@link module:datasets}       | Load example <a href="https://github.com/vega/vega-datasets">datasets provided by the vega team</a> |
+| {@link module:file}           | Read and write data/text to files.                                                                  |
+| {@link module:format}         | Formatting and massage data to be legible.                                                          |
+| {@link module:group}          | Group/Reduce Hierarchies of Object - generating Maps of records ({@link SourceMap})                 |
+| {@link module:ijs}            | Extend iJavaScript to support await, and new types of rendering - like {@tutorial htmlScript} and markdown|
+| {@link module:latex}          | Render Math Notation with <a href="www.latex-project.org">LaTeX<a> and <a href="katex.org">KaTeX</a>|
+| {@link module:leaflet}        | Render maps with <a href="leaflet.org">Leaflet</a>                                                  |
+| {@link module:object}         | Massage and manipulate Objects or Collections of Objects.                                           |
+| {@link module:plantuml}       | Render <a href="https://plantuml.com">PlantUML</a> within Jupyter results.                          |
 | {@link module:set}            | Functional Utilities for managing JavaScript Sets - allowing for chaining.                          |
-| {@link module:vega}           | Simple utility to streamline showing Vega-Lite charts within iJS Notebooks.                         |
+| {@link module:svg}            | Programmatically create SVGs (either jupyter side for exports, or client side for animations)       |
+| {@link module:vega}           | Generate Charts / Graphs / Maps with <a href="https://vega.github.io/vega/">Vega</a> and <a href="https://vega.github.io/vega-lite/">Vega-Lite</a>                                         |
 | {@link SourceMap}             | SubClass of Maps - generated by the {@link module:group} and reducible with {@link module:aggregate}|
 | {@link TableGenerator}        | Class that can filter, sorts, manage and then generate HTML, CSV, Markdown, etc.                    |
 
@@ -25,7 +28,9 @@ See the [#Installation section for requirements and installation](#install)
 
 ## What's New
 
-* 1.4 - Add in vega embed, vega mimetypes and example choropleth tutorial
+* 1.6 - add SVG support for rendering SVGs and animations with {@link module:svg}.
+* 1.5 - Add LaTeX / KaTeX support with {@link module:latex} for rendering Math formulas and PlantUML support for Diagrams
+* 1.4 - Add in vega embed, vega mimetypes with {@link module:vega} and example choropleth tutorial
 * 1.3 - Add {@link module:leaflet|Leaflet} for Maps, allow Vega to use {@link module:vega.svgFromSpec|explicit specs} (so [Examples can be copied and pasted](https://vega.github.io/vega-lite/examples/), and add in {@link module:ijs.htmlScript|htmlScripts}
 
 -------
@@ -171,6 +176,10 @@ utils.vega.svg((vl) => vl.markPoint()
 
 ![Screenshot of Vega Cell](img/BarleyYieldBySite.png)
 
+and more from {@link module:vega}
+
+![Screenshot of Vega-Lite Examples](img/vegaLiteExamples.png)
+
 ## Create a Data Driven Map
 
 (See the {@tutorial vega_choroplethShort} tutorial for more)
@@ -199,6 +208,13 @@ utils.ijs.htmlScript({
 
 ![Screenshot of QR Code](img/htmlScript_qrCode.png)
 
+## Create Animations
+
+(See the {@tutorial noiseVisualization} tutorial or {@link module:svg|svg module} for more)
+
+![Screenshot of dark animation](img/svgAnimation2Dark.gif)
+![Screenshot of light animation](img/svgAnimation2Light.gif)
+
 <a name="install">&nbsp;</a>
 # Install
 

package/README.md

@@ -18,6 +18,8 @@ See documentation at: [https://jupyter-ijavascript-utils.onrender.com/](https://
 
 # What's New
 
+* 1.6 - add SVG support for rendering SVGs and animations
+* 1.5 - Add Latex support for rendering Math formulas and PlantUML support for Diagrams
 * 1.4 - Add in vega embed, vega mimetypes and example choropleth tutorial
 * 1.3 - Add Leaflet for Maps, allow Vega to use explicit specs (so [Examples can be copied and pasted](https://vega.github.io/vega-lite/examples/), and add in htmlScripts
 
@@ -184,6 +186,13 @@ utils.ijs.htmlScript({
 
 ![Screenshot of QR Code](https://jupyter-ijavascript-utils.onrender.com/img/htmlScript_qrCode.png)
 
+## Create Animations
+
+(See the {@tutorial noiseVisualization} tutorial or {@link module:svg|svg module} for more)
+
+![Screenshot of dark animation](https://jupyter-ijavascript-utils.onrender.com/img/svgAnimation2Dark.gif)
+![Screenshot of light animation](https://jupyter-ijavascript-utils.onrender.com/img/svgAnimation2Light.gif)
+
 # License
 
 See [License](https://jupyter-ijavascript-utils.onrender.com/LICENSE) (MIT License).

package/TODO.md

@@ -1,37 +1,2 @@
-[X] finish tutorials
-  [X] How to get Jupyter iJavaScript setup
-  [X] Example massaging data to create a table and chart
-  [ ] Finish example walkthrough
-[X] update the docs file index`
-[X] check there is an index for all modules and classes
-	[X] aggregate
-	[X] array
-	[X] base64
-	[X] datasets
-	[X] file
-	[X] format
-	[X] group
-	[X] ijs
-	[X] object
-	[X] set
-	[X] vega
-	[X] SourceMap
-	[X] TableGenerator
-[X] check there are examples for all the methods
-	[X] aggregate
-	[X] array
-	[X] base64
-	[X] datasets
-	[X] file
-	[X] format
-	[X] group
-	[X] ijs
-	[X] object
-	[X] set
-	[X] vega
-	[X] SourceMap
-	[X] TableGenerator
-[ ] Add in Geo
-    [ ] npm install i18n-iso-countries world-atlas sane-topojson
-    [ ] review https://github.com/michaelwittig/node-i18n-iso-countries
-    [ ] learn more about transforms here - https://observablehq.com/@blzzz/how-to-do-a-simple-but-useful-data-transform-in-vega
+[ ] - Update the HtmlScript to use [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) for appending the scripts and styles
+[ ] - Revisit Mermaid as option instead of PlantUML

package/docResources/img/noiseVisualization_axisChart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="330" height="242" viewBox="0 0 330 242"><rect width="330" height="242" fill="white"/><g fill="none" stroke-miterlimit="10" transform="translate(59,5)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0.5,0.5h200v200h-200Z" stroke="#ddd"/><g><g class="mark-group role-axis" aria-hidden="true"><g transform="translate(0.5,200.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-grid" pointer-events="none"><line transform="translate(0,-200)" x2="0" y2="200" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(33,-200)" x2="0" y2="200" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(67,-200)" x2="0" y2="200" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(100,-200)" x2="0" y2="200" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(133,-200)" x2="0" y2="200" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(167,-200)" x2="0" y2="200" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(200,-200)" x2="0" y2="200" stroke="#ddd" stroke-width="1" opacity="1"/></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" aria-hidden="true"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-grid" pointer-events="none"><line transform="translate(0,200)" x2="200" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(0,144)" x2="200" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(0,89)" x2="200" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/><line transform="translate(0,33)" x2="200" y2="0" stroke="#ddd" stroke-width="1" opacity="1"/></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="X-axis titled 'index' for a linear scale with values from 0 to 30"><g transform="translate(0.5,200.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(0,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(33,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(67,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(100,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(133,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(167,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(200,0)" x2="0" y2="5" stroke="#888" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="start" transform="translate(0,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">0</text><text text-anchor="middle" transform="translate(33.33333333333333,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">5</text><text text-anchor="middle" transform="translate(66.66666666666666,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">10</text><text text-anchor="middle" transform="translate(100,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">15</text><text text-anchor="middle" transform="translate(133.33333333333331,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">20</text><text text-anchor="middle" transform="translate(166.66666666666669,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">25</text><text text-anchor="end" transform="translate(200,15)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">30</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,0)" x2="200" y2="0" stroke="#888" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(100,30)" font-family="sans-serif" font-size="11px" font-weight="bold" fill="#000" opacity="1">index</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="Y-axis titled 'Value from Noise' for a linear scale with values from −1.0 to 0.8"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(0,200)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,144)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,89)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/><line transform="translate(0,33)" x2="-5" y2="0" stroke="#888" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(-7,203)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">−1.0</text><text text-anchor="end" transform="translate(-7,147.44444444444443)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">−0.5</text><text text-anchor="end" transform="translate(-7,91.88888888888889)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">0.0</text><text text-anchor="end" transform="translate(-7,36.33333333333335)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">0.5</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,200)" x2="0" y2="-200" stroke="#888" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(-43,100) rotate(-90) translate(0,-2)" font-family="sans-serif" font-size="11px" font-weight="bold" fill="#000" opacity="1">Value from Noise</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-line role-mark child__layer_xAmt_marks" role="graphics-object" aria-roledescription="line mark container"><path aria-label="index: 0; Value from Noise: 0" role="graphics-symbol" aria-roledescription="line mark" d="M0,88.88888888888889L6.666666666666667,131.97283279012345L13.333333333333334,157.62248050480108L20,149.63132800000002L26.666666666666668,107.43884062551443L33.33333333333333,52.52551440329223L40,13.736113777777792L46.666666666666664,7.127009668038453L53.333333333333336,26.967967956104278L60,59.11916444444447L66.66666666666666,88.88888888888889L73.33333333333333,102.85026567901237L80,97.03926044444442L86.66666666666667,79.57786745679014L93.33333333333333,64.89207150617288L100,62.68518518518525L106.66666666666667,76.6475833123L113.33333333333333,105.83763605304073L120,140.6095834074074L126.66666666666666,166.19478124919976L133.33333333333331,173.34439871970736L140,159.43276088888885L146.66666666666666,130.20281649748512L153.33333333333334,97.99874187471414L160,75.21871407407403L166.66666666666669,67.99364426154551L173.33333333333334,73.54532333973481L180,82.93127585185186L186.66666666666666,88.18855836854138L193.33333333333334,88.88888490900777" stroke="#4c78a8" stroke-width="2"/></g><g class="mark-line role-mark child__layer_yAmt_marks" role="graphics-object" aria-roledescription="line mark container"><path aria-label="index: 0; Value from Noise: 0" role="graphics-symbol" aria-roledescription="line mark" d="M0,88.88888888888889L6.666666666666667,45.80493468678555L13.333333333333334,18.254336146319194L20,10.736875851851835L26.666666666666668,20.099101117512607L33.33333333333333,41.138088705989986L40,68.04933451851853L46.666666666666664,97.62553447828077L53.333333333333336,130.38376006584363L60,162.5218512592592L66.66666666666666,185.33086419753076L73.33333333333333,192.10184107544578L80,180.42268207407398L86.66666666666667,153.53310942112478L93.33333333333333,122.6481330919066L100,97.95925925925926L106.66666666666667,82.36493645724734L113.33333333333333,75.76030093461361L120,78.49842725925926L126.66666666666666,85.02727135985369L133.33333333333331,88.88888888888889L140,89.35225244444445L146.66666666666666,88.94228669044352L153.33333333333334,88.93078986739826L160,89.11913481481481L166.66666666666669,89.24435299497028L173.33333333333334,89.1221688888889L180,88.9349688888889L186.66666666666666,88.88892444444446L193.33333333333334,88.88888888888889" stroke="#f58518" stroke-width="2"/></g><g class="mark-line role-mark child__layer_zAmt_marks" role="graphics-object" aria-roledescription="line mark container"><path aria-label="index: 0; Value from Noise: 0" role="graphics-symbol" aria-roledescription="line mark" d="M0,88.88888888888889L6.666666666666667,88.88888490900777L13.333333333333334,88.18852992409694L20,82.89901985185185L26.666666666666668,73.4053553397348L33.33333333333333,67.81614083219023L40,75.13450429629631L46.666666666666664,97.9974549391861L53.333333333333336,130.0247354586191L60,156.34367051851848L66.66666666666666,161.3579332418838L73.33333333333333,140.3121628678555L80,102.3498524444444L86.66666666666667,66.36963214631922L93.33333333333333,51.28484456881577L100,61.737037037037034L106.66666666666667,79.76336700868774L113.33333333333333,81.16487408139004L120,61.6198186666667L126.66666666666666,33.546559985368084L133.33333333333331,16.419844535893937L140,21.897470814814834L146.66666666666666,47.80675704801099L153.33333333333334,79.76608093644269L160,102.55056829629635L166.66666666666669,109.78390489254686L173.33333333333334,104.23245443804299L180,94.84650192592592L186.66666666666666,89.5892194092364L193.33333333333334,88.88889286877" stroke="#e45756" stroke-width="2"/></g><g class="mark-group role-legend" role="graphics-symbol" aria-roledescription="legend" aria-label="Symbol legend for stroke color with 3 values: xAmt, yAmt, zAmt"><g transform="translate(218,0)"><path class="background" aria-hidden="true" d="M0,0h48v37h-48Z" pointer-events="none"/><g><g class="mark-group role-legend-entry"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-group role-scope" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h48v11h-48Z" pointer-events="none" opacity="1"/><g><g class="mark-symbol role-legend-symbol" pointer-events="none"><path transform="translate(6,6)" d="M-5,0L5,0" stroke="#4c78a8" stroke-width="1.5" opacity="1"/></g><g class="mark-text role-legend-label" pointer-events="none"><text text-anchor="start" transform="translate(16,9)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">xAmt</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g><g transform="translate(0,13)"><path class="background" aria-hidden="true" d="M0,0h48v11h-48Z" pointer-events="none" opacity="1"/><g><g class="mark-symbol role-legend-symbol" pointer-events="none"><path transform="translate(6,6)" d="M-5,0L5,0" stroke="#f58518" stroke-width="1.5" opacity="1"/></g><g class="mark-text role-legend-label" pointer-events="none"><text text-anchor="start" transform="translate(16,9)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">yAmt</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g><g transform="translate(0,26)"><path class="background" aria-hidden="true" d="M0,0h48v11h-48Z" pointer-events="none" opacity="1"/><g><g class="mark-symbol role-legend-symbol" pointer-events="none"><path transform="translate(6,6)" d="M-5,0L5,0" stroke="#e45756" stroke-width="1.5" opacity="1"/></g><g class="mark-text role-legend-label" pointer-events="none"><text text-anchor="start" transform="translate(16,9)" font-family="sans-serif" font-size="10px" fill="#000" opacity="1">zAmt</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g></svg>