How do you join the geometries that come with the geojson file with the attributes that come with a csv file? I went into QGIS and connected the cvs data with the geojson file that contained the centrioles (that I also created using QGIS). I did this by using the join method and used the states name as the common feature. I could have joined them by using observable by uding the code: csv_data = d3.csvParse(await FileAttachment("farmlanddatap3.csv").text(),({GEOID, acresoffarmlandp4_Value, acresoffarmlandp4_land_acres}) => [+GEOID, [ +acresoffarmlandp4_Value]). This joins the data because the +GEOID stands for the feature that both the cvs and geojson have in common and lets observable know that they should be connected.

How do you create and use colors on Observable? Explain how you map values to the fill colors of polygons? You can create colors on observable by creating a line of code just naming the list of colors to be used (this is shown in the code named YlOrRd). To actually create the color you can simply put either name of the color or go to color brewer and find the HEX name of the color wanted. Then using a classification code (like d3.scaleThreshold()) and put the color code (in this case ylOrRd) in the .range() function.

How do you create and use colors on Observable? You can create colors on observable by creating a line of code just naming the list of colors to be used (this is shown in the code named YlOrRd). To actually create the color you can simply put either name of the color or go to color brewer and find the HEX name of the color wanted. Then using a classification code (like d3.scaleThreshold()) and put the color code (in this case ylOrRd) in the .range() function.

How do you create and use colors on Observable?Explain how you map values to the fill colors of polygons? You can create colors on observable by creating a line of code just naming the list of colors to be used (this is shown in the code named YlOrRd). To actually create the color you can simply put either name of the color or go to color brewer and find the HEX name of the color wanted. Then using a classification code (like d3.scaleThreshold()) and put the color code (in this case ylOrRd) in the .range() function. By putting the color code name in the data classification code it is able to tell observable what colors go with what data points

How do you determine the style, width and color of the outlines of the point symbol (outlines)? For the outline by going to the graduated symbols line f code and then going all the way down to .join("circle") and look at the lines that involve the word stroke in it. The code with just stroke controls the color out the outline while the stroke-width controls the width and by entering a number will change the width with larger numbers increasing the width. The actually change the style would have to add in another line of code being: .attr("stroke-linejoin",style) and entering what kind of style you want (like round).

How do you determine the type of point symbol (e.g., circle, square, etc.)? First, I determined the correct formula needed to calculate area of the symbol depending on what shape I choose. For this notebook, I choose circle so I made sure to put this line of code Array.from(radiusArray, d=>Math.PI*Math.pow(d, 2)) which will calculate the area that will be used in the classification line of code to determine how big each circle is compared to each other. Also, I calculated the radiusArray by determining how much bigger I want each circle to be to each other form the data. I then went up to the graduated symbols line of code and typed in circle for the join code and the select all code.

How do you create a scale for mapping (linking) the values of an attribute of your points to the radius of the point? I did this by using the code d3.scaleThreshold() ( which is the code for unclassed data classification) making the domain the natural break values and then making the range the radius array values which represents how big each circle should be for each class.

How do you create a legend? To create a legend I used the code symbolLegnedDef and then typed in the following functions which are type, title, fill, size, direction, coluns, ropadding, coulmnpadding, clipHeight, titleOrient, symbolStrokeColor, and symbolStrokeWidth. I then filled them in with commands already provided by observable ( for example titleOrient I put down top because I wanted it at the top of the map). The only fucntion that I filled in using a name of another line of code was the title which referred to the attributeName line of code that has the attributes used from the cvs file.

How do the values get displayed when you hover over each point? I put a line of code which is the following: .text(d => `${d.properties[idName]} : ${format(d.properties[attributeName])}`); in the graduated symbol line of code. I then filled in the state name to show up by referencing the idName which is line of code containing the name of the column form the point geojson data that has the state names. For the actual value, I referenced a lien of code for thein the properties () that contained the name of the column in the point json file that had all the number of 20-24 year old data.

How do you create the basemap from polygon topojson, and how do you set its symbology? I created the basemap from polygon topojson by using the line of code:svg.append("path") .datum(topojson.feature(basepolygons, basepolygons.objects.midwestbasebb)) which tells bserabel that the objects from the midwestbasebb (which are the polgyons) that hey will now be basepolygons by using the basepolygon function. For the symbology, I put in this code svg.append("path") .datum(topojson.mesh(basepolygons, basepolygons.objects.midwestbasebb, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path_basemap); which basically refers to the first line of code but is used for it symbology. So I can put the symbololgy in it by using .attr() and typing teh function first and then what I want to function to do after the comma.