Quellcodebibliothek Statistik Leitseite products/Sources/formale Sprachen/GAP/pkg/jupyterviz/doc/   (Algebra von RWTH Aachen Version 4.15.1©)  Datei vom 16.7.2022 mit Größe 9 kB image not shown  

Quelle  chap4_mj.html   Sprache: HTML

 
 products/Sources/formale Sprachen/GAP/pkg/jupyterviz/doc/chap4_mj.html


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<title>GAP (JupyterViz) - Chapter 4: Using general tools (HTML, canvas, D3)</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="generator" content="GAPDoc2HTML" />
<link rel="stylesheet" type="text/css" href="manual.css" />
<script src="manual.js" type="text/javascript"></script>
<script type="text/javascript">overwriteStyle();</script>
</head>
<body class="chap4"  onload="jscontent()">


<div class="chlinktop"><span class="chlink1">Goto Chapter: </span><a href="chap0_mj.html">Top</a>  <a href="chap1_mj.html">1</a>  <a href="chap2_mj.html">2</a>  <a href="chap3_mj.html">3</a>  <a href="chap4_mj.html">4</a>  <a href="chap5_mj.html">5</a>  <a href="chap6_mj.html">6</a>  <a href="chap7_mj.html">7</a>  <a href="chapInd_mj.html">Ind</a>  </div>

<div class="chlinkprevnexttop"> <a href="chap0_mj.html">[Top of Book]</a>   <a href="chap0_mj.html#contents">[Contents]</a>    <a href="chap3_mj.html">[Previous Chapter]</a>    <a href="chap5_mj.html">[Next Chapter]</a>   </div>

<p id="mathjaxlink" class="pcenter"><a href="chap4.html">[MathJax off]</a></p>
<p><a id="X87D903D77FD35AED" name="X87D903D77FD35AED"></a></p>
<div class="ChapSects"><a href="chap4_mj.html#X87D903D77FD35AED">4 <span class="Heading">Using general tools (HTML, canvas, D3)</span></a>
<div class="ContSect"><span class="tocline"><span class="nocss"> </span><a href="chap4_mj.html#X856317C47839F0C0">4.1 <span class="Heading">Why these tools are present</span></a>
</span>
</div>
<div class="ContSect"><span class="tocline"><span class="nocss"> </span><a href="chap4_mj.html#X7D65933280120650">4.2 <span class="Heading">Post-processing visualizations</span></a>
</span>
</div>
<div class="ContSect"><span class="tocline"><span class="nocss"> </span><a href="chap4_mj.html#X85EA7D2579837F4D">4.3 <span class="Heading">Injecting JavaScript into general tools</span></a>
</span>
<div class="ContSSBlock">
<span class="ContSS"><br /><span class="nocss">  </span><a href="chap4_mj.html#X7836DDAA82B6A536">4.3-1 <span class="Heading">Example: Native HTML Canvas</span></a>
</span>
<span class="ContSS"><br /><span class="nocss">  </span><a href="chap4_mj.html#X7C06E0117C8EF31B">4.3-2 <span class="Heading">Example: Plain HTML</span></a>
</span>
<span class="ContSS"><br /><span class="nocss">  </span><a href="chap4_mj.html#X7A2554B0847DD027">4.3-3 <span class="Heading">Example: D3</span></a>
</span>
</div></div>
</div>

<h3>4 <span class="Heading">Using general tools (HTML, canvas, D3)</span></h3>

<p><a id="X856317C47839F0C0" name="X856317C47839F0C0"></a></p>

<h4>4.1 <span class="Heading">Why these tools are present</span></h4>

<p>These general tools can be used as building blocks to create other custom visualization tools. As a first example, the canvas tool installs an HTML canvas element and then lets you draw arbitrary shapes on it with JavaScript code. As a second example, some of the high-level tools this package imports were built on top of D3, a foundational visualization toolkit, which you can access directly.</p>

<p>First, we cover an as-yet-unmentioned feature of <code class="func">CreateVisualization</code> (<a href="chap7_mj.html#X7BFFD8B7808F5BDA"><span class="RefLink">7.2-5</span></a>) that lets us make use of such general tools.</p>

<p><a id="X7D65933280120650" name="X7D65933280120650"></a></p>

<h4>4.2 <span class="Heading">Post-processing visualizations</span></h4>

<p>The <code class="func">CreateVisualization</code> (<a href="chap7_mj.html#X7BFFD8B7808F5BDA"><span class="RefLink">7.2-5</span></a>) function takes an optional second parameter, a string of JavaScript code to be run once the visualization has been rendered. For example, if the visualization library you were using did not support adding borders around a visualization, but you wanted to add one, you could add it by writing one line of JavaScript code to run after the visualization was rendered.</p>


<div class="example"><pre>
CreateVisualization(
    rec(
        # put your data here, as in previous sections
    ),
    "visualization.style.border = '5px solid black'"
)
</pre></div>

