Skip to content

Instantly share code, notes, and snippets.

@judyyzhang

judyyzhang/README.md

Created March 13, 2016 22:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save judyyzhang/ba54603cfa4b6d7222c0 to your computer and use it in GitHub Desktop.
Save judyyzhang/ba54603cfa4b6d7222c0 to your computer and use it in GitHub Desktop.
Download ZIP
Counter
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
circle {
opacity: 0.5;
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see!
var svg = d3.select("body").append("svg")
var url = "https://numeracy.co/projects/382368K6Bkx/data?format=csv";
d3.csv(url)
.row(function(d){
return {
name: d.name,
age: parseFloat(d.age),
date: new Date(d.month + "/" + d.day + "/" + d.year)
}
})
.get(function(err, data){
console.log("data:", data);
var counted=[];
var totalAge = 0;
data.forEach(function(d){
if(d.age != "unknown"){
counted.push(d);
totalAge += d.age;
}
})
var maxAge = d3.max(counted, function(d){
return d.age
});
var avgAge = d3.mean(counted, function(d){
return d.age
});
console.log("mean age", avgAge);
var yscale = d3.scale.linear()
.domain([0, maxAge])
.range([400, 10]);
var dateExtent = d3.extent(counted, function(d) {
return d.date
})
var xscale = d3.time.scale()
.domain(dateExtent)
.range([10, 900])
var circles=svg.selectAll("circle").data(counted)
circles.enter()
.append("circle")
.attr({
cx: function(d,i) {
return xscale(d.date)
} ,
cy: function(d,i) {
return yscale(d.age)
},
r:5
})
.on("click", function(d){
console.log("clicked",d)
})
})
console.log("you are now rocking with d3", d3);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment