TB Synergy Visualisation
    • Report
    # Platevis: Visualising 3D Assays of Combinations for Tuberculosis Therapy ## Introduction ### Problems with researching TB According to the [CDC](http://www.cdc.gov/tb/statistics/), Tuberculosis (TB) is one of the most deadly diseases, with a third of the world's population infected. It's an important disease in South Africa as it is the leading cause of death of those who have HIV/AIDS. As such, it is important that effective drugs for its treatment are discovered. Developing drugs for TB is complex as it is treated with a combination of medications rather than one on its own. This means that during drug discovery, one cannot simply test the new drug on its own as it could have antagonistic reactions with other drugs. In order to see if a drug is effective, you need to test it with a combination of drugs. Usually this is done in the final stages of the drug's development by incorporating it into clinical trials on human subjects. This is problematic however, because at this stage large amounts of money has already been invested in the drug. If the drug has an antagonistic interaction with any of the others in the standard treatments, then it cannot be used. Recently some groups, such as UCT's [IDM](http://www.idm.uct.ac.za/) have been testing drug combinations in the lab, allowing much earlier detection of drug synergies and antagonisms. To compare two drugs, you can use an assay depicted in Figure 1. For our data, an assay is a series of petri dishes, each which contain a certain amount of TB treated a certain concentration of two drugs. The concentration of the drugs in a given dish is given by its position in the grid. The TB microbes are treated with a compound which makes them give off light so you can measure a drug's efficacy by determining how much light a dish is giving off.
    ![Figure 1][drug-interaction-plates] **Figure 1:** An assay examining the synergies of two drugs for TB. Sourced from [1].
    However, comparing two drugs is unfortunately not enough for emulating real life conditions - treatment of TB consists of at least three drugs. This comparison is done with a 3D assay: you run multiple 2D assays each with a third drug with different concentrations. This means that you essentially have four dimensional data: each of the three drug concentrations and the luminosity of the plate. Currently, researchers have no way to effectively visualise this 4D data, slowing their research. As effective drugs can save the life of hundreds of thousands, is is important they are able to grapple with this high dimensional data. ### Data Provided For our data, we are looking at three drugs in combination: * rifampicin (RIF) * isoniazid (INH) * fusidic acid (FA) Five plates were set up, each with different concentrations of RIF down the columns and different concentrations of INH across the rows. FA was added at specific concentration for each of 5 plates, with the first getting no FA and the rest getting approximately double the concentration of the ones that preceded it. The efficacy was measured with fluorescence intensities from a green fluorescent protein (GFP) reporter that is expressed in the bacterium. The maximum signal (i.e. uninhibited growth) was capped at 65000. The data is stored in spreadsheets depicted in Figure 2. Essentially, the data is a four tuple: three concentrations and a measure of effectiveness from the luminosity.
    ![alt text][spreadsheet-data] **Figure 2:** The original specification of the data provided by Digby Warner [2].
    ### Profile of Users The design caters to two types of users which we profile briefly below. Both are expected to be literate in the domain - they should understand the details of a 3D assay the what metrics to evaluate this data on. #### Professor Doctorson Professor Doctorson has Doctorates in both Epidemiology and Virology. She manages dozens of laboratories all looking at multiple combinations of drugs wants to be able to quickly understand whether a particular experiment was successful in finding an effective treatment. She doesn't care about the particular values, she just wants to be able to very easily get an overview of the data that she can dig into and then include in a paper if it proves promising. #### Stu Dent Stu is a masters student working in Professor Doctorson's lab. He is responsible for running and evaluating the 3D assays that are being run. If Stu is able to find an effective combination, he will be able to become fifth authour on one of Prof. Doctorson's papers, so he is very invested in the detail of each particular experiment. Stu wants to know how the experiment went as a whole but also wants to be able to drill down and see any patterns. Once he has established any patterns, Stu wants effective visualisations to be able to present them to Professor Doctorson to illustrate them as quickly and effectively as possible. ## Related Work ### 2D Visualisations Virologists use what are known as FIC curves to visualise the results of a single assay as depicted in Figure 3. The points on the curves are the drug combination in each row of the assay with the lowest FICs that inhibited the growth of TB. This corresponds exactly to the rightmost dishes on the plate in Figure 3. Researchers use this chart to determine the drug with the best FIC index by finding the point closest to the origin as highlighted on the FIC Curve. The largest limitation of these diagrams is that they only show 2D data and do extend naturally to 3D data. Even as a 2D visualisation, they have some problems for data exploration as FIC curves hide data when they don't need to. One can see a super set of information on the curve on the plates on the right as the curve is simply the rightmost blue plate in each row. However the plates show information the curve does not - how well each drug performs in isolation and exactly how well each drug performs.
    ![alt text][graphical-representation-of-checkerboard-assay] **Figure 3:** From left to right, an abstraction of assay data to show where the points on the FIC curve arise from, a FIC curve and the actual assay where the data was sourced. Sourced from Digby Warner without attribution [2].
    Figure 4 shows a star chart. These are good at showing data with a large number of dimensions. Each point is a line and its value for each dimension is marked by its distance from the origin on each of the marked dimension lines. This visualisation is effective at showing a small number of high dimensional points as seen in Figure 4. However, our data has hundreds of points which if displayed using this visualisation would make it hard to individual points and trends. As this is important for our visual queries, it is unsuitable for our current task.
    ![alt text][example-star-plot] **Figure 4:** A star chart comparing space system designs [3].
    Figure 5 shows a parallel coordinate plot. This is similar to a star plot in that each point is a line and its value for a dimension is its height on a dimension line. It's essentially a star chart whose lines have been made parallel. The same criticisms of the star chart are valid for it: we simply have too many points for this to be displayed cleanly.
    ![alt text][example-parallel-coordinate-plot] **Figure 5:** A parallel coordinate plot showing the dimensions of flower petals [4]
    A less frequently used visualisation for multidimensional data is the scatter plot grid. Here, each scatter plot is the data for any pair of variables corresponding to the rows and columns. Along the diagonal is the histogram for values on that particular dimension. This visualisation shows the effectiveness of scatter plots for large amounts of data. This helped inform our final design. However, we thought that while this was useful at ascertaining trends for pairs of variables, our most important visual queries requires us to compare points on three or four dimensions rather than just two.
    ![alt text][example-4x4-plots] **Figure 6:** A scatter plot grid designed to visualise 4D data [5]
    ### 3D Visualisations The experiment is restricted to three drugs, due to physical limitations in conducting the experiment and also for a simpler analysis of the results. The three drugs can easily be represented in three dimensional space, and we began to explore 3D visualisations. Although these are a good starting point, one needs to be careful as to how the fourth variable, the intensity of the Green Fluorescent Protein is represented. A naive selection of 3D visualisation may not support the visual query for detecting this intensity, but instead hide it. A common visualisation used to represent four dimensional data is a 3D surface diagram as seen in Figure 7 where colour is used on the surface itself to represent the fourth variable - much like a heat map. We discovered that this type of visualisation was in fact being used in reports to illustrate results for 3D Assay data. There are many pitfalls to this type of visualisation, one of them is that the surface occludes itself, hiding colours. The other is that it is very difficult to determine the 3D coordinates of a point on the surface, and the value of the actual colour. Another pitfall is that the surface is a continuous interpolation of the discrete quantities, and we cannot tell which quantities were actually used.
    ![alt text][example-4d-visualisation_03] **Figure 7**: A three dimensional plot with a fourth dimension shown as colour [5]
    We began exploring other 3D visualisations, such as the 3D scatter plot in Figure 8. This visualisation is favourable to the 3D surface visualisation both because it does not occlude itself and because the scatter points are discrete. However, on close inspection there are a few potential issues with visual queries. The first is that the points are drawn without perspective (i.e from an orthographic projection) which provides no visual information about where the point lies on the scatter plot. This is complicated further when points are clustered together. One solution to this problem is to draw lines from the points to the planes of the axes as seen in Figure 9, however this adds too much noise to the image, hampering visual queries.
    ![alt text][example-4d-visualisation_01] **Figure 8**: A 3D scatter plot [5].
    ![alt text][example-4d-visualisation_02] **Figure 9**: A 3D scatter plot with drop lines [5].
    ## Requirements and Associated Visual Queries ### Analysis of Requirements As we outlined in the Profiles of Users, we have two main use cases for each of our users: * **Data exploration**: what happened with this experiment? Was it successful? * **Data presentation**: how do I communicate the findings from this experiment? Data exploration means that we need to be able to facilitate a high level overview of the experiment as a whole as well as providing a way for users to drill into the detail of what happened in the experiment. Data presentation means that we need to produce high quality diagrams that can be edited to provide just the information required. To determine whether an experiment has been successful in this case is to find drug combinations that have synergy together or have antagonistic reactions. Synergy means that together they work better than either of them alone at the same concentration. Antagonism means the opposite: the drugs together at a certain concentration actually work less effectively than either by itself. We also want to optimise for dosage of the drug. The lower the dosage of the total drug combination, the lower the cost to produce that drug. Therefore it's not just inhibiting TB growth that's desired, but a combination of low dosage and inhibiting the growth . The dosage of drug combinations are generally compared using the Fractional Inhibitry Concentration Index (referred here simply as FIC index) of that combination - a linear sum of the drug concentrations weighted according to the Minimum Inhibitory Concentration (MIC). See Addendum A for calculating these values. At a high level, this means that success is determining the trends of combination of the dosages of the drugs. For example, we'd want to know whether increasing the dose of FA is in general more effective than increasing the dose of INH. We would also want to determine if there is any antagonistic reactions in the data as a whole - is there any particular dish where increasing dosage decreases effectiveness? Once particular points of interest have been identified, lower level data is required to re-enforce. ### Ranked Visual Queries In terms of prioritisation, we thought that data exploration was more important than data presentation. The users in question have access to the raw data and are skilled enough to provide effective two dimensional visualisations but struggle with visualising high dimensional data. Therefore it's more important for us to provide a visualisation that allows them to explore the three dimensional data as they currently have no way to do this themselves. Below is a ranked list of visual queries, from most important to least important. Here, we define a drug combination as being most effective if it is the combination of drugs that inhibits the growth of TB with the lowest FIC index. - Which drug combination is the most effective? - What, if any, drugs interacted antagonistically? - Which drug pairs were the most effective? - Which drug was most effective by itself? - For a set concentration for a pair of drugs, what is the lowest dosage of the remaining drug such that it still inhibits the growth of TB? - As we increase the concentration of a drug, how does that generally affect the performance of the other drug combinations? ## Design ### Initial Designs We put together mock-ups for alternate 3D visualisations, one of which is depicted in Figure 10 as a 3D bar chart. The two horizontal axes are for RIF and INH, while the height represents the GFP luminosity. A slider is used for interaction of the independent variable FA and the height of the bars animates accordingly to illustrate how the GFP luminosity is affected. This visualisation suffers severely from occlusion and was not explored further. A follow up idea was to represent the concentrations of FA, RIF and INH as points on a 3D scatter plot with a green material, slightly blurred, to indicate the GFP luminosity shown in Figure 10. As before, it was hard to tell where the points lay on the scatter plot, especially since they had varying degrees of luminosity and blur. Another issue was that we were not interested in high luminosity values, but rather low luminosity values. These lower luminosity values would be barely visible against the background. This design clearly opposed our visual queries.
    ![alt text][early-design-3d-bar-chart] ![alt text][early-design-3d-scatterplot] **Figure 10:** Our initial 3D designs
    We began to realise that a single 3D diagram would not be sufficient in analysing the results. Two dimensional visualisations would likely be needed alongside a 3D diagram. This would allow us to keep the 3D visualisation simple and use it, for example, in visual queries that compare the results of neighbouring points and plates (i.e. the physical space.). The 2D visualisation could then be used for the variables most critical in decision making (i.e. the logic). We identified the two variables critical to analysing the results, which would be used in the 2D visualisation. These are the intensity of the Green Fluorescent Protein (i.e. the Luminosity) and the FIC index. A 2D scatterplot would contain the visual queries needed to make accurate comparisons of the two variables, using all the cells. We are interested in the point which has the lowest FIC index and the lowest Luminosity: a point very close to the origin. This satisfies our logical decision making in identifying the best point from the experiment, all we need is to map this 2D point back to the cell containing the 3 concentration values: a 3D point. The 3D visualisation was then designed exactly for this mapping. It serves the visual queries which help to identify the exact cell which we are interested in on the plates. Necessarily, it made sense to use the physical association of the cells and the plates in the visualisation. We chose to represent planes in the 3D space as these plates, stacked vertically on top of one another. The concentration of FA only differs by plate, while the concentrations of RIF and INH differ by cell. This makes the FA concentration a good candidate for the vertical distance between the stacked plates, while RIF and INH are well suited for the two dimensions that define the plane. The first design for the 3D visualisation used a physical association between the stacked planes and the plates. A plane in 3D takes up zero area along its normal vector (the axis running perpendicularly through the plane), whereas the plane itself is divided into square cells with non-zero surface areas. This meant that the discrete values for RIF and INH would be represented by cells with length of, say, Y that would span a 2D surface with area YxY. In contrast, the discrete FA value would take up zero area. Our initial concern was that this discrepancy in surface area taken up between the three drug concentrations would be misleading to the user, and for this reason the first iteration of the design shown in Figure 11 represents the points as cubes instead of planes.
    ![alt text][early-design-plate-iterations] **Figure 11**: Our design as presented to the class
    However, this introduced several issues that was picked up during our presentation to the class. The most important issue is that it deviated from the physical association of the plates. We had now also added more occlusion, which is most prominent on the lower lying plates since those have similar concentration values. Deciding that the use of cubes with equal surface area was unjustified, the second iteration used flat planes. This clearly simplifies the visual query, as the thickness of the planes is of no relevance, but we still had an occlusion problem. Fortunately, the Luminosity values from the initial spreadsheet are either 65000 or range between 20000 and 23000. This is an almost binary jump in value, indicating that the concentrations either have no effect at all or a similar effect. For the most part we are not interested in concentrations which have no effect, so a slider was introduced to filter these cells out of the visual query, and in so doing solve our occlusion problem. The visualisation is also the subject of a similar issue to the discrepancy in surface area - a spatial discrepancy. The squares in the plane represent the physical cells of the plate, and sit alongside one another regardless of the difference in concentration to their neighbouring cells. At the same time the plates are vertically stacked with a distance proportional to the FA concentration. A quick drawing was done to visualise what it would look like if we were to separate the cells according to their spatial relativity, but this would clearly break down the physical association completely and degrade the visualisation into a 3D scatterplot with squares as points - an issue in itself. The proportionate stacking distance added no value to the physical association in the visual query and still had the occlusion problem. As a result the design was refactored to use uniform vertical spacing, obliterating occlusion and associating plates in the order of their FA value. This design was implemented in draft in Figure 12.
    ![alt text][sketch-plate-cells-scatterplot] ![alt text][early-implementation-plates-stacked_02] **Figure 12**: The 3D visualisation taking into account feedback from the class, solving the issues with occlusion and spatial disparity.
    The final problem of colour differentiation would be tackled during implementation. With the designs of our 3D and 2D visualisations in place, we could focus on laying them both alongside one another. Since this was going to be displayed on a web page, a simple web based grid layout was chosen as depicted in Figure 13. This implemented another suggestion given in class that having one unified dashboard could be aid a researcher in understanding the data.
    ![alt text][sketch-layout] **Figure 13**: The initial layout design
    In the top-middle of Figure 13 is a grid with the 'frontier', values with the lowest FIC index that inhibited the drug growth, and hyperbolic curve currently used for analysing data as illustrated in Figure 3. The point on the hyperbolic curve whose distance is closest to the origin represents the cell with the optimum FIC index to Luminosity values. On the bottom right is a horizontal, 1 dimensional graph which was designed to plot this distance. It extracts the distance value out of the 2D graph and onto the 1D graph for an easier visual query. The hyperbolic curve, and consequently the 1D graph, have been made redundant by the 2D scatterplot visualisation and have since been removed. The 2D illustration of the 'frontier', however, has been kept and a slider for the FA value has been included to interact with and observe the change in Luminosity values between the plate concentrations of FA. The highlighted point on the scatterplot is associated to the highlighted cell on the 3D visualisation as being the most optimum FIC index to Luminosity value, and illustrates the use of colour highlighting to map points on the scatterplot to cells on the plates. In the end, we decided against including the 1D chart and the 'frontier' values as they were easily discerned from the existing charts and just added noise to the existing data. ### Walk through of Current Design #### Overview The design should help the visual queries by composing the different diagrams in such a way that extracting visual information is easy. Inappropriately placed diagrams can compete against one another for visual attention and lead the eye away from critical data. Viewer's of film and animation generally require three seconds of exposure to a shot before understanding what's happening in it. Similarly, the design should allow the user to grasp the visual queries after three seconds of exposure to it, including how to interact with it. A full screen shot of the design is present in Figure 14.
    ![alt text][design-final] **Figure 14**: Final implemented design
    On the top left is a heat map representing an individual plate. The more red a dish is, the higher the measured luminosity. The more black it is, the lower the measured luminosity. One can filter out ranges of cells for concentrations of INH and RIF using the filters alongside those axes. On the bottom left is a 3D view of all heat maps for all the plates. The filter on the right allows you to chose the plate highlighted for display on the top left. On the right is a scatter plot showing the efficacy of the various combinations. Each point is the FIC index of a drug and its luminosity. On the right, you can filter out points with luminosity between a certain threshold by moving the range slider. #### Mouse Interactions The mouse is the only form of interaction with the web page. Since it is a pointing device it is only able to focus on one point at any give time which could be problematic if the diagrams were isolated components - no visual relationships could be drawn to connect the information in the three diagrams. It was therefore necessary to highlight the pieces of information which related to what the user's mouse was focusing on at any given point in time and on any of the diagrams. We made use of mouse hover to identify which elements to highlight, and special care was taken with the implementation to make sure that all the components would respond to this event at the same time. In Figure 15, we can see this in action. On hover on either of the 2D plots, one gets a tool tip box showing the full information for that point. That point is then highlighted across all three diagrams. This is done using an animation changing that elements opacity, allowing the user to pick it out due to motion without sacrificing the information provided by its colour.
    ![alt text][interactions] **Figure 15**: Highlighting the combination which was most effective.
    #### Filters The 2D scatterplot is very dense, containing points for every cell on all the plates. Making matters worse, most of the points are clumped together. This was our initial justification for filters: The user needed to be able to filter out ranges of data which were not relevant. The filters were necessary to assist with the visual queries, and should not be disconnected from the visual associations already provided by the diagrams. We chose to use range sliders to align with the axes and make use of their existing labeling and visual association.
    ![alt text][design-axes-label-association] **Figure 15**: Using the filters to limit the data shown. Here we've filtered luminosity using the rightmost slider to eliminate combinations that did not inhibit TB growth as well as using the sliders on the heat map to limit our search to the higher concentrations.
    #### Answering Queries *Which drug combination is the most effective?* This can be answered by finding the point with the lowest FIC Index that inhibited drug growth. Here, this means the leftmost point on the scatter plot that doesn't have a luminosity of 65000. *What, if any, drugs interacted antagonistically?* These are all points with a FIC index of greater than 1 that have a luminosity of 65000. You can read this straight off of the scatter plot. *Which drug pairs were the most effective?* Since drugs are paired according to slices on the plates, you can read this off of the 3D visualisation, drilling in using the heat map. Alternatively, you can filter the data down to drug pairs using the filters and compare using the scatter plot. *Which drug was most effective by itself?* Here, you can filter out the other drugs using the filters and examine a drug individually using any of the diagrams. *For a set concentration for a pair of drugs, what is the lowest dosage of the remaining drug such that it still inhibits the growth of TB?* Use the filters to pick your concentrations and then use the heat map to give an overview of the efficacy and the scatterplot to give quantifiable data. *As we increase the concentration of a drug, how does that generally affect the performance of the other drug combinations?* Here, you can iterate through the plates and view the affect on the heat map for FA. For the other combinations, you can scan through the different levels of the 3D visualisation. ### Motivation for Design #### Visualisation Design We have three separate visualisations: a heat map, a scatter plot and our 3D plate heat map. Here we justify the inclusion of each. We had two broad classes of visual queries: low level and high level queries, with the low level queries more important than the high level. The low level queries involved quickly finding combinations that showed synergy and antagonism, the high levels one to find patterns in the data. The low level queries required being able to see all the data in way that allowed you to get the exact values. We wanted to use spatial positioning to show this as we're very good at comparing the relative positions of points in two space. This meant using a scatter plot. In order to do this, we have to reduce the dimensionality of our data which is why we reduced the concentrations to a FIC index. This had the advantage of making evaluating the efficacy of drug combinations easy. We decided to use symbols here as suggested in class to make it easier to determine what plate the data was from to further link the data to the physicality. We decided against looking into altering size and shape of the points on the scatter plot, as we were able to encode all the data effectively by converting the concentrations to a FIC Index. We also decided against highlighting the best point, as that visual query became trivial on the scatterplot with a FIC Index. The scatter plot did not exist in isolation however and had to be connected with the plate based visualisations. To do this, we coded each point with colour and, in response to feedback in class, a symbol to indicate which plate it belonged to. We chose a set of symbols that were highlighted in lectures as being visually distinct and popular to make it easy for our users to discern the plate information from the points. Further, the interactive highlighting across the three visualisations makes it clear which points are being hovered over. For the high level queries, we needed a way for the user to be able to quickly discern patterns in the data. We thought that using colour for this would be effective - although we're bad at discerning relative ranges of colours, we're good at identifying different blocks of similar colours. As our data is mostly binary (the drug either worked or it didn't), you don't have to discern between more than a handful of colours if the luminosity for a point is encoded as a colour scale. Therefore a heat map seemed like a valid way to visualise the data. We chose a colour scale that had been verified as being successful in quantifiable health visualisations [10] - a red to grey heatmap. As pointed out in class, a powerful addition to the inclusion of these visualisations would be the ability to filter. This allows the same visualisation to cater for a large array of visual queries while still remaining effective for the most important ones. In order for this filtering to be effective, we had to ensure that the user knew what data was removed else the filtering becomes unintuitive. To do this, we implemented a suggestion made in class: we implemented grid lines on our plates diagram showing clearly that the points were missing. #### Layout The visualisation is constrained to being viewed on a web page, and the user would expect a 2D layout divided into a grid. The layout and sizing of cells in the grid make up the key features of the design, and are instrumental in leading the eye to important visual information. The Golden ratio is well known in painting for leading the eye into the most interesting parts of the painting and holding the viewer’s attention. This is also known as the ‘Rule of thirds’, and for this reason both the initial design and the final implementation honour this rule by breaking the grid up into thirds, as seen in Figure 16. Elements with a portrait layout (i.e. are taller than they are wide), such as the 3D stacked plates, can be used to take up a third of the horizontal space and at least two thirds vertical space. Similarly, Elements with a portrait layout (i.e. are wider than they are tall) can be used to take up two thirds of the horizontal space and at least a third of the vertical space. Elements which are square in size can be used to fill in remaining space. In order to make such an arrangement the elements needed to be analysed for their most appropriate orientation. The 3D stacked plates would certainly only work in a portrait layout, while the 2D scatterplot was more flexible in that it could either be used in a square or a landscape layout. The sliders are the most flexible in that they can either be vertically or horizontally aligned or even stacked next to one another to form a square layout. The 2D plate diagram could be used as a square or rectangular layout. With these orientations in mind, we considered the importance of the visual information being displayed. The 2D scatterplot clearly had the most information and the largest value ranges. It is also used to compare and determine the most efficient point from the test, and needs to be very accurate and usable. The 3D stacked plates gave an overall, physical illustration of all the plates in the test, and the 2D plate gives similar information but in more detail. We chose to emphasise the 2D scatterplot by maximising its grid space and using a square layout, taking up two thirds of the screen space. The other two diagrams would take up the remaining third, and the filters - being most flexible - would fill in. See Figure 16.
    ![alt text][design-rule-of-thirds] **Figure 16**: Rule of thirds used in grid
    The sliders were labeled by the variables which they influenced, these are: The INH concentration, RIF concentration, Plate number, and Luminosity filters. Coincidentally, these ranges each appeared only once across the axes of the three different diagrams. These axes were already labeled, and the user would have established an association with them. It made sense to position the filters such that their interaction was described by the visual association to the axes. Care was taken to place the filters on the opposite side of the axes so they would not compete for attention of the axes’ labels. ## Analysis of Design ### Strengths The strengths of the design have been covered in depth in the preceding sections, so we will only briefly highlight them here. The heat maps allow one to simultaneously get an overview of the entire data set at once as well as drill into some detail. This is further enhanced by the filters which allow one to remove unnecessary detail and focus on the aspects of the data one wants to examine. Our scatter plot allows one to very quickly answer the most important visual queries a researcher wants to know: is there synergy or antagonism in this assay. It also allows a researcher to identify trends in the data far more easily than the existing visualisations used. ### Weaknesses The filters, without their labels, are possibly too simplistic. Although their association with the axes is very strong, it is not visually clear that the vertical slider positioned to the right of the 3D stacked plates actually selects the active plate which is displayed in the 2D plate diagram above it. The slider is also aligned next to the labels for the FA concentration, which can cause an association between itself and FA concentrations - instead of the plate number. This confusion could be avoided by introducing a plate number label next to the plate itself, and a plate number heading for the 2D plate diagram. While highlighting a point on the scatter plot is distinct, its corresponding highlighting of the points on the other visualisations is not incredibly clear. A better choice would have been to had added a border or a texture to make it clear that the point was highlighted rather than using opacity of a point. The colours of the 2D and 3D heat maps are close but not identical. This could cause confusion if the user is not expecting it. Unfortunately this was a hard problem to solve due to problems with 3D perspective and could not be done during the implementation of this assignment. Our simplification to a FIC index rather than having the individual concentration means that we're possibly losing some possible power. While this simplification allowed for quick answers to some of the most important visual queries, it does make it harder to make comparisons for individual drug combinations as one has to rely on the heat maps. We are also tied to the physical association of the data. A more flexible design would allow you to slice the data into sections using any of the drug concentrations while ours is limited to plates of FA. ## Conclusions After a number of designs, we found that the best way to visualise 4D data is to couple a 3D visualisation which gives a high level overview with two 2D ones in order to give large amounts of detail. The final implemented design enabled one to easily answer a number of the high priority visual queries but did not answer some of the mid to low priority ones without having to incorporate filtering. In order to be a successful, publishable visualisation for this type of data, more work is recommended. An important first step for future work for this visualisation would be verification that we have made a substantial improvement over the current techniques. This would probably take the form of a user evaluation and experimentation. In order to be widely used, the implementation of this visualisation would need to improved substantially. Right now, the design resides as a static visualisation in a github repo[6]. In order for this to be useful, one would need to at the very least - create a data pipeline that allows researchers to add their own raw data, have that processed and then visualised - allow researchers to store their results - provide an easy way for researchers to export the visualisations for inclusion in a publication - a "raw data" mode so that researchers can view the data in tabular or some such format. Due to time constraints, we were not able to explore the possibility of having the entire visualisation in 3D, having the user able to rapidly explore entirely in a 3D space. Future work could focus on using our 3D plate visualisation as a base for other 3D visualisations of this data, allowing the user to manipulate the camera and have other data projected in this 3D space rather than having 2D plots augmenting it. ## Work Split We split the work right down the middle, with each member having different responsibilities for each of the major areas of work. Jarred handled the design and implementation for the 3D visualisation while Steven was responsible for the design and implementation of the 2D visualisations. Jarred created the application scaffolding (a static JavaScript page) while Steven worked on the interactive framework (allowing one to interact with elements on the page). Jarred finalised the page layout while Steven worked on colouring for the heat map. Jarred wrote the sections on 3D visualisations while Steven did the sections of 2D, with both of us collaborating on the other sections. This ended up working surprisingly well - we each chose sections we were passionate about and we think that the work shows it. ## Appendix A: Calculation of FIC Index Here we give a brief summary of what FIC, MIC and FIC indices are and how they are calculated. The Fractional Inhibitory Concentration of a drug concentration is defined as the concentration of that drug divided by the Minimum Inhibitory Concentration (MIC) of that drug[7]. The MIC of a drug is defined as the lowest concentration of that drug such that growth of the microorganism it is targeting is inhibited[8]. The overall concentration of a group of drugs can be grouped together using a FIC Index which is the sum of the FIC values of the drugs in that combination[7]. If the FIC index of a drug combination of 2 drugs is below 0.4 and inhibits a microorganism's growth then it is termed synergistic; if the FIC index is above 1 and the microorganism's growth is not inhibited then the combination is termed antagonistic. To see why this is the case, consider a drug combination where two drugs each have a FIC of 0.5. This means that each by itself is at half the concentration normally needed to inhibit the growth of the microorganism itself. This means that together, with a FIC index of 1, they definitely should be able to inhibit the growth. If they can't, then they must be combating each other somehow and are therefore antagonistic. If we have two drugs which each have FICs of 0.2, then they're both far under what they would normally be required to inhibit drug growth but if they do so together, with a FIC index of 0.4, that would indicate that they substantially aid each others combating of the virus in a synergistic way. ## Bibliography [1] Figure S2 from Ramón-García, Santiago, et al. "Synergistic drug combinations for tuberculosis therapy identified by a novel high-throughput screen." Antimicrobial agents and chemotherapy 55.8 (2011): 3861-3869. [2] Warner, Digby. "Consultation concerning Visualisation Draft." Personal interview. 4 Mar. 2015. [3] Elfes, Alberto. "START - Case Studies - Automation Tool for Rapid Design of Space Systems." START - Case Studies - Automation Tool for Rapid Design of Space Systems. NASA. Web. 15 Mar. 2015. . [4] Wikipedia contributors. "Parallel coordinates." Wikipedia, The Free Encyclopedia. Wikipedia, The Free Encyclopedia, 14 Mar. 2015. Web. 15 Mar. 2015. [5] "Documentation." Visualizing Four-Dimensional Data. Mathworks. Web. 15 Mar. 2015. . [6] De Beer, Jarred, and Steven Rybicki. "Jarreddebeer/tb-synergy." GitHub. Github, 15 Mar. 2015. Web. 15 Mar. 2015. . [7] Hsieh, Michael H., et al. "Synergy assessed by checkerboard a critical analysis." Diagnostic microbiology and infectious disease 16.4 (1993): 343-349. [8] Andrews, Jennifer M. "Determination of minimum inhibitory concentrations." Journal of antimicrobial Chemotherapy 48.suppl 1 (2001): 5-16. [9] Meletiadis, Joseph, et al. "Defining fractional inhibitory concentration index cutoffs for additive interactions based on self-drug additive combinations, Monte Carlo simulation analysis, and in vitro-in vivo correlation data for antifungal drug combinations against Aspergillus fumigatus." Antimicrobial agents and chemotherapy 54.2 (2010): 602-609. [10] Borkin, Michelle, et al. "Evaluation of artery visualizations for heart disease diagnosis." Visualization and Computer Graphics, IEEE Transactions on 17.12 (2011): 2479-2488. [graphical-representation-of-checkerboard-assay]:img/graphical-representation-of-checkerboard-assay.png "Graphical representation of checkerboard assay" [drug-interaction-plates]:img/drug-interaction-plates.png "Drug interaction plages" [early-design-3d-bar-chart]:img/early-design-3d-bar-chart.png "Early stage design, 3d Bar chart" [early-design-plate-iterations]:img/early-design-plate-iterations.png "Early stage design, iterating through stacked plates" [early-design-stacked-plates_01]:img/early-design-stacked-plates_01.png "Early stage design, stacked plates 1" [early-design-stacked-plates_02]:img/early-design-stacked-plates_02.png "Early stage design, stacked plates 2" [early-design-3d-scatterplot]:img/early-design-3d-scatterplot.png "Early stage design, stacked plates 2" [sketch-plate-cells-scatterplot]:img/sketch-plate-cells-scatterplot.png "Early stage design, stacked plates 2" [sketch-layout]:img/sketch-layout.png "Sketch design for the layout" [early-implementation-plates-stacked_01]:img/early-implementation-plates-stacked_01.png "Early implementation, stacked plates 1" [early-implementation-plates-stacked_02]:img/early-implementation-plates-stacked_02.png "Early implementation, stacked plates 2" [design-axes-label-association]:img/design-axes-label-association.png "Association with filters and axes labels" [design-rule-of-thirds]:img/design-rule-of-thirds.png "Grid layout utilising rule of thirds" [design-final]:img/design-final.png "Final implemented design" [example-4d-visualisation_01]:img/example-4d-visualisation_01.png "Example 4d visualisation, 3d scatterplot with colour" [example-4d-visualisation_02]:img/example-4d-visualisation_02.png "Example 4d visualisation, 3d scatterplot with tails" [example-4d-visualisation_03]:img/example-4d-visualisation_03.png "Example 4d visualisation, 3d surface with colour" [example-parallel-coordinate-plot]:img/example-parallel-coordinate-plot.png "Parallel coordinate plot" [example-star-plot]:img/example-star-plot.png "Example star plot" [example-4x4-plots]:img/example-4x4-plots.png "Example star plot" [example-abc]:img/example-abc.png "Example star plot" [spreadsheet-data]:img/spreadsheet-data.png "Screenshot of spreadsheet data" [interactions]:img/interactions.png "Interactions"