The first visualization

here you can see the background and font are changed

Interpretation of Visualization 1

This graph? Actully pretty cool. The two axis are Beak Depth and Length, corresponding to the species and island of the penguin. The Adeline Penguins reside on the Torgersen and Dream island. Otherwise the other two penguins, Chinstrap and Gentoo reside on their own respective islands, Dream and Biscoe. Each pengiun has similar beak length and depth to their own species. The techincal aspect, includes a special monotone font and a custom background color to match the slide deck.

The second visualization

This involves layering!

Interpretation

Wow! What a fun layered graph we have! The three elements implimented in the graph are Beak Length, Beak Depth, and Flipper Length. As you can see, the flipper length is much longer than either the Beak Length or Depth. The Chinstrap Penguins seemingly have shorter flippers than their counterparts, but a longer Beak Depth. Almost as deep as the Gentoo Penguins. While this graph isn't perfect or completetly visually appealing, you can learn some new information from it.

CODEBLOCK 1

I added spaces to the 'div' and 'script' tag, so it would work within the 'code block'. One important thing to keep in mind here is that the color of the 'points' are based on the species of the penguin. Otherwise, you should be able to directly copy and paste into your html to work!

						< div id="penguins-scatter">< /div>
						< script type="text/javascript">
						var spec = {
							"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
							"data": {
								"url": "https://vega.github.io/vega-datasets/data/penguins.json"
							},
							"width":800,
							"height":400,
							"config":{
								"font":"Monospace",
								"background": "#fff9e5", // this is the custom background color
							},
							"mark": "point",
							"encoding": {
								"x": {
									"field": "Beak Length (mm)",
									"type": "quantitative",
									"scale": {"zero": false}
								},
								"y": {
									"field": "Beak Depth (mm)",
									"type": "quantitative",
									"scale": {"zero": false}
								},
								"color": { 
									"field": "Species",
									"type": "nominal"
								},
								"shape": {
									"field": "Island",
									"type": "nominal"
								}
							}	
						};
						var opt = {"renderer": "canvas", "actions": false};
						vegaEmbed("#penguins-scatter", spec, opt);
						< /script>	
						// this is the last line 
						// no this is 

					

CODEBLOCK 2

just copy and paste this boy and you've got a line graph about penguins! don't forget to remove the spaces¡

< div id="vis-penguins-layer-line">< /div>
< script type="text/javascript">
var spec = {
	"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
	"data": {
		"url": "https://vega.github.io/vega-datasets/data/penguins.json" //check to make sure this data still works!
	},
	"width":800,
	"height":400,
	"config":{
		"font":"Monospace",
		"background": "#fff9e5", // custom background color
	},
	"layer":[{
		"mark": "line",
		"encoding":{
			"x":{
				"field":"Species",
				"type":"nominal" // this is nominal data
			},
			"y":{
				"field":"Beak Length (mm)",
				"type":"quantitative"
			},
			"color": {"value":"red"}
		}
	},{
		"mark": "line",
		"encoding":{
			"x":{
				"field":"Species",
				"type":"nominal"
			},
			"y":{
				"field":"Beak Depth (mm)",
				"type":"quantitative"
			},
			"color": {"value":"green"}
		}
	},{
		"mark": "line",
		"encoding":{
			"x":{
				"field":"Species",
				"type":"nominal"
			},
			"y":{
				"field":"Flipper Length (mm)",
				"type":"quantitative"
			}, 
			"color": {"value":"blue"} // the blue is a bit bright, but I like it more than the grey
		}
	}]
};
var opt = {"renderer": "canvas", "actions": false};
vegaEmbed("#vis-penguins-layer-line", spec, opt);
< /script>				
// this is the last line