Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Include the weather report description.

  • Loading branch information...
commit 8884198cc87f13718536522e19fc4051764a0aea 1 parent 802f0c4
@sjockers sjockers authored
View
32 examples/weather_report.js
@@ -4,37 +4,17 @@ var weatherData = [
{
date: "2012-08-21",
temperature: 30,
- chanceOfPrecip: 40
+ humidity: 10
},
{
date: "2012-08-22",
- temperature: 32,
- chanceOfPrecip: 80
- },
- {
- date: "2012-08-23",
- temperature: 28,
- chanceOfPrecip: 20
- },
- {
- date: "2012-08-24",
- temperature: 26,
- chanceOfPrecip: 30
- },
- {
- date: "2012-08-25",
temperature: 24,
- chanceOfPrecip: 10
+ humidity: 45
},
{
- date: "2012-08-26",
+ date: "2012-08-23",
temperature: 28,
- chanceOfPrecip: 30
- },
- {
- date: "2012-08-27",
- temperature: 30,
- chanceOfPrecip: 30
+ humidity: 30
}
];
@@ -73,8 +53,8 @@ function drawing() {
color("blue");
- barChart(0, 20, 20, "chanceOfPrecip");
- text(0, 0, "Average chance of preciperation: " + average("chanceOfPrecip") + "%");
+ barChart(0, 20, 20, "humidity");
+ text(0, 0, "Average humidity: " + average("humidity") + "%");
}
View
81 examples/weather_report_average.js
@@ -0,0 +1,81 @@
+// use_html: data.html
+
+var weatherData = [
+ {
+ date: "2012-08-22",
+ temperature: 30,
+ humidity: 40
+ },
+ {
+ date: "2012-08-23",
+ temperature: 32,
+ humidity: 80
+ },
+ {
+ date: "2012-08-24",
+ temperature: 28,
+ humidity: 20
+ }
+];
+
+
+function averageTemperature(property) {
+ var sum = 0,
+ count = 0;
+
+ while (count < weatherData.length) {
+ count = count + 1;
+ }
+
+ return sum;
+}
+
+function barChart(x, y, barWidth, property) {
+ var gutter = 2,
+ xPosition = x,
+ yPosition = y;
+
+ var count = 0;
+ while (count < weatherData.length) {
+ var barHeight = -1 * weatherData[count][property];
+ box(xPosition, yPosition, barWidth, barHeight);
+ xPosition = xPosition + barWidth + gutter;
+ count = count + 1;
+ }
+}
+
+function drawing() {
+
+ text(0, 120, "Average temperature: " + averageTemperature() + "°");
+
+}
+
+
+
+// The following functions are available:
+//
+// color(string) - set the current color
+// lineWidth(number) - set the line width
+// box(x, y, width, height) - draw a box
+// circle(x, y, radius) - draw a circle
+// line(x1, y1, x2, y2) - draw a line
+// text(x, y, string) - draw text
+// clear() - clear the screen
+// path(string) - draw a complex line
+// In a line description, the following commands are valid:
+// g x y - go to point x,y without drawing
+// l x y - draw a line from the current point to point x,y
+// c - draw a line back to the start of the line
+// q x y cx cy - draw a curve to x,y, using cx,cy as
+// 'control point' to determine the curvature
+//
+// Coordinates are interpreted as if 0,0 is the center of the
+// screen. x is the horizontal axis, and y the vertical.
+// Positive x goes to the left, positive y goes up.
+// These operations can transform the coordinate system:
+//
+// moveTo(x, y) - move the origin to x, y
+// rotate(degrees) - rotate subsequent drawing operations
+// by a number of degrees
+// scale(factor) - scale subsequent drawing operations
+// goBack() - undo one transformation
View
71 examples/weather_report_visualization.js
@@ -0,0 +1,71 @@
+// use_html: data.html
+
+var weatherData = [
+ {
+ date: "2012-08-21",
+ temperature: 30,
+ humidity: 10
+ },
+ {
+ date: "2012-08-22",
+ temperature: 24,
+ humidity: 45
+ },
+ {
+ date: "2012-08-23",
+ temperature: 28,
+ humidity: 30
+ }
+];
+
+function barChart(x, y, barWidth) {
+ var gutter = 2,
+ xPosition = x,
+ yPosition = y;
+
+ var barHeight = -1 * weatherData[0].temperature;
+ box(xPosition, yPosition, barWidth, barHeight);
+
+ barHeight = -1 * weatherData[1].temperature;
+ xPosition = xPosition + gutter + barWidth;
+ box(xPosition, yPosition, barWidth, barHeight);
+
+ barHeight = -1 * weatherData[2].temperature;
+ xPosition = xPosition + gutter + barWidth;
+ box(xPosition, yPosition, barWidth, barHeight);
+}
+
+function drawing() {
+ color("red");
+ barChart(0, 0, 20);
+}
+
+
+
+// The following functions are available:
+//
+// color(string) - set the current color
+// lineWidth(number) - set the line width
+// box(x, y, width, height) - draw a box
+// circle(x, y, radius) - draw a circle
+// line(x1, y1, x2, y2) - draw a line
+// text(x, y, string) - draw text
+// clear() - clear the screen
+// path(string) - draw a complex line
+// In a line description, the following commands are valid:
+// g x y - go to point x,y without drawing
+// l x y - draw a line from the current point to point x,y
+// c - draw a line back to the start of the line
+// q x y cx cy - draw a curve to x,y, using cx,cy as
+// 'control point' to determine the curvature
+//
+// Coordinates are interpreted as if 0,0 is the center of the
+// screen. x is the horizontal axis, and y the vertical.
+// Positive x goes to the left, positive y goes up.
+// These operations can transform the coordinate system:
+//
+// moveTo(x, y) - move the origin to x, y
+// rotate(degrees) - rotate subsequent drawing operations
+// by a number of degrees
+// scale(factor) - scale subsequent drawing operations
+// goBack() - undo one transformation
View
239 page3.html
@@ -166,190 +166,85 @@ <h3 class=goal>Goal</h3>
<h3 class=inst>Instructions</h3>
-<hr/>
-
-<p><strong>TODO: Write an execise around the following example:</strong></p>
-
-<a href="sandbox/#weather_report.js" target=_blank>Weather Report</a>
-
-<p>What could be done?</p>
-
-<ol>
- <li>Visualize the <em>temperature</em> and the <em>chance of perciperation</em> (bonus points for writing a function that is reusable to visualize both properties!)
- <li>Calculate the average of both properties and print it on the screen</li>
-</ol>
-
-<hr/>
-
-<p><strong>TODO: Remove the countryData example:</strong></p>
-
-<hr/>
-
<p>In our new playground environment, we have a new variable
-available, <code>countryData</code>. This contains an array of objects
-with information (population, life expectancy) about almost all
-countries on earth.</p>
-
-<p>Each object (representing a country), has a <code>name</code>
-property containing a string, and <code>population</code>
-and <code>life_expectancy</code> properties that hold arrays of
-numbers, representing the data points for these statistics from the
-year 1960 to 2011.</p>
-
-<p>This program picks a few countries, and plots the trend of their
-life expectancy in this period as series of dots.</p>
-
-<pre>var width = 600, height = 300;
-
-function showCountry(country) {
- var step = width / country.life_expectancy.length;
- for (var pos = 0; pos < country.life_expectancy.length; pos = pos + 1) {
- var le = country.life_expectancy[pos];
- circle(step * pos, le * height / 100, 2);
- }
+available, <code>weatherData</code>. This contains an array of three objects
+with weather forecast information information.</p>
+
+<p>Each object (representing a day), has a <code>date</code>
+property containing a string, and <code>temperature</code>
+and <code>humidity</code> properties that contain numbers.</p>
+
+<p>This program picks a day and plots a single bar representing the temperature at this day.</p>
+
+<pre>var width = 600, height = 400;
+
+var weatherData = [
+ {
+ date: "2012-08-21",
+ temperature: 30,
+ humidity: 10
+ },
+ {
+ date: "2012-08-22",
+ temperature: 24,
+ humidity: 45
+ },
+ {
+ date: "2012-08-23",
+ temperature: 28,
+ humidity: 30
+ }
+];
+
+function barChart(x, y, barWidth) {
+ var gutter = 2,
+ xPosition = x,
+ yPosition = y;
+
+ var barHeight = -1 * weatherData[0].temperature;
+ box(xPosition, yPosition, barWidth, barHeight);
+
+ barHeight = -1 * weatherData[1].temperature;
+ xPosition = xPosition + gutter + barWidth;
+ box(xPosition, yPosition, barWidth, barHeight);
+
+ barHeight = -1 * weatherData[2].temperature;
+ xPosition = xPosition + gutter + barWidth;
+ box(xPosition, yPosition, barWidth, barHeight);
}
function drawing() {
- moveTo(-width / 2, -height / 2);
- color("red");
- showCountry(countryData[66]); // Germany
- color("green");
- showCountry(countryData[81]); // India
- color("blue");
- showCountry(countryData[150]); // Russian Federation
+ color("red");
+ barChart(0, 0, 20);
}</pre>
-<p>You can see it in action <a href="sandbox/#life_expectancy.js"
+<p>You can see it in action <a href="sandbox/#weather_report_visualization.js"
target=_blank>here</a>.</p>
<h3 class=ex>Explanation</h3>
<p>In order to be a little disciplined about where we're going to
draw, the program starts by defining the width and the height of the
-area it wants to draw in. 600 by 300 units.</p>
-
-<p>The <code>showCountry</code> function takes a country object as its
-parameter, and runs a loop over all the life expectancy data points
-for that country. It computes the horizontal distance it wants to
-leave between dots in the <code>step</code> variable, and, on the
-assumption that life expectancy is in the zero to hundred range,
-divides the height by 100 to determine the vertical space that
-signifies one year of life expectancy.</p>
-
-<p>The <code>drawing</code> function first moves the coordinate system
-so that 0,0 is the bottom left corner of our graph, and then
-calls <code>showCountry</code> on three different countries, giving
-each one a different color.</p>
-
-<p><strong>Exercise:</strong> Having to know a country's position in
-the dataset in order to display it is rather silly. Write a
-function <code>findCountry</code> that takes a country name as its
-only parameter, loops over the <code>countryData</code> array, and
-gives back the object for the named country.</p>
-
-<p>In order to do this, you need to know that <code>return</code>
-statements can be used in functions to give back a value to the code
-that called the function. For example:</p>
-
-<pre>function timesThree(x) {
- return x * 3;
-}
-console.log(timesThree(3)); // Logs 9</pre>
-
-<p><strong>Exercise:</strong> A big problem with our graphs is that
-you have no idea what the dots actually mean. Add code that draws gray
-horizontal lines (using the <code>line(x1, y1, x2, y2)</code>
-function) at ten-year intervals behind the graph. I.e. there is one
-line for zero, one for ten, and so on up to one hundred. Use
-the <code>width</code> and <code>height</code> variables to place the
-lines properly.</p>
-
-<p>If you're feeling motivated, you can also add textual labels (using
-the <code>text(x, y, string)</code> function) and/or a horizontal
-scale for the years.</p>
-
-<p><strong>Exercise:</strong> Change the <code>showCountry</code>
-function to draw a solid line instead of a series of dots.</p>
-
-
-<h2 class=step>Transforming data</h2>
-
-<h3 class=goal>Goal</h3>
-
-<p>Independently write a program that summarizes a dataset.</p>
-
-<h3 class=inst>Instructions</h3>
-
-<p>In <a href="sandbox/#transform.js" target=_blank>the program for
-this step</a>, there is a function <code>visualizeHistory</code>,
-which is a lot like the <code>showCountry</code> function we used
-before, except that it can be used to plot any data. It takes an array
-of values and a vertical scale (the amount of vertical space one unit
-of the input data takes up) as parameters.</p>
-
-<p>Finish the <code>showWorldPopulation</code> function. It should
-somehow compute the world population for each of the years in the
-dataset, put those numbers into an array, and correctly call
-the <code>visualizeHistory</code> function on that array.</p>
-
-<p>To build up an array, follow this pattern:</p>
-
-<pre>var newArray = []; // empty
-for (var i = 0; i < 10; i = i + 1) {
- newArray.push(i);
-}</pre>
-
-<p>The <code>push</code> function, which is a property
-(<em>method</em>) of every array value, is used to add an element the
-array.</p>
-
-<p>To figure out the correct vertical scale for your graph, keep track
-of the maximum world population in the whole dataset (either
-using <code>if</code> with the <code>></code> operator, or
-the <code>Math.max</code> function, which can be given two arguments
-and returns the greatest of the two).</p>
-
-<h3 class=ex>Explanation</h3>
-
-<p>The data is not in entirely the most obvious format for the purpose
-of summing up population per-year—we'd prefer to be able to
-straightforwardly get a collection of all populations for a given
-year.</p>
-
-<p>But still, by using a loop inside of a loop, with the outer loop
-going over the years (use, for
-example, <code>countryData[0].population.length</code> to know the
-total amount of years to loop over) and the inner loop going over the
-countries. It can then pick out the population for the current year
-from each country, and add it to the sum (which should be reset to
-zero at the start of every repetition of the outer loop).</p>
-
-<p>Give it a shot. If you get stuck, flag down a coach.</p>
-
-<p>Some other ideas for teasing interesting visualizations out of this
-data:</p>
-
-<ul>
- <li>Each country also has a <code>region</code> property. These are
- three-letter abbreviations that divide the world into seven areas.
- (You can get their full name by using the <code>regionName</code>
- function that is supplied along with the data.) Try to display a
- diagram that shows the percentages of the world population living in
- each of these regions, in each year (for example by showing a
- vertical stack of colored bars for each year).</li>
- <li>The country objects also contain a <code>fertility</code>
- property that, for each year, gives the country's fertility rate.
- Plot a two-dimensional picture for a certain year, which shows the
- correlation between life expectancy and fertility rate (i.e. life
- expectancy on the x axis, fertility on the y axis).</li>
- <li>Animate some per-year visualization, for example the one
- described in the point above this, over time. Use
- the <code>setTimeout</code> trick demonstrated
- in <a href="sandbox/#drawing_animate.js" target=_blank>this example
- from the previous page</a>, cycling through the years and drawing a
- new picture (including a call to <code>text</code> to display the
- year) every tenth of a second or so.</li>
-</ul>
+area it wants to draw in. 600 by 400 units.</p>
+
+<p>The <code>barChart</code> function takes the position and the width
+of a bars it should plot as a parameter. It then draws a single bar
+using the <code>box</code> function. The height of the bar represents
+the temperature taken from the first day using
+<code>weatherData[0].temperature</code></p>
+
+<p>Afterwards, the function plots the temperature for second and
+the third day in the same way.</p>
+
+<p><strong>Exercise:</strong> Having reference every single day in
+the dataset in order to display its temperature is rather silly.
+Change the <code>barChart</code> function so that it uses a
+<code>while</code> loop to go through the dataset and draw the bar chart
+automatically.</p>
+
+<p>In order to test if your function works as expected, add a few more
+days to the dataset. You can use data you acquire from
+<a href="http://weather.co.uk/" target="_blank">the web</a>.</p>
<h3>And so we reach</h3>
Please sign in to comment.
Something went wrong with that request. Please try again.