Population Dataset

A demo showing the use of population dataset.

Chart

Loading...

show code

JS

import { race } from "racing-bars";

const options = {
  dataTransform: (data) =>
    data.map((d) => ({
      ...d,
      icon: `https://flagsapi.com/${d.code}/flat/64.png`,
    })),
  title: "World Population in 60 Years",
  subTitle: "Country Population in millions",
  caption: "Source: World Bank",
  dateCounter: "YYYY",
  showIcons: true,
  labelsPosition: "outside",
};

race("/data/population.csv", "#race", options);

Open in playground

TS

import { race, type Options } from "racing-bars";

const options: Options = {
  dataTransform: (data) =>
    data.map((d) => ({
      ...d,
      icon: `https://flagsapi.com/${d.code}/flat/64.png`,
    })),
  title: "World Population in 60 Years",
  subTitle: "Country Population in millions",
  caption: "Source: World Bank",
  dateCounter: "YYYY",
  showIcons: true,
  labelsPosition: "outside",
};

race("/data/population.csv", "#race", options);

Open in playground

React

import RacingBars from "racing-bars/react";

export default function App() {
  const options = {
    dataUrl: "/data/population.csv",
    dataTransform: (data) =>
      data.map((d) => ({
        ...d,
        icon: `https://flagsapi.com/${d.code}/flat/64.png`,
      })),
    title: "World Population in 60 Years",
    subTitle: "Country Population in millions",
    caption: "Source: World Bank",
    dateCounter: "YYYY",
    showIcons: true,
    labelsPosition: "outside",
  };

  return <RacingBars {...options}>Loading...</RacingBars>;
}

Open in playground

Vue

<script setup>
  import RacingBars from "racing-bars/vue";

  const options = {
    dataUrl: "/data/population.csv",
    dataTransform: (data) =>
      data.map((d) => ({
        ...d,
        icon: `https://flagsapi.com/${d.code}/flat/64.png`,
      })),
    title: "World Population in 60 Years",
    subTitle: "Country Population in millions",
    caption: "Source: World Bank",
    dateCounter: "YYYY",
    showIcons: true,
    labelsPosition: "outside",
  };
</script>

<template>
  <RacingBars v-bind="options">Loading...</RacingBars>
</template>

Open in playground

Svelte

<script>
  import { onMount } from "svelte";
  import { race } from "racing-bars";

  const options = {
    dataTransform: (data) =>
      data.map((d) => ({
        ...d,
        icon: `https://flagsapi.com/${d.code}/flat/64.png`,
      })),
    title: "World Population in 60 Years",
    subTitle: "Country Population in millions",
    caption: "Source: World Bank",
    dateCounter: "YYYY",
    showIcons: true,
    labelsPosition: "outside",
  };

  onMount(() => {
    race("/data/population.csv", "#race", options);
  });
</script>

<div id="race">Loading...</div>

Open in playground