Interactive Field Lines

This time we represent the electric field with field lines. The number of field lines increases as the field becomes stronger, and decreases as the field becomes weaker. This is a standard way of representing electric fields. Indeed, one of the driving forces behind this project is to improve on the standard, static, two dimensional presentation of these field lines. Try adjusting the charge by clicking and dragging the charge in the figure caption.

We repeat our slightly more sophisticated approach.

• Include the VField and Lesson toolkits on your page.
• Configure the visualization.
• Give a place to draw the visualization.
• Define interactions.

Include VField and Lesson toolkits

<!-- Lesson.js uses these styles -->
<link rel="stylesheet" type="text/css" 
      href="http://vizit.github.io/lesson/css/Lesson.css">
<script defer src="http://vizit.github.io/lesson/js/Lesson.min.js">
</script>
<script defer src="http://vizit.github.io/vfield/js/VField.min.js">
</script>
        

Once again we use VField for the electric field, and Lesson for interactivity. So far we have only seen a little of what these toolkits are capable of.

Configure the visualization

<script>
  // This object is loaded by the VizBuilder on the DOMReady event.
  var VISUALIZATION_CONFIG
      = {
          // The electric field graph displays charges,
          // field lines and gaussian surfaces.
          type:          "electric field",
          // The id of the canvas we draw into
          canvas:        "chargeCanvas",
          scale:         50.0,
          lineWidth:     1.1,
          arrowHeadSize: 1.0,
          arrowSpacing:  15.0,
          // Position a single charge at the origin
          elements:
            {
              type: "charge",  charge:  5.0,
              x: 0.0, y: 0.0, z: 0.0,
              fieldLineDensity: 5.0,
              bind: {set: "charge", from: "q1"}
            }
        };
</script>
        

Start with the visualization of the electric field from a point charge at the origin and add a binding, so that changes in q1 produce changes in the charge. The field then changes to reflect the new charge.

Interestingly, these last two visualizations both bind q1 to their charge. If they are placed on the same page, they will always show matching representations of the same field. One using a vector representation, the other using field lines. This shows how the building block approach fits in well with the concept of multiple representations, while also encouraging you to make the design decisions for the overall content.

Give a place to draw and define interactions

<figure class="center">
  <!--This is the canvas for our electric field visualization. -->
  <canvas id="chargeCanvas" width="300" height="300"></canvas>
  <!-- This lesson element controls q1 ranging from -5 to 5 in steps of .2 -->
  <figcaption>The electric field from a
              <span class="lessonElement"
                    data-type="rangedSource"
                    data-name="q1"
                    data-value="5.0"
                    data-min="-5.0"
                    data-max="5.0"
                    data-step="0.2"></span>
              statC<sup>1</sup> charge .</figcaption>
</figure>
        

There is no need to change the caption or the controlling lesson element. We keep the lessonElement, which controls the q1, ranging from -5.0 to 5.0 in steps of 0.2. A full description of the attributes:

attribute	meaning	example
class	Identifies a component of a lesson.	lessonElement
data-type	The type of component.	data-type="rangedSource"
data-name	The name of the variable that this component effects.	data-name="q1"
data-value	The initial value.	data-value="5.0"
data-min	The min value for the control.	data-min="-5.0"
data-max	The max value for the control.	data-max="5.0"
data-step	The variable changes by this amount as the control is moved.	data-step="0.2"

This example incorporates the control into the figure caption. It is just an HTML element that you are free to place anywhere in your content according to your design goals.

Next up, we combine the charge with a Gaussian surface and add some additional controls to create a more sophisticated presentation.