Vector Field Visualization
VField produces powerful interactive visualizations of vector fields, including electric fields, from simple configurations. Or use the API directly for more sophisticated presentations and better performance. These visualizations and their interactions are designed to integrate seamlessly with your content and not pull the student out of the flow your presentation. This contrasts sharply with most other interactive toolkits that provide self contained pieces, interactives, that may not match the content or style of your presentation, and fail to provide integrated interactivity with the content as a whole.
Most of these visualizations are built directly from configurations that describe a physical charge arrangement, or that describe a mathematical function. They provide the standard swipe to rotate and mouse wheel or pinch to zoom.
The following pages describe how to build several examples and how to add additional interactivity. For the first example we draw vectors for the electric field around a point charge.
We produce this with three simple steps.
- Include VField on your page.
- Configure the visualization.
- Give a place to draw the visualization.
<script defer src="http://vizit.github.io/vfield/js/VField.min.js">
The script tag includes VField on your page. The defer attribute loads the script asynchronously, and preserves order when multiple scripts are loaded. This will be important later.
VField is an open source project hosted on github. Feel free to examine the source, clone the repository, or make feature requests by creating an issue. And please help everyone out by raising any problems you have as an issue.
Configure the visualization
// This object is loaded by the VizBuilder on the DOMReady event.
// This is a simple vector field, so we draw
// vectors representing the field along the field lines.
type: "simple vector field",
// The id of the canvas we draw into
// f is a vector valued function.
// In this case the electric field from a single charge.
type: "charge", charge: 5.0,
x: 0.0, y: 0.0, z: 0.0,
VISUALIZATION_CONFIG holds the visualization configuration
properties of the visualization, then sets up the vector field.
type property defines, as you might expect, the type of graph
that is drawn. A simple vector field traces field lines and
draws vectors at several points along the field lines.
canvas is the id of the canvas we will draw on. In this case,
chargeCanvas. As with any HTML id, it must be unique on the page.
scale controls how much of the graph is drawn on the screen. A
scale of 1.0 means that the region where x, y and z each vary from -1.0 to +1.0
is drawn to the screen, or a scale of 50 means that the region where x, y, and
z range from -50 to +50 is drawn to the screen. This can also be thought of as
zooming in with smaller numbers, and zooming out with larger numbers. Of course
the user can always zoom in and out manually, the scale is just the initial zoom.
arrowSize controls the size of the arrows as drawn on the screen.
Specifically it is the scale of the vector field units to the spatial units drawn
on the screen.
The vector field is defined by a vector valued function,
f. In this example,
f is the electric field from a point charge at the origin.
f is charge, which corresponds to a
point charge, whose electric field is used as the vector valued function.
The magnitude of the charge is given by
charge. The charge units are
statC. However, we draw
no axes, and allow you to control the size of the vectors, so you could consider
the charge to be any units you choose. The actual units are only clear on examination
of the code.
The position of the charge is pretty straightforward. There is a property for each
z. The units are treated
as cm in the code, but as with the charge you can chose any that are consistent with
your content. In this case,
We mentioned earlier that the simple vector field traces field lines and draws
field vectors spaced out along the field lines. The number of field lines traced
is controlled by the
nfieldLines property. Changes in the magnitude
of the field produce proportional changes in the size of the vectors.
Give a place to draw
<!--This is the canvas for our visualization. -->
<canvas id="chargeCanvas" width="300" height="300"></canvas>
<figcaption>The electric field from a point charge represented
as a vector field.</figcaption>
The canvas with an id matching the canvas id given in the visualization configuration is the only requirement. Wrapping it with a figure element gives a more polished appearance for the visualization and the caption.
These are exactly the steps used to create the example at the top of the page, as I encourage you to verify with view source. They can be included in any order on any web page to produce the same result.
As an alternative, we can display the field lines. This uses a different type of graph, which we show next.