panfeng · October 8, 2013 18:34
diff --git a/_.md b/_.md
diff --git a/config.json b/config.json
 {"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"D3Learning.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/TzVwl1q.png"}
diff --git a/D3Learning.html b/D3Learning.html
 <!doctype html>
 <html>
 <head>
 <title>D3 tutorial</title>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 </head>
 <body>
    <p> This a paragraph</p>
    <script>
        d3.json("./data.json",function(data){

            var canvas = d3.select("body").append("svg")
            .attr("width",500)
            .attr("height",500)

            canvas.selectAll("rect").data(data)
            .enter()
            .append("rect")
            .attr("width",function(d){return d.age*10 })
            .attr("height",500)
            .attr("y", function(d,i){ return i*50;})
            .attr("fill","blue")
        })


    </script>
 </body>

 </html>
diff --git a/data.csv b/data.csv
diff --git a/data.json b/data.json
 [
 {"name":"MMM","age":30},
 {"name":"XXX","age":80},
 {"name":"abc","age":10}
 ]
	<!doctype html>
	<html>
	<head>
	<title>D3 tutorial</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<p> This a paragraph</p>
	<script>
	d3.json("./data.json",function(data){

	var canvas = d3.select("body").append("svg")
	.attr("width",500)
	.attr("height",500)

	canvas.selectAll("rect").data(data)
	.enter()
	.append("rect")
	.attr("width",function(d){return d.age*10 })
	.attr("height",500)
	.attr("y", function(d,i){ return i*50;})
	.attr("fill","blue")
	})


	</script>
	</body>

	</html>
	[
	{"name":"MMM","age":30},
	{"name":"XXX","age":80},
	{"name":"abc","age":10}
	]