Web Based Data Visualisation Applied to Creative Decision Making in Parametric Structural Design

Abstract

This paper outlines recent efforts by the author to integrate modern web-based data visualisation techniques into decision-making efforts for structural design projects. It traces the development of data visualisation, detailing powerful new techniques, which exist in modern web browsers, and are already used by many other data-rich professions. Explaining the underlying technology as compared to current engineering visualisation equivalents. With the benefits and potential applications of this technology to design engineering discussed. Then using real design problems, some example applications of these methods applied to structural engineering decision making support are described and explained for supporting large scale option based decision making with structural engineering data.

Full text

Proceedings of the International Association for Shell and Spatial Structures (IASS)
Symposium 2015, Amsterdam
Future Visions
17 - 20 August 2015, Amsterdam, The Netherlands
Web Based Data Visualisation Applied to Creative Decision
Making in Parametric Structural Design
Sam Conrad JOYCE*
*Singapore University of Technology and Design
8 Somapah Road, Singapore, 487372
sam_joyce@sutd.edu.sg
Abstract
This paper outlines recent efforts by the author to integrate modern web-based data visualisation
techniques into decision-making efforts for structural design projects. It traces the development of
data visualisation, detailing powerful new techniques, which exist in modern web browsers, and are
already used by many other data-rich professions. Explaining the underlying technology as compared
to current engineering visualisation equivalents. With the benefits and potential applications of this
technology to design engineering discussed. Then using real design problems, some example
applications of these methods applied to structural engineering decision making support are described
and explained for supporting large scale option based decision making with structural engineering
data.
Keywords: data visualisation, big data, design decision-making, web technologies, parametric design
1. Introduction
Good engineering is not only about deductively doing the right calculations and finding safe solutions.
It is the act of inductively navigating though the wide range of potential options, making informed
decisions at every stage. This creative decision making process has become more important as
buildings and engineering projects have increased in size and complexity; where early decisions often
based on little more than a few studies and intuition, have a large impact on the later configuration and
thus performance of a structure.
With the advent of computing, data has been a cheap commodity in engineering analysis, making
design studies easier, and more information available to the engineer. However, arguably this has both
helped and hindered decision-making. Knowing more, does not necessarily translate into being able to
make better decisions; as there is an inductive synthesis and interpretation process also known as
understanding, which required before one can begin making decisions using data.

Proceedings of the International Association for Shell and Spatial Structures (IASS) Symposium 2015, Amsterdam
Future Visions
In other fields, new techniques have arisen that aim to improve data understanding via better
visualisation. Either by increasing the quantity or quality of what is shown, or by taking advantage of
the interactivity of screen based visualisations. It is the application of these mediums and techniques
in an engineering context that will be explored in this paper.
2. Data Visualisation
Data visualisation is a relatively new field, which at a functional level pairs graphic design with
quantitative information, but at a discipline level, studies peoples cognitive understanding and
interpretation of graphical figures. With the aim that data can be conveyed in the most efficient, but
accurate and representative way. Data visualisation has been practised as early as 1765 by Joseph
Priestley [8] with the innovation of timeline charts. The art gained popular appreciation in 1786 with
William Playfair in his widely published ‘Commercial and Political Atlas’ [7], and was being used to
steer government policy making by 1855 by John Snow used to prevent further cholera outbreaks [4].
With many of the graphical techniques in use today pioneered by Civil Engineer Charles Joseph
Minard in the 1800’s [6].
However, arguably the field of data visualisation gained it’s academic and scientific foundations after
the publishing of ‘The Visual Display of Quantitative information’ by Edward Tufte [9]. In this work,
the principals of clear and concise figures was developed, with the defined aim to help not hinder
understanding by the reader, which he coupled with careful analysis on actually how figures are
understood by people and if they correlate with the data and intended understanding. These concepts
have now become core to the discipline. An important contribution by Jacques Bertin [2], determines
5 principal properties of graphical objects which can be determined by eye namely size, value, texture,
colour, orientation and shape and these have differing ability to infer association, selection, order and
quantity of data. This effectively defines the base axioms from which modern visualisations can be
made. Arguably Tufte’s later work ‘Visual and Statistical Thinking: Displays of Evidence for Making
Decisions’ [10], is perhaps most important as it links how visualisations are practically used to make
decisions, and how evidence if incorrectly presented can result in the wrong decision being made.
Nowadays the use of data visualisation is ubiquitous, from Power Point figures, to sophisticated
graphing methods developed by the financial industry. Furthermore, these methods are gaining more
Figure 1: The first known use of the pie chart by William Playfair from his ‘Commercial and
Political Atlas’ published in 1786

