Climate Ready Boston offers a high level perspective of the City of Boston's carbon footprint (total greenhouse gas emissions) through data visualization.
Analyze Boston provides open data, which allows the City of Boston to make their important information useful, useable, and used by stakeholders. But not everyone is going to be hungry to wade through spreadsheet data and more. Civic technology is also a burgeoning and fascinating field to get into.
Being a Boston resident and environmentalist at heart, I thought I'd sift through what data is available and make it more useful to people who get phased simply looking through spreadsheets. I've been meaning to learn D3 because of the gorgeous illustrations I've seen in the New York Times. So this was my first foray into creating something that allows users to understand the big picture at a glance.
Climate Ready Boston helps visualize the amount of greenhouse gas emitted by fuel type and offers details on the Sector and Departments in the City that are generating these emissions. It offers a closer look at years 2017-2019 and can also provide visualized data from all years 2005-2019.
This visualization helps us take stock of understand where the City is at to help determine what the City might prioritize as areas that can be addressed and see great(er) impact.
See the deployed site here:
I used D3.js to build it, with some basic HTML and CSS.
I was unable to get a d3 tooltip to fully function the way I wanted. I did get to the point where I was able to see an overlay table outlining what can be seen in console.log / Chrome Developer Tools, but I could not get the data to output on it. By the time I could output the info, the overlay table no longer worked. With more time, I could've made the tooltip work.
I also had trouble transitioning loading data by year based off of radio button selected, as the previous rendering is "cached".
I created my first data visualization project! D3 has a steep learning curve to create very elegant looking code, so it takes some planning or initial architecting.
I learned a lot about D3 from creating the shapes to associating them with data to animating them, and I'm continuing to learn about the DOM.
I would get the tool tip to work and create a slider so that users can move the slider to view data from each year (2005-2019). I'd also have a flexible way to group and categorize data by colors (e.g. by City department as opposed to by fuel type).
VSCode and Chrome's developer tools