In this middle part of the tuition 
graphing problem. 
Nothing fundamentally new is going to 
happen. 
But something super important is going to 
happen anyways. 
This video is really going to show the 
importance of doing examples before the 
function definition. 
In this video, what we want is 
complicated enough, that I'm going to 
spend quite a lot of time just getting 
the examples right. 
And once I do that, the function 
definition itself will be a lot easier. 
So, this is a demonstration of the power 
of the way the method puts examples 
before function definition. 
 >> Now I'm in tuition graph v three. 
And that has the complete data 
definitions for both school and list of 
school. 
And now it's time to go design the first 
of the functions. 
So, remember what we're supposed to do is 
to design a function that consumes 
information about schools, in other words 
it consumes a value of type list of 
school. 
And it's gotta produce a bar chart 
kind of like this one. 
So, what I'm going to do in order to 
avoid scrolling so much, because 
scrolling makes people seasick I know. 
Is I'm just going to copy that and bring 
it all the way down here to my functions 
part. 
And I'll just stick it in a comment for 
now. 
It's just to remind us what we're trying 
to do. 
So, let's see, we're designing a 
function, it consumes ListOfSchool, and 
it's going to produce an Image like that, 
so that's what that has to do. 
And let's see, produce bar chart showing 
names and tuitions of the consumed 
schools. 
Let's do a stub, define we'll call it 
chart and it consumes a list of school 
and what I use for the stub for functions 
that produce image is this. 
White, there we go, great. 
The stub is well-formed. 
Now, let's try to do some examples. 
Well, it's a function operating on a 
list. 
It's a function operating on a 
self-referential data definition, so the 
base case test should be first. 
So, what are you supposed to produce if I 
hand you an empty list of schools? 
Well, you've gotta produce an image. 
So, I'm going to produce the same dummy 
value that the stub happens to produce, 
and that'll be the base case result. 
Let's do another example. 
Let's say check-expect, now the rule is 
two long. 
So, let's go ahead and do one that's two 
long. 
Check-expect chart. 
You know what? 
Let's do one that's one long, first. 
It's tempting to do the two long one, but 
let's do the one long one, first, it'll 
be simpler. 
Chart cons, and now we need some school. 
Make school, you can use any name you 
want. 
We'll just call it S1 for now, because 
that'll be simple. 
Make a school called S1 in which the 
tuition is, I don't know, 999. 
[INAUDIBLE] Let's not make it 999, let's 
make it some nice more round number than 
that like 800. 
Just keeping things easy to work with 
here. 
Easy, not cute. 
So, if I've got to chart that, then what 
do I want to see? 
Mh-mm. 
Well, I know that the base case result is 
this. 
The question is, what's the contribution 
of this one school here? 
Mh-mm, well, let's think about that. 
What is the contribution of that? 
Well, mh-mm. 
We want to see the text, that's for sure. 
Whoops. 
Remember there's that function text. 
We want to see the text of S1, the name 
of the school. 
And how big do we want the text to be? 
Well, you might remember that there was a 
constant up here, FONT_SIZE that I used. 
So, let me say that it's of size 
FONT_SIZE and there's another constant, 
FONT_COLOR. 
So, that's going to get me the name S1. 
But let's see here. 
That's going to get it to me 
horizontally, and I want this to be 
vertically. 
So, I need to rotate that. 
So, let me rotate it. 
I need to rotate it that way. 
I could never remember which way the 
rotation is. 
I'll say minus 90. 
Let's see, that gets me part of it. 
That gets me just the text. 
And I've gotta put them all next to each 
other so, it seems like there's a beside 
here. 
Now, let me show you something, I know 
I'm not done yet. 
But I'm going to run this anyways. 
That first test passed. 
This test failed because rotate expects 
an angle in degrees, as it's first 
argument. 
Oh, I've got the arguments in the wrong 
order. 
So, I'll put this over here. 
What I wanted to show you there is as, as 
examples become more complicated and 
especially ones that involve images, you 
can go ahead and run them, even before 
they're complete. 
Just to see if the part you have makes 
sense. 
You'll catch errors like wrong order of 
arguments to rotate, catch them right 
now. 
Finding a mistake right after you make 
it, is easier than finding it five 
minutes later. 
So, that's why I ran that then. 
Let's run it again. 
The test is failing, which we expected. 
But let's just take a look at what the 
image is, to see if it's starting to look 
right for us. 
well, I've got S1. 
That part's not bad, but it's rotated the 
wrong way. 
That's what I was almost guaranteed to 
get wrong, was the direction of the 
rotation. 
Alright, that's starting to look better 
but that's just getting me, yes. 
Now remember, remember, remember, 
remember this little box around here is 
not actually part of my result. 
This box is put here by the test window. 
See how the test window puts a box there 
and a box there around the base result? 
That box is not actually part of my 
result. 
So, there's something missing here. 
One is that I want that color bar, and 
the other is that I want that box. 
Let's see. 
Let's try to make the color bar. 
Mh-mm. 
I see, this is putting that next to that. 
It seems like what I also need, is to put 
the color bar. 
So, that's going to be something like 
rectangle. 
And how wide is it? 
Well, I have a constant for that. 
BAR-WIDTH. 
BAR-WIDTH, and it's going to be some 
fraction of 800. 
Remember I have that thing called 
Y-SCALE? 
What I'm going to do is, I'm going to 
multiply 800 times the Y-SCALE. 
That gets me the bar height. 
And then there's the BAR-COLOR, and I 
want that to be solid. 
So, now I've got the text and the bar. 
But I need to line those up. 
Now, here's the thing you probably 
wouldn't have remembered. 
But there's a primitive, very useful 
here, called overlay/align center bottom. 
And that's going to put that color bar 
and that text lined up, I think nicely. 
Let's try it. 
Rectangle expects a mode as a third 
argument. 
Oh, I've got them in the wrong order 
here. 
What do we got? 
Mh-mm. 
The color of ours isn't very high, is it? 
I'm multiply 800 times the Y-SCALE. 
Oh, 800 isn't a very high tuition. 
8000 is a higher tuition, let's use 8000. 
Try that. 
Now we're almost there. 
This is almost like what we have here, 
except there's no black box around the 
color bar. 
So, let me add a black box, too. 
We'll say rectangle BAR-WIDTH times 800 
Y-SCALE oh, not 800, 8000. 
800 is a pretty good deal for tuition. 
Outline black and that's going to be that 
outline there. 
Now, let's see what we got. 
Hey, that's looking better. 
That does look like one of the bars that 
we're interested in. 
Now, notice something very, very 
important, here. 
That was kind of complicated. 
In fact, you may not feel comfortable 
with it yet. 
And if you don't feel comfortable with 
it, what I would do is stop the video 
right here and replay it. 
Let me, let me read it through first and 
then replay it. 
All it's saying, is it's saying listen, 
in order to make one bar, take three 
things and align their bottom centers. 
That's what's getting everything shifted 
to the bottom here. 
Align their bottom centers, so that it 
says the text that's the name of the 
school. 
A black outline of the right size. 
In other words, BAR-WIDTH and then the 
tuition times the scaling factor. 
And then the actual color text BAR-WIDTH. 
And then the tuition times the scaling 
factor. 
And this whole thing here, Is producing 
just the one bar. 
And what this is saying is it's saying, 
oh well, put all of that next to the base 
case result. 
So, that's one check-expect. 
That was so hard to produce that for the 
second example, for the times-two 
example, what I'm going to do, is I'm 
going to make the second school be S2, 
except it's going to come first in the 
list. 
And then that's going to be consed onto 
make-school S1, the original example 
8,000, which would be consed on empty. 
So, now I've got a list that's too long. 
The second school in the list is the one 
we had before. 
The first school in the list is a new 
one. 
And I'm just going to take this value 
here, and adjust it to be what I want. 
So, this school is called S2 and it's 
12,000 is its tuition. 
And now let's look at that. 
Two tests are failing, that's what we'd 
expect. 
But they're really starting to look right 
now. 
Oh wait, that didn't align properly. 
That floated up. 
Oh, yeah. 
Because, remember, that's why we had to 
use, we used overlay align. 
Because we wanted to get the individual 
components of a bar to be lined up right. 
But the side isn't good enough, either. 
We need to use beside/align bottom. 
And here, we'll use beside/align bottom. 
[SOUND]. 
Now it's looking better. 
In previous weeks people sometimes were 
like I don't understand why we do the 
examples before we do the function. 
Here's why we do the examples before we 
do the function, right here. 
This problem is hard enough, that 
figuring out specific examples takes 
time. 
We gotta figure out how we want to draw a 
Gee /g, we didn't use the right drawing 
function. 
Gee, we got the wrong order of arguments 
to this function. 
There's a whole bunch of stuff we have to 
figure out for the specific examples. 
Trying to write the general-purpose 
function is always harder than writing a 
specific example. 
So, if you're working on a problem where 
the specific examples are hard, it's just 
crazy to try to write the general-purpose 
function first. 
The whole idea of this, doing the 
examples first, method is, do the 
simplest things first because in hard 
problems, even the simplest things aren't 
that simple. 
So, here's why we're doing the examples 
first, is these examples are a little bit 
complicated. 
 >> The examples force us to figure out 
what it is we really want. 
Exactly how we want things to line up, 
exactly how we want things to look, what 
it is we really want. 
And once we know what we really want, 
coding the function definition is a lot 
easier.  [BLANK_AUDIO]