<p>This holds for any visualization tool, not just AnyChart. In the code given in the second parameter, two variables will be defined for your use: <code class="code">element</code> refers to the HTML element inside of which the visualization was built and <code class="code">visualization</code> refers to the HTML element of the visualization itself, as produced by the toolkit you chose. When used in a Jupyter Notebook, <code class="code">element</code> is the output cell itself.</p>

<p>Now that we know that we can run arbitrary JavaScript code on a visualization once it's been produced, we can call CreateVisualization (7.2-5) to produce rather empty results, then fill them using our own JavaScript code. The next section explains how this could be done to create custom visualizations.



<p><a id="X85EA7D2579837F4D" name="X85EA7D2579837F4D"></a></p>

<h4>4.3 <span class="Heading">Injecting JavaScript into general tools</span></h4>

<p><a id="X7836DDAA82B6A536" name="X7836DDAA82B6A536"></a></p>

<h5>4.3-1 <span class="Heading">Example: Native HTML Canvas</span></h5>

<p>You can create a blank canvas, then use the existing JavaScript canvas API to draw on it. This example is trivial, but more complex examples are possible.</p>


<div class="example"><pre>
CreateVisualization(
    rec( tool := "canvas", height := 300 ),
    """
    // visualization is the canvas element
    var context = visualization.getContext( '2d' );
    // draw an X
    context.beginPath();
    context.moveTo( 0, 0 );
    context.lineTo( 100, 100 );
    context.moveTo( 100, 0 );
    context.lineTo( 0, 100 );
    context.stroke();
    """
);
</pre></div>

<p><img width="200" src="canvas-example.png"/></p>

<p><a id="X7C06E0117C8EF31B" name="X7C06E0117C8EF31B"></a></p>

<h5>4.3-2 <span class="Heading">Example: Plain HTML</span></h5>

<p>This is the degenerate example of a visualization. It does not create any visualization, but lets you specify arbitrary HTML content instead. It is provided here merely as a convenient way to insert HTML into the notebook.</p>


<div class="example"><pre>
CreateVisualiation(
    rec(
        tool := "html",
        data := rec(
            html := "<i>Any</i> HTML can go here. Tables, buttons, whatever."
        )
    ),
    """
    // Here you could install event handlers on tools created above.
    // For example, if you had created a button with id="myButton":
    var button = document.getElementById( "myButton" );
    button.addEventListener( "click", function () {
        alert( "My button was clicked." );
    } );
    """
);
</pre></div>

<p>When writing such JavaScript code, note that the Jupyter Notebook has access to a useful function that this package has installed, <code class="code">runGAP</code>. Its signature is <code class="code">runGAP(stringToEvaluate,callback)</code> and the following code shows an example of how you could call it from JavaScript in the notebook.</p>


<div class="example"><pre>
runGAP( "2^100;", function ( result, error ) {
    if ( result )
        alert( "2^100 = " + result );
    else
        alert( "GAP gave this error: " + error );
} );
</pre></div>

<p>This function is not available if running this package outside of a Jupyter Notebook.</p>

<p><a id="X7A2554B0847DD027" name="X7A2554B0847DD027"></a></p>

<h5>4.3-3 <span class="Heading">Example: D3</span></h5>

<p>While D3 is one of the most famous and powerful JavaScript visualization libraries, it does not have a JSON interface. Consequently, we can interact with D3 only through the JavaScript code passed in the second parameter to <code class="func">CreateVisualization</code> (<a href="chap7_mj.html#X7BFFD8B7808F5BDA"><span class="RefLink">7.2-5</span></a>). This makes it much less convenient, but we include it in this package for those who need it.</p>


<div class="example"><pre>
CreateVisualization(
    rec( tool := "d3" ),
    """
    // arbitrary JavaScript code can go here to interact with D3, like so:
    d3.select( visualization ).append( "circle" )
        .attr( "r", 50 ).attr( "cx", 55 ).attr( "cy", 55 )
        .style( "stroke", "red" ).style( "fill", "pink" );
    """
);
</pre></div>

<p><img width="200" src="d3-example.png"/></p>


<div class="chlinkprevnextbot"> <a href="chap0_mj.html">[Top of Book]</a>   <a href="chap0_mj.html#contents">[Contents]</a>    <a href="chap3_mj.html">[Previous Chapter]</a>    <a href="chap5_mj.html">[Next Chapter]</a>   </div>


<div class="chlinkbot"><span class="chlink1">Goto Chapter: </span><a href="chap0_mj.html">Top</a>  <a href="chap1_mj.html">1</a>  <a href="chap2_mj.html">2</a>  <a href="chap3_mj.html">3</a>  <a href="chap4_mj.html">4</a>  <a href="chap5_mj.html">5</a>  <a href="chap6_mj.html">6</a>  <a href="chap7_mj.html">7</a>  <a href="chapInd_mj.html">Ind</a>  </div>

<hr />
<p class="foot">generated by <a href="http://www.math.rwth-aachen.de/~Frank.Luebeck/GAPDoc">GAPDoc2HTML</a></p>
</body>
</html>

Messung V0.5
C=96 H=100 G=97

¤ Dauer der Verarbeitung: 0.16 Sekunden  (vorverarbeitet)  ¤

*© Formatika GbR, Deutschland




Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.