Code Monkey home page Code Monkey logo

comparotron's Introduction

Comparotron: a simple way to visualize and share comparisons.

Intro

Comparotron allows users to quickly create simple comparative visualizations.

There are already many graphing and apps out there so what's different about comparotron?

The essence of the idea is simplicity and the power (and freedom) of constraints: comparotron is only about comparisons and limits you to just one or two numbers. That's it. No more, no less. We think that this constraint is powerful -- and fun! And lends itself to quick, creative story-telling.

As pictures πŸ“· are worth a thousand words let's dive in with some mockups that give a sense of the idea.

The first mockup of the idea (by David McCandless) in 2010

The first mockup of the idea (by David McCandless) done for the Where Does My Money Go project (2010)

New mockups created as part of Open Data Day 2020

This is all real data by the way!

History

The concept originated in 2010 as part of Where Does My Money Go when looking for ways to present government spending effectively. Giving a real sense of this kind of data can be hard because of the size, variety and abstractness of the figures -- what does $3bn of aid spending really mean?

Introducing comparison can help provide context, tangibility and "meaning". For example, we can compare aid spending to other spending items such as spending on the military which will given a relative sense to the aid number.

Or, alternatively, we could compare aid expenditure to some external more "every-day" figure; for example, the cost of a loaf of bread of a teacher's salary yielding a comparison like "aid spending is equivalent to employing 10,000 teachers for a year".

Getting to an MVP

A central part of the original conception was a rich experience for user's to find/select the data points they wanted to use. This made sense if you already had a database of government spending data. Even when I moved away from this idea to allow all kinds of numeric data (in comparotron v0.1 in 2012), this assumption continued to inform the approach and I spent most of my effort on the functionality and UX for searching for and selecting data ptoints (indeed, I spent plenty oof time wondering about where data would be stored and come from e.g. would it be in elastic search, where would I source GDP per capita from etc).

But thinking about this, we can simplify a lot:

  • Simplication 1: we can assume the user will find the data points and enter that info themselves => no need for fancy search or data sourcing
  • Simplication 2: that still leaves us with an editor (and backend) for people to create "compares" ... but what about just using static website tech and storing this in markdown+frontmapper => no need for an editor, backend or APIs -- just use your text editor, markdown files and git(hub) as backend

Thanks to MVP approach we're gradually moving from building a complex πŸš— to making a much more manageable πŸ›Ή Yeah πŸ‘Œ

Essential user flows

What are the essential user flows? There are just two:

  • Create: create a "compare" by entering one or more "factoids" (plus a title)
  • Show: display the comparison in a beautiful and elegant way

MVP approach to these:

  • Create: use a simple markdown file with frontmatter, edit it in a text editor, and push it to github (Even simpler: hand-craft this in a drawing app!)
  • Show: let's use a static site generator to build the site and some basic JS (or even CSS) for the visualization

comparotron's People

Contributors

rufuspollock avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

comparotron's Issues

Comparotron Idea

This is part of the original outline for the idea from 2010/2011

The Compar-o-tron B helps users to discover and share the proportions between different classes of government spending. This satisfies the need to contextualize individual items, policies or functions of government by contrasting them with one or many more tanglible other items.

Originally at openspending/openspending#31

Images

A first mockup done for original WDMMG project. One might do things quite differently for this version ...

6_wdmmg_3_compareotron2

Functionality

  • The Compare-o-tron helps users to find spending classes by filling a shopping cart.
    • This can be filled either while browsing the site in normal mode (i.e. via treemaps, bubblecharts) or through a direct search function.
    • Search results may already be presented as bubbles. Search should have auto-complete.
    • Care should be taken to warn the user if they attempt to include nested items (e.g. "Defense", "200 new Tanks" - which is part of the Defense budget).
    • The selected items can include: entries, classifiers, entities. Each of these needs to be assigned a unique, "typical" value, e.g. for "Defense" in COFOG this could be "annual expenditure in 20xx", for "Mineral Oil Taxes" in the German FKP it could be "annual projected revenue for the current year".
    • The selected items should also have color and icon specifications associated.
  • After selection a few items, these will be presented in a joint graph as bubbles.
    • Each compare-o-tron receives a unique URL, either by saving the cart to the DB or by URL-encoding it.
    • The user creating the compare-o-tron may also want to comment on the diagram.
  • A gallery of existing compare-o-trons is available.
  • Compare-o-tron can be embedded into another article, e.g. a news story.

