[JavaScript/D3.js]Timelines-chart

プログラミング

How to use Timelines-chart

First, go to Github and download repository/source codes.
https://github.com/vasturiano/timelines-chart

Second, you will see sample codes in the downloaded files. Choose one of the sample programs you want to try. I chose “show-time-marker”.

Then, it is time to modify the code.
In the sample source, you will see “getRandomData(true) which is a function to generate random data to be shown in the timelines-chart just because this is a sample data.
In order to show your original data, you will have to modify this portion.

const myData = getRandomData(true);

I created timechart with data of very famous physicians’ and chemists’ birthday and data of pass-away as sample.
I somehow figured out how to call out the birthday & death in the code by referring Data Syntax shown in Github.
Here is a whole code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Responsive history timeline</title>
    <script src='https://unpkg.com/timelines-chart'></script>
    <!--https://github.com/vasturiano/timelines-chart-->    
</head>

<body>
  <script>
    // const myData = getRandomData(true); //this is the original code in sample file

    const myData = ([
      {
        group: "Germany",
        data: [
          {
            label: "1",
            data: [
              {
                timeRange: ["1879-3-14", "1955-4-18"],
                val: "Albert Einstein"
              }
            ]
          },
          {
            label: "2",
            data: [
              {
                timeRange: ["1845-3-27", "1923-2-10"],
                val: "Wilhelm Conrad Röntgen"
              }
            ]
          },
          {
            label: "3",
            data: [
              {
                timeRange: ["1868-9-9", "1934-1-29"],
                val: "Fritz Haber"
              }
            ]
          },
          {
            label: "4",
            data: [
              {
                timeRange: ["1862-6-7", "1947-5-20"],
                val: "Philipp Eduard Anton von Lenard"
              }
            ]
          },
          {
            label: "5",
            data: [
              {
                timeRange: ["1874-4-15", "1957-6-21"],
                val: "Johannes Stark"
              }
            ]
          },
          {
            label: "6",
            data: [
              {
                timeRange: ["1879-3-8", "1968-7-28"],
                val: "Otto Hahn"
              }
            ]
          },
          {
            label: "7",
            data: [
              {
                timeRange: ["1901-12-5", "1976-2-1"],
                val: "Werner Karl Heisenberg"
              }
            ]
          },
          {
            label: "8",
            data: [
              {
                timeRange: ["1879-10-9", "1960-4-24"],
                val: "Max Theodor Felix von Laue"
              }
            ]
          },
          {
            label: "9",
            data: [
              {
                timeRange: ["1887-8-12", "1961-1-4"],
                val: "Erwin Rudolf Josef Alexander Schrödinger"
              }
            ]
          },
        ],
      },
      {
        group: "Japan",
        data: [
        {
          label: "1",
          data:[
            {
              timeRange: ["1907-1-23", "1981-9-8"],
              val: "Hideki Yukawa"
            }
          ]
        },
        {
          label: "2",
          data:[
            {
              timeRange: ["1925-3-12", "2024-12-17"],
              val: "Leo Esaki"
            }
          ]
        },
        {
          label: "3",
          data:[
            {
              timeRange: ["1906-3-31", "1979-7-8"],
              val: "Shinichiro Tomonaga"
            }
          ]
        },
        {
          label: "4",
          data:[
            {
              timeRange: ["1918-10-4", "1998-1-9"],
              val: "Keninichi Fukui",
              }
          ]
        },
      ]
      },
      {
        group: "Denmark",
        data: [
        {
          label: "1",
          data:[
            {
              timeRange: ["1885-10-7", "1962-11-18"],
              val: "Niels Bohr"
            }
          ]
        },
      ],
      },
      {
        group: "England",
        data: [
        {
          label: "1",
          data:[
            {
              timeRange: ["1902-8-8", "1984-10-20"],
              val: "Paul Adrien Maurice Dirac"
            }
          ]
        },
      ]
      },
    ]
    )


    new TimelinesChart(document.body)
      .zScaleLabel('')
      .zQualitative(true)
      .dateMarker(new Date() - 365 * 24 * 60 * 60 * 1000) // Add a marker 1y ago
      .data(myData);
  </script>
</body>
</html>

コメント

タイトルとURLをコピーしました