panfeng/D3Learning.html

## _.md

      
    Raw
  

              _.md
            
          
    [ Launch: Tributary inlet ] 6889349 by panfeng


## 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"}

## 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>

## data.csv

          
            name
            age

            
              MMM
              30

            
              XXX
              80

            
              abc
              10

## 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}
	]