Skip to content

Instantly share code, notes, and snippets.

@captainwz

captainwz/d3-5-demo1.html

Created December 3, 2012 13:21
Show Gist options
  • Save captainwz/4195007 to your computer and use it in GitHub Desktop.
Save captainwz/4195007 to your computer and use it in GitHub Desktop.
Download ZIP
d3-5-demo1
Raw
d3-5-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-5-demo1.js" type="text/javascript"></script>
<script type="text/javascript">
function show(data){
d3.select("body")
.append("svg")
.attr("width",300)
.attr("height",300)
.selectAll("circle")
.data(data.member)
.enter()
.append("circle");
var x_scale = d3.scale.linear()
.range([20,280])
.domain([20,50]);
var y_scale = d3.scale.linear()
.range([280,20])
.domain([160,190]);
d3.selectAll("circle")
.attr("cx",function(d){return x_scale(d.age)})
.attr("cy",function(d){return y_scale(d.height)})
.attr("r",5);
}
</script>
</head>
<body>
<script type="text/javascript">
show(data);
</script>
</body>
</html>
Raw
d3-5-demo1.js
var data=
{
"flight":815,
"member":
[{
"name":"Jack",
"sex":"male",
"age":30,
"height":185
},
{
"name":"Kate",
"sex":"female",
"age":28,
"height":170
},
{
"name":"Sawyer",
"sex":"male",
"age":29,
"height":182
},
{
"name":"John",
"sex":"male",
"age":40,
"height":186
},
{
"name":"Hugo",
"sex":"male",
"age":27,
"height":183
}]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment