https://glitch.com/~a4-cenright71925
This project allows data from the NYC 2010 census to be visualized in different ways. The user can control 6 things:
- The borough (which boroughs data the chart is showing)
- The type of chart: pie or bar
- The type of data: gender or race
- The main color of the chart
- The langauge the chart labels appear in
- The types of values in the chart labels (counts or percentages)
The goal is to display this data in a way that is meaniningful and easily accsible for its users. Some issues I faced during this project was figuring out how to manipulate the data formats differently for a pie chart and for a bar chart.
I had two modules: charts.js and colors.js. My main js file is called index.js. Colors.js held the function that created shades of a given color as well as a specific implementation of that function that was used for the hover color in the bar chart. Chart.js imports the two functions from colors.js. It also holds the drawPieChart and drawBarChart functions which is the bulk of the application. These two functions are imported into the main index.js file.
Linter: I used the Standard for my linting
The one error I could not seem to solve was the linter saying 'd3' or 'dat' was not defined. The scripts for d3 and dat.gui are imported in the html file. Because these scripts are loaded before any of the .js files that reference d3 or dat are used, the code works as intended and there are no runtime errors. However, d3 and dat are not defined within the .js file so the linter shows an error. I tried many different attempts to remove this error but they all ended up causing run time error in the console.
- Chart Types: I implemented two different types of charts using d3, a bar chart and a pie chart
- Color Shades: I implemented a function that allows similar shades of a given color to be created. This allowed to pie chart to still utilize the user inputted color while having each section be distinct to the eye.
- Language: I implemented a language option. Because census data represents the population, I wanted the visualization to be accesible to that population. Besides English, Spanish is the most common primary language for people in NYC. By allowing the labels to be displayed in spanish, people can take screen shots of the charts generated by my app and use them in spanish langauge resourses.