bobbywilson0 · June 15, 2017 17:57
diff --git a/index.html b/index.html
 <html>
  <head>
    <style>
 .chart rect {
  fill: steelblue;
 }

        .chart rect:hover {
          fill: turquoise;
        }

        .chart .rectM {
          stroke: green;
          stroke-width: 1;
          fill: green;
          fill-opacity: .2;
        }

        .chart .rectM:hover {
          fill: green;
          fill-opacity: .5;
        }

        .chart text {
          font: 10px sans-serif;
        }

        .chart .title {
          font: 15px sans-serif;
        }

        .axis path,
        .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }
    </style>

    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.13.0/d3-legend.js"></script>
  </head>
  <body>
    <div class="chart"></div>
    <p>Circle size is proportionate to number of comments</p>
    <script>
      (function() {
        var height = 400;
        var width = 600;
        var margin = 50;
        var data =[];
        
      
        function fetchData() {
          d3.json('https://www.reddit.com/r/askscience.json?limit=100', function(d) {
            d.data.children.forEach(function(el) {
              if(el.data.link_flair_text) {
                data.push({
                  x: ((Date.now() / 1000) - el.data.created_utc) / 60 / 60,
                  y: el.data.score,
                  size: el.data.num_comments,
                  c: el.data.link_flair_text
                })
              }
            })
            buildVis()
          })
        }
      
        function buildVis() {
          var labelX = 'X';
          var labelY = 'Y';
          var svg = d3.select('.chart')
            .append('svg')
            .attr('class', 'chart')
            .attr("width", width + 200 + margin + margin)
            .attr("height", height + margin + margin)
            .append("g")
            .attr("transform", "translate(" + margin + "," + margin + ")");

                
          var x = d3.scale.linear()
            .domain([d3.min(data, function (d) { return d.x; }), d3.max(data, function (d) { return d.x; })])
            .range([0, width]);
      
          var y = d3.scale.linear()
            .domain([d3.min(data, function (d) { return d.y; }), d3.max(data, function (d) { return d.y; })])
            .range([height, 0]);
      
          var scale = d3.scale.sqrt()
            .domain([d3.min(data, function (d) { return d.size; }), d3.max(data, function (d) { return d.size; })])
            .range([1, 20]);
      
          var opacity = d3.scale.sqrt()
            .domain([d3.min(data, function (d) { return d.size; }), d3.max(data, function (d) { return d.size; })])
            .range([1, .5]);
      
          var color = d3.scale.category10();
          
          var colorScale = d3.scale.ordinal()
            .domain(data.map(function(d) { return d.c }))
            .range(color.range());


      
          var xAxis = d3.svg.axis().scale(x);
          var ageFormat = d3.time.format("%M m")	
          var yAxis = d3.svg.axis().scale(y).orient("left");
      
          svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("x", -height / 2)
            .attr("y", -margin + 3)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Karma");
      
          svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis.ticks(5))
            .append("text")
            .attr("x", width / 2)
            .attr("y", margin - 10)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Age (hours)");
      
          svg.selectAll("circle")
            .data(data)
            .enter()
            .insert("circle")
            .attr("cx", width / 2)
            .attr("cy", height / 2)
            .attr("r", function (d) { return scale(d.size); })
            .style("fill", function (d) { return color(d.c); })
            .on('mouseover', function (d, i) {
              fade(d.c, .1);
            })
          .on('mouseout', function (d, i) {
            fadeOut();
          })
          .transition()
            .delay(function (d, i) { return x(d.x) - y(d.y); })
            .duration(500)
            .attr("cx", function (d) { return x(d.x); })
            .attr("cy", function (d) { return y(d.y); })
            .ease("bounce");


          var svg = d3.select("svg");
          
          svg.append("g")
            .attr("class", "legendOrdinal")
            .attr("transform", "translate(680,100)");
          
          var legendOrdinal = d3.legend.color()
            .shape("square")
            .shapePadding(10)
            .scale(colorScale);

          svg.select(".legendOrdinal")
            .call(legendOrdinal);
        
          function fade(c, opacity) {
            svg.selectAll("circle")
              .filter(function (d) {
                return d.c != c;
              })
            .transition()
              .style("opacity", opacity);
          }
      
          function fadeOut() {
            svg.selectAll("circle")
              .transition()
              .style("opacity", function (d) { opacity(d.size); });
          }

        }
        
        fetchData() 
      })();


    </script>
  </body>
 </html>
	<html>
	<head>
	<style>
	.chart rect {
	fill: steelblue;
	}

	.chart rect:hover {
	fill: turquoise;
	}

	.chart .rectM {
	stroke: green;
	stroke-width: 1;
	fill: green;
	fill-opacity: .2;
	}

	.chart .rectM:hover {
	fill: green;
	fill-opacity: .5;
	}

	.chart text {
	font: 10px sans-serif;
	}

	.chart .title {
	font: 15px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	</style>

	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.13.0/d3-legend.js"></script>
	</head>
	<body>
	<div class="chart"></div>
	<p>Circle size is proportionate to number of comments</p>
	<script>
	(function() {
	var height = 400;
	var width = 600;
	var margin = 50;
	var data =[];


	function fetchData() {
	d3.json('https://www.reddit.com/r/askscience.json?limit=100', function(d) {
	d.data.children.forEach(function(el) {
	if(el.data.link_flair_text) {
	data.push({
	x: ((Date.now() / 1000) - el.data.created_utc) / 60 / 60,
	y: el.data.score,
	size: el.data.num_comments,
	c: el.data.link_flair_text
	})
	}
	})
	buildVis()
	})
	}

	function buildVis() {
	var labelX = 'X';
	var labelY = 'Y';
	var svg = d3.select('.chart')
	.append('svg')
	.attr('class', 'chart')
	.attr("width", width + 200 + margin + margin)
	.attr("height", height + margin + margin)
	.append("g")
	.attr("transform", "translate(" + margin + "," + margin + ")");


	var x = d3.scale.linear()
	.domain([d3.min(data, function (d) { return d.x; }), d3.max(data, function (d) { return d.x; })])
	.range([0, width]);

	var y = d3.scale.linear()
	.domain([d3.min(data, function (d) { return d.y; }), d3.max(data, function (d) { return d.y; })])
	.range([height, 0]);

	var scale = d3.scale.sqrt()
	.domain([d3.min(data, function (d) { return d.size; }), d3.max(data, function (d) { return d.size; })])
	.range([1, 20]);

	var opacity = d3.scale.sqrt()
	.domain([d3.min(data, function (d) { return d.size; }), d3.max(data, function (d) { return d.size; })])
	.range([1, .5]);

	var color = d3.scale.category10();

	var colorScale = d3.scale.ordinal()
	.domain(data.map(function(d) { return d.c }))
	.range(color.range());



	var xAxis = d3.svg.axis().scale(x);
	var ageFormat = d3.time.format("%M m")
	var yAxis = d3.svg.axis().scale(y).orient("left");

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("x", -height / 2)
	.attr("y", -margin + 3)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Karma");

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis.ticks(5))
	.append("text")
	.attr("x", width / 2)
	.attr("y", margin - 10)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Age (hours)");

	svg.selectAll("circle")
	.data(data)
	.enter()
	.insert("circle")
	.attr("cx", width / 2)
	.attr("cy", height / 2)
	.attr("r", function (d) { return scale(d.size); })
	.style("fill", function (d) { return color(d.c); })
	.on('mouseover', function (d, i) {
	fade(d.c, .1);
	})
	.on('mouseout', function (d, i) {
	fadeOut();
	})
	.transition()
	.delay(function (d, i) { return x(d.x) - y(d.y); })
	.duration(500)
	.attr("cx", function (d) { return x(d.x); })
	.attr("cy", function (d) { return y(d.y); })
	.ease("bounce");


	var svg = d3.select("svg");

	svg.append("g")
	.attr("class", "legendOrdinal")
	.attr("transform", "translate(680,100)");

	var legendOrdinal = d3.legend.color()
	.shape("square")
	.shapePadding(10)
	.scale(colorScale);

	svg.select(".legendOrdinal")
	.call(legendOrdinal);

	function fade(c, opacity) {
	svg.selectAll("circle")
	.filter(function (d) {
	return d.c != c;
	})
	.transition()
	.style("opacity", opacity);
	}

	function fadeOut() {
	svg.selectAll("circle")
	.transition()
	.style("opacity", function (d) { opacity(d.size); });
	}

	}

	fetchData()
	})();


	</script>
	</body>
	</html>