inancgumus/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>d3 starter kit</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js"></script>
  <style id="jsbin-css">
/* Styles go here */

body {
  background-color: navy;
  color: white;
  font-family: Georgia;
  font-size: 28px;
}

div.bar {
  display: inline-block;
  width: 20px;
  height: 75px;
  background-color: teal;
  margin-right: 2px;
}

svg circle {
  fill: yellow;
}
</style>
</head>
<body>

<script id="jsbin-javascript">
'use strict';

var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]];

var viewport = { width: window.innerWidth, height: window.innerHeight };

var padding = 50;

var xScale = d3.scaleLinear().domain([0, d3.max(dataset, function (d) {
              return d[0];
})]).range([padding, viewport.width - padding]);

var yScale = d3.scaleLinear().domain([0, d3.max(dataset, function (d) {
              return d[1];
})]).range([viewport.height - padding, padding]);

var rScale = d3.scaleLinear().domain([0, d3.max(dataset, function (d) {
              return d[1];
})]).range([2, 15]).clamp(true);

var svg = d3.select('body').append('svg').attr('width', viewport.width).attr('height', viewport.height);

var circles = svg.selectAll('circle').data(dataset).enter().append('circle');

circles.transition().duration(function () {
              return Math.random(100) * 5000;
}).attr('cx', function (d) {
              return xScale(d[0]);
}).attr('cy', function (d) {
              return yScale(d[1]);
}).attr('r', function (d) {
              return rScale(d[1]);
});
</script>


<script id="jsbin-source-css" type="text/css">/* Styles go here */

body {
  background-color: navy;
  color: white;
  font-family: Georgia;
  font-size: 28px;
}

div.bar {
  display: inline-block;
  width: 20px;
  height: 75px;
  background-color: teal;
  margin-right: 2px;
}

svg circle {
  fill: yellow;
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">let dataset = [
                [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
              ]

let viewport = { width: window.innerWidth, height: window.innerHeight }

let padding = 50

let xScale = d3.scaleLinear()
              .domain([ 0, d3.max(dataset, d => d[0]) ])
              .range([ padding, viewport.width - padding ])

let yScale = d3.scaleLinear()
              .domain([ 0, d3.max(dataset, d => d[1]) ])
              .range([ viewport.height - padding, padding ])

let rScale = d3.scaleLinear()
              .domain([ 0, d3.max(dataset, d => d[1]) ])
              .range([ 2, 15 ])
              .clamp(true)

let svg = d3.select('body')
            .append('svg')
            .attr('width', viewport.width)
            .attr('height', viewport.height)

let circles = svg.selectAll('circle')
                  .data(dataset)
                  .enter()
                  .append('circle')

circles
  .transition()
  .duration(() => Math.random(100) * 5000)
  .attr('cx', d => xScale(d[0]) )
  .attr('cy', d => yScale(d[1]) )
  .attr('r', d => rScale(d[1]) )
</script></body>
</html>

## jsbin.zizunel.css
/* Styles go here */

body {
  background-color: navy;
  color: white;
  font-family: Georgia;
  font-size: 28px;
}

div.bar {
  display: inline-block;
  width: 20px;
  height: 75px;
  background-color: teal;
  margin-right: 2px;
}

svg circle {
  fill: yellow;
}

## jsbin.zizunel.js
'use strict';

var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]];

var viewport = { width: window.innerWidth, height: window.innerHeight };

var padding = 50;

var xScale = d3.scaleLinear().domain([0, d3.max(dataset, function (d) {
              return d[0];
})]).range([padding, viewport.width - padding]);

var yScale = d3.scaleLinear().domain([0, d3.max(dataset, function (d) {
              return d[1];
})]).range([viewport.height - padding, padding]);

var rScale = d3.scaleLinear().domain([0, d3.max(dataset, function (d) {
              return d[1];
})]).range([2, 15]).clamp(true);

var svg = d3.select('body').append('svg').attr('width', viewport.width).attr('height', viewport.height);

var circles = svg.selectAll('circle').data(dataset).enter().append('circle');

circles.transition().duration(function () {
              return Math.random(100) * 5000;
}).attr('cx', function (d) {
              return xScale(d[0]);
}).attr('cy', function (d) {
              return yScale(d[1]);
}).attr('r', function (d) {
              return rScale(d[1]);
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>d3 starter kit</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.js"></script>
	<style id="jsbin-css">
	/* Styles go here */

	body {
	background-color: navy;
	color: white;
	font-family: Georgia;
	font-size: 28px;
	}

	div.bar {
	display: inline-block;
	width: 20px;
	height: 75px;
	background-color: teal;
	margin-right: 2px;
	}

	svg circle {
	fill: yellow;
	}
	</style>
	</head>
	<body>

	<script id="jsbin-javascript">
	'use strict';

	var dataset = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]];

	var viewport = { width: window.innerWidth, height: window.innerHeight };

	var padding = 50;

	var xScale = d3.scaleLinear().domain([0, d3.max(dataset, function (d) {
	return d[0];
	})]).range([padding, viewport.width - padding]);

	var yScale = d3.scaleLinear().domain([0, d3.max(dataset, function (d) {
	return d[1];
	})]).range([viewport.height - padding, padding]);

	var rScale = d3.scaleLinear().domain([0, d3.max(dataset, function (d) {
	return d[1];
	})]).range([2, 15]).clamp(true);

	var svg = d3.select('body').append('svg').attr('width', viewport.width).attr('height', viewport.height);

	var circles = svg.selectAll('circle').data(dataset).enter().append('circle');

	circles.transition().duration(function () {
	return Math.random(100) * 5000;
	}).attr('cx', function (d) {
	return xScale(d[0]);
	}).attr('cy', function (d) {
	return yScale(d[1]);
	}).attr('r', function (d) {
	return rScale(d[1]);
	});
	</script>


	<script id="jsbin-source-css" type="text/css">/* Styles go here */

	body {
	background-color: navy;
	color: white;
	font-family: Georgia;
	font-size: 28px;
	}

	div.bar {
	display: inline-block;
	width: 20px;
	height: 75px;
	background-color: teal;
	margin-right: 2px;
	}

	svg circle {
	fill: yellow;
	}
	</script>

	<script id="jsbin-source-javascript" type="text/javascript">let dataset = [
	[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
	[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
	]

	let viewport = { width: window.innerWidth, height: window.innerHeight }

	let padding = 50

	let xScale = d3.scaleLinear()
	.domain([ 0, d3.max(dataset, d => d[0]) ])
	.range([ padding, viewport.width - padding ])

	let yScale = d3.scaleLinear()
	.domain([ 0, d3.max(dataset, d => d[1]) ])
	.range([ viewport.height - padding, padding ])

	let rScale = d3.scaleLinear()
	.domain([ 0, d3.max(dataset, d => d[1]) ])
	.range([ 2, 15 ])
	.clamp(true)

	let svg = d3.select('body')
	.append('svg')
	.attr('width', viewport.width)
	.attr('height', viewport.height)

	let circles = svg.selectAll('circle')
	.data(dataset)
	.enter()
	.append('circle')

	circles
	.transition()
	.duration(() => Math.random(100) * 5000)
	.attr('cx', d => xScale(d[0]) )
	.attr('cy', d => yScale(d[1]) )
	.attr('r', d => rScale(d[1]) )
	</script></body>
	</html>