Visualization design tutorial:
In this tutorial we will show you the various options and controls that are included in the Visualization Design panel of our Datasketch Apps. This way, you will be able to use the options that best suit your needs and discard those that you think do not work well for your charts or maps. Let us begin.
Titles
Title
The title in a data visualization is the phrase or word that identifies the subject of your visualization and gives a hint on what it is about. It is usually a very short title that collects the main attributes of your topic. Here are some examples:
Brazil Development Map
World population by country
Top 10 most read books in the world
Subtitle
Subtitles are phrases that can be added as secondary or supplementary information. Of course, if the title is clear enough and you do not need additional information, it is not necessary to use it.
Caption
The caption works as a description of the source from where you got the data you are visualizing. It usually appears on the left or right side at the very bottom of the graph. It can also provide information on the date the data was collected or last updated.
X axis label
The X axis labels are the text boxes that appear next to the horizontal axis of your chart, which usually corresponds to the categories in your data.
Y axis label
The Y axis labels are the text boxes that appear next to the vertical axis of your chart, which usually corresponds to the values of the variables in your data.
Tooltip
Tooltips are small text boxes that appear when hovering your pointer over the graph. These can be edited by writing the name of your variable inside two brackets {}.
Graph style
Theme
The theme refers to the overall graphic styles that will be applied to the visualization that you are designing; it modifies its external appearance, from the color of your chart’s background, to the position of your logo or even the font in which texts will be displayed. There are usually two options: one suited for light backgrounds and one suited for dark ones.
Background color
This option sets the background color of your entire chart, which is white by default. With our apps you can choose the color of your preference by clicking on the circle that appears below the title.
Palette
Each theme has a color palette designed specifically to work optimally with its background color and overall graphic style. It used to show the categories or the values of your data. However, you can change these colors by modifying the various color circles in this section, if you wish.
Datalabels
Show data labels
Data labels are used to display the actual values of your data on the chart. You can change the number format of these labels and increase or decrease the size of the font.
Number format
The number format allows you to adjust the way you want your numerical values to look on your charts. This format accepts positive numbers, in decimal and standard type.
The default application will show you this value: 1,234.5, If you need your numerical values to appear in standard format with a point, leave them as they appear by default in the application. If you need them to appear in decimal format, remove the number 5 and the point.
Font size
This option allows you to set the font size (in pixels) for the data labels.
dataLabels_color
You can also choose the color of your data labels by clicking on the circle below this title.
Outline
If you feel your data labels are not visible enough, you can consider adding a white border to these texts by clicking on the Outline checkbox.
Chart
The options in this section will allow you to configure the Y axis of your chart, that is, the numerical values of your data.
Sort
This configuration is used to sort the numerical categories:
Without: Leave column Y as it appears on your data, unchanged.
Upward: Sort the numerical categories in ascending order.
Falling: Sort the numerical categories in descending order.
Orientation
The orientation option lets you choose if you want your chart to be displayed vertically or horizontally.
Graph type
This section changes depending on the type of visualization you are using. In the case of bar charts, bars can be grouped or stacked if you have more than one category column in your data.
Percentage
When activating this checkbox, the data on the chart will be shown as a proportion of the total within each visualized category. In other words, values will not be shown as absolute, but rather as percentages.
Numeric Processing
In this section, you can configure the numeric values on your graph.
Aggregation
Aggregation in data visualization is the process in which data is gathered, grouped and presented in summary form. You can choose between:
Total: Groups the entire numerical column and then sums.
Average: Sums the numeric column and divides it over the number of data values.
Median: Orders the variables and chooses the value in the middle.
Numeric format
This option allows you to adjust the way you want your numerical values to look on your charts. This format accepts positive numbers, in decimal and standard type.
By default, the numeric format option is set to this value: 1,234.5. If you need your numerical values to appear in standard format (using a point to separate integers from decimals and a comma to separate thousands), leave it unchanged. In some countries, points are used to separate thousands and commas are used to separate decimals. If you need your numbers in this format, you can set the value to 1.234,5 or simply remove the number 5 and the point.
Prefix
With this field you can add text right before each of the values in the axis labels. For example, if your data consists of currency values, you can add a currency symbol prefix (‘$’) before the values, so that they appear as ‘$12’ rather than ‘12’.
Suffix
As with the prefix, the suffix allows you to add text to each of the values in the axis labels, but instead of before, the text is added right after each value. If your values are percentages, for example, you may want to add a percentage symbol ('%') as a suffix, so the values will be displayed as ‘68%’ rather than ‘68’.
Categorical processing
This section provides configurations to be applied on the X axis of your graph.
Category format
This option allows you to modify the categorical labels.
Title: The first letter of each of the words on your labels is capitalized.
Upper: All the letters on your labels are in uppercase.
Lower: All the letters on your labels are in lowercase.
Firstupper: Only the first letter of the first word on your labels is capitalized.
Category order
This field allows you to select the order in which your categories will be displayed on the X axis.
Label wrap
This option is useful when the categorical variables have long names and the graph is graphically overloaded. The slider lets you choose the number of characters in each line of text. Overflowing text will be placed in a new line below.
Processing missing values (NA)
Drop NA
This option allows you to eliminate from your chart the values that are missing or that are marked as NA. When leaving this option unmarked, NA values in the X axis will appear as a new category and NA values in the Y axis will appear as 0.
Label NA
With this parameter you can set the label with which NA values will be shown. By default, these will appear as ‘NA’, but you could also show them as ‘No data’, ‘Missing data’ or use any other name you choose.
Legend
The legend shows the colors that are being used to represent each of the categories in your graph. It indicates the color that corresponds to each one of it, with the name of the category right besides its color.
Show legend
This option allows you to choose if you want to display the legend on your graph. If you prefer not to show it, you should leave the box unmarked.
Drop NA in legend
This allows you to remove the NA or missing values within the categories shown in the legend. If you leave this option unmarked, the missing values will be shown as a new category, with a particular color assigned to it.
Order categories
This option allows you to select the order in which the categories will be displayed on your chart’s legend.
Label_wrap
This option is useful when the categories on your legend have long names. The slider lets you choose the number of characters in each line of text and overflowing text will be placed in a new line below.
Vertical position
This value is used to determine the position (calculated from the lower end of the plot area) where you want the legend to appear. Negative values will position the legend somewhere on top of the plot area.
Layout
This allows you to adjust the position of each of the legend categories (with its corresponding color circles):
Horizontal: This will appear by default. It organizes the categories in a horizontal disposition.
Vertical: This will organize the categories in a vertical disposition.
Proximate: Thus will adjust the categories automatically according to the proximity between one category and another.
Align
You can adjust the legend to be placed to the right or left side of the plot area, or even aligned to the center of it.
Center: To the center of the graph.
Left: To the left of the graph.
Right: To the right of the graph.
Vertical Align
You can also adjust the legend to be placed below the graph, above the graph or align it vertically to the plot’s center:
Bottom: Below the graph.
Top: Above the graph.
Middle: In the middle of the graph.
Reversed
This option is used to reverse the order of the categories in the legend.
Item margin top
This value is used to increase or decrease the top margin of the legend.
Item margin bottom
This value is used to increase or decrease the bottom margin of the legend.
Logo
Logo include
You can include or exclude the Datsketch logo or your organization’s logo, depending on the plan you have (Basic or Pro).
