Skip to content

Instantly share code, notes, and snippets.

@captainwz

captainwz/d3-4-demo1.html

Created December 3, 2012 05:34
Show Gist options
  • Save captainwz/4192972 to your computer and use it in GitHub Desktop.
Save captainwz/4192972 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
d3-4-demo1.html
<html>
<head>
<script src="http://d3js.org/d3.v2.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="d3-4-demo1.js" type="text/javascript"></script>
<script type="text/javascript">
function show(data){
d3.select("body")
.append("div")
.attr("class","age_chart")
.selectAll(".age_bar")
.data(data.member)
.enter()
.append("div")
.attr("class","age_bar")
.style("width","50px")
.style("float","left")
.style("height",function(d){return d.age*5+"px"})
.style("margin","5px")
.style("padding","5px")
.text(function(d){return d.name})
}
</script>
<style type="text/css">
.age_bar{
background: #D32121;
color: #fff;
border: 1px solid #ffffff;
}</style>
</head>
<body>
<script type="text/javascript">
show(data);
</script>
</body>
</html>
Raw
d3-4-demo1.js
var data=
{
"flight":815,
"member":
[{
"name":"Jack",
"sex":"male",
"age":30
},
{
"name":"Kate",
"sex":"female",
"age":28
},
{
"name":"Sawyer",
"sex":"male",
"age":29
},
{
"name":"John",
"sex":"male",
"age":40
}]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment