Toucan 3.0
YouPrep documentationHelp centerGet a demo
  • Welcome
    • ๐Ÿ‘‹Welcome to Toucan
    • โš™๏ธTechnical resources
      • โš™๏ธToucan stack
      • Setup mode
        • Toucan SaaS mode
      • โš™๏ธSecurity
        • Application Security
        • Source Code Quality
        • Global Security Practices
        • Security of Docker Images
  • TUTORIALS
    • ๐Ÿ“ŠGetting Started : Embedded Analytics
    • ๐Ÿค“Advanced tutorials
      • Embedding a story with user attributes
        • Dynamic filter with user attributes
        • Dynamic Tables
        • Dynamic Database
        • Dynamic Host
      • Using the HTTP API connector in advanced use cases
      • Using advanced syntax for SQL queries
      • Merging filters with our tool
      • Deep customization chart (CSS)
        • Homepage customization
        • Chart customization
        • Dashboard customization
  • Data Management
    • ๐ŸงฎOverview of Data In Toucan
    • ๐Ÿ“กDatasources in Toucan
      • ๐Ÿ”ŒManaging Connectors
        • ๐Ÿ”ŒCreating, editing and deleting a connector
        • ๐Ÿ”ŒSet up OAuth2 credentials for your platform
        • ๐Ÿ”ŒSetting up a connector
          • ๐Ÿ”ŒGeneric Connectors
            • ๐Ÿ”ŒSetting up an HTTP API connector
            • ๐Ÿ”ŒSetting up an ODBC Connector
          • ๐Ÿ”ŒDatabase and data warehouse Connectors
            • ๐Ÿ”ŒSetting up an AWS Redshift Connector
            • ๐Ÿ”ŒSetting up a Snowflake Connector
            • ๐Ÿ”ŒSetting up a PostgreSQL Connector
            • ๐Ÿ”ŒSetting up a Google Big Query Connector
            • ๐Ÿ”ŒSetting up an AWS Athena connector
            • ๐Ÿ”ŒSetting up a MySQL connector
            • ๐Ÿ”ŒSetting up a MongoDB connector
            • ๐Ÿ”ŒSetting up a Microsoft SQL Server connector
            • ๐Ÿ”ŒSetting up an Azure SQL connector
            • ๐Ÿ”ŒSetting a Databricks Connector
            • ๐Ÿ”ŒSetting up a ElasticSearch Connector
            • ๐Ÿ”ŒSetting up a Clickhouse Connector
          • ๐Ÿ”ŒOnline services connectors
            • ๐Ÿ”ŒSetting up a Sharepoint Connector
            • ๐Ÿ”ŒSetting up a Google Sheets Connector
            • ๐Ÿ”ŒSetting up a Salesforce Connector
            • ๐Ÿ”ŒSetting up a Hubspot Connector
          • ๐Ÿ”ŒSetting up an AWS S3 connector
      • ๐Ÿ“Managing Files
        • ๐Ÿ“Adding, editing and deleting local files
        • ๐Ÿ“‚Using advanced file settings
        • ๐Ÿ“Adding and combining remote files in Toucan
    • ๐Ÿ”ขDatasets in Toucan
      • ๐Ÿ”ขStored and Live Datasets
      • ๐Ÿ’ฟManaging datasets
        • ๐Ÿ”ขCreating datasets
        • ๐Ÿ”ขEditing, Duplicating and Deleting a dataset
        • ๐Ÿ”ขRefreshing and Publishing Datasets
        • ๐Ÿ“ˆOptimize data performance
        • ๐Ÿ—‚๏ธAdding indexes to stored datasets
        • ๐Ÿ‘ฉโ€๐Ÿ’ปCode mode and single mode
      • ๐Ÿ›‘Setting permissions on dataset
      • ๐Ÿ—ƒ๏ธMaintaining Data
        • ๐Ÿ—ƒ๏ธTagging datasets
        • ๐Ÿ—ƒ๏ธIdentifying datasets dependencies
        • ๐Ÿ—ƒ๏ธSet validation rules
    • ๐Ÿง‘โ€๐ŸณPreparing data
      • Overview of YouPrepโ„ข
        • ๐ŸŽนColumn header
          • Rename column
          • Duplicate column
          • Fill null values
          • Replace values
          • Sort values
          • Convert columns data types
        • Add
          • Add text column
          • Add formula column
          • Add conditional column
        • Filter
          • Delete columns
          • Keep columns
          • Filter rows
          • Top N rows
          • ArgMax
          • ArgMin
        • Aggregate
          • Group by
          • Add total rows
          • Hierarchical rollup
          • Get unique groups/values
        • Compute
          • Compute evolution
          • Cumulated sum
          • Percentage of total
          • Rank
          • Moving average
          • Compute statistics
          • Absolute value
        • Text
          • Concatenate
          • Split column
          • Extract substring
          • To lowercase
          • To uppercase
          • Compare text columns
          • Trim spaces
          • Replace text
        • Date
          • Convert text to date
          • Convert date to text
          • Extract date information
          • Add missing dates
          • Compute duration
        • Reshape
          • Pivot
          • Unpivot
          • Waterfall
        • Combine
          • Append datasets
          • Join datasets
        • Geo
          • Geographic dissolve
          • Geographic hierarchy
          • Geographic simplify
          • Prepare geo data (with basemap)
      • YouPrepโ„ข Native SQL
      • Hybrid pipeline
    • โžฟManaging variables in Toucan
      • โžฟVariables hub
      • โ™ˆUse variables in YouPrepโ„ข
      • โžฟEasy reference to variables
    • ๐ŸงžUsing advanced data concepts
      • ๐ŸงžData personnalisation with user attributes
        • Connector setup with a user attribute
        • Database selection with a user attribute
        • YouPrep data filtering with a user attribute
        • Filter data in SQL with a user attribute
      • ๐ŸงžAdvanced syntax for variables
      • ๐ŸงžData cache
  • Visualizations and Layouts
    • ๐Ÿ“บApps
      • ๐Ÿ“บManaging Apps
        • โž•Creating Apps
        • ๐Ÿ“„Duplicating Apps
        • ๐Ÿ–จ๏ธPublishing Apps
        • ๐ŸšฎDeleting Apps
        • โœ๏ธEditing within an App
      • ๐Ÿ–Œ๏ธCustomizing Apps
        • Customizing chart color elements
        • Customizing the app's font
        • Adding Assets
        • Adding Glossary
        • Setting up, Managing and testing custom visibilities
        • Customizing the "no data error" message
        • Creating a dynamic background based on an Filter's column
      • ๐Ÿ Home
        • Creating the Home
        • Creating Tiles
          • Tile Dynamic Value
          • Tile Leaderboard
          • Tile Line
          • Tile Scorecard
          • Tile Bullet
          • Tile Heatmap
          • Tile PDF
          • Tile Video
          • Tile Image
          • Tile Text
          • Tile HTML
          • Tile Separator
      • โœจStories
        • Creating a Story
        • KPIs
        • Narrative
        • Crossfilter
      • ๐Ÿ“ฝ๏ธFilters
        • Managing Filters
          • Creating, reusing and editing Filters
          • Applying Filters
          • Unpinning and deleting Filters
        • Type of Filters
          • Dropdown
          • Checkboxes
          • Buttons
          • Date Range
          • Hierarchical
          • Slider
        • Templating from Filters' values
        • Dependant Filters
      • ๐Ÿ“ˆPDF Report
      • ๐ŸŽกDatawall
      • ๐Ÿ—๏ธDashboard Builder
        • Create a Dashboard Builder
        • Embed a Dashboard Builder
        • Dashboard export options
      • ๐ŸŒŸMyFavorites
    • ๐Ÿ“ŠCreating Visualizations
      • ๐ŸคฉViz Gallery
        • Barchart
        • Barlinechart
        • Bubblechart
        • Bulletchart
        • Circularchart
        • Funnelchart
        • Gantt chart
        • Heatmap
        • HTML
        • Leaderboard
        • Leaderboard Centered Average
        • Linechart
        • Mapchart
          • Configure a drill
        • Mediachart
        • Radarchart
        • Tablechart
        • Timeline
        • Versuschart
        • Waterfallchart
        • Score Card
        • Stacked Barchart
      • ๐Ÿง Common Chart Configuration
      • ๐Ÿ’…Customizing chart colors
      • ๐Ÿงžโ€โ™‚๏ธAdvanced chart configuration
        • Templating from chart's dataset
        • Add units, precisions and sentiments
        • Adding Tutorials
        • Add sparklines
        • Navigate with stories
        • Group informations in your stories
        • Multiple charts in one story
        • Manage dates
        • Customize tiles' sources
        • Add stars to tiles' title
        • Manage data order in your tiles
        • Navigate with tiles
    • ๐Ÿ‘ฉโ€๐Ÿ’ปEmbedding
      • ๐Ÿ”Authentication
      • ๐Ÿ–‡๏ธIntegration
        • Generate and manage embeds
        • Customize embeds
        • Embedding a Toucan App Using iFrames
        • Passing Extra Variables to Your Toucan Embed
      • โš™๏ธEmbed SDK
        • Embed SDK Authentication
      • โ“FAQ
    • ๐Ÿ™‹Self-Service
      • Self-Service Dashboard
      • Self-service PDF Report
  • Collaboration
    • โฐCreating alerts
    • ๐Ÿ“งManaging notifications
    • โž•Enriching a story with descriptions
    • ๐Ÿ’ŒSharing content
    • ๐Ÿ’ฌAdding comments to stories
  • Administration
    • Page
    • โš™๏ธInstance Management
      • โš™๏ธManaging operations in SaaS
      • โš™๏ธCustomizing your instance (whitelabel)
    • ๐Ÿ‘ฅManaging Users
      • ๐Ÿ‘ฅUsers
      • ๐Ÿ‘ฅManaging user groups
      • ๐Ÿ‘ฅManaging user properties
      • ๐Ÿ‘ฅSetting up permissions and visibilities
    • ๐ŸŒManaging languages in Toucan (internationalisation)
    • ๐Ÿ“ˆMonitoring Engagement with User Analytics
      • ๐ŸŽ›๏ธHow to Filter your User Analytics?
      • ๐Ÿ–ฅ๏ธUnderstanding your User Analytics Dashboards
  • Additional Ressources
    • ๐Ÿ“šExternal documentation
    • ๐ŸšSupport for App-builders
    • ๐Ÿ†•Latest releases
      • ๐ŸŽ2025 Releases
      • ๐ŸŽ2024 Releases
      • ๐ŸŽ2023 Releases
    • ๐Ÿ”งTroubleshooting
      • Troubleshoot:: DataHub
      • Cross-Site Cookies
      • How to :: read the inspector error
      • How to :: troubleshoot the toucan way
Powered by GitBook
On this page
  • Overview
  • Units
  • Precision
  • Sentiment
  • How to use specifiers :: units & precision
  • How to use specifiers :: units & precision in advanced configuration mode
  • How to use specifiers :: sentiment
  • How to use specifiers :: sentiment in advanced configuration mode

Was this helpful?

  1. Visualizations and Layouts
  2. Creating Visualizations
  3. Advanced chart configuration

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.

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 still fixed 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 displayed 100000%. 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 value 1000 will be displayed as 16m, 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 value 1000 will be displayed as 16m, 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:

Raw value
Precision specifier
Formatted value

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:

person
grade
target

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 5 months ago

Was this helpful?

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
Clicking on Configure sentiment
consider a value
A simple case
consider a value
add a new โ€œboundโ€ by clicking on the line
indicating the column โ€œtargetโ€ as a breakpoint
Comparing their value to their different targets
Clicking on Configure
Clicking on Configure sentiment
consider a value
A simple case
consider a value
add a new โ€œboundโ€ by clicking on the line
indicating the column โ€œtargetโ€ as a breakpoint
Comparing their value to their different targets
Clicking on Configure