Skip to content

Instantly share code, notes, and snippets.

@panfeng
Created October 8, 2013 18:34
Show Gist options
  • Save panfeng/6889349 to your computer and use it in GitHub Desktop.
Save panfeng/6889349 to your computer and use it in GitHub Desktop.
Tributary inlet
{"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"}
<!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 age
MMM 30
XXX 80
abc 10
[
{"name":"MMM","age":30},
{"name":"XXX","age":80},
{"name":"abc","age":10}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment