MNoichl/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    The Davies-Bouldin-Indexes for K-Means-Clustering of the Citation-Data of the top 2000 Papers from the 1990s. A low index indicates good clustering, which means that the clusters have high internal consistency and are very different to each other So we can say that the hypothesis of two clusters (eg. analytic and continental philosophy) seems not particulary merited (DB = 9.2), expecially when compared to 15 clusters, which yields a DB of 5.9.

  
## cereal.csv

          
            k
            DB
            W

            
              2.0
              9.219828850059798
              12.976655501855447

            
              3.0
              8.174391017811976
              12.84340697536619

            
              4.0
              8.069992140114882
              12.778389898128088

            
              5.0
              7.710292091124179
              12.72584064457396

            
              6.0
              7.675416467944792
              12.668985155761094

            
              7.0
              7.42623343367834
              12.608135649424781

            
              8.0
              6.80945610891093
              12.57738118949323

            
              9.0
              6.630444372458767
              12.545205895828678

            
              10.0
              6.697518866817044
              12.463360154747386

            
              11.0
              6.452127401847977
              12.42548799945294

            
              12.0
              6.505250270223303
              12.34583368367151

            
              13.0
              6.382875962909754
              12.342424499338742

            
              14.0
              6.0599112365788566
              12.279129120748813

            
              15.0
              5.926985977244955
              12.249096728228382

            
              16.0
              5.97058392643043
              12.222034370452322

            
              17.0
              6.024524891495337
              12.209850909388564

## cereal.tsv

          
            cluster
            c1
            c2

            
              2.0
              6.094098448068141
              15.60462332764012

            
              3.0
              5.025815402832417
              15.23494344194712

            
              4.0
              5.263199487005986
              15.1056213251487

            
              5.0
              4.891657492989145
              14.982829414717433

            
              6.0
              4.709492354136956
              14.905587842458099

            
              7.0
              5.143533078325832
              14.693552112932617

            
              8.0
              4.8764989589400045
              14.66691663114093

            
              9.0
              4.8333751618645096
              14.516567432196636

            
              10.0
              4.603408631388721
              14.440741525661632

            
              11.0
              4.462243132206957
              14.337444987117259

            
              12.0
              4.436149903184536
              14.361224075743785

            
              13.0
              4.626023700329075
              14.163712514620748

## index.html
<html>
  <head>
    <meta charset="utf-8">
    <title>Visualization</title>
    <link rel="stylesheet" href="scatter.css" charset="utf-8">
  </head>
  <body>
    <div id="scatter"></div>

    <input type="button" name="xAxis" value="xAxis">

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
    <script src="scatter.js" charset="utf-8"></script>
  </body>
</html>

## scatter.css
rect {
  fill: transparent;
  shape-rendering: crispEdges;
}

.axis path,
.axis line {
  fill: none;
  stroke: rgba(0, 0, 0, 0.1);
  shape-rendering: crispEdges;
}

.axisLine {
  fill: none;
  shape-rendering: crispEdges;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 2px;
}

.dot {
  fill-opacity: .5;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

## scatter.js
var margin = { top: 50, right: 300, bottom: 50, left: 50 },
    outerWidth = 1050,
    outerHeight = 500,
    width = outerWidth - margin.left - margin.right,
    height = outerHeight - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]).nice();

var y = d3.scale.linear()
    .range([height, 0]).nice();

var xCat = "k",
    yCat = "DB",
    rCat = "c1",
    colorCat = "cluster";

