Skip to content

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 linear scaleLinear. 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 and consum_kg_person, respectively
  • I changed the domain bounds of the x-scale.
  • I changed the class from rect to circle and modified the parameters to be read in. Instead of x, y, width, and height for rectangles, I'm inputting cx, 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
Edited by Kwang, Jeffrey S

Merge request reports

Loading