Calendar based nisualization of one kind of activity

by React

Quantify Your Year

Calendar-based visualization of one kind of activity over the course of a calendar year.

View demo View Github

URL and Datasets

The URL would be your_project_address/#/[AUTHOR]-[ACTIVITY_TOPIC]-[YEAR].
Name your setting and data files following the convention above (e.g., tanyoung-swimming-2016.json).

Also update src/settings/datasets.json if you want to show this dataset in the selection menu on top of the page.

Setting File Format

The setting file contains following information. For example,

{
  "year": 2016,
  "author": "Tanyoung",
  "gender": "female",
  "topic": "swimming",
  "pastVerb": "swam",
  "type": "distance",
  "considerFrequency": true,
  "metric": "yard",
  "abbr": "yd",
  "color": "blue",
  "alt_unit": "meter",
  "conversion": 1.09361,
  "alt_abbr": "m",
  "decimal": 1,
  "hasNegative": false,
  "isReverse": false,
}
  • Gender: gender of the person, choose from female, male, and other
  • Past Verb: a past tense verb matching the activity topic
  • Type: Measurement of the activity, e.g., duration, distance, steps
  • Metric: Unit of the type, use singular form. e.g., minute, meter, step,
  • Abbribiation (optional): Same as metric if no abbreviation is common. e.g., m, yd, km
  • Consider Frequency: False if most of the days have data so the number of days with valid data does not give insights.
  • Color (optional): Choose the highlight color from blue, red, teal, green, purple. If not configured, one color is randomly selected.
  • Alternative Unit (optional): Specify an alternative unit if it exists.
  • Alternative Abbribiation (optional)
  • Decimal (optional): If the data values contain decimal number, specify.
  • Has Negative: If the data contains negative values, specify as true.
  • Is Reverse: If the data contains negative values, and the negative ones have positive meanings (e.g., production/consumtion of energy of solar panels)

If the frequency matters (e.g., one may not swim every day), this project provides further analysis including consecutive days/week/month.

Save this file as [AUTHOR]-[ACTIVITY_TOPIC]-[YEAR].json under src/settings.

Data File Format

The data should be an array of dates with valid numbered data value. For example,

[
  {
    "date": "1/2/2016",
    "value": 2600
  },
  {
    "date": "11/30/2016",
    "value": 2600
  }
]

Save this file as [AUTHOR]-[ACTIVITY_TOPIC]-[YEAR].json under src/data.

If you log your data on Google Spreadsheet, try this convenient converter.

I wrote some Python scripts to generate both dataset and setting JSON files with downloadable data from Facebook, Twitter, Google Takeout, PG&E, iOS Health App, and Metromile. Check out this repo.

Development

npm install
npm start

Build

For production-ready files

npm run build

Made with React

This project was bootstrapped with Create React App.

GitHub