1 00:00:06,050 --> 00:00:08,980 In this middle part of the tuition graphing problem. 2 00:00:08,980 --> 00:00:11,890 Nothing fundamentally new is going to happen. 3 00:00:11,890 --> 00:00:15,330 But something super important is going to happen anyways. 4 00:00:15,330 --> 00:00:19,047 This video is really going to show the importance of doing examples before the 5 00:00:19,047 --> 00:00:23,766 function definition. In this video, what we want is 6 00:00:23,766 --> 00:00:27,670 complicated enough, that I'm going to spend quite a lot of time just getting 7 00:00:27,670 --> 00:00:32,127 the examples right. And once I do that, the function 8 00:00:32,127 --> 00:00:38,233 definition itself will be a lot easier. So, this is a demonstration of the power 9 00:00:38,233 --> 00:00:42,660 of the way the method puts examples before function definition. 10 00:00:43,760 --> 00:00:46,765 >> Now I'm in tuition graph v three. And that has the complete data 11 00:00:46,765 --> 00:00:49,540 definitions for both school and list of school. 12 00:00:49,540 --> 00:00:53,112 And now it's time to go design the first of the functions. 13 00:00:53,112 --> 00:00:57,333 So, remember what we're supposed to do is to design a function that consumes 14 00:00:57,333 --> 00:01:01,621 information about schools, in other words it consumes a value of type list of 15 00:01:01,621 --> 00:01:05,672 school. And it's gotta produce a bar chart 16 00:01:05,672 --> 00:01:09,522 kind of like this one. So, what I'm going to do in order to 17 00:01:09,522 --> 00:01:13,990 avoid scrolling so much, because scrolling makes people seasick I know. 18 00:01:13,990 --> 00:01:18,454 Is I'm just going to copy that and bring it all the way down here to my functions 19 00:01:18,454 --> 00:01:21,175 part. And I'll just stick it in a comment for 20 00:01:21,175 --> 00:01:24,300 now. It's just to remind us what we're trying 21 00:01:24,300 --> 00:01:27,360 to do. So, let's see, we're designing a 22 00:01:27,360 --> 00:01:32,050 function, it consumes ListOfSchool, and it's going to produce an Image like that, 23 00:01:32,050 --> 00:01:40,938 so that's what that has to do. And let's see, produce bar chart showing 24 00:01:40,938 --> 00:01:49,056 names and tuitions of the consumed schools. 25 00:01:49,056 --> 00:01:57,535 Let's do a stub, define we'll call it chart and it consumes a list of school 26 00:01:57,535 --> 00:02:09,383 and what I use for the stub for functions that produce image is this. 27 00:02:09,383 --> 00:02:19,258 White, there we go, great. The stub is well-formed. 28 00:02:19,258 --> 00:02:23,230 Now, let's try to do some examples. Well, it's a function operating on a 29 00:02:23,230 --> 00:02:26,151 list. It's a function operating on a 30 00:02:26,151 --> 00:02:32,580 self-referential data definition, so the base case test should be first. 31 00:02:32,580 --> 00:02:35,928 So, what are you supposed to produce if I hand you an empty list of schools? 32 00:02:35,928 --> 00:02:42,250 Well, you've gotta produce an image. So, I'm going to produce the same dummy 33 00:02:42,250 --> 00:02:49,126 value that the stub happens to produce, and that'll be the base case result. 34 00:02:51,240 --> 00:02:55,094 Let's do another example. Let's say check-expect, now the rule is 35 00:02:55,094 --> 00:02:57,766 two long. So, let's go ahead and do one that's two 36 00:02:57,766 --> 00:03:01,490 long. Check-expect chart. 37 00:03:01,490 --> 00:03:03,790 You know what? Let's do one that's one long, first. 38 00:03:03,790 --> 00:03:07,170 It's tempting to do the two long one, but let's do the one long one, first, it'll 39 00:03:07,170 --> 00:03:13,840 be simpler. Chart cons, and now we need some school. 40 00:03:13,840 --> 00:03:19,010 Make school, you can use any name you want. 41 00:03:19,010 --> 00:03:22,925 We'll just call it S1 for now, because that'll be simple. 42 00:03:22,925 --> 00:03:28,631 Make a school called S1 in which the tuition is, I don't know, 999. 43 00:03:33,260 --> 00:03:39,692 [INAUDIBLE] Let's not make it 999, let's make it some nice more round number than 44 00:03:39,692 --> 00:03:44,308 that like 800. Just keeping things easy to work with 45 00:03:44,308 --> 00:03:46,022 here. Easy, not cute. 46 00:03:46,022 --> 00:03:50,885 So, if I've got to chart that, then what do I want to see? 47 00:03:50,885 --> 00:03:58,636 Mh-mm. Well, I know that the base case result is 48 00:03:58,636 --> 00:04:08,120 this. The question is, what's the contribution 49 00:04:08,120 --> 00:04:16,530 of this one school here? Mh-mm, well, let's think about that. 50 00:04:16,530 --> 00:04:21,680 What is the contribution of that? Well, mh-mm. 51 00:04:21,680 --> 00:04:25,680 We want to see the text, that's for sure. Whoops. 52 00:04:25,680 --> 00:04:30,519 Remember there's that function text. We want to see the text of S1, the name 53 00:04:30,519 --> 00:04:35,870 of the school. And how big do we want the text to be? 54 00:04:35,870 --> 00:04:42,090 Well, you might remember that there was a constant up here, FONT_SIZE that I used. 55 00:04:47,140 --> 00:04:52,060 So, let me say that it's of size FONT_SIZE and there's another constant, 56 00:04:52,060 --> 00:04:58,622 FONT_COLOR. So, that's going to get me the name S1. 57 00:05:00,200 --> 00:05:04,090 But let's see here. That's going to get it to me 58 00:05:04,090 --> 00:05:09,530 horizontally, and I want this to be vertically. 59 00:05:09,530 --> 00:05:13,240 So, I need to rotate that. So, let me rotate it. 60 00:05:13,240 --> 00:05:20,160 I need to rotate it that way. I could never remember which way the 61 00:05:20,160 --> 00:05:24,580 rotation is. I'll say minus 90. 62 00:05:24,580 --> 00:05:28,700 Let's see, that gets me part of it. That gets me just the text. 63 00:05:28,700 --> 00:05:32,730 And I've gotta put them all next to each other so, it seems like there's a beside 64 00:05:32,730 --> 00:05:37,141 here. Now, let me show you something, I know 65 00:05:37,141 --> 00:05:40,988 I'm not done yet. But I'm going to run this anyways. 66 00:05:40,988 --> 00:05:48,188 That first test passed. This test failed because rotate expects 67 00:05:48,188 --> 00:05:51,645 an angle in degrees, as it's first argument. 68 00:05:51,645 --> 00:05:53,990 Oh, I've got the arguments in the wrong order. 69 00:05:53,990 --> 00:05:59,964 So, I'll put this over here. What I wanted to show you there is as, as 70 00:05:59,964 --> 00:06:05,123 examples become more complicated and especially ones that involve images, you 71 00:06:05,123 --> 00:06:11,134 can go ahead and run them, even before they're complete. 72 00:06:11,134 --> 00:06:14,620 Just to see if the part you have makes sense. 73 00:06:14,620 --> 00:06:18,390 You'll catch errors like wrong order of arguments to rotate, catch them right 74 00:06:18,390 --> 00:06:21,331 now. Finding a mistake right after you make 75 00:06:21,331 --> 00:06:24,610 it, is easier than finding it five minutes later. 76 00:06:24,610 --> 00:06:28,038 So, that's why I ran that then. Let's run it again. 77 00:06:28,038 --> 00:06:33,111 The test is failing, which we expected. But let's just take a look at what the 78 00:06:33,111 --> 00:06:37,803 image is, to see if it's starting to look right for us. 79 00:06:37,803 --> 00:06:41,276 well, I've got S1. That part's not bad, but it's rotated the 80 00:06:41,276 --> 00:06:43,962 wrong way. That's what I was almost guaranteed to 81 00:06:43,962 --> 00:06:46,935 get wrong, was the direction of the rotation. 82 00:06:46,935 --> 00:06:54,295 Alright, that's starting to look better but that's just getting me, yes. 83 00:06:54,295 --> 00:06:58,957 Now remember, remember, remember, remember this little box around here is 84 00:06:58,957 --> 00:07:05,040 not actually part of my result. This box is put here by the test window. 85 00:07:05,040 --> 00:07:09,860 See how the test window puts a box there and a box there around the base result? 86 00:07:09,860 --> 00:07:11,900 That box is not actually part of my result. 87 00:07:13,280 --> 00:07:15,980 So, there's something missing here. One is that I want that color bar, and 88 00:07:15,980 --> 00:07:21,950 the other is that I want that box. Let's see. 89 00:07:21,950 --> 00:07:26,243 Let's try to make the color bar. Mh-mm. 90 00:07:28,210 --> 00:07:34,366 I see, this is putting that next to that. It seems like what I also need, is to put 91 00:07:34,366 --> 00:07:40,487 the color bar. So, that's going to be something like 92 00:07:40,487 --> 00:07:43,670 rectangle. And how wide is it? 93 00:07:43,670 --> 00:07:51,981 Well, I have a constant for that. BAR-WIDTH. 94 00:07:51,981 --> 00:07:58,155 BAR-WIDTH, and it's going to be some fraction of 800. 95 00:07:58,155 --> 00:08:03,094 Remember I have that thing called Y-SCALE? 96 00:08:03,094 --> 00:08:11,119 What I'm going to do is, I'm going to multiply 800 times the Y-SCALE. 97 00:08:11,119 --> 00:08:17,383 That gets me the bar height. And then there's the BAR-COLOR, and I 98 00:08:17,383 --> 00:08:23,890 want that to be solid. So, now I've got the text and the bar. 99 00:08:24,960 --> 00:08:28,405 But I need to line those up. Now, here's the thing you probably 100 00:08:28,405 --> 00:08:34,134 wouldn't have remembered. But there's a primitive, very useful 101 00:08:34,134 --> 00:08:44,673 here, called overlay/align center bottom. And that's going to put that color bar 102 00:08:44,673 --> 00:08:53,112 and that text lined up, I think nicely. Let's try it. 103 00:08:53,112 --> 00:08:58,884 Rectangle expects a mode as a third argument. 104 00:08:58,884 --> 00:09:01,661 Oh, I've got them in the wrong order here. 105 00:09:01,661 --> 00:09:11,739 What do we got? Mh-mm. 106 00:09:11,739 --> 00:09:21,226 The color of ours isn't very high, is it? I'm multiply 800 times the Y-SCALE. 107 00:09:23,830 --> 00:09:32,922 Oh, 800 isn't a very high tuition. 8000 is a higher tuition, let's use 8000. 108 00:09:32,922 --> 00:09:37,720 Try that. Now we're almost there. 109 00:09:37,720 --> 00:09:41,752 This is almost like what we have here, except there's no black box around the 110 00:09:41,752 --> 00:09:46,830 color bar. So, let me add a black box, too. 111 00:09:46,830 --> 00:10:02,387 We'll say rectangle BAR-WIDTH times 800 Y-SCALE oh, not 800, 8000. 112 00:10:02,387 --> 00:10:11,011 800 is a pretty good deal for tuition. Outline black and that's going to be that 113 00:10:11,011 --> 00:10:14,050 outline there. Now, let's see what we got. 114 00:10:16,350 --> 00:10:21,172 Hey, that's looking better. That does look like one of the bars that 115 00:10:21,172 --> 00:10:26,220 we're interested in. Now, notice something very, very 116 00:10:26,220 --> 00:10:29,780 important, here. That was kind of complicated. 117 00:10:29,780 --> 00:10:32,434 In fact, you may not feel comfortable with it yet. 118 00:10:32,434 --> 00:10:35,972 And if you don't feel comfortable with it, what I would do is stop the video 119 00:10:35,972 --> 00:10:40,018 right here and replay it. Let me, let me read it through first and 120 00:10:40,018 --> 00:10:44,039 then replay it. All it's saying, is it's saying listen, 121 00:10:44,039 --> 00:10:51,086 in order to make one bar, take three things and align their bottom centers. 122 00:10:51,086 --> 00:10:53,977 That's what's getting everything shifted to the bottom here. 123 00:10:53,977 --> 00:10:55,441 Align their bottom centers, so that it says the text that's the name of the 124 00:10:55,441 --> 00:11:06,720 school. A black outline of the right size. 125 00:11:06,720 --> 00:11:13,410 In other words, BAR-WIDTH and then the tuition times the scaling factor. 126 00:11:13,410 --> 00:11:18,390 And then the actual color text BAR-WIDTH. And then the tuition times the scaling 127 00:11:18,390 --> 00:11:22,336 factor. And this whole thing here, Is producing 128 00:11:22,336 --> 00:11:26,750 just the one bar. And what this is saying is it's saying, 129 00:11:26,750 --> 00:11:30,540 oh well, put all of that next to the base case result. 130 00:11:32,420 --> 00:11:38,622 So, that's one check-expect. That was so hard to produce that for the 131 00:11:38,622 --> 00:11:42,669 second example, for the times-two example, what I'm going to do, is I'm 132 00:11:42,669 --> 00:11:46,929 going to make the second school be S2, except it's going to come first in the 133 00:11:46,929 --> 00:11:54,062 list. And then that's going to be consed onto 134 00:11:54,062 --> 00:12:05,560 make-school S1, the original example 8,000, which would be consed on empty. 135 00:12:05,560 --> 00:12:09,056 So, now I've got a list that's too long. The second school in the list is the one 136 00:12:09,056 --> 00:12:11,553 we had before. The first school in the list is a new 137 00:12:11,553 --> 00:12:14,928 one. And I'm just going to take this value 138 00:12:14,928 --> 00:12:26,320 here, and adjust it to be what I want. So, this school is called S2 and it's 139 00:12:26,320 --> 00:12:32,310 12,000 is its tuition. And now let's look at that. 140 00:12:34,080 --> 00:12:36,450 Two tests are failing, that's what we'd expect. 141 00:12:36,450 --> 00:12:38,160 But they're really starting to look right now. 142 00:12:38,160 --> 00:12:44,570 Oh wait, that didn't align properly. That floated up. 143 00:12:44,570 --> 00:12:47,789 Oh, yeah. Because, remember, that's why we had to 144 00:12:47,789 --> 00:12:52,798 use, we used overlay align. Because we wanted to get the individual 145 00:12:52,798 --> 00:12:58,850 components of a bar to be lined up right. But the side isn't good enough, either. 146 00:12:58,850 --> 00:13:14,910 We need to use beside/align bottom. And here, we'll use beside/align bottom. 147 00:13:14,910 --> 00:13:28,120 [SOUND]. Now it's looking better. 148 00:13:28,120 --> 00:13:32,542 In previous weeks people sometimes were like I don't understand why we do the 149 00:13:32,542 --> 00:13:39,220 examples before we do the function. Here's why we do the examples before we 150 00:13:39,220 --> 00:13:44,382 do the function, right here. This problem is hard enough, that 151 00:13:44,382 --> 00:13:48,910 figuring out specific examples takes time. 152 00:13:50,010 --> 00:13:52,971 We gotta figure out how we want to draw a Gee /g, we didn't use the right drawing 153 00:13:52,971 --> 00:13:55,738 function. Gee, we got the wrong order of arguments 154 00:13:55,738 --> 00:13:58,920 to this function. There's a whole bunch of stuff we have to 155 00:13:58,920 --> 00:14:03,042 figure out for the specific examples. Trying to write the general-purpose 156 00:14:03,042 --> 00:14:05,741 function is always harder than writing a specific example. 157 00:14:05,741 --> 00:14:09,345 So, if you're working on a problem where the specific examples are hard, it's just 158 00:14:09,345 --> 00:14:13,170 crazy to try to write the general-purpose function first. 159 00:14:13,170 --> 00:14:16,965 The whole idea of this, doing the examples first, method is, do the 160 00:14:16,965 --> 00:14:21,657 simplest things first because in hard problems, even the simplest things aren't 161 00:14:21,657 --> 00:14:25,851 that simple. So, here's why we're doing the examples 162 00:14:25,851 --> 00:14:28,780 first, is these examples are a little bit complicated. 163 00:14:30,180 --> 00:14:34,212 >> The examples force us to figure out what it is we really want. 164 00:14:35,340 --> 00:14:38,668 Exactly how we want things to line up, exactly how we want things to look, what 165 00:14:38,668 --> 00:14:43,050 it is we really want. And once we know what we really want, 166 00:14:43,050 --> 00:14:45,880 coding the function definition is a lot easier. [BLANK_AUDIO]