28:null 29:["$","title",null,{"children":"Lab 1 | Yuanpei Zhuang | Observable"}] 2e:T578,html`

About Me

I am an Architecture Master student with science background! My favorite data visualization example is Napoleon March Chart, at least for now.

By: Yuanpei Zhuang

My Bio

My Data Viz Goals

I want to explore the different way to narrate data in various context
It would be helpful for my future career as product designer
I could fuse my knowledge from science and art
It is interesting

Contact Me

Email:yuanpei@berkeley.edu
Linkedin:https://ca.linkedin.com/in/yuanpei-zhuang-144747117

`2f:[] 2c:{"id":"417cde8819a56221","slug":"lab-1","title":"Lab 1","thumbnail":"32128c83724e4a7114f8855be2252d98a86e6868fdb1292da95f30e71f40f469","access_level":"public","create_time":"$D2020-01-22T20:36:27.667Z","update_time":"$D2020-05-04T16:36:11.707Z","view_time":null,"first_public_time":"$D2020-01-22T20:57:16.210Z","has_unpublished_edits":null,"fork":{"id":"39330d7efdbca4cf","slug":"lab-1/2","title":"Lab 1","owner":{"id":"c7137a5f12848be9","login":"nithyaramgopal","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"7e51b8e6f343ea35","login":"yuanpei","name":"Yuanpei Zhuang","avatar_url":"https://avatars-next.observableusercontent.com/c92f8a501829ac8b1c8cb62dcb6f99e524e42651d4e417fced3d5cb2ae6ca47f","tier":"starter_2024"},"version":285,"publish_version":285,"role":null,"authored":false,"authors":[{"type":"individual","id":"7ce3f88b60ce2051","login":"yuanpei","name":"Yuanpei Zhuang","avatar_url":"https://avatars-next.observableusercontent.com/c92f8a501829ac8b1c8cb62dcb6f99e524e42651d4e417fced3d5cb2ae6ca47f","tier":null}],"members":[{"type":"individual","id":"7ce3f88b60ce2051","login":"yuanpei","name":"Yuanpei Zhuang","avatar_url":"https://avatars-next.observableusercontent.com/c92f8a501829ac8b1c8cb62dcb6f99e524e42651d4e417fced3d5cb2ae6ca47f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Lab 1","cells":[{"id":0,"value":"md`# Lab 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md` Hi everyone ! Welcome to Lab 1. In this lab we will be brushing up our HTML and CSS skills. We are also going to practice some basic exercises with SVGs.\n\n### Observable\nWe will be using Observable notebooks for this lab as well as future labs. Observable notebooks are an easy way to type snippets on HTML code and render the results. It is very useful for learning d3 and vega-lite. Both are very useful in this class. \n\nPlease checkout the following link for a quick introduction to Observable. https://observablehq.com/@observablehq/five-minute-introduction#color\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md `# HTML\n\nHTML refers to Hypertext Markup Language. \n\n### HTML Syntax\n\nHTML works by separating content into different sections of the document demarked by HTML tags. Each section starts with a start tag and ends with a stop tag \n\nTo learn more about the commonly used HTML tags you can refer to the following tutorial. https://www.1keydata.com/html-tutorial/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`### 1. Basic HTML Webpage\n\n1. Create a basic HTML Webpage which says \"About Me\".\n\n2. Include a subheading that says \"By: Your Name\"\n\n3. Include a paragraph \"My Bio\". In this section, write a short paragraph about yourself. * Hint: Use the \\`

\\` tag\n\n4. Include a section with a subheading \"My Data Viz Goals\". In this section, create an un-ordered list of your some of the things you hope to learn/achieve in this class. * Hint: Use the \\`

\\` tag

About Me

I am an Architecture Master student with science background! My favorite data visualization example is Napoleon March Chart, at least for now.

By: Yuanpei Zhuang

My Bio\n
\n\n \n\n
My Data Viz Goals\n

I want to explore the different way to narrate data in various context
It would be helpful for my future career as product designer
I could fuse my knowledge from science and art
It is interesting

Contact Me

\\` Tags\n\n\\`

\\` tags are used in HTML to create logical sections of the webpage. It is very useful for organizing the content on the webpage instead of the dumping everything in the \\`\\`. \n\nThey are especially useful for applying styling and color to certain sections of the webpage without individually specifying the style for each element. \n\nMake the following changes to the existing webpage. \n\n1. Include a \\`

\\` with a subheading \"About Me\". In this section, write a short paragraph about yourself. * Hint: Use the \\`

\\` tag\n\n2. Include a \\`

\\` with a subheading \"My Data Viz Goals\". In this section, create an un-ordered list of your some of the things you hope to learn/achieve in this class. * Hint: Use the \\`

\\` tag

\\` with a subheading \"Contact Me\". Include your Contact Information (email, Linkedin, portfolio etc.)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`### 5. SVG \n\nSVG stands for scalable vector graphics. Refer to the following tutorial to brush up on your svg basics and complete the following exercise. https://www.w3schools.com/graphics/svg_intro.asp\n\n\n1. Create a yellow circle with a radius = 50 units. Specify the height and the width of the svg to be 100 units. The border of the circle should be green.\n\n2. Create a blue rectangle with a height = 100 units and width = 200 units. Specify the height/width of the svg as 110/300 respectively.\n\n3. create a red line with slope = 1 and origin at 0,0. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"html`\n\n \n\n \n\n
\n \n \n
\n \n\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"html`\n\n \n\n \n
\n
\n \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`### 6. Grouping SVG Elements together. \n\nThe \\`\\` tag is used to group together various svg elements. It is very easy to apply the same propertiers to all elements of the group. \n\nTry to replicate the following image using the \\`\\` tag and without the \\`\\` tag. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"html`\n\n \n\n\n\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"html`\n\n \n\n\n\n\n\n \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md`### References\n\nThis assignment was prepared by Nithya Ramgopal using the following references. \n\n1. https://observablehq.com/d/006cec34548c8810\n2. https://www.1keydata.com/css-tutorial/\n3. https://www.1keydata.com/html-tutorial/html-tags.php\n4. https://www.geeksforgeeks.org/difference-between-an-id-and-class-in-html/\n5. https://www.w3schools.com/css/\n6. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g\n7. https://www.w3schools.com/graphics/svg_path.asp\n8. https://observablehq.com/@observablehq/five-minute-introduction#color\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"