Pie is a proof of concept data visualization app that simplifies the creation of bullseye plots from tabular data. It is an intuitive and user-friendly alternative to existing tools, like the one in Excel.
For a live demo, you can visit the app here.
A bullseye plot is a type of data visualization that represents data in concentric rings and slices, making it easy to compare data points across different categories. Pie takes tabular data and automatically generates an interactive bullseye plot that you can easily customize.
This demo uses a mocked data set generated with faker.js. You can imagine a spreadsheet of user data that looks like this:
| Name | Subscription Tier | Building Number | Chirality | |
|---|---|---|---|---|
| Moses Schönfinkel | Combinators@thingsInventedByMe.com | Buisness | 1 | Left Handed |
| Kurt Gödel | Incompleteness@thingsProvedByMe.com | Free | 4 | Right Handed |
| ... | ... | ... | ... | ... |
- Interactive Customization: Pie allows you to customize your bullseye plot in various ways, including selecting the columns that determine the chart's slices and rings.
- Data Representation: The rows of the mock data (representing users) are visualized as circles and sorted into their respective slices and rings using a variation on Llyod’s algorithm optimized to run on the your GPU. This way hundreds of circles can be placed efficiently, sorted and resorted, in real time.
- Color Coding: You can choose a specific column to determine the color coding of each circle, making it easier to differentiate data points.
- Filtering: Select a column against which to filter your data, focusing on specific subsets of the dataset.
- Shuffling: To aid in exploring the data, you can shuffle the order of the slices, rings, and colors
- Visit the app
- When the page loads, a random data set containing between 30 and 500 users is generated and columns for the chart’s slices, rings and color coding are randomly selected.
- To customize the chart, use the control panels on the sidebar:
- change encoding order: Rearrange the slices, rings, and color encodings by dragging the items in the control panel.
- select new columns: Use the dropdown menus to choose new columns for these encodings.
- filter data: select a column against which to filter the data, using the drop down, and use the check boxes to select values to filter out