Created
April 2, 2022 09:54
-
-
Save sunmoonStern/7d3a804fbe26fd4f8d8d9a1c4f0aa513 to your computer and use it in GitHub Desktop.
funin-data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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: "移植あたり妊娠率(%)", | |
backgroundColor: '#19A0AA' | |
} | |
] | |
} | |
}); | |
} | |
// Request data using D3 | |
d3 | |
.dsv("\t", "https://raw.githubusercontent.com/sunmoonStern/funin-open-data/main/hospital-data.tsv") | |
.then(makeChart); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#wrapper { | |
height: 1000px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment