Add units, precisions and sentiments
How to use specifiers :: units, precision and sentiment
Overview
Reading just 10
under the label Carrots sold
doesnโt really help you understand anything. But knowing that this value is expressed in kg/day
(unit), is precise to the gram 10.000
and that itโs better than expected (positive
sentiment) makes it more understandable.
This is the type of info that you may know about the data but doesnโt appear in any file. You can use Toucan specifiers to communicate context about your value.
We call specifiers little pieces of info on a data cell that are necessary to understanding it.
Available Specifiers types are:
units: more precisely units of measurement
precision: how to format the value correctly
sentiment: a color coding associated to this value
Note
Specifiers are declared directly in the data. They live there because itโs a property of the data, not from a particular visualization of it.
When applying a sentiment and a precision on the same column, the sentiment will be based on the raw data (not the data after applying the precision).
Currencies are not units! Use the precision specifier (see below) to format your values in a financial way.
In a tile, you can set up a sentiment only for one of your columns
Units
Not much to say about them! Just input what you want displayed next to the unit.
Two tips though:
you can add a space before the unit if necessary
percentage is not a unit of measurement (see the precision specifier below to know how to display this correctly)
Precision
Precision controls how to display a value.
Precision configurations are text strings. They look like ",.2f"
or ".0%"
or "duration:h'h' mm'm'"
. To know how to construct them, have a look at d3-formatโs documentation.
Duration formatting assumes that the value are in seconds.
A few examples for the value 1000
:
".0f"
: Means no (0
) decimal position,f
for fixed precision. This is suited for integer quantities, and would be displayed like this:1000
.",.2f"
: Means 2 decimal positions, and stillf
ixed precision for float, with a character,
to separate thousands. This is a nice format for currencies, displayed like this:1,000.00
. The symbols adapts with the chosen language. In French locale, that would be:1 000,00
.".0%"
: Means no (0
) decimal position,%
for percentage format. A percentage of 100% is the value 1, so our value 1000 would be displayed100000%
. Note that the percentage symbol is added automatically."$"
: Means that the currency symbol will be displayed along the value".2K"
: (from v58.1+)K
means that locale currency abbreviations will be used (in english,K
for thousands,M
for millions,B
for billions,T
for trillions).2
indicates the number of significant digits to keep"duration:narrow"
(the display is adapted automatically according the locale in Toucan) will display the duration within the standardized narrow format. In english local, the value1000
will be displayed as16m, 40s
. The granularity will be adapted automatically to the maximum (up to years) one according the value."duration:narrow"
(the display is adapted automatically according the locale in Toucan) will display the duration within the standardized narrow format. In english local, the value1000
will be displayed as16m, 40s
. The granularity will be adapted automatically to the maximum (up to years) one according the value.duration:h'h' mm'm'
(custom format) will display the duration according the custom token defined. For example, the value 1000 will be display as 0h 16m
You can use multiple tokens for duration format: y (for year), M (for month), w (for week), d (for day), h (for hour), m (for minute), s (for seconds), S (for millisecond).
Duration formatting supports also the padding, which means that it's possible to force the display with several numbers. So for example if the format h'h' m'm'
displays 2h 4m
, the format hh'h' mm'm'
will display 02h 04m.
Recap:
1000
".0f"
1000
1000
",.2f"
1,000.00
(en)
1000
".0%"
100000%
1000
"$"
$ 1000
1000
"$.2f"
$ 1000.00
1000
"$.2K"
$ 1.0 K
(en)
10000
"duration:narrow"
2d, 8h
(en)
10000
"duration:short"
2 days & 8 hr
(en)
10000
"duration:"
2 days, 8 hours
(en)
10000
"duration:long"
2 days and 8 hours
(en)
10000
"duration:d'd' h'h' m'm' s's'"
2d 7h 33m 20s
10000
"duration:dd'd' hh'h' mm'm' ss's'"
02d 07h 33m 20s
10000
"duration:h'h' mm'm'"
55h 33m
Sentiment
Sentiment is a bit different, itโs not a small set of characters but itโs a scale. The scale will be represented by color coding. The idea is to indicate how the value should be assessed against some breakpoints.
Available sentiments are:
"positive"
: generally associated to green"negative"
: generally associated to red color"neutral"
: generally associated to black or gray"warning"
: generally associated to orange
In the nexts steps you are going to see how to use the specifiers like a pro.
How to use specifiers :: units & precision
Step 1: In the Smart Editor you'll see the different specifiers under the Value input
Step 2: Clicking on Add units will allow you to specify the unit for this column
Saving your changes will update how the data is displayed:
How to use specifiers :: units & precision in advanced configuration mode
Step 1: In the Smart Editor you'll see the different specifiers under the Value input
Step 2: Clicking on Add units will allow you to specify the unit for this column
Step 3: Clicking on โAdvancedโ will allow you to access in advanced configuration mode
Step 4: Choose one of the options, here we are going to configure units from another column called โTypeโ:
How to use specifiers :: sentiment
Step 1: In the Smart Editor you'll see the different specifiers under the Value input
Step 2: Clicking on Add sentiment will allow you to specify the sentiment for this column
Step 3.1: Sentiment around a fixed value
A simple case would be to consider a value as positive if itโs above 0, and as negative under:
Step 3.2: Sentiment with multiple fixed values
A simple case would be to consider a value as positive if itโs above 1, a neutral step between 0 and 1, warning between 0 and -1, and negative under -1:
Then add a new โboundโ by clicking on the line, repeat this step as many times as you wish.
Step 3.3: Sentiment towards another column
In other cases, we might want our breakpoints to vary depending on the data row. This can be done by setting our breakpoint to depend on a data column. Given this data:
Alice
12
10
Bob
13
15
Comparing their value to their different targets, we want Alice to feel satisfied but not Bob. This can be expressed by indicating the column โtargetโ as a breakpoint.
Saving your changes will update how the data is displayed
How to use specifiers :: sentiment in advanced configuration mode
Note
In this exercise, I want to apply a sentiment on the โevolutionโ that will vary according to the values of โcountryโ column. Because the value differs according to the country (demography, โฆ).
Step 1: In the Smart Editor you'll see the different specifiers under the Value input
Step 2: Clicking on Add sentiments will allow you to specify the sentiment for this column
Note
I would like to add a sentiment for France with a bound at 50, for Italie at 45 and for others countries at 30.
Step 3: Clicking on โOr switch to advanced configurationโ will give you access to the advanced configuration mode.
Saving your changes will update how the data is displayed:
Need more? Let us know!
Last updated