The Counted: simple example

forked from enjalot's block: The Counted: simple example

forked from TheLady's block: The Counted: simple example

<!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 = [];
      data.forEach(function(d) {
        if(d.age) {
          counted.push(d)
        }
      })
      console.log("counted", counted)
      
      
      var maxAge = d3.max(counted, function(d) {
        return d.age
      })
      console.log("max age:", maxAge)
      
      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,i) {
          console.log("clicked", d.age, yscale(d.age))
        })
      
    })
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js