Something like infographic 2

A Processing sketch of something like donut charts.

The length, position and color of each section change as time proceeds.

Built with Processing and Processing.js

As William Cleveland and many other experts presented, pie chart and its variants (including donut chart) aren't very good options for representing and communicating quantitative information with accuracy.

But still, I think I have to admit that they are somehow attractive.

Source code:

// Processing 3.2.1

ArrayList<Donut> donuts = new ArrayList<Donut>();

void setup() {
  size(320, 240, P2D);
  background(255f);

  donuts.add(new Donut(0f, 0f, 50f, 10, 40f, false));
  donuts.add(new Donut(0f, 0f, 75f, 10, -5f, true));
  donuts.add(new Donut(0f, 0f, 100f, 10, 65f, false));
}

void draw() {
  translate(width / 2, height / 2);
  colorMode(HSB, 100f);
  background(0f, 0f, 100f);
  
  float tmpAngle = radians(frameCount);
  
  for(Donut currentDonut : donuts) {
    currentDonut.reflect(100f * cos(tmpAngle), 100f * sin(tmpAngle));
    currentDonut.update();
    currentDonut.draw();
  }
}

class Donut {
  ArrayList<DonutSection> sections = new ArrayList<DonutSection>();
  
  final float positionX;
  final float positionY;

  final float radius;
  
  final float marginAngle;
  float offsetAngle;
  final boolean reverseFlag;
  
  Donut(float posX, float posY, float r, int sectionNum, float huePrm, boolean revFlag) {
    positionX = posX;
    positionY = posY;
    radius = r;
    
    marginAngle = -radians(1);
    reverseFlag = revFlag;
    
    for(int i = 0; i < sectionNum; i++) {
      sections.add(new DonutSection(huePrm));
    }
  }
  
  void draw() {
    noFill();
    strokeCap(SQUARE);
    strokeWeight(15f);
    ellipseMode(RADIUS);

    for(DonutSection currentSection : sections) {
      offsetAngle += marginAngle / 2;

      float arcAngle = currentSection.getArcAngle(getTotalQuantity());
      stroke(currentSection.getColor());
      arc(positionX, positionY, radius, radius, offsetAngle, offsetAngle + arcAngle - marginAngle);

      offsetAngle += arcAngle;
      offsetAngle -= marginAngle / 2;
    }
  }
  
  float getTotalQuantity() {
    float totalQuantity = 0f;
    for(DonutSection currentSection : sections) {
      totalQuantity += currentSection.getQuantity();
    }
    return totalQuantity;
  }
  
  void reflect(float x, float y) {
    if (reverseFlag) {
      float tmp = x;
      x = y;
      y = tmp;
    }
    for(DonutSection currentSection : sections) {
      currentSection.reflect(x, y);
    }
    offsetAngle = atan2(y - positionY, x - positionX);
  }
  
  void update() {
    for(DonutSection currentSection : sections) {
      currentSection.update();
    }
  }
}

class DonutSection {
  static final float NOISE_SCALE = 0.005f;
  float quantity;

  float hueParameter;
  final float saturationParameter;
  final float brightnessParameter;
  
  float seed;
  
  DonutSection(float huePrm) {
    setHue(random(huePrm - 5f, huePrm + 5f));

    switch(int(random(10f))) {
      case 0:
      case 1:
      case 2:
        saturationParameter = 0f;
        brightnessParameter = 100f;
        break;
      case 3:
        addHue(50f);
      default:
        saturationParameter = 70f;
        brightnessParameter = 90f;
        break;
    }

    seed = random(0f, 100f);
}

  color getColor() {
    colorMode(HSB, 100f);
    return color(hueParameter, saturationParameter, brightnessParameter);
  }
  
  float getQuantity() {
    return quantity;
  }
  
  float getArcAngle(float totalQuantity) {
    return TWO_PI * quantity / totalQuantity;
  }
  
  void setHue(float huePrm) {
    hueParameter = (huePrm % 100 + 100) % 100;
  }
  
  void addHue(float hueDistance) {
    setHue(hueParameter + hueDistance);
  }
  
  void reflect(float x, float y) {
    quantity = noise(seed + x * NOISE_SCALE, y * NOISE_SCALE);
    quantity = pow(quantity, 3);
  }
  
  void update() {
    addHue(0.05f);
  }
}