sampathweb/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from anonymous's block: D3 meetup: Simple Scatter

  
## 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% }
  </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) {
      var counted = [];
      data.forEach(function(d) {
        if (d.age) {
        	counted.push(d);
        }
      });

      var maxAge = d3.max(counted, function(d, i) { return d.age});
      console.log(maxAge)

      var yScale = d3.scale.linear()
      	.domain([0, maxAge])
      	.range([500, 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 i * 25
          },
        cy: function(d, i) {return yScale(d.age)},
        r: 10
      })
      .on("click", function(d, i) {
          console.log("clicked", d, i);
      })


    });

    console.log("you are now rocking with d3", d3);
  </script>
</body>
	<!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 {
	name: d.name,
	age: parseFloat(d.age),
	date: new Date(d.month + "/" + d.day + "/" + d.year)
	}
	})
	.get(function(err, data) {
	var counted = [];
	data.forEach(function(d) {
	if (d.age) {
	counted.push(d);
	}
	});

	var maxAge = d3.max(counted, function(d, i) { return d.age});
	console.log(maxAge)

	var yScale = d3.scale.linear()
	.domain([0, maxAge])
	.range([500, 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 i * 25
	},
	cy: function(d, i) {return yScale(d.age)},
	r: 10
	})
	.on("click", function(d, i) {
	console.log("clicked", d, i);
	})


	});

	console.log("you are now rocking with d3", d3);
	</script>
	</body>