shobhitg/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>D3 General update pattern using tables</title>
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"/>
</head>

<body>
  <table class="table"></table>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" charset="utf-8"></script>
  <script src="./js/main.js"></script>
</body>

</html>

## main.js
$(function () {
  var table = d3.select("table");

  table.append("thead");

  table.append("tbody");
  table.append("tfoot");

  // ["domain","banned_by","media_embed","subreddit","selftext_html","selftext","likes",
  // "secure_media","link_flair_text","id","secure_media_embed","clicked","stickied","author","media","score",
  // "approved_by","over_18","hidden","thumbnail","subreddit_id","edited","link_flair_css_class","author_flair_css_class",
  // "downs","saved","is_self","permalink","name","created","url","author_flair_text","title","created_utc","ups","num_comments",
  // "visited","num_reports","distinguished"];


  function filterOutProperties(story) {
    var keys = ["id", "thumbnail", "score", /*"ups", "downs",*/ "url", "title", "permalink"];
    for (var key in story.data) {
      if (story.data.hasOwnProperty(key)) {
        if (keys.indexOf(key) === -1)
          delete story.data[key];
      }
    }
  }

  function renderHTML(story) {
    story.data.thumbnail = $('<a></a>').attr({'href': story.data.url})
    .css("display", "block")
    .css("width", "70px")
    .css("height", "70px")
    .css("background", "url(" + story.data.thumbnail + ") no-repeat 0px center")
    .wrap('<div>').parent().html();


    story.data.permalink = $('<a>comments</a>').attr({'href': 'http://www.reddit.com' + story.data.permalink})
                            .wrap('<div>').parent().html();
    delete story.data.url;
  }

  function update(res) {
    var stories = res.data.children;

    stories = stories.filter(function (story, index, array) {
      return !story.data.over_18;
    });

    stories.forEach(function (story) {
      filterOutProperties(story);
      renderHTML(story);
    });


    var keys = Object.keys(stories[0].data);

    //console.log(JSON.stringify(stories));

    var header = table.select("thead")
      .selectAll("th")
      .data(keys);
      header.exit().remove();
      header.enter().append("th");

      header.text(function (d, i) {
         return d;
      });

      var rows = table.select("tbody")
         .selectAll("tr")
         .data(stories);

      rows.exit().remove();
      rows.enter().append("tr");


      var columns = rows.selectAll("td")
         .data(function (d, i) {
            var ret = $.map(d.data, function (v) {
                  return v;
               });

            for (var j = 0; j < ret.length; j++) {
               if (this.length && this[j] && this[j].innerHTML != ret[j]) {
                  d3.select(this[j])
                  .attr("class", "update");
               }
            }
            return ret;
         });

      //console.log(JSON.stringify(columns.enter()));

      columns.exit().remove();
      columns.enter().append("td");

      var colorPalette = ["AntiqueWhite", "MistyRose", "Beige", "Azure", "NavajoWhite"];

      columns
      .html(function (d, i) {
         return d;
      })
      .style("background-color",
         function (d) {
         if (this.classList.contains("update")) {
            return colorPalette[Math.floor(Math.random() * colorPalette.length)];
         }
      })
      .attr("class", "");
  }

   (function refresh() {
  d3.xhr("http://www.reddit.com/r/pics.json?limit=30&jsonp", "application/x-www-form-urlencoded", function (error, root) {
    update(JSON.parse(root.response));
            setTimeout(refresh, 1000);
   });


  })();

});
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>D3 General update pattern using tables</title>
	<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"/>
	</head>

	<body>
	<table class="table"></table>

	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
	<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" charset="utf-8"></script>
	<script src="./js/main.js"></script>
	</body>

	</html>
	$(function () {
	var table = d3.select("table");

	table.append("thead");

	table.append("tbody");
	table.append("tfoot");

	// ["domain","banned_by","media_embed","subreddit","selftext_html","selftext","likes",
	// "secure_media","link_flair_text","id","secure_media_embed","clicked","stickied","author","media","score",
	// "approved_by","over_18","hidden","thumbnail","subreddit_id","edited","link_flair_css_class","author_flair_css_class",
	// "downs","saved","is_self","permalink","name","created","url","author_flair_text","title","created_utc","ups","num_comments",
	// "visited","num_reports","distinguished"];


	function filterOutProperties(story) {
	var keys = ["id", "thumbnail", "score", /"ups", "downs",/ "url", "title", "permalink"];
	for (var key in story.data) {
	if (story.data.hasOwnProperty(key)) {
	if (keys.indexOf(key) === -1)
	delete story.data[key];
	}
	}
	}

	function renderHTML(story) {
	story.data.thumbnail = $('<a></a>').attr({'href': story.data.url})
	.css("display", "block")
	.css("width", "70px")
	.css("height", "70px")
	.css("background", "url(" + story.data.thumbnail + ") no-repeat 0px center")
	.wrap('<div>').parent().html();


	story.data.permalink = $('<a>comments</a>').attr({'href': 'http://www.reddit.com' + story.data.permalink})
	.wrap('<div>').parent().html();
	delete story.data.url;
	}

	function update(res) {
	var stories = res.data.children;

	stories = stories.filter(function (story, index, array) {
	return !story.data.over_18;
	});

	stories.forEach(function (story) {
	filterOutProperties(story);
	renderHTML(story);
	});


	var keys = Object.keys(stories[0].data);

	//console.log(JSON.stringify(stories));

	var header = table.select("thead")
	.selectAll("th")
	.data(keys);
	header.exit().remove();
	header.enter().append("th");

	header.text(function (d, i) {
	return d;
	});

	var rows = table.select("tbody")
	.selectAll("tr")
	.data(stories);

	rows.exit().remove();
	rows.enter().append("tr");


	var columns = rows.selectAll("td")
	.data(function (d, i) {
	var ret = $.map(d.data, function (v) {
	return v;
	});

	for (var j = 0; j < ret.length; j++) {
	if (this.length && this[j] && this[j].innerHTML != ret[j]) {
	d3.select(this[j])
	.attr("class", "update");
	}
	}
	return ret;
	});

	//console.log(JSON.stringify(columns.enter()));

	columns.exit().remove();
	columns.enter().append("td");

	var colorPalette = ["AntiqueWhite", "MistyRose", "Beige", "Azure", "NavajoWhite"];

	columns
	.html(function (d, i) {
	return d;
	})
	.style("background-color",
	function (d) {
	if (this.classList.contains("update")) {
	return colorPalette[Math.floor(Math.random() * colorPalette.length)];
	}
	})
	.attr("class", "");
	}

	(function refresh() {
	d3.xhr("http://www.reddit.com/r/pics.json?limit=30&jsonp", "application/x-www-form-urlencoded", function (error, root) {
	update(JSON.parse(root.response));
	setTimeout(refresh, 1000);
	});


	})();

	});