This video will provide very detailed hints about how to tackle the Iris dataset visualization challenge. The first thing to do is to study the algorithm. There's two top-level steps and the second step has four lower-level steps. Once you've looked at it, if you want to, you can think about how to implement each step in JavaScript. If you have some good ideas, then go right ahead and skip this tutorial video, start your coding. You can always come back here and check things out later if you encounter any problems. On the other hand, if you don't have any ideas and you're feeling a bit stuck, then we can go through the algorithm slowly and carefully here, then translate each step directly into JavaScript. Let's start with step 1, loading the iris CSV data file into an array. You can download the iris.csv data file from the Coursera site open it in a spreadsheet and have a look at the data. You'll see there are five columns for numerical columns of data and the last one is a textual column telling us what variety of iris flower this particular row corresponds to. We start off with a CSV data file, and we're going to use our interactive code editor to load this into a string, which is called CSV string. Then after that, we're going to use the papa pause JavaScript CSV parsing library to turn this into a JavaScript data structure, which will have a field in it called data, which will be a two-dimensional array, where each of those subarrays is a row from the CSV file. This is what it looks like in JavaScript so we call papa.parse CSV string and store the resulting object data structure in the results variable. We can use console log to print out how many lines of data we've read. Hopefully, answer should be 151 for our data file, one had a row, 150 rows of data. If you want to, we could print out maybe the zeroth row, which is the header row, and then the first row of real data and we should see something a bit like this. That's the first step let's come on to step 2. Now we want to do a certain repeated set of activities for each row of data because each row represents a single flowers measurement. We know how to repeat parts of computation using the full loop. Here we're going to iterate 150 times I, is going to iterate between one and 150 inclusive. That's going to iterate over the elements of the data array which correspond to the rows of data in our CSV file. Let's look at the low-level steps for phase 2 now which are things we need to do with every row of data. The first one is to extract the x, y data measurements and here what we've done is just selected two particular columns, row 2 and row 3, which you ramp up from the CSV file, correspond to the petal length and petal width in centimeters. We're going to use these data readings for every row, for every flower to get our x and y measurements. We need to use the same column for each row of data that we measure so always be row square brackets 2 and row square brackets 3. Of course, there are four different measurements for each one and we could've chosen any pair of them but we're using petal length and width here, row square brackets 2, row square brackets 3. The next step is to determine the iris variety remember this the last column, which we get from row square brackets 4. Whereas x and y are going to be numerical values, variety is a textual value to string to tell us what iris it is. The next thing to do is to set the turtle text color based on the iris variety. If it's a setosa or we want red text versicolor green, virginica blue and the colors here are just ordinary HTML and CSS color specifications. Let's imagine we've got a function that converts from the name of the iris to a particular color and then we're going to use the turtle set font color to set that color. What would that function look like? The iris color function that we convert from the name of the variety to the color or something like this or multi-armed conditional statement. Here's a switch statement as well if you wanted, so I've got red, green, and blue corresponding to my three iris varieties on a default color in case none of the iris varieties is present. Finally, we go to plot our data point on the Turtle Graphics panel, hit the right coordinates. We go to the x, y position, and then when we get there we're going to write the x value. The problem is of course when we do this, all our x, y positions are very small numbers, probably in the range of 0-10 and so all the x's appear on top of each other maybe a better thing to do we just scale things up and multiplying here the x and y values by 20. That gives us something slightly better look at that. There is a more sophisticated way of doing things, looking at the min and the max x values and scaling accordingly. You can have a think about that or maybe checkup next hints video, that's all for now. We've gone right the way through the algorithm and we come up with a minimal implementation for it in JavaScript. Have a look at yourself and see how we get on. Thanks.
