jnobuyuki · August 29, 2015 14:04
diff --git a/Readme.md b/Readme.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <html>
 <head>
  <title>DBVisualization</title>
  <meta charset = "utf-8">
  <script src="http://d3js.org/d3.v3.min.js" ></script>
  <script src="https://www.google.com/jsapi"></script>
  <script>google.load("visualization", "1", {packages:["corechart"]});</script>
 <style>
  #text_div {
  width = 80%;
  height = 400px;
 }
 #greeting {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  margin: 15px;
 }
 #chart_div {
  width: 100%;
  height: 800px;
 } 
   
 </style>
 </head>

 <body>
  <div id = "text_div"></div>
  <form>
    <table>
      <tr>
        <td>x: </td><td><select id = "xValue"></select></td>
      </tr>
      <tr>
        <td>y: </td><td><select id = "yValue"></select></td>
      </tr>
      <tr>
        <td>color: </td><td><select id = "colorValue"></select></td>
      </tr>
      <tr><td>label: </td><td><select id = "labelValue"></select></td></tr>
      <tr>
        <td>bubble size: </td><td><select id = "bubbleValue" ></select></td>
      </tr>
      <tr><td>Normalize variable</td><td><select id = "norm"></select></td></tr>
      <tr><td>Normalize unit</td><td><input id = "nunit" type = "text"></td></tr>
    </table>
  </form>
  <button id = "load" onclick= "loadData()">Load Data</button>
  <br>
  <button id = "draw" onclick= "drawChart()">Draw Chart</button>
  <div id = "chart_div"></div>
  <script>
    var vartext = "";
    d3.tsv("yogurt.tsv", function(err, dat){
      
      for (key in dat[1]) {
        vartext = vartext +  key + "\n";
      }
      //var element = document.getElementById("text_div");
    //element.innerText = vartext;
    var optiondata = d3.keys(dat[1]);
    optiondata.unshift("");
    
    
    d3.select("#xValue").selectAll("option").data(optiondata).enter().append("option").attr("value",function(d){return   d;}).append("text").text(function(d){return d;});

 d3.select("#yValue").selectAll("option").data(optiondata).enter().append("option").attr("value",function(d){return   d;}).append("text").text(function(d){return d;});

 d3.select("#colorValue").selectAll("option").data(optiondata).enter().append("option").attr("value",function(d){return   d;}).append("text").text(function(d){return d;});

 d3.select("#labelValue").selectAll("option").data(optiondata).enter().append("option").attr("value",function(d){return   d;}).append("text").text(function(d){return d;});

 d3.select("#bubbleValue").selectAll("option").data(optiondata).enter().append("option").attr("value",function(d){return   d;}).append("text").text(function(d){return d;});

 d3.select("#norm").selectAll("option").data(optiondata).enter().append("option").attr("value",function(d){return   d;}).append("text").text(function(d){return d;});

    });

    var datatable = new Array();
    function loadData(){
      if (datatable.length != 0) {
        datatable.length = 0;
      }
      var column0 =  document.getElementById("labelValue").value;
      if (column0 == null){
      alert("column0 is empty!");
      }
  
    var column1 = document.getElementById("xValue").value;
    if (column1 == null){
      alert("column1 is empty!");
    }
    var column2 = document.getElementById("yValue").value;
    if (column2 == null){
      alert("column2 is empty!");
    }
    var column3 = document.getElementById("colorValue").value;
    if (column3 == null){
      alert("column3 is empty!");
    }  
    var column4 = document.getElementById("bubbleValue").value;
    //console.log(column4);
  
    var normvar = document.getElementById("norm").value;
    var normunit = document.getElementById("nunit").value;
    var normratio = 1;

  d3.tsv("yogurt.tsv", function(error, data){
    if (column4 == ""){
      
      datatable.push([column0, column1, column2, column3]);
      data.forEach(function(d){
      
      if(normvar != ""){normratio =normunit / +d[normvar];}
      datatable.push([d[column0], Math.round(+d[column1] * normratio), Math.round(+d[column2] * normratio), d[column3]]);
    });
      
    } else {
      datatable.push([column0, column1, column2, column3, column4]);
      data.forEach(function(d){
      if(normvar != ""){normratio =normunit / +d[normvar];}
      if (d[column4]>= 0) {
      
        datatable.push([d[column0], Math.round(+d[column1] * normratio), Math.round(+d[column2] * normratio), d[column3], Math.round(+d[column4] * normratio)]);
      } else {
        datatable.push([d[column0], Math.round(+d[column1] * normratio), Math.round(+d[column2] * normratio), d[column3], 0]);
      }
        
      });
    }
    
    //console.log(datatable);
    
  });
 }

  function drawChart(){

    var data = new Array();
    data = google.visualization.arrayToDataTable(datatable);

    //console.log(data);
    var graphtitle = document.getElementById("yValue").value;
    var hAxistitle = document.getElementById("xValue").value;
    var vAxistitle = document.getElementById("yValue").value;
  
    var options = {
          title: graphtitle,
          hAxis: {title: hAxistitle, viewWindowMode: "pretty"},
          vAxis: {title: vAxistitle, viewWindowMode: "pretty"},
          bubble: {textStyle:{fontSize: 12}}
        };
    var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  
  }

  </script> 
 </body>
 </html>
