Spatial Simulations and Programming

Objectives

Students will learn about spatial simulations such as cellular automata, networks and geographic relationships and the tools to develop such simulations.

Scalable Vector Graphics (SVG)

Scalable Vector Graphics (SVG) is a language that can produce graphics. It works best to produce graphics with lines and shapes rather than photographic image. It works well to produce network diagrams.

The following is an example of SVG.

[code firstline=”1″ lang=”html”]</pre>
<svg width=”300″; height=”100″>
<circle cx=”50″ cy=”50″; r=”40″ stroke=”black” stroke-width=”4″ fill=”cyan”>
<circle cx=”200″ cy=”50″ r=”40″ stroke=”black” stroke-width=”4″ fill=”cyan”>
<line x1=”50″ y1=”50″ x2=”200″ y2=”50″ stroke=”blue” stroke-width=”2″>
<svg>
[/code]

Scripting in JavaScript

Javascript is a scripting language that is executed in web pages. It can be included directly in html files, or it can be in its own file and referenced by the html file. Javascript is responsible for much of the interactivity you encounter in webpages. Javascript can manipulate many of the objects in a web page.

Generally Javascript must be enclosed in script tags.

Let’s explore a simple script included in an html page. Below is some HTML code for a button, followed by some Javascript code. Clicking the button will pop up an alert window displaying “Hello!”

[code lang=”html” firstline=”1″]
<button onclick=”myPopupBox()”> Click here</button>
<scrip> function myPopupBox() { alert(“Hello!”);}</script>
[/code]

D3 JavaScript library

D3 can be used for visual simulations with some interactivity. D3 is a Javascript Library to produce animated data visualizations. It drives many of the data visualizations you see online, such as in the New York Times. D3 is relatively easy for some tasks, but not others. It is much easier to use D3 if you already know some Javascript.

Resource

For more information, see the d3 site.

Activities

Students will use Cellular to try out and manipulate several cellular automata simulations.
Students will code a visual network, using a tool such as SVG.

Digital History