Skip to content

Instantly share code, notes, and snippets.

@hayap

hayap/.block

Created February 1, 2017 02:21
Show Gist options
  • Save hayap/b1613f9354606845dd068749c16b7b6e to your computer and use it in GitHub Desktop.
Save hayap/b1613f9354606845dd068749c16b7b6e to your computer and use it in GitHub Desktop.
Download ZIP
ヨーグルトの栄養成分比較
Raw
.block
license: mit
Raw
data.tsv
name valueString1 valueString2 valueNum1 valueNum2
明治ブルガリアヨーグルトLB81 低糖 180g 明治 低 180 144
明治ブルガリアヨーグルト脂肪0 苺 180g 明治 ゼロ 180 121
明治ブルガリアヨーグルト脂肪0 ブルーベリー 180g 明治 ゼロ 180 120
明治ブルガリアヨーグルト脂肪0白桃 180g 明治 ゼロ 180 119
明治ブルガリアヨーグルト脂肪0 朝のフルーツミックスアロエプラス 180g 明治 ゼロ 180 117
明治プロビオヨーグルトLG21 明治 普通 112 89
明治プロビオヨーグルトLG21低脂肪112g 明治 低 112 72
明治プロビオヨーグルトLG21 砂糖0 112g 明治 ゼロ 112 56
明治プロビオヨーグルトLG21 アロエ脂肪0 112g 明治 ゼロ 112 68
明治ヨーグルトR-1 明治 普通 112 89
明治ヨーグルトR-1 ブルーベリー脂肪0 112g 明治 ゼロ 100 68
明治ヨーグルトR-1 低脂肪112g 明治 低 112 72
ラクトフェリンヨーグルト 森永 普通 112 100
濃密ギリシャヨーグルト PARTHENOはちみつ付 森永 濃密 90 108
濃密ギリシャヨーグルト PARTHENOグリーンアップルソース付 森永 濃密 90 107
濃密ギリシャヨーグルト PARTHENOラズベリーソース付 森永 濃密 90 106
濃密ギリシャヨーグルト PARTHENOプレーン 森永 濃密 110 110
Doubleiマンゴー 森永 果実 90 88
Doubleiブルーベリー 森永 果実 90 86
ビヒダスＢＢ５３６ プレーン加糖タイプ 森永 普通 120 117
森永アロエヨーグルト 森永 果実 125 108
森永大粒アロエ＆ヨーグルト 森永 果実 140 115
森永アロエヨーグルト ＋な素材 アセロラ＆クランベリー 森永 素材 118 100
森永アロエヨーグルト 脂肪0 森永 ゼロ 120 60
カラダ強くするヨーグルト ラクトフェリンとビフィズス菌BB536 森永 普通 100 93
素材そのまま ブルーベリーのヨーグルト 森永 素材 100 95
素材そのまま マンゴーのヨーグルト 森永 素材 100 88
素材そのまま いちごのヨーグルト 森永 素材 100 91
これでフルーツ10種類ヨーグルト フルーツミックス 森永 果実 220 132
これでフルーツ10種類ヨーグルト 黄色のビタミンフルーツミックス 森永 果実 220 126
森永ヨーグルト 森永 普通 100 99
恵 megumi ガセリ菌SP株ヨーグルト 100g 雪印メグミルク 普通 100 35
恵 megumi ガセリ菌SP株ヨーグルト アロエ 雪印メグミルク 果実 100 53
恵 megumi ビフィズス菌SP株カプセルヨーグルト 100g 雪印メグミルク 普通 100 81
バニラヨーグルト 日本ルナ 普通 100 111
バニラヨーグルトシチリアレモン 日本ルナ 果実 100 104
バニラヨーグルト あまおう苺 日本ルナ 果実 100 111
ヨーグルト＆シリアル 玄米フレーク 日本ルナ 普通 108 121
ヨーグルト＆シリアル ライスチョコ 日本ルナ 普通 107 116
アサイーヨーグルトボウル 日本ルナ 果実 110 99
HN019ヨーグルト 豊富に食物センイ 日本ルナ 普通 105 54
さくさくパン×ドライフルーツヨーグルト 日本ルナ 果実 121 158
PIERRE HERME' ヨーグルト Envie オハヨー乳業 普通 120 179
PIERRE HERME' ヨーグルト Infiniment Mandarine オハヨー乳業 普通 120 174
甘熟　アップルマンゴーヨーグルト オハヨー乳業 果実 130 92
季節の果実　キウイ＆ヨーグルト オハヨー乳業 果実 130 100
贅沢果実　いちごヨーグルト オハヨー乳業 果実 130 112
贅沢果実　ブルーベリーヨーグルト オハヨー乳業 果実 130 112
Hanakoとコラボした生乳ヨーグルト オハヨー乳業 普通 100 93
Hanakoとコラボした１日分の鉄分ヨーグルト オハヨー乳業 普通 110 87
小岩井 生乳100％ヨーグルト 200g 小岩井乳業 普通 200 130
小岩井 プレミアムクリームヨーグルトグルメファン 130g 小岩井乳業 普通 130 143
小岩井 クリームヨーグルト クレマ 85g オレンジはちみつ入り 小岩井乳業 普通 85 117
小岩井 クリームヨーグルト クレマ 85g ピーチクリーム 小岩井乳業 普通 85 119
小岩井 大人の元気ヨーグルト 105g 小岩井乳業 普通 105 79
小岩井 金色ヨーグルト 120g 小岩井乳業 普通 120 127
小岩井 まきばヨーグルト こだわりクリーミー 95g 小岩井乳業 普通 95 101
増加型ビフィズス菌 ＬＫＭ512ヨーグルト メイトー 普通 100 85
ドール アサイーミックス＆ヨーグルト メイトー 果実 190 118
ドール マスカットミックス＆ヨーグルト メイトー 果実 190 117
ドール フルーツミックス＆ヨーグルト メイトー 果実 200 126
ドール ベリーミックス＆ヨーグルト メイトー 果実 200 126
ドール マンゴーミックス＆ヨーグルト メイトー 果実 200 124
ドール アロエミックス＆ヨーグルト メイトー 果実 200 126
朝食BifiXヨーグルト グリコ乳業 朝食 150 106
朝食BifiXヨーグルト脂肪0 グリコ乳業 朝食 100 38
朝食BifiXヨーグルト フルーツプルーン グリコ乳業 朝食 145 122
朝食りんごヨーグルト グリコ乳業 朝食 145 123
朝食みかん＆ヨーグルト グリコ乳業 朝食 145 117
ヨーグルト健康 グリコ乳業 普通 125 126
ドクターPiroヨーグルト 110g グリコ乳業 普通 110 93
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" />
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/queue.v1.min.js" charset="utf-8"></script>
<script src="app.js"></script>
</head>
<body>
<div id="header">
<div id="menuBlock">
<form></form>
</div>
</div>
<div id="subheader">
<div id="labels"></div>
</div>
<div id="content"></div>
<div id="tooltip" class="deactive"></div>
</body>
</html>
Raw
style.css
/* ----------
COMMON
---------- */
body {
font: 13px/1.5 helvetica, sans-serif;
text-align:center;
}
* {
-webkit-font-smoothing:anitaliased;
}
/* ----------
LAYOUT
---------- */
#header {
height: 60px;
margin-bottom: 30px;
}
#subheader {
width: 100%;
position: absolute;
left: 0%;
}
#labels {
text-align: center;
}
/* ----------
ELEMENT
---------- */
#tooltip {
padding:.5em .8em;
background:rgb(255,255,255);
box-shadow:0 0 .3em silver;
font-size:1.2em;
border-radius:.5em;
position:absolute;
z-index:9999;
min-width:100px;
left: 20px;
top: 100px;
text-align: left;
}
#tooltip.active {
display: block;
}
#tooltip.deactive {
display: none;
}
.dataC {
stroke:black;
stroke-width:2px;
stroke-opacity:.1;
transition: all .4s ease;
fill-opacity: 0.4;
}
.dataC.active {
stroke-width:4px;
stroke-opacity:.2;
fill-opacity: 0.8;
}
.valData {
font-size:1.1em;
line-height:1.4;
margin-top:.2em;
}
/* ----------
NAVIGATION
---------- */
input[type=radio] {
display:none;
}
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 8px 10px;
margin-bottom: 0;
font-size: 0.8em;
line-height: 20px;
color: #666;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 10px;
margin: 0 2px;
}
input[type=radio] + label:hover {
color: #000000;
}
input[type=radio] + label:active{
background-color: #e6e6e6;
background-image: -moz-linear-gradient(top,#e6e6e6,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#e6e6e6),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#e6e6e6,#e6e6e6);
background-image: -o-linear-gradient(top,#e6e6e6,#e6e6e6);
background-image: linear-gradient(to bottom,#e6e6e6,#e6e6e6);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0),0 1px 2px rgba(0,0,0,0);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0),0 1px 2px rgba(0,0,0,0);
box-shadow: inset 0 1px 0 rgba(255,255,255,0),0 1px 2px rgba(0,0,0,0);
}
input[type=radio]:checked + label {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.05),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.05),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05),0 1px 2px rgba(0,0,0,0.05);
background-color:#e0e0e0;
color: #888;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment