Many dashboards and infographics are collages of images and visualizations. For example, the dashboard below consists of 32 visualizations on top of a background image. Each visualization below shows a single number, either as a bar or a circle. When a visualization contains a single number, we call it a Number Visualization. (Most traditional visualizations show multiple numbers; e.g., a pie chart has a number for each pie segment.)

They're now faster

The underlying technology we initially used to create the single number visualizations was relatively slow. The more you had on a page, the slower things got. They have now been rebuilt with faster technology.

The user interface has changed

The old user interface was a bit clunky. The new interface is more straightforward and more flexible. For more information see How to Create a Number in a Shape Visualization.

Migrating existing visualizations

Any dashboards you've already created will still work, and there is no need to do anything. However, they will be using older technology. If you want to switch to the newer visualizations:

1. Select each visualization
2. Press the Visualization button in the object inspector.
3. Choose your desired visualization in the Number group.

One of the dilemmas a researcher faces in building a report is to work out just how much detail to show.  Consider a typical cross-tab (in this case using a banner) that has lots of interesting significant differences, as indicated by the blue and red number formatting

Of course the key finding here is the Total or Net result, so we have to show it.   Rather than asking the audience to study the cross-tab in detail a common way of visualizing this type of a result is a bar chart with call-outs or labels to highlight the key findings:

This takes a while to set up in PowerPoint.  And in the case of a typical tracking study, where the results will change wave-to-wave, it can be a very tedious to update.   Not anymore - Displayr's visualization suite now contains an option to automate this type of chart, in seconds!.   See it in action in this short video:

Try Bar Charts with Skews now

Existing customers will quickly see how much time they can save using this new visualization. Anyone else can book a demo or take a free trial.

However you can make the process of creating inputs for visualizations, charting, and tables even easier by adding calculations or values directly to the data input drop-down.

Example 1 – Custom Selection from a complex table

Here is a typical table that has been created from some consumption data for fictitious fast-food brands.

Let’s say we are only interested in charting the data for Burger Chef and a direct competitor, Burger Shack.    One way to do this would be to:

1. Duplicate the question (to keep the original data and table intact)
2. Create the table
3. Hide all but the two columns in question, or, use the Tables > Selection function to create a subset of the table
4. Insert a visualization, say for a column chart
5. Hook up the table to the visualization.

This would work fine but it also adds some complexity – Step 1 adds over 100 new variables to the Data Set (some of the rows have been merged) and there are several interdependent elements in the workflow described above.

With the ability to ' Enter a calculation or value' directly in the drop-down, in combination with Displayr’s point-and-click formula creation, the process is a whole lot easier.   You can see this in action here.

We took that slowly so you can see the steps, but in less than 30 seconds we’ve achieved the required result, and with fewer steps.

Example 2 – Modifying a Variable before visualization

The same Data Set contains information on the estimated number of visits each brand attracted in a month.

Let’s say we wanted to express this as a weekly average, to conform with other market metrics (e.g. weekly sales).   Again, one way to do with would be to:

1. Select the variable set
2. Calculate > Divide, which creates a new copy of the variable set
3. Enter ‘4’ as the single number to divide by, as a proxy for weekly data
4. Insert a visualization, say for a bar chart
5. Hook up the table to the visualization

Using the ‘Enter a calculation or value’ function this can be done without the need to create any new variables, as shown in this video

Again, all the required steps have been condensed to a few simple ones, and in just a few seconds

Learn more about custom selections and formula creation in Displayr: Calculate Anything! or Boost your analysis with in-built Calculations

The possibilities for Displayr’s custom selection and formula creation functions are vast – now you can easily add such calculations to visualization drop-downs, the only limit is your imagination!

If you commonly use the more familiar Microsoft Chart types, once created in Displayr you can save them as a chart template and apply them to any similar analysis in the future.

• Simply select the desired chart and then choose: Chart > Save as Template.
• You can give the template a meaningful name.
• It will then become available to use for any selected charts: Chart > Apply Template.

If you are using Displayr’s Visualization function for more contemporary, customizable, and perhaps interactive charting, you can also easily replicate and reuse any formats that you are happy with. Once you have set up the desired format, simply:

• Make a copy of your chart using Home > Duplicate.
• Change the DATA SOURCE, the chart type, and other options for your new chart.

You can learn more about these features here:

