How to Bind Data

Any attribute to which you can bind data has a Bind data button next to it as shown in Figure 3-1.

To bind data to an attribute, you can click the bind data button, or you can drop a field from the Fields pane onto any dropzone. There are dropzones in the Attributes panes, in the Glyph pane, and on the chart canvas. The dropzones turn orange when you hover over them and are shown in Figure 3-2.

For example, in Chapter 1 we dragged the “Year” field onto the dropzone on the x-axis of the chart, binding that field to the X Axis attribute of “PlotSegment1.” We then dragged the “Sales” field onto the Height dropzone in the Glyph pane to bind this field to the Height attribute of “Shape1.” Lastly, we dragged the “Salespeople” field onto the Fill attribute dropzone of “Shape1” to color the rectangles on the chart accordingly. Another instance where we bound data was in Chapter 2, when we bound the “Sales” field to the Text attribute of the text mark. In Figure 3-3, you can see these attributes with the fields bound to them and note how they drive the plotting of the data in the chart.

Binding categorical fields to attributes will have a different impact on the chart than binding numerical fields. Also, your chart will alter its appearance dramatically depending on which fields you’ve bound to the x- and y-axes. We will now explore these behaviors in detail by using the chart in Figure 3-4 as our example.

Also note that in the chart in Figure 3-4, there is no numerical legend on the left as we will add this after we have finished binding data.

Binding Categorical Fields

Binding categorical fields to attributes of a mark, symbol, or line determines the colors you want to use to identify each member of the category and creates a color scale in the Scales pane that maps the colors to the categories. In our chart, we bound the “Salespeople” categorical field to the Fill attribute of the rectangle mark, and this generated the “Shape1.Fill” property under the color “Scale2.”

However, we could remove the “Salespeople” field from the Fill attribute of Shape1 (using the eraser) and bind “Salespeople” to the Stroke attribute instead, creating a “Shape1.Stroke” property under “Scale2”; see Figure 3-5. This would color the outline of the rectangle according to each salesperson; see Figure 3-6.

When you remove a field from the Fill attribute, you’re left with no color in that attribute, so just click the Fill attribute and reselect a color. We’ve chosen gray in our example.

You’ve learned that binding categorical data produces a scale in the Scales pane. However, there is an exception to this and that is when you bind a categorical field to the Text attribute of a text mark. Unlike other attributes, binding categorical data, such as “Salespeople”, to the Text attribute of a text mark will not produce a scale in the Scales pane. For instance, in our column chart, we’ve bound a numerical field to the Text attribute (i.e., the “Sales” field), but instead you could bind a categorical field, thereby generating categorical data labels. You can see an example of this in Figure 3-14 where we have bound the “Salespeople” field to the Text attribute of a text mark, anchored to the bottom of a rectangle shape, and this has labeled the columns accordingly.

Although it may be self-evident, it might be worth noting that you are not able to bind categorical fields to numerical attributes. For example, you can’t drag the “Salespeople” field into the Height or Width attribute of a shape.

Editing a Categorical Color Scale

The colors used by the color scale are initially determined by the theme applied to your Power BI report. However, you can edit these colors either by clicking on the attribute in the Attributes pane or by clicking an attribute property under the Scale in the Scales pane, for example, click on “Shape1.Fill” or on “Shape1.Stroke”. The dialog that opens is shown in Figure 3-7.

Click the color you want to change. Changing the colors used by the Fill attribute would also change the colors used by the Stroke attribute (or any other attributes that use “Scale2”). This aspect of the scale is covered in detail in Chapter 9.

Binding Numerical Fields

Whereas you can only bind categorical fields to nonnumerical attributes, you can bind numerical fields to both numerical and nonnumerical attributes, and depending on which you choose, this will have a different impact on the chart.

Binding Numerical Fields to Numerical Attributes

You can bind numerical fields to any numerical attribute such as Height, Width, and Size. When you do this, the attribute will reflect the magnitude of the numerical value bound to it and generate the associated numerical scale in the Scales pane. For example, in our chart we bound the “Sales” field to the Height attribute of “Shape1,” creating the “Shape1.Height” property under the numerical “Scale1” in the Scales pane. This drives the height of the rectangles in the chart to reflect the sales value. However, we could also bind the “Sales” field to the Size attribute of the text mark, to create a third scale, “Scale3,” using the “Text1.FontSize” property; see Figure 3-8.

You can see now in our chart (Figure 3-9) that the text size in the text mark has been scaled according to the value of the “Sales” field.

If you want to insert a numerical legend on the left of the chart, ensure that this is done after binding the numerical value to the Size attribute of the text mark. This will force “Scale3” to be generated and prevent the “Text1.FontSize” property joining “Scale1” which can result in unexpected behavior.

What is interesting and may also seem a little odd at first is that when you bind numerical data to an attribute, the average function is used on the numerical value; see Figure 3-10.

However, this shouldn’t seem strange because remember that the glyph represents a single row in the underlying data, and therefore there is only a single value. The average of a single value is that value. In other words, this is simply the value itself. We will be learning more about Charticulator’s expressions in a later chapter.

Binding Numerical Fields to Nonnumerical Attributes

