Create a data visualization site to display PDXWIT’s recent survey/findings for the State of the Community. Our challenge was to highlight the most meaningful information from the survey in a clear and concise way.
I wrote 99% of the code and it is open sourced at https://github.com/planetargon/pdxwit-stateofthecommunity
After some evaluation, I chose chartjs for most of the charts. But before I did any work on the charts, I created the basic outline of the site. This would include all the sections, content and place holders since I knew the hardest part would be getting the charts completed. A quick win was good for me in that it would build my confidence, but also to be able to show some progress to the client and my team.
This also allowed me to visualize, with code, where the charts would go and determine how I wanted to structure the files.
Lesson Learned: Mobile first is super important. I didn’t know that I should have considered mobile design first, so as I built out the website, I found it difficult to wrap my mind around the breakpoints for different devices. Had I thought about it, I could have, and eventually did, used mobile as my starting point, then use
@media queries for larger devices.
Moving on to the charts – I learned pretty quickly that even though chartjs seemed fairly simple, it couldn’t do everything I wanted it to do. For example, I was trying to use a sankey chart. First of all, chartjs doesn’t have a sankey chart in it’s library, so I ended up using D3. However even that had it’s limitations. Because we didn’t have a ton of data to show here, it appeared very condensed and if I tried to ‘stretch’ it out, the chart just didn’t render properly. Even if I could get it to render properly, the chart simply wasn’t conveying the information in a way that was easy to understand. Instead, I decided to utilize Sketch and create a designed image instead.
Overall, the project was a huge success. The site launched on August 14th, 2018 with lot’s of media coverage. We were featured in various publications such as The Oregonian, Portland Business Journal and Silicon Florist.
- D3 (though we ended up not using)