https://www.displayr.com/how-to-reuse-chart-formatting-in-displayr/

But what if you already have templates set up in PowerPoint or other Microsoft Office tools and want to quickly export some data to those formats?  You can now do this with the help of the Displayr cloud drive.

Available (as an opt-in) to all licensed users, Displayr's cloud drive can be used for saving a variety of files. This includes things like images and logos (that you use regularly) and data sets (including data that is being regularly and automatically updated from another source). To this list you can now add Microsoft Office Chart Templates. These have a filename suffix “.crtx”.

Here is an example of a classic "Purchase Intent" chart, structured so that the positive responses are in generally what would be regarded as a positive color - blue, the negative responses are in a negative color - red, and neutral is in grey. The extremes of the scale are in a more intense tone of blue and red. This adds a nice visual element to the chart.

Assume we want to use this in a report for a new, similar study.  If you select the chart in PowerPoint and right-click, one of the menu options is “Save as Template”. From here you can name the template, save it, and it becomes available for later use.

To make this same template available as a template to export to in Displayr, all we simply upload it to the Displayr cloud drive. The cloud drive is accessed via the profile icon. Note: if you are a licensed user and cannot see “Displayr cloud drive” when you hover over this icon, you will need to contact Displayr support to enquire about enabling it: support@displayr.com)

All we need to do now is rough-in the analysis we need in Displayr, select the chart settings, and then export it to PowerPoint. Below is a default purchase intent chart for a new concept test study, created in Displayr in a few seconds.

We now select the chart, go to the “Properties” tab in the Object Inspector, and look for the POWERPOINT EXPORT options. When “Format” is changed to Microsoft Chart, “Export as” becomes active and if we select the drop-down, we can see our chart template is available at the top of the list.

To create a basic topline report, we duplicated this chart (with all its settings) and substituted the Row variable for another, “Purchase Intent – Priced”. All we need to do now is export the desired pages to PowerPoint:  Publish > Export Pages > PowerPoint > Selected Pages > Create new document. Here is my PowerPoint document, with a title page and the two slides containing the desired chart format.

So, while some reports may benefit from using Displayr’s inbuilt charting and visualization features, it is very easy to quickly leverage existing chart templates using the Displayr cloud drive.

How to Make a Column Chart in Displayr

What is a Column Chart?

Customizing Colors Within a Series on a Bar, Column, or Pyramid Visualization

How To Add a Line to a Column Chart

Using Sparklines to Show Trends in Bar and Column Charts

Technical Documentation: Small Multiples Column Chart

Histogram

How to Make a Histogram in Displayr

Technical Documentation: Histogram

Bar Charts

How to Create a Bar Chart in Displayr

Customizing Colors Within a Series on a Bar, Column, or Pyramid Visualization

7 Alternatives to Word Clouds for Visualizing Long Lists of Data

Why Pie Charts Are Better Than Bar Charts

Where Pictographs Beat Bar Charts: Proportional Data

Where Pictographs Beat Bar Charts: Count Data

5 Ways to Visualize Relative Importance Scores from Key Driver Analysis

Using Sparklines to Show Trends in Bar and Column Charts

Technical Documentation: Bar Chart

Technical Documentation: Pictograph Bar Chart

Technical Documentation: Small Multiples Bar Chart

Pyramid Charts

How to Create a Pyramid Chart in Displayr

Customizing Colors Within a Series on a Bar, Column, or Pyramid Visualization

Technical Documentation: Pyramid Chart

Line Charts

How to Create a Line Chart in Displayr

Using Sparklines to Show Trends in Bar and Column Charts

How To Add a Line to a Column Chart

Technical Documentation: Small Multiples Line Chart

Time Series Graph

How to Create a Time Series Graph in Displayr

2 Ways to Smooth Time Series in Displayr

Smoothing Time Series Data

Technical Documentation: Time Series Graph

Area Chart

How to Make an Area Chart in Displayr

Technical Documentation: Small Multiples Area Chart

Pie and Donut Charts

How to Create a Pie Chart in Displayr

What's Better Than Two Pie Charts?

7 Alternatives to Word Clouds for Visualizing Long Lists of Data

5 Ways to Visualize Relative Importance Scores from Key Driver Analysis

A Pie Chart for Pi Day: The Data Scientist Pie Eating Challenge

Why Pie Charts Are Better Than Bar Charts

Technical Documentation: Pie Chart

Technical Documentation: Donut Chart

Technical Documentation: Number in Donut

Radar Charts

How to Make a Radar Chart in Displayr

Technical Documentation: Radar Chart

Technical Documentation: Small Multiples Radar Chart

Scatterplots and Bubble Charts

What is a Scatter Plot?

What is a Labeled Scatter Plot?

What is a Bubble Chart?

Using Scatterplots to Chart Trends in Displayr

Adding Logos to Scatter Plots in Displayr

Using Bubble Charts to Show Significant Relationships and Residuals in Correspondence Analysis

5 Ways to Visualize Relative Importance Scores from Key Driver Analysis

Labeled Scatter Plots and Bubble Charts in R

Technical Documentation: Scatterplot

Technical Documentation: Small Multiples Scatterplot

Density, Bean, and Violin Plots

How to Make a Density Plot in Displayr

How to Create a Violin plot in Displayr

Using Heatmap Coloring on a Density Plot Using R to Visualize Distributions

Technical Documentation: Density Plot

Technical Documentation: Bean Plot

Technical Documentation: Violin Plot

Geographic Maps (Cartograms, Choropleths)

How to Make a Geographic Map in Displayr

How to Set the Initial Zoom and Position of Geographic Maps

How to Plot Data on an Interactive Globe in Displayr

Building an Interactive Globe Visualization in R

7 Alternatives to Word Clouds for Visualizing Long Lists of Data

How to Build a Geographic Dashboard with Real-Time Data

Technical Documentation: Geographic Map

Technical Documentation: Small Multiples Geographic Map

Heatmaps

How to Create a Heatmap in Displayr

Too Hot to Handle? The Problem with Heatmaps

Making Your Data Hot: Heatmaps for the Display of Large Tables

Heatmap Shading on Tables and Charts

Using Heatmap Coloring on a Density Plot Using R to Visualize Distributions

Making Your Data Hot: Heatmaps for the Display of Large Tables

2 Rules for Coloring Heatmaps so That Nobody Gets Burnt

Technical Documentation: Heatmap

Box Plots

How to Create a Box Plot in Displayr

Technical Documentation: Box Plot

Venn Diagram

How to Make a Venn Diagram in Displayr

Technical Documentation: Venn Diagram

Sankey Diagram

How to Create a Sankey Diagram From a Table in Displayr

How to Create Sankey Diagrams From Tables (Data Frames) Using R

Creating Custom Sankey Diagrams Using R

Visualizing Response Patterns and Survey Flow With Sankey Diagrams

Using Colors Effectively in Sankey Diagrams

Decision Tree Visualizations using Sankey Diagrams or Charts

Technical Documentation: Sankey Diagram

Streamgraph

How to Create a Streamgraph in Displayr

Technical Documentation: Streamgraph

Bump Chart, or Ranking Plot

How to Create a Bump Chart (Ranking Plot) from a Table Using Displayr

Ranking Plots: Illustrating Data with Different Magnitudes

Word Clouds

How to Show Sentiment in Word Clouds using R

How to Show Sentiment in Word Clouds using Displayr

How to Show Sentiment in Word Clouds

7 Alternatives to Word Clouds for Visualizing Long Lists of Data

Using Text Analytics to Tidy a Word Cloud

The Best Tool for Creating a Word Cloud

Technical Documentation: Word Cloud

Pictographs

How to Create a Single Icon Pictograph in Displayr

How to Create a Repeated Icon Pictograph in Displayr

How to Create a Pictograph Bar Chart in Displayr

Where Pictographs Beat Bar Charts: Proportional Data

Where Pictographs Beat Bar Charts: Count Data

How to easily add custom icons in Displayr

Palm Tree Chart

How to Create a Palm Tree Chart in Displayr

