NOTE: New to the Steel Explorer? Read about it here.
The purpose of this post is to highlight things that come to mind when reflecting on my time designing, iterating, and building the Steel Explorer. Some are tips, some are tricks, and some are learning lessons. Enjoy!
Prior to starting the design phase of a new project, try to determine magnitudes, minimums, and maxiumums of your data set. My first iteration of the design for the Steel Explorer only accounted for ~50 beams, but things completley fell apart once all 284 beams were rendered.
Design with a minimum screen resolution in mind, driven by actual site statistics if you have them. My initial designs assumed a resolution of 1600px by 900px, which I soon realized only accounted for about 15% of my site traffic. This mistake set me back several weeks and forced me to redesign and reengineer several charts for a screen resolution of 1280px by 768px.
When filters are applied to the data, visibly modify elements which do not meet the criteria. For example, beams which are filtered out in the Moment Chart have a reduced opacity and a lighter shade of grey. A transition between states can also assist to make the change less jarring.
Adding a transition animation when zooming in and out of a chart helps with spatial awareness.
Cross linking the charts on filter and hover interactions helps expose additional, potentially relevant, information to the user.
Use canvas instead of svg to render large datasets. Performance on the zoom transitions is noticeably sluggish because I underestimated the number of elements being rendered. In retrospect I should have rendered all the charts in canvas and only rendered the Voronoi overlays in SVG. This would have dramatically improved the rendering performance, performance when transitioning, and allowed for smoother hover animations. This leads me to my next two points.
Computing and rendering the Voronoi layer at the scale of data on this project takes a noticeable amount of compute power and causes a brief slow down the machine. This, in conjunction with the transitions that happen when a user filters the dataset, resulted in noticeable lag. However, I realized that because the Voronoi and svg layer are two independent layers, we can actually delay the re-calculation of the Voronoi layer until after the transition of the visual elements have finished. This reduced the lag enough to a point where I felt comfortable skipping the migration from svg to canvas.
When filtering on the data set, using the enter and exit pattern to hide elements was less performant than simply changing the opacity of the elements to 0.
You should clean and condense your data set if possible. Reducing the ~2,000 line .csv of steel beams to 284 lines reduced the file size to 111kb (from 707kb). This simple optimization improved load time by several tenths of a second.
Migrating from d3v3 to d3v5 was relatively painless.
I think it's important for you, the reader, to know that I started this project over two years ago and it took a lot of time, hard work, and persistence, just like all the other projects being created and shared. The project had many struggles, many imperfections, many times where I wanted to give up, many instances where I felt like I didn't know what I was doing, and many other difficult moments.
I provide this color because often times we make up stories in our heads that the work being created by others happens so effortlessly, easily and quickly when in fact the opposite is true. Fight the feeling of imposter syndrome and remind yourself that you are totally capable of achieving whatever goals you set out for as long as you work hard and are persistent.
You are awesome.
Below are screenshots of the Steel Explorer at various points in time during the development of the project, in chronological order (top left to bottom right).