Description
Goals: Practice using d3 to create a line chart
Your work should be in the form of an HTML file called index.html or index.htm with one
element per problem. For this homework we will be using d3.js. In the
section of your file,please import d3 using this tag:
Create a zip file containing your HTML file and associated data files (such as erie_fishing.json or
mariokart_records.json) and upload it to CMS before the deadline. Submissions that do not include
data files may be penalized. Your submission will be graded using a Python web server run in a
parent directory containing your zip file contents along with many other students’ submissions.
(e.g. the grader has a folder, ~/hw6_cms, where they start their own web server and unzip your
assignment. If you just zip up index.htm and your data files as we ask, CMS will automatically make
a sub-directory for your netID when we download it from the system. This means that your homework
would appear at ~/hw6_cms/your_netID/index.htm on the grader’s computer. In their web
browser, it would show as https://127.0.0.1:8000/your_netID/index.htm in the URL bar.)
1. In this problem you have the choice of two different datasets that involve creating a line chart:
• erie_fishing.json – A file containing historical fishing yields for different fish species in
Lake Erie (a nearby Great Lake). Fishing in the lake has shifted from sustainable indigenous
practices to commercial fishing (which led to species extinction) and finally towards an
unsteady balance between conservation and commerce. This file will show how yearly fishing
amounts (in 1,000s of pounds) vary for several species between the 19th and 20th centuries.
• mariokart_records.json – A file containing historical ‘world record’ three lap times for the
retro video game Mario Kart 64. As speedrunners continually discover unusual shortcuts and
tricks, the time it takes to complete three laps of a race track may dramatically decrease. This
file may show those decreases as new records are set between 2007 and 2020.
Both datasets have been post-processed to have similar data structures, so you will follow the same
directions regardless of which dataset you choose to process. Please pick one dataset only.
A. After a
tag for problem 1, place a square SVG element 800px in height and 400px in width.
In a