Skip to content

Instantly share code, notes, and snippets.

@n1n9-jp
Forked from jasondavies/.block
Last active March 18, 2016 19:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save n1n9-jp/98cd563b2de325e258f9 to your computer and use it in GitHub Desktop.
Save n1n9-jp/98cd563b2de325e258f9 to your computer and use it in GitHub Desktop.
Comparison of Nutrition Component in Yogurt

ヨーグルトの栄養成分比較

Comparison of nutrition component in yogurt products which are sold in Japan.

データ / Dataset

  • 各社公式ウェブサイト掲載の栄養成分表示(2014年7月27日時点)
  • 対象メーカー: 明治, 森永, 雪印メグミルク, 日本ルナ, オハヨー乳業, 小岩井乳業, メイトー, グリコ乳業
  • 一人分の商品を対象としました(容量85-220g)
  • のむヨーグルト、宅配用商品を除いています
  • 容量に対しての栄養成分を正規化していません(例:100gあたりの栄養成分量への換算)

追記事項 / Note

  • 表示領域が大きいので "Open in a new window.”リンクを利用してください。
  • D3.js標準のbrushが使えますので軸の上でドラッグしてみてください。
  • please use "Open in a new window.” because this content's viewport is bigger than bl.ocks standard one.
  • You can filter values by the official D3.js brush function.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="charset=utf-8"/>