Using Palm Trees to Visualize Performance Across Multiple Dimensions (Egypt's Scary Palm Tree)

Technical Documentation: Palm Trees

Sparklines

Using Sparklines to Show Trends in Bar and Column Charts

Moonplot

Moonplots: A Better Visualization for Brand Maps

Single Number Visualizations

How to Create a Single Icon Pictograph in Displayr

How to Create a Repeated Icon Pictograph in Displayr

Technical Documentation: Number

Tables

Customizing the Look and Feel of Tables in Displayr

How to Customize Tables You Can Format and Align at Will in Displayr

Make Beautiful Tables with the Formattable Package

We know that one size does not fit all. Within Displayr there is the option for you to add your own custom icons into your dashboard. For the more technically minded, the following blog describes how to add icons to dashboards using font awesome. For those less technically-minded, the rest of the blog discusses how to create custom icons using PowerPoint. And finally, how to insert them into a Displayr document as Pictograms with just a few clicks.

Where to start

First, you need to find an icon and you can do this by searching for one online or opening a blank PowerPoint document, and, in the menu ribbon, click on Insert > Illustrations > Icons. There are thousands of websites out there with icons. If obtaining an icon from an online source, do not forget to adhere to the licensing terms and conditions of the website that you get it from (which may include purchasing a license for use). Download or save your icon to your system in PNG (Portable Network Graphics) format to preserve the background transparency (jpg format removes transparencies and can distort the clarity of the icon). Back in PowerPoint, you can import the icon by selecting Insert > Images > Pictures.

To personalize the icon you can:

1. Group the icon with a shape(s)
2. You can change the color of the icon, maybe set the color to the theme of the dashboard
3. You can adjust the transparency

To group all objects together, the easiest way to select multiple objects on a slide is to hold down the Shift key and start clicking. Alternatively, to select objects that are hidden, stacked, or behind the icon, click outside the icon and drag the mouse over the objects, or you can open the Selection pane by clicking on Home > Editing > Select > Selection Pane. In the Selection Pane you can select, multi-select, show, hide, or change the order of objects. Then, if you right-click and select Group > Group to group the objects together. To Save the icon as a picture, select the icon and right-click selecting Save As Picture saving the file as a PNG. The example below shows how easy it is to customize images to create an icon.

Setting up in Displayr

In Displayr to create a custom single icon Pictograph select Insert > Visualization > Pictograph > Single icon. In the Format > Icons > Icon select (Custom Icon). Next, you can enter the URL to the image file you want to use in Icon URL. The following image-hosting site PostImage easily lets you upload an image and create a direct link to the image. Imgur is one of the most popular image-hosting sites. If your image is not hosted on a web server, you can use public Dropbox links.

One important point to note, unlike the built-in icons in Displayr, you will not be able to recolor the custom icons. To get around this, you will need to use images with different colors for the filled and base icons. As a result the images should be of the same size, but they can differ in more than color.

The custom icon shown above was created using the two icons created in PowerPoint below:

Please note, if no base icon URL is provided, the unfilled side of the icon will be blank.

Finally you can choose the Direction of fill for both built-in and custom icons. For the example above the Direction of fill was set to 'From left', other options include 'From right',  'From bottom', 'From top', and 'Radial'. The last option is particularly useful for circular icons.

With only PowerPoint and a few clicks, you can now create custom icons and import them into Displayr. Custom icons are not just limited to being used as pictographs, they can be used as buttons, labels, menus, and section headers.

Get started making your own custom pictographs in Displayr, or find out more ways to visualize a single number!

Example

For example, the column chart below uses boxes and filled circles to show statistical significance.

Worked example: adding arrows

There are two stages to adding annotations:

1. The table that is used to create the visualization needs to be modified to contain the relevant data for use in creating the annotations. In the table below, z-Statistics have been added to the table (by clicking on the table and selecting from the object inspector > STATISTICS > Cells: z-Statistics).
2. The annotations need to be added to, or instead of, data labels on the visualization, by Checking Chart > DATA LABELS > Show data labels (see below).

For setting up the arrows,

• Set Annotations (1) to Arrow - up 
• Type z-Statistic in the Data (1) field. You must type in something that is visible in the top-left of the table (i.e., in this case, either Column % or z-Statistic).
• An upward arrow occurs when the z-Statistic is above 1.96, so Show annotations for values is set to above threshold and Threshold (1) to 1.96.
• The same process is used for the down arrows, except with below threshold and -1.96.

Using letters for statistical testing

The process for using letters on statistical tests is essentially the same as with arrows, except that:

1. We add the letters to the table using either STATISTICS > Cells or Appearance > Highlight  Results > Compare columns
2. Data (1) is set to Column Comparisons 

Later in the post another example shows how to change all the letters to uppercase.

Borders/boxes, filled circles, empty circles, and shadows/smudges

In addition to arrows and text, it is possible to add a border around the labels, which appears as a box, filled and empty circles, and shadows (smudges). These are selected from Annotation (1). There are formatting options for controlling their size, colors, and line thicknesses. An example is shown at the beginning of the post.

In the example below, a scatterplot has been created from a table. The scatterplot was created by setting Chart type to Scatter and checking Inputs > DATA MANIPULATION > Input data contains y-values in multiple columns. The High and Low elements of the legend were manually added as shapes and textboxes.

Hiding labels

By setting Annotation (1) to Hide, rules can be used to hide annotations. For example, in the chart below, all non-significant labels have been hidden.

Creating custom statistics for annotations

All the examples so far have used existing tables and their statistics to create the annotations. However, it's possible to create new tables via R code.

The example below modifies a table called table.Preferred.cola.by.age.7, by making all the column comparisons appear as uppercase. This modified table is then used as the input to the visualization.

This last example creates a table, with a completely new statistic, called Comment and passes this through to the bar chart, with two annotations. Annotation (1) is set to Hide (to hide the labels) and Annotation (2) to Text - after label with Data (2) set to Comment.

Looking at the R code used to create the table with the comment, key features are:

• A 3-dimensional array is created called out (this is the required structure of a table for use with annotation). Note that this three dimensional array is a table, where there are multiple results in each cell of the table. In this case, the table has 12 rows and 1 column, where nrow(x) is the 12 rows of the table called table.Interview.Date (shown on the left). The first result in the cells of the table is % and the second is Comment.
• The Comment has been set to blank, except for July 2019, which has been set as New\ncampaign, where \n is the code for a new line.

Online tutorial

Click here to go to an online tutorial on adding annotations to visualizations.

Example

Step 1: Choose the shading that you want

Click on this link and it will open up a Displayr document showing the 12 heatmap shading designs. Select on the one you like and click Home > Copy. Then, go back to the tab that contains your Displayr document and press Home > Paste. When you do this a box will appear, with a red border.

Step 2: Hook up your data

Select the data you wish to use from the Data Sets tree, and drag it over the box, releasing it in the Rows slot. The table you create will now be shaded as per the design you chose. You can still format the table just like any other table (e.g., choosing different styles for the table, stat testing appearance, merging categories, etc.).

Step 3: (Optional) Turn it into a chart

Click on the table, and select Inputs > OUTPUT > Chart and your preferred type of chart. The chart will also be shaded using the same color scheme.

Further customization via Q

This link gives you a choice of 12 designs. Displayr's sister product, Q, allows you to create bespoke color palettes using 2 or 3 colors and also set target values for the different colors. If none of the 12 designs fit what you are looking for, please contact support@displayr.com to inquire about getting a copy of a table that suits your need.

Most charts and tables in Displayr contain footers, like the one below. These automatically update when the data changes. They also support the following functionality:

• You can click into these and edit them.
• You can select all their contents and delete them.
• You can restore them to their default state using Appearance > Reset (Caption).

These footers are useful in quickly-created reports, but are less useful when you are wanting to create something more custom. They suffer from some limitations:

• If the underlying data is updated, changes may be lost.
• If the underlying data is updated, the footer may not update (e.g., if you have typed Base is 300, then this will be remembered even when the data changes).
• When you have multiple charts on a page, the information is repetitive, ugly, and uses up valuable screen real estate.

Adding a sample size description

An alternative is to:

• Click Insert > More > Data > Sample size description. 
• In the Complete data variable field (shown on the right of your screen) select a variable. If you want to report the sample size for the entire data set, an ID variable is a good idea. Whatever variable is selected will be used to compute the sample size, based on all responses without missing values.

You will then get an output showing Base: total sample; sample size: 482. You can customize the wording and the formatting on the object inspector (in the right of the screen).

This will automatically update when you filter and weight the data. It can also be copied and pasted onto other pages.

For more information on how to customize these, please see How to Customize the Sample Size Description Widget.

In your Displayr document:

• Export > Embed > Update all. This causes all your most recent changes to be saved.
• Document settings > Version history > Download. The document that's downloaded as a QPack, and can then be opened in Q.
• Open the QPack in Q, modify the tables as desired
• Upload: Document settings > Version history > + Upload New Version.

The problem with this strategy is that if you or a colleague modifies your Displayr document while in the middle of doing these steps, you will inadvertently lose this work when you upload the new version. We find that less technical users make this mistake repeatedly.

Strategy 2: Downloading to Q, modifying, uploading, copying and pasting tables, charts, and pages

This next strategy is safer than Strategy 1:

• Export > Embed > Update all. This causes all your most recent changes to be saved.
• Document settings > Version history > Download. The document that's downloaded as a QPack, and can then be opened in Q.
• Open the QPack in Q, modify the tables as desired.
• In a new tab, go to the Documents page, click Upload and select the QPack.
• Use Home > Copy and Home > Paste to copy pages or objects on pages from the document with the newly-customized tables into the existing document.

Strategy 3: Cutting and pasting from an "examples" document

This strategy is basically the same as strategy 2, except that you create one big document with lots of examples of table customizations that you like in it. You can then just open it and use Home > Copy and Home > Paste. The post Creating Templates for Displayr Documents discusses how to do this for custom statistical assumptions and Automatically Sorting Tables and Charts in Displayr illustrates this process.

What is a quad map?

A quad map is market research jargon for a scatterplot which shows a series of attributes in terms of their importance to the market and the performance of one or more brands on these attributes.  The example below is for AT&T in the US Cell Phone market. The horizontal axis shows the performance of AT&T, based on ratings out of 5 by its customers. The vertical axis shows the importance of these attributes, computed using driver analysis (Shapley Regression). The term "quad" comes from the two-by-two matrix placed over the scatterplot, which explains the implication of of quad map.

How to create a quad map in Displayr

Step 1: Create a table showing performance

The first step is to create a table that shows the performance by attribute, such as the table shown below.

Step 2: Create a table showing importance

The next step is to create a table showing the importance of the drivers. This table can either be a traditional table, or, the results of a regression or driver analysis. The example below is from a Shapley Regression.

Step 3: Create a scatterplot

Then:

1. Insert > Visualization > Scatterplot
2. In X coordinates select the performance table (or, select the importance table; either one is fine).
3. In Y coordinates select the importance table.
4. In Chart > APPEARANCE select Show Labels to On chart.
5. Format it as you want. In the example above I've drawn boxes and text over the top of the visualization.

Step 1: Estimate a choice model with a numeric price attribute

The starting point is to estimate a choice model (Displayr: Insert > More > Conjoint/Choice Modeling > Hierarchical Bayes; Q: Automate > Browse Online Library > Conjoint/Choice Modeling > Hierarchical Bayes). When doing this, the price attribute needs to be set up as a numeric attribute. If you haven't done this before, please be aware that the scale of the price attribute is not readily comparable to the other attributes. In the example below, for example, note that the price attribute seems to have very little variability compared to the other attributes. This is because the distribution of a numeric variable is for its coefficient (don't be concerned if you don't understand this; the key bit to appreciate is that it is OK that its distribution appears much smaller).

Step 2: Save the utilities

Add new variables to the data set using Insert > More > Conjoint/Choice Modeling > Save Variables(s) > Individual-level Coefficients ( in Q: Automate > Browse Online Library > Conjoint/Choice Modeling > Save Variables(s) > Individual-level Coefficients).

Step 3: Modify the R code of the utilities

When you click on one of the variables that is created in step 2, you can see the underlying R Code, and it will look something like this (in Q,right-click on the variable and select Edit R Variable):

input.choicemodel = choice.model
if (!is.null(input.choicemodel$simulated.respondent.parameters)) stop()
flipChoice::RespondentParameters(input.choicemodel)

It can be changed to compute WTP with a simple modification of the last line and addition of a fourth line:

input.choicemodel = choice.model
if (!is.null(input.choicemodel$simulated.respondent.parameters)) stop()
x = flipChoice::RespondentParameters(input.choicemodel)
sweep(x, 1, -x[, "Price"], "/")

Step 4: Creating tables or visualizations

To create a table showing the average WTP for each attribute level, drag the variable set onto a page, and then using STATISTICS > Cells select Median and remove Average (as the mean can be a bit misleading with WTP data). Then, hide the Price attribute by selecting the row and using Data Manipulation > Hide in the ribbon. An example is shown below. You can then plot this if you so wish.

You can create your template by going to Insert > Utilities > Visualization > Create Template. This will then give you a preview of all the color, chart, and number font styles that you can set for your visualizations.

Setting your colors

We will start by defining the color palette. You can choose from several predefined or custom color settings. I will cover the custom color options for this example.

Under the Inputs tab on the right, the Custom palette setting allows you to enter the hex values of the desired colors, e.g., #ff0000 (red) and #008040 (green). This, in turn, updates the preview to show the alternating colors I selected.

The Custom gradient setting, in contrast, allows you to transition from one color to another by setting the start and end colors. You also have more advanced options for specifying hex and RGB values under the color picker's More Colors option. By keeping the same colors, the preview will now return a color gradient from red to green.

A further custom setting is Named colors. This is designed for when you want to use defined colors for specifically named items in your visualization, e.g., a brand list.

To use this setting, you should do the following:

1. Set the default color for unnamed values
2. Change the Specify colors using drop-down if necessary – I will keep the color picker option here
3. Enter the name of the first item you want to color in the 'Color name 1' field
4. Select the color using the 'Color 1' color picker
5. Repeat for 'Color name 2' and so on until you have defined all items

Above I have chosen custom colors for 'Brand 1' and 'Brand 2', respectively. This means any visualization using this template that has these labels will be colored accordingly.

Setting your chart and number fonts

On the Chart fonts tab, you can set global font styles or make changes specific to various chart labels, such as data labels, legends, and X and Y axis titles.

Below I have updated the global font size, changed the title font to 'Century Gothic' and blue, and adjusted its font size.

The Number fonts tab includes similar options, but these are for single number-based visualizations.

Using the visualization template

Below I have a simple area chart using our small multiples feature, which compares the performance of two brands over the year.

I will now show you how to apply a template to this visualization. If you select your visualization, on the right, you need to do the following:

1. Under Chart > APPEARANCE > Use template, select your template.
2. Under DATA SERIES > Color palette ensure Default or template settings is selected.

Once calculated, your visualization will now apply the color and font settings from your template. In this example, I have used the Named colors setting to specify the brand colors.

This functionality also allows you to create multiple templates. It's just a matter of linking the appropriate template to your visualization. Furthermore, any update to your template settings will flow through to all visualizations that use this template.

Example demand curve

Below is a demand curve from a choice-based conjoint study of the chocolate market. It shows preference share for a 2-ounce Hershey milk chocolate bar.

Preparation: Creating the model and simulator

Before computing the demand curve you need a simulator. The most straightforward way of doing this is to create a model using Insert > More > Conjoint/Choice Modeling > Hierarchical Bayes, followed by Insert > More > Conjoint/Choice Modeling > Simulator.

Manually creating the demand curve

The simplest way to create a demand curve is to manually run each scenario of interest in your simulator. Let's say we wanted to create the demand curve for Hershey. We would set each of the alternatives to the desired attribute levels, with Hershey at the lowest price point, and make a note of Hershey's market share. Then, we would increase Hershey's price to the next price point and make a note of that share, and so on. You can then use Home > Enter Table to create a table of these data points (with price in the first column and market share in the second) and hook it up to a visualization.

Code based-creation of a demand curve

There are several situations where manually creating the demand curve is a poor solution, including:

• When you want to create the demand curve in a dashboard so that it automatically updates when the user filters the data or changes the attribute levels of the alternatives.
• Where there are a large number of alternatives to be simulated (e.g., models of SKUs).
• Where there is a numeric price attribute, and you want to test lots of price points.

In such situations, it is often better to use code to create the demand curve.

Step 1: Duplicating the code used to create the simulator

When you create a simulator automatically in Displayr it creates an R Output below the simulator that contains the underlying code that calculates the preference shares. In the screenshot below, I've selected it (hence the outline). Step 1 is to click on and press Home > Duplicate to create a copy of the R Output.

Step 2: Modifying the code

Inspecting the code

You can inspect the underlying code in the copied R Output by viewing Properties > R CODE in the Object Inspector. It will have a structure like the code below. In this example:

• Lines 1 to 4 describe the scenario that is being simulated, with one row for each alternative, and all four alternatives grouped as a list within a scenario list.
• Looking at Alternative 1, we can see that the level for Brand is set to cBrand.1, with the blue shading telling us that this is the name of something else in the project. In this case, the something else is the control on the page where the user selects the level of the brand attribute.

If you hover your mouse over any of the references to the controls, a box will appear to the left telling you the current selection. In the example below, we can see that the first alternative's price has been set to "$0.99".

Modifying the code

We can modify the code to insert other attribute levels. For example, if we replaced cPrice.1 with "$0.99", we would get the same result as changing it in the price control. However, if we change the R code to "$0.99", the code will no longer use the price control and will instead always use $0.99 as the price for alternative 1.

The code below is a modification of the code above, but it computes the demand curve. The key aspects of the code are:

• Lines 1 to 4 are identical to those that have been automatically created by the simulator bar changing the alternative list parameters to c.
• You can copy and modify Lines 5 to 13 as described in the remaining steps.
• The prices for the simulator are in line 5.
• In lines 10 and 11 replace "Alternative 3" with the name of the alternative that you are wanting to compute demand for. As shown in the screenshot below, in this case study, Hershey is Alternative 3.
• Replace hershey in line 13 with the name of the brand you are interested in.

Step 3: Creating the Visualization

You can now hook up your new table to a visualization from the Insert > Visualization menu.  To create the area chart from my example above, click Insert > Visualization > Area and select your R table in the Inputs > DATA SOURCE > Output in 'Pages' drop-down in the Object Inspector.

There are a few different ways to create basic tables in Displayr. By using our new Autofit option (which you can find in the Object Inspector of the Insert > Enter Table feature), you can customize nearly all aspects of formatting, such as fonts, borders, colors, spacing, and alignment.

Making a custom format table

The below assumes you have a table already made. From here, you will hook it up to an object that becomes a new table that you can format.

1. Click Insert > Enter Table. This creates a new empty object on the screen.
2. With the new empty object selected, in the Object Inspector to the right, under Inputs > DATA SOURCE, specify the original (unformatted) table
3. Check Inputs > OUTPUT > Autofit (as per the picture above)
4. Use the Format tab to customize the options

Aligning a table to a visualization

A common situation is that you want to resize your table so the columns align with a visualization. So rather than having the original table underneath, you can use the formatted table to align underneath.

In the example above, I removed the x-axis labels by unchecking the box at Format > COLUMN HEADER > Show column headers. I also manually set the column widths under Format > COLUMN HEADER > Column widths.

For my example, I am going to take a simple column chart showing the percentage of respondents eating Burger Shack in the previous month and overlay a line for the average number of times those respondents ate Burger Shack during the same time period.

Setup

You will need to have a column chart created using Insert > Visualization > Column Chart. In the column chart below, I am showing the percentage of respondents who ate Burger Shack during the previous month. To learn how to create a column chart, click here.

Adding the line

To add a line to your column chart:

1. Create a table for the data you want to show in your line overlay. Make sure your x-axis variable is in the rows. Below, I have a table showing the average number of times respondents ate at Burger Shack during the previous month.
   
2. Click on the column visualization and select the table from step 1 under Inputs > DATA SOURCE - SECOND Y AXIS > Output in 'Pages'.
   

You will see the line show up over-top of your columns on the graph. You can then use the Chart menu in the Object Inspector to further customize your visualization.

The bar chart below is the default bar chart created by Displayr. Color is merely adornment on this chart; it communicates nothing. It is boring!

Using color to focus

This next chart does a much better job. It uses color to draw the user's eye to a feature of the data.

To do this in Displayr and Q, set Chart > Data Series > Color palette to Custom palette (color pickers), check the option Multiple colors within a single series, and manually set the colors.

Using color schemes

The next level up is to specify a color scheme of some kind. In this case, I have used a series of blues. This chart is a terrible visualization, as the color is being used for visual adornment in a way that can only undermine the true pattern in the data. If the data was sorted, it would be a much better visualization.

In this visualization, I've used Blues, dark to light as the Color Palette. There are lots of other color scales to use, and you can also provide custom ones.

Making the colors conditional on data

My favorite application of this new feature is shown below. Here the darkness of the blue is proportional to the values (i.e., employing redundant encoding).

Rather than use Blues, dark to light, I've instead set a Custom Gradient from white to blue, and I've specified that the color should be proportional to the values in the table, which is done by selecting the table in the Values selector (shown below). An entirely different series of data could also be used (e.g., the length of the bars could relate to attitude, and the colors to brand usage).

When combined with small multiples, you can get even more value from this feature, as it makes for effective redundant encoding, as in the pyramid chart below.