Skip to content

A collection of advanced dataviz examples using Vega, Vega-Lite, Deneb and Power BI.

License

PBI-David/Deneb-Showcase

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Deneb-Showcase

This is a collection of advanced dataviz examples using Vega, Vega-Lite, Deneb and Power BI. All the work is original and where this has been inspired by the work of others, I have pointed this out.

If you'd like help with customising these charts, feel free to reach out to me on LinkedIn for consultancy services.

Bank Failure Bubble Chart

I thought it would be interesting to plot the recent bank failures (as reported and managed by FDIC) against those from 2008.

Online editor (absolute)

Online editor (inflation adjusted)

Calendar Heatmap

A template for a multi-year calendar using Vega-Lite.

Inspired by the amazing Mike Bostock.

Online Editor

Convex Hull

An implementation of the Graham Scan algorithm for a convex hull using only transforms and signals in Vega.

Online Editor

Coronation Arc Chart

A dataviz made in Vega and PowerBI for the coronation of Charles III.

Online Editor

Covid Map (Animated)

An animated map using Vega showing the spread of Covid-19 across the UK using data from https://coronavirus.data.gov.uk/.

Topojson can be a bit tricky to get working in the certified Deneb visual (no loading from external sources) but the .pbix below shows this can be done by embedding the topojson inline.

Online Editor (click to start)

Deneb Bubble Text (Animated)

A fun animation showing transition between different words using Vega. Text co-ordinates were genenerated using P5.

Online Editor (click to start)

Inspired by the amazing Daniel Shiffman at The Coding Train.

Fireworks (Animated)

An experiment using Vega to create a firework simulation.

Online Editor (click to start)

Inspired by the amazing Daniel Shiffman at The Coding Train.

Force Direct Graph (Dynamic)

A force direct graph which supports pan, zoom, node drag, dynamic labels, network highlighting and arrows showing the transfer direction.

Online Editor

Gantt Chart

A Gantt chart implemented in Vega. Supports pan and zoom as well as day, month and year periods. Instructions for use in Power BI.

If you have a requirement for more advanced features like task baselines, more levels in the task hierarchy or hourly granularity, please reach out to me on LinkedIn.

Online Editor

Infographic Bar Chart

An infographic style bar chart implemented in Vega using data driven SVG paths.

Online Editor

Infographic Column Chart

An infographic style column chart implemented in Vega using data driven SVG paths.

Online Editor

Mario Bubble Art

Bubble art created in Deneb using Vega and a force transform. Instructions to create your own here.

Inspired by the amazing Flerlage Twins

Online Editor

Mekko Chart

A Mekko bar chart showing global miltitary spending in 2022 implemented in Vega using data from SIPRI.

Mekko charts come in two main flavours:

  1. A Mekko bar chart with the y-axis acting like a normal stacked bar chart but with a normalised x-axis (percentage based) so you can see the proportion taken by each major segment.
  2. A Marimekko chart where both the x-axis and y-axis are normalised (percentage based).

Online Editor

Organisation Tree Chart

An hierarchical tree chart implemented in Vega that supports colour coding of branches, expandable nodes, zooming and panning.

Online Editor

Pancake Spider Chart

A faceted spider chart which was my winning submission to a competition using a BBC Good Food pancake recipe dataset and built with Deneb, Vega and PowerBI. In Vega, each axis can have its own scale which is essential for comparing different dimensions.

Online Editor

Parliament Chart

A parliament chart created using Vega.

Online Editor

Inspired by the amazing Flerlage Twins

Particle Simulation Background

A simple particle simulation which can be used for a landing page background. Advanced version supports mouse repel and particle drag. Created using Vega.

Online Editor

Inspired by the amazing Frank's Laboratory

Population Bar Chart Race

A bar chart race showing world population by country from 1950 to 2023. Created using Vega.

Online Editor

Population.Video.mp4

President Age Range Chart

An original range chart of presidential ages created in Vega.

Online Editor

S&P Beeswarm Chart (Animated)

An animated beeswarm chart of the S&P performance from 07/07/21 - 06/07/22 made using Vega. The result can be quite hypnotic! Data was sourced from Yahoo Finance and scraped using Power Automate Desktop.

Online Editor

Inspired by Chartfleau.

Sankey Chart

Sankey charts (allvuial charts) are great for visualising a business process or simplifying a complex data flow like Microsoft’s FY23 Q2 income statement.

It is very configurable and I’ve tried to account for as many edge cases I can think of.

Online Editor

Inspired by:

https://www.sankeyart.com/sankeys/public/142/

Starfield (Animated)

A fun experiment using Vega to create a starfield simulation.

Online Editor (click to start)

Inspired by the amazing Daniel Shiffman at The Coding Train.

Tennis Grand Slams

A competition entry using a tennis grand slam dataset made using Deneb, Vega and Power BI.

Online Link

TopN Donut Chart

You’ve probably read that pie charts should be avoided at all costs in your reports but is this advice based on any actual evidence? Leland Wilkinson (author of the Grammar of Graphics which serves as the foundation for every modern data viz library) wrote the following:

I've heard a few opinions here about pie charts that are unsupportable. Statisticians (and designers like Tufte) rant about pie charts and their negativism creeps into blogs that users take for gospel. These rants are not based on solid psychological research and they are made by people who have no training in psychology. Allow me a story.

You can read his full thoughts here: vega/vega-lite#5676 (comment)

The conclusion is that pie charts should be your preferred choice for proportion of whole data but only when there are 7 or fewer categories.

Here is a Vega donut chart with TopN & Others functionality including an algorithm for non overlapping labels.

Online Editor

Unit Charts

Unit charts can be an engaging and eye catching tool to have in an analyst’s toolbox. Here's two created using Vega and Vega-Lite

Online Editor 1

Online Editor 2

Variance Chart

A useful variance chart created using Vega-Lite showing actuals, forecasts (or budgets), absolute variance and percentage variance.

Online Editor

Voronoi Scatter Plot

A Vega Voronoi scatter plot using the undocumented DAX clustering function KMeansClustering(). You can pass -1 as a parameter to have it automatically determine the optimal number of clusters, or provide a specific integer if you want to define the number of clusters yourself.

In the example below, you can see how the clusters generated by DAX compare to the actual penguin species (ground truth).

Inspired by Observable Plot: https://observablehq.com/@observablehq/plot-voronoi-scatterplot

Waffle Charts

Waffle charts break a lot of dataviz best practices but sometimes, you just need a striking visual to make the numbers stand out and pop in a report. They can also be ideal for infographics.

As well as the faceted percentage example below, I have also included versions for faceted absolute, stacked absolute and stacked percentage as each have their place.

Online Editor

About

A collection of advanced dataviz examples using Vega, Vega-Lite, Deneb and Power BI.

Resources

License

Stars

Watchers

Forks