aaizemberg/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Scatterplot! - Ruspini data fuzzy clustering</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
		<style type="text/css">

			body {
				background-color: #ccc;
			}

			.buttonContainer {
				margin: 10px;
			}

			svg {
				background-color: white;
			}

			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

		</style>
	</head>
	<body>

		<script type="text/javascript">
			var w = 960;
			var h = 500;
			var padding = 40;
			var dataset;

			d3.json("ruspini.json", function(error, json) {
			  if (error) return console.warn(error);
			  dataset = json;
			  	// visualizeit();

				//Create scale functions
				var xScale = d3.scale.linear()
						.domain([0, d3.max(dataset, function(d) { return d.x; })])
						.range([padding, w - padding]);

				var yScale = d3.scale.linear()
						.domain([0, d3.max(dataset, function(d) { return d.y; })])
						.range([h - padding, padding]);

				//Define X axis
				var xAxis = d3.svg.axis()
						.scale(xScale)
						.orient("bottom")
						.ticks(5);

				//Define Y axis
				var yAxis = d3.svg.axis()
						.scale(yScale)
						.orient("left")
						.ticks(5);

				//Create SVG element
				var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

				//Create circles
				svg.append("g")
				   .attr("id", "circles")
				   .selectAll("circle")
				   .data(dataset)
				   .enter()
				   .append("circle")
				   .attr("cx", function(d) { return xScale(d.x); })
				   .attr("cy", function(d) { return yScale(d.y); })
				   .attr("r", 2);

				//Create X axis
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding + 5) + ")")
					.call(xAxis);

				//Create Y axis
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding - 5) + ",0)")
					.call(yAxis);

			});

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

## ruspini.json
[{"x":4,"y":53},
{"x":5,"y":63},
{"x":10,"y":59},
{"x":9,"y":77},
{"x":13,"y":49},
{"x":13,"y":69},
{"x":12,"y":88},
{"x":15,"y":75},
{"x":18,"y":61},
{"x":19,"y":65},
{"x":22,"y":74},
{"x":27,"y":72},
{"x":28,"y":76},
{"x":24,"y":58},
{"x":27,"y":55},
{"x":28,"y":60},
{"x":30,"y":52},
{"x":31,"y":60},
{"x":32,"y":61},
{"x":36,"y":72},
{"x":28,"y":147},
{"x":32,"y":149},
{"x":35,"y":153},
{"x":33,"y":154},
{"x":38,"y":151},
{"x":41,"y":150},
{"x":38,"y":145},
{"x":38,"y":143},
{"x":32,"y":143},
{"x":34,"y":141},
{"x":44,"y":156},
{"x":44,"y":149},
{"x":44,"y":143},
{"x":46,"y":142},
{"x":47,"y":149},
{"x":49,"y":152},
{"x":50,"y":142},
{"x":53,"y":144},
{"x":52,"y":152},
{"x":55,"y":155},
{"x":54,"y":124},
{"x":60,"y":136},
{"x":63,"y":139},
{"x":86,"y":132},
{"x":85,"y":115},
{"x":85,"y":96},
{"x":78,"y":94},
{"x":74,"y":96},
{"x":97,"y":122},
{"x":98,"y":116},
{"x":98,"y":124},
{"x":99,"y":119},
{"x":99,"y":128},
{"x":101,"y":115},
{"x":108,"y":111},
{"x":110,"y":111},
{"x":108,"y":116},
{"x":111,"y":126},
{"x":115,"y":117},
{"x":117,"y":115},
{"x":70,"y":4},
{"x":77,"y":12},
{"x":83,"y":21},
{"x":61,"y":15},
{"x":69,"y":15},
{"x":78,"y":16},
{"x":66,"y":18},
{"x":58,"y":13},
{"x":64,"y":20},
{"x":69,"y":21},
{"x":66,"y":23},
{"x":61,"y":25},
{"x":76,"y":27},
{"x":72,"y":31},
{"x":64,"y":30}]
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3: Scatterplot! - Ruspini data fuzzy clustering</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">

	body {
	background-color: #ccc;
	}

	.buttonContainer {
	margin: 10px;
	}

	svg {
	background-color: white;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>
	</head>
	<body>

	<script type="text/javascript">
	var w = 960;
	var h = 500;
	var padding = 40;
	var dataset;

	d3.json("ruspini.json", function(error, json) {
	if (error) return console.warn(error);
	dataset = json;
	// visualizeit();

	//Create scale functions
	var xScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d.x; })])
	.range([padding, w - padding]);

	var yScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) { return d.y; })])
	.range([h - padding, padding]);

	//Define X axis
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(5);

	//Define Y axis
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(5);

	//Create SVG element
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	//Create circles
	svg.append("g")
	.attr("id", "circles")
	.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return xScale(d.x); })
	.attr("cy", function(d) { return yScale(d.y); })
	.attr("r", 2);

	//Create X axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding + 5) + ")")
	.call(xAxis);

	//Create Y axis
	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding - 5) + ",0)")
	.call(yAxis);

	});

	</script>
	</body>
	</html>
	[{"x":4,"y":53},
	{"x":5,"y":63},
	{"x":10,"y":59},
	{"x":9,"y":77},
	{"x":13,"y":49},
	{"x":13,"y":69},
	{"x":12,"y":88},
	{"x":15,"y":75},
	{"x":18,"y":61},
	{"x":19,"y":65},
	{"x":22,"y":74},
	{"x":27,"y":72},
	{"x":28,"y":76},
	{"x":24,"y":58},
	{"x":27,"y":55},
	{"x":28,"y":60},
	{"x":30,"y":52},
	{"x":31,"y":60},
	{"x":32,"y":61},
	{"x":36,"y":72},
	{"x":28,"y":147},
	{"x":32,"y":149},
	{"x":35,"y":153},
	{"x":33,"y":154},
	{"x":38,"y":151},
	{"x":41,"y":150},
	{"x":38,"y":145},
	{"x":38,"y":143},
	{"x":32,"y":143},
	{"x":34,"y":141},
	{"x":44,"y":156},
	{"x":44,"y":149},
	{"x":44,"y":143},
	{"x":46,"y":142},
	{"x":47,"y":149},
	{"x":49,"y":152},
	{"x":50,"y":142},
	{"x":53,"y":144},
	{"x":52,"y":152},
	{"x":55,"y":155},
	{"x":54,"y":124},
	{"x":60,"y":136},
	{"x":63,"y":139},
	{"x":86,"y":132},
	{"x":85,"y":115},
	{"x":85,"y":96},
	{"x":78,"y":94},
	{"x":74,"y":96},
	{"x":97,"y":122},
	{"x":98,"y":116},
	{"x":98,"y":124},
	{"x":99,"y":119},
	{"x":99,"y":128},
	{"x":101,"y":115},
	{"x":108,"y":111},
	{"x":110,"y":111},
	{"x":108,"y":116},
	{"x":111,"y":126},
	{"x":115,"y":117},
	{"x":117,"y":115},
	{"x":70,"y":4},
	{"x":77,"y":12},
	{"x":83,"y":21},
	{"x":61,"y":15},
	{"x":69,"y":15},
	{"x":78,"y":16},
	{"x":66,"y":18},
	{"x":58,"y":13},
	{"x":64,"y":20},
	{"x":69,"y":21},
	{"x":66,"y":23},
	{"x":61,"y":25},
	{"x":76,"y":27},
	{"x":72,"y":31},
	{"x":64,"y":30}]