Scalable Vector Graphics (SVG) is an XML-based markup language for describing two dimensional based vector graphics. As such, it's a text-based, open Web standard for describing images that can be rendered cleanly at any size, and is designed specifically to work wel with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is essentially to graphics what HTML is to text.
In this homework, we want you to create a data visualization webpage by using SVG. The main library we are going to use is D3.js as we discussed in class. D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.
Mike Foster and Eric Huntley provided a good example to learn D3.js. The scope of this homework includes section “Part 4: Animate a Line Chart: An Unemployment Graph” and section “Supplemental: Focus and Context via Brushing”.
Expectation - I will meet the following requirement to complete the assignment
-
Set up development environment for this homework
-
Set up both X and Y axis of the line chart
-
Set up ticks for both axes
-
Add a plotting line
-
Add a stroke dash array
-
Add the two control buttons
-
Extend the range of the dataset (from Jan 2005 to Dec 2019)
-
Add a caption to the chart
-
Add D3.js Brushing
-
Add D3.js Scrubbing
-
Add a tooltip where the cursor is at. The tooltip shows the value of data
-
Public URL submitted from student website where working code is found