Concept Sketch
I started this project by creating a quick sketch of my plan for the concept of the page I wanted to create.
I created this page using Chart.js and Mapbox to illustrate the rising cost of tuition for colleges in Ohio. Using tuition data from the Ohio Department of Higher Education I created a chart and interactive map to illustrate the rising cost of tuition for colleges in Ohio.
View live siteWhat is the best way to display the tuition cost data so that it is easy to understand and comprehend how much it has increased?
I started this project by creating a quick sketch of my plan for the concept of the page I wanted to create.
After I had the concept figured out, I created a prototype in Figma and developed the design style of the page.
View prototypeNext, I coded the site using HTML, CSS and JavaScript.
View live siteWith data sourced from the Ohio Department of Higher Education I used Chart.js to create and style a line chart that compares the average yearly tuition of University Main Campuses, University Regional Campuses and Community Colleges from 2008 to 2019.
I imported the tuition data from the Ohio Department of Higher Education as a layer in Mapbox and styled the location points of each school by sector. The blue dots represent University Main Campuses, the pink dots are University Regional Campuses, and the orange dots signify Community Colleges. When a point on the map is selected, the name of the school and the percent increase in tuition costs from 2008–2019 populate below the map. The percent change figure is color coded to match the type of school that was selected.
One of the problems that I ran into with this site was that the user would get stuck on the map section of the page and not be able to scroll back up or down the page because of the scroll to zoom feature that Mapbox has. To remedy this problem, I decreased the height of the map section and used JavaScript to restrict the map's scroll to zoom function to within the boundaries of Ohio on the map. So when you scroll on the darker portions of the map, the page will move up and down, but when you scroll on the lighter part (the state of Ohio area) the map will zoom in and out.
