MNoichl/.block

## .block
license: mit

## README.md

      
        

                
      Raw
    
  

        
        
          
            
          
          
            
              README.md
            
          
        
      
      
    A Principle Component Analysis of the Citation-Data of 2000 Philosophy-Articles from the 90s.
Clusters are generated with K-Means.
The Scatterplot is forked from peterssonjonas's block: D3 Zoomable Scatterplot
forked from MNoichl's block: PCA 2000 Philososophy-Articles

  

  

## cereal.csv

          
            id
            W
            DW

            
              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

## 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 = "id",
    yCat = "DW",
    rCat = "c1",
    colorCat = "cluster";

d3.csv("cereal.csv", function(data) {
  data.forEach(function(d) {
    d.DW = +d.DW;
    d.id = +d.id;
    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]; }),
      yMin = yMin > 0 ? 0 : yMin;

  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]) + ")";
  }
});
id	W	DW
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
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 = "id",
	yCat = "DW",
	rCat = "c1",
	colorCat = "cluster";

	d3.csv("cereal.csv", function(data) {
	data.forEach(function(d) {
	d.DW = +d.DW;
	d.id = +d.id;
	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]; }),
	yMin = yMin > 0 ? 0 : yMin;

	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]) + ")";
	}
	});