Using Jekyll to Build a Data Visualization for the FCC
April 24, 2013
Then a day or two later I got an email from Eric. I could go copy and paste exactly what it said, but the important thing is that he was asking if I could make this work in Github, could I give it a sort of FCC-feel. Ummmm, HELL YES!
May 8, 2013
We made the FCC.gov home page (look for the International Call Traffic carousel)! While that may not seem like a huge deal, I think it’s a huge deal because the FCC is recognizing using Github, gh-pages, and D3.
A few days ago I had a quick, 30 minute or so, conversation with Mike Byrne (@byrne_tweets) and Eric Spry (@xactoeric). They had a couple of visualizations, created by Xiaoming Qin (@qinxiaoming), that they wanted published with the only basic requirement being that it would be hosted on Github.
A few options came up -
- Figure out a way to get the visualizations into fcc.gov.
- Use another FCC web server, like data.fcc or wireless.fcc.
- Take advantage of gh-pages and Jekyll on Github.
Let’s do what we think is right
We decided we would do our best to fit it into fcc.gov. I started working to create a page in the CMS (Drupal), removed the “right-rail”, and inserted an iframe to pull in the Github page. It worked … but not well. Due to the restrictions of the FCC Drupal theme, specifically the narrow fixed with, the visualizations either lost their flair or got cut off. Tweaking here and there got us 90-99% of the way there, but never 100%. But it did work.
Now let’s do what’s best
Then a day or two later I got an email from Eric. I could go copy and paste exactly what it said, but the important thing is that he was asking if I could make this work in Github, could I give it a sort of “FCC feel”. Ummmm, HELL YES!
I got to work. I cloned the calltraffic repo, added the gh-pages branch, and setup the Jekyll framework. Within a couple hours I had something I liked locally so I pushed it and we had the visualizations up and running, and looking pretty good.
Check it out
A minor issue, maybe a lesson learned
We did run into a couple of issues. The visualization were developed using the D3 library which uses a lot of absolute positioning to do what it does (but it does it well). A couple tweaks were made by @qinxiaoming and we had it.
Also it’s not responsive. Given my inexperience with the D3 library, I’m not sure that it even could be. But there is always a way. So the lesson learned is that we should always consider mobile from the start.
Do I see an enhancement in the near future?
feoMike has a point
This continues to prove his theory.
- $0 software cost
- $0 hardware cost
And I’m going to add speed. We did this fast.
We’ve already received a pull request to fix a typo. How cool is that? I can’t imagine that process outside of Github. 20 emails? A couple phone calls?
Check the FCC’s blog post, An Update: Driving Innovation and Reforms from the International Bureau, for more information.