infographicstw/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Demonstration about using cors proxy to help retrieve data in client side

  
## index.css
#panel {
  margin: 20px;
  padding: 20px; }

#root {
  margin: 0 20px 20px;
  padding: 0 20px 20px;
  white-space: pre; }

input {
  border: 1px solid #ccc;
  font-size: 16px;
  border-radius: 5px;
  padding: 5px; }

button {
  border: 1px outset #ccc;
  font-size: 16px;
  border-radius: 5px;
  padding: 5px 10px; }

## index.html
<!DOCTYPE html>
<html lang="en">
  <head prefix="og: http://ogp.me/ns#">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
    <!-- libraries-->
    <link rel="icon" type="image/x-icon" href="thumbnail.png">
    <script type="text/javascript" src="//codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
    <!-- custom files-->
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <div id="panel">
      <input id="query" type="text" value="資料">
      <button type="button" onclick="fetch()">取得萌典翻譯</button><br><small>不妨嘗試一些常見的字，如「失言」、「進口」、「大覺」等等</small>
    </div>
    <div id="root"></div>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

## index.js
// Generated by LiveScript 1.2.0
var fetch;
fetch = function(query){
  query == null && (query = "字典");
  query = d3.select('#query').property('value');
  d3.select('#root').text("... 截取中 ...");
  return d3.html("http://crossorigin.me/http://moedict.tw/" + query, function(d){
    var str;
    str = "";
    d3.select(d).selectAll(".fw_def").each(function(){
      return str += d3.select(this).text() + "\n";
    });
    if (!str) {
      str = "找不到這個詞 :(";
    } else {
      str = query + " 的外語寫法如下: \n" + str;
    }
    return d3.select('#root').text(str);
  });
};
fetch();
	#panel {
	margin: 20px;
	padding: 20px; }

	#root {
	margin: 0 20px 20px;
	padding: 0 20px 20px;
	white-space: pre; }

	input {
	border: 1px solid #ccc;
	font-size: 16px;
	border-radius: 5px;
	padding: 5px; }

	button {
	border: 1px outset #ccc;
	font-size: 16px;
	border-radius: 5px;
	padding: 5px 10px; }
	<!DOCTYPE html>
	<html lang="en">
	<head prefix="og: http://ogp.me/ns#">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>template</title>
	<!-- libraries-->
	<link rel="icon" type="image/x-icon" href="thumbnail.png">
	<script type="text/javascript" src="//codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
	<!-- custom files-->
	<link rel="stylesheet" type="text/css" href="index.css">
	</head>
	<body>
	<div id="panel">
	<input id="query" type="text" value="資料">
	<button type="button" onclick="fetch()">取得萌典翻譯</button><br><small>不妨嘗試一些常見的字，如「失言」、「進口」、「大覺」等等</small>
	</div>
	<div id="root"></div>
	<script type="text/javascript" src="index.js"></script>
	</body>
	</html>
	// Generated by LiveScript 1.2.0
	var fetch;
	fetch = function(query){
	query == null && (query = "字典");
	query = d3.select('#query').property('value');
	d3.select('#root').text("... 截取中 ...");
	return d3.html("http://crossorigin.me/http://moedict.tw/" + query, function(d){
	var str;
	str = "";
	d3.select(d).selectAll(".fw_def").each(function(){
	return str += d3.select(this).text() + "\n";
	});
	if (!str) {
	str = "找不到這個詞 :(";
	} else {
	str = query + " 的外語寫法如下: \n" + str;
	}
	return d3.select('#root').text(str);
	});
	};
	fetch();