JSFiddle Github integration demo for Facebook group visualization

jsFiddle demo hosted on Github using HTML Request to get Ajax data author(s): Shubhanshu Mishra

HTML

<script src="/js/empty.js"></script>
<link rel="stylesheet" href="/css/normalize.css">
<script src="/js/d3.js"></script>
<div id="graphs">
	
</div>
<pre id="debug"></pre>

SCSS

svg{
		width: 100%;
		height: 500px;
	}
	.d3-tip {
	  line-height: 1;
	  font-weight: bold;
	  padding: 12px;
	  background: rgba(0, 0, 0, 0.8);
	  color: #fff;
	  border-radius: 2px;
	}

	/* Creates a small triangle extender for the tooltip */
	.d3-tip:after {
	  box-sizing: border-box;
	  display: inline;
	  font-size: 10px;
	  width: 100%;
	  line-height: 1;
	  color: rgba(0, 0, 0, 0.8);
	  content: "\25BC";
	  position: absolute;
	  text-align: center;
	}

	/* Style northward tooltips differently */
	.d3-tip.n:after {
	  margin: -1px 0 0 0;
	  top: 100%;
	  left: 0;
	}
	.axis path,
	.axis line {
	  fill: none;
	  stroke: #000;
	  shape-rendering: crispEdges;
	}

JavaScript

var data1 = [4, 8, 15, 16, 23, 42];
var graph = d3.select("#graphs")
  .selectAll("div")
    .data(data1)
  .enter().append("div")
    .style("width", function(d) { return d * 10 + "px"; })
    .text(function(d) { return d; });


var margin = {top: 40, right: 20, bottom: 30, left: 40},
    width = 1200 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var url = '/gh/get/response.json/napsternxg/FacebookGroupVisual/tree/master/Demo/';

var json_data = d3.json(url)
    .header("X-Requested-With", "XMLHttpRequest")
    .header("Access-Control-Allow-Origin", "*")
    .header("Content-Type", "application/x-www-form-urlencoded")
    .post(function (error, request) {
        console.log(request);
    if (error) return console.warn(error);
    var data = request;
    console.log(data);
	data.forEach(function(d){
		d.poster = d['from']['name'];
		d.comments_size = 0;
		d.comments_arr = [];
		if(('comments' in d) && ('data' in d['comments'])){
			d.comments_arr = d['comments']['data'];
			d.comments_size = d.comments_arr.length;
		}
		d.created_at = new Date(d['created_time']);
	});
	
	function created_at(d){ return d.created_at; }
	
	var x = d3.time.scale()
    .range([margin.left, width-margin.right])
    .domain(d3.extent(data,created_at));

    var formatTime = d3.time.format('%d/%m');

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(formatTime);


    console.log(x.domain());
    console.log(x.range());
    console.log(x.ticks());

    /*var tip = d3.tip()
	  .attr('class', 'd3-tip')
	  .offset([-10, 0])
	  .html(function(d) {
	    return "<span style='color:red'>" + d.name + "</span>";
	});*/
	console.log(data);
	var svg = d3.select('#graphs')
		.append('svg');

	svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);


	var posts = svg.selectAll('g.plot')
		.data(data)
		.enter().append('g')
        .attr("class", "plot")
		.attr('id',...