funin-data

funin-data.markdown

funin-data

A Pen by Mei on CodePen.

License.

index.html

<div id="title">35歳以上40歳未満の女性に対して凍結胚を用いた治療成績可視化テスト</div>
<div id="wrapper">
  <canvas id="chart_demo"></canvas>
  <canvas id="chart"></canvas>
</div>

script.js

var chart = new Chart('chart_demo', {
  type: 'horizontalBar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [
      {
        data: [10, 20, 30]
      }
    ]
  }
});

function makeChart(players) {
  // players is an array of objects where each object is something like:
  // {
  //   "Name": "Steffi Graf",
  //   "Weeks": "377",
  //   "Gender": "Female"
  // }

  var playerLabels = players.map(function(d) {
    return d.name;
  });
  var weeksData = players.map(function(d) {
    return +d.preg_count/d.et_count * 100;
  });

  var chart = new Chart('chart', {
    type: "horizontalBar",
    options: {
      maintainAspectRatio: false,
      legend: {
        display: false
      }
    },
    data: {
      labels: playerLabels,
      datasets: [
        {
          data: weeksData
        }
      ]
    }
  });
}

// Request data using D3
d3
  .dsv("\t", "https://raw.githubusercontent.com/sunmoonStern/funin-open-data/main/hospital-data.tsv")
  .then(makeChart);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

style.css

#wrapper {
  height: 1000px;
}