They had the underlying data in Excel along with some sample charts. What they wanted from our software team was a user-friendly interface for exploring the data and comparing façade systems. Our first few meetings focused on learning about the process the Building Science team had created for performing LCAs. We then created a list of features and goals for the tool. We sketched some user interface ideas on paper, created digital mockups, and then began creating the first prototype. We first tried building Kaleidoscope in Microsoft Power BI, a tool that lets you easily create web-based dashboards of charts and graphs using a drag-and-drop interface. We were already using Power BI for other data analysis tasks at Payette so we wanted to see if we could make it work for Kaleidoscope as well. We knew from the start that it might not offer us enough flexibility (in terms of user interface design) but it would allow for the very quick development of a first prototype. We did a few iterations of our Power BI dashboard and built a similar version in Tableau (another drag and drop data visualization platform with the ability to create data dashboards). Ultimately, after creating a few variations of Kaleidoscope in Power BI and Tableau, we decided that in order to achieve the level of flexibility we wanted we would need to build a custom web application. Some of the final features built included a custom popup dialog providing additional information about material systems, a highly customized interactive bar-chart with custom hover states, a customized chart legend that served as a legend, material toggle and detailed material. Although we did not end up using the Power BI and Tableau dashboards in the final product, it was a valuable exercise enabling us to quickly refine our software requirements, learn how to work with and visualize the data and have a tangible working application to communicate ideas and get quick feedback from the Building Science team.Īt Payette, we develop most of our web-based software applications using the Node.js JavaScript based front-end framework React. It is popular, well supported with an active community and reliable. For simplicity we wanted the entire application to be a front-end app with no database backend. Building Science releases all of their applications as open-source software so we did all of our development for Kaleidoscope on Github. We used the npm plugin `gh-pages` which allowed us to create a script for deployment. By just running `npm run deploy` we can generate a static efficient build of React, which then gets automatically copied over to the Github pages branch. Our app gets hosted in Github pages and we just include it on the Payette website at its canonical URL using an IFRAME. Since our entire application is client-side we include all the Building Science team’s data in CSV files committed directly to git. Although this approach requires a developer to commit and re-release the code anytime the files are updated the simplicity of not having to create and maintain a backend server and database makes the tradeoff worth it (at least initially). Over time we have discovered that the Building Science team does want to make more frequent updates and test revisions more independently. Although the scope and frequency of updates probably still does not warrant creating a backend administrator interface (in terms of programmer time) we are currently exploring options for making the process of adding materials and updating CSV files more seamless and feasible for non-developers to perform. In addition to user interface controls, the main feature of the application is a highly customized bar graph that allows users to compare different LCA metrics for a variety of façade and flooring materials. With our React apps we typically use Nivo, visx (formerly vx) or SVG. Nivo is a high-level charting library that contains many pre-built charts and graphs for React.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |