Guided exercises

Find below guided exercises to help you get started on the studio.

Warning

All datasets are available here.

Make sure to add them to your application before starting.

Tiles exercises

Let’s create 3 tiles together that you’ll be able to customize with your own data later on.

✏️ Exercises :: Trend tile
  • Click on Add a tile

After clicking on Pick some data select the tile-trend dataset.

Then go to the Tile to configure a line tile (select line from the dropdown menu)

  • Add a title like “Revenue Trend” for example
  • Do not touch the dataset: my_dataset parameters. This is how the chart knows which data to use
  • For value, select the column of the dataset containing the line value; value
  • For date, select the column of the dataset containing the line dates; label
  • Check out the preview and Save when you’re done!

It should look like this:

tile line

tile line

✏️ Exercises :: Video tile
  • Click on Add a tile

No need for a dataset to build this type of tile, go directly to the Tiles.

  • Select a video tile from the dropdown menu
  • Choose Youtube as a video provider
  • Copy paste this video id to add a nice Toucan video to your app: fM6356ZAdM4. Note that the id of a video can be found in the video’s url, right after the equal sign: https://www.youtube.com/watch?v=fM6356ZAdM4
  • Check out the preview and Save when you’re done!

It should look like this:

tile video

tile video

✏️ Exercises :: Text tile
  • Click on Add a tile.

No need for a dataset to build this type of tile, go directly to the Tile.

  • Select a text tile from the dropdown menu
  • Add a title like “Monthly newsletter” for example
  • Add a text to display, something like this for example: “This can be a lovely newsletter written by your team! Amazing!”
  • Check out the preview and Save when you’re done!

It should look like this:

tile text

tile text

Charts exercises

✏️ Exercises :: Trend story

👥 User stories : I’m a Sales manager and I would like to see my revenue trend.

📐 Design : I need to see a trend of my revenue, let’s do a line chart !

  • Click on Pick some data and select the story-trend dataset
  • Get a preview of what the data looks like before moving on
  • Let’s add some units to tell the user the revenue is in $
  • Click on the revenue column header
  • Select Configure units
  • Type in ” $” (make sure to leave a space before the $)
  • Click on Chart
  • From the dropdown menu choose to create a line chart
  • Do not touch the dataset: my_dataset parameters. This is how the chart knows which data to use
  • For value, select the column of the dataset containing the line value; revenue
  • For date, select the column of the dataset containing the line dates; weeks
  • Check the preview to take a look at your awesome chart!
  • Click on Close to finish editing your chart

Note: You can click on the doc/book icon to get more info on this chart

  • Click on Story parameters in the bottom left of the navigation bar
  • Add a Glossary:
    • Click on the dropdown menu under Specific glossary
    • Click on Create a Term
    • Type in a Term name, let say “Revenue”
    • Add a definition, “All stores combined” for example
    • Un-check the option to “Make entry available on all stories”
  • Add a Commentary: “Weekly evolution since January”
  • Add a Source: “Toucan Toco”
  • Check the box to add a Recommendation:
    • Type in the following Title: “Info”
    • Type in the following Text: “You can add images and video, or links to other information. Made for action! This is Toucan!”
  • Click on Save, at the top next to Story Parameters
  • Then re-click on Save to save your all story
  • Don’t forget to admire your work 🙂

See how fast you created a powerful story: a meaningful viz with context info to help your user and without having written a line of code!

✏️ Exercises :: Best Performers Story

👥 User stories : I’m a Sales manager and I would like to know which stores are performing best globally and regionally

📐 Design : I need to rank my shops, and I need to be able to select a specific country. Let’s do a leaderboard and add filters on my region

  • Click on the big + sign, on the left, to add a new story.
  • Rename this story: “Shop ranking”
  • Click on Edit a story to continue the adventure!
  • Click on Add a chart and follow the steps below to create your very own leaderboard!

Let’s continue with the data:

  • Click on Pick some data and select the story-performance dataset
  • Get a preview of what the data looks like before moving on
  • Let’s add some units to tell the user the revenue is in $
  • Click on the revenue column header
  • Select Configure units
  • Type in ” $” (make sure to leave a space before the $)
  • Let’s add some precision to tell the user the evolution is in %
  • Click on the evolution column header
  • Select Configure precision
  • Type in “.1%”

