jtulk/_D3-JSONGenerator.md

## _D3-JSONGenerator.md

      
    Raw
  

              _D3-JSONGenerator.md
            
          
    Experimenting with Gist, Gistup, Bl.ocks.org, D3, JSON-Generator, and some vanilla javascript.

  
## index.html
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div id="chart"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
      <script src="main.js"></script>
    </body>
</html>

## main.js
var r = new XMLHttpRequest();
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200){
    console.log('Request Failed');
    return false;
  } else {
    var data = JSON.parse(r.responseText);
    processData(data);
  }
};
r.open("GET", "http://beta.json-generator.com/api/json/get/H6eos0I");
r.send(null);

function processData(dataset){
  var chart = document.getElementById('chart');
  var h = chart.offsetHeight;
  var w = chart.offsetWidth;

  var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient('bottom')
                .tickSize(16, 0);

  var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient('left')
                .tickSize(16, 0);

  var xScale = d3.scale.linear()
                .domain([0, 100])
                .range([0, w]);

  var yScale = d3.scale.linear()
                .domain([0, 100])
                .range([h, 0]);

  d3.select('#chart').append('svg')
    .attr('height', h)
    .attr('width', w)
    .selectAll('circle')
    .data(dataset)
    .enter()
    .append('circle')
    .attr('r', 0)
    .attr('cx', 0)
    .attr('cy', h)
    .transition()
    .delay(function(d, i) { return i * 30; })
    .each(animateSingle);

    function animateSingle(){
      var circle = d3.select(this);
      (function repeat(){
        circle = circle.transition()
          .attr('r', function(d){
            return Math.ceil(Math.random()*8);
          })
          .attr('cx', function(d){
            return xScale(Math.ceil(Math.random()* 100));
          })
          .attr('cy', function(d){
            return yScale(Math.ceil(Math.random()* 100));
          })
          .transition()
          .duration(Math.ceil(Math.random() * 1000) + 500)
          .ease('elastic-out-in')
          .attr('r', function(d){
            return Math.ceil(Math.random()*4);
          })
          .attr('cx', function(d){
            return xScale(Math.ceil(Math.random()* 100));
          })
          .attr('cy', function(d){
            return yScale(Math.ceil(Math.random()* 100));
          })
          .each('end', repeat);
      })();
    }

  // d3.select('#chart').append('g')
  //   .attr('class', 'axis')
  //   .call(xAxis);

}

## style.css
* {
  box-sizing: border-box;
}

h1 {
  font-size: 20px;
}

#chart {
  height: 100vh;
  width: 100vw;

  circle {
    max-width: 8px;
    max-width: 8px;
    overflow: hidden;
  }
}
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div id="chart"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	var r = new XMLHttpRequest();
	r.onreadystatechange = function () {
	if (r.readyState != 4 \|\| r.status != 200){
	console.log('Request Failed');
	return false;
	} else {
	var data = JSON.parse(r.responseText);
	processData(data);
	}
	};
	r.open("GET", "http://beta.json-generator.com/api/json/get/H6eos0I");
	r.send(null);

	function processData(dataset){
	var chart = document.getElementById('chart');
	var h = chart.offsetHeight;
	var w = chart.offsetWidth;

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient('bottom')
	.tickSize(16, 0);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient('left')
	.tickSize(16, 0);

	var xScale = d3.scale.linear()
	.domain([0, 100])
	.range([0, w]);

	var yScale = d3.scale.linear()
	.domain([0, 100])
	.range([h, 0]);

	d3.select('#chart').append('svg')
	.attr('height', h)
	.attr('width', w)
	.selectAll('circle')
	.data(dataset)
	.enter()
	.append('circle')
	.attr('r', 0)
	.attr('cx', 0)
	.attr('cy', h)
	.transition()
	.delay(function(d, i) { return i * 30; })
	.each(animateSingle);

	function animateSingle(){
	var circle = d3.select(this);
	(function repeat(){
	circle = circle.transition()
	.attr('r', function(d){
	return Math.ceil(Math.random()*8);
	})
	.attr('cx', function(d){
	return xScale(Math.ceil(Math.random()* 100));
	})
	.attr('cy', function(d){
	return yScale(Math.ceil(Math.random()* 100));
	})
	.transition()
	.duration(Math.ceil(Math.random() * 1000) + 500)
	.ease('elastic-out-in')
	.attr('r', function(d){
	return Math.ceil(Math.random()*4);
	})
	.attr('cx', function(d){
	return xScale(Math.ceil(Math.random()* 100));
	})
	.attr('cy', function(d){
	return yScale(Math.ceil(Math.random()* 100));
	})
	.each('end', repeat);
	})();
	}

	// d3.select('#chart').append('g')
	// .attr('class', 'axis')
	// .call(xAxis);

	}
	* {
	box-sizing: border-box;
	}

	h1 {
	font-size: 20px;
	}

	#chart {
	height: 100vh;
	width: 100vw;

	circle {
	max-width: 8px;
	max-width: 8px;
	overflow: hidden;
	}
	}