2e:null 2f:["$","title",null,{"children":"Lab 1 - HTML, CSS, SVG | as9934 | Observable"}] 34:T10aa,html`

About Ari

Arijit (Ari) Douglas Sen is a freelance contributor for NBC News, currently studying multimedia journalism and data science at the University of California at Berkeley’s Graduate School Journalism. He is a recent graduate of the University of North Carolina at Chapel Hill’s Hussman School of Journalism and Media and has written for Our Chatham, Lead Stories the Asheville Citizen-Times and the NBC News’ investigative unit.

As an intern at NBC, Sen co-authored a series of investigative stories about a senior State Department official who embellished her resume, which was followed by nearly every national news outlet, generated millions of web page views and ultimately led her to resign. He also pitched and reported a single byline story about UNC spying on student activists with surveillance technology and co-authored an investigative piece as part of NBC’s impeachment coverage.

In August, Sen rejoined NBC as a freelance contributor, and co-authored a piece on the massive scope of QAnon groups and pages on Facebook.

Sen got his start in journalism as a freshman in West Henderson High School’s nationally-renowned scholastic journalism program. In his time at West, Sen served on both the yearbook and newsmagazine staff and rose to the rank of web editor-in-chief. While web editor-in-chief, the website he redesigned, wingspanonline.net, received widespread acclaim, winning three Tar Heel awards for best scholastic news website in the state and a Pacemaker finalist award, designating it as one of the best scholastic news websites in the country. Sen also received several personal awards including the Rachel-Rivers Coffey North Carolina High School Journalist of the Year award in 2016.

After graduating as one of the top students in his class, Sen chose to attend UNC-Chapel Hill to further his study of journalism. In his first semester, he wrote for The Daily Tar Heel’s State and National Desk covering the 2016 election.

In the summer of 2017, Sen interned at the Asheville Citizen-Times, one of North Carolina’s largest newspapers. While at the Citizen-Times, Sen was given a full reporting role and was tasked with reporting new stories each and every day. In the ten weeks he spent at the Citizen-Times, Ari reported almost 60 stories, including coverage of local politics, crime and a series of stories about a high-profile manhunt and murder. In the same period, his stories were featured on the front page 16 times and garnered tens of thousands of web page views.

More recently Sen has reported on local government for Our Chatham, an audience-driven email newsletter for a part of rural North Carolina, and served as a staff-writer for Lead Stories, Facebook’s top fact-checker.

In addition to writing, Sen is also a competent visual storyteller. His photographs and videos have been appeared online in the New York Times, Asheville Citizen-Times and the Raleigh News and Observer and have been recognized by Hussman’s 37th Frame competition. In May, as part of the Horizon Interactive Award-winning 2019 Carolina Photojournalism Workshop, he shot and edited a short documentary on an opioid recovery organization in five days. That same summer, he produced another short documentary about sugar dating on UNC’s campus for a start-up news organization, Tar Heel News Beat.

Sen hopes to pursue a career in journalism at a major national news outlet as a multi-platform investigative reporter, using on the intersection of politics, technology, national security and privacy. When not reporting stories, he enjoys watching Tar Heel basketball and listening to podcasts or audiobooks on slow runs.

My goals for this class are:

Learn D3
Use D3 to create an interactive scrollytelly visualization for my Oakland Suspensions story

Contact Me

Phone: 828-318-5400

Email: ari_sen@berkeley.edu

` 35:[] 32:{"id":"28b3603fe9dba236","slug":"lab-1-html-css-svg","title":"Lab 1 - HTML, CSS, SVG","thumbnail":"7b0a13c2a2b7c3736a0a899f52a89ead1bf725c4d8cd1844eb99fb5ce713ef70","access_level":"public","create_time":"$D2021-01-20T20:18:13.678Z","update_time":"$D2021-01-20T21:04:23.391Z","view_time":null,"first_public_time":"$D2021-01-20T21:04:39.014Z","fork":{"id":"256256345da5ebd4","slug":"lab-1-html-css-svg","title":"Lab 1 - HTML, CSS, SVG","owner":{"id":"6cf6a6f13b29e1ce","login":"chunggrace","name":"Min Hyung Chung"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6a172c8f3c601804","login":"as9934","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f034cfa0acfbc6b52275b3f5f22ecd07565cf8fc985531dc2852fb9424006005","tier":"starter_2024"},"version":230,"publish_version":230,"role":null,"authored":false,"authors":[{"type":"individual","id":"e6c14ba5f341d3e8","login":"as9934","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f034cfa0acfbc6b52275b3f5f22ecd07565cf8fc985531dc2852fb9424006005","tier":null}],"members":[{"type":"individual","id":"e6c14ba5f341d3e8","login":"as9934","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f034cfa0acfbc6b52275b3f5f22ecd07565cf8fc985531dc2852fb9424006005","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Lab 1 - HTML, CSS, SVG","cells":[{"id":0,"value":"md`# Lab 1 - HTML, CSS, SVG`","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":119,"value":"html`\n\n\n

\nSection 1: HTML\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md `HTML 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":14,"value":"md `\n### Example of HTML documents\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":15,"value":"html`\n\n\n\n

My First Heading

My first paragraph.

\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"html`\n\n\n\n

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"html`\n\n\n\n

This is a paragraph.

\n

\n

This is another paragraph.

\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"html`\n\n\n\n

HTML Links

HTML links are defined with the \"a\" tag:

\n\nClick Here\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"html`\n\n\n\n

HTML Images

HTML images are defined with the \"img\" tag:

\n\n

\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"html`\n\n\n\n

HTML Buttons

HTML buttons are defined with the button tag:

\n\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"html`\n\n\n\n

An Unordered HTML List

\n\n

Coffee
Tea
Milk

\n\n

An Ordered HTML List

\n\n

Coffee
Tea
Milk

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"html`\n\n\n

\nExercise 1. Basic HTML Webpage\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`\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

\nSection 2: CSS\n

My First CSS Example

This is a paragraph.

\\` tag\nThe \\`

\\`tag defines a division or a section in an HTML document. The < div > tag is used as a container for HTML elements - which is then styled with CSS\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"html`\n\n\n\n\n\n\n

The div element

\n\n

This is a heading in a div element

This is some text in a div element.

\n\n

This is some text outside the div element.

\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"html`\n\n\n

\nExercise 2. CSS Style Implementation\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`\n1. Change the color of the main heading to blue and change the alignment to center. \n2. Change the color of all elements in the unordered list to be red. \n3. Change the color of paragraph under \"Contact Me\" section to be blue. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"html`\n\n\n

\nSection 3: SVG\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`SVG stands for scalable vector graphics. Refer to the following tutorial to brush up on your svg basics. https://www.w3schools.com/graphics/svg_intro.asp \nWe will go through together the following exercises. \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":144,"value":"html`\n\n\n\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":146,"value":"md`### 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":157,"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":152,"value":"html`\n\n\n\n\n\n

\n\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":162,"value":"html`\n\n\n

\nExercise 3. (Optional) Create Your Logo\n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"md`Create your original logo or recreate versions of other logos using SVG.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`# References\nhttps://www.1keydata.com/html-tutorial/\nhttps://observablehq.com/@nithyaramgopal/lab-1/2\nhttps://www.w3schools.com/html \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"