Narrow Data

Throughout this book up until now, we’ve always built visuals that comprise narrow data; this is where the data contains a single numerical field and one or multiple categories. With narrow data, the glyphs represent categories, not measures. An example of narrow data is shown in Figure 14-1.

As we already know, to represent narrow data in a clustered column chart in Charticulator, the numerical field is bound to the Height attribute of the rectangle mark, creating a scale that drives the plotting of the data; see Figure 14-2.

This single numerical value can be represented by binding it to a number of other attributes of a shape or a symbol such as Fill, Width, or Size, and this will determine how the data is visualized. Each time you bind the value to a different attribute of the same shape, a separate scale will be generated. We’ve generated many such charts using multiple scales in earlier chapters.

When building visuals on top of narrow data, we add a categorical legend (known as a column values legend) that maps colors to categories accordingly.

Wide Data

In this chapter, we turn our attention to wide data, that is, data that comprises multiple measures and one or more categories. You can see an example of wide data in Figure 14-3, and this is the data for which we’ll be designing visuals in the examples that follow. You can see that we have one categorical field, “Salespeople,” and three measures, “Previous Yr,” “Current Yr,” and “Current Target.” These measures were created using DAX and were designed to respond to date filters. With wide data, the glyphs represent measures, not categories.

The assumption is that these metrics can be plotted against the same value axis because they share the same unit of measurement. However, with wide data the measures need not comprise the same unit. For example, you may want to plot sales against quantity. We looked at resolving this scenario in Chapter 9 where we generated new scales using the SHIFT key, or we could use a secondary line plot segment as we will do in Chapter 16. However, in this chapter, we will be considering only data that includes metrics that share the same measurement.

When building visuals that contain wide data, the legend will map a color to the rectangle or symbol representing each measure, known as a column names legend.

Now that we understand the conceptual difference between plotting narrow and wide data, we can move forward and explore the three different ways, as outlined earlier, in which we can represent wide data.

Creating a Clustered Column Chart

For this, we will work through the building of the chart in Figure 14-5. What we need to note in this visual is that each measure maps to a different rectangle, and we have two legends: a numerical legend on the left to show the sales values and a legend at the top to map the colors to the rectangles representing the measures.

As we have learned when exploring scales in Chapter 9, the first step in building this chart is to identify the measure that will determine the scale to be used by all the rectangles. This must be the measure that holds the maximum value, and we will bind this first to the Height attribute of a rectangle. We can see in Figure 14-6 that the “Previous Yr” value for salesperson “Abel” is the largest, so we need to bind “Previous Yr” to the Height attribute before we bind the others.

We can now start to construct the chart. Starting with a new chart and the data in Figure 14-6, the first step is to bind the “Salespeople” field to the x-axis.

We now need to assemble the glyph that will comprise three rectangles, one for each measure. These rectangles must be anchored to guides in the Glyph pane. To do this, it’s best to use a Guide X coordinator that will render three vertical guides. Now draw the rectangle that will represent the measure with the maximum value; in our data, that is the “Previous Yr” measure. Draw this inside the vertical guide, changing the Fill attribute as required, and then bind the measure to the Height attribute.

Now draw the second rectangle inside the guides of the guide coordinator. The most important point here is to ensure that the rectangle starts above the top guide of the glyph. The rule is that the rectangle must not be anchored to the top guide. You can then bind your second measure to the Height attribute of this rectangle and change the fill color. You can then repeat for the third rectangle; see Figure 14-7.

What’s lacking now is of course the numerical legend on the left of the chart that will imitate a value axis. You can use the Legend button on the toolbar and select the measure that determines the scale. In our example, we inserted a legend for “Previous Yr.” The legend is limited by being an adjunct of the scale, and as a consequence, although you can change the starting value of the legend using the Domain attribute of the scale, you can’t control at what value the legend ends. You can format the legend by editing the Tick Format attribute using a format expression as described in Chapter 8.

To add the legend that maps the fill colors to the measures, see the section on “Creating a Legend for Multiple Measures” below.

Creating the Stacked Column Chart

Working with the same fields we used in the preceding clustered column chart, we will now look at how we could use a stacked column chart to visualize this data instead; see Figure 14-8.

To generate the stacked column chart, first bind the “Salespeople” field to the x-axis. To compose the glyph, draw three rectangle shapes in the Glyph pane, one on top of the other. The size of the rectangles doesn’t matter, but keep them inside the guides of the Glyph pane. Ensure that the first and third rectangles are anchored to the bottom horizontal and top horizontal guides in the Glyph pane, respectively, but don’t anchor the middle rectangle to the middle horizontal guide; see Figure 14-9.

Change the fill colors so you can distinguish the marks. Now bind the measure that represents the maximum value (in our data, that’s the “Previous Yr” measure) to the Height attribute of the rectangle that you want to represent it. Remember that this will determine the scale that will be used by the other two rectangles. Now bind the other measures to the Height attribute of their respective rectangles.

