I’ve written previously about the scraper I’ve produced, which grabs Ofsted inspection ratings for open and closed free schools. (See here for a blogpost on the Python back-end, and here for a blogpost on the original front-end.)
Briefly, my reason for doing this was that there’s no easy way to get up-to-date Ofsted ratings for a particular group of schools, such as free schools. And in the absence of a track record of exam results by which to judge the new schools, Ofsted ratings offer one of the few ways we have of assessing how they’re performing.
The front-end I’d built previously was *very* basic – effectively just a straightforward table, with no real formatting. It was written in D3 so that the table updated automatically when my scraper outputted new results, but that was about as sophisticated as it got.
While giving access to the scraped data, there were a number of things about the initial front-end which I wasn’t happy with. There was no way to filter, or sort, results. It was hard to get a quick handle on whether more schools had had positive ratings (outstanding/good), than had had poor ratings (requires improvement/inadequate). The site looked crap.
My reworked front-end is an attempt to fix these problems. (A bit of work was actually needed on the back-end too, to make all of the data required by the new front-end available.)
I don’t really have time, or space, to go into detail on every element of the new front-end. But for the key features/bits of functionality I’ve implemented, I’ve given a list below of the main resources which I used to get things working as I wanted (♥ StackOverflow).
Making things work
- Basic D3 pie chart based on an external source of data
- Hyperlinks in a D3 table
- Tables sortable by header 1
- Tables sortable by header 2
- Tables sortable by header 3
- Tables sortable by header 4 (handling dates)
Making things pretty
- More margins!
- Horizontal navbar
- Positioning elements
- Floating pie charts next to one another
- Forcing tables onto a new line after pie charts
- Basic table CSS
- Table styling, including allowing selection of table rows
- Centred tables
- Styling web links
Boring but worthy
- HTML meta tags
- Meta tags that Google understands
- Using HTML meta tags
- 18 meta tags every webpage should have in 2013 (hey, maybe some of them are still important in 2015)
Here’s the site as it stands currently. If you’ve any questions or comments, then I’d be really happy to hear from you.
Oh, and the site’s not responsive yet. So don’t look at it on mobile/tablet.