2b:null 2c:["$","title",null,{"children":"Assignment #3: Data App | John C. Lokman | Observable"}] 31:Tc82,Your data app must include at least two pages with the following features: 1. **Main Dashboard Page**: - This is the landing page users see as soon as they open the app. - It should load by default—users should not need to click a button (e.g., on the sidebar) or follow a link to access it. - The dashboard must fit entirely within a single laptop screen of 1920 × 1080 pixels resolution, meaning no scrolling. If your laptop screen's resolution is different than this, please try adjusting your display resolution, use another computer to test your final product, or use the [screen size emulation](https://devtoolstips.org/tips/en/simulate-devices/) capabilities of your browser. - It should clearly be presented as a dashboard, not as a document. - Your dashboard should demonstrate a reasonable level of complexity featuring at least three visualizations created using Plot (not D3 or other libraries, and not a screenshot or embed from Tableau or Observable). - Well-implemented interactive features may earn additional points, if they are relevant and enhance the user experience. 2. **Supplementary Page**: - This page should have a document-like layout. - It should combine markdown text with visualizations. - Its content must be meaningfully connected to the main dashboard. (Filler text that lacks clear relevance to the main dashboard will be penalized.) - It could offer further explanations, insights, or context. You are encouraged to go beyond these core requirements. For instance, you could include a second dashboard on a specific topic (but no more; you are allowed a maximum of 2 dashboards), several explanatory pages, or other creative features that highlight your technical skills and insight. While you should stick to Plot for your visualizations (and avoid using D3 except for basic utility functions like 'd3.min' or 'd3.mean'), you are welcome to enhance your app with creative use of HTML and CSS, though this is not required. **Recommended: Transfer Your Visual Analytics Report Visualizations to Framework** Transferring your Plot visualizations from the visual analytics report you created on Observable is expected to be your primary approach for building the dashboard and supplementary page content. While it is OK to adjust existing visualizations or create new ones when appropriate, this is not required and may lead to unneeded extra work. Of course, you will still likely need to arrange and combine your Plot visualizations in new ways for the Framework, especially for the dashboard part. **Optional: Transfer Your Visual Analytics Report Texts to Framework** Transferring the texts of your visual analytics report into Framework is optional, but it may be a convenient way to fulfill the supplementary page requirement. If you choose not to transfer text from Observable, please ensure your supplementary page still stands on its own as coherent and relevant. For example, in your supplementary page you might include selected visualizations from the main dashboard, accompanied by explanatory text that guides the reader through their interpretation in different scenarios. 32:T7a8,| **Component** | **Weight** | **Points** | **Requirements** |---------------------- | ----------- | -------------- | --------------------------------------------------------------------------------------------------------------- | Basics\* | 20% | 5 | The assignment instructions regarding the fundamentals such as format and expected content of the submitted file correctly followed. | Visualization Quality | 30% | 7.5 | Data visualization best practices followed, including the choice of appropriate visualizations, use of color and structure. | Technical Ability | 50% | 12.5 | Core features of Plot and Framework used correctly and sufficiently. | _Bonus_\*\*: Technical and/or Visualization Mastery | +20% | 5 | The work demonstrates technical mastery by skillfully using advanced Plot and Framework features and visualization best practices. The data app and the visualizations are excellent and/or code is well-written and clear, distinguishing this work from others. (The visualizations should still be created using Plot.) | **Total** | **100%**
_+20%_\* | **${metadata.points.app}** | \* _The 'Basics' score is usually limited to a maximum of 5 points for penalties. However, in severe cases, such as when a significant portion of the assignment instructions are not followed (for instance, if half of the assignment is missing), the penalty for this category will exceed this limit._ \*\*_Bonus points will compensate for any points lost in other components. Your grade for this assignment cannot exceed 100% or the maximum allocated performance points. The 'Basics', 'Visualization Quality', and 'Technical Ability' components are sufficient to get a full grade, if done flawlessly._33:T792,howTo(`Unless hosted locally or online, the website pages Framework created in the 'dist' directory will not appear to be fully functional (even though they may be working just fine). For example, any references to other pages (e.g., via the navigation bar) or your data (which powers your visualizations) may not work if you simply double-click an HTML file in the 'dist' directory. This does not mean there is something wrong. To properly test whether your final app or website in the 'dist' directory is working, there are a few recommended methods: **A - Localhost** The simplest way to test the distribution version of your website is to: 1. Use the terminal command... \`\`\`shell npm run build \`\`\` _👆 For this to work, you need to be in your project's root directory in terminal._ 2. Run a local server with, for example: \`\`\`python python3 -m http.server 3000 --directory /path/to/dist/directory/of/your/project/ \`\`\` 👆 You may need to use \'/\' for Windows instead of \'\\'. For this to work, Python 3 must be installed on your system. You should ensure that the path points to your project's 'dist' directory. If there are space characters in the path, you may need to wrap the path in quotes. 3. Open a Web Browser 4. Navigate to '\`http://localhost:3000/\`' to view your project's main (i.e., landing) page. **B - Website** Alternatively, you can upload the contents of your project's '\`dist\`' directory (after running \`npm run build\`) to a web host. If you do not have access to a web host, you may use services like GitLab Pages or GitHub Pages. --- Using one of these methods to ensure that the final, deployable version of your app or website in the '\`dist\`' directory is functioning correctly is highly recommended. `, {title: "Pages in the 'dist' directory does not seem to work correctly — How to correctly view and test the contents of your 'dist' directory"}) 34:[] 2f:{"id":"c737ea82ba816050","slug":"data-app-assignment","title":"Assignment #3: Data App","thumbnail":"adcf50a18bce7dc0c80e6a5396fba0d32e92914a04bd16f3e6984149c686703b","access_level":"public","create_time":"$D2025-04-05T15:58:01.077Z","update_time":"$D2026-07-28T12:40:58.712Z","view_time":null,"first_public_time":"$D2025-04-08T16:35:06.917Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"224c51aa36864e8b","login":"clokman","name":"John C. Lokman","avatar_url":"https://avatars-next.observableusercontent.com/fc855b7a5c8010f7734ac76cda4f40175c406fce889706c3606d34239e0b528c","tier":"starter_2024"},"version":375,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4ac6d0c601bc6c2","login":"clokman","name":"John C. Lokman","avatar_url":"https://avatars-next.observableusercontent.com/fc855b7a5c8010f7734ac76cda4f40175c406fce889706c3606d34239e0b528c","tier":null}],"members":[{"type":"individual","id":"d4ac6d0c601bc6c2","login":"clokman","name":"John C. Lokman","avatar_url":"https://avatars-next.observableusercontent.com/fc855b7a5c8010f7734ac76cda4f40175c406fce889706c3606d34239e0b528c","tier":null,"role":"editor"},{"type":"team","id":"224c51aa36864e8b","login":"clokman","name":"John C. Lokman","avatar_url":"https://avatars-next.observableusercontent.com/fc855b7a5c8010f7734ac76cda4f40175c406fce889706c3606d34239e0b528c","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"48b996a3adae6682","slug":"syllabus","title":"Syllabus","owner":{"id":"224c51aa36864e8b","login":"clokman","name":"John C. Lokman"}},"type":"notebook","body":{"title":"Assignment #3: Data App","cells":[{"id":0,"value":"# Assignment \\#3: Data App\n_Group Assignment_\n\n_For the requirements that apply to all assignments, see '[Assignments Overview](https://observablehq.com/d/5e3c26fc94d0e418?collection=@clokman/syllabus)' notebook._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":23,"value":"\n| ID | Assignment | Audience | Software | Performance Points | Workload | Turn in By |\n| --- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------- | ---------------- | -------------------------- | -------- | ----------------------------- |\n| #3 | Data App | General audience with finance and data literacy | Framework, Plot | ${metadata.points.app} | Group | ${metadata.deadlines.app} |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":49,"value":"## The Idea","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"In this assignment, you will build upon your previous Observable report and Tableau dashboard. Your task will be to transform your Observable code into a professional-looking 'data app' and a multi-page website using [Observable Framework](https://observablehq.com/framework/what-is-framework). This app/website will be designed to serve a diverse range of users, allowing them to understand, explore, and analyze your data efficiently.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":39,"value":"You can browse some examples of web apps built with the Observable Framework here:\n\n- [Framework Examples](https://github.com/observablehq/framework/tree/main/examples#observable-framework-examples)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":51,"value":"## Your Target Audience","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":62,"value":"The goal of a data app is to make it widely accessible online, so the target audience can be anyone. Therefore, it is recommended to begin with a general overview in your initial visualization or dashboard. As users navigate through the app, you can then present more detailed visualizations in subsequent pages. Avoid placing lengthy explanations or overly complex, hard-to-understand visualizations and texts on the first page your audience encounters.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":182,"value":"## Content","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":188,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":334,"value":"**General Requirements**\n\nThe content requirements you have followed during the Tableau dashboard assignment also apply here. Namely...\n\nYour data app should...\n\n${generalDashboardRequirements}\n\nBesides these dashboard requirements, your app should also...\n \n1. Have a meaningful title on each page (so, not just the dashboard-style page(s)).\n \n2. Appear correctly in both the dark and light modes of your operating system.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":47,"value":"## Grading Rubric","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":229,"value":"Total performance points: **${metadata.points.app}**, divided between the following components:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":54,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":44,"value":"## Format","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":114,"value":"Please submit your project directory (i.e., your project folder) as a compressed file via the relevant assignment page on Canvas. Accepted formats are `.zip`, `.gzip`, `.tar`, or `.rar`. If you experience any issues compressing your directory, consider using the free, open-source tool [7-Zip](https://www.7-zip.org), which supports all required formats.\n\nIf your project is hosted online (e.g., on GitLab), you are welcome to include a link. However, submission of the compressed project directory on Canvas is still required for record-keeping purposes, and it is the medium that will be used for grading.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":122,"value":"\n### **Important**: '`dist`' Directory Is Your Final Product\n\nYour final product for this assignment is the ready-to-deploy data app or website that you build. To generate it, you must run the '`npm run build`' command from your project directory. This will create the final production files in the '`dist`' directory (short for 'distribution').\n\nThe evaluation will be based mainly on the contents of your '`dist`' directory. If issues arise that require me to inspect your '`src`' directory—for example, your final product in the '`dist`' directory is incomplete, broken, or entirely missing—you will lose points.\n\nPlease note: while your `dist` directory is expected as the main artifact, your submissions must still include the entire project directory in the turn-in.\n\n\n*Expand the hints below for more information.*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":166,"value":"howTo(`It is important to understand the difference between '\\`npm run dev\\`' and '\\`npm run dist\\`'. \n\n'\\`npm run dev\\`' is typically used during the development phase. It starts a development server that watches for changes in your source files and automatically reloads the page when changes are detected. This command is useful for testing and making quick iterations on your code.\n\nOn the other hand, '\\`npm run dist\\`' is used to build the production version of your website. It compiles and minifies your source files into a distribution folder ('\\`dist\\`'), optimizing them for performance. This command is essential when you are ready to deploy your site to an online environment.\n\nSo, as a rule of thumb: Use '\\`npm run dev\\`' for development and testing, and '\\`npm run dist\\`' for creating a final, production-ready version of your website.`, {title: \"What is the big deal with the 'dist' directory? — The difference between 'npm run dev' and 'npm run dist'\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":362,"value":"howTo(`To ensure that navigation works correctly when the 'dist' directory is served via 'localhost', set 'preserveExtension: true' in 'observablehq.config.js'. This helps the links in the navigation bar resolve to the generated '.html' pages correctly, so you can move between pages of your app without running into 404 errors.\n\nIf you want to test this first, there is a manual workaround: when you land on a 404 page after clicking a navigation link, add '.html' to the end of the URL in your browser’s address bar and press Enter. The page should then load correctly. That said, this is only a workaround; setting 'preserveExtension: true' is the proper fix, and what is considered for grading.\n`, {title: \"Why do navigation links in dist return 404 on localhost? And how to fix it?\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"### Email Turn-In and Late Submission Notices \n\n${emailAndLatePolicy}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":278,"value":"## Getting Help\n\nFor conceptual questions, technical issues, and consultation sessions, please make sure you read _[Syllabus](https://observablehq.com/collection/@clokman/syllabus) > [Getting Help: Technical Issues and Course Support](https://observablehq.com/d/dc3e7854214472bf)_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":25,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":125,"value":"import {howTo} from \"@clokman/howto\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"import { metadata } from \"@clokman/metadata\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"import {generalDashboardRequirements} from \"@clokman/syllabus-snippets\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":284,"value":"import {emailAndLatePolicy} from \"@clokman/syllabus-snippets\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"