<style type="text/css">
body {
font: 10px sans-serif;
}
.background path {
fill: none;
stroke: #ccc;
stroke-opacity: .4;
shape-rendering: crispEdges;
}
.brush .extent {
fill: #000;
fill-opacity: .2;
stroke: #666;
shape-rendering: crispEdges;
}
.axis line, .axis path {
fill: none;
stroke: #AAA;
shape-rendering: crispEdges;
}
#firstChild .axis .tick {
display: none;
}
</style>
<title></title>
</head>
<body>
<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>
/* --------------------
Variables
-------------------- */
var margin = {top: 65, right: 30, bottom: 10, left: 300},
width = 1200 - margin.left - margin.right,
height = 900 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangePoints([0, width], 1),
y = {},
dragging = {},
background,
foreground,
letterground;
var yposArray = new Array();
var lScale = d3.scale.linear().range([height, 0]);
var line = d3.svg.line();
var axis = d3.svg.axis().orient("left");
/* --------------------
Color variables based
on their logo colors
-------------------- */
var providerArray = new Array();
//明治, 森永, 雪印メグミルク, 日本ルナ, オハヨー乳業, 小岩井乳業, メイトー, グリコ乳業
var colorArray = ["#ff0000", "#8d1231", "#0037ad", "#e60012", "#0275be", "#f7d000", "#e60012", "#f90f00"];
var colorScale = d3.scale.ordinal()
.range( colorArray );
var svg = d3.select("body").append("svg:svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("svg:g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* --------------------
Load external data
-------------------- */
queue()
.defer(d3.tsv, "yogurt.tsv")
.await(loadReady);
/* --------------------
Drawing
-------------------- */
function loadReady(_error, _data) {
/* make the list of provider */
for (var i=0; i<_data.length; i++) {
providerArray[i] = _data[i]["provider"];
}
colorScale.domain(d3.extent(providerArray));
/* delete providers from dataset */
for (var k=0; k<_data.length; k++) {
delete _data[k]["provider"];
}
/* make the list of dimensions */
x.domain(dimensions = d3.keys(_data[0]).filter(function(d) {
return d != "name" && (y[d] = d3.scale.linear()
.domain(d3.extent(_data, function(p) { return +p[d]; }))
.range([height, 0]));
}));
/* scale position */
for (var j=0; j<_data.length; j++) {
yposArray[j] = parseInt(_data[j]["indexid"]);
}
lScale.domain(d3.extent(yposArray));
/* lines for every data */
background = svg.append("svg:g")
.attr("class", "background")
.selectAll("path")
.data(_data)
.enter().append("svg:path")
.attr("d", path);
/* lines for filtered data */
foreground = svg.append("svg:g")
.attr("class", "foreground")
.selectAll("path")
.data(_data)
.enter().append("svg:path")
.attr("stroke", function(d,i){
return colorScale( providerArray[i] );
})
.attr("stroke-opacity", 0.6)
.attr("stroke-width", 0.3)
.attr("fill", "none")
.attr("d", path)
.attr("id", function(d){
return d.name;
});
/* list of the products */
letterground = svg.append("svg:g")
.attr("class", "letterground")
.selectAll(".letters")
.data(_data)
.enter().append("text")
.attr("x", 20)
.attr("y", function(d,i){
return lScale( d["indexid"] );
})
.attr("text-anchor", "end")
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.text( function(d){
return d.name;
});
/* Add a group element for each dimension. */
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("svg:g")
.attr("class", "dimension")
.attr("id", function(d,i) {
if (i==0){ return "firstChild" };
})
.attr("transform", function(d) { return "translate(" + x(d) + ")"; });
/* Add an axis and title. */
g.append("svg:g")
.attr("class", "axis")
.each(function(d) {
d3.select(this).call( axis.scale(y[d]) );
})
.append("svg:text")
.attr("text-anchor", "start")
.attr("font-family", "sans-serif")
.attr("font-size", "9px")
.attr("y", -9)
.attr("transform", function(d) {
return "rotate(-30)"
})
.text(function(d,i) {
if (i != 0) { return dimensions[i];
} else { return "";}
});
/* Add and store a brush for each axis. */
g.append("svg:g")
.attr("class", "brush")
.each(function(d) { d3.select(this).call( y[d].brush = d3.svg.brush().y(y[d]).on("brush", brush)); })
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
};
/* --------------------
functions
-------------------- */
function position(d) {
var v = dragging[d];
return v == null ? x(d) : v;
}
function transition(g) {
return g.transition().duration(500);
}
function path(d) {
return line( dimensions.map(function(p) { return [position(p), y[p](d[p])]; }) );
}
function brush() {
var actives = dimensions.filter(function(p) { return !y[p].brush.empty(); }),
extents = actives.map(function(p) { return y[p].brush.extent(); });
foreground.style("display", function(d) {
return actives.every(function(p, i) {
return extents[i][0] <= d[p] && d[p] <= extents[i][1];
}) ? null : "none";
});
letterground.style("display", function(d) {
return actives.every(function(p, i) {
return extents[i][0] <= d[p] && d[p] <= extents[i][1];
}) ? null : "none";
});
}
</script>
</body>
</html>
name provider indexid 容量(g) エネルギー(kcal) たんぱく質(g) 脂質(g) 炭水化物(g) ナトリウム(mg) カルシウム(mg) 糖類(g) ラクトフェリン(mg) 食物繊維(g) ガラクトオリゴ糖(g) 鉄(mg) 葉酸(μg) カルシウム(mg) オルチニン(mg)
明治ブルガリアヨーグルトLB81 低糖 180g 明治 73 180 144 6.2 5.5 17.5 78 216 17.5 0 0 0 0 0 0 0
明治ブルガリアヨーグルト脂肪0 苺 180g 明治 72 180 121 7.4 0 22.8 79 232 0 0 0 0 0 0 0 0
明治ブルガリアヨーグルト脂肪0 ブルーベリー 180g 明治 71 180 120 7.7 0 22.4 90 220 0 0 0 0 0 0 0 0
明治ブルガリアヨーグルト脂肪0白桃 180g 明治 70 180 119 7.6 0 22.1 87 218 0 0 0 0 0 0 0 0
明治ブルガリアヨーグルト脂肪0 朝のフルーツミックスアロエプラス 180g 明治 69 180 117 7.8 0 21.5 89 229 0 0 0 0 0 0 0 0
明治プロビオヨーグルトLG21 明治 68 112 89 3.8 3.4 10.9 49 134 0 0 0 0 0 0 0 0
明治プロビオヨーグルトLG21低脂肪112g 明治 67 112 72 4.1 1.6 10.3 59 148 0 0 0 0 0 0 0 0
明治プロビオヨーグルトLG21 砂糖0 112g 明治 66 112 56 4 1.6 10.6 56 135 0 0 0.9 0 0 0 0 0
明治プロビオヨーグルトLG21 アロエ脂肪0 112g 明治 65 112 68 3.9 0 13.1 57 125 0 0 0 0 0 0 0 0
明治ヨーグルトR-1 明治 64 112 89 3.9 3.4 10.8 52 138 0 0 0 0 0 0 0 0
明治ヨーグルトR-1 ブルーベリー脂肪0 112g 明治 63 100 68 4.4 0 12.5 71 132 0 0 0 0 0 0 0 0
明治ヨーグルトR-1 低脂肪112g 明治 62 112 72 4.2 1.6 10.3 52 139 0 0 0 0 0 0 0 0
ラクトフェリンヨーグルト 森永 61 112 100 5.1 3 13.1 55 150 0 100 0 0 0 0 0 0
濃密ギリシャヨーグルト PARTHENOはちみつ付 森永 60 90 108 7.9 3.8 11.3 26 81 0 0 0 0 0 0 0 0
濃密ギリシャヨーグルト PARTHENOグリーンアップルソース付 森永 59 90 107 0 3.8 10.4 34 81 0 0 0 0 0 0 0 0
濃密ギリシャヨーグルト PARTHENOラズベリーソース付 森永 58 90 106 0 3.8 10.2 28 81 0 0 0 0 0 0 0 0
濃密ギリシャヨーグルト PARTHENOプレーン 森永 57 110 110 10.9 5.3 4.6 36 110 0 0 0 0 0 0 0 0
Doubleiマンゴー 森永 56 90 88 3.8 1.9 13.8 53 95 0 0 0 0 0 0 0 0
Doubleiブルーベリー 森永 55 90 86 3.8 1.8 13.6 54 95 0 0 0 0 0 0 0 0
ビヒダスBB536 プレーン加糖タイプ 森永 54 120 117 4.1 4.6 14.8 53 150 0 0 0 0 0 0 0 0
森永アロエヨーグルト 森永 53 125 108 4.3 2.8 16.5 50 130 0 0 0 0 0 0 0 0
森永大粒アロエ&ヨーグルト 森永 52 140 115 3.7 2.5 19.3 52 120 0 0 0 0 0 0 0 0
森永アロエヨーグルト +な素材 アセロラ&クランベリー 森永 51 118 100 4.2 2.8 14.6 62 130 0 0 0 0 0 0 0 0
森永アロエヨーグルト 脂肪0 森永 50 120 60 4.2 0 11.4 49 130 0 0 0 0 0 0 0 0
カラダ強くするヨーグルト ラクトフェリンとビフィズス菌BB536 森永 49 100 93 3.4 3.6 11.7 42 110 0 100 0 0 0 0 0 0
素材そのまま ブルーベリーのヨーグルト 森永 48 100 95 3.5 2.2 15.2 39 100 0 0 0 0 0 0 0 0
素材そのまま マンゴーのヨーグルト 森永 47 100 88 3.4 2.2 13.6 38 100 0 0 0 0 0 0 0 0
素材そのまま いちごのヨーグルト 森永 46 100 91 3.5 2.2 14.3 38 100 0 0 0 0 0 0 0 0
これでフルーツ10種類ヨーグルト フルーツミックス 森永 45 220 132 7.8 0 23.4 90 250 0 0 0 0 0 0 0 0
これでフルーツ10種類ヨーグルト 黄色のビタミンフルーツミックス 森永 44 220 126 8.2 0 22.6 110 250 0 0 0 0 0 0 0 0
森永ヨーグルト 森永 43 100 99 3.5 3.9 12.4 44 130 0 0 0 0 0 0 0 0
恵 megumi ガセリ菌SP株ヨーグルト 100g 雪印メグミルク 42 100 35 3.7 0 4.8 39 120 0 0 0 0 0 0 0 0
恵 megumi ガセリ菌SP株ヨーグルト アロエ 雪印メグミルク 41 100 53 3.9 0 9 60 120 0 0 0 0 0 0 0 0
恵 megumi ビフィズス菌SP株カプセルヨーグルト 100g 雪印メグミルク 40 100 81 3.8 1.7 12.6 51 110 0 0 0 0.21 0 0 0 0
バニラヨーグルト 日本ルナ 39 100 111 3.6 4.1 14.9 60 104 0 0 0 0 0 0 0 0
バニラヨーグルトシチリアレモン 日本ルナ 38 100 104 3.1 3.6 14.8 94 102 0 0 0 0 0 0 0 0
バニラヨーグルト あまおう苺 日本ルナ 37 100 111 3.5 4.1 15 56 113 0 0 0 0 0 0 0 0
ヨーグルト&シリアル 玄米フレーク 日本ルナ 36 108 121 4.7 2.5 19.8 141 146 0 0 0 0 0 0 0 0
ヨーグルト&シリアル ライスチョコ 日本ルナ 35 107 116 4.6 2.3 19.2 106 164 0 0 0 0 0 0 0 0
アサイーヨーグルトボウル 日本ルナ 34 110 99 4.2 1.7 16.7 92 101 0 0 0 0 0 0 0 0
HN019ヨーグルト 豊富に食物センイ 日本ルナ 33 105 54 3.5 0.8 9 54 101 0 0 8.1 0 0 0 0 0
さくさくパン×ドライフルーツヨーグルト 日本ルナ 32 121 158 5.2 4.3 24.5 107 112 0 0 0 0 0 0 0 0
PIERRE HERME' ヨーグルト Envie オハヨー乳業 31 120 179 4.7 7.2 24 89 130 0 0 0 0 0 0 0 0
PIERRE HERME' ヨーグルト Infiniment Mandarine オハヨー乳業 30 120 174 4.9 7.4 22 58 127 0 0 0 0 0 0 0 0
甘熟 アップルマンゴーヨーグルト オハヨー乳業 29 130 92 5.2 0 17.7 60 139 0 0 0 0 0 0 0 0
季節の果実 キウイ&ヨーグルト オハヨー乳業 28 130 100 5 0 19.9 67 127 0 0 0 0 0 0 0 0
贅沢果実 いちごヨーグルト オハヨー乳業 27 130 112 5.1 2.1 18.2 61 138 0 0 0 0 0 0 0 0
贅沢果実 ブルーベリーヨーグルト オハヨー乳業 26 130 112 5.2 2.2 17.9 67 134 0 0 0 0 0 0 0 0
Hanakoとコラボした生乳ヨーグルト オハヨー乳業 25 100 93 3.6 3.9 10.8 44 117 0 0 0 0 0 0 0 0
Hanakoとコラボした1日分の鉄分ヨーグルト オハヨー乳業 24 110 87 4.2 1.3 14.5 89 0 0 0 0 0 11 300 132 0
小岩井 生乳100%ヨーグルト 200g 小岩井乳業 23 200 130 6.4 7.6 9.2 92 220 0 0 0 0 0 0 0 0
小岩井 プレミアムクリームヨーグルトグルメファン 130g 小岩井乳業 22 130 143 4.8 10.5 7.2 61 164 0 0 0 0 0 0 0 0
小岩井 クリームヨーグルト クレマ 85g オレンジはちみつ入り 小岩井乳業 21 85 117 4.5 5.2 13.1 53 143 0 0 0 0 0 0 0 0
小岩井 クリームヨーグルト クレマ 85g ピーチクリーム 小岩井乳業 20 85 119 4.5 5.2 13.5 50 143 0 0 0 0 0 0 0 0
小岩井 大人の元気ヨーグルト 105g 小岩井乳業 19 105 79 3.8 2.2 10.6 44 109 0 0 0 0 0 0 0 400
小岩井 金色ヨーグルト 120g 小岩井乳業 18 120 127 3.9 4.9 16.7 50 131 0 0 0 0 0 0 0 400
小岩井 まきばヨーグルト こだわりクリーミー 95g 小岩井乳業 17 95 101 3.2 3.9 13.2 43 101 0 0 0 0 0 0 0 0
増加型ビフィズス菌 LKM512ヨーグルト メイトー 15 100 85 3.8 2.2 12.7 49 120 0 0 0 0 0 0 0 0
ドール アサイーミックス&ヨーグルト メイトー 14 190 118 6.7 0 22.7 96 209 0 0 0 0 0 0 0 0
ドール マスカットミックス&ヨーグルト メイトー 13 190 117 4.9 0 24.3 129 154 0 0 0 0 0 0 0 0
ドール フルーツミックス&ヨーグルト メイトー 12 200 126 7.1 0.2 24 113 183 0 0 0 0 0 0 0 0
ドール ベリーミックス&ヨーグルト メイトー 11 200 126 6.7 0.2 24.4 94 210 0 0 0 0 0 0 0 0
ドール マンゴーミックス&ヨーグルト メイトー 10 200 124 7 0 24.1 94 208 0 0 0 0 0 0 0 0
ドール アロエミックス&ヨーグルト メイトー 9 200 126 6.9 0 24.2 109 181 0 0 0 0 0 0 0 0
朝食BifiXヨーグルト グリコ乳業 8 150 106 4.9 2.2 16.6 57 144 0 0 0 0 0 0 0 0
朝食BifiXヨーグルト脂肪0 グリコ乳業 7 100 38 3.6 0 5.7 52 92 0 0 0 0 0 0 0 0
朝食BifiXヨーグルト フルーツプルーン グリコ乳業 6 145 122 5.4 2.6 19.3 60 160 0 0 0 0 0 0 0 0
朝食りんごヨーグルト グリコ乳業 5 145 123 5.4 2.5 19.7 63 148 0 0 0 0 0 0 0 0
朝食みかん&ヨーグルト グリコ乳業 4 145 117 5 2.4 18.9 50 125 0 0 0 0 0 0 0 0
ヨーグルト健康 グリコ乳業 3 125 126 4.3 2.6 21.4 62 173 0 0 0 0 0 0 0 0
ドクターPiroヨーグルト 110g グリコ乳業 2 110 93 4.2 2.3 13.8 48 92 0 0 0 0 0 0 0 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment