UI-Research / college-affordability.urban.org

0 stars 0 forks source link

For select line charts, add empty data point to get labels working #153

Closed bchartoff closed 7 years ago

bchartoff commented 7 years ago

Because of how the a axis labels are set up (it's a mess, don't ask), if there are a prime number of ticks then the labelling function doesn't work, like so:

image

for pages/after-college/employment-after-college/json/06_0010.json

The solution here is to add a blank data point at the end of the categories and columns arrays. To do this, we need to add the empty string "" to the end of axis.x.categories, and null to the end of each array in data.columns. So (get ready for big ol blocks of text...) This:

{"metadata": {"source": "CPS-ASEC 1995–2015", "notes": null}, "axis": {"x": {"type": "category", "categories": [1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015]}, "y": {"tick": {"format": "percent"}}, "rotated": false}, "title": "Labor Force Participation Rates Among Individuals Ages 25–34 by Educational Attainment, 1994–2014", "data": {"type": "line", "labels": {"format": "percent"}, "columns": [["High school or equivalent", 0.8218, 0.8252, 0.8246, 0.8225, 0.8314, 0.8332, 0.8365, 0.839, 0.836, 0.8228, 0.81, 0.8016, 0.8013, 0.8096, 0.8154, 0.8106, 0.8076, 0.8084, 0.795, 0.7875, 0.7789, 0.7691, 0.7735], ["Some college, no degree", 0.8267, 0.8387, 0.8288, 0.8451, 0.8394, 0.8467, 0.8459, 0.8496, 0.8392, 0.8372, 0.8302, 0.8153, 0.8224, 0.82, 0.8127, 0.8253, 0.8168, 0.797, 0.7842, 0.7813, 0.7859, 0.7805, 0.7898], ["Associate degree", 0.8812, 0.8876, 0.8773, 0.8797, 0.8977, 0.8925, 0.8829, 0.8737, 0.8718, 0.8731, 0.876, 0.8584, 0.8729, 0.8553, 0.8743, 0.8733, 0.8674, 0.8677, 0.8628, 0.861, 0.8586, 0.8526, 0.8532], ["Bachelor's degree", 0.8915, 0.8877, 0.8916, 0.8927, 0.8957, 0.9003, 0.8862, 0.9009, 0.8696, 0.8722, 0.8626, 0.8667, 0.8641, 0.8696, 0.8686, 0.8767, 0.8745, 0.8731, 0.8549, 0.8663, 0.8696, 0.8617, 0.8646], ["Advanced degree", 0.9234, 0.9214, 0.9313, 0.9179, 0.9253, 0.9113, 0.9015, 0.915, 0.8919, 0.8986, 0.8724, 0.8856, 0.8833, 0.8996, 0.9055, 0.8972, 0.8985, 0.8907, 0.898, 0.8961, 0.8901, 0.9013, 0.8826]]}, "series": ["High school or equivalent", "Some college, no degree", "Associate degree", "Bachelor's degree", "Advanced degree"]}

Becomes

{"metadata": {"source": "CPS-ASEC 1995–2015", "notes": null}, "axis": {"x": {"type": "category", "categories": [1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015 ,"" ]}, "y": {"tick": {"format": "percent"}}, "rotated": false}, "title": "Labor Force Participation Rates Among Individuals Ages 25–34 by Educational Attainment, 1994–2014", "data": {"type": "line", "labels": {"format": "percent"}, "columns": [["High school or equivalent", 0.8218, 0.8252, 0.8246, 0.8225, 0.8314, 0.8332, 0.8365, 0.839, 0.836, 0.8228, 0.81, 0.8016, 0.8013, 0.8096, 0.8154, 0.8106, 0.8076, 0.8084, 0.795, 0.7875, 0.7789, 0.7691, 0.7735, null], ["Some college, no degree", 0.8267, 0.8387, 0.8288, 0.8451, 0.8394, 0.8467, 0.8459, 0.8496, 0.8392, 0.8372, 0.8302, 0.8153, 0.8224, 0.82, 0.8127, 0.8253, 0.8168, 0.797, 0.7842, 0.7813, 0.7859, 0.7805, 0.7898, null], ["Associate degree", 0.8812, 0.8876, 0.8773, 0.8797, 0.8977, 0.8925, 0.8829, 0.8737, 0.8718, 0.8731, 0.876, 0.8584, 0.8729, 0.8553, 0.8743, 0.8733, 0.8674, 0.8677, 0.8628, 0.861, 0.8586, 0.8526, 0.8532, null], ["Bachelor's degree", 0.8915, 0.8877, 0.8916, 0.8927, 0.8957, 0.9003, 0.8862, 0.9009, 0.8696, 0.8722, 0.8626, 0.8667, 0.8641, 0.8696, 0.8686, 0.8767, 0.8745, 0.8731, 0.8549, 0.8663, 0.8696, 0.8617, 0.8646, null], ["Advanced degree", 0.9234, 0.9214, 0.9313, 0.9179, 0.9253, 0.9113, 0.9015, 0.915, 0.8919, 0.8986, 0.8724, 0.8856, 0.8833, 0.8996, 0.9055, 0.8972, 0.8985, 0.8907, 0.898, 0.8961, 0.8901, 0.9013, 0.8826, null]]}, "series": ["High school or equivalent", "Some college, no degree", "Associate degree", "Bachelor's degree", "Advanced degree"]}

This should be for a small number of graphs, I'll add them to the comments in this note as they come up.

bchartoff commented 7 years ago

pages/after-college/employment-after-college/json/06_0010.json

vivhou commented 7 years ago

thanks! this works :D

bchartoff commented 7 years ago

@vivhou hold off on doing this for now, I'm still working through line chart tick solutions

vivhou commented 7 years ago

ok will do!

bchartoff commented 7 years ago

Programatic solution is final, manual solution moved to #182