Community docs

Produce visualizations of your findings

Note

This tutorial is part of the basic tutorial series for the data.world platform. See the article overview of basic tutorials for more information.

One of the most powerful ways to share results of your data analysis is through a visualization. On data.world you can use integrations for various third-party visualization tools including Chart Builder--a visual editor for Vega-Lite built specifically for data.world--and Tableau. In this tutorial we will use Chart Builder to create a couple of simple visualizations that we can use in our analysis of the data. Chart Builder is a good option for those looking to create a simple visualization that is lightweight and easy to embed.

Objectives

After working through the tutorial you should be able to:

  • Build a chart from a file

  • Build a chart from a query

  • Format your chart

  • Share and save your chart

  • Troubleshoot problems

Requirements

To complete this tutorial you need to have:

  • A data.world login (available for free here if you don't have one).

  • Your own tutorial project (you must create this yourself--it cannot be downloaded)

  • The Bee Colony Statistics dataset linked to your project

  • The dataset Bee Colony Data 2017 linked to your project.

If you need help creating the project or linking the dataset to it, detailed instructions are in the tutorial Create a project to work with data.

Build a chart from a file

You can create visualizations of tabular data files in a project without ever writing a query. For this example we'll use the Bee Colony Census 2017 by State file from the dataset Bee Colony Data 2017 in your project. To create a visualization of all the data in the file, expand the view of the Bee colony Data 2017 by clicking the arrow to the left of the dataset in your project directory pane, and select the file Bee Colony Census 2017 by State:

Screen_Shot_2020-02-11_at_12.29.20_PM.png

Unless you have already set-up the Chart Builder integration you'll need to do that next. Click the dropdown arrow next to Open in app in the upper right of the screen and choose + Add more integrations:

Screen_Shot_2020-02-11_at_12.32.49_PM.png

This action will take you to the BI and Visualization tools section of our Integrations page, and the Chart Builder integration is right at the top:

Screen_Shot_2020-02-13_at_3.51.22_PM.png

Select Chart Builder and Enable Integration:

Screen_Shot_2020-02-11_at_12.38.48_PM.png

You'll be prompted to authorize Chart Builder

Screen_Shot_2020-02-11_at_12.38.34_PM.png

After authorizing, when you are on your workspace you'll see the Open in app link has been replaced by Open with Chart Builder. Select Open with Chart Builder to continue.

Chart Builder comes with two options for creating and modifying charts: a Visual Builder and a Vega-Lite Editor. The easiest way to use it is to create your initial chart on the Visual Builder tab and then switch over to the Vega-Lite Editor to make any changes outside the scope of the Visual Builder. See our article on using Vega-Lite or the Vega-Lite website for more information.

To create a quick bar chart of the number of colonies by state in 2017 select the field state from the dropdown list for the x-axis, and value from the list on the y-axis. Like magic, our chart appears on the right side of the screen:

Screen_Shot_2020-02-11_at_12.57.01_PM.png
Build a chart from a query

Chart Builder can also be used on queries. Using a query as the basis for your chart enables you to:

  • Clean up data (e.g., change column names for your visualization)

  • Filter out data (e.g., specify a time period, a specific value, an aggregation, etc.)

  • Change your data structure so that it can be charted

For this example we'll write a query against the file Bee Colony Census Data by State in the Bee Colony Statistics dataset. The only columns we care about for our chart are the year, state and value columns so that's all we'll select. We also would like to show something more meaningful as the name for the value column so we'll change that in our query to # of hives:

Screen_Shot_2020-02-11_at_1.54.48_PM.png

After saving the query and opening it with Chart Builder we can create our graph. As before we select state for the x-axis, # of hives for the y-axis, and this time, because we have data from multiple years included, we use Color for year:

Screen_Shot_2020-02-11_at_2.36.25_PM.png
Format your chart

One thing you might notice about this chart is that the data on the number of hives is pretty compressed. We can adjust the size in the chart size options on the left or by clicking on the backwards L symbol in the bottom right corner of the screen and dragging the window to be the size you would like:

Screen_Shot_2020-02-11_at_2.39.24_PM.png

Another handy thing you can do in the options section is order the results in your graph. You may have ordered them already in your query results, but that order does not carry over to the graph. To sort by the state with the most hives select Options on the x-axis, choose Descending for the sort and y - # of hives on the sort field:

Screen_Shot_2020-02-11_at_2.56.39_PM.png
Share and save your chart

Chart-builder visualizations on data.world can be downloaded in a number of json, image, and html formats shown under the Download button:

Screen_Shot_2020-02-11_at_3.00.30_PM.png

There are also a variety of options for sharing/saving your visualization on data.world:

Screen_Shot_2020-02-11_at_3.00.41_PM.png

Selecting Share > Insight lets you add your visualization to any project on data.world for which you have permission. To share the insight you are prompted to chose a project where you will share it (the default is your current project), to give it a title, and optionally to add comments:

Screen_Shot_2020-02-11_at_3.05.07_PM.png

Share > File lets you add the visualization to any dataset or project for which you have permission. The easiest way to choose your dataset or project is to click Select to the right of the Dataset/Project field to get a dropdown list of all the datasets and projects to which you have access:

Screen_Shot_2020-02-11_at_4.55.39_PM.png

Share > Markdown Embed (Comment) you can embed your chart in any place which accepts Markdown (e.g., insights, comments, summaries). Text fields in data.world now default to the Simple Text Editor instead of to Markdown so to add the copied markdown-embed from Chart Builder to a text field you'll first need to switch the editor to Markdown from the option in the upper right corner of the text field:

Screen_Shot_2020-02-11_at_3.25.01_PM.png

Paste the embedded code and when you select Done, the chart will display in the text field. More information on how to use Markdown on data.world can be found in our article on Markdown.

Finally, if you want to share a link to the Chart Builder screen for the visualization so someone else can edit and run it, you can do so with the Share > URL option:

Screen_Shot_2020-02-11_at_4.13.45_PM.png

You can see the above example on the discussions page for the project. Note the use of Markdown stying to make the comment more readable. Detailed instructions for using Markdown on data.world can be found here.

Troubleshoot problems
Error loading data

An expired token can cause one to receive a "Error loading data." message when opening Chart Builder. To remedy this:

  • Click on your account avatar on the top right corner of data.world and go to 'Your integrations'

  • Select the Chart Builder tile

  • On the Chart Builder page, select the Manage tab

  • Click the Revoke button and disconnect the Chart Builder integration

  • Click the Enable integration button and authorize access

Re-launching Chart Builder will now allow it to fetch the data successfully.

Exercises
Create a chart from a file
  1. From the workspace of your tutorial project, select the file Bee Colony Census 2017 by State in the Bee Colony Data 2017 dataset .

  2. Add the Chart Builder integration to your account (select Open in app at the top right of your screen). (Skip this step if you already have Chart Builder installed.)

  3. Open the file with Chart Builder and set the x-axis to state and the y-axis to value.

  4. Name the chart 2017 census by state and share it to your project as a file.

Here is a link to the results of this exercise in our sample project.

Create a chart from a query
  1. From the workspace of your tutorial project, write a query against the file Bee Colony Census Data by State in the Bee Colony Statistics dataset which returns the year, state and value columns. Rename the value column to # of hives.

  2. Open the results with Chart Builder and create a bar chart with state for the x-axis, # of hives for the y-axis, and year for Color.

  3. Sort the graph results from fewest to most hives.

  4. Resize the chart window to 1028 wide X 760 high.

  5. Name your chart Hive census by state and year.

  6. Share the chart to your project as the file Hive_census_by-state_and_year.vl.json.

Here is a link to the results of this exercise in our sample project.

Conclusion

Visualizations are a great way to bring people into your project as they are accessible to people from all different levels of data analysis. Chart Builder gives you the ability to create quick visualizations of your data that you can share and save for use in your analysis. For a deeper, more powerful visualization experience, try our integration with Tableau.

References