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

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.