Let’s continue with the chart:

  • Click on Chart
  • From the dropdown menu choose to create a horizontal bar chart
  • Do not touch the dataset: my_dataset parameters. This is how the chart knows which data to use
  • For label, select the column of the dataset containing the name of the shops; shops
  • For value, select the column of the dataset containing the value to be represented by the bars; revenue
  • Click on Show Optional Parameters
    • Add a variation using the “evolution” column
    • Add a variation legend, “vs last year” for example
    • Sort your bars
  • Check the preview to take a look at your awesome chart!
  • Try using the arrow above the evolution to resort your shops based on their evolution vs last year. Pretty cool…
  • Click on Close to finish editing your chart

Crazy how fast you created a viz truly “made for action”, right? We can go even further.

Remember: You can click on the doc/book icon to get more info on this chart

Let’s add a filter to the chart:

  • At the bottom-right of the chart, click on Add a filter
  • You can see on the right the preview of the dataset used to created your leaderboard above
  • You can select between several type of filter. Today let’s keep the button type
  • We want the user to select a specific region to rank the shops, so let filter on column “region”
  • Click on Save
  • Check out the preview!

Feel free to add Story parameters just like you did above

After doing your final changes, check out the preview, and click on Save when you’re done.

tile line

tile line

What Did You Accomplish?

  • As a Sales regional manager you can now easily rank your best and worst performers overall and by region
  • You can give direction and make appropriate business decisions
  • Users know how to get the best out of the chart thanks to the commentary and they know the source of data
  • We can tell that Shop 21 is your best performer but shop 2 made the most progression, when I select Global from the filter
  • We can also identify that shop 5 is losing a lot of revenue
✏️ Exercises :: Objectives Comparison Story

👥 User stories : I’m a Sales manager and I would like to know if my stores are reaching targets and last year’s numbers.

📐 Design : I need to align results against a target and another comparison value, let’s do a bullet chart!

  • Click on the big + sign, on the left, to add a new story.
  • Rename this story: “Objectives”
  • Click on Edit a story to continue the adventure!
  • Click on Add a chart and follow the steps below to create your very own leaderboard!

Let’s continue with the data:

  • Click on Pick some data and select the story-objectives dataset
  • Get a preview of what the data looks like before moving on
  • Let’s add some units to tell the user the revenue is in $
  • Click on the revenue column header
  • Select Configure units
  • Type in ” $” (make sure to leave a space before the $)
  • Do the same for the target and last_year columns

Let’s continue with the chart:

  • Click on Chart
  • From the dropdown menu choose to create a bullet chart
  • Do not touch the dataset: my_dataset parameters. This is how the chart knows which data to use
  • For value, select the column of the dataset containing the value to be represented by the bars; revenue
  • For label, select the column of the dataset containing the name of the shops; shops
  • For target, select the column of the dataset containing the value to be represented as a vertical tick on the bars; target
  • Click on Show Optional Parameters
    • Add a comparison using the “last_year” column
  • Check the preview to take a look at your awesome chart!
  • Click on Close to finish editing your chart

Crazy how fast you created a viz truly “made for action”, right? We can go even further.

Remember: You can click on the doc/book icon to get more info on this chart

Feel free to add Story parameters just like you did above

After doing your final changes, check out the preview, and click on Save when you’re done.

tile line

tile line

What Did You Accomplish?

  • As a Sales manager you can now easily tell which stores are over/under as performing compared to last year
  • You can give direction and make appropriate business decisions
  • Users know how to get the best out of the chart thanks to the commentary and they know the source of data
  • We can tell that Shop 4 is over reaching its target but shop 2 needs some help

Theme

✏️ Exercises :: Update colors
  • Change a color or two by copy-pasting your own hex code(s)
  • If you don’t have any hex codes in front of you, just scroll down the menu to select a predefined color scheme
✏️ Exercises :: Update images and logos
  • Change the bg-1 image to update the background of your app. Just drag and drop an image on the bg-1 tile
  • Update the logo-brand-header-2x by dropping your company logo onto the corresponding tile
  • Close the asset menu
  • Refresh your home page, and your images should be updated

More

Want more exercises?

Checkout the tutorial section of our documentation.