Show Sidebar Hide Sidebar

Group in Chart Studio

Use the Group Function in Chart Studio

Step 1

Open Data From This Tutorial

To use the data featured in this tutorial click on 'Open This Data in Chart Studio' on the left-hand side. It'll open in your workspace.

Open data

Step 2

Add Your Data to Chart Studio

Head to Chart Studio’s new online workspace and add your data. You have the option of typing directly in the grid, uploading your file, or entering a URL of an online dataset. Chart Studio accepts .xls, .xlsx, or .csv files. For more information on how to enter your data, see this tutorial.

For this tutorial, we'll use the gapminder dataset which can be found here. Simply, copy the URL from GitHub. Now, returning to the workspace select 'IMPORT' and then 'By URL'. Here, you just paste the URL from GitHub.

Add Data

Step 3

Create Your Chart

Now that we have the data added to the grid, we can select our chart type. Select GRAPH on the left-hand side, then 'Create'. Click 'Chart Type', then choose 'Scatter' in the 'BASIC' column.

Chart Type

Use the X and Y dropdowns to define X and Y variables for the chart. For this example, select the ‘gdpPerCap’ to display GDP per capita data on the x axis and select ‘lifeExp’ to display life expectancy data on the Y axis. Next, you can size points relative to data and display additional information on hover. Here, select ‘population’ to size points based on the population of each country. In addition, select ‘country’ in the ‘Hover Text’ dropdown to display the name of the country for each point on hover.

Add Trace Values

Now that we have our data and traces we can apply a filter. More specifically, for the gapminder dataset, due to its size, we will filter data from 2007 only. In order to achieve this we add a filter by selecting ‘Filter’ under ‘Create’ and click the ‘+ Filter’ button

Add Filter

Select ‘year’ from the dropdown to filter by year

Select Filter

First, select gdpPercap from the ‘Traces To Filter’ dropdown. Next, make sure that the ‘Operator’ dropdown is set to Matching values and the ‘Include’ option is also selected (these are the default selections), use the dropdown under Include to select ‘2007’.

Filter Controls

Now that we have filtered the data, you may notice that you have multiple traces - as we do in this dataset - that you wish to define. Here, we can utilize the group function. To do so, select 'group' under the 'Graph' tab and then click the '+ group' button situated at the top.

Add Group

First, we need to select the variable we wish to groupby. In this tutorial, we will select continents by using the dropwdown in the grouping panel.

Group By

Second, we need to determine which traces we wish to apply the grouping across. Here, our Y value, gdpPercap, is selected by default. Notice that the groups are automatically colored according to Chart Studio's default color array - we will discuss how to alter these in the next section.

Across Traces

Step 4

Style a Chart

Concerning style, immediately we can see that we need to set better sizing for our markers. Here, navigate to 'Traces' under the 'Style' tab and set 'Maximum Marker Size' to 10.

Size Reference

For this dataset, it'll beneficial to apply a logarithmic scale to the y-axis. In the ‘Axes’ style tab, open the ‘Range’ container and select ‘Y’ to apply changes to the y axis.

Log Scale

Now, we can style the individual continents that were separated when we used the group function. Navigate to 'Traces' under the 'Style' tab where you should see a dropwdown titled 'Group By Category'. Use this to style each category.

Group By Category

For example, select 'Europe' from the dropdown and click on the color dot to activate the colopanel popup. Now, pick a color of your choosing. For the pupose of this tutorial we've left the default setting of orange.

Style Markers

Repeat this process for the remainder of the categories if you wish to change the colors - or apply any other trace stylings.

Style All Markers

Step 5

Save and Share

Your chart is now done! Click SAVE on the left-hand side.

Save Button

After giving your file a name, select your PLOT and DATA as 'Public' or 'Private'. For more information on how sharing works, including the difference between private, public and secret sharing, visit this page.

Save Modal