2c:null 2d:["$","title",null,{"children":"Vega-Lite Tutorial 1 | i247 2020 | Observable"}] 32:[] 30:{"id":"c4da87671a5ac07f","slug":"lab-1","title":"Vega-Lite Tutorial 1","thumbnail":"3b2ab3368cf36681ddc7f3bec551279a2dd462f6198d740186f927b0b9f637d1","access_level":"public","create_time":"$D2020-01-28T23:03:47.688Z","update_time":"$D2020-04-17T16:17:05.406Z","view_time":null,"first_public_time":"$D2020-04-01T18:58:58.745Z","has_unpublished_edits":null,"fork":{"id":"39330d7efdbca4cf","slug":"lab-1/2","title":"Lab 1","owner":{"id":"c7137a5f12848be9","login":"nithyaramgopal","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"f9de861669cf84e3","login":"i247sp20","name":"i247 2020","avatar_url":"https://avatars-next.observableusercontent.com/e51b5bb4b9a1bc21a48d1371f7665ee4fa46bc9a16c20ccc8a0779dda7e8c91c","tier":"education_2026","bio":"This is the Observable Team site for I247, Spring 2020, Professor Marti Hearst, UC Berkeley."},"version":264,"publish_version":264,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf3cc74dd3f61a9e","login":"nithyaramgopal","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b909d51dffd894c72b4f505635a139efe000b3b7f02cf175cd79d6b4c3c8dd9d","tier":null,"bio":""}],"members":[{"type":"team","id":"f9de861669cf84e3","login":"i247sp20","name":"i247 2020","avatar_url":"https://avatars-next.observableusercontent.com/e51b5bb4b9a1bc21a48d1371f7665ee4fa46bc9a16c20ccc8a0779dda7e8c91c","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"b62035fb14924b81","slug":"labs","title":"Labs","owner":{"id":"f9de861669cf84e3","login":"i247sp20","name":"i247 2020"}},"type":"notebook","body":{"titling":"auto","title":"Vega-Lite Tutorial 1","cells":[{"id":0,"value":"md`# Vega-Lite Tutorial 1\nNithya Ramgopal and Marti Hearst, I247 Spring 2020\n\nThis tutorial is part of a three part series teaching Vega-Lite in Observable: [Part 1](https://observablehq.com/@i247sp20/lab-1?collection=@i247sp20/labs), [Part 2](), and [Part 3](https://observablehq.com/@i247sp20/lab-3-practice-vega-lite-multi-view-charts-and-aggregations?collection=@i247sp20/labs)\n\nThis is followed by a series on D3.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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

\\` 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"html`\n\n \n\n \n\n
\n \n \n
\n \n\n \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"