31:[{"id":"b62eae5bc2a2f4856df93a7c9aa530ac813c4ed74917ce13113632f286b356382f049028afd6066b7f611ff3c6cdc36c7752327042d39a803d82c1162886949b","href":"https://static.observableusercontent.com/files/b62eae5bc2a2f4856df93a7c9aa530ac813c4ed74917ce13113632f286b356382f049028afd6066b7f611ff3c6cdc36c7752327042d39a803d82c1162886949b","name":"image@7.png","type":"image/png","lastModified":1651091308895.407,"size":31330},{"id":"44afd6facfe5076768aebd2c07361bd8d77a67d5a8cb639d45ca5077fe0a19737aaadfb97138fc26788a78e49f9ea09052419515ce84514500eb29f4a10bfde6","href":"https://static.observableusercontent.com/files/44afd6facfe5076768aebd2c07361bd8d77a67d5a8cb639d45ca5077fe0a19737aaadfb97138fc26788a78e49f9ea09052419515ce84514500eb29f4a10bfde6","name":"image@5.png","type":"image/png","lastModified":1651091308895.407,"size":58318},{"id":"cde1b3afcf478268a26610941151c8f783143bba474a80f014f4cca0317099324973bd67b05e9497b90774ffa5154e7d3d876394d19279528ec5390c2c631040","href":"https://static.observableusercontent.com/files/cde1b3afcf478268a26610941151c8f783143bba474a80f014f4cca0317099324973bd67b05e9497b90774ffa5154e7d3d876394d19279528ec5390c2c631040","name":"image@1.png","type":"image/png","lastModified":1651091308895.407,"size":73132},{"id":"ca7897405f7b9d730cfbd004bf2d7d3928e52803ec2d24d1478004129b3c92500ab5c47ea093c2ca00dab8de6712476b19d93548355afd73a5576120e1d89b6a","href":"https://static.observableusercontent.com/files/ca7897405f7b9d730cfbd004bf2d7d3928e52803ec2d24d1478004129b3c92500ab5c47ea093c2ca00dab8de6712476b19d93548355afd73a5576120e1d89b6a","name":"image@4.png","type":"image/png","lastModified":1651091308895.407,"size":291122},{"id":"441fff7d07292187228430cbb3729d7a1e98f6b7f9107430583f76cf7f9c1585eaae04b25c1eaeec48ea67baf030f9ca0f8e6f4ac449a53281cef64be90959e6","href":"https://static.observableusercontent.com/files/441fff7d07292187228430cbb3729d7a1e98f6b7f9107430583f76cf7f9c1585eaae04b25c1eaeec48ea67baf030f9ca0f8e6f4ac449a53281cef64be90959e6","name":"image@3.png","type":"image/png","lastModified":1651091308895.407,"size":279938},{"id":"567df6bef7c150de8ba23dceb11968ce6e4b28eae7cf0e5a60e694420ae4ec19b94a3fc734471b72fd66a967027f4a022bb2689b22d45b2f0a002494e8865ac6","href":"https://static.observableusercontent.com/files/567df6bef7c150de8ba23dceb11968ce6e4b28eae7cf0e5a60e694420ae4ec19b94a3fc734471b72fd66a967027f4a022bb2689b22d45b2f0a002494e8865ac6","name":"image.png","type":"image/png","lastModified":1651091308895.407,"size":406430}] 2f:{"title":"CSE 512 Web Publishing Handout","cells":[{"id":0,"value":"md`# CSE 512 Web Publishing Handout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"Check the [repo](https://gitlab.cs.washington.edu/cse512-22sp/web-publishing-tutorial) for this tutorial session.","pinned":false,"hidden":false,"mode":"md"},{"id":772,"value":"## Git Tips","pinned":false,"hidden":false,"mode":"md"},{"id":777,"value":"- When ready to publish, **place all necessary files in the \"`public`\" subfolder** to publish on GitLab pages.\n- If you have any questions about git, **[Pro Git](https://git-scm.com/book/en/v2) is a good reference book**. It starts from the basics of git version control and goes all the way to distributed workflows and advanced features.","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`## HTML, CSS & JavaScript Resources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`\n- [Textbook: Chapter 3 (reading for 1/8)](https://learning.oreilly.com/library/view/interactive-data-visualization/9781491921296/ch03.html#technology_fundamentals) [Free access with UW NetID]\n- [Javascript & Observable](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable)\n- [CSE 154: Web Programming](https://courses.cs.washington.edu/courses/cse154/20au/sections/index.html)\n- [MDN: Getting started with the Web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web)\n- [W3schools Tutorials](https://www.w3schools.com/)\n- [HTML Tutorial](https://www.w3schools.com/html/default.ap)\n- [CSS Tutorial](https://www.w3schools.com/css/default.asp)\n- [JavaScript Tutorial](https://www.w3schools.com/js/default.asp)\n\nCheatSheet:\n- [HTML](https://overapi.com/html)\n- [CSS](https://overapi.com/css)\n- [JavaScript](JavaScript)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"md`<\\hr>` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"## Quick Guide for Data Visualization in Web","pinned":false,"hidden":false,"mode":"md"},{"id":694,"value":"In this section, we will introduce how to write Vega-Lite and D3 in HTML `script` tags and how to embed Tableau and Observable visualizations in HTML. You can clone [the repo of our demo page](https://github.com/cse442-22w/Web-Publishing-Example) and follow us!","pinned":false,"hidden":false,"mode":"md"},{"id":698,"value":"md`<\\hr>`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md `## Tableau Embed Instruction\nData Source: [Hours of Sunshine](https://observablehq.com/@uwdata/hours-of-sunshine)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`First, apply what we have learned earlier to create a visualization in Tableau.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`Then, we can publish the worksheet (or a dashboard) on Tableau Public. _Notice that the Tableau Public server is indeed **public** so people can find and see the visualizations you post there. This is fine since we will be analyzing public data. However, it is not great if using private data, in which you may want to create your own server._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`### Create your profile for Tableau Public`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`To upload your dashboard to the Tableau Public server, you need to first create a profile for Tableau Public by:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"md`1. Go to [Tableau Public](https://public.tableau.com/s)\n2. Click on \"Sign In\"\n3. Click on \"Create one now for free\"\n4. Fill in your information and click on \"Create My Profile\"\n5. Check your email to activate your profile!\n\nNow, let's see how to publish our worksheet/dashboard on Tableau Public!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`### Publish the worksheet on Tableau Public`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`#### Extract Data\n\nThis is to make sure Tableau Public knows the data we are using:\n\nIn the top menu bar of Tableau, select \"Data\" --> \"Your Dataset\" --> \"Extract Data\".`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"md`A \"Extract Data\" window will then pop up, and Click on \"Extract\".`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"md`Now, we have prepared our data for publishing! Let's upload our interactive visualization to the Tableau Public server now.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`#### Upload your visualizations to Tableau Public`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md`In the top menu bar of Tableau, select \"Server\" --> \"Tableau Public\" --> \"Save to Tableau Public As...\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"md`Sign in to your Tableau Public account, and name your workbook.
\nA web browser should automatically open and you should be able to see your visualization online!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"md`### Share and Embed Your Visualization in Your Web Page`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`In your online workbook, click the share button under your visualization, and you should now see the share window pop up:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"md`Copy what's in the Embed Code and Paste that in the proper position of your HTML file!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"## Observable Embed Instruction","pinned":false,"hidden":false,"mode":"md"},{"id":850,"value":"Check [here](https://observablehq.com/d/feefe37e62f2badb) for the demo during the session.\n\nCheck [here](https://observablehq.com/@observablehq/introduction-to-embedding) for official Observable embedding and [here](https://observablehq.com/@observablehq/troubleshooting-embedding?collection=@observablehq/embedding-notebooks) for official embedding troubleshooting.","pinned":false,"hidden":false,"mode":"md"},{"id":809,"value":"## Advanced Web Resources","pinned":false,"hidden":false,"mode":"md"},{"id":812,"value":"* Bundlers to help bundle modules and compatibility.\n * Parcel: [CSE442WI20 Template](https://github.com/UW-CSE442-WI20/FP-Template), [CSE412WI21 Template](https://github.com/cse412-21w/project-demo)\n\n* Frameworks\n * Vue\n * d3: https://vuejsexamples.com/tag/d3/\n * Vega: https://nesterone.github.io/vue-vega/ \n * React\n * Idyll: [CSE412SP21 Template](https://github.com/cse412-21sp/Final-Project-Template) (if you eventually decide to adopt this template, make sure to update `idyll-vega-lite` version in `package.json` from 2.1.1 to 3.0.1, and then run `npm install` to update)","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}