police violence 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% }
  </style>
</head>

<body>
  <script>
//     // Feel free to change or delete any of the code you see!
//     var svg = d3. select("body").append("svg")
//     svg.append("rect")
//     	.attr({x: 29, y:10, width: 700, height: 480})
//     	.style({fill: "#a72d1a"})
//    svg.append("circle")
//    		.attr({cx: 145, cy: 136, r: 50})
//    	.transition().duration(3000).ease("bounce")
//       .style({ fill: "#5db9e3"})

//     console.log("you are now rocking with d3", d3);
    var svg = d3. select("body").append("svg")
    
    //load data
    var url = "https://numeracy.co/projects/382368K6Bkx/data?format=csv";
    d3.csv(url)
      
    .getfunction(err, data)
    {
           console.log("data:", data)
           
           //process the data to set domain
           //passing in function, get callback
          
           
          var counted = [];
      		data.forEach(function(d) {
            if(d.age !== "Unknown") {
              counted.push(d)
              //convert strings into numbers to do math operations
          
            }
          })
           
           var maxAge = d3.max(counted, function(d){
             return d.age
           })
           console.log("max age:", maxAge)
           
    var yscale = d3.scale.liner()
    	.domain([0, maxAge])
    	//flip values to correct direction of y axis
    	.range([400, 10])
    
    var dateExtent = d3.extent(counted, function(d {
    	return d. date                                              
    }))
    var xscale = d3.time.scale()
    	.domain(dateExtent)
    	.
    
           //making elements
           var circles = svg.selectAll("circle")
           	.data(counted)
           
           circles.enter()
           	.append("circle")
           	.attr({
            	cx: function(d,i) {
//             console.log("data:", data)
//             console.log(i,d)
               return xscale(d.date)
              },
             	cy: function(d,i) {
                return yscale(d.age)
              },
             	r: 10
           })           
           .on("click", function(d,i) {
            console.log("clicked", d.age, yscale(d, )) 
           })
       })
   
  </script>
</body>

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