Jump to content
  • Visual Design Best Practices for Spotfire®


    Dashboards need to be carefully designed to be visually appealing and clearly deliver information to their end users.  The materials gathered in this article will help you design beautiful and effective Spotfire analyses.

    Introduction

    Even the most sophisticated Spotfire® dashboards, addressing all technical requirements of the customer, will not be effective unless their visual design is well coordinated. Dashboards need to be carefully designed to be visually appealing and clearly deliver information to their end users.  The materials gathered in the subpages will help you design beautiful and effective Spotfire analyses.

    Dashboard Design Best Practices Examples

    LARGE TITLES on each page:

    image.png.9b9dcbeb90230f816bd340f459472de1.png

     

    Calculated values in text area to display KPI`s:

    image.png.3cd0004a99f56cfc2a5d05303c3cf208.png

     

    DARK THEMES for simple dashboard:
    image.png.6023f919273279d0c3bbdd882916d0b1.png

     

    COORDINATED COLOURS:
    image.png.7956f2835b87ef6e177beafdda9abd05.png

     

    CUSTOM DESIGN for customer:
    image.png.e61a5f878cb10bef5f9346d067f3245c.png

    image.png.e4b63b0b7b5c80fc53572846b8314809.png

    image.thumb.png.8d766e298090630ccc424d86879cfdc4.png

    image.thumb.png.c65dd4f09050e3f3b29e06a0b48d8411.png

     

    DRILL DOWN from TOP RIGHT TO BOTTOM/LEFT:
    image.png.6803b4545c4441c775ca22ffa7d77f1f.png

     

    Relevant Filter in text areas:
    image.png.0c746895f563e989f096a60c1711f4d2.png

     

    BOOKMARKS as a guided through the analysis:
    image.png.d1d436425603e3c67e18153b76a3a135.png

     

    HTML to align controls in text areas:

    image.png.3500eff0ee05f4ab24e99e919da88282.png

     

    Custom Themes

    You can download Custom Themes and apply them to your Spotfire Analyses.

    Click on the zip download button at the bottom of this page to access these files.

    You can then apply the theme to your Spotfire analysis through View -> Visual Theme -> Import Theme from File...

    Creating a custom theme is only possible with the Analyst Client. As a business author, you can change the themes between the defaults white or black; however, if the custom theme was created by the analyst, you have the option custom as well.

    Gray Piece of Paper Theme

    image.png.c60f8be599415e3909596cbae8d7f43c.png

     

    Burgundy Piece of Paper Theme

    image.png.558941fa23938d20dad0d699e7a63a51.png

     

    Gray Tile Theme

    image.png.568611e14f1cc2bc723c78d41b1438ae.png



    Gray and Gold Tile Theme

    image.png.eceeddb56a033b8b5af92390cbbb722c.png



    Dark Blue Piece of Paper Theme (Light)

    image.png.17b66e614704a74c6e5c771d22779926.png

     

    Black Tile Theme

    image.png.593261603d244df0a8f9e2c7ac02e440.png



    Gray Tile Blue Title Theme

    image.png.14db794c8064db4cfadc145b7236438f.png



    Dark Blue Piece of Paper Theme (Dark)

    image.png.497732940a8c01a33ba616853fa2a210.png

     

    Black Piece Of Paper Theme

    image.png.92f02b0db6df99ff4c0457dea1b25aca.png

    Color Schemes

    You can download pre-prepared color schemes and apply them to your visualizations in Spotfire.

    Click on the zip download button at the bottom of this page to access these files.

      CATEGORICAL:

    image.png.ad8554d0d9ca157475b0f83a8854e866.png

    image.png.60fecdb98c9b59d985f23e655803f9a2.png

    image.png.fb226cf80a0bbc289c78928a061006d9.png

    image.png.437fbac763c0e3557208ea3a54fb3df4.png

    image.png.de3df42d069ec3086173cf9e4c88d991.png

    image.png.9d9c607f8b1cbee916f4f0b5d7bbc2b0.png

    image.png.063da1dd2ef0cd8045d4b22a2e723721.png

    image.png.42a5c6f7caeff731b6f049e856269e60.png

    image.png.70a3a70e76ccf09b7bd572cfbf5198b3.png

    image.png.d5697e1038dafad1aa81df5956e0e82c.png

     

      CONTINUOUS:

    image.png.7e0fec477c6a233033f26b1f245078f8.png

    image.png.1da4ada512d44f33be1ed87903fccb1b.png

    image.png.13826ccaab34ded5289ae617564d8264.png

    image.png.3c4e74a2b12ee84c57678c4714ed6c3e.png

    image.png.1e8915f8d6db57cebb01464094743b56.png

     

    For instructions, visit the following Spotfire help pages:

    • Color Schemes Overview: The entire setup of colors for a visualization is referred to as its color scheme. Which colors and threshold values you choose, as well as the color mode you select, are all part of a visualization's color scheme. The current color scheme of a visualization can be viewed in the legend, and on the Colors page of the Visualization Properties. This is also where you edit a color scheme.
    • Opening a Color Scheme: You can open a color scheme that has previously been saved to disk or to the library. You can also apply a color scheme from another visualization in the analysis, or open a document color scheme. The color scheme must be in the same scale mode as the visualization in which you want to use it.
    • Applying a Color Scheme to Another: When you have set up a color scheme for a visualization, you can apply it to another visualization, provided that the two visualizations are colored by a column in the same scale mode.
    • Saving a Color Scheme: You can save a color scheme for later reuse or to share it with others. If you save the color scheme to disk or in the library, you can use it in other analyses. If you save it as a document color scheme, you can use it again within the analysis. A document color scheme can be selected for a specific visualization in the analysis from the Colors page of the visualization properties. You can also select it as the default color scheme to use for a specific column as well as for new visualizations in the analysis. See Column Properties – Properties, Column Properties Descriptions, and Options – Visualization to learn more about using default color schemes.
    • Coloring Overview

     

    HTML in Text Areas

    Using HTML in Spotfire Text Areas is a great way to enhance the look and feel of your dashboards.

    Assets

    Examples

    Title pane with KPIs: in this example, an HTML table is used to control the layout of the top pane of the dashboard, including a title, KPIs and a slider.

    Table border set to one:

    image.png.d691182b260931d9add8ac64023506f6.png

    HTML lookup (click on the image to zoom in)

     image.png.05fa40ff587bf5f0540c5cde239d5b4f.png

     

    Aligned Text and Controls: In this example, an HTML table is used inside a text area to align text and Spotfire controls for a more readable and user friendly format.Also, a cellpadding attribute is used inside the  tag to control the distance between text and controls and the Text Area borders.

    Before:

    image.png.1a78194451a02a00c2b93669828c3306.png

    After:

    image.png.f4ffb2b7c7194e98f1f633a06c0877a5.png

     

     

    This customized html table is a good example how to put and align dynamic labels in a table.

    image.thumb.png.783868a2cad6e97f5ce69f65b8547703.png

    Scorecard Layout: This HTML code is used within a text area to align text and a Spotfire control in the middle of the box.

    image.png.2530454733cb326956fb8f44ca83646d.png

    You can use other techniques such as Div and Section tags which are more commonly used on web pages. In combination with styles such as float or flex you can achieve modern layouts in a text area: https://www.smashingmagazine.com/2018/05/guide-css-layout/

     

     

    Spotfire Design Cheat Sheet

    The Cheat Sheet is a one page document with checkboxes that will help you design beautiful, user-friendly dashboards. Please download the pdf version or view the image below through resources.

    image.thumb.png.0c83e240c908132392f296329b5f2f3f.png

     

    Videos

    From Data to beautiful dashboards (Best practices for creating customized, beautiful, and effective dashboards (with Eszter Takacs))

     

    Recommended Reading

    image.png.29a8cc726de2b721de532947fce55b82.png

    Michael O'Connell

    Frank E Harrell Jr

    • (2014), PRINCIPLES OF GRAPH CONSTRUCTION

    Blogs

    Edward Tufte

    • R (2001) [1983], The Visual Display of Quantitative Information (2nd ed.), Cheshire, CT: Graphics Press, ISBN 0-9613921-4-2.
    • (2001b) [1990], Envisioning Information, Cheshire, CT: Graphics Press, ISBN 0-9613921-1-8.
    • R (1997), Visual Explanations: Images and Quantities, Evidence and Narrative, Cheshire, CT: Graphics Press, ISBN 0-9613921-2-6.
    • (2003), The Cognitive Style of PowerPoint, Cheshire, CT: Graphics Press, ISBN 0-9613921-6-9.
    • (2006), Beautiful Evidence, Cheshire, CT: Graphics Press, ISBN 0-9613921-7-7.

    Stephen Few

    Jeff Johnson 

    • (2014), Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design: Morgan Kaufmann, Second Edition,  ISBN-13: 978-0124079144.

    Dona M. Wong

    • (2010), The Wall Street Journal Guide to Information Graphics: The Dos and Don'ts of Presenting Data, Facts, and Figures: W. W. Norton & Company; 1St Edition edition, ISBN-13: 978-0393072952
     

    us_homeless_dark_blue_paper_dark.dxp_.zip

    supported_html_in_the_text_area_in_tibco_spotfire_6_0.pdf


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...