https://github.com/observablehq/odsc-visualization
Code for talk at ODSC East, Europe, and West 2024
https://github.com/observablehq/odsc-visualization
Last synced: 2 months ago
JSON representation
Code for talk at ODSC East, Europe, and West 2024
- Host: GitHub
- URL: https://github.com/observablehq/odsc-visualization
- Owner: observablehq
- Created: 2024-04-19T04:13:21.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-12T20:55:47.000Z (10 months ago)
- Last Synced: 2025-03-28T11:51:11.599Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 80.1 KB
- Stars: 12
- Watchers: 4
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ODSC Intro to Data Visualization
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](https://docs.google.com/presentation/d/1C9V93nSmYCJaQV7ytD2dTzh7GCPTNNzUOTjqF4fWDak/edit?usp=sharing)
This is an [Observable Framework](https://observablehq.com/framework) project using [Observable Plot](https://observablehq.com/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 to preview your project.
For more, see .
## Google analytics example
This code was built on top of [the Framework Google Analytics example](https://github.com/observablehq/framework/tree/main/examples/google-analytics). 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](https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries). It contains a single page in `docs/index.md`.
View the [live project](https://observablehq.com/framework/examples/google-analytics/).
## Data loaders
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
[email protected]
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](https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries) guide will walk you through how to set this up for your own instance of Google Analytics.
## Charts
The dashboard displays a variety of charts, made with [Observable Plot](https://observablehq.com/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](https://github.com/observablehq/framework/blob/main/examples/google-analytics/docs/index.md).