jung-kim/d3Demo.html

## d3Demo.html
<!DOCTYPE html>
<body/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

  var svg = d3.select('body')
    .append('svg')
      .attr('id', 'graph')
      .attr('width', '100%')
      .attr('height', '100%');

  d3.json('https://api.github.com/users/alexisabril/events', function(error, json) {
    var type = [];
    for (var n = 0; n < json.length; n++) {
      if (type[json[n].type]) {
        type[json[n].type]++;
      } else {
        type[json[n].type] = 1;
      }
    }

    // Not the most optimal way to flatening but I think it is the most clear way.
    var dataSet = [];
    for (key in type) {
      dataSet.push({key: key, count: type[key]});
    }

    var perRow = svg.selectAll('rect')
      .data(dataSet)
      .enter();

    perRow.append('rect')
        .attr('x', 0)
        .attr('y', function(d, i) {
          return i * 25;
        })
        .attr('width', function(d, i) {
          return d.count * 30;
        })
        .attr('height', 20)
        .attr('fill', '#333')
        .on('click', function(d, i) {
          alert(d.key + ' has ' + d.count + ' many occurances.');
        })
        .on('mouseover', function(d, i) {
          d3.select(this)
            .attr('fill', '#611');
        })
        .on('mouseout', function(d, i) {
          d3.select(this)
            .attr('fill', '#333');
        });

    perRow.append('text')
        .attr('x', function(d, i) {return d.count * 30 + 10;})
        .attr('y', function(d, i) {return i * 25 + 15;})
        .text(function(d, i) {return d.key});
  });

</script>
	<!DOCTYPE html>
	<body/>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var svg = d3.select('body')
	.append('svg')
	.attr('id', 'graph')
	.attr('width', '100%')
	.attr('height', '100%');

	d3.json('https://api.github.com/users/alexisabril/events', function(error, json) {
	var type = [];
	for (var n = 0; n < json.length; n++) {
	if (type[json[n].type]) {
	type[json[n].type]++;
	} else {
	type[json[n].type] = 1;
	}
	}

	// Not the most optimal way to flatening but I think it is the most clear way.
	var dataSet = [];
	for (key in type) {
	dataSet.push({key: key, count: type[key]});
	}

	var perRow = svg.selectAll('rect')
	.data(dataSet)
	.enter();

	perRow.append('rect')
	.attr('x', 0)
	.attr('y', function(d, i) {
	return i * 25;
	})
	.attr('width', function(d, i) {
	return d.count * 30;
	})
	.attr('height', 20)
	.attr('fill', '#333')
	.on('click', function(d, i) {
	alert(d.key + ' has ' + d.count + ' many occurances.');
	})
	.on('mouseover', function(d, i) {
	d3.select(this)
	.attr('fill', '#611');
	})
	.on('mouseout', function(d, i) {
	d3.select(this)
	.attr('fill', '#333');
	});

	perRow.append('text')
	.attr('x', function(d, i) {return d.count * 30 + 10;})
	.attr('y', function(d, i) {return i * 25 + 15;})
	.text(function(d, i) {return d.key});
	});

	</script>