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"></canvas>
</div>
<div id="footer">
  <div class="right">データソース: <a href="https://www.fukushihoken.metro.tokyo.lg.jp/kodomo/kosodate/josei/funin/shiteiiryou-jouhoukoukai.html" target="_blank">東京都特定不妊治療費助成事業指定医療機関の情報公開（2019年1月から12月分）</a>より数字が自動抽出できなかった医療機関や移植数/生産数が移植あたり生産率と等しくなっていない医療機関は除外しました</div>
</div>
<div id="wrapper">
  <canvas id="chart2"></canvas>
</div>

script.js

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: true
      }
    },
    data: {
      labels: playerLabels,
      datasets: [
        {
          data: weeksData,
          label: "移植あたり妊娠率(%)　※妊娠数/移植総回数 * 100で独自に計算",
          backgroundColor: '#19A0AA'
        }
      ]
    }
  });
}

function makeSecondChart(players) {
  var clinicNames = players.map(function(d) {
    return d.name;
  });
  var etCount = players.map(function(d) {
    return d.et_count;
  });
  var pregCount = players.map(function(d) {
    return d.preg_count;
  });
  var birthCount = players.map(function(d) {
    return d.birth_count;
  });
  var chart = new Chart('chart2', {
    type: "bar",
    options: {
      maintainAspectRatio: false,
      legend: {
        display: true
      }
    },
    data: {
      labels: clinicNames,
      datasets: [
        {
          data: etCount,
          label: "移植総回数(回)",
          backgroundColor: '#ff6384'
        },
        {
          data: pregCount,
          label: "妊娠数(回)",
          backgroundColor: '#36a2eb'
        },
        {
          data: birthCount,
          label: "生産分娩数(回)",
          backgroundColor: '#cc65fe'
        }
      ]
    }
  });
}

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

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

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;
}