-
Download Tableau Public for free for data visualisation.
-
Resources to embed Tableau Visualisations in a website
- Head to the SQL Compiler and make sure the top tab has "MySQL 5.7".
- In a new tab, up the text file containing our practice database- meetup-db.txt.
- Copy the text from the
meetup-db.txtfile and paste it on the left side of the SQL Compiler. - Press the "Run" button to create the database.
- Congratulations! You've built a database.
- Let's create a new row in the database. Underneath the following line (probably around line 50 in your SQL Compiler).
INSERT INTO students (first_name, profession, age, gender)
VALUES ('Johnny', 'Marketer', 32, 'M');
Add in a new student to the database. The syntax should follow the above example. 7. Make sure to run the query for the student to be added.
- Let's return all of the students.
SELECTandFROMwill be helpful. - Next, return all of the meetups.
- Next, return all of the students who are female. Make sure to use
WHERE. - Refine your last query: return all of the students who are female- but only return their
first_nameandprofession. - Next, let's use
COUNTandGROUP BYtogether. Return the number of students who have the same age. Make sure toCOUNTthestudents.agecolumn andGROUP BYagewithin the query.
- Let's write a
JOINquery. We need to join our tables together:
SELECT *
FROM meetups
JOIN meetup_students
ON meetups.id = meetup_students.meetup_id
JOIN students
ON meetup_students.student_id = students.id;
- Return only the
meetups.titleand thestudents.first_name. - Next, let's run a query to
COUNTthe number of students per each meetup. Remember to useGROUP BY.
SELECT meetups.title, COUNT(meetup_students.student_id)
FROM meetups
JOIN meetup_students ON meetups.id = meetup_students.meetup_id
GROUP BY meetups.title;
- Download Tableau Public.
- Open up Tableau Public on your laptop.
- Import an excel spreadsheet or connect to a Google Sheet.
- Create a custom visualisation:
- Try to drag different
Dimensions&Measuresinto theColumns&Rowsat the top of your view. - Once you're ready, at the bottom of the Tableau view there should be an icon that lets you Create a New Dashboard.
- Open the new dashboard, and drag your visualisation from the sidebar on the left of your screen under
Sheets.
- You're ready to publish! Click on
Fileat the top of the navbar & clickSave to Tableau Public As.... This will let you post your visualisation on the Public Tableau Server- and will let share the link or embed it in a website. Saving this should open your Tableau Visualisation in a new tab in your browser. - Congratulations! You have a live data visualisation.
-
Once your visualisation is on Tableau Public's Server, in your broswer scroll to the bottom of your visualisation. There should be an icon with three bubbles connected by lines. Click on this icon.
-
You'll see a pop-up window with two fields. The
Linkyou can copy directly and share with others. Please note: if there is an error sharing, they may need to also have a Tableau Public account. -
IF you would like to embed the visualisation in a website, the pop-up window has an
Embed Codeoption. Copy this. -
If you are starting a fresh website, you can create an
index.htmlfile. Within your<body>tags, post the text from theEmbed Codeoption. That should be everything you need.
In your index.html it should look similar to this:
<html>
<body>
-- paste the text from the Embed Code field --
</body>
</html>
- Open your
index.htmlfile in a browser- your visualisation should be there!
- Sign up for Google Analytics.
- Create an Account.
- Create a Property.
- Click
Adminat the bottom left of your page. Once there, underProperty, clickData Streams. - Under
Data Streamsin the right pane, you should see an option to add a Web/your website. - Once completed, you'll see a bar with your website information. Click this.
- A new window will open, and you'll see
Tagging Instructionspart way down. - Expand the
Global Site Tag (gtag.js)tab. - In the expanded area under
Global Site Tag (gtag.js), copy the code. - Paste this code into the
<head>of your main HTML page/index.html. - It will look similar to this:
<html>
<head>
-- Your pasted Google Analytics Tag scripts --
</head>
</html>
- Congratulations! Now you can track how your users are interacting with your app.
If you need any help, feel free to reach out to me at:
The Slide Deck from today.