View high resolution
It’s taken me a while, but I finally put together a simple, clean graph of enrollment for the Dayton School District, which is one of several small rural school districts I cover.
You might look at this and think, “How did this take you 3 weeks?” And my answer would be, “Clearly, you have never tried to learn D3 during your spare time.”
I relied almost entirely on this wonderful tutorial by Scott Murray, which involved a lot of hand-holding with the code, so I’m not as confident as I’d like to be that I could build something from scratch with D3. But I think I’d be better prepared to try, and I’d like to do that at some point down the road during this project.
As with the TileMill project from a few weeks ago, I feel like I’ve been exposed to an amazing, powerful set of tools for visualizing data and have barely scratched the surface.
Reflections on the data
I wanted to do so much more with this graph, and probably will down the line. It’s related to a story I’ve been working on for several months about students who transfer out of the district.
Last year, a total of 89 students living within Dayton’s boundaries were open-enrolled in other school districts or online programs, which cost them about $600,000 in state funding (versus $3.5 million total funding). It’s a huge issue for them, and it’s also created a chicken-and-egg situation where some of the things that might keep students in the district cost money they don’t have because so many people have left. I spent this week drafting a story we’re planning to run in a few weeks looking at why this is happening and what might be done about it.
Enrollment decline is related to the out-transfer issue, but it’s also its own thing. I really wanted to plot enrollment on a line graph against county population (relatively stable from 1997-present) and county population ages 5-19 (declining over the same period, but I’m not sure by how much relative to enrollment). But my D3 skills are not quite there yet.
- I really wanted to get year labels on the data, but wasn’t sure how to do that using the tutorial we were doing. I did successfully make a separate set of text elements inside an SVG element to function as year labels, but I wasn’t able to get them styled or visible or placed where I wanted, and I figured I’d spend long enough messing around with the graph.
- While the utility without year labels is questionable, I like the overall look of the graph quite a bit: it’s clean, simple and easy to spot the trend in enrollment.
- SVGs are both awesome and confusing. I struggled with making them responsive: I was able to do it by making each individual rectangle its own SVG (instead of a “rect” element inside an SVG) and styling those SVGs in the CSS, but then a lot of the code later in the tutorial didn’t work. There’s probably a simple solution here, but I need to read more documentation about SVGs, clearly.