← Examples

ChartAccent Sub-Saharan Africa

Fertility rate against life expectancy for 191 countries, with a smooth outline that gathers the Sub-Saharan African countries into one region.

Open in live editor

import { Color, Shape, chart, circle, enclose, filter, project, scatter, selectAll } from "gofish-graphics";
import { gapminderCountries } from "./dataset";

const REGION_COLORS = {
  America: "#5aa3b8",
  "East Asia & Pacific": "#9cb850",
  "Europe & Central Asia": "#f2b45c",
  "Middle East & North Africa": "#a99bc0",
  "South Asia": "#e07b9b",
  "Sub-Saharan Africa": "#47b8a0",
};

const container = document.getElementById("app");
chart(gapminderCountries, {
  axes: true,
  w: 520,
  h: 320,
  color: Color.palette(REGION_COLORS),
})
  .flow(scatter({ x: "FertilityRate", y: "LifeExpectancy" }))
  .mark(circle({ r: 3.5, fill: "Region", opacity: 0.8 }).name("countries"))
  .layer(
    chart(selectAll("countries"))
      .flow(
        filter(
          (country: any) =>
            project(country, "Region") === "Sub-Saharan Africa"
        )
      )
      .mark(
        enclose({
          shape: Shape.blob({ convexity: 0.1, neck: 0.6 }),
          padding: 6,
          fill: "#47b8a0",
          stroke: "#47b8a0",
          fillOpacity: 0.3,
        })
      )
  )
  .render(container);

dataset.ts

/**
 * Fertility rate against life expectancy for 191 countries in one year, as
 * in ChartAccent's "Fertility Rate vs. Life Expectancy" example (Ren et al.,
 * PacificVis 2017; github.com/chartaccent/chartaccent,
 * assets/datasets/gapminder.csv).
 */
export type Country = {
  Country: string;
  Region: string;
  FertilityRate: number;
  LifeExpectancy: number;
  Population: number;
};

export const gapminderCountries: Country[] = [
  {
    Country: "Afghanistan",
    Region: "South Asia",
    FertilityRate: 7.81,
    LifeExpectancy: 51.0,
    Population: 19701940,
  },
  {
    Country: "Albania",
    Region: "Europe & Central Asia",
    FertilityRate: 2.47,
    LifeExpectancy: 74.2,
    Population: 3121965,
  },
  {
    Country: "Algeria",
    Region: "Middle East & North Africa",
    FertilityRate: 2.63,
    LifeExpectancy: 73.2,
    Population: 31183658,
  },
  {
    Country: "Angola",
    Region: "Sub-Saharan Africa",
    FertilityRate: 6.88,
    LifeExpectancy: 52.6,
    Population: 15058638,
  },
  {
    Country: "Antigua and Barbuda",
    Region: "America",
    FertilityRate: 2.32,
    LifeExpectancy: 73.9,
    Population: 77648,
  },
  // … 186 more rows
];