<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Scatterplot! - Ruspini data fuzzy clustering</title>
<script type="text/javascript" src="//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}]