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.

Include VField

<script defer src="http://vizit.github.io/vfield/js/VField.min.js">
</script>
          

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

<script>
  // This object is loaded by the VizBuilder on the DOMReady event.
  var VISUALIZATION_CONFIG
      = {
          // 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
          canvas:    "chargeCanvas",
          scale:     5.0,
          arrowSize: 1.0,
          // f is a vector valued function.
          // In this case the electric field from a single charge.
          f:  {
                type: "charge",  charge:  5.0,
                x: 0.0, y: 0.0, z: 0.0,
                nfieldLines: 25.0
              }
        };
</script>
            

VISUALIZATION_CONFIG holds the visualization configuration as a JavaScript object. This configuration starts out with some general properties of the visualization, then sets up the vector field.

The 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.

The 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.

The 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.

The 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.

The type of 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 coordinate x, y and 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, x, y and z are all 0.0.

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

<figure class="center">
  <!--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>
</figure>
          

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.