Proceedings of the International Association for Shell and Spatial Structures (IASS) Symposium 2015, Amsterdam
Future Visions
interest and relevance as the internet and big data are increasing the needs for professionals to digest
and act on complex ever changing data sets. There has also been resurgent popular interest in data
visualisations with popular publications such as ‘Information is Beautiful’ by Mc Candless [5]. A
growing trend is a move away from static representations, towards more dynamic web based
visualisations, which utilise the unique capabilities of the internet ‘medium’ of computer screen and
user interaction, to provide much richer systems, and evolve methods of visual understanding. These
are becoming more easily accessible with the new HTML5 and JavaScript standards implemented on
modern browsers. Which enable powerful computation, figure generation and animations to be
computed on the ’client’ (local user’s web browser) side.
3. Current State of the Art in Engineering
The visualisation landscape of engineering data used in structural design is still very disjointed and
fragmentary. Driven mostly by commercial software, which typically acts monolithically as the
platform to build structural models, analyse them and then show the complex data. This is a very
demanding set of objectives, and it is felt by the author that often one or two of these capabilities are
well realised in a program, but often at the price of others. Looking at the visualisation component of
this; Some programs take a very three dimensional model based approach, integrating analysis data
with the 3D model, examples such as GSA by Oasys or Robot by Autodesk. Others provide more
fixed figure generation methods, such as Ansys or the ETABS software by Computers for Structures.
However almost universally, direct quantitative data is shown in table format, with Excel
interoperability a heavy influence on the display of this information. This includes higher-level
information such as minim and maxim stresses, average element utilisation etc. This fits into current
workflows where often engineers manually copy large tabular information into Excel spreadsheets,
which are developed individually by the engineer to generate new tables and further calculations to
summarise and digest this information.
It is the belief of the author that whilst this is effective for basic analysis of single designs and code
checking, it is less than ideal for exploring different options or making design decisions based on
comparative performance data. As engineering analysis is becoming easier and quicker to generate,
more analysis is undertaken on a range of options or range of load cases. This is acutely the case with
Figure 2: A spatial data analysis of deaths by Cholera, leading to the discovery of the root of the
disease and a decision to stop using a pump which saved many lives.

Proceedings of the International Association for Shell and Spatial Structures (IASS) Symposium 2015, Amsterdam
Future Visions
parametric design, here modern systems have enabled geometric modelling to be linked quickly to
engineering analysis with results data able to be extracted and processed more fluidly than before as
shown by Aish [1]. As such the development and generation of a larger range of options is not only
possible, but is becoming to be expected by design teams to hone design variables. It is here, that the
use of static plots, of the kind that can be created in Excel, reach their limits of expression, and
alternatives need to be sought.
What will be discussed in the rest of this paper are web-based alternatives to exploring complex
engineering datasets, with a goal that this should enable wider exploration of design space, whilst
supporting informed conclusive design decisions.
4. A Proposal for Modern Data Presentation
The data visualisations proposed in this work are single page web pages. To cope with the complexity
modern web development is broken down into three main components, and due to it’s use paradigm
and historical reasons each has it’s own encoding schema. Firstly, is the HTML defining the pages
overall structure and content, using a hierarchical ‘tree’ of ‘elements’ which are the basic building
blocks of a web page, determining where text would be and what it is, as well as where buttons or user
input fields are placed. The second component is CSS, which defines the style of the page, such as
font types and element colours, and is often referenced across multiple pages to give them a unified
aesthetic. Finally there is JavaScript which is compiled and run by the client computer upon loading
the web page, and can then provide actions and logic for creating elements, or handling message
passing and logic with can be controlled by elements on the web page such as buttons. JavaSript
represents a deceptively powerful programming language, which drives many of the features
associated with the modern web. Despite this complexity all of these elements can be contained in one
page and opened locally from the web browser, in the same manner as any word document but with
all the interactively of a webpage.
Figure 3: Typical structural analysis software interface from Robot, with 3D model viewer, but
results displayed only in a tabulated manor. From http://forums.autodesk.com/

