A Summary of Some of My Visualizations

The purpose of this page is to summarize in one place some of the interactive visualizations I have worked on. Most of these were built with d3.js, and all of them were javascript side projects I was simply interested in exploring.

Summary of Interactive Visualizations
Title Link Description

World Births and Deaths, Simulated in Real-Time

Link

This is a statistical simulation of births and deaths across the globe, using country-specific birth and death rates, coupled with the populations of about 20,000 cities around the world.

It is one thing to read about there being about 4 births per second, and 2 deaths per second, but it is quite another to see how it may be playing out. This has appeared in The Atlantic and The Atlantic Cities, and was recognized in July 2014 by PCWorld.com as one of "10 sites with stunning visual data that will change your world view." The visualization also helps you realize just how big the world is (collaboration with Bill Snebold).

There is also a Chrome app for this you can get here.

Exploring Family Trees

Link

Link to Test Showing Lifespans as Well

This is an interactive visualization that load your own family tree from a GEDCOM file, or load one of several samples (including the British monarchy and its demonstration of pedigree collapse). Since the people are placed on the timeline based on birth year, you can see the staggering in time of generations.

You can also have it use flags based on a person's birth place, and have it highlight potential immigrants to the USA, which can be tedious to locate even in relatively small trees.

A summary of many of the features of the visualization is available in this blog post.







emojiviz

Link

