Dashboard showing Americans' level of debt by different categories (auto debt, medical debt, student debt, and overall). The data can be explored at the county, state, and national levels.
Refer to the file debtflow2.png if you want a visual walkthrough of main.js.
The researchers will share 12 excel files.
The R script data-prep.R, inside source, cleans the data of the original excel files –it mostly changes the column names and reorder the columns– and merges the national and state files. The outputs are 8 CSV files.
With every update, create a new folder in data naming it as YYYYMMDD-update. Move the new CSV files to that folder and change the route in the variable pathFiles in the first line of main.js –within js.
Also, with new data it might be necessary to recalculate the breaks variables for each category in within the js/varList.js file. At the bottom of the R script, there are a few functions (that should be refactored) to recalculate those breaks using the natural break method.
DISCLOSURE
- Original files built by the researchers might be named differently with every new update. Double-check the files' names and change, if necessary, in
data-prep.R. data-prep.Rwas originally written to be run within an R project and using a folder structure with three folders:
data-in, it should include the original data sent by the research team.scripts, it should includedata-prep.R.data-out, it should include the eight files generated bydata-prep.R.
You can replicate that folder structure and create an R project –or use the here package instead. You can also rewrite the paths to make it work following whatever system you prefer.
Open a port (sometimes called "Go Live") from within your IDE to bypass CORS restrictions. Be sure to minify main.js to see changes.
uglifyjs js/main.js --mangle -o js/minified-main.js
For clarity and order, host the staging code inside the features/tpm/debt-in-america-updates folder. There, create a new folder YYYYMM and clone the repo.
This update brought in the youth data tab comparing debt types amoung young adults. Youth data differed from other data in that it did not include any county data, only state data. Because this project assumes, in many cases, that new tabs would include county information, some surgery was required to make it region-agnostic.
First, in the varList.js file, we added a section for youth configuration data, as well as some configuration for youth in the meta object at the bottom. We did not include a variable name for county because we are dealing with no county data.
In main.js, we added the read-in point for the csv of state and national youth data, which gets read into the state5 variable and is passed to the ready function.
One of the first things to happen in the ready function is to transform the data. Because there is no county data and the overallTransformData function expects it, we put in a noninvasive check that will instead feed it data from the overall category, just so it can get geometries figured out. Otherwise, this transform function was not edited. This hack was installed in the changeData function as well as in the ready function so that anytime overallTransformData is called, it is getting some kind of data when there is none.
Next, we had to get the code to believe that when the youth tab is clicked, counties don't exist. That means when we switch to the youth tab, we update the sidebar table with state, rather than county, data and we remove any currently present county bars.
We also set the scale for the youth legend to use the extents for state data rather than county data. Bars for youth counties are completely avoided.
Because we don't mess with tags and searches, you can select a county, go to the youth tab, go to a different tag and still have your same county selected-- it just won't be visible or have personal data available while in the youth tab.
In other tabs, if we're in the country-wide view, all counties are colored with data and there are state borders without any internal color. If you click on the map, it highlights the state, zooms in close, and puts a hide class on all other state shapes, which introduces a translucency to their county colorations. When the mouse hovers over a county and it's within the selected state, that county is clickable and will update bars and tables. If that county is outside the selected state, it actually uncovers the county data for that other state, and if clicked, it remove hide on that state, move the map to that other state and add hide to the last one.
When the only data we have is state data, we fill the state borders instead of the county shapes and we have to still use these county events but remove the actual relevant shapes visible. We do not deal with the hide class at all.
First, when the counties svgs are created, we set their opacity to 0 or 1 based on the youth tab. When the state-borders svgs are created, they get filled or not based on youth tab active. This also happens when we call updateMap.
Next, instead of hide, we set opacities to state borders directly, like here, when the youth tab is just selected. We also hijack the hoverLocation function to set opacity instead of hide class. In the counties shapes click handler, we treat all youth map clicks as inital state clicks.
For mobile, we remove the county search bar and we remove any existant county bars.
There were two bugs we came across during this update. One was that the much-used and often-filtered variable stateData was getting passed in filtered form through this overallTransformData function, which left our map without data for any shapes but the selected one. A quick revision to its original form fixed that here. The second was that the buildPrint function was only ever passing USA arguments in for its state bar charts rather than data for the selected state, which uproots the point of the print page. Remarkably, this bug was caused by missing parentheses around a tertiary clause in a filter function, so the zeroth index in all state_data (USA) was passed rather than the index which matches the relevant state.