jupyter-ijavascript-utils 1.5.0 → 1.6.1

package/DOCS.md

@@ -19,6 +19,7 @@ See the [#Installation section for requirements and installation](#install)
 | {@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: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.                    |
@@ -27,8 +28,9 @@ See the [#Installation section for requirements and installation](#install)
 
 ## What's New
 
-* 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.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}
 
 -------
@@ -174,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)
@@ -186,6 +192,12 @@ utils.vega.svg((vl) => vl.markPoint()
 
 ![Screenshot of Leaflet](img/leafletRenderMarkers.png)
 
+## Generate Text Driven Diagrams
+
+({@link module:plantuml|See the PlantUML module for more})
+
+![Screenshot of PlantUML](https://jupyter-ijavascript-utils.onrender.com/img/plantumlSequence.png)
+
 ## Render Other Libraries
 
 (See the {@tutorial htmlScript} tutorial for more)
@@ -202,6 +214,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,7 @@ 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
@@ -26,9 +27,9 @@ See documentation at: [https://jupyter-ijavascript-utils.onrender.com/](https://
 
 ## Get Sample Data
 
-({@link module:datasets|See the DataSets module for more on sample datasets})
+([See the DataSets module for more on sample datasets](https://jupyter-ijavascript-utils.onrender.com/module-datasets.html))
 
-({@link module:ijs.await|See the ijs module for helpers to use async/await})
+([See the ijs module for helpers to use async/await](https://jupyter-ijavascript-utils.onrender.com/module-ijs.html#.await))
 
 ```
 //-- get the data
@@ -43,7 +44,7 @@ utils.ijs.await(async ($$, console) => {
 
 Then we can group using a process similar to d3js
 
-({@link module:group|see the Group module for more on grouping})
+([See the Group Module for more on grouping](https://jupyter-ijavascript-utils.onrender.com/module-group.html))
 
 ```
 //-- get the min max of the types of barley
@@ -91,7 +92,7 @@ barleyByVarietyYear = utils.group.by(barley, 'variety', 'year')
 
 ##  Aggregating
 
-({@link module:aggregate|See the Aggregation module for more})
+([See the Aggregation module for more](https://jupyter-ijavascript-utils.onrender.com/module-aggregate.html))
 
 ```
 utils.group.by(barley, 'variety', 'site')
@@ -132,7 +133,7 @@ returns
 
 ## Render as a Table
 
-({@link TableGenerator|See the TableGenerator class for more})
+([See the TableGenerator class for more](https://jupyter-ijavascript-utils.onrender.com/TableGenerator.html))
 
 ```
 new utils.TableGenerator(barley)
@@ -161,18 +162,32 @@ utils.vega.svg((vl) => vl.markPoint()
 
 ## Render Charts
 
+([See the vega module for more](https://jupyter-ijavascript-utils.onrender.com/module-vega.html))
+
 ![Screenshot of Vega Cell](https://jupyter-ijavascript-utils.onrender.com/img/BarleyYieldBySite.png)
 
 ## Create a Data Driven Map
 
+([See the Data Driven Maps Tutorial for More](https://jupyter-ijavascript-utils.onrender.com/tutorial-vega_choroplethLong.html))
+
 ![Screenshot of choropleth](https://jupyter-ijavascript-utils.onrender.com/img/choropleth_workingFull.svg)
 
 ## Render Maps
 
+([See the Leaflet module for more](https://jupyter-ijavascript-utils.onrender.com/module-leaflet.html))
+
 ![Screenshot of Leaflet](https://jupyter-ijavascript-utils.onrender.com/img/leafletRenderMarkers.png)
 
+## Generate Text Driven Diagrams
+
+([See the PlantUML module for more](https://jupyter-ijavascript-utils.onrender.com/module-plantuml.html))
+
+![Screenshot of PlantUML](https://jupyter-ijavascript-utils.onrender.com/img/plantumlSequence.png)
+
 ## Render Other Libraries
 
+([See the Html Script Tutorial for more](https://jupyter-ijavascript-utils.onrender.com/tutorial-htmlScript.html))
+
 ```
 utils.ijs.htmlScript({
     scripts: ['https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js'],
@@ -185,6 +200,13 @@ utils.ijs.htmlScript({
 
 ![Screenshot of QR Code](https://jupyter-ijavascript-utils.onrender.com/img/htmlScript_qrCode.png)
 
+## Create Animations
+
+(See the [Noise Visualization Tutorial](https://jupyter-ijavascript-utils.onrender.com/tutorial-noiseVisualization.html) or [SVG Module](file:///Users/proth/Documents/notebooks/jupyter-ijavascript-utils/docs/module-svg.html) 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/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>