d3.csv("cereal.csv", function(data) {
  data.forEach(function(d) {
    d.DB = +d.DB;
    d.k = +d.k;
    d["Protein (g)"] = +d["Protein (g)"];
    d["Serving Size Weight"] = +d["Serving Size Weight"];
    d.Sodium = +d.Sodium;
    d.Sugars = +d.Sugars;
    d["Vitamins and Minerals"] = +d["Vitamins and Minerals"];
  });

  var xMax = d3.max(data, function(d) { return d[xCat]; }) * 1.05,
      xMin = d3.min(data, function(d) { return d[xCat]; }),
      xMin = xMin > 0 ? 0 : xMin,
      yMax = d3.max(data, function(d) { return d[yCat]; }) * 1.05,
      yMin = d3.min(data, function(d) { return d[yCat]; }) / 1.05;

  x.domain([xMin, xMax]);
  y.domain([yMin, yMax]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickSize(-height);

  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickSize(-width);

  var color = d3.scale.category20();

  var tip = d3.tip()
      .attr("class", "d3-tip")
      .offset([-10, 0])
      .html(function(d) {
        return xCat + ": " + d[xCat] + "<br>" + yCat + ": " + d[yCat];
      });

  var zoomBeh = d3.behavior.zoom()
      .x(x)
      .y(y)
      .scaleExtent([0, 500])
      .on("zoom", zoom);

  var svg = d3.select("#scatter")
    .append("svg")
      .attr("width", outerWidth)
      .attr("height", outerHeight)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoomBeh);

  svg.call(tip);

  svg.append("rect")
      .attr("width", width)
      .attr("height", height);

  svg.append("g")
      .classed("x axis", true)
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .classed("label", true)
      .attr("x", width)
      .attr("y", margin.bottom - 10)
      .style("text-anchor", "end")
      .text(xCat);

  svg.append("g")
      .classed("y axis", true)
      .call(yAxis)
    .append("text")
      .classed("label", true)
      .attr("transform", "rotate(-90)")
      .attr("y", -margin.left)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text(yCat);

  var objects = svg.append("svg")
      .classed("objects", true)
      .attr("width", width)
      .attr("height", height);

  objects.append("svg:line")
      .classed("axisLine hAxisLine", true)
      .attr("x1", 0)
      .attr("y1", 0)
      .attr("x2", width)
      .attr("y2", 0)
      .attr("transform", "translate(0," + height + ")");

  objects.append("svg:line")
      .classed("axisLine vAxisLine", true)
      .attr("x1", 0)
      .attr("y1", 0)
      .attr("x2", 0)
      .attr("y2", height);

  objects.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .classed("dot", true)
      .attr("r", 3)//function (d) { return 6 * Math.sqrt(d[rCat] / Math.PI); }
      .attr("transform", transform)
      .style("fill", function(d) { return color(d[colorCat]); })
      .on("mouseover", tip.show)
      .on("mouseout", tip.hide);

  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .classed("legend", true)
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("circle")
      .attr("r", 3.5)
      .attr("cx", width + 20)
      .attr("fill", color);

  legend.append("text")
      .attr("x", width + 26)
      .attr("dy", ".35em")
      .text(function(d) { return d; });

  d3.select("input").on("click", change);

  function change() {
    xCat = "Carbs";
    xMax = d3.max(data, function(d) { return d[xCat]; });
    xMin = d3.min(data, function(d) { return d[xCat]; });

    zoomBeh.x(x.domain([xMin, xMax])).y(y.domain([yMin, yMax]));

    var svg = d3.select("#scatter").transition();

    svg.select(".x.axis").duration(750).call(xAxis).select(".label").text(xCat);

    objects.selectAll(".dot").transition().duration(1000).attr("transform", transform);
  }

  function zoom() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);

    svg.selectAll(".dot")
        .attr("transform", transform);
  }

  function transform(d) {
    return "translate(" + x(d[xCat]) + "," + y(d[yCat]) + ")";
  }
});
k	DB	W
2.0	9.219828850059798	12.976655501855447
3.0	8.174391017811976	12.84340697536619
4.0	8.069992140114882	12.778389898128088
5.0	7.710292091124179	12.72584064457396
6.0	7.675416467944792	12.668985155761094
7.0	7.42623343367834	12.608135649424781
8.0	6.80945610891093	12.57738118949323
9.0	6.630444372458767	12.545205895828678
10.0	6.697518866817044	12.463360154747386
11.0	6.452127401847977	12.42548799945294
12.0	6.505250270223303	12.34583368367151
13.0	6.382875962909754	12.342424499338742
14.0	6.0599112365788566	12.279129120748813
15.0	5.926985977244955	12.249096728228382
16.0	5.97058392643043	12.222034370452322
17.0	6.024524891495337	12.209850909388564
cluster	c1	c2
2.0	6.094098448068141	15.60462332764012
3.0	5.025815402832417	15.23494344194712
4.0	5.263199487005986	15.1056213251487
5.0	4.891657492989145	14.982829414717433
6.0	4.709492354136956	14.905587842458099
7.0	5.143533078325832	14.693552112932617
8.0	4.8764989589400045	14.66691663114093
9.0	4.8333751618645096	14.516567432196636
10.0	4.603408631388721	14.440741525661632
11.0	4.462243132206957	14.337444987117259
12.0	4.436149903184536	14.361224075743785
13.0	4.626023700329075	14.163712514620748
	<html>
	<head>
	<meta charset="utf-8">
	<title>Visualization</title>
	<link rel="stylesheet" href="scatter.css" charset="utf-8">
	</head>
	<body>
	<div id="scatter"></div>

	<input type="button" name="xAxis" value="xAxis">

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<script src="scatter.js" charset="utf-8"></script>
	</body>
	</html>
	rect {
	fill: transparent;
	shape-rendering: crispEdges;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: rgba(0, 0, 0, 0.1);
	shape-rendering: crispEdges;
	}

	.axisLine {
	fill: none;
	shape-rendering: crispEdges;
	stroke: rgba(0, 0, 0, 0.5);
	stroke-width: 2px;
	}

	.dot {
	fill-opacity: .5;
	}

	.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
	}

	/* Creates a small triangle extender for the tooltip */
	.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}

	/* Style northward tooltips differently */
	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}
	var margin = { top: 50, right: 300, bottom: 50, left: 50 },
	outerWidth = 1050,
	outerHeight = 500,
	width = outerWidth - margin.left - margin.right,
	height = outerHeight - margin.top - margin.bottom;

	var x = d3.scale.linear()
	.range([0, width]).nice();

	var y = d3.scale.linear()
	.range([height, 0]).nice();

	var xCat = "k",
	yCat = "DB",
	rCat = "c1",
	colorCat = "cluster";

	d3.csv("cereal.csv", function(data) {
	data.forEach(function(d) {
	d.DB = +d.DB;
	d.k = +d.k;
	d["Protein (g)"] = +d["Protein (g)"];
	d["Serving Size Weight"] = +d["Serving Size Weight"];
	d.Sodium = +d.Sodium;
	d.Sugars = +d.Sugars;
	d["Vitamins and Minerals"] = +d["Vitamins and Minerals"];
	});

	var xMax = d3.max(data, function(d) { return d[xCat]; }) * 1.05,
	xMin = d3.min(data, function(d) { return d[xCat]; }),
	xMin = xMin > 0 ? 0 : xMin,
	yMax = d3.max(data, function(d) { return d[yCat]; }) * 1.05,
	yMin = d3.min(data, function(d) { return d[yCat]; }) / 1.05;

	x.domain([xMin, xMax]);
	y.domain([yMin, yMax]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.tickSize(-height);

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickSize(-width);

	var color = d3.scale.category20();

	var tip = d3.tip()
	.attr("class", "d3-tip")
	.offset([-10, 0])
	.html(function(d) {
	return xCat + ": " + d[xCat] + "<br>" + yCat + ": " + d[yCat];
	});

	var zoomBeh = d3.behavior.zoom()
	.x(x)
	.y(y)
	.scaleExtent([0, 500])
	.on("zoom", zoom);

	var svg = d3.select("#scatter")
	.append("svg")
	.attr("width", outerWidth)
	.attr("height", outerHeight)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
	.call(zoomBeh);

	svg.call(tip);

	svg.append("rect")
	.attr("width", width)
	.attr("height", height);

	svg.append("g")
	.classed("x axis", true)
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.classed("label", true)
	.attr("x", width)
	.attr("y", margin.bottom - 10)
	.style("text-anchor", "end")
	.text(xCat);

	svg.append("g")
	.classed("y axis", true)
	.call(yAxis)
	.append("text")
	.classed("label", true)
	.attr("transform", "rotate(-90)")
	.attr("y", -margin.left)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text(yCat);

	var objects = svg.append("svg")
	.classed("objects", true)
	.attr("width", width)
	.attr("height", height);

	objects.append("svg:line")
	.classed("axisLine hAxisLine", true)
	.attr("x1", 0)
	.attr("y1", 0)
	.attr("x2", width)
	.attr("y2", 0)
	.attr("transform", "translate(0," + height + ")");

	objects.append("svg:line")
	.classed("axisLine vAxisLine", true)
	.attr("x1", 0)
	.attr("y1", 0)
	.attr("x2", 0)
	.attr("y2", height);

	objects.selectAll(".dot")
	.data(data)
	.enter().append("circle")
	.classed("dot", true)
	.attr("r", 3)//function (d) { return 6 * Math.sqrt(d[rCat] / Math.PI); }
	.attr("transform", transform)
	.style("fill", function(d) { return color(d[colorCat]); })
	.on("mouseover", tip.show)
	.on("mouseout", tip.hide);

	var legend = svg.selectAll(".legend")
	.data(color.domain())
	.enter().append("g")
	.classed("legend", true)
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	legend.append("circle")
	.attr("r", 3.5)
	.attr("cx", width + 20)
	.attr("fill", color);

	legend.append("text")
	.attr("x", width + 26)
	.attr("dy", ".35em")
	.text(function(d) { return d; });

	d3.select("input").on("click", change);

	function change() {
	xCat = "Carbs";
	xMax = d3.max(data, function(d) { return d[xCat]; });
	xMin = d3.min(data, function(d) { return d[xCat]; });

	zoomBeh.x(x.domain([xMin, xMax])).y(y.domain([yMin, yMax]));

	var svg = d3.select("#scatter").transition();

	svg.select(".x.axis").duration(750).call(xAxis).select(".label").text(xCat);

	objects.selectAll(".dot").transition().duration(1000).attr("transform", transform);
	}

	function zoom() {
	svg.select(".x.axis").call(xAxis);
	svg.select(".y.axis").call(yAxis);

	svg.selectAll(".dot")
	.attr("transform", transform);
	}

	function transform(d) {
	return "translate(" + x(d[xCat]) + "," + y(d[yCat]) + ")";
	}
	});