tejaser/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
Using tweets.json data to visualize by author
Used the d3 nesting to group data by authors


## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.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>
  <svg />
  <script>
    var width = 600;
    var height = 300;
    var margin = {top: 20, bottom:20, left:20, right:20};

    d3.json("tweets.json", (err, data) => {
      if (err) {
        console.log("Error: ", err);
      } else {
        dataViz(data.tweets);
      }
    });

    function dataViz(incomingData) {

      var nestedTweets = d3.nest()
      	.key(d => d.user)
      	.entries(incomingData);

      nestedTweets.forEach(d => {
        d.numTweets = d.values.length;
      });

      var maxTweets = d3.max(nestedTweets, d => d.numTweets);
      var yScale = d3.scaleLinear()
      	.domain([0, maxTweets])
      	.range([margin.bottom, height - margin.top]);


      d3.select("svg").selectAll("rect")
      	.data(nestedTweets)
      	.enter()
      	.append("rect")
      	.attr("width", 50)
        .attr("height", d => yScale(d.numTweets))
        .attr("x", (d, i) => margin.left + i * 60)
      	.attr("y", d => height - yScale(d.numTweets))
      	.style("fill",   "#FE9922")
      	.style("stroke", "#9A8B7A")
      	.style("stroke-width", "1px");
    };


  </script>
</body>

## tweets.json
{
"tweets": [
{"user": "Al", "content": "I really love seafood.", "timestamp": " Mon Dec 23 2013 21:30 GMT-0800 (PST)", "retweets": ["Raj","Pris","Roy"], "favorites": ["Sam"]},
{"user": "Al", "content": "I take that back, this doesn't taste so good.", "timestamp": "Mon Dec 23 2013 21:55 GMT-0800 (PST)", "retweets": ["Roy"], "favorites": []},
{"user": "Al", "content": "From now on, I'm only eating cheese sandwiches.", "timestamp": "Mon Dec 23 2013 22:22 GMT-0800 (PST)", "retweets": [], "favorites": ["Roy","Sam"]},
{"user": "Roy", "content": "Great workout!", "timestamp": " Mon Dec 23 2013 7:20 GMT-0800 (PST)", "retweets": [], "favorites": []},
{"user": "Roy", "content": "Spectacular oatmeal!", "timestamp": " Mon Dec 23 2013 7:23 GMT-0800 (PST)", "retweets": [], "favorites": []},
{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47  GMT-0800 (PST)", "retweets": [], "favorites": []},
{"user": "Roy", "content": "Just got a ticket for texting and driving!", "timestamp": " Mon Dec 23 2013 8:05 GMT-0800 (PST)", "retweets": [], "favorites": ["Sam", "Sally", "Pris"]},
{"user": "Pris", "content": "Going to have some boiled eggs.", "timestamp": " Mon Dec 23 2013 18:23 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},
{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47  GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},
{"user": "Sam", "content": "@Roy Let's get lunch", "timestamp": " Mon Dec 23 2013 11:05 GMT-0800 (PST)", "retweets": ["Pris"], "favorites": ["Sally", "Pris"]}
]
}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.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>
	<svg />
	<script>
	var width = 600;
	var height = 300;
	var margin = {top: 20, bottom:20, left:20, right:20};

	d3.json("tweets.json", (err, data) => {
	if (err) {
	console.log("Error: ", err);
	} else {
	dataViz(data.tweets);
	}
	});

	function dataViz(incomingData) {

	var nestedTweets = d3.nest()
	.key(d => d.user)
	.entries(incomingData);

	nestedTweets.forEach(d => {
	d.numTweets = d.values.length;
	});

	var maxTweets = d3.max(nestedTweets, d => d.numTweets);
	var yScale = d3.scaleLinear()
	.domain([0, maxTweets])
	.range([margin.bottom, height - margin.top]);


	d3.select("svg").selectAll("rect")
	.data(nestedTweets)
	.enter()
	.append("rect")
	.attr("width", 50)
	.attr("height", d => yScale(d.numTweets))
	.attr("x", (d, i) => margin.left + i * 60)
	.attr("y", d => height - yScale(d.numTweets))
	.style("fill", "#FE9922")
	.style("stroke", "#9A8B7A")
	.style("stroke-width", "1px");
	};



	</script>
	</body>
	{
	"tweets": [
	{"user": "Al", "content": "I really love seafood.", "timestamp": " Mon Dec 23 2013 21:30 GMT-0800 (PST)", "retweets": ["Raj","Pris","Roy"], "favorites": ["Sam"]},
	{"user": "Al", "content": "I take that back, this doesn't taste so good.", "timestamp": "Mon Dec 23 2013 21:55 GMT-0800 (PST)", "retweets": ["Roy"], "favorites": []},
	{"user": "Al", "content": "From now on, I'm only eating cheese sandwiches.", "timestamp": "Mon Dec 23 2013 22:22 GMT-0800 (PST)", "retweets": [], "favorites": ["Roy","Sam"]},
	{"user": "Roy", "content": "Great workout!", "timestamp": " Mon Dec 23 2013 7:20 GMT-0800 (PST)", "retweets": [], "favorites": []},
	{"user": "Roy", "content": "Spectacular oatmeal!", "timestamp": " Mon Dec 23 2013 7:23 GMT-0800 (PST)", "retweets": [], "favorites": []},
	{"user": "Roy", "content": "Amazing traffic!", "timestamp": " Mon Dec 23 2013 7:47 GMT-0800 (PST)", "retweets": [], "favorites": []},
	{"user": "Roy", "content": "Just got a ticket for texting and driving!", "timestamp": " Mon Dec 23 2013 8:05 GMT-0800 (PST)", "retweets": [], "favorites": ["Sam", "Sally", "Pris"]},
	{"user": "Pris", "content": "Going to have some boiled eggs.", "timestamp": " Mon Dec 23 2013 18:23 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},
	{"user": "Pris", "content": "Maybe practice some gymnastics.", "timestamp": " Mon Dec 23 2013 19:47 GMT-0800 (PST)", "retweets": [], "favorites": ["Sally"]},
	{"user": "Sam", "content": "@Roy Let's get lunch", "timestamp": " Mon Dec 23 2013 11:05 GMT-0800 (PST)", "retweets": ["Pris"], "favorites": ["Sally", "Pris"]}
	]
	}