// Tableau · D3.js · Power BI · Observable

Scientific Data
Visualization — 3 Platforms

Visualization principles across Tableau (Global Superstore shipping cost analysis), D3.js via Observable (Iris dataset), and Power BI (tech layoffs). The D3.js component built a fundamentally different mental model: a visualisation as a function from data to visual marks — applicable to custom clinical data visualisations. Scientific Data Visualization · Summer 2025 · UNT.

TableauD3.js · ObservablePower BISummer 2025 · UNT

Course Overview

Visualization principles across three platforms — from declarative to programmatic

Scientific Data Visualization · Summer 2025 · UNT · Prof. Dr. Zeenat Tariq

Tableau
Drag-and-drop dashboards, calculated fields, data storytelling. Global Superstore shipping cost analysis.
D3.js
Programmatic interactive visualisations via Observable notebook. Iris dataset — pie and scatter charts.
Power BI
Business intelligence dashboards with DAX formula-based measures. Tech layoffs dataset — stacked bar + regional pie.
Assignment 01 Tableau — Global Superstore Shipping Analysis Market × Sub-category · Side-by-side bars · Calculated fields

Shipping cost visualisation across Furniture, Office Supplies, and Technology sub-categories in Tableau. Key finding: Copiers have the highest shipping costs in Technology at £159,496 — visible only when broken down by sub-category, not category. This experience of visualisation as a discovery tool (revealing what summary statistics hide) applies directly to medical imaging cohort analysis, where aggregate performance metrics routinely obscure subgroup patterns.

Assignment 02 D3.js + Power BI — Iris Dataset & Tech Layoffs Observable · Programmatic encoding · DAX · Stacked column charts

D3.js via Observable: Iris dataset (150 samples, 3 species). Pie chart of perfectly balanced class distribution; multivariate analysis of sepal/petal dimensions using D3 interactive elements. Observable notebook: observablehq.com/d/aa9eb9017a90976c

Power BI: Tech layoffs dataset. Stacked column chart (companies × total layoffs, descending). Pie chart of layoffs by company filtered to Africa, Australia, South America — regional contribution with percentage labels.

Key learning — D3.js makes the structure of every chart visible

Tableau and Power BI abstract the chart into drag-and-drop operations. D3.js requires explicitly specifying how data values map to pixel positions, colours, and shapes — scales, axes, selections, and data binding. This gave a fundamentally different mental model: a visualisation is a function from data to visual marks. Directly applicable to designing custom clinical data visualisations that standard tools cannot produce — e.g., patient trajectory overlays, dose-response curves, or multi-site calibration plots.

TableauD3.jsObservablePower BIDAXJavaScript

View Tableau workbooks, D3.js notebooks, and reports.

All assignments and final project reports in the repository.

GitHub → Get in Touch