Skip to content

Instantly share code, notes, and snippets.

@judyyzhang
Created March 13, 2016 21:47
Show Gist options
  • Save judyyzhang/87cf840dd72fef25ac24 to your computer and use it in GitHub Desktop.
Save judyyzhang/87cf840dd72fef25ac24 to your computer and use it in GitHub Desktop.
Counter
<!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% }
</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 (
);
)}
.get(function(d){
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 circles=svg.selectAll("circle").data(data)
circles.enter()
.append("circle")
.attr({
cx: function(d,i){
return i=25
},
cy:200,
x:10
})
.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