Proceedings of the International Association for Shell and Spatial Structures (IASS) Symposium 2015, Amsterdam
Future Visions
4.1. Data visualisation web frameworks
One popular library written in JavaScript specifically for data visualisation is Data-Driven-Documents
or ‘D3’ Bostock et al [3]. This technology has been widely adopted for visualisation on the web
including the New York Times website to improve understanding of voting statistics. D3 uses a
paradigm where data is bound/linked to web objects, exposing methods for the objects to use the
associated data when they are interacted with.
This data is object based, so one element doesn’t have to relate to one piece of data, but rather can
relate to a complex set of data, allowing for hierarchically nested properties; For example, a set of web
elements could be linked to a set of beams, each element would then be able to access it’s respective
beam’s maximum stress (a direct property) or the stresses along a number of points of the beam
(properties of a property / collection). The power of this lies in the fact that a graphical web objects
such as dots or bars, can be defined or controlled by referring to their inherent data properties, which
are bound to the element itself. Furthermore D3 also allows for the creation, destruction and
transformation of web objects based on data. For example, making the same number of points, as
there are number of nodes in a data list. The position of these point elements in the web page could be
linked to the X and Y location of it’s linked node data.
4.2. Applications in Engineering Design
If we look at the kind of post-processing of analysis, undertaken by structural engineers, it typically
involves assuring the validity of analysis result, such as checking loads and reactions sum to zero.
However, when it comes to comparatively appraising actual designs by aggregating the data a sense of
distribution of utilisation with respect to design parameters for example can be very useful.
Frameworks such as D3 can provide a level of interactive data display not available in other tools. For
example, points that represents nodal data, and when selected based on analysis data (such as high
deflection) can then highlight where they exist in physical space. The logic can be built and
Figure 4: Example of New York Times web page, in which D3 is used to power the visualisations.

Proceedings of the International Association for Shell and Spatial Structures (IASS) Symposium 2015, Amsterdam
Future Visions
determined by the user, so if indicating where neighbour node are on a graph is useful, the logic can
be programmed were chosen nodes then highlight their connected nodes. Furthermore, the input data
can be in the form of a basic tabulated text file, which could match an existing FEM software output,
and can be easily replaced for new data without needing to modify the web page.
4.3. Support Option Selection
These concepts become more powerful when comparing different options or load cases. In this
scenario each option represents a wide range of multifaceted data about that specific design. This
causes an issue with static plots, as displaying all of this data requires many different plots. The issue
becomes compounded when comparing many potential design options on mass. Furthermore, one
representation method for one property of the design may not be the appropriate view for another. For
example the maximum deflection is arguably best displayed as a point as it is a singular value, where
as the material volume is best represented and compared as a bar chart to give a sense of comparison.
Again, web visualisation and specifically D3 can support these requirements by containing each
option on the same screen and transitioning between the various data views on command from the
user. This centralised but interactive approach can simplify views of data whilst still allowing for
depth, and by transitioning the user can get a better sense of persistence over separate plots.
5. Case Studies
This technology is perhaps best explained in the context of example case studies. Presented below are
two case studies, both of which are the product of attempting to finding better visualisation solutions
to design problems encountered by the author. The first highlights the applicability of such a method
Figure 5: Portal frame considered in study.
Below the first three modes of the portal frame coloured by displacement.

Proceedings of the International Association for Shell and Spatial Structures (IASS) Symposium 2015, Amsterdam
Future Visions
for understanding engineering trade-off. The other shows how multi-directional engineering and
design constraints can be used to improve decision-making.
5.1 Modal Design
In this example a structure with complex dynamic response was investigated. The structure was a
rectangular portal frame with asymmetrical additions. With fixed column sizes and beams comprising
of three family types where the width but not the depth could be varied. In dynamic analysis the first
three modes represented a translation in X, translation in Y and rotation about the Z-axis respectively.
The X-axis being the long axis of the structure as shown in figure 5.
The issue was two fold, firstly the structure having a too low period for the first mode, secondly
keeping the third mode away from the first mode period, which would combine destructively if not
sufficiently separated. The result being a complex iteration of three different modes, controlled by the
three different families of beam sections to be designed for the portal frame.
Rather than tune the structure manually which would be a time intensive process, instead an
exhaustive parametric analysis was undertaken. Sampling 9 different options for each of the beam
section families resulting in 729 potential solutions. After filtering out those, which do not satisfy
strict criteria such as minimum deflection, the more subtle process of choosing which is the best trade-
off can be undertaken.
This was visualised by graphing these on a two axis scatter plot, where each point represents a design.
Two extra ’dimensions’ can also be applied to the plot by determining the colour and point size, again
determined by the data as shown in figure 6. The visualisation is special, in that any valid property of
the options can be used as a graph dimension, and selected by a dropdown. Upon which the system
Figure 6: Example of data visualisation, showing trade off between first mode period and
difference between first and third mode periods. Point circle area represents material volume, and
are coloured by section size. In depth details of a chosen (clicked) point are displayed to the right.
The axis properties can be changed to any performance metric by the user.

