Data Studio: Make interactive data visualizations

Step 1
Go to datastudio.google.com and begin a new report by clicking the blank square with the + icon.

Step 2
In Data Studio, visualizations are called "reports." To connect our Google Sheet to this report, select Create a New Data Source from the bottom right.

Step 3
A menu will slide up showing the services we can pull our data from. Scroll to Google Sheets and click SELECT.

Step 4
In the search box, you’ll see all the Google Sheet files associated with your Google Drive account. (If this is your first time using Google Data Studio, you may need to grant permission to access your Drive account.) Select the spreadsheet and its associated worksheet where the data is stored.

Step 5
Leave all the Options boxes checked and click Connect.

Step 1
Let’s rename the visualization. Click on the top left corner where it says Untitled report. Let's call it “Top 50 Highest Grossing Movies in the World.”

Step 2
Under Type, change the data in row 5 from Number to Date & Time > Year (YYYY). If it's already set as Year (YYYY), leave it.

Step 3
Select Add to Report, the blue button on the top right. Click again on the same option that will pop up.

Step 4
Let's make the visualization 630 pixels in width and 800 pixels in height. Click anywhere and type the numbers in the Canvas Size section.

Step 1
First, select the rectangle tool and drag the mouse cursor across the top of the canvas. Use the text tool to add a title. Use the right pane to format the text.

Step 2
Go to Add a Chart and click Smoothed line chart.

Step 3
Resize it to fit nicely below the title, but leave space for the next chart.

Step 4
To change the dimension, metric and sort for the line chart, double click it. For Dimension, drag and drop Year to replace Title. Next, replace Metric with Worldwide gross.

Step 5
Under Sort, click Worldwide gross, then click Year.

Step 6
Change the sort option to Ascending. At the bottom you will see a section called Interactions. Select Apply filter. This will make every click on the line chart an action to filter the table.

Step 1
Choose Add a chart > Table chart. Resize it to show the first 10 rows in the list.

Step 2
Let’s set up this table with three metrics in this order: Year, Rank and Worldwide gross. Go to Metrics and add these fields, either by dragging from Available Fields or clicking Add metric.

Step 3
Next, go to Style > Table Colors to change the color of the header to dark gray.

Step 4
Go to Table Footer and uncheck Show pagination.

Step 5
Now, you can add text citing your data source and offering instructions for using the chart. Select Text and add it to the bottom of the table.

Step 1
To add directional text, such as “Scroll to see more!”, click Text and type your message.

Step 2
At any time, you can preview your visualization by clicking View. To toggle back and forth between View mode and Edit mode, simply click again.

Step 3
When you're in View mode, you can click on any point in the line and the table below will automatically display the top 50 movies from that year.

Step 4
View mode also lets you see the complete visualization you’ve created, including the title, line chart and table chart.

Step 1
Share this visualization the same way you'd share any other GSuite document.

Step 2
To embed this interactive visualization on your website, click File > Embed report. Check the Enable embedding box and use the code on your page.