To finish the chart, you could add text marks to show the values being plotted. To add the legend at the top that maps the color to the measures, see the section on “Creating a Legend for Multiple Measures” below.

With both the clustered column chart and stacked column chart, the question has to be asked, why don’t you just use Power BI to create these visuals? You’ve got no issue there with the scaling of the glyphs or the generation of a value axis, so wouldn’t this be an easier option? One reason to use Charticulator might be to use the skills you have learned so far to give these charts a “makeover” (see Figure 14-10), but they are still, at the end of the day, just column and bar charts.

Despite the makeover, the problem still persists that we must work within the confines of Charticulator’s scales. Must we always have to search our data to find the maximum value so we can set Charticulator’s scales? This seems, if nothing else, just awkward. You’ll be glad to know that help is at hand. There is another approach to visualizing and comparing measures that doesn’t involve any scale. This approach means it’s not only much simpler to achieve the visual you require but provides you with greater flexibility in the design of the visual too. I’m referring to the use of Charticulator’s data axis.

Cartesian Bullet Chart

The bullet chart (Figure 14-15) uses a categorical y-axis with the “Salespeople” bound to it and a horizontal data axis.

In the Glyph pane, to create a horizontal data axis, you must draw the data axis along the bottom guide of the glyph. In the Attributes pane of the data axis, change the Visible On attribute to “last” and move the axis to Opposite using the Position attribute.

This chart uses a Guide Y coordinator drawn down the left guide of the glyph. The rectangles for the “Previous Yr” and “Current Yr” measures were then drawn inside the guides accordingly; see Figure 14-16.

The “Target” measure is represented by a line mark, with the Stroke attribute set to black and the Line width set to 5.

Polar Bullet Chart

You can use a data axis with a polar scaffold, and this is how you can generate numerical axes for polar plot segments. Remember, you can’t use a numerical radial axis because we are using rectangle marks. Using the polar scaffold allows you to design an alternative bullet chart; see Figure 14-17.

Figure 14-17 shows you how you can start with a cartesian vertical style bullet chart and then simply apply a polar scaffold to the plot segment. Then change the angle of the plot segment so it lies from 270^o to 450^o. If you think the ellipse shape works better to represent “Previous Yr” and “Current Yr,” you can change that too.

Dumbbell Chart

The dumbbell chart is a great visual to compare just two metrics, in our case “Previous Yr” and “Current Yr”; see Figure 14-18. Here, we can quickly spot the reverse dumbbells to see when sales were worse for our salespeople in the current year. In fact, only “Charron” and “Reyer” are improving their performance!

This chart is particularly easy to produce using Charticulator. You can see the design of the glyph in Figure 14-19. It comprises two symbols aligned to the two measures on the data axis. A line mark then joins the two symbols, anchoring the line to the center of the symbols.

You can use the Layers pane to ensure that the line sits behind the symbols by changing the order the elements are listed.

Box and Whisker

The data axis makes the generation of a box and whisker chart very straightforward as long as the data presents itself as wide data; see Figure 14-20.

In other words, each of the calculations involved in the box and whisker chart should present itself as a measure in the Fields pane. You can see in Figure 14-21 the box and whisker chart we have built on top of this data.

Here, we are displaying our salespeople’s performance across all five years by showing the distribution of their sales, salesperson “Blanchet” having the most evenly distributed sales values.

Using a data axis, in Figure 14-22 you can see the glyph that was constructed to render the box and whisker chart.

Once the measures were plotted onto the data axis, it was then only a matter of adding the appropriate marks to build the glyph: a horizontal line for “max,” “min,” and “median” and a vertical line drawn between the “max” and “min.” A symbol was used for the “average” and a rectangle drawn for the box.

Tornado Chart

The last example of using a data axis will be to generate a tornado chart. Because the sales data we’ve been using in our examples doesn’t lend itself to being plotted on a tornado chart, we will use instead data comprising a set of competition scores to compare male and female contestants in different age groups; see Figure 14-23.

The tornado chart is a great example of using two horizontal data axes that diverge from the center of the glyph where the zero point for both axes starts; see Figure 14-24. This will allow us to plot and compare the male and female scores in each age group.

Using a data axis, this chart was straightforward to build, despite its looks. The “Age” field was bound to the y-axis. In the Glyph pane, the two data axes were drawn by anchoring each data axis to the center guide of the glyph, dragging outward to anchor one to the left guide and the other to the right guide; see Figure 14-25.

To ensure that the data axes were visible only on the first instance of the glyph, the Visible On attribute was edited accordingly, and the right-hand data axes were moved to the opposite side. All that remained was to plot the two measures “F” and “M” on the axes and draw the rectangle marks accordingly.