Proceedings of the International Association for Shell and Spatial Structures (IASS) Symposium 2015, Amsterdam
Future Visions
transitions the points to new configuration. So the various comparisons could be generated; P1 against
P2, P2 against P3 etc. In this way trade-offs can be seen, and Pareto fronts of non-dominated options
visualised.
In this case however there was interest in more than just a 2D trade-off. To enable this one solution
used linked another plot, allowing for the Pareto front of one plot to be selected, showing up as
highlighted points in the other. With any selected point being shown summary data on hover with the
mouse, or if clicked then in a separate sidebar or window for deeper consideration.
In this case, the modal behaviour was not the only factor to consider, material usage was also
important. To represent this the area of the circular point can be used to show the material volume.
Presenting an informed trade-off where the material required for the given behaviour could be quickly
and visually included in the decision making process.
An additional level of understanding can be realised by using colour to represent the section used for a
given family. Although limited to one family, if viewed side by side as shown in figure 7, the change
in colour with respect to the change in position in either axis shows a correlation (or not) to that factor.
By showing data in this way for easy comparison of many options, it is felt that not only can a better
performance decision be made, but also the system can be better understood helping improve the
intuition of the engineer.
5.2 Parametric Roof Design
This next project example represents a much more open design problem. It is concerned with the
design of a canopy roof, which was defined parametrically. The roof had five major variations; roof
height, grid size in X and Y, diagonal bracing spacing and element cross-section. All of which affect
the engineering performance as well as have an impact on the architecture of the design. Some
engineering requirements are necessary to ensure design safety however other represents trade-offs
between engineering efficiency and visual preference. This is a typical state of affairs in structural
design of buildings. As a result it is useful to look into new ways of understanding this and making the
design decisions.
Figure 7: Visualisation showing coloration based on beam section family, shows that the 2nd
family has the biggest influence on Period 1 (the X axis), and the 3rd family has the biggest impact
on how similar period 3 is to period 1.

Proceedings of the International Association for Shell and Spatial Structures (IASS) Symposium 2015, Amsterdam
Future Visions
In this case a large range of options was generated and analysed in a similar fashion as the previous
example. In this case the number of design parameters is higher being five and so the samples of each
was reduced to 3 beam sections, 4 bay sizes for both X and Y separately, 3 diagonal spacing options
and 3 roof heights, resulting in 432 options. Each option was automatically generated analysed using a
mixture of parametric modelling system Grasshopper coupled with batch processing in Python, with
key data saved to a basic text file.
Initially the same graphing methods were used on the previous example. Made possible by the web
page being developed to visualise as coordinates any numerical fields of a text file formatted with
comma separated values. This enables a quick overview of data. For engineering concerns this
highlights good trade-offs between significant performance requirements in this case deflection and
material usage were key factors. However without any more data this limits decision support, to those
based solely on engineering metrics, and obfuscates any understanding of the system.
So by referring to Bertin’s visual properties [2], the visualisations can be modified to include more
information, not just colour and size, but also circle stroke width and colour, even point transparency,
Figure 8: Basic design configuration, showing one variation of height, grid size, diagonal spacing
and element cross-section.
Figure 9: Left, Simple plot of deflection against material volume for a range of designs, as
compared to the same graph right which also represents design inputs; colour : roof height, circle-
radius : diagonal spacing, circle-stroke : section-thickness. All of these data visualisation
associations can be changed by the user via the web interface.

Proceedings of the International Association for Shell and Spatial Structures (IASS) Symposium 2015, Amsterdam
Future Visions
providing more visual degrees of freedom to display this multi-dimensional data as shown in figure 9.
This can be useful for inferring relationships between functional requirements (shown positionally)
and design variables (shown by the points graphically). For example it can be seen that red (higher)
roofs where closer to the Pareto front and so are preferable options. There is a danger that this can also
become too busy for efficient understanding. Furthermore arguably it does not lend itself to choosing
exploration of choosing options, which is often based on the interplay between engineering needs and
architectural wants.
To address this issue another visualisation was built, again using D3. This uses a parallel plot, taking
each dimension of the input design parameters and output analysis results and displaying it on a series
of liner axis connecting each designs values with a line between the axis as shown in figure 10.
From here it is possible to allow the selection of specific designs based on ranges of one or more of
the axis. By ordering input parameters on the left and analysis results on the right it is possible to
generate interesting sets based on both functional and visual desires. For example by setting a maxim
Figure 10: Parallel plot visualisation of roof design problem, with design parameters on the left
and performance metrics on the right. Below a demonstrates a dynamic selection of design
decisions and performance requirements by interactive sliders and the resultant compliant design
options highlighted.

