Charts that display 50 years of weather data from six locations across California: (1) the number of days with maximum temperature greater than 90 degrees Fahrenheit, and (2) the annual precipitation in inches. Built with Vue.js, Chart.js, and Mapbox. View working component.
Project meets general accessibility (WACG) and cross-browser requirements. More testing with a dedicated services (e.g., Sauce Labs) would be helpful if deploying to production.
Originally, I built this app to fetch data from NOAA using the agency’s API. But, the API was not always reliable and repeatedly fetching historical data that would never change seemed foolish. I rebuilt the app, storing NOAA's data locally.
-
Opening screen
-
About project, weather station photos
-
Map, stations in California
-
Heat chart
Clone down this repository. You will need node and npm installed globally on your machine.
Installation:
npm install
To Run Vue:
npm run dev
To Visit App:
Visit the localhost port displayed in the terminal after running npm run dev.
- Weather data from the National Centers for Environmental Information, part of the National Oceanic and Atmospheric Administration (NOAA).
- Photo of Malibu surfer Terrell Woods.
- Photos of weather stations from NOAA. See details at noaa-stations-images.txt.
- Map from Mapbox.
- Chart built with Chart.js.
- Helpful Chart.js example, by diggidydoge on Codepen.
- Readme guidance from Brenna Martenson.
- Linting guidance from ESLint and Stylelint.
- Design guidance from Google's Material Design.
- Fonts from Google Fonts.
- Fluid typography guidance from Utopia.
- Shields from Shields.
.jpg){kind=link}