D3 Examples - ruspini data, d3js, scatterplot

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