<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 HTMLcanvas 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.html#X7BFFD8B7808F5BDA"><span class="RefLink">7.2-5</span></a>) that lets us make use of such general tools.</p>
<p>The <code class="func">CreateVisualization</code> (<a href="chap7.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>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>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": varbutton = 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>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.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>
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.
