{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": ["# Snippets extracted from all files in `lib/*.gd`\n"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["LoadPackage( \"jupyterviz\" );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["CreateVisualization(\n", " rec(\n", " # put your data here, as in previous sections\n", " ),\n", " \"visualization.style.border = '5px solid black'\"\n", ")"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["CreateVisualization(\n", " rec( tool := \"canvas\", height := 300 ),\n", " \"\"\"\n", " // visualization is the canvas element\n", " var context = visualization.getContext( '2d' );\n", " // draw an X\n", " context.moveTo( 0, 0 );\n", " context.lineTo( 100, 100 );\n", " context.moveTo( 100, 0 );\n", " context.lineTo( 0, 100 );\n", " context.stroke();\n", " \"\"\"\n", ");"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["CreateVisualiation(\n", " rec(\n", " tool := \"html\",\n", " data := rec(\n", " html := \"Any HTML can go here. Tables, buttons, whatever.\"\n", " )\n", " ),\n", " \"\"\"\n", " // Here you could install event handlers on tools created above.\n", " // For example, if you had created a button with id=\"myButton\":\n", " var button = document.getElementById( \"myButton\" );\n", " button.addEventListener( \"click\", function () {\n", " alert( \"My button was clicked.\" );\n", " } );\n", " \"\"\"\n", ");"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["runGAP( \"2^100;\", function ( result, error ) {\n", " if ( result )\n", " alert( \"2^100 = \" + result );\n", " else\n", " alert( \"GAP gave this error: \" + error );\n", "} );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["CreateVisualization(\n", " rec( tool := \"d3\" ),\n", " \"\"\"\n", " // arbitrary JavaScript code can go here to interact with D3, like so:\n", " d3.select( visualization ).append( \"circle\" )\n", " .attr( \"r\", 50 ).attr( \"cx\", 55 ).attr( \"cy\", 55 )\n", " .style( \"stroke\", \"red\" ).style( \"fill\", \"pink\" );\n", " \"\"\"\n", ");"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["Plot( x -> x^0.5, rec( tool := \"canvasjs\" ) );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["dataSeries := JUPVIZMakePlotDataSeries( x -> x^0.5 );;\n", "big := ConvertDataSeriesForTool.canvasjs( [ dataSeries ] );\n", "# yields:\n", "# rec(\n", "# animationEnabled := true,\n", "# data := [\n", "# rec(\n", "# dataPoints := [\n", "# rec( x := 1, y := 1 ),\n", "# rec( x := 2, y := 1.4142135623730951 ),\n", "# rec( x := 3, y := 1.7320508075688772 ),\n", "# rec( x := 4, y := 2. ),\n", "# rec( x := 5, y := 2.2360679774997898 )\n", "# ],\n", "# type := \"line\"\n", "# )\n", "# ],\n", "# height := 400\n", "# )"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["CreateVisualization( rec( tool := \"canvasjs\", data := big ) );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["big.animationEnabled := false;; # changing an option\n", "big.height := 500;; # changing an option\n", "big.backgroundColor := \"#F5DEB3\";; # adding an option\n", "CreateVisualization( rec( tool := \"canvasjs\", data := big ) );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["vertices := [ 1, 2, 3, 4 ];\n", "edges := [ [ 1, 2 ], [ 2, 3 ], [ 2, 4 ] ];"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["big := ConvertGraphForTool.cytoscape( rec(\n", " vertices := vertices,\n", " edges := edges,\n", " options := rec() # or any options you like here\n", ") );\n", "# yields:\n", "# rec(\n", "# elements := [\n", "# rec( data := rec( id := \"1\" ) ),\n", "# rec( data := rec( id := \"2\" ) ),\n", "# rec( data := rec( id := \"3\" ) ),\n", "# rec( data := rec( id := \"4\" ) ),\n", "# rec( data := rec( source := \"1\", target := \"2\" ) ),\n", "# rec( data := rec( source := \"2\", target := \"3\" ) ),\n", "# rec( data := rec( source := \"2\", target := \"4\" ) )\n", "# ],\n", "# layout := rec( name := \"cose\" ),\n", "# style := [\n", "# rec(\n", "# selector := \"node\",\n", "# style := rec( content := \"data(id)\" )\n", "# )\n", "# ]\n", "# )"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["CreateVisualization( rec(\n", " tool := \"cytoscape\", data := big, height := 400\n", ") );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["CreateVisualization( rec(\n", " tool := \"cytoscape\",\n", " height := 400,\n", " data := rec(\n", " elements := [\n", " rec( # node 1\n", " group := \"nodes\",\n", " data := rec( id := \"Child1\", parent := \"Parent\" ),\n", " position := rec( x := 100, y := 100 ),\n", " selected := false,\n", " selectable := true,\n", " locked := false,\n", " grabbable := true\n", " ),\n", " rec( # node 2\n", " data := rec( id := \"Friend\" ),\n", " renderedPosition := rec( x := 200, y := 200 )\n", " ),\n", " rec( # node 3\n", " data := rec( id := \"Child2\", parent := \"Parent\" ),\n", " position := rec( x := 123, y := 234 )\n", " ),\n", " rec( # node parent\n", " data := rec(\n", " id := \"Parent\",\n", " position := rec( x := 200, y := 100 )\n", " )\n", " ),\n", " rec( # edge 1\n", " data := rec(\n", " id := \"Edge1\",\n", " source := \"Child1\",\n", " target := \"Friend\"\n", " )\n", " )\n", " ],\n", " layout := rec( name := \"preset\" ),\n", " style := [\n", " rec(\n", " selector := \"node\",\n", " style := rec( content := \"data(id)\" )\n", " )\n", " ]\n", " )\n", ") );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["# read file and convert JSON into a GAP record\n", "jsonText := ReadAll( InputTextFile( \"EV Charge Points.json\" ) );;\n", "gapRecord := JsonStringToGap( jsonText );;\n", "", "# ensure it's big enough to be visible:\n", "if IsBound( gapRecord.layout ) then\n", " gapRecord.layout.height := 500;;\n", "else\n", " gapRecord.layout := rec( height := 500 );;\n", "fi;\n", "", "# show it\n", "CreateVisualization( rec( tool := \"plotly\", data := gapRecord ) );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["{\n", " \"chart\" : {\n", " \"type\" : \"pie\",\n", " \"data\" : [\n", " { \"x\" : \"Subgroups of order 6\", \"value\" : 1 },\n", " { \"x\" : \"Subgroups of order 3\", \"value\" : 1 },\n", " { \"x\" : \"Subgroups of order 2\", \"value\" : 3 },\n", " { \"x\" : \"Subgroups of order 1\", \"value\" : 1 }\n", " ]\n", " }\n", "}"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["myChartData := rec(\n", " chart := rec(\n", " type := \"pie\",\n", " data := [\n", " rec( x := \"Subgroups of order 6\", value := 1 ),\n", " rec( x := \"Subgroups of order 3\", value := 1 ),\n", " rec( x := \"Subgroups of order 2\", value := 3 ),\n", " rec( x := \"Subgroups of order 1\", value := 1 )\n", " ]\n", " )\n", ");"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["CreateVisualization( rec( tool := \"anychart\", data := myChartData ) );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["{\n", " elements : [\n", " { data : { id : \"A\" } },\n", " { data : { id : \"B\" } },\n", " { data : { id : \"edge\", source : \"A\", target : \"B\" } }\n", " ],\n", " layout : { name : \"grid\", rows : 1 }\n", "}"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["N := 50;\n", "elements := [ ];\n", "for i in [2..N] do\n", " Add( elements, rec( data := rec( id := String( i ) ) ) );\n", " for j in [2..i-1] do\n", " if i mod j = 0 then\n", " Add( elements, rec( data := rec(\n", " source := String( j ),\n", " target := String( i ) ) ) );\n", " fi;\n", " od;\n", "od;"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["CreateVisualization( rec(\n", " tool := \"cytoscape\",\n", " height := 600,\n", " data := rec(\n", " elements := elements, # computed in the code above\n", " layout := rec( name := \"cose\" ),\n", " style := [\n", " rec( selector := \"node\", style := rec( content := \"data(id)\" ) )\n", " ]\n", " )\n", ") );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["# Plot the number of small groups of order n, from n=1 to n=50:\n", "Plot( [1..50], NrSmallGroups );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["# Plot how much Andrea has been jogging lately:\n", "Plot( [\"Jan\",\"Feb\",\"Mar\"], [46,59,61],\n", "rec( title := \"Andrea's Jogging\", yaxis := \"miles per month\" ) );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["# Plot the subgroup lattice for a small group:\n", "G := Group((1,2),(2,3));\n", "PlotGraph( AllSubgroups(G), IsSubgroup );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["# Plot a random graph on 5 vertices:\n", "# (The results change from one run to the next, of course.)\n", "PlotGraph( RandomMat(5,5) );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["CreateVisualization( rec(\n", " tool := \"html\",\n", " data := rec( html := \"I am SO excited about this.\" )\n", "), \"console.log( 'Visualization created.' );\" );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["JUPVIZRunJavaScriptUsingLibraries( [ \"mylib.js\" ],\n", " \"alert( 'My Lib defines foo to be: ' + window.foo );\" );\n", "# Equivalently:\n", "JUPVIZRunJavaScriptUsingLibraries( \"mylib.js\",\n", "\"alert( 'My Lib defines foo to be: ' + window.foo );\" );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["myRec := rec( height := 50, width := 50, title := rec(\n", " text := \"GAP\", fontSize := 20\n", ") );\n", "JUPVIZRecordKeychainLookup( myRec, [ \"height\" ], 10 ); # = 50\n", "JUPVIZRecordKeychainLookup( myRec, [ \"width\" ], 10 ); # = 50\n", "JUPVIZRecordKeychainLookup( myRec, [ \"depth\" ], 10 ); # = 10\n", "JUPVIZRecordKeychainLookup( myRec, [ \"title\", \"text\" ], \"Title\" ); # = \"GAP\"\n", "JUPVIZRecordKeychainLookup( myRec, [ \"title\", \"color\" ], \"black\" ); # = \"black\"\n", "JUPVIZRecordKeychainLookup( myRec, [ \"one\", \"two\", \"three\" ], fail ); # = fail"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["myRecs := [\n", " rec( height := 50, width := 50, title := rec(\n", " text := \"GAP\", fontSize := 20\n", " ) ),\n", " rec( width := 10, depth := 10, color := \"blue\" )\n", "];\n", "JUPVIZRecordsKeychainLookup( myRecs, [ \"height\" ], 0 ); # = 50\n", "JUPVIZRecordsKeychainLookup( myRecs, [ \"width\" ], 0 ); # = 50\n", "JUPVIZRecordsKeychainLookup( myRecs, [ \"depth\" ], 0 ); # = 10\n", "JUPVIZRecordsKeychainLookup( myRecs, [ \"title\", \"text\" ], \"Title\" ); # = \"GAP\"\n", "JUPVIZRecordsKeychainLookup( myRecs, [ \"color\" ], \"\" ); # = \"blue\"\n", "JUPVIZRecordsKeychainLookup( myRecs, [ \"flavor\" ], fail ); # = fail"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["# Trivial examples:\n", "myRec := rec( a := 5 );\n", "myRecs := [ rec( b := 3 ), rec( a := 6 ) ];\n", "f := function ( x ) Print( x, \"\\n\" ); end;\n", "JUPVIZFetchWithDefault( myRec, myRecs, \"a\", 0, f ); # prints 5\n", "JUPVIZFetchWithDefault( myRec, myRecs, \"b\", 0, f ); # prints 3\n", "JUPVIZFetchWithDefault( myRec, myRecs, \"c\", 0, f ); # prints 0\n", "JUPVIZFetchWithDefault( myRec, myRecs, [\"a\",\"b\"], 0, f ); # prints 0\n", "# Useful example:\n", "JUPVIZFetchWithDefault( primaryRecord, secondaryRecordsList,\n", " [ \"options\", \"height\" ], 400,\n", " function ( h ) myGraphJSON.height := h; end\n", ");"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["myRec := rec( a := 5 );\n", "myRecs := [ rec( b := 3 ), rec( a := 6 ) ];\n", "f := function ( x ) Print( x, \"\\n\" ); end;\n", "JUPVIZFetchIfPresent( myRec, myRecs, \"a\", 0, f ); # prints 5\n", "JUPVIZFetchIfPresent( myRec, myRecs, \"b\", 0, f ); # prints 3\n", "JUPVIZFetchIfPresent( myRec, myRecs, \"c\", 0, f ); # does nothing\n", "JUPVIZFetchIfPresent( myRec, myRecs, [\"a\",\"b\"], 0, f ); # does nothing"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["window.requirejs.config( {\n", " paths : {\n", " NEWTOOL : 'https://cdn.example.com/NEWTOOL.min.js'\n", " }\n", "} );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["CreateVisualization( rec(\n", " tool := \"NEWTOOL\",\n", " # any other data you need goes here\n", ") );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["ConvertDataSeriesForTool.NEWTOOL := function ( series )\n", " local result;\n", " # Write the code here that builds the components of the\n", " # GAP record you need, stored in result.\n", " # You can leverage series.x, series.y, and series.options.\n", " return result;\n", "end;\n", "ConvertGraphForTool.NEWTOOL := function ( graph )\n", " local result;\n", " # Write the code here that builds the components of the\n", " # GAP record you need, stored in result.\n", " # You can leverage graph.vertices, graph.edges, and graph.options.\n", " return result;\n", "end;"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["# for plots:\n", "Plot( x -> x^2, rec( tool := \"NEWTOOL\" ) );\n", "# or for graphs:\n", "PlotGraph( RandomMat( 5, 5 ), rec( tool := \"NEWTOOL\" ) );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["// No need to import any library from a CDN for this baby example.\n", "window.VisualizationTools.color = function ( element, json, callback ) {\n", " // just writes json.text in json.color, that's all\n", " var span = document.createElement( 'span' );\n", " span.textContent = json.text;\n", " span.style.color = json.color;\n", " callback( element, span );\n", "};"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["CreateVisualization( rec(\n", " tool := \"color\",\n", " text := \"Happy St. Patrick's Day.\",\n", " color := \"green\"\n", ") );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["InstallVisualizationTool( \"TOOL_NAME_HERE\", S );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["# GAP code to install a new visualization tool:\n", "InstallVisualizationTool( \"smallExample\",\n", "\"\"\"\n", "window.VisualizationTool.smallExample =\n", "function ( element, json, callback ) {\n", " element.innerHTML = '' + json.text + '';\n", " callback( element, element.childNodes[0] );\n", "}\n", "\"\"\"\n", ") );\n", "", "# GAP code to use that new visualization tool:\n", "CreateVisualization( rec(\n", " tool := \"smallExample\",\n", " text := \"This text will show up red.\"\n", ") );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["InstallVisualizationToolFromTemplate( \"smallExample\",\n", "\"\"\"\n", " element.innerHTML = '' + json.text + '';\n", " callback( element, element.childNodes[0] );\n", "\"\"\"\n", ") );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["InstallVisualizationToolFromTemplate( \"canvasjs\",\n", "\"\"\"\n", " ( new window.CanvasJS.Chart( element, json.data ) ).render();\n", " window.resizeToShowContents( element );\n", " callback( element, element.childNodes[0] );\n", "\"\"\",\n", "\"https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js\"\n", ") );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["Plot( [ 6.2, 0.3, 9.1, 8.8 ] );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["Plot( [ 1 .. 4 ], [ 6.2, 0.3, 9.1, 8.8 ] );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["Plot( [ \"Mon\", \"Tue\", \"Wed\", \"Thu\" ], [ 6.2, 0.3, 9.1, 8.8 ] );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["Plot( [ \"Mon\", 6.2 ], [ \"Tue\", 0.3 ], [ \"Wed\", 9.1 ], [ \"Thu\", 8.8 ] ] );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["Plot( x -> x^0.5 );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["Plot( [1..50], NrSmallGroups );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["Plot( [1..50], n -> Length( DivisorsInt( n ) ),\n", " rec(\n", " tool := \"chartjs\",\n", " title := \"Number of divisors of some small integers\",\n", " xaxis := \"n\",\n", " yaxis := \"number of divisors of n\"\n", " )\n", ");"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["# We're combining Plot( [1..50], NrSmallGroups );\n", "# with Plot( [1..50], n -> Length( DivisorsInt( n ) ) );\n", "# and adding some options:\n", "Plot(\n", " [ [1..50], NrSmallGroups,\n", " rec( title := \"Comparison\", tool := \"anychart\" ) ],\n", " [ [1..50], n -> Length( DivisorsInt( n ) ) ]\n", ");"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["G := Group( (1,2,3,4,5,6,7), (1,2) );;\n", "CCs := List( ConjugacyClasses( G ), Set );;\n", "Plot(\n", " # x values are class labels; we'll use the first element in the class\n", " List( CCs, C -> PrintString( C[1] ) ),\n", " # y values are class sizes; these determine the size of pie slices\n", " List( CCs, Length ),\n", " # ask for a pie chart with enough height that we can read the legend\n", " rec( type := \"pie\", height := 500 )\n", ");"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["PlotGraph( [ [ \"start\", \"option1\" ], [ \"start\", \"option2\" ],\n", "[ \"option1\", \"end\" ], [ \"option2\", \"end\" ] ] );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["PlotGraph( [ 2 .. 10 ],\n", " [ [ 2, 4 ], [ 2, 6 ], [ 2, 8 ], [ 2, 10 ],\n", "[ 3, 6 ], [ 3, 9 ], [ 4, 8 ], [ 5, 10 ] ] );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["G := Group( (1,2,3), (1,2) );\n", "S := function ( H, G )\n", " return IsSubgroup( G, H ) and H <> G;\n", "end;\n", "PlotGraph( AllSubgroups( G ), S );"] }, { "cell_type": "code", "execution_count": 0, "metadata": { "name": "GAP" }, "outputs": [], "source": ["G := Group( (1,2,3), (1,2) );\n", "S := function ( H, G )\n", " return IsSubgroup( G, H ) and H <> G;\n", "end;\n", "PlotGraph( AllSubgroups( G ), S,\n", "rec( directed := true, layout := \"grid\", arrowscale := 3 ) );"] } ], "metadata": { "kernelspec": { "display_name": "GAP 4", "language": "gap", "name": "gap-4" }, "language_info": { "codemirror_mode": "gap", "file_extension": ".g", "mimetype": "text/x-gap", "name": "GAP 4", "nbconvert_exporter": "", "pygments_lexer": "gap", "version": "4.9.2" } }, "nbformat": 4, "nbformat_minor": 2 }