If needed: Continue working on getting access to FrontEndMasters via the GitHub Student Developer Pack, or setting up GitHub Codespaces / your personal laptop development environment.

Web Engineering Setup

Our goal in this assignment is to apply Observable's Plot API, or the D3.js library, to data visualization in your front-end, based on JSON data that would come from your API server (back-end).

Observable Plot is a simplified version of D3.js, from the same authors, who conceptualize all visualizations as "marks" with various properties. We have already used Plot's bar chart in our random graph exercise in Week 6.

There is no strict reason that Lap 1 students should learn Plot vs. D3.js or vice versa. You may choose one (but only one) of the libraries to learn no matter which Lap you are in.

In many ways, D3 and React do the same thing; they both keep track of a shadow DOM, adding, deleting, modifying the actual DOM elements to synchronize with the data.

Since you are well into your final project and eager to work on them, but still need to satisfy your "5 out of 8" requirement for the homeworks, you may wonder, how can I apply the homeworks below to my final project?

The Observable Plot course below includes several project examples, including a search bar, API response measurements, etc. These are general enough that they can fit many different final projects. Also, the Observable Plot example gallery contains many examples that you will probably find are desirable for your project.

Likewise, the D3.js course below includes a way to dynamically generate a flower-like avatar based on the unique properties of an object or resource. These are sometimes called procedurally-generated avatars and are similar to the whimsical and poetic-sounding random word names of Docker containers, and would be ideal for generating SVG icons or avatars for a social network, online game, tarot deck, or any kind of abstract concept that needs an artistic representation.

Depending on whether one of the above use cases sounds appealing to you, you can choose to watch that video course and focus only on using it to create that use case for your final project.

You are still asked to commit around 50 lines of code into your final project using what you've learned from the videos, and to answer questions in a ~ 5 minute code interview for this homework.

For both laps, I recommend that you follow this development workflow: develop locally, deploy globally.

However, we realize that everyone's workflow is different, and we invite you to find one that works for you and your teammates.

Before you start working, make sure you are on main branch and you start from a clean working repository.

$ git status                                                                     On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean

Follow the git-branch-pull-request workflow that we have been learning in class to submit your work.

Commit your work in your final project directory.

Be sure the produced graph, artwork, or visual interaction is visible on one of the page types of your final project.

It should be hosted and publicly viewable at https://<YOUR_SUBDOMAIN>.arcology.builders/<some_route>

You will be asked to show your committed code on GitHub and answer a few questions about it in a ~5 minute interview.

These video sections from Data Visualization First Steps

• Section 1: Introduction
• Section 2: Overview
• Section 3: Data Attributes
• Section 4: Analytics
• Section 5: API Responses

These video sections from Frontend Masters Introduction to d3

• Section 1: Introduction
• Section 2: SVG
• Section 3: API Overview
• Section 4: Specifications
• Section 5: Group Elements