D3 Examples - Exploration of K-Means clustering for PCA and tSNE

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>Clusters</title>
</head>
<body>
<style type="text/css">
    body{
        font: 20px sans-serif;
    }
​
    #select-container{
        font: 10px sans-serif;
    }
​
    .axis path,
    .axis line{
        font: 10px sans-serif;
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
​
    .dot{
        stroke: none;
    }
​
    .button1{
        height: 50px;
        width: 120px;
        font-style: sans-serif;
        position: absolute;
        top: 10%;
        left: 30%;
        background-color: lightblue;
        font-size: 10px;
    }
​
    .button2{
        height: 50px;
        width: 120px;
        font-style: sans-serif;
        position: absolute;
        top: 10%;
        left: 50%;
        background-color: lightgreen;
        font-size: 10px;
    }
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div><p>Exploration of K-Means clustering for various projection methods</p></div>
<div id="select-container"><p>Original Coordinates</p></div>
<p></p>
<button class="button1">Principal Components</button>
<p></p>
<button class="button2">tSNE</button>
​
<script type="text/javascript">
var x_var="magU";
var y_var="magU";
var cluster="clusterPC2";
​
d3.select(".button1")
    .on("click", function(){
        x_var = "PC1";
        y_var = "PC2";
        scatter(x_var, y_var, cluster);
    });
​
d3.select(".button2")
    .on("click", function(){
        x_var = "TSNE1";
        y_var = "TSNE2";
        scatter(x_var, y_var, cluster);
    });
​
function scatter(x_var, y_var, cluster){
    d3.select("svg")
        .remove();
​
    var color = d3.scale.category20();
    var margin = {top:20, right:20, bottom:30, left:40};
    var w = 960 - margin.left - margin.right;
    var h = 500 - margin.top - margin.bottom;
​
    var x = d3.scale.linear()
                .range([0,w]);
​
    var y = d3.scale.linear()
                .range([h, 0]);
​
​
​
    var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom");
​
    var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left");
​
    var svg = d3.select("body").append("svg")
                .attr("width", w + margin.left + margin.right)
                .attr("height", h + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate("+ margin.left + "," + margin.top + ")");
​
​
    d3.csv("finalOutput.csv", function(error, data){
        if (error) throw error;
        contents = data.map(function(d){
            magU = +d.cmodelmag_u;
            magG = +d.cmodelmag_g;
            magR = +d.cmodelmag_r;
            magI = +d.cmodelmag_i;
            magZ = +d.cmodelmag_z;
            PC1 = +d.PC1;
            PC2 = +d.PC2;
            TSNE1 = +d.TSNE1;
            TSNE2 = +d.TSNE2;
            clusterPC2 = d.clusterPC2;
            clusterPC3 = d.clusterPC3;
            clusterPC4 = d.clusterPC4;
            clusterPC5 = d.clusterPC5;
            clusterTSNE2 = d.clusterTSNE2;
            clusterTSNE3 = d.clusterTSNE3;
            clusterTSNE4 = d.clusterTSNE4;
            clusterTSNE5 = d.clusterTSNE5;
            return {"magU": magU, "magG":magG, "magR":magR, "magI":magI, "magZ":magZ, "PC1":PC1, "PC2":PC2, "TSNE1":TSNE1, "TSNE2":TSNE2, "clusterPC2":clusterPC2,  "clusterPC3":clusterPC3, "clusterPC4":clusterPC4, "clusterPC5":clusterPC5, "clusterTSNE2":clusterTSNE2, "clusterTSNE3":clusterTSNE3, "clusterTSNE4":clusterTSNE4, "clusterTSNE5":clusterTSNE5}
        });
​
        x.domain(d3.extent(contents, function(d){return d[x_var];})).nice();
​
​
        y.domain(d3.extent(contents, function(d){return d[y_var];})).nice();
​
​
​
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + h + ")")
            .call(xAxis)
            .append("text")
            .attr("class", "label")
            .attr("x", w)
            .attr("y", -6)
            .style("text-anchor", "end")
            .style("font", "10px sans-serif")
            .text(x_var);
​
​
​
        svg.append("g")
            .attr("class","y axis")
            .call(yAxis)
            .append("text")
            .attr("class", "label")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .style("font", "10px sans-serif")
            .text(y_var);
​
​
​
        svg.selectAll(".dot")
            .data(contents)
            .enter().append("circle")
            .attr("class", "dot")
            .attr("r", 5)
            .attr("cx", function(d){return x(d[x_var]);})
            .attr("cy", function(d){return y(d[y_var]);})
            .attr("fill", function(d){return color(d[cluster]);});
​
    }
    );
};
​
​
​
var features = ["magU", "magG", "magR", "magI", "magZ"];
var clusters = ["clusterPC2", "clusterPC3", "clusterPC4", "clusterPC5", "clusterTSNE2", "clusterTSNE3", "clusterTSNE4", "clusterTSNE5"];
​
​
var dropdownX = d3.select('#select-container').append("p").text("X-axis ").append("select")
    .attr("name", "country-list");
​
var optionsX = dropdownX.selectAll("option")
        .data(features)
        .enter().append("option");
​
optionsX.text(function(d){return d;})
​
dropdownX.on("change", menuChangedX);
​
function menuChangedX(){
    var selectedValue = d3.event.target.value;
    x_var = selectedValue;
    scatter(x_var, y_var, cluster);
}
​
var dropdownY = d3.select('#select-container').append("p").text("Y-axis ").append("select")
    .attr("name", "country-list1");
​
var optionsY = dropdownY.selectAll("option")
        .data(features)
        .enter().append("option");
​
optionsY.text(function(d){return d;})
​
dropdownY.on("change", menuChangedY);
​
function menuChangedY(){
    var selectedValue = d3.event.target.value;
    y_var = selectedValue;
    scatter(x_var, y_var, cluster);
}
​
​
var dropdownColor = d3.select('#select-container').append("p").text("Number of clusters ").append("select")
    .attr("name", "clusters");
​
var options = dropdownColor.selectAll("option")
    .data(clusters)
    .enter().append("option")
​
options.text(function(d){return d;})
​
​
dropdownColor.on("change", menuChangedColor);
function menuChangedColor(){
    var selectedValue = d3.event.target.value;
    cluster = selectedValue;
    scatter(x_var, y_var, cluster);
}
​
</script>
​
</body>
</html>
    