This visualization uses an api written by Matthew Rothenberg as part of his emojitracker project (http://emojitracker.com/) that provides real-time counts of the uses of emojis in tweets. The visualization displays the emojis in an Archimedean spiral that updates based on the real-time changing popularity of emojis (although the set of top emojis is fairly constant).

You can also watch the real-time tweets themselves that use a particular emoji by clicking on the emoji in the spiral.

I wrote up some notes on how I put this together at http://www.nowherenearithaca.com/2015/11/emojiviz-experiments-with-visualization.html.

Exploring the Black-Scholes Equation

Link

The Black-Scholes equation is used in pricing options. This visualization has two components:

  • you can explore the "Greeks" in the Black-Scholes equation
  • you can explore and create different option strategies and see the resulting profit-loss curves, and find option strategies that fit a given profit-loss curve (the latter is still experimental)



I wrote up notes on developing this visualization in a sequence of blog posts:

US Births and Deaths, Simulated in Real-Time

Link

This is a statistical simulation of births and deaths in the United States, using the annual average birth and death rate for the country.

Population information for all US counties and thousands of US cities is included to simulate the location of the events (collaboration with Bill Snebold).

Exploring the US Federal Budget, 1962-2019

Link

This visualization lets you explore various aspects of the US Federal Budget, based on data from the Office of Management and Budget for 1962-2019.

You can see the general breakdown of receipts and spending, drill down to individual line items, and show charts of how those line items over time.

When were you conceived?

Link

What started off as simply an experiment in viewing the popularity of birthdays evolved into an interactive visualization that lets you see the popularity of "conception days", as well as be able to explore when the conception day was for a given birthday.

I spent some time working to get this to be usable on a wide range of window sizes, even being dynamically responsive on-the-fly to the changing of the window size.

The birthday popularity data was from New York Times, which itself was based on data for the years 1973-1999 collected by Amitabh Chandra of Harvard.

Exploring Preattentive Attributes

Link

When shown an image, there are some visual properties that we can detect effortlessly and almost instantaneously - they "pop out." These are referred to as preattentive attributes, and knowing about them can be useful for creating more effective visualizations. This visualization actually consists of more than 30 different interactive visualizations that let you explore different preattentive attributes.

Exploring Change Blindness

Link

This visualization lets you explore change blindness, which (wikipedia) defines as a "perceptual phenomenon that occurs when a change in a visual stimulus is introduced but not noticed."

You can compare how well you do detecting the differences between two images by comparing them side-by-side, having them flicker between each other, or fade into each other.

Exploration of the US Judicial System

Link

This visualization includes data from more than 300 US courts (federal and state), showing how they are (generally) connected in terms of how appeals flow.

Moving your mouse over the courts will display detailed information on the court, with links to the web pages for the individual courts themselves.

This visualization has been donated to and will be incorporated into the Free Law Project’s CourtListener site.

Flame of Life

Link

This is a d3.js/three.js interactive visualization that may provide some perspective on life.

The probability of living to a certain age, given that one has lived to one age, is calculated based on the 2010 "period life table" from http://www.ssa.gov/oact/STATS/table4c6.html. There is a separate table for males and females. Some more technical notes on this visualization are in this blog post.

Tennessee Legislation Explorer

Link

The purpose of this evolving project is to play with different ways to explore the activity for bills introduced in the Tennessee General Assembly. The datasets upon which this is based are from Legiscan, where "weekly snapshots of current sessions are created each Sunday morning with updated information."

World Tweet Map, Searchable in Real-Time

Link

This uses the Version 1.1 Twitter API to let users search in real-time for public tweets across the globe. This one of my first projects using node.js (some notes on this are in this blog post).

This was built with d3.js, node.js, mongoose, express, passport.js, request.js, and is deployed on the free tier of RedHat's OpenShift platform. The overall design is (obviously) based on the world births/deaths visualization I did in collaboration Bill Snebold.

US Tweet Map, Searchable in Real-Time

Link

This uses the Version 1.1 Twitter API to let users search in real-time for public tweets in the US. This was my first project using node.js (some notes on this are in this blog post).

This was built with d3.js, node.js, mongoose, express, passport.js, request.js, and is deployed on the free tier of RedHat's OpenShift platform. The overall design is (obviously) based on the US births/deaths visualization I did in collaboration Bill Snebold.

When Will I Win the PowerBall?

Link

We all kind of know there's a tiny chance of winning the lottery. This visualization gives some perspective on how that tiny chance translates to when you might expect to win, if you played twice a week.

This was featured in an article by John Metcalfe on the Atlantic's CityLab site, and was even mentioned in an article on a Hungarian banking site.

Spoiler: You probably need a million years or so. Fran Lebowitz has a point here: "I've done the calculation and your chances of winning the lottery are identical whether you play or not."

Time & Money

Link

What's it like to see money go by in real-time for a given salary, for an hourly rate? How much is that meeting costing somebody in real-time? What about the US budget? The total salary of Congress and the executive branch? Someone on minimum wage? This visualization lets you see.

You might learn some information about the history of some of our currencies, too. I didn't know there was such a thing as a $100,000 bill.

Exploring the Arithmetic Mean

Link

This visualization is intended to provide insight into the statistical average/mean - admittedly a simple topic, but I wanted to do it, anyway.

You can drag the bars around, and see how the equation and final result changes.

Exploring the Lognormal Distribution

Link

The lognormal distribution is applied in many areas. This visualization lets you see how its parameters and shape interact, as well as for the underlying normal distribution.

You can drag bars around or drag inside the textboxes to change the various parameters. In addition, the underlying equation for the probability density function for both the lognormal and the underlying normal distribution is rendered via the beautifully rendering MathJax mathematical typesetting library.

There is also a Chrome app for this you can get here.

Visualizations to Help Understand Quicksort

Divide-and-Conquer

Basic Partitioning

Bentley/McIlroy 3-Way Partitioning

Yarovslavskiy Partitioning

This is a series of interactive visualizations to help provide insight into how QuickSort works, currently culminating in the breakthrough dual partitioning method due to Vladimir Yarovslavskiy in 2009 that has since been incorporated into the Java 7 runtime (in collaboration with Jon Bentley and Joshua Bloch).

For each visualization, there are relevant annotations that are shown as the sorting/partitioning progresses.




With the Yarovslavskiy visualization, I include the relevant pseudosource code, and highlight the relevant line based on where in the partitioning process you are.

Exploring the Google PageRank Algorithm

Link

This visualization lets you play around with a small system to learn how the original Google PageRank algorithm works.

You can add/edit/delete links, see details on the relevant matrix calculations and how they are related to the links themselves, and watch the intermediate steps in the convergence of the algorithm to arrive at the ultimate PageRank values.

Bayesian Bandit Explorer

Link

Inspired by Ted Dunning's work, this visualization lets you watch and interact with how so-called Bayesian Bandits work. This approach is among those being used for determining which ads to use on internet sites, as the rankings of ads can be updated in (essentially) real-time based on click-through rates.

You can change the underlying probabilities while it is running to see how the algorithm responds - which can be kind of neat.

Note that John Myles White at Facebook has also written a book on how to use the same underlying core approach for website optimization.

Text Analysis Bigram Explorer

Link

This app lets you explore "interesting" bigrams as ranked by Log-Likelihood ratio, a simple-to-calculate statistic described in detail in Ted Dunning's thesis and later writings.

You can choose from a number of pre-selected texts (Alice in Wonderland, All of the Works of Poe, etc.) or upload your own text file.

Co-occurence Matrix Explorer, for understanding how a Simple Recommender System Works

Link

This visualization is intended to provide some insight into how recommender systems work. There can be a lot of matrix algebra with these things, and so all of the relevant matrices are shown, with mouse-over activated highlighting showing how the parts are connected.

Note that this visualization does not address some of the fancier ways of ranking items, such as by the LogLikelihood ratio - see this talk by Ted Dunning for a some more info on that. Rather, this visualization shows how you go from a file that contains the interactions between users and items, to the ultimate recommendation weights for a new user who has interacted with some of the items.

Exploring SVG Markers

Link

Frustrated with trying to get SVG markers to work, I put this together as one way to help understand how the myriad of parameters actually affect the end result.

Inspired by some of the work of Bret Victor, you can simply drag your mouse in the little textboxes to gradually change the parameters to see how they affect the rendered markers.

Determine Your Blue/Black or White/Gold "Dress Level"

Link

In February 2015, the internet went crazy over the ambiguous colors of a dress. The original question about it is here. Some people see it as blue and black, and some people see it as white and gold.

This simple tool lets you determine what "level" your blue/black or white/gold is - it varies by person.

Not included here but was fun to make and interesting to watch (both done with Bill Snebold) - an app to search and view Vines ("VineFinder"). This stopped working when twitter made good on their threat to remove the (essentially unlimited, as far as I could tell) non-authenticated search api. The new api required authentication (which is not a problem), but was severely rate-limited (which is a problem, based on how the searches were made across the US by latitude/longitude so as to get adequate coverage). If you visit this app site now, you'd get a very quiet screen, as the backend of the app is sadly sending out its search requests dutifully, but receiving nothing back from twitter but HTTP 410 Gone: "The requested resource is no longer available at the server and no forwarding address is known."

Putting all of these visualizations together forced me to learn more about javascript than I had known was there, and alas I feel there is so much more to learn. What a curious thing, given my insufficient respect for this language just over a year ago.

Popular Posts