Proceedings of the International Association for Shell and Spatial Structures (IASS) Symposium 2015, Amsterdam
Future Visions
stress criteria, a minimum material range and a specific desirable cross bracing spacing a limited
number of designs are available with usefully limit the ranges of other input parameters. This is of use
in a design context for the implications of different design decisions to be made can be directly shown
to have an impact on both engineering performance of a design but also limiting design variably in
other regions.
6. Discussion
The previous examples have shown what can be developed in limited time based on real design data.
However they have shown a significant impact on the depth and clarity of understanding of these
problems. These methods can be made as specific or generic as the user requires, both of the previous
examples take generic numerical data and are essentially agnostic of the problem. However it is felt
by the author that the domain of structural engineering is well defined enough, that it would benefit
from web visualisations specifically designed for the typical tasks undertaken, as these could be used
on multiple projects successfully. Not just for option decision making but also more rudimentary
single design appraisal, where a dashboard of relevant data could more efficiently convey the
suitability of a model than the current tabular form.
Furthermore if developed specifically for engineering decision making problems, then a series of
relevant visualisation pages or data-views could be linked together. With greater interactivity built in
data so as data could be explored at different depths quickly in a similar way so one browses topics
online on Wikipedia. For example selected options in the graphs above could open up new pages with
more detail on the individual model, rather than just side bar information as shown here. This could be
extended to include visualisation of the model also, using modern 3D web visualisation such as
three.js, which could enable a complete decision making ecosystem.
It is important to note that the projects visualisations worked using just simple free web browser
software. This allows it to work across platforms even on mobile devices, without requiring a
potentially expensive FEM software licence. Resulting in a more efficient use model of software and
hardware, with one set used to undertake the specialist task of analysis and acting a servers of data,
which can then be distributed and consumed more easily by another set for visualisation and decision
making.
7. Conclusions
This paper has highlighted some of the failings in data visualisation, both with modern monolithic
engineering analysis software, but also the current typical spreadsheet based post processing. It
proposes that a more appropriate paradigm would be to decouple analysis and visualisation, enabling
better tools based on web technologies to be used in their place.
Some examples have been shown which leverage the interactive nature of web data visualisations to
enable more information to be presented opening up potentials to compare numerous design options
with greater ease. This is believed to be significant as it addresses the issues that parametric design
presents by making option exploration easier and thus challenging existing engineering decision-
making methodologies. Whilst these are simple examples and their power is hard to convey in an

Proceedings of the International Association for Shell and Spatial Structures (IASS) Symposium 2015, Amsterdam
Future Visions
academic paper, they represent how easily such visualisations can be produced in this way as single
webpages. Furthermore these are easily extended using all the inbuilt graphics and user interface
capabilities of modern we browsers.
The field of data visualisation is a growing one with and with new frameworks the barriers to entry
now significantly lower, with skills being equivalent to those used for existing spread sheet
programming. As such it is believed by the author that this is something that design engineers should
put more effort into adopting.
Acknowledgement
The author would like to acknowledge the support of Foster + Partners Applied Research and
Development Group as well as EPSRC funded Industrial Doctorate Centre in Systems at The
University of Bath (Grant EP/G037353/1).
References
[1] Aish, R., Fisher, A., Joyce, S., & Marsh, A. (2012). Progress towards Multi-Criteria Design
Optimisation using DesignScript with SMART Form, Robot Structural analysis and Ecotect
building performance analysis. ACADIA.
[2] Bertin, J. (1983). Semiology of graphics: diagrams, networks, maps.
[3] Bostock, M., Ogievetsky, V., & Heer, J. (2011). D³ data-driven documents. Visualization and
Computer Graphics, IEEE Transactions on, 17(12), 2301-2309.
[4] Snow, John. On the mode of communication of cholera. John Churchill, 1855.
[5] McCandless, D. (2012). Information is beautiful. Collins.
[6] Minard, C. J. (1862). Des Tableaux graphiques et des cartes figuratives, par M. Minard,...
Thunot.
[7] Playfair, W. (1786). Commercial and political atlas: Representing, by copper-plate charts, the
progress of the commerce, revenues, expenditure, and debts of England, during the whole of the
eighteenth century. London: Corry.
[8] Priestley, J. (1765). A chart of biography, London. British Library, London.
[9] Tufte, E. R., & Graves-Morris, P. R. (1983). The visual display of quantitative information (Vol.
2). Cheshire, CT: Graphics press.
[10] Tufte, E. R. (1997). Visual and statistical thinking: Displays of evidence for decision making.
Graphics.