We’ve already seen that we can bind a numerical field such as “Sales” to the Text attribute of a text mark to show the sales value for each column, effectively adding numerical data labels to the chart.

If a numerical field is bound to attributes that define a color such as Fill, Color, or Stroke, this will create a gradient color scale. For example, in our chart we could replace the “Salespeople” categorical field in the Fill attribute of the rectangle mark with the “Sales” numerical field, and this will produce a gradient gray color scale in the rectangles, defining high and low sales values. This will also generate a fourth scale for the Fill attribute of “Shape1”; see Figure 3-11.

It’s unfortunate that the default gradient color scale is so dreary! Let’s now brighten up the chart by editing the color scale.

Editing a Gradient Color Scale

You may want to edit the gray gradient to something a little more colorful. If you want to change a gradient color scale, just click into the attribute, and you can either select from a variety of preformatted gradient scales or click the custom tab and create your own gradient. We chose the “Spectral” gradient color scale; see Figure 3-12.

Notice that you have the ability to customize the gradient colors by clicking Custom at the top of the color palette.

Adding a Legend for a Gradient Color Scale

You can add a legend for the gradient color scale here too to replace the current legend for the category. Note that you can’t use the Legend button on the toolbar because this will insert the default legend for numerical fields which is a numerical legend on the left of the chart. An alternative way to generate specific legends is to use the Scales pane, clicking the property under the scale that requires the legend, in our case “Shape1.Fill” under Scale4, and then clicking the Add Legend button; see Figure 3-13.

You can use the attributes of the color scale legend to increase the font size and change the font color of the legend.

The problem is that now you don’t know which columns in the chart represent which salesperson. I’ll leave it to you to decide how you want to resolve this problem because with Charticulator, there are always a number of options available to you. You can see my resolution in Figure 3-14. I used a text mark and bound the “Salesperson” field to the Text and the Color attributes.

In the Glyph pane, the text mark was anchored to the bottom of the rectangle, rotated, and then placed in position inside the rectangle using the Anchor attributes of the text mark.

Binding Data to Axes

It’s not just attributes of the glyph that can have data bound to them. In the attributes of “PlotSegment1,” you can bind both numerical and categorical data to the X Axis and Y Axis attributes. In the chart in Figure 3-14, we have bound the “Year” categorical field to the X Axis attribute, but we could bind “Year” to the Y Axis attribute instead. In both cases, we are generating categorical axes. You can see that making this simple change in the data binding has totally transformed the design of the chart; see Figure 3-15.

The height and color of the glyph still represent the numerical value, and we still have the text mark bound to the bottom of the rectangle. However, now each year’s data is represented horizontally across the chart.

Having bound a categorical field to the axis, I appreciate that you will now want to know what would happen if we bind a numerical field, such as “Sales,” to the y-axis. If we do this, it all goes a little awry; see Figure 3-16.

Clearly, with Charticulator, generating numerical or value axes will have unexpected results if you don’t fully understand how Charticulator plots your data, and looking at the fine mess we’ve got into, I think it’s evident that we still have a lot to learn. Why does the numerical y-axis behave so strangely? To find out, you will need to read the next chapter.

However, there is one more example of binding data that we need to explore before we move on. We have left this to the last section in this chapter because we will need to start over with a new chart and different data. We are going to discover how we can bind images to categories that in turn are bound to an icon mark.

Binding Data to Icons

In the previous chapter, you learned how to add an icon to the Glyph pane and that it can be used for the same purposes for which you might use a symbol, for example, to design point style charts such as line or scatter charts (we look at building these in the next chapter). We saw that we could bind an image to the Image attribute of the icon to generate a single image that showed in the glyph. We could also bind a numerical field to the Size attribute to resize the image according to the numerical value in a similar way we can with a symbol.

However, there is another way that we can use the icon mark, and that is to bind a category to the Image attribute and then bind images to each category. You can see the effect of doing this in the flag chart in Figure 3-17 where we have bound an image for each country’s flag to the icon.

To build this chart, you will need data similar to that shown in Figure 3-18 and some images of flags to bind to the icon.

The first step is to bind the “Year” field to the x-axis and the “Country” field to the y-axis. This generates a “matrix” style chart that uses two categorical axes (the topic of Chapter 6). Now, place an icon mark into the Glyph pane and bind the “Country” categorical field to the Image attribute. Doing this means you can now bind each image file to each category. To do this, simply click the Image attribute and then map your image to each category; see Figure 3-19.

In building this chart, just remind yourself that you have only reached Chapter 3, and you’re already designing visuals that are not possible to re-create in Power BI. I’m hoping this will encourage and inspire you to read on.

In this chapter, you have learned that it’s the binding of data to attributes of the glyph and the plot segment that enables you to plot data successfully using Charticulator and also provides you with a multitude of choices as to how you want to reflect your data. You have seen that with Charticulator the normal process of creating visualizations is reversed whereby you select the data to visualize first and then design a chart around that data. In a typical Power BI visual, you select the chart first and so are immediately restricted by your choice of visual.

But we still have that pesky visual in Figure 3-16 to sort out where we have bound a numerical field to the y-axis and ended up with a chaotic chart. Let’s now see how we can resolve this problem by moving on to the next chapter.