Implementation

The key features for compare-o-tron are:

  • Named items (things that can be added to the cart)
  • The cart
  • The ability to display non-related bubbles.

The following would be one option to implement the back-end for named items:

  1. Introduce another section in the mapping with the following format:

"named_items": {
"cube_query": { ... }
"name_key": "some_dimension.label",
"color_key": "some_dimension.label",
"weight_factor": 0.5, # will be used to scale volume.
"default_color": "..."
}
(rinse, repeat for icons if needed)

  1. Add an extension point to generate_views in the loader
  2. Hook into this and generate a db.dataset_name.named_items collection with the named attributes and amount from the drilldown.
  3. Query this collection via a custom controller.
  4. Visualize as bubbles.

More Information

  • page in wiki: http://wiki.openspending.org/Visualization_Comparotron
    • Mockup: see attached image.
      • RP: items on left side are results of search so far. You can drag these across to right. Should then be able to hide search list and share with friends.
      • RP: note this is mockup and does not have to determine final design

MVP (2020)

For overview of the idea see the README.

Needs: User flows and Features

  • Create: use a simple markdown file with frontmatter, edit it in a text editor, and push it to github (Even simpler: hand-craft this in a drawing app!)
  • Show: let's use a static site generator to build the site and some basic JS (or even CSS) for the visualization

Future stuff

  • Show
    • show total views
    • comments (?)
  • Edit
    • Auto color (or auto offer a color palette)
    • Icon selector (auto select?)
    • Font selector (auto select)
  • General
    • Extract figures people enter into a place where they can be searched and reused

Design

Info architecture

/
/@{username}/{slug}
/@{username}/
/add

Domain Model

  • Factlet
  • Compare: a comparison involving
    • We could also allow a single figure "compare" even though a bit odd given the name

Structure of a "compare"

---
title: XYZ
factlets:
  - title: 
  - value: 
---

ABC

*ABC*

Plan: Tasks

  • Skeleton repo (maybe use vuepress as quick to look nice an we like vue)
  • Stub one page
  • Set up deployment
  • How do we do the drawing of the shapes (circles, squares etc)

Future

  • Find icon source (noun project terms are so restrictive its difficult to describe it as open source anymore)
    • icons8 also seems you have to pay to get access to stuff ...
    • fontawesome

NTS

  • finding numbers (if automated) is hard (where do you get GDP of burkina faso from etc)
    • But no reason this can't be hand done ...
  • Where do we store data?
  • Aside: Unsplash for data ... => curation at the start ...
    • What's equivalent of a photo? A single data point i think (or, just, maybe a time series)
    • Unsplash started in classic MVP way: just a blog (with dropbox for downloading)

[inbox] Ideas for compares

[viz] Gambling Spending vs other entertainment in the US

Inspiration R. Shiller p.53 of Irrational Exuberance:

The amount people in the United States lost in gambling in 2000 was more than they spent on movie tickets, music recordings, theme parks spectator sports and video games combined.

Data: Christiansen Capital Advisers: Gross Annual Wager 2003 - Revenue By Industry, Dollar and Percentage Changes from 2002 (pdf)

NB: unfortunately that PDF is now unavailable and 30m of fruitless searching did not turn it up (it appears all of those papers have moved to University of Las Vegas though i suspect PDF disappeared simply due to bitrot https://www.library.unlv.edu/speccol/finding-aids/MS-00561.pdf?utm_source=September+2017+Center+for+Gaming+Research+Update&utm_campaign=September+2017&utm_medium=email

Originally Jan 2013 and posted in rufuspollock/ideas#28

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.