In this tutorial, you'll learn how to create a simple scatter plot using DataPicta. Scatter plots are great for exploring relationships between two numeric values — for example: students (study hours vs exam scores), housing (size vs price), or cars (engine size vs fuel economy). In this ecample, we'll use sample student data.

Open the DataPicta app

• Open the DataPicta app by going to app.datapicta.com (this will open separate browser tab).
• If you never used DataPicta before, you will only see a button for uploading data.
• If you have used DataPicta before, click on 'New blank chart' in the menu in the top right corner.

Upload the data

Typical fields for a student scatter plot:

The data to be used in this example is as follows:

studyHours,examScore,attendance,group
4.5,62,8,Freshman (Y1)
12.0,81,12,Sophomore (Y2)
8.0,74,10,Junior (Y3)
3.0,55,6,Freshman (Y1)
15.0,89,14,Senior (Y4)
6.5,68,9,Junior (Y3)
10.0,78,11,Sophomore (Y2)
2.0,48,5,Freshman (Y1)
9.0,75,10,Senior (Y4)
7.5,70,9,Junior (Y3)
11.5,82,13,Senior (Y4)
5.5,63,7,Freshman (Y1)
13.0,85,13,Senior (Y4)
14.5,92,15,Senior (Y4)
1.5,45,4,Freshman (Y1)
16.0,95,15,Senior (Y4)
11.0,80,12,Sophomore (Y2)
6.0,66,8,Junior (Y3)
8.5,73,10,Junior (Y3)
4.0,58,6,Freshman (Y1)

• Click on the plus icon (+) next to 'Data'.

You have two options for uploading your data:

1. Upload a file from your computer in CSV or TSV format.
2. Paste from a spreadsheet or type your data directly into the text area.

In this example, we will copy and paste the data above.

• After pasting the data, click on 'Add data'.

Your data should now be visible in a datatable. In the datatable columns with numeric values are blue, and the text columns are green.

If you want to change one of the column names, just click on the column header and overwrite the new name. If you want to change one of the values, just click on the cell and overwrite the value. And at last, if you want to rename the dataset, click the id text-field in the data panel, and overwrite the id.

• Rename the dataset to Student Data.

In Datapicta you have textfields for id and for name. The id is for your convenience as a creator, and name is what will be shown in the chart if applicable.

Create the scatter plot

• Click on the plus icon (+) next to Picta.
• Select Scatter from the list of pictas.

A basic scatter plot should now be visible.

Add labels

When you added the scatter picta, DataPicta automatically added the horizontal and vertical axes for you. You can make changes to these axes by clicking on them in the picta panel. To make the chart easier to understand, let's add some axis labels.

• Click on the Horizontal axis in the picta panel.
• In the Name text-field type Study Hours per Week
• In the Location dropdown, select End
• Now click on the Vertical axis in the picta panel.
• In the Name text-field type Exam Score
• In the Location dropdown, also select End

Add a title

To give the chart some context, let's add a title.

• Click on the plus icon (+) next to Canvas.
• Select Title from the list of options.

A new panel appears under Canvas, which is opened by default.

• In the Text text-field, type Student Study Hours vs Exam Scores

Size the bubbles

To represent the attendance data, we can size the bubbles based on the attendance field.

• Click on the plus icon (+) next to Canvas.
• Select Visual Axis from the list of options.

A new panel appears under Canvas, which is opened by default.

• In the Mapping type dropdown, select Gradient, this means that the bubble size will vary continuously based on the data values.
• In the Field dropdown, select attendance from the list of fields in the dateset.
• In the Range section, set the Min value to 5 and the Max value to 15. These are the minimum and maximum values seen in the data for attendance.
• Enable the In Range option
• For the Min symbol size, enter 5 and for the Max symbol size, enter 25. These values control the size of the smallest and largest bubbles in the chart.
• Also pick a grey color for this visual axis, this color will be used in the legend and for the bubble sizes. But we will later color the bubbles based on the student groups.

Position the legend for the bubble sizes:

• In the Horizontal location dropdown, select Center
• In the Vertical location dropdown, select Bottom
• In the Orientation dropdown, select Horizontal

Interactive features:

• Click on the Handles checkbox, this will add handles to the legend that allows you to filter the bubble sizes interactively, try it!

Because we will add a second visual axis, we better rename this one to avoid confusion.

• Click on the id text-field and change the id to Bubble Size

Color the bubbles

To represent the different student groups, we can color the bubbles based on the group field.

• Click on the plus icon (+) next to Canvas.
• Select Visual Axis from the list of options.
• A new panel appears under Canvas, which is opened by default.
• In the Mapping type dropdown, select Segmented, this means that each unique value in the field will get its own color.
• In the Field dropdown, select group from the list of fields in the dataset.
• In the Horizontal location dropdown, select Right
• In the Vertical location dropdown, select Middle
• In the Orientation dropdown, select Vertical
• Enable the In Range option
• Click in the Palettes button and choose an nice color scheme, we choose the first option.

The legend for the student groups is also interactive, just click on a group in the legend to disable/enable it in the chart.

• At last rename the visual axis to Bubble Color by changing the id text-field.

Dont forget to save your work by clicking the save icon in the topbar!