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]