This repository contains the code covered in the talk, A Practical Introduction to Data Visualization for Data Scientists, at ODSC East 2024.
Presentation slides available here
This is an Observable Framework project using Observable Plot to create the charts. After downloading the code or cloning the repo, open a shell and run the following command inside the directory:
npm install
To start the local preview server, run:
npm run dev
Then visit http://localhost:3000 to preview your project.
For more, see https://observablehq.com/framework/getting-started.
This code was built on top of the Framework Google Analytics example. Follow the instructions below (copied from the original README) to see your own GA data. In addition to changing the variables below, you will also have to delete the .csv files in the data folder.
This dashboard tracks data from Google Analytics using the Google Analytics Data API. It contains a single page in docs/index.md.
View the live project.
To connect the data loaders to the Analytics API, you will need to set up a .env file at the root of this directory with three variables:
GA_PROPERTY_ID=111111111
GA_CLIENT_EMAIL=xxxx@yyy.gserviceaccount.com
GA_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nxxxxxxxxxx-----END PRIVATE KEY-----\n"
There is also a hard-coded path in the data loaders (in this case, to define a stringFilter that restricts the loader to views on the Observable Plot documentation); you can modify it with a different path or remove it entirely.
The Google Analytics API Quickstart guide will walk you through how to set this up for your own instance of Google Analytics.
The dashboard displays a variety of charts, made with Observable Plot. With the key numbers at the top, a line chart or an area chart. Activity by country is represented by a choropleth map. Active users use a horizon chart, faceted by channel. The “new vs. returning” chart is a Marimekko. Finally, the activity by day and hour is a punchcard chart. The code for each of these charts is available in docs/index.md.