Skanska Logistics with SVG and D3.js

The Issue:
Skanska was contracted to build a multi-million square foot campus for Intel.  Because of the sheer size of the construction site, and the amount of workers involved, they needed a way to track the logistics of time and locations for anyone schedule to be on the site. They also needed this information to be complied into daily reports that they would use for informative meetings and to solve scheduling conflicts and other logistical issues.

Using Scalable Vector Graphics (SVG), I was able to compile a map of the campus based on .dwg drawings exported from Autodesk Revit.  This was essential for being able to zoom into details of the map without losing clarity.

Once the map is set, then using PHP we query the database for all instances of records corresponding to the dates they needed to see.  Each record was returned from the database and set into a JSON (Javascript Object).   Using this JSON, the information was iterated through and used to create SVG circles on top of the map that indicated the location, the and the approximate radius of space the group was going to occupy.  Since this was done using the D3.js library (Data-Driven-Documents), I was also able to bind various attributes of the record to each circle created on the map.

Because the record data was bound to each instance on the map, we were also able to make each circle editable, and fully interactive. Users can select a circle by clicking on it, and dragging it to another location. Attributes are also displayed and completly editable in the bottom tool-tip area. The circle can be added clicking the circle icons on the top toolbar, and then clicking an a location within the map.  This allowed the client to not only see that data they needed, but allowed this map to serve as a tool for scheduling and editing worker times and location with a visually rich display.  All the updating is done using AJAX so the page never has to be refreshed, and the information is always live.

Note: Due to security concerns this demo has a simplified detail, and particular attributes are not available. All data is generated as randomized records, and not connected with any external database.

See below for a demonstration: To view the full size demonstration link here.

Categorised in: , , ,