Skanska Logistics with SVG and D3.js
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.
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: Business Workflow Solutions, Data Visualization, HTML5, Web Development