diff --git a/yogurt.tsv b/yogurt.tsv
	<!DOCTYPE html>

	<html>
	<head>
	<title>DBVisualization</title>
	<meta charset = "utf-8">
	<script src="http://d3js.org/d3.v3.min.js" ></script>
	<script src="https://www.google.com/jsapi"></script>
	<script>google.load("visualization", "1", {packages:["corechart"]});</script>
	<style>
	#text_div {
	width = 80%;
	height = 400px;
	}
	#greeting {
	background-color: #F8F8F8;
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	margin: 15px;
	}
	#chart_div {
	width: 100%;
	height: 800px;
	}

	</style>
	</head>

	<body>
	<div id = "text_div"></div>
	<form>
	<table>
	<tr>
	<td>x: </td><td><select id = "xValue"></select></td>
	</tr>
	<tr>
	<td>y: </td><td><select id = "yValue"></select></td>
	</tr>
	<tr>
	<td>color: </td><td><select id = "colorValue"></select></td>
	</tr>
	<tr><td>label: </td><td><select id = "labelValue"></select></td></tr>
	<tr>
	<td>bubble size: </td><td><select id = "bubbleValue" ></select></td>
	</tr>
	<tr><td>Normalize variable</td><td><select id = "norm"></select></td></tr>
	<tr><td>Normalize unit</td><td><input id = "nunit" type = "text"></td></tr>
	</table>
	</form>
	<button id = "load" onclick= "loadData()">Load Data</button>
	<br>
	<button id = "draw" onclick= "drawChart()">Draw Chart</button>
	<div id = "chart_div"></div>
	<script>
	var vartext = "";
	d3.tsv("yogurt.tsv", function(err, dat){

	for (key in dat[1]) {
	vartext = vartext + key + "\n";
	}
	//var element = document.getElementById("text_div");
	//element.innerText = vartext;
	var optiondata = d3.keys(dat[1]);
	optiondata.unshift("");


	d3.select("#xValue").selectAll("option").data(optiondata).enter().append("option").attr("value",function(d){return d;}).append("text").text(function(d){return d;});

	d3.select("#yValue").selectAll("option").data(optiondata).enter().append("option").attr("value",function(d){return d;}).append("text").text(function(d){return d;});

	d3.select("#colorValue").selectAll("option").data(optiondata).enter().append("option").attr("value",function(d){return d;}).append("text").text(function(d){return d;});

	d3.select("#labelValue").selectAll("option").data(optiondata).enter().append("option").attr("value",function(d){return d;}).append("text").text(function(d){return d;});

	d3.select("#bubbleValue").selectAll("option").data(optiondata).enter().append("option").attr("value",function(d){return d;}).append("text").text(function(d){return d;});

	d3.select("#norm").selectAll("option").data(optiondata).enter().append("option").attr("value",function(d){return d;}).append("text").text(function(d){return d;});

	});

	var datatable = new Array();
	function loadData(){
	if (datatable.length != 0) {
	datatable.length = 0;
	}
	var column0 = document.getElementById("labelValue").value;
	if (column0 == null){
	alert("column0 is empty!");
	}

	var column1 = document.getElementById("xValue").value;
	if (column1 == null){
	alert("column1 is empty!");
	}
	var column2 = document.getElementById("yValue").value;
	if (column2 == null){
	alert("column2 is empty!");
	}
	var column3 = document.getElementById("colorValue").value;
	if (column3 == null){
	alert("column3 is empty!");
	}
	var column4 = document.getElementById("bubbleValue").value;
	//console.log(column4);

	var normvar = document.getElementById("norm").value;
	var normunit = document.getElementById("nunit").value;
	var normratio = 1;

	d3.tsv("yogurt.tsv", function(error, data){
	if (column4 == ""){

	datatable.push([column0, column1, column2, column3]);
	data.forEach(function(d){

	if(normvar != ""){normratio =normunit / +d[normvar];}
	datatable.push([d[column0], Math.round(+d[column1] * normratio), Math.round(+d[column2] * normratio), d[column3]]);
	});

	} else {
	datatable.push([column0, column1, column2, column3, column4]);
	data.forEach(function(d){
	if(normvar != ""){normratio =normunit / +d[normvar];}
	if (d[column4]>= 0) {

	datatable.push([d[column0], Math.round(+d[column1] * normratio), Math.round(+d[column2] * normratio), d[column3], Math.round(+d[column4] * normratio)]);
	} else {
	datatable.push([d[column0], Math.round(+d[column1] * normratio), Math.round(+d[column2] * normratio), d[column3], 0]);
	}

	});
	}

	//console.log(datatable);

	});
	}

	function drawChart(){

	var data = new Array();
	data = google.visualization.arrayToDataTable(datatable);

	//console.log(data);
	var graphtitle = document.getElementById("yValue").value;
	var hAxistitle = document.getElementById("xValue").value;
	var vAxistitle = document.getElementById("yValue").value;

	var options = {
	title: graphtitle,
	hAxis: {title: hAxistitle, viewWindowMode: "pretty"},
	vAxis: {title: vAxistitle, viewWindowMode: "pretty"},
	bubble: {textStyle:{fontSize: 12}}
	};
	var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
	chart.draw(data, options);

	}

	</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
ビヒダスＢＢ５３６プレーン加糖タイプ	森永	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とコラボした１日分の鉄分ヨーグルト	オハヨー乳業	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
増加型ビフィズス菌ＬＫＭ512ヨーグルト	メイトー	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