Use Data to Create Visual Display


As i live very close to the harbour, the vessels are never truly out of view. As a personal project, I set out to create a visual interpretation of what vessels are in the harbour and where, with the aim to eventually render a 3D mockup. Now there are sites that exists like this like marinetraffic.com that are just plotting long & lat points on a map, but to keep it simple my goal is just to use vessel names & berth names, possibly size as well. With this project i'm hoping to get some more time working with API's and 3D web experiences.

Before diving in and building a whole 3d application, i have started with a small 2d render of the harbour and vessels using just css as a proof of concept.

The result from this test can be seen below or CLICK HERE to go to the site

To place the green rectangles which represent vessels, a loop outputs a span for every vessel placing both the berth the vessel is at and the size of the vessel (a switch statement evaluates the tonnage of the vessel to get a rough size) in the elements class.

Placing the vessels where there are double berths is not accurate, for example 2 small vessels can be placed at Regent 2, unfortunately the css selector :nth-child(n) cannot work here so I've use the ~ selector to select the second occurrence of a vessel in the same berth, not an ideal solution but this is just a proof of concept for now.

Using Zdog i have made a quick and dirty mock up of the desired end result... It's pretty rough, but It is definitely possible with a bit more time spent on modelling, z fighting is an issue for a shape as large as the quayside so i may have to layer the quays as separate shapes. One drawback/feature of Zdog, is the flat appearance, so I will explore using THREE.js at some point in the future which will allow me to light the space for a more interesting visual, this would also allow me to import 3D models I've made in blender.

See the Pen Vessels in Aberdeen Harbour by Clarke Nicol (@clarke-nicol) on CodePen.