factful-bubble-chart v0.0.1

What is Factful Bubble Chart?

Factful Bubble Chart is the bubble chart with 5 dimensions, 1. X axis 1. Y axis 1. Time 1. Size 1. Group

which is inspired by Hans Rosling's analysis method and his book titled "Factfulness".

See demo page: https://Tokky0425.github.io/factful-bubble-chart/

Installation

$ npm install --save factful-bubble-chart

Basic usage

1. Get your data ready

data.json

// Should be like...
[
  {
    "name": "Afghanistan",
    "group": "Asia",
    "content": {
      "1950": {
        "size": 7752.0,
        "x": 7.45,
        "y": 28.61
      },
      "1951": {
        "size": 7840.0,
        "x": 7.45,
        "y": 29.11
      }
    }
  },
  {
    "name": "Albania",
    "group": "Europe",
    "content": {
      "1950": {
        "size": 1263.0,
        "x": 6.23,
        "y": 55.26
      },
      "1951": {
        "size": 1287.0,
        "x": 6.29,
        "y": 56.07
      }
    }
  }
]

Fields

2. Create the component with the data

index.js

import React from 'react';
import {render} from 'react-dom';
import FactfulBubbleChart from 'factful-bubble-chart';

fetch('data.json')
  .then(response => response.json())
  .then(rawData => {
    const config = {
      x: {
        min: 0,
        max: 9,
        interval: 1,
      },
      y: {
        min: 20,
        max: 90,
        interval: 10,
      },
    };

    const App = () => {
      const timeKey = 1950; // Note that timeKey should be controllable in the real usage.
      return (
        <FactfulBubbleChart config={config} rawData={rawData} timeKey={timeKey}/>
      )
    };
    
    render(<App/>, document.getElementById('root'));
  });

Config

Callback arguments

3. Add your controller

Probably you want to add a controller that can update timeKey field to move the plots.

In the example below, Slider from Material-UI is used.

index.js

import React, {Fragment, useState} from 'react';
import {render} from 'react-dom';
import FactfulBubbleChart from 'factful-bubble-chart';
import Slider from '@material-ui/lab/Slider'; // Add this as your controller

fetch('data.json')
  .then(response => response.json())
  .then(rawData => {
    const config = {
      x: {
        min: 0,
        max: 9,
        interval: 1,
      },
      y: {
        min: 20,
        max: 90,
        interval: 10,
      },
    };

    const App = () => {
      const timeMin = 1950;
      const timeMax = 2015;
      const [timeKey, setTimeKey] = useState(timeMin);
      
      return (
        <Fragment>
          <FactfulBubbleChart config={config} rawData={rawData} timeKey={Math.round(timeKey)}/>
          <Slider min={timeMin} max={timeMax} value={timeKey} onChange={(e, val) => setTimeKey(val)}/>
        </Fragment>
      )
    };
    
    render(<App/>, document.getElementById('root'));
  });

3. That's it!

Enjoy Seeing the facts of the world.

Examples can be found in the demo page.

License

This project is licensed under the MIT License - see the LICENSE file for details