Adding code to make basic scatter plot of all fish-as-food country-climate data
Description
I modified the FishAsFoodCLiamteViz.vue file to change it from a bar chart using the fish_as_food_climate.csv
datafile to a scatter plot using the fish_as_food_country_climate.csv
datafile.
Changes Made
- I modified the datafile to be read into the code.
- I changed the loadData function to include and convert all the numerical columns from the .csv file.
- I changed the xScale type from categorical
scaleBand
to linearscaleLinear
. Also, removed padding. - I changed the color categories to the continents, but this will be used later.
- I removed the filter function to show all data; I commented out the code that allows for filtering by continent.
- I changed the x-data and y-data to show
MCDM_VUL_2075_45
andconsum_kg_person
, respectively - I changed the domain bounds of the x-scale.
- I changed the class from
rect
tocircle
and modified the parameters to be read in. Instead ofx
,y
,width
, andheight
for rectangles, I'm inputtingcx
,cy
,r
for a circle. - Left code that changes color by continent, but have it commented out. All circles are black for now.
How to Test
npm run dev
and go to the chart to see if the scatter plot renders.
Review Needs
Does this MR include data processing, modeling, or visualization code that will require domain review prior to release?
-
Yes, and I have opened an issue to document the need for review, using the DomainReview
issue template -
Yes, and a domain review issue already exists -
No
Related Issues
Provide links to any related issues, including open draft domain review issues.
Additional Notes
Include any extra information or considerations for reviewers.
Merge Request Checklists
-
Code changes adhere to best practices documented in README.md
-
Code has been cleaned the way Vue likes it - run npm run lint --fix
-
If applicable, the need for future domain review has been documented in an issue -
Below section documents which browsers the site has been tested on: - Desktop/laptop
-
Chrome -
Safari -
Edge -
Firefox
-
- Mobile device
-
Chrome -
Safari -
Edge -
Firefox
-
- Desktop/laptop
Edited by Kwang, Jeffrey S