more image descriptions

digitalcoleman · digitalcoleman · commit 74f029aa684b · 2021-07-09T00:18:22.000-06:00
diff --git a/content/tutorials/text/data/index.mdx b/content/tutorials/text/data/index.mdx
@@ -46,7 +46,7 @@ In [Strings and Drawing Text](http://processing.org/learning/text/), we saw how
 
 <FixedImage center width={333} height={222}>
 
-![](./fig_18_01_user_input.png)
+![example result of sketch. black text of instructions and a series of numbers below input by a user](./fig_18_01_user_input.png)
 
 </FixedImage>
 
@@ -193,7 +193,7 @@ Once the text file is in place, Processing’s `loadStrings()` function is used
 
 <FixedImage center width={333} height={130}>
 
-![](./fig_18_02_filetxt.png)
+![window showing the content of the sample file with 5 lines of text](./fig_18_02_filetxt.png)
 
 </FixedImage>
 
@@ -208,7 +208,7 @@ To run the code, create a text file called “file.txt,” type a bunch of lines
 
 <FixedImage center width={333} height={130}>
 
-![](./fig_18_03_datatxt.png)
+![series of 10 numbers with commas in between ranging from 16 to 169](./fig_18_03_datatxt.png)
 
 </FixedImage>
 
@@ -218,7 +218,7 @@ The results of visualizing this data are shown below.
 
 <FixedImage side width={200} height={200}>
 
-![](./fig_18_04_bargraph.png)
+![greyscale bar graph aligned on the top and varying lengths downward. longer bars are lighter](./fig_18_04_bargraph.png)
 
 </FixedImage>
 
@@ -252,7 +252,7 @@ A table consists of data arranged as a set of rows and columns, also called “t
 
 <FixedImage center width={333} height={130}>
 
-![](./fig_18_05_datacsv.png)
+![contents of a file where the first line is headings and the 4 following lines are data, all seperated by commas](./fig_18_05_datacsv.png)
 
 </FixedImage>
 
@@ -278,7 +278,7 @@ Now that the table is loaded, I can show how you grab individual pieces of data
 
 <FixedImage center width={645} height={222}>
 
-![](./data_05_headers.jpg)
+![table of data with the first line being x, y, diameter, name and then the data below in 4 rows](./data_05_headers.jpg)
 
 </FixedImage>
 
@@ -367,7 +367,7 @@ The following example puts all of the above code together. Notice how each row o
 
 <FixedImage center width={500} height={375}>
 
-![](./fig_18_07_tablebubbles.png)
+![four circles/bubbles of varied diameter from the data table. the bubble the mouse is hovering over has the label joyous. at the bottom it says click to add bubbles](./fig_18_07_tablebubbles.png)
 
 </FixedImage>
 
@@ -477,7 +477,7 @@ Here, the distance between a given point and a circle's center is compared to th
 
 <FixedImage center width={406} height={210}>
 
-![](./fig_18_08_rollover.png)
+![diagram shows why the distance calculation being larger than the radius means you are not in the circle and vice versa](./fig_18_08_rollover.png)
 
 </FixedImage>
 
@@ -568,15 +568,15 @@ An example of data only available as HTML is the [Internet Movie Database](http:
 
 <FixedImage center width={333} height={234}>
 
-![](./fig_18_09_shaunsheep.png)
+![screenshot of imdb page for the movie](./fig_18_09_shaunsheep.png)
 
 </FixedImage>
 
 Looking in the HTML source from the above URL, I find a giant mess of markup.
 
 <FixedImage center width={333} height={233}>
 
-![](./fig_18_10_shaunsheep_sourc.png)
+![screenshot of the source code for the webpage](./fig_18_10_shaunsheep_sourc.png)
 
 </FixedImage>
 
@@ -623,7 +623,7 @@ The following code retrieves both the running time and movie poster iamge from I
 
 <FixedImage center width={333} height={388}>
 
-![](./fig_18_11_parsing_imdb.png)
+![the movie poster for Shaun the Sheep with the text of the title and runtime of the movie below](./fig_18_11_parsing_imdb.png)
 
 </FixedImage>
 
@@ -700,15 +700,15 @@ As you learned earlier, an array is an ordered list of variables. Each element o
 
 <FixedImage center width={355} height={174}>
 
-![](./fig_18_12_traditional_arra.png)
+![diagram showing how each of the five numbers is associated with an index 0 to 4](./fig_18_12_traditional_arra.png)
 
 </FixedImage>
 
 However, what if instead of numbering the elements of an array you could name them? This element is named “Sue,” this one “Bob,” this one “Jane,” and so on and so forth. In programming, this kind of data structure is often referred to as an _associative array, map,_ or _dictionary._ It’s a collection of (key, value) pairs. Imagine you had a dictionary of people's ages. When you look up “Sue” (the key), the definition, or value, is her age, 24.
 
 <FixedImage center width={354} height={173}>
 
-![](./fig_18_13_associative_arra.png)
+![diagram showing a series of numbers with people's names below each](./fig_18_13_associative_arra.png)
 
 </FixedImage>
 
@@ -757,7 +757,7 @@ The concordance now becomes a rather simple program to write. All I need to do i
 
 <FixedImage center width={333} height={394}>
 
-![](./fig_18_14_concordance_viz.png)
+![resultiung bar graph showing the word "the" is used 592 times, "and" 570 times and so on for the top 13 words](./fig_18_14_concordance_viz.png)
 
 </FixedImage>
 
@@ -832,7 +832,7 @@ XML organizes information in a tree structure. Let’s imagine a list of student
 
 <FixedImage center width={500} height={320}>
 
-![](./data_06_xml.jpg)
+![heirarchy tree with Students at the top, four students under that, some items under one of the students, and under one item "address" there are more items: street, city, state and zip](./data_06_xml.jpg)
 
 </FixedImage>
 
@@ -893,7 +893,7 @@ The data is mapped in the tree stucture shown below:
 
 <FixedImage center width={500} height={214}>
 
-![](./data_07_weatherxml.jpg)
+![tree diagram with RSS at the top, Channel underneath, and item under that. branching from item are many tags](./data_07_weatherxml.jpg)
 
 </FixedImage>
 
@@ -972,7 +972,7 @@ Following is the above code put together in an example that retrieves weather da
 
 <FixedImage center width={200} height={129}>
 
-![](./fig_18_17_weather.png)
+![resulting text with the zipcode, high temperature, and forecast](./fig_18_17_weather.png)
 
 </FixedImage>
 
@@ -1055,7 +1055,7 @@ I can use `getChildren()` to retrieve the array of `<bubble>` elements and make
 
 <FixedImage center width={500} height={375}>
 
-![](./fig_18_07_tablebubbles.png)
+![four circles/bubbles of varied diameter from the data table. the bubble the mouse is hovering over has the label joyous. at the bottom it says click to add bubbles](./fig_18_07_tablebubbles.png)
 
 </FixedImage>
 
@@ -1429,7 +1429,7 @@ In the above example, I likely don't want to request the data sixty times per se
 
 <FixedImage center width={200} height={78}>
 
-![](./fig_18_19_thread.png)
+![a circle of lines resembling the lines of a timer. next to it is the time in numbers](./fig_18_19_thread.png)
 
 </FixedImage>
 
diff --git a/content/tutorials/text/rendering/index.mdx b/content/tutorials/text/rendering/index.mdx
@@ -1,10 +1,11 @@
 ---
-slug: '/tutorials/rendering'
-title: 'Render Techniques'
-author: 'Casey Reas and Ben Fry'
-intro: 'Tools for rendering geometries in Processing.'
-level: 'Intermediate'
+slug: "/tutorials/rendering"
+title: "Render Techniques"
+author: "Casey Reas and Ben Fry"
+intro: "Tools for rendering geometries in Processing."
+level: "Intermediate"
 coverImage: rendering.png
+order: "24